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]>

src/pages/admin/bots/[bot_id]/(partials)/bot-computer-option.tsx

@@ -1,7 +1,8 @@
+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 { Check } from "lucide-react";
+import { AppWindow, Check } from "lucide-react";
 import type { BUN_SQLITE_COBBLE_COMPUTERS } from "@/db/types/db";
 
 type Props = {
@@ -11,14 +12,21 @@ type Props = {
      */
     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.
+ * one the bot is on, with a button that opens it.
  */
-export default function BotComputerOption({ computer, current, onPick }: Props) {
+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}
@@ -30,14 +38,14 @@ export default function BotComputerOption({ computer, current, onPick }: Props)
                     onPick();
                 }
             }}
-            className={`w-full min-h-9 gap-2.5! flex-nowrap items-center px-4 py-1.5 text-ink transition-colors duration-[var(--m-fast)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ink ${
-                current ? "cursor-default" : "cursor-pointer hover:bg-sunken"
+            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">
-                    {computer.name || `Computer ${computer.id}`}
+                    {name}
                 </Span>
                 {computer.description ? (
                     <Span className="text-[13px] leading-[18px] text-ink-secondary truncate w-full">
@@ -46,5 +54,17 @@ export default function BotComputerOption({ computer, current, onPick }: Props)
                 ) : 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>
     );
 }