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]>
2026-10-19 05:02:28 +01:00
parent 7b580d782e
commit 02ed47dd86
21 changed files with 263 additions and 379 deletions
@@ -0,0 +1,28 @@
+import Row from "@moduletrace/twui/layout/Row";
+import Span from "@moduletrace/twui/layout/Span";
+import type { LucideIcon } from "lucide-react";
+
+type Props = {
+    icon: LucideIcon;
+    /**
+     * What the text is, for the tooltip and screen readers.
+     */
+    label: string;
+    text: string;
+};
+
+/**
+ * One fact under the bot's name in the conversation header: an icon and
+ * a line of muted text.
+ */
+export default function HeaderMetaItem({ icon: Icon, label, text }: Props) {
+    return (
+        <Row
+            title={`${label}: ${text}`}
+            className="min-w-0 shrink gap-1.5! flex-nowrap text-[13px] leading-[18px] text-ink-secondary"
+        >
+            <Icon size={13} aria-label={label} className="shrink-0" />
+            <Span className="truncate">{text}</Span>
+        </Row>
+    );
+}