Open computers from the chat, let bots ask for a take-over, show task progress

- 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]>
2026-10-19 05:35:44 +01:00
parent b1023ba8ff
commit 56daf0c462
44 changed files with 1289 additions and 75 deletions
@@ -0,0 +1,43 @@
+import { useContext } from "react";
+import Button from "@moduletrace/twui/layout/Button";
+import Span from "@moduletrace/twui/layout/Span";
+import { Hand } from "lucide-react";
+import { ComputerViewModes, type ComputerViewMode } from "@/src/dict/computer-dict";
+import { BotComputersContext } from "../(data)/bot-computers-context";
+
+type Props = {
+    computer_id: number;
+    mode: ComputerViewMode;
+};
+
+/**
+ * The bot asked the user to take over a computer (`takeOverRef`): a
+ * button that opens it in the viewer, in the mode the bot asked for. A
+ * computer the bot can't use (any more) is shown by name only.
+ */
+export default function TakeOverChip({ computer_id, mode }: Props) {
+    const { computers, openComputer } = useContext(BotComputersContext);
+
+    const computer = computers.find((c) => c.id == computer_id);
+    const name = computer?.name || `computer ${computer_id}`;
+    const mode_title = ComputerViewModes.find((m) => m.value == mode)?.title || mode;
+
+    if (!computer) {
+        return <Span className="font-bold">{name}</Span>;
+    }
+
+    return (
+        <Button
+            type="button"
+            variant="outlined"
+            color="gray"
+            size="smaller"
+            title={`Open ${name} (${mode_title}) and take over`}
+            onClick={() => openComputer({ computer_id, mode, take_over: true })}
+            className="inline-flex h-6 gap-1.5! flex-nowrap align-middle px-2! text-[13px] font-bold text-ink whitespace-nowrap"
+        >
+            <Hand size={14} aria-hidden className="shrink-0" />
+            {`Take over ${name} · ${mode_title}`}
+        </Button>
+    );
+}