@sableui/react 0.0.0-stage → 0.1.0

package/llms/patterns/brand-landing-page.md

@@ -0,0 +1,423 @@
+# BrandLandingPage
+
+High-fidelity brand/product landing page: pill navigation, editorial hero type, a dark product scene, calm status tones, CTA pair, feature cards, metrics, and a complete branded footer.
+
+**Intent:** Use this for a polished product marketing route that still needs to show a credible app surface. It is warmer and more tactile than the canonical LandingPage, but avoids trend-driven neon and generic hype cues.
+
+## Notes
+
+- One display headline owns the first viewport; supporting copy stays in body-lg at prose measure.
+- The nav spends one compact pill surface, with a clear brand signal and two primary paths: sign in and request access.
+- The product scene uses overlay tokens for a stable dark media surface, then semantic tones for status and chart signals.
+- The footer closes the page with brand reassurance, a three-column sitemap, a digest signup, operational mini-metrics, and legal links.
+- Every surface outside the product scene is a real Card (feature, metric and digest cards); status marks are StatusDot. The scene's nested panels take `rounded-concentric-xl/<inset>` from the shell's radius, so the corners stay parallel at any radius preset.
+- Radius and shadow are theme-controlled. In Cove the same rounded-lg/xl classes read larger and softer; in other themes the structure still holds.
+- Color is intentionally broad: porcelain/plum/lavender/blue/mint/saffron/coral through semantic roles, not a one-note purple gradient.
+
+## Accessibility
+
+- The brand nav is a labeled nav landmark with real links and visible text.
+- The footer is a real footer landmark with a labeled footer nav, visible link text, and a labeled email field.
+- TextReveal preserves the full headline as one accessible label and honors reduced-motion policy.
+- Status dots are paired with visible text labels so color is never the only signal.
+
+## Source
+
+```tsx
+import { Badge, Button, Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle, Icon, Input, Region, Row, Stack, StatusDot, TextReveal } from "@sableui/react"
+
+const navItems = ["Platform", "Signals", "Security", "Company"]
+
+const metrics = [
+	{ label: "Checks cleared", value: "1.8M", detail: "in the last 30 days" },
+	{ label: "Review time", value: "42s", detail: "median approval path" },
+	{ label: "Spaces online", value: "284", detail: "across active teams" },
+]
+
+const workflow = [
+	{ label: "Intake", state: "Open", tone: "info" as const },
+	{ label: "Review", state: "Live", tone: "edition" as const },
+	{ label: "Archive", state: "Safe", tone: "success" as const },
+]
+
+const bars = [
+	{ height: "38%", tone: "bg-tone-info" },
+	{ height: "56%", tone: "bg-tone-edition" },
+	{ height: "44%", tone: "bg-tone-standard" },
+	{ height: "68%", tone: "bg-success" },
+	{ height: "52%", tone: "bg-tone-info" },
+	{ height: "78%", tone: "bg-highlight" },
+	{ height: "60%", tone: "bg-tone-edition" },
+	{ height: "86%", tone: "bg-success" },
+	{ height: "64%", tone: "bg-tone-standard" },
+]
+
+const features = [
+	{
+		icon: "lock" as const,
+		title: "Private by default",
+		body: "Workspace roles, approval trails, and handoff history stay clear without turning the interface into compliance fog.",
+	},
+	{
+		icon: "layout" as const,
+		title: "Brand and product together",
+		body: "Editorial sections and dense console views share the same semantic tokens, radius, and motion contract.",
+	},
+	{
+		icon: "circle-check" as const,
+		title: "Calm confidence",
+		body: "Large type, tactile controls, and focused status tones make complex work feel understandable on first pass.",
+	},
+]
+
+const reviews = [
+	{ name: "Waypoint", value: "98.4%", label: "clear routes" },
+	{ name: "Fielddesk", value: "12", label: "open holds" },
+	{ name: "Archive", value: "4.8k", label: "sealed records" },
+]
+
+const footerGroups = [
+	{
+		title: "Platform",
+		links: [
+			{ label: "Overview", href: "#platform" },
+			{ label: "Signals", href: "#signals" },
+			{ label: "Approvals", href: "#approvals" },
+			{ label: "Records", href: "#records" },
+		],
+	},
+	{
+		title: "Company",
+		links: [
+			{ label: "About", href: "/about" },
+			{ label: "Security", href: "/security" },
+			{ label: "Customers", href: "/customers" },
+			{ label: "Careers", href: "/careers" },
+		],
+	},
+	{
+		title: "Resources",
+		links: [
+			{ label: "Guides", href: "/guides" },
+			{ label: "Status", href: "/status" },
+			{ label: "Changelog", href: "/changelog" },
+			{ label: "Docs", href: "/docs" },
+		],
+	},
+]
+
+const footerSignals = [
+	{ label: "Uptime", value: "99.98%" },
+	{ label: "Regions", value: "12" },
+	{ label: "Response", value: "42s" },
+]
+
+export function BrandLandingPage() {
+	return (
+		<div className="min-h-dvh overflow-hidden bg-background text-foreground">
+			<header className="relative z-10 pt-4">
+				<Region max="wide">
+					<nav
+						aria-label="Main"
+						className="flex min-h-15 items-center justify-between gap-3 rounded-full border border-border bg-card/90 px-3 py-2 shadow-sm backdrop-blur"
+					>
+						<a href="/" className="flex items-center gap-2 rounded-full px-2 motion-interactive motion-press">
+							<span className="grid size-8 place-items-center rounded-full bg-primary text-primary-foreground">
+								<Icon name="sparkles" className="text-sm" />
+							</span>
+							<span className="text-title-lg">Cove</span>
+						</a>
+						<div className="hidden lg:block">
+							<Row gap={1}>
+								{navItems.map((item) => (
+									<Button key={item} variant="ghost" size="sm" render={<a href={`#${item.toLowerCase()}`} />}>
+										{item}
+									</Button>
+								))}
+							</Row>
+						</div>
+						<Row gap={1}>
+							<Button variant="ghost" size="sm" className="max-sm:hidden" render={<a href="/login" />}>
+								Sign in
+							</Button>
+							<Button size="sm" render={<a href="/demo" />}>
+								Request access
+							</Button>
+						</Row>
+					</nav>
+				</Region>
+			</header>
+
+			<main>
+				<Region as="section" max="wide" className="pb-16 pt-14 sm:pt-20 lg:pb-24">
+					<div className="grid items-center gap-10 lg:grid-cols-[0.92fr_1.08fr]">
+						<Stack gap={4} className="max-w-3xl">
+							<Badge appearance="outline" icon={<Icon name="lock" className="text-sm" />}>
+								Private operations, made legible
+							</Badge>
+							<TextReveal
+								as="h1"
+								text="A calmer command center for high-trust digital work"
+								className="max-w-4xl text-balance text-display-xl sm:text-display-3xl"
+								once
+							/>
+							<p className="max-w-(--measure-prose) text-body-lg text-muted-foreground">
+								Cove gives teams a polished front door and a serious operating
+								surface: approvals, signals, records, and handoffs in one
+								understandable flow.
+							</p>
+							<Row gap={2} wrap>
+								<Button size="cta" render={<a href="/demo" />}>
+									Book a walkthrough
+								</Button>
+								<Button size="cta" variant="outline" render={<a href="#platform" />}>
+									Explore platform
+								</Button>
+							</Row>
+						</Stack>
+
+						<div className="relative">
+							{/* Nested surfaces take concentric corners: each level's radius is
+							    the shell's xl minus every inset between it and the shell edge. */}
+							<div className="overflow-hidden rounded-xl border border-border-floating bg-overlay p-3 text-overlay-foreground shadow-xl">
+								<div className="rounded-concentric-xl/3 border border-overlay-foreground/10 bg-overlay-foreground/8">
+									<div className="flex items-center justify-between border-b border-overlay-foreground/10 px-4 py-3">
+										<Row gap={1}>
+											<StatusDot tone="warning" />
+											<StatusDot tone="edition" />
+											<StatusDot tone="success" />
+										</Row>
+										<span className="text-label-sm text-overlay-foreground/70">Live workspace</span>
+									</div>
+									<div className="grid gap-3 p-3 md:grid-cols-[0.7fr_1.3fr]">
+										<div className="space-y-3">
+											<div className="rounded-concentric-xl/6 border border-overlay-foreground/10 bg-overlay-foreground/8 p-4">
+												<p className="text-label-sm text-overlay-foreground/60">Spaces</p>
+												<div className="mt-4 space-y-2">
+													{reviews.map((review) => (
+														<div key={review.name} className="rounded-concentric-xl/10 bg-overlay p-3">
+															<Row justify="between">
+																<span className="text-title-sm">{review.name}</span>
+																<span className="text-mono-sm text-overlay-foreground">{review.value}</span>
+															</Row>
+															<p className="mt-1 text-body-xs text-overlay-foreground/60">{review.label}</p>
+														</div>
+													))}
+												</div>
+											</div>
+											<div className="rounded-concentric-xl/6 border border-overlay-foreground/10 bg-overlay-foreground/8 p-4">
+												<Row justify="between">
+													<span className="text-title-sm">Route status</span>
+													<Badge tone="success" size="sm">Healthy</Badge>
+												</Row>
+												<div className="mt-4 space-y-2">
+													{workflow.map((item) => (
+														<Row key={item.label} justify="between" className="rounded-full bg-overlay px-3 py-2">
+															<Row gap={1}>
+																<StatusDot tone={item.tone} />
+																<span className="text-body-sm">{item.label}</span>
+															</Row>
+															<span className="text-label-sm text-overlay-foreground/60">{item.state}</span>
+														</Row>
+													))}
+												</div>
+											</div>
+										</div>
+
+										<div className="rounded-concentric-xl/6 border border-overlay-foreground/10 bg-overlay-foreground/8 p-4">
+											<Row justify="between" className="border-b border-overlay-foreground/10 pb-4">
+												<div>
+													<p className="text-label-sm text-overlay-foreground/60">Signal map</p>
+													<h2 className="mt-1 text-heading-3">Every approval path in view</h2>
+												</div>
+												<Button variant="secondary" size="sm">Review</Button>
+											</Row>
+											<div className="mt-6 grid min-h-72 grid-rows-[1fr_auto] gap-5">
+												<div className="grid grid-cols-9 items-end gap-2 rounded-concentric-xl/10 bg-overlay p-4">
+													{bars.map((bar, index) => (
+														<div key={`${bar.tone}-${index}`} className="flex h-56 items-end">
+															<div
+																className={`w-full rounded-full ${bar.tone}`}
+																style={{ height: bar.height }}
+															/>
+														</div>
+													))}
+												</div>
+												<div className="grid gap-2 sm:grid-cols-3">
+													{metrics.map((metric) => (
+														<div key={metric.label} className="rounded-concentric-xl/10 border border-overlay-foreground/10 bg-overlay p-3">
+															<p className="text-label-sm text-overlay-foreground/60">{metric.label}</p>
+															<p className="mt-2 text-heading-3">{metric.value}</p>
+															<p className="mt-1 text-body-xs text-overlay-foreground/60">{metric.detail}</p>
+														</div>
+													))}
+												</div>
+											</div>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</Region>
+
+				<section id="platform" className="border-y border-border bg-muted/40 py-14">
+					<Region max="wide">
+						<div className="grid gap-5 lg:grid-cols-[0.8fr_1.2fr]">
+							<Stack gap={3}>
+								<Badge>Design mood</Badge>
+								<h2 className="text-heading-1">Marketing warmth, product discipline.</h2>
+								<p className="max-w-(--measure-prose) text-body-md text-muted-foreground">
+									The page uses a pill nav, tactile surfaces, soft status tones, and
+									slower ease-out movement. It stays broad in color so it does not
+									collapse into purple-brand sameness.
+								</p>
+							</Stack>
+							<div className="grid gap-3 md:grid-cols-3">
+								{features.map((feature) => (
+									<Card key={feature.title} render={<article />} className="h-full">
+										<CardContent>
+											<span className="grid size-10 place-items-center rounded-md bg-highlight text-highlight-foreground">
+												<Icon name={feature.icon} className="text-xl" />
+											</span>
+											<h3 className="mt-5 text-title-lg">{feature.title}</h3>
+											<p className="mt-2 text-body-sm text-muted-foreground">{feature.body}</p>
+										</CardContent>
+									</Card>
+								))}
+							</div>
+						</div>
+					</Region>
+				</section>
+
+				<Region as="section" max="wide" className="py-14">
+					<div className="grid gap-3 md:grid-cols-3">
+						{metrics.map((metric) => (
+							<Card key={metric.label}>
+								<CardContent>
+									<p className="text-label-md text-muted-foreground">{metric.label}</p>
+									<p className="mt-3 text-display-lg">{metric.value}</p>
+									<p className="mt-1 text-body-sm text-muted-foreground">{metric.detail}</p>
+								</CardContent>
+							</Card>
+						))}
+					</div>
+				</Region>
+			</main>
+
+			<footer className="border-t border-border bg-muted/35">
+				<Region max="wide" className="py-10 sm:py-12">
+					<div className="grid gap-8 lg:grid-cols-[1fr_1.35fr_1fr]">
+						<Stack gap={3} className="max-w-md">
+							<a href="/" className="flex w-fit items-center gap-2 rounded-full motion-interactive motion-press">
+								<span className="grid size-9 place-items-center rounded-full bg-primary text-primary-foreground">
+									<Icon name="sparkles" className="text-sm" />
+								</span>
+								<span className="text-title-lg">Cove</span>
+							</a>
+							<p className="text-body-sm text-muted-foreground">
+								A calm operating surface for teams that need trust, speed, and
+								context without the noise.
+							</p>
+							<Row gap={1} wrap>
+								<Badge size="sm" icon={<Icon name="lock" />}>
+									Private
+								</Badge>
+								<Badge tone="success" size="sm" icon={<Icon name="circle-check" />}>
+									Live
+								</Badge>
+							</Row>
+						</Stack>
+
+						<nav aria-label="Footer" className="grid gap-6 sm:grid-cols-3">
+							{footerGroups.map((group) => (
+								<div key={group.title}>
+									<h2 className="text-label-md text-muted-foreground">{group.title}</h2>
+									<ul className="mt-3 space-y-1">
+										{group.links.map((link) => (
+											<li key={link.label}>
+												<a
+													href={link.href}
+													className="flex min-h-9 items-center text-body-sm text-muted-foreground motion-interactive hover:text-foreground"
+												>
+													{link.label}
+												</a>
+											</li>
+										))}
+									</ul>
+								</div>
+							))}
+						</nav>
+
+						<Card>
+							<CardHeader>
+								{/* CardTitle carries the type; the h2 inside it keeps the outline. */}
+								<CardTitle>
+									<h2>Signal digest</h2>
+								</CardTitle>
+								<CardDescription>
+									One weekly note on trusted workflows and product releases.
+								</CardDescription>
+								<CardAction>
+									<span className="grid size-9 place-items-center rounded-full bg-highlight text-highlight-foreground">
+										<Icon name="sparkles" className="text-sm" />
+									</span>
+								</CardAction>
+							</CardHeader>
+							<CardContent className="flex flex-col gap-4">
+								<form action="/newsletter" className="grid gap-2 sm:grid-cols-[1fr_auto]">
+									<label htmlFor="brand-footer-email" className="sr-only">
+										Work email
+									</label>
+									<Input
+										id="brand-footer-email"
+										name="email"
+										type="email"
+										autoComplete="email"
+										placeholder="you@company.com"
+									/>
+									<Button type="submit" className="w-full sm:w-auto">
+										Join
+									</Button>
+								</form>
+								<div className="grid grid-cols-3 gap-2">
+									{footerSignals.map((signal) => (
+										<div key={signal.label} className="rounded-md bg-muted p-3">
+											<p className="text-mono-sm">{signal.value}</p>
+											<p className="mt-1 text-caption text-muted-foreground">{signal.label}</p>
+										</div>
+									))}
+								</div>
+							</CardContent>
+						</Card>
+					</div>
+
+					<div className="mt-10 flex flex-col gap-3 border-t border-border pt-5 text-caption text-muted-foreground sm:flex-row sm:items-center sm:justify-between">
+						<p>© 2026 Cove. All rights reserved.</p>
+						<Row gap={3} wrap>
+							<a
+								href="/privacy"
+								className="flex min-h-9 min-w-9 items-center motion-interactive hover:text-foreground"
+							>
+								Privacy
+							</a>
+							<a
+								href="/terms"
+								className="flex min-h-9 min-w-9 items-center motion-interactive hover:text-foreground"
+							>
+								Terms
+							</a>
+							<a
+								href="/contact"
+								className="flex min-h-9 min-w-9 items-center motion-interactive hover:text-foreground"
+							>
+								Contact
+							</a>
+						</Row>
+					</div>
+				</Region>
+			</footer>
+		</div>
+	)
+}
+```

package/llms/patterns/chat-panel.md

@@ -0,0 +1,210 @@
+# ChatPanel
+
+A full-height conversation surface: titled header, scrolling transcript, and a composer pinned to the bottom — the assembled shape of an AI assistant, a support thread, or a DM.
+
+**Intent:** Reach for this for any conversation that owns its screen — an assistant, a support inbox thread, a DM. Not for a chat docked beside other work (compose the same three parts inside a Sheet or a PanelGroup instead), and not for a comment thread under an article, which is a FeedPage concern.
+
+## Notes
+
+- The panel is a fixed-height column, not a growing page. `h-[calc(100dvh_-_--spacing(12))]` on the Card (the viewport minus the Page's py-6, in spacing units so density moves both together — a fixed `3rem` drifts the moment density moves the padding) and `flex-1 min-h-0` on the MessageScroller are what make the transcript scroll instead of the document — the single most common thing to get wrong here, and it fails by pushing the composer off the bottom of the screen.
+- The panel is a Card, not a hand-built bordered section: CardHeader (title, description, CardAction), the MessageScroller and a CardFooter all inset by the card's own `--card-p`, so the three regions share one edge at any card density.
+- `dvh` rather than `vh`: on mobile the URL bar collapses, and a `vh`-sized panel puts the composer under it exactly when someone is trying to type.
+- Region cap is `feed` (640px) — a conversation is a reading column, and the Bubble measure cap is tuned to the same assumption.
+- The composer sits outside the scroll region, in a bordered CardFooter, so it stays put while the transcript moves.
+- Grouping is derived from the data (`turns[i - 1].mine === turn.mine`) rather than hand-set, and the tail is dropped on continuations — that pairing is what makes a run read as one block.
+- The assistant's long-form answer uses `variant="plain"`. A tinted box around a code block reads as a quote rather than as a turn.
+- The answer in flight is a `StreamingText` in a `plain` Bubble, and ONE `pending` flag drives both it and the composer's `busy`. They are the same wait reported at the two ends of the panel; letting them drift gives you a composer still saying 'sending' under an answer that already finished.
+- A spinner `Marker` (or `ThinkingOrb`) belongs BEFORE the first token and is replaced once tokens land, not kept alongside. Two indicators for one wait read as two things happening — which is also why `StreamingText` takes `caret={false}` when something adjacent already reports it.
+- MessageScroller needs no configuring for this: it re-follows on "a message grew" (ResizeObserver) as well as "a message arrived", so the newest token stays pinned while a reader who has scrolled up is left alone.
+- For a new thread, swap the transcript's children for an `<EmptyState>` inside the same MessageScroller — the panel, header and composer are unchanged, which is the point of keeping them separate.
+
+## Accessibility
+
+- The panel header's title is the page's <h1> (an h1 inside CardTitle, which carries the type); the transcript is a scroll region with native overflow, so keyboard scrolling works unchanged.
+- The answer in flight carries `aria-busy` rather than sitting in a live region. That is deliberate: a live region around streamed text announces every token, which is unusable. Announce once when the turn settles, from whatever owns the turn — the incomplete state is still exposed, just not narrated.
+- The composer is a real <form> whose Enter handling skips IME composition, and every icon-only control in the panel carries an accessible label.
+
+## Source
+
+```tsx
+import { Attachment, Avatar, Bubble, BubbleReaction, BubbleReactions, Button, Card, CardAction, CardDescription, CardFooter, CardHeader, CardTitle, ChatComposer, CodeBlock, Icon, Marker, MenuRadioGroup, MenuRadioItem, Message, MessageScroller, Page, SettingsMenu, SettingsRow, StreamingText } from "@sableui/react"
+
+/**
+ * The request is in flight. In an app this is your send state — from `useChat`,
+ * a fetch, whatever owns the turn — and it is deliberately ONE flag driving two
+ * places: the composer's `busy` and the answer's `streaming`. They are the same
+ * wait reported at both ends of the panel, and letting them drift is how you get
+ * a composer that still says "sending" under an answer that already finished.
+ */
+const pending = true
+
+/** The answer so far. Append tokens to this; `StreamingText` assumes it only grows. */
+const streamed =
+	"Anchor on the oldest rendered message and add back however far it moved. Appends"
+
+const turns = [
+	{
+		id: "t_01",
+		mine: true,
+		body: "Our chat scroll jumps every time older messages load. What are we doing wrong?",
+	},
+	{
+		id: "t_02",
+		mine: false,
+		body: "Almost always the anchor. If you preserve the scroll position by measuring the container, prepending history moves everything under the reader.",
+	},
+	{
+		id: "t_03",
+		mine: false,
+		body: "Anchor on the oldest rendered message instead and add back however far it moved. Appends leave it alone, so the same rule covers both.",
+	},
+]
+
+export function ChatPanel() {
+	return (
+		<Page as="main" max="feed" gap={0} className="py-6">
+			{/* h-dvh minus the page's own padding (py-6 = 12 spacing units, in
+			    spacing units so density moves both together): the panel owns the
+			    viewport, and the transcript — not the page — is the thing that
+			    scrolls. The panel is a Card; its parts inset by the card's own
+			    --card-p, so header, transcript and composer share one edge. */}
+			<Card
+				render={<section aria-labelledby="chat-title" />}
+				className="flex h-[calc(100dvh_-_--spacing(12))] flex-col overflow-hidden"
+			>
+				<CardHeader className="border-b border-border pb-(--card-p)">
+					{/* CardTitle carries the type; the h1 inside it is the page heading. */}
+					<CardTitle>
+						<h1 id="chat-title">Scroll behaviour</h1>
+					</CardTitle>
+					<CardDescription>Assistant · answers from your team's docs</CardDescription>
+					<CardAction>
+						<Button variant="outline" size="icon-sm" aria-label="Start a new chat">
+							<Icon name="plus" />
+						</Button>
+					</CardAction>
+				</CardHeader>
+
+				{/* flex-1 min-h-0 is the whole layout: it bounds the scroll region
+				    against the panel instead of letting the transcript grow the page. */}
+				<MessageScroller className="min-h-0 flex-1 p-(--card-p)">
+					<Marker variant="separator">Today</Marker>
+
+					{turns.map((turn, i) => (
+						<Message
+							key={turn.id}
+							messageId={turn.id}
+							align={turn.mine ? "end" : "start"}
+							grouped={i > 0 && turns[i - 1].mine === turn.mine}
+							avatar={turn.mine ? undefined : <Avatar size="sm" fallback="AI" />}
+						>
+							<Bubble
+								variant={turn.mine ? "primary" : "muted"}
+								align={turn.mine ? "end" : "start"}
+								tail={i === 0 || turns[i - 1].mine !== turn.mine}
+							>
+								{turn.body}
+							</Bubble>
+						</Message>
+					))}
+
+					<Marker variant="note" icon="sparkles">
+						Read message-scroller.md
+					</Marker>
+
+					{/* An assistant's long-form answer: no bubble, because a tinted box
+					    around a code block reads as a quote rather than as a turn. */}
+					<Message messageId="t_04" avatar={<Avatar size="sm" fallback="AI" />}>
+						<Bubble variant="plain">
+							<p className="text-body-md text-foreground">
+								Here is the shape of it:
+							</p>
+							<CodeBlock
+								code={
+									"const shift = anchor.offsetTop - lastTop\nif (shift !== 0) viewport.scrollTop += shift"
+								}
+								filename="preserve.ts"
+							/>
+						</Bubble>
+						<BubbleReactions>
+							<BubbleReaction emoji="🎯" count={2} active />
+						</BubbleReactions>
+					</Message>
+
+					<Message messageId="t_05" align="end">
+						<Attachment name="scroller.tsx" meta="4.2 KB · TSX" />
+					</Message>
+
+					{/* The answer arriving. A `Marker` with a spinner — or ThinkingOrb —
+					    is what sits here BEFORE the first token; once tokens land it is
+					    replaced rather than kept, because two indicators for one wait
+					    read as two things happening.
+
+					    No bubble, same as the long-form answer above: a tinted box around
+					    a growing paragraph makes the reflow look like the box breathing.
+
+					    MessageScroller needs no help with this — it already re-follows on
+					    "a message grew" (ResizeObserver), not just on "a message arrived",
+					    so the newest token stays pinned while the reader can still scroll
+					    up without being yanked back. */}
+					<Message messageId="t_06" avatar={<Avatar size="sm" fallback="AI" />}>
+						<Bubble variant="plain">
+							<StreamingText text={streamed} streaming={pending} />
+						</Bubble>
+					</Message>
+				</MessageScroller>
+
+				<CardFooter className="border-t border-border pt-(--card-p)">
+					<ChatComposer
+						className="flex-1"
+						placeholder="Ask a follow-up…"
+						// Same flag as the answer's `streaming`, which is what turns Send
+						// into Stop. A composer that stays sendable mid-answer invites a
+						// second request on top of the one still running.
+						busy={pending}
+						onStop={() => undefined}
+						onAttach={() => undefined}
+						footer="Enter to send · Shift+Enter for a new line"
+						// Model and effort sit in `actions`, at the send end of the row:
+						// they qualify the message about to be sent, so they belong beside
+						// the button that sends it rather than next to the attach control.
+						actions={
+							<SettingsMenu
+								variant="subtle"
+								size="xs"
+								label="Change model and effort"
+								summary={
+									<>
+										<span className="text-foreground">5.6 Sol</span>{" "}
+										<span className="text-muted-foreground">High</span>
+									</>
+								}
+							>
+								<SettingsRow label="Model" value="5.6 Sol">
+									<MenuRadioGroup defaultValue="sol">
+										<MenuRadioItem value="sol">5.6 Sol</MenuRadioItem>
+										<MenuRadioItem value="lite">5.6 Lite</MenuRadioItem>
+									</MenuRadioGroup>
+								</SettingsRow>
+								<SettingsRow label="Effort" value="High">
+									<MenuRadioGroup defaultValue="high">
+										<MenuRadioItem value="low">Low</MenuRadioItem>
+										<MenuRadioItem value="standard">Standard</MenuRadioItem>
+										<MenuRadioItem value="high">High</MenuRadioItem>
+									</MenuRadioGroup>
+								</SettingsRow>
+								<SettingsRow label="Speed" value="Standard">
+									<MenuRadioGroup defaultValue="standard">
+										<MenuRadioItem value="standard">Standard</MenuRadioItem>
+										<MenuRadioItem value="priority">Priority</MenuRadioItem>
+									</MenuRadioGroup>
+								</SettingsRow>
+							</SettingsMenu>
+						}
+					/>
+				</CardFooter>
+			</Card>
+		</Page>
+	)
+}
+```