@tangle-network/ui 11.51.12 → 11.51.14

package/src/chat/message-author.test.tsx

@@ -23,12 +23,12 @@ const segmentedParts: SessionPart[] = [
 describe("a transcript without authors", () => {
 
   it("renders UserMessage actions and application notes as before", () => {
-    expect(html(<UserMessage content="Can I break my lease early?" actions={<button type="button">Copy</button>} />)).toMatchInlineSnapshot(`"<div class="flex justify-end"><div class="group flex min-w-0 max-w-[78%] flex-col items-end gap-2"><div class="relative w-full min-w-0 rounded-2xl bg-foreground px-4 py-3 text-background"><div class="break-words whitespace-pre-wrap tangle-transcript-text text-[length:var(--transcript-font-size)] leading-[var(--transcript-line-height)]">Can I break my lease early?</div></div><div class="flex flex-wrap items-center justify-end gap-1.5 text-sm text-muted-foreground"><button type="button">Copy</button></div></div></div>"`)
-    expect(html(<UserMessage parts={segmentedParts} actions={<button type="button">Copy</button>} />)).toMatchInlineSnapshot(`"<div class="space-y-2"><div class="flex justify-end"><div class="group flex min-w-0 max-w-[78%] flex-col items-end gap-2"><div class="relative w-full min-w-0 rounded-2xl bg-foreground px-4 py-3 text-background"><div class="break-words whitespace-pre-wrap tangle-transcript-text text-[length:var(--transcript-font-size)] leading-[var(--transcript-line-height)]">I signed the lease in March.</div></div></div></div><div role="note" aria-label="Application note" data-synthetic-text="" class="min-w-0 rounded-md border border-dashed border-border bg-muted/30 px-3 py-2 text-sm text-muted-foreground"><div class="mb-1 font-medium">Application note</div><div class="break-words whitespace-pre-wrap">Lease uploaded: lease.pdf</div></div><div class="flex justify-end"><div class="group flex min-w-0 max-w-[78%] flex-col items-end gap-2"><div class="relative w-full min-w-0 rounded-2xl bg-foreground px-4 py-3 text-background"><div class="break-words whitespace-pre-wrap tangle-transcript-text text-[length:var(--transcript-font-size)] leading-[var(--transcript-line-height)]">Here it is.</div></div></div></div><div class="flex flex-wrap items-center justify-end gap-1.5 text-sm text-muted-foreground"><button type="button">Copy</button></div></div>"`)
+    expect(html(<UserMessage content="Can I break my lease early?" actions={<button type="button">Copy</button>} />)).toMatchInlineSnapshot(`"<div class="flex justify-end"><div class="group flex min-w-0 max-w-[78%] flex-col items-end gap-2"><div class="relative w-full min-w-0 rounded-2xl bg-primary/15 px-4 py-3 text-foreground"><div class="break-words whitespace-pre-wrap tangle-transcript-text text-[length:var(--transcript-font-size)] leading-[var(--transcript-line-height)]">Can I break my lease early?</div></div><div class="flex flex-wrap items-center justify-end gap-1.5 text-sm text-muted-foreground"><button type="button">Copy</button></div></div></div>"`)
+    expect(html(<UserMessage parts={segmentedParts} actions={<button type="button">Copy</button>} />)).toMatchInlineSnapshot(`"<div class="space-y-2"><div class="flex justify-end"><div class="group flex min-w-0 max-w-[78%] flex-col items-end gap-2"><div class="relative w-full min-w-0 rounded-2xl bg-primary/15 px-4 py-3 text-foreground"><div class="break-words whitespace-pre-wrap tangle-transcript-text text-[length:var(--transcript-font-size)] leading-[var(--transcript-line-height)]">I signed the lease in March.</div></div></div></div><div role="note" aria-label="Application note" data-synthetic-text="" class="min-w-0 rounded-md border border-dashed border-border bg-muted/30 px-3 py-2 text-sm text-muted-foreground"><div class="mb-1 font-medium">Application note</div><div class="break-words whitespace-pre-wrap">Lease uploaded: lease.pdf</div></div><div class="flex justify-end"><div class="group flex min-w-0 max-w-[78%] flex-col items-end gap-2"><div class="relative w-full min-w-0 rounded-2xl bg-primary/15 px-4 py-3 text-foreground"><div class="break-words whitespace-pre-wrap tangle-transcript-text text-[length:var(--transcript-font-size)] leading-[var(--transcript-line-height)]">Here it is.</div></div></div></div><div class="flex flex-wrap items-center justify-end gap-1.5 text-sm text-muted-foreground"><button type="button">Copy</button></div></div>"`)
   })
 
   it("renders UserMessage as before", () => {
-    expect(html(<UserMessage content="Can I break my lease early?" />)).toMatchInlineSnapshot(`"<div class="flex justify-end"><div class="group flex min-w-0 max-w-[78%] flex-col items-end gap-2"><div class="relative w-full min-w-0 rounded-2xl bg-foreground px-4 py-3 text-background"><div class="break-words whitespace-pre-wrap tangle-transcript-text text-[length:var(--transcript-font-size)] leading-[var(--transcript-line-height)]">Can I break my lease early?</div></div></div></div>"`)
+    expect(html(<UserMessage content="Can I break my lease early?" />)).toMatchInlineSnapshot(`"<div class="flex justify-end"><div class="group flex min-w-0 max-w-[78%] flex-col items-end gap-2"><div class="relative w-full min-w-0 rounded-2xl bg-primary/15 px-4 py-3 text-foreground"><div class="break-words whitespace-pre-wrap tangle-transcript-text text-[length:var(--transcript-font-size)] leading-[var(--transcript-line-height)]">Can I break my lease early?</div></div></div></div>"`)
   })
 
 })
@@ -92,7 +92,7 @@ describe("UserMessage with an author", () => {
     const { container } = render(<UserMessage content="Did you give a forwarding address?" author={attorney} viewerId={client.id} />)
     expect(container.firstElementChild?.className).toContain("justify-start")
     expect(bubbleOf("Did you give a forwarding address?").className).toContain("bg-card")
-    expect(bubbleOf("Did you give a forwarding address?").className).not.toContain("bg-foreground")
+    expect(bubbleOf("Did you give a forwarding address?").className).not.toContain("bg-primary/15")
     expect(screen.getByText("Jane Doe")).toBeInTheDocument()
     expect(screen.getByText("Attorney")).toBeInTheDocument()
   })
@@ -148,7 +148,7 @@ describe("AgentTimeline with three participants", () => {
 
   it("sets the client's own words apart from the attorney's on the client's screen", () => {
     render(<AgentTimeline items={thread} viewerId={client.id} />)
-    expect(bubbleOf("My landlord kept my deposit.").className).toContain("bg-foreground")
+    expect(bubbleOf("My landlord kept my deposit.").className).toContain("bg-primary/15")
     expect(screen.queryByText("Maria Lopez")).not.toBeInTheDocument()
     expect(bubbleOf("Did you give a forwarding address?").className).toContain("bg-card")
     expect(screen.getByText("Jane Doe")).toBeInTheDocument()
@@ -156,7 +156,7 @@ describe("AgentTimeline with three participants", () => {
 
   it("mirrors the thread on the attorney's screen", () => {
     render(<AgentTimeline items={thread} viewerId={attorney.id} />)
-    expect(bubbleOf("Did you give a forwarding address?").className).toContain("bg-foreground")
+    expect(bubbleOf("Did you give a forwarding address?").className).toContain("bg-primary/15")
     expect(bubbleOf("My landlord kept my deposit.").className).toContain("bg-card")
     expect(screen.getByText("Maria Lopez")).toBeInTheDocument()
     expect(screen.queryByText("Jane Doe")).not.toBeInTheDocument()

package/src/chat/speaker.stories.tsx

@@ -12,7 +12,7 @@ type Part =
 function Turn({ parts, live = false }: { parts: Part[]; live?: boolean }) {
   return (
     <div className="mx-auto flex w-full max-w-3xl flex-col gap-6 px-4 py-6">
-      <p className={`ml-auto w-fit max-w-[78%] rounded-2xl bg-foreground px-4 py-3 text-background ${TRANSCRIPT_TEXT}`}>
+      <p className={`ml-auto w-fit max-w-[78%] rounded-2xl bg-primary/15 px-4 py-3 text-foreground ${TRANSCRIPT_TEXT}`}>
         @writer @research-lead plan the launch announcement for the roster feature.
       </p>
       {partitionBySpeaker(parts).map(({ speaker, parts: own }) => (

package/src/chat/synthetic-text.test.tsx

@@ -38,7 +38,7 @@ describe("user text boundaries", () => {
 
   it("preserves a single joined bubble when no application note is present", () => {
     const { container } = render(<UserMessage parts={mixed.slice(0, 2)} />);
-    expect(container.querySelectorAll(".bg-foreground.text-background")).toHaveLength(1);
+    expect(container.querySelectorAll(".bg-primary\\/15")).toHaveLength(1);
     expect(container.querySelector(".whitespace-pre-wrap")?.textContent).toBe("First\nSecond");
     expect(screen.queryByRole("note")).not.toBeInTheDocument();
   });
@@ -61,7 +61,7 @@ describe("user text boundaries", () => {
     const { container } = render(<UserMessage parts={[mixed[2]]} actions={<button type="button">Inspect receipt</button>} />);
     expect(screen.getByRole("note")).toHaveTextContent("Receipt");
     expect(screen.getByRole("button", { name: "Inspect receipt" })).toBeInTheDocument();
-    expect(container.querySelector(".bg-foreground")).toBeNull();
+    expect(container.querySelector(".bg-primary\\/15")).toBeNull();
   });
 
   it("retains direct-content timestamps", () => {

package/src/chat/user-message.tsx

@@ -96,7 +96,7 @@ function UserBubble({ text, timestamp, actions, lines }: {
   return (
     <div className="flex justify-end">
       <div className="group flex min-w-0 max-w-[78%] flex-col items-end gap-2">
-        <div className="relative w-full min-w-0 rounded-2xl bg-foreground px-4 py-3 text-background">
+        <div className="relative w-full min-w-0 rounded-2xl bg-primary/15 px-4 py-3 text-foreground">
           {timestamp ? (
             <span
               data-user-message-time=""

package/src/primitives/control-presentation.test.tsx

@@ -1,81 +1,14 @@
 import * as React from "react";
 import { cleanup, render, screen } from "@testing-library/react";
 import { afterEach, describe, expect, it } from "vitest";
-import { controlHeight, controlText, fieldPresentation } from "../lib/control-presentation";
 import { HelpText } from "./help-text";
 import { Label } from "./label";
-import { Button, buttonVariants } from "./button";
 import { Input, Textarea } from "./input";
 import { Select, SelectTrigger, SelectValue } from "./select";
 
 afterEach(cleanup);
 
 describe("shared control presentation", () => {
-  it("uses the field well, not the border/track alias, with scoped foreground", () => {
-    // The well is the brand's --well context variable; Toolbar can still pick the fill.
-    expect(fieldPresentation).toContain("bg-[var(--field-surface,var(--well))]");
-    expect(fieldPresentation.split(" ")).not.toContain("bg-input");
-    expect(fieldPresentation.split(" ")).not.toContain("bg-card");
-    // ixField's --field-border replaces focusField's resting border-border.
-    expect(fieldPresentation.split(" ")).toContain("border-[var(--field-border)]");
-    expect(fieldPresentation.split(" ")).not.toContain("border-border");
-    expect(fieldPresentation).toContain("text-foreground");
-  });
-
-  it("puts Button, Input, Textarea and SelectTrigger on one height and text scale", () => {
-    const classes = (name: string) => screen.getByLabelText(name).className.split(" ");
-    const { rerender } = render(<><Input aria-label="Input" /><Textarea aria-label="Textarea" /><Button aria-label="Action">Action</Button><Select><SelectTrigger aria-label="Select"><SelectValue /></SelectTrigger></Select></>);
-    // The default is md for every control: one 36px height, one 14px text size, one corner.
-    for (const name of ["Input", "Action", "Select"]) {
-      expect(classes(name)).toContain(controlHeight.md);
-      expect(classes(name)).toContain(controlText.md);
-      expect(classes(name)).toContain("rounded-lg");
-    }
-    expect(classes("Textarea")).toContain(controlText.md);
-    expect(screen.getByLabelText("Textarea").className).toContain("min-h-[120px]");
-    for (const size of ["sm", "md", "lg"] as const) {
-      rerender(<><Input size={size} aria-label="Input" /><Textarea size={size} aria-label="Textarea" /><Button size={size} aria-label="Action">Action</Button><Select><SelectTrigger size={size} aria-label="Select"><SelectValue /></SelectTrigger></Select></>);
-      for (const name of ["Input", "Action", "Select"]) {
-        expect(classes(name), `${name} ${size}`).toContain(controlHeight[size]);
-        expect(classes(name), `${name} ${size}`).toContain(controlText[size]);
-        expect(classes(name), `${name} ${size}`).toContain(size === "sm" ? "rounded-md" : "rounded-lg");
-        expect(screen.getByLabelText(name)).not.toHaveAttribute("size");
-      }
-      expect(classes("Textarea")).toContain(controlText[size]);
-    }
-    // Fields never drop below 16px on a coarse pointer (iOS zooms on focus otherwise).
-    for (const name of ["Input", "Textarea", "Select"]) expect(classes(name)).toContain("pointer-coarse:text-base");
-    expect(classes("Action")).not.toContain("pointer-coarse:text-base");
-  });
-
-  it("keeps the explicit compact and touch sizes", () => {
-    const { rerender } = render(<><Input size="compact" aria-label="Input" /><Button size="compact">Action</Button><Select><SelectTrigger size="compact" aria-label="Select"><SelectValue /></SelectTrigger></Select></>);
-    for (const size of ["compact", "touch"] as const) {
-      rerender(<><Input size={size} aria-label="Input" /><Textarea size={size} aria-label="Textarea" /><Button size={size}>Action</Button><Select><SelectTrigger size={size} aria-label="Select"><SelectValue /></SelectTrigger></Select></>);
-      for (const name of ["Input", "Select"]) {
-        expect(screen.getByLabelText(name).className).toContain(size === "compact" ? "h-[var(--control-height)]" : "min-h-11");
-        expect(screen.getByLabelText(name).className.split(" ")).toContain("rounded-lg");
-        expect(screen.getByLabelText(name)).not.toHaveAttribute("size");
-      }
-      expect(screen.getByText("Action").className).toContain(size === "compact" ? "h-[var(--control-height)]" : "min-h-11");
-      expect(screen.getByLabelText("Textarea")).not.toHaveAttribute("size");
-    }
-  });
-
-  it("lets a file input's selector button take the field's text size", () => {
-    render(<Input type="file" size="lg" aria-label="Upload" />);
-    const classes = screen.getByLabelText("Upload").className.split(" ");
-    expect(classes).toContain("text-[length:var(--control-text-lg,1rem)]");
-    expect(classes.filter((name) => name.startsWith("file:text-"))).toEqual([]);
-  });
-
-  it("gives icon buttons squares on the same heights", () => {
-    render(<><Button size="icon-sm" aria-label="Small" /><Button size="icon" aria-label="Medium" /><Button size="icon-lg" aria-label="Large" /></>);
-    expect(screen.getByLabelText("Small").className).toContain("size-[var(--control-height-sm,2rem)]");
-    expect(screen.getByLabelText("Medium").className).toContain("size-[var(--control-height,2.25rem)]");
-    expect(screen.getByLabelText("Large").className).toContain("size-[var(--control-height-lg,2.75rem)]");
-  });
-
   it("renders labels and help text at one size each, and wires hint and error to the field", () => {
     render(<><Label htmlFor="x">Name</Label><HelpText>Plain</HelpText><Input label="Email" hint="We never share it" error="Enter an address" /></>);
     expect(screen.getByText("Name").className).toContain("text-[length:var(--font-size-label,0.875rem)]");
@@ -105,29 +38,4 @@ describe("shared control presentation", () => {
     expect(trigger.current).toBeDisabled();
     expect(trigger.current!.className.split(" ")).toContain("h-12");
   });
-
-  it("uses accent ink for link actions while retaining filled action foregrounds and scale motion", () => {
-    expect(buttonVariants({ variant: "link" })).toContain("text-[var(--accent-text)]");
-    expect(buttonVariants({ variant: "default" })).toContain("text-primary-foreground");
-    expect(buttonVariants({ variant: "destructive" })).toContain("text-destructive-foreground");
-    expect(buttonVariants({ variant: "sandbox" })).toContain("text-[var(--btn-primary-text)]");
-    expect(buttonVariants()).not.toContain("transition-all");
-    expect(buttonVariants()).toContain("motion-reduce:active:scale-100");
-  });
-});
-
-describe("SelectTrigger with a value longer than the trigger", () => {
-  it("ends the value in an ellipsis with a gap before the chevron", () => {
-    const value = "Luna — ReCenter Guest Concierge & Practitioner Desk";
-    render(<Select value="concierge"><SelectTrigger aria-label="Agent" className="w-40"><SelectValue>{value}</SelectValue></SelectTrigger></Select>);
-    const trigger = screen.getByLabelText("Agent");
-    const classes = trigger.className.split(" ");
-    // line-clamp cannot ellipsize a nowrap line: it clipped mid-glyph under the chevron.
-    expect(trigger.className).not.toContain("line-clamp");
-    expect(classes).toContain("[&>span]:truncate");
-    expect(classes).toContain("[&>span]:min-w-0");
-    expect(classes).toContain("gap-2");
-    // The rule targets the value span, which Radix renders as the trigger's direct child.
-    expect(trigger.querySelector(":scope > span")?.textContent).toBe(value);
-  });
 });

package/src/primitives/expandable-panel.stories.tsx

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Button } from './button'
+import { ExpandablePanel } from './expandable-panel'
+import { MetricChart } from './metric-chart'
+import { Popover, PopoverContent, PopoverTrigger } from './popover'
+
+const meta: Meta = {
+  title: 'Primitives/ExpandablePanel',
+  parameters: { layout: 'padded', backgrounds: { default: 'dark' } },
+}
+
+export default meta
+type Story = StoryObj
+
+const t0 = Date.parse('2026-08-24T07:00:00.000Z')
+const points = Array.from({ length: 24 }, (_, i) => ({ at: t0 + i * 3_600_000, value: 40 + Math.round(20 * Math.sin(i / 3)) + i }))
+
+// Hover or focus the panel for the toggle; Escape closes the open popover first, then the panel.
+export const ChartPanel: Story = {
+  render: () => (
+    <ExpandablePanel
+      label="Throughput chart"
+      className="h-72 w-[560px] rounded-xl border border-border bg-card p-4"
+      actions={
+        <Popover>
+          <PopoverTrigger asChild>
+            <Button variant="ghost" size="sm">Range</Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-48 text-sm">Last 24 hours</PopoverContent>
+        </Popover>
+      }
+    >
+      <MetricChart title="Throughput" unit="req/s" points={points} className="min-h-0 flex-1" />
+    </ExpandablePanel>
+  ),
+}

package/src/primitives/expandable-panel.test.tsx

@@ -0,0 +1,49 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+import { ExpandablePanel } from "./expandable-panel";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+
+describe("ExpandablePanel", () => {
+  // The journey a run view needs: expand in place, let an inner popover take the
+  // first Escape, close the top-most panel on the next, and hand focus back.
+  it("expands in place and closes the top-most panel on Escape after inner layers", async () => {
+    const user = userEvent.setup();
+    render(
+      <ExpandablePanel label="Run">
+        <p data-testid="content">chart</p>
+        <ExpandablePanel label="Chart">
+          <Popover>
+            <PopoverTrigger>Range</PopoverTrigger>
+            <PopoverContent>Last 24 hours</PopoverContent>
+          </Popover>
+        </ExpandablePanel>
+      </ExpandablePanel>,
+    );
+    const content = screen.getByTestId("content"), outer = content.parentElement!;
+
+    await user.click(screen.getByRole("button", { name: "Expand Run" }));
+    expect(outer).toHaveAttribute("data-expanded");
+    expect(outer.className).toContain("fixed");
+    expect(screen.getByTestId("content")).toBe(content);
+    expect(document.body.style.overflow).toBe("hidden");
+
+    await user.click(screen.getByRole("button", { name: "Expand Chart" }));
+    await user.click(screen.getByRole("button", { name: "Range" }));
+    expect(await screen.findByText("Last 24 hours")).toBeInTheDocument();
+
+    await user.keyboard("{Escape}");
+    await waitFor(() => expect(screen.queryByText("Last 24 hours")).not.toBeInTheDocument());
+    expect(screen.getByRole("button", { name: "Close full screen Chart" })).toBeInTheDocument();
+
+    await user.keyboard("{Escape}");
+    expect(screen.getByRole("button", { name: "Expand Chart" })).toHaveFocus();
+    expect(outer).toHaveAttribute("data-expanded");
+    expect(document.body.style.overflow).toBe("hidden");
+
+    await user.keyboard("{Escape}");
+    expect(outer).not.toHaveAttribute("data-expanded");
+    expect(screen.getByRole("button", { name: "Expand Run" })).toHaveFocus();
+    expect(document.body.style.overflow).toBe("");
+  });
+});

package/src/primitives/expandable-panel.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import { Maximize2, Minimize2 } from "lucide-react";
+import * as React from "react";
+import { cn } from "../lib/utils";
+import { Button } from "./button";
+
+export interface ExpandablePanelProps {
+  children?: React.ReactNode;
+  /** Accessible name: the toggle reads "Expand <label>" and "Close full screen <label>". */
+  label: string;
+  expanded?: boolean;
+  onExpandedChange?: (expanded: boolean) => void;
+  className?: string;
+  actions?: React.ReactNode; // controls shown beside the toggle
+}
+
+// Expanded panels in opening order. Escape closes the last one that holds no other.
+const openPanels: HTMLElement[] = [];
+let bodyOverflow = "";
+
+/**
+ * A panel that fills the viewport in place and returns on Escape. The subtree
+ * never moves (no portal), so chart, canvas and conversation state and scroll
+ * survive the switch. Radix popovers, menus and dialogs inside take Escape
+ * first: they prevent its default, which this panel respects. An ancestor
+ * with a transform or filter would contain the fixed panel, so avoid one.
+ */
+function ExpandablePanel({
+  children,
+  label,
+  expanded: expandedProp,
+  onExpandedChange,
+  className,
+  actions,
+}: ExpandablePanelProps) {
+  const [expandedState, setExpandedState] = React.useState(false);
+  const expanded = expandedProp ?? expandedState;
+  const toggleRef = React.useRef<HTMLButtonElement>(null);
+  const panelRef = React.useRef<HTMLDivElement>(null);
+  const wasExpanded = React.useRef(expanded);
+  const setExpanded = (next: boolean) => {
+    if (expandedProp === undefined) setExpandedState(next);
+    onExpandedChange?.(next);
+  };
+  // A ref, so a new onExpandedChange never re-registers and reorders the open stack.
+  const setExpandedRef = React.useRef(setExpanded);
+  setExpandedRef.current = setExpanded;
+
+  React.useEffect(() => {
+    if (wasExpanded.current && !expanded) toggleRef.current?.focus();
+    wasExpanded.current = expanded;
+    const id = panelRef.current;
+    if (!expanded || !id) return;
+    if (openPanels.length === 0) bodyOverflow = document.body.style.overflow;
+    openPanels.push(id);
+    document.body.style.overflow = "hidden";
+    const onKeyDown = (event: KeyboardEvent) => {
+      const top = openPanels.filter((p) => !openPanels.some((q) => q !== p && p.contains(q))).pop();
+      if (event.key !== "Escape" || event.defaultPrevented || top !== id) return;
+      event.preventDefault();
+      setExpandedRef.current(false);
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+      openPanels.splice(openPanels.indexOf(id), 1);
+      if (openPanels.length === 0) document.body.style.overflow = bodyOverflow;
+    };
+  }, [expanded]);
+
+  return (
+    <div
+      ref={panelRef}
+      data-expandable-panel=""
+      data-expanded={expanded ? "" : undefined}
+      className={cn(
+        "group/expandable relative flex min-h-0 flex-col",
+        className, // before the expanded classes, so a caller's size cannot shrink it
+        expanded && "fixed inset-0 z-50 m-0 size-auto min-h-0 min-w-0 max-h-none max-w-none rounded-none transform-none bg-background",
+      )}
+    >
+      {children}
+      <div
+        className={cn(
+          "absolute right-2 top-2 z-10 flex items-center gap-1 transition-opacity",
+          expanded
+            ? "opacity-100"
+            : "opacity-0 group-hover/expandable:opacity-100 group-focus-within/expandable:opacity-100 pointer-coarse:opacity-100",
+        )}
+      >
+        {actions}
+        <Button
+          ref={toggleRef}
+          type="button"
+          variant="ghost"
+          size="icon-sm"
+          aria-label={`${expanded ? "Close full screen" : "Expand"} ${label}`}
+          onClick={() => setExpanded(!expanded)}
+        >
+          {expanded ? <Minimize2 aria-hidden /> : <Maximize2 aria-hidden />}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export { ExpandablePanel };

package/src/primitives/index.ts

@@ -279,3 +279,6 @@ export type {
 
 export { Toolbar, FilterField } from "./toolbar";
 export type { ToolbarProps, FilterFieldProps } from "./toolbar";
+
+export { ExpandablePanel } from "./expandable-panel";
+export type { ExpandablePanelProps } from "./expandable-panel";

package/src/run/index.ts

@@ -1,7 +1,6 @@
 export { RunGroup, type RunGroupProps } from "./run-group";
 export {
   RunRowShell,
-  RunRowStatusDot,
   type RunRowShellProps,
   type RunRowStatus,
 } from "./run-row-shell";
@@ -14,7 +13,6 @@ export {
   ExpandedToolDetail,
   type ExpandedToolDetailProps,
 } from "./expanded-tool-detail";
-export { LiveDuration } from "./run-item-primitives";
 // ToolCallStep/ToolCallGroup are internal adapters over InlineToolItem (used by
 // AgentTimeline + ToolCallFeed); only their status/type vocabulary is public
 // because ToolCallData references it.
@@ -40,7 +38,6 @@ export { RunPhaseList, type RunPhase } from "./run-phase-list";
 export {
   RunStatusIcon,
   runStatus,
-  isOpen,
   statusMeta,
   type RunStatus,
   type RunStatusIconProps,

package/src/run/run-row-shell.tsx

@@ -1,27 +1,12 @@
 import { useState, type ReactNode } from "react";
 import * as Collapsible from "@radix-ui/react-collapsible";
 import { ChevronRight } from "lucide-react";
+import { focusRingInset } from "../lib/focus";
 import { cn } from "../lib/utils";
 import { formatDuration } from "../utils/format";
 
 export type RunRowStatus = "running" | "success" | "error" | "idle";
 
-/**
- * A red dot for a failed row, for rows composed outside the shell. The shell
- * itself marks a failure on the row's own glyph, beside its name, never at the
- * far edge. Success is silence, and a running row carries its state in the
- * title — a `TextShimmer` sweep.
- */
-export function RunRowStatusDot({ status }: { status: RunRowStatus }) {
-  if (status !== "error") return null;
-  return (
-    <span
-      data-run-row-status="error"
-      className="h-1.5 w-1.5 shrink-0 rounded-full bg-[var(--surface-danger-text)]"
-    />
-  );
-}
-
 export interface RunRowShellProps {
   /** Semantic lead glyph (14px). At rest it is the row's only ornament; on
    *  hover and while open the expand chevron takes its slot. */
@@ -35,10 +20,6 @@ export interface RunRowShellProps {
   /** Render the description in mono (tools) vs prose (reasoning). */
   descriptionMono?: boolean;
   status?: RunRowStatus;
-  /** @deprecated The shell no longer ticks a live duration while running; the
-   *  running state lives in the title (`TextShimmer`). Accepted and ignored so
-   *  existing callers keep compiling. */
-  startTime?: number;
   /** Static duration, revealed on hover once the row is no longer running. */
   durationMs?: number;
   /** Radius shaping when rows are stacked into a group. */
@@ -128,7 +109,10 @@ export function RunRowShell({
               // The header is the hover group, not the whole card: rows nested in an
               // open row (a fold's steps) keep their own glyphs while the
               // pointer is over them.
+              // Inset focus ring: the row clips overflow, so the shared ring
+              // must draw inside the trigger instead of around it.
               className={cn(
+                focusRingInset,
                 "group flex w-full items-center gap-2 text-left",
                 HEADER_INSET,
                 expandable ? "cursor-pointer" : "cursor-default",

package/src/run/status-meta.tsx

@@ -57,9 +57,6 @@ export function runStatus(status: string): RunStatus {
   return Object.hasOwn(ALIASES, key) ? ALIASES[key] : "unknown";
 }
 
-/** Whether a canonical run state can still advance. */
-export const isOpen = (status: RunStatus | (string & {})): boolean => ["running", "waiting", "needs-you"].includes(runStatus(status));
-
 /** The label, glyph and colour token for a status, in every surface. */
 export function statusMeta(status: RunStatus | (string & {})): StatusMeta {
   return META[runStatus(status)];

package/src/utils/format.ts

@@ -57,19 +57,6 @@ export function formatSpanDuration(ms: number): string {
   return ms >= 86_400_000 ? formatAxisDuration(ms) : ms < 1000 ? `${Math.round(ms)}ms` : formatClock(Math.round(ms / precision) * precision)
 }
 
-/** $0.12, $0.005, $12.40; never rounds a recorded nonzero cost to $0.00. */
-export function formatCost(usd: number): string {
-  if (!Number.isFinite(usd) || usd < 0) return '—'
-  if (usd === 0) return '$0.00'
-  if (usd < 0.01) return `$${usd.toPrecision(1)}`
-  return `$${usd.toFixed(2)}`
-}
-
-/** 9.8k, 754.4k, 1.2M with the exact count left to a title. */
-export function formatCount(n: number): string {
-  return !Number.isSafeInteger(n) || n < 0 ? '—' : formatCompact(n)
-}
-
 /** Elapsed clock at millisecond precision, so zoomed axis ticks keep distinct labels. */
 export function formatClock(ms: number): string {
   if (!Number.isFinite(ms) || ms < 0) return '—'

package/dist/run/run-item-primitives.d.ts

@@ -1,3 +0,0 @@
-export declare function LiveDuration({ startTime }: {
-  startTime: number;
-}): import("react").JSX.Element;

package/dist/run/run-item-primitives.js

@@ -1,12 +0,0 @@
-import { formatDuration as formatSpanDuration } from "../utils/format.js";
-import { useLiveTime } from "../hooks/use-live-time.js";
-import { jsx } from "react/jsx-runtime";
-// src/run/run-item-primitives.tsx
-function LiveDuration({ startTime }) {
-	const elapsed = useLiveTime(100) - startTime;
-	return /* @__PURE__ */ jsx("span", {
-		className: "text-xs font-mono text-neutral-400 dark:text-neutral-500 tabular-nums",
-		children: formatSpanDuration(elapsed)
-	});
-}
-export { LiveDuration };

package/src/primitives/switch.test.tsx

@@ -1,39 +0,0 @@
-import { cleanup, fireEvent, render, screen } from "@testing-library/react";
-import { afterEach, describe, expect, it } from "vitest";
-import { Switch } from "./switch";
-
-afterEach(cleanup);
-
-/** The classes that apply in a state: unprefixed ones, plus that state's variant. */
-function stateClasses(el: Element, state: "checked" | "unchecked"): string[] {
-  return (el.getAttribute("class") ?? "")
-    .split(/\s+/)
-    .filter((c) => !c.startsWith("data-[") || c.startsWith(`data-[state=${state}]:`))
-    .map((c) => c.replace(`data-[state=${state}]:`, ""));
-}
-
-describe("Switch", () => {
-  it("draws its off state in muted-foreground, so an unchecked switch is visible on a card or the canvas", () => {
-    render(<Switch aria-label="Reminders" />);
-    const track = screen.getByRole("switch", { name: "Reminders" });
-    const thumb = track.firstElementChild as Element;
-    expect(track).toHaveAttribute("data-state", "unchecked");
-    expect(stateClasses(track, "unchecked")).toContain("border-muted-foreground");
-    expect(stateClasses(track, "unchecked")).not.toContain("bg-input");
-    expect(stateClasses(thumb, "unchecked")).toContain("bg-muted-foreground");
-    expect(stateClasses(thumb, "unchecked")).not.toContain("bg-background");
-  });
-
-  it("draws its on state as an accent-text track with a card thumb, so a checked switch clears 3:1 in every theme", () => {
-    render(<Switch aria-label="Reminders" />);
-    const track = screen.getByRole("switch", { name: "Reminders" });
-    fireEvent.click(track);
-    expect(track).toHaveAttribute("data-state", "checked");
-    const thumb = track.firstElementChild as Element;
-    expect(stateClasses(track, "checked")).toContain("bg-[var(--accent-text)]");
-    expect(stateClasses(track, "checked")).toContain("border-transparent");
-    expect(stateClasses(track, "checked")).not.toContain("bg-primary");
-    expect(stateClasses(thumb, "checked")).toContain("bg-card");
-    expect(stateClasses(thumb, "checked")).not.toContain("bg-background");
-  });
-});