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-thinking-row.tsx

@@ -1,5 +1,6 @@
 import Row from "@moduletrace/twui/layout/Row";
 import Span from "@moduletrace/twui/layout/Span";
+import Stack from "@moduletrace/twui/layout/Stack";
 import BotStone from "@/src/components/general/bot-stone";
 import type { BotHue } from "@/src/dict/bot-dict";
 import { BotReplyJobTitle, BotWaitingStatusLine } from "@/src/dict/bot-queue-dict";
@@ -7,28 +8,49 @@ import type { BotWithLastMessage } from "@/src/types";
 
 type Props = {
     bot: BotWithLastMessage;
+    /**
+     * The latest step of the bot's active task.
+     */
+    progress?: string | null;
 };
 
 /**
- * Under the last message while the bot is working on a reply (or waiting
- * for a model to come back), so a slow reply doesn't look like none.
+ * Under the last message while the bot is working on a reply or a task
+ * (or waiting for a model to come back), so slow work doesn't look like
+ * none. A task shows its latest step, else its title.
  */
-export default function BotThinkingRow({ bot }: Props) {
+export default function BotThinkingRow({ bot, progress }: Props) {
+    const name = bot.name || "The bot";
     const thinking = bot.face == "working" && bot.status_line == BotReplyJobTitle;
+    const working = bot.face == "working" && !thinking;
     const waiting = bot.face == "asleep" && bot.status_line == BotWaitingStatusLine;
 
-    if (!thinking && !waiting) return null;
+    if (!thinking && !working && !waiting) return null;
+
+    const label = thinking
+        ? `${name} is thinking…`
+        : working
+          ? `${name} is working…`
+          : `${BotWaitingStatusLine}…`;
+    const detail = working ? progress || bot.status_line : null;
 
     return (
         <Row role="status" className="w-full gap-3! flex-nowrap items-center">
             <BotStone
                 hue={(bot.hue || null) as BotHue | null}
-                face={thinking ? "working" : "asleep"}
+                face={waiting ? "asleep" : "working"}
                 size={28}
             />
-            <Span className="text-sm leading-5 text-ink-secondary animate-pulse motion-reduce:animate-none">
-                {thinking ? `${bot.name || "The bot"} is thinking…` : `${BotWaitingStatusLine}…`}
-            </Span>
+            <Stack className="min-w-0 gap-0! items-start">
+                <Span className="text-sm leading-5 text-ink-secondary animate-pulse motion-reduce:animate-none">
+                    {label}
+                </Span>
+                {detail ? (
+                    <Span className="w-full text-xs leading-4 text-ink-secondary truncate">
+                        {detail}
+                    </Span>
+                ) : null}
+            </Stack>
         </Row>
     );
 }