Tidy the bot chat: icon header controls, status in the rail, narrower thread

Drop the working-on panel. Rail rows show the bot's status line first.
The header's computer and model controls are ghost icons opening modals
that explain them, and the bot's text model, provider and computer show
under its name. The thread and composer are held to 760px.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

src/pages/admin/bots/[bot_id]/(sections)/conversation.tsx

@@ -12,8 +12,9 @@ import MessageThread from "../(partials)/message-thread";
 import Composer from "../(partials)/composer";
 
 /**
- * The 900px conversation column: header, bottom-anchored thread, composer.
- * The bot's computers are shared with the header's select and the computer
+ * The conversation column: header, bottom-anchored thread, composer, the
+ * thread and composer held to a readable width.
+ * The bot's computers are shared with the header's modal and the computer
  * buttons in the thread, so a switch from either shows in both.
  */
 export default function Conversation() {
@@ -56,7 +57,6 @@ export default function Conversation() {
             <Stack className="grow min-w-0 h-full gap-0! items-stretch">
                 <ConversationHeader
                     bot={live_bot}
-                    bots={bots}
                     harnesses={pageProps?.bot_harness_overview?.harnesses}
                 />
                 <MessageThread bot={live_bot} messages={messages} />

src/pages/admin/bots/[bot_id]/(sections)/working-on-panel.tsx

@@ -1,83 +0,0 @@
-import { useContext, useState } from "react";
-import Stack from "@moduletrace/twui/layout/Stack";
-import Span from "@moduletrace/twui/layout/Span";
-import H2 from "@moduletrace/twui/layout/H2";
-import { AppContext } from "@/src/pages/__root";
-import useServerEvent from "@/src/hooks/use-server-event";
-import { AppData } from "@/src/data/app-data";
-import type { BotJobUpdateData, BotUpdatedData } from "@/src/types";
-import TaskStepRow from "../(partials)/task-step-row";
-import OpenComputerButton from "../(partials)/open-computer-button";
-
-/**
- * 280px panel listing the steps the bot is taking, kept current by the
- * active task each `server:bot-updated` push carries. Without planned
- * steps it shows what the task's job has done (`bots_queue_updates`), the
- * newest as in progress, appended live from `server:bot-job-update`.
- * Hidden below 1280px.
- */
-export default function WorkingOnPanel() {
-    const { pageProps } = useContext(AppContext);
-    const bot_id = pageProps?.bot?.id;
-    const [task, setTask] = useState(pageProps?.bot_task);
-
-    useServerEvent({
-        event: "server:bot-updated",
-        onData: (data: BotUpdatedData) => {
-            if (data.id == bot_id) setTask(data.task);
-        },
-    });
-
-    useServerEvent({
-        event: "server:bot-job-update",
-        onData: (data: BotJobUpdateData) => {
-            setTask((prev) =>
-                prev?.id && prev.id == data.task_id && !prev.updates.some((u) => u.id == data.id)
-                    ? { ...prev, updates: [...prev.updates, data].slice(-AppData.BotJobUpdatesShown) }
-                    : prev,
-            );
-        },
-    });
-
-    return (
-        <Stack
-            className="hidden xl:flex w-[280px] shrink-0 h-full gap-0! items-stretch px-6 border-0 border-l border-solid border-hairline"
-            aria-label="Working on"
-        >
-            <Span className="pt-[34px] text-xs font-bold leading-4 tracking-[0.06em] uppercase text-ink-secondary">
-                Working on
-            </Span>
-            {task ? (
-                <>
-                    <H2 className="mt-2.5 text-sm! leading-5! tracking-normal! font-bold text-ink">
-                        {task.title}
-                    </H2>
-                    <Stack className="mt-4 gap-0! items-stretch">
-                        {task.steps.length
-                            ? task.steps.map((step) => (
-                                  <TaskStepRow
-                                      key={step.id}
-                                      label={step.label || ""}
-                                      state={step.state || "pending"}
-                                  />
-                              ))
-                            : task.updates.map((update, index) => (
-                                  <TaskStepRow
-                                      key={update.id}
-                                      label={update.text || ""}
-                                      state={index == task.updates.length - 1 ? "active" : "done"}
-                                  />
-                              ))}
-                    </Stack>
-                </>
-            ) : (
-                <Span className="mt-2.5 text-[13px] leading-5 text-ink-secondary">
-                    Nothing in progress.
-                </Span>
-            )}
-            <Stack className="mt-auto h-[88px] shrink-0 gap-0! items-stretch justify-center">
-                {task ? <OpenComputerButton url={task.computer_url} /> : null}
-            </Stack>
-        </Stack>
-    );
-}