Build Cobble project structure from the handoff

- Remove the preset document suite (letters, emails, invoices, quotes, PDF generation, line items) with its routes, API handlers and tables - Rebrand to Cobble: site data, Lato, handoff design tokens (light and dark) in main.css, brand assets in public/brand, ember stone logo and regenerated favicons - Add bots, bot_messages, bot_tasks and bot_task_steps tables, regenerate DB types (BUN_SQLITE_COBBLE_*) and add a sample crew seed (seed:bots) - Add the chat shell at /admin/bots: rail with pinned coordinator and user popover, bottom-anchored conversation with composer, working-on panel, and a send-message API scoped to the session user - Add BotStone and Wordmark components, crew status and relative time utils with tests, and update AGENTS.md Co-Authored-By: Claude Opus 5.5 <[email protected]>
2026-10-18 17:10:36 +01:00
parent 81e4a8aecc
commit 3286b80029
340 changed files with 3161 additions and 12060 deletions
@@ -0,0 +1,34 @@
+import { useContext, useState } from "react";
+import Stack from "@moduletrace/twui/layout/Stack";
+import type { BUN_SQLITE_COBBLE_BOT_MESSAGES } from "@/db/types/db";
+import { AppContext } from "@/src/pages/__root";
+import ConversationHeader from "../(partials)/conversation-header";
+import MessageThread from "../(partials)/message-thread";
+import Composer from "../(partials)/composer";
+
+/**
+ * The 900px conversation column: header, bottom-anchored thread, composer.
+ */
+export default function Conversation() {
+    const { pageProps } = useContext(AppContext);
+    const bot = pageProps?.bot;
+
+    const [messages, setMessages] = useState<BUN_SQLITE_COBBLE_BOT_MESSAGES[]>(
+        pageProps?.bot_messages || [],
+    );
+
+    if (!bot?.id) return null;
+
+    return (
+        <Stack className="grow min-w-0 h-full gap-0! items-stretch">
+            <ConversationHeader bot={bot} bots={pageProps?.bots || []} />
+            <MessageThread bot={bot} messages={messages} />
+            <Composer
+                bot={bot}
+                onSent={({ message }) =>
+                    setMessages((prev) => [...prev, message])
+                }
+            />
+        </Stack>
+    );
+}
@@ -0,0 +1,49 @@
+import { useContext } 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 TaskStepRow from "../(partials)/task-step-row";
+import OpenComputerButton from "../(partials)/open-computer-button";
+
+/**
+ * 280px panel listing the steps the bot is taking. Hidden below 1280px.
+ */
+export default function WorkingOnPanel() {
+    const { pageProps } = useContext(AppContext);
+    const task = pageProps?.bot_task;
+
+    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.map((step) => (
+                            <TaskStepRow
+                                key={step.id}
+                                label={step.label || ""}
+                                state={step.state || "pending"}
+                            />
+                        ))}
+                    </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>
+    );
+}