tbenandClaude Opus 5.5
56daf0c462
- Serve each computer to its owner under /computers/<id>/ (HTTP and websockets proxied to the AIO sandbox) and show it in a shared ComputerView with browser, terminal and code modes, opened from the computers modal or a take-over button in the thread. - ask_user_to_take_over lets a bot hand a computer to the user for a login or captcha; the message gets a take-over button and needs-you, and the viewer hands it back with a chat message. - While a task runs the thread shows "<bot> is working..." with the task's latest step; steps read as plain words, not tool names. - A coordinator with no workers no longer claims to delegate, and bots describe started tasks in the first person. Co-Authored-By: Claude Opus 5.5 <[email protected]>
71 lines
2.6 KiB
TypeScript
71 lines
2.6 KiB
TypeScript
import Button from "@moduletrace/twui/layout/Button";
|
|
import Row from "@moduletrace/twui/layout/Row";
|
|
import Span from "@moduletrace/twui/layout/Span";
|
|
import Stack from "@moduletrace/twui/layout/Stack";
|
|
import { AppWindow, Check } from "lucide-react";
|
|
import type { BUN_SQLITE_COBBLE_COMPUTERS } from "@/db/types/db";
|
|
|
|
type Props = {
|
|
computer: BUN_SQLITE_COBBLE_COMPUTERS;
|
|
/**
|
|
* The computer the bot is on.
|
|
*/
|
|
current: boolean;
|
|
onPick: () => void;
|
|
/**
|
|
* Opens the computer in the viewer.
|
|
*/
|
|
onOpen: () => void;
|
|
};
|
|
|
|
/**
|
|
* One computer in the header's computers modal, checked when it's the
|
|
* one the bot is on, with a button that opens it.
|
|
*/
|
|
export default function BotComputerOption({ computer, current, onPick, onOpen }: Props) {
|
|
const name = computer.name || `Computer ${computer.id}`;
|
|
|
|
return (
|
|
<Row className="w-full gap-1! flex-nowrap items-center pr-2 hover:bg-sunken transition-colors duration-[var(--m-fast)]">
|
|
<Row
|
|
role="radio"
|
|
aria-checked={current}
|
|
tabIndex={0}
|
|
onClick={current ? undefined : onPick}
|
|
onKeyDown={(e) => {
|
|
if (!current && (e.key == "Enter" || e.key == " ")) {
|
|
e.preventDefault();
|
|
onPick();
|
|
}
|
|
}}
|
|
className={`grow min-w-0 min-h-9 gap-2.5! flex-nowrap items-center px-4 py-1.5 text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ink ${
|
|
current ? "cursor-default" : "cursor-pointer"
|
|
}`}
|
|
>
|
|
<Check size={16} aria-hidden className={`shrink-0 ${current ? "" : "invisible"}`} />
|
|
<Stack className="min-w-0 gap-0!">
|
|
<Span className="text-sm leading-5 text-ink truncate w-full">
|
|
{name}
|
|
</Span>
|
|
{computer.description ? (
|
|
<Span className="text-[13px] leading-[18px] text-ink-secondary truncate w-full">
|
|
{computer.description}
|
|
</Span>
|
|
) : null}
|
|
</Stack>
|
|
</Row>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
color="text"
|
|
title={`Open ${name}`}
|
|
aria-label={`Open ${name}`}
|
|
onClick={onOpen}
|
|
className="shrink-0 p-2! text-ink-secondary dark:text-ink-secondary hover:text-ink hover:dark:text-ink rounded-default focus-visible:ring-2 focus-visible:ring-ink"
|
|
>
|
|
<AppWindow size={16} aria-hidden />
|
|
</Button>
|
|
</Row>
|
|
);
|
|
}
|