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,33 @@
+import Button from "@moduletrace/twui/layout/Button";
+import type { LucideIcon } from "lucide-react";
+
+type Props = {
+    icon: LucideIcon;
+    /**
+     * Says what the button does; it has no visible label.
+     */
+    title: string;
+    disabled?: boolean;
+    loading?: boolean;
+};
+
+/**
+ * A ghost icon button on the right of the conversation header. Used as a
+ * modal's target, so it takes no click handler of its own.
+ */
+export default function HeaderIconButton({ icon: Icon, title, disabled, loading }: Props) {
+    return (
+        <Button
+            title={title}
+            aria-label={title}
+            type="button"
+            variant="ghost"
+            color="text"
+            disabled={disabled}
+            loading={loading}
+            className="shrink-0 p-2! text-ink-secondary dark:text-ink-secondary hover:text-ink hover:dark:text-ink hover:bg-sunken hover:dark:bg-sunken rounded-default transition-colors duration-[var(--m-fast)] focus-visible:ring-2 focus-visible:ring-ink"
+        >
+            <Icon size={18} aria-hidden />
+        </Button>
+    );
+}