Add computer switching, crew reporting, job steps and markdown chat

- Bots have a current computer (bots.computer_id), switched from the chat
  header beside the model button or by clicking a computer the bot names
  ([computer:ID]); tasks run on it by default
- search_computers runs one read-only command on all of a bot's computers;
  chat replies know their computers (compose-computers-note)
- The coordinator can use every computer and grants or revokes crew access
  with assign_computer
- Delegated jobs record requested_by_bot_id; the worker's result or failure
  is reported back in the coordinator's conversation
- bots_queue_updates records each model turn of a job, pushed live and shown
  in the working-on panel
- Live relay: every process pushes new messages, job steps and bot changes
  from the database to its own sockets, so work done elsewhere shows live
- Bot messages render as markdown (react-markdown + remark-gfm, no raw HTML)
  with twui components; rail previews are plain text
- Fix header button overflow in the model and computer selects
- Bump @moduletrace/twui to 0.1.2

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

src/pages/admin/bots/[bot_id]/(data)/bot-computers-context.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import type { BotComputers } from "../(hooks)/use-bot-computers";
+
+/**
+ * The open bot's computers and the switch, shared by the header's
+ * computer select and the computer buttons in its messages.
+ */
+export const BotComputersContext = React.createContext<BotComputers>({
+    computers: [],
+    switchComputer: async () => {},
+});

src/pages/admin/bots/[bot_id]/(data)/message-markdown-components.tsx

@@ -0,0 +1,70 @@
+import type { Components } from "react-markdown";
+import Divider from "@moduletrace/twui/layout/Divider";
+import H3 from "@moduletrace/twui/layout/H3";
+import H4 from "@moduletrace/twui/layout/H4";
+import H5 from "@moduletrace/twui/layout/H5";
+import P from "@moduletrace/twui/layout/P";
+import Span from "@moduletrace/twui/layout/Span";
+import Stack from "@moduletrace/twui/layout/Stack";
+import MarkdownCodeBlock from "../(partials)/markdown-code-block";
+import MarkdownLink from "../(partials)/markdown-link";
+import MarkdownList from "../(partials)/markdown-list";
+
+const HeadingClassName = "my-0! text-[15px]! leading-6! tracking-normal! font-bold text-ink";
+
+/**
+ * How a bot message's markdown renders: chat-sized twui elements (headings
+ * no bigger than the bot's name), lists through twui's `List`, code on the
+ * sunken surface, and links that open in a new tab or switch computers.
+ * Tables (GFM) have no children-based twui equivalent, so they're styled
+ * elements.
+ */
+export const MessageMarkdownComponents: Components = {
+    p: ({ children }) => (
+        <P noMargin className="text-sm leading-5 text-ink">
+            {children}
+        </P>
+    ),
+    h1: ({ children }) => <H3 className={HeadingClassName}>{children}</H3>,
+    h2: ({ children }) => <H3 className={HeadingClassName}>{children}</H3>,
+    h3: ({ children }) => <H4 className={HeadingClassName}>{children}</H4>,
+    h4: ({ children }) => <H5 className={HeadingClassName}>{children}</H5>,
+    h5: ({ children }) => <H5 className={HeadingClassName}>{children}</H5>,
+    h6: ({ children }) => <H5 className={HeadingClassName}>{children}</H5>,
+    strong: ({ children }) => <Span className="font-bold">{children}</Span>,
+    em: ({ children }) => <Span className="italic">{children}</Span>,
+    del: ({ children }) => <Span className="line-through">{children}</Span>,
+    a: MarkdownLink,
+    ul: ({ children }) => <MarkdownList>{children}</MarkdownList>,
+    ol: ({ children, start }) => (
+        <MarkdownList ordered start={start}>
+            {children}
+        </MarkdownList>
+    ),
+    code: ({ children }) => (
+        <Span className="font-mono text-[13px] px-1 py-px rounded-default-xs bg-sunken text-ink break-words">
+            {children}
+        </Span>
+    ),
+    pre: ({ children }) => <MarkdownCodeBlock>{children}</MarkdownCodeBlock>,
+    blockquote: ({ children }) => (
+        <Stack className="gap-2! items-stretch pl-3 border-0 border-l-2 border-solid border-hairline-strong text-ink-secondary">
+            {children}
+        </Stack>
+    ),
+    hr: () => <Divider className="my-1 border-hairline dark:border-hairline" />,
+    img: ({ src, alt }) => (
+        <MarkdownLink href={typeof src == "string" ? src : undefined}>{alt || "Image"}</MarkdownLink>
+    ),
+    table: ({ children }) => (
+        <Stack className="w-full max-w-full overflow-x-auto items-start">
+            <table className="text-[13px] leading-5 text-ink border-collapse">{children}</table>
+        </Stack>
+    ),
+    th: ({ children }) => (
+        <th className="px-3 py-1.5 text-left font-bold border border-solid border-hairline">{children}</th>
+    ),
+    td: ({ children }) => (
+        <td className="px-3 py-1.5 align-top border border-solid border-hairline">{children}</td>
+    ),
+};