@tangle-network/ui 11.32.2 → 11.34.0

package/src/primitives/interaction-states.test.tsx

@@ -0,0 +1,285 @@
+import * as React from "react";
+import { cleanup, render, screen } from "@testing-library/react";
+import { compile } from "tailwindcss";
+import { afterEach, beforeAll, describe, expect, it, vi } from "vitest";
+import { focusFieldWithin } from "../lib/focus";
+import {
+  ixControl,
+  ixControlAfter,
+  ixControlSoft,
+  ixField,
+  ixRow,
+  ixSelected,
+  ixTabUnderline,
+} from "../lib/interaction";
+import { Button } from "./button";
+import { Card, CardDescription } from "./card";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "./dropdown-menu";
+import { Input, Textarea } from "./input";
+import { SegmentedControl } from "./segmented-control";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select";
+import { Tabs, TabsList, TabsTrigger } from "./tabs";
+
+/**
+ * Every primitive draws its interaction states from one helper in
+ * lib/interaction.ts (ROOT-SPEC section b). This is the cheap static guard:
+ * each primitive's rendered className carries every class of its helper, so a
+ * later edit or a tailwind-merge conflict cannot silently drop a state. The
+ * second suite compiles each helper with Tailwind to prove the classes emit the
+ * declarations and selectors the states need.
+ */
+afterEach(cleanup);
+beforeAll(() => {
+  // jsdom lacks the layout APIs Radix Select and Menu call while opening.
+  Element.prototype.scrollIntoView ??= vi.fn();
+  Element.prototype.hasPointerCapture ??= vi.fn(() => false);
+  Element.prototype.releasePointerCapture ??= vi.fn();
+});
+
+const tokens = (helper: string) => helper.split(/\s+/).filter(Boolean);
+const classes = (el: Element) => new Set(el.className.split(/\s+/));
+
+/** Every class of every helper is on the element. */
+function expectHelpers(el: Element, ...helpers: string[]) {
+  const have = classes(el);
+  for (const helper of helpers) {
+    for (const token of tokens(helper)) expect(have, `${el.tagName} is missing ${token}`).toContain(token);
+  }
+}
+
+/** The glow only strong controls get. */
+const HOVER_GLOW = "hover:shadow-[var(--ix-hover)]";
+/** focusRing, which every control keeps exactly. */
+const FOCUS_RING = [
+  "focus-visible:outline-1",
+  "focus-visible:outline-[var(--focus-border)]",
+  "focus-visible:ring-4",
+  "focus-visible:ring-[var(--focus-halo)]",
+];
+/** focusField's `:focus` part, which every field keeps exactly. */
+const FOCUS_FIELD = ["focus:outline-hidden", "focus:border-[var(--focus-border)]", "focus:ring-3", "focus:ring-[var(--focus-halo)]"];
+
+describe("each primitive renders its interaction helper", () => {
+  it.each(["default", "destructive", "secondary", "outline", "sandbox"] as const)(
+    "Button %s takes ixControl and keeps the focus ring",
+    (variant) => {
+      render(<Button variant={variant}>Go</Button>);
+      const button = screen.getByRole("button");
+      expectHelpers(button, ixControl);
+      for (const token of FOCUS_RING) expect(classes(button)).toContain(token);
+    },
+  );
+
+  it.each(["ghost", "link", "bare"] as const)("Button %s takes ixControlSoft and never the hover glow", (variant) => {
+    render(<Button variant={variant}>Go</Button>);
+    const button = screen.getByRole("button");
+    expectHelpers(button, ixControlSoft);
+    expect(classes(button)).not.toContain(HOVER_GLOW);
+    expect(classes(button)).not.toContain("hover:bg-muted");
+    for (const token of FOCUS_RING) expect(classes(button)).toContain(token);
+  });
+
+  it.each(["outline", "ghost", "bare"] as const)("a %s toggle Button (aria-pressed) adds ixControl and ixSelected", (variant) => {
+    render(<Button variant={variant} aria-pressed>Bold</Button>);
+    expectHelpers(screen.getByRole("button"), ixControl, ixSelected);
+  });
+
+  it("Input and Textarea take ixField with focusField's focus border and halo", () => {
+    render(<><Input aria-label="Name" /><Textarea aria-label="Notes" /></>);
+    for (const field of [screen.getByLabelText("Name"), screen.getByLabelText("Notes")]) {
+      expectHelpers(field, ixField);
+      for (const token of FOCUS_FIELD) expect(classes(field)).toContain(token);
+      expect(classes(field)).not.toContain("border-border");
+      expect(classes(field)).not.toContain("hover:border-[var(--border-strong)]");
+    }
+  });
+
+  it("focusFieldWithin is a field: ixField plus the has-focus ring, without the neutral hover", () => {
+    expect(tokens(focusFieldWithin)).toEqual(expect.arrayContaining(tokens(ixField)));
+    expect(focusFieldWithin).toContain("has-[");
+    expect(focusFieldWithin).toContain(":focus]:ring-[var(--focus-halo)]");
+    expect(tokens(focusFieldWithin)).not.toContain("hover:border-[var(--border-strong)]");
+    expect(tokens(focusFieldWithin)).not.toContain("border-border");
+  });
+
+  it("SelectTrigger is a field that keeps its well and an after-click ring while open", () => {
+    render(<Select><SelectTrigger aria-label="Status"><SelectValue /></SelectTrigger></Select>);
+    const trigger = screen.getByRole("combobox");
+    expectHelpers(trigger, ixField, ixControlAfter);
+    for (const token of FOCUS_FIELD) expect(classes(trigger)).toContain(token);
+    expect(classes(trigger)).toContain("data-[state=open]:shadow-[var(--ix-after)]");
+    expect(classes(trigger)).toContain("data-[state=open]:border-[var(--ix-hover-border)]");
+    // The open state must not repaint the well.
+    expect([...classes(trigger)].filter((c) => c.startsWith("data-[state=open]:bg-"))).toEqual([]);
+  });
+
+  it("SelectContent paints the popover level and SelectItem takes ixRow", async () => {
+    render(
+      <Select open value="a">
+        <SelectTrigger aria-label="Status"><SelectValue /></SelectTrigger>
+        <SelectContent><SelectItem value="a">Active</SelectItem><SelectItem value="b">Paused</SelectItem></SelectContent>
+      </Select>,
+    );
+    const listbox = await screen.findByRole("listbox");
+    const content = listbox.closest("[data-radix-select-viewport]")?.parentElement ?? listbox;
+    expect(classes(content)).toContain("bg-popover");
+    expect(classes(content)).toContain("shadow-[var(--edge-highlight),var(--shadow-card)]");
+    expect(classes(content)).not.toContain("bg-card");
+    for (const option of screen.getAllByRole("option")) {
+      expectHelpers(option, ixRow);
+      expect(classes(option)).not.toContain("focus:bg-[var(--accent-surface-strong)]");
+    }
+  });
+
+  it("DropdownMenu content paints the popover level and every item kind takes ixRow", async () => {
+    render(
+      <DropdownMenu open>
+        <DropdownMenuTrigger>Menu</DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuItem>Rename</DropdownMenuItem>
+          <DropdownMenuCheckboxItem checked>Pinned</DropdownMenuCheckboxItem>
+          <DropdownMenuRadioGroup value="a"><DropdownMenuRadioItem value="a">Newest</DropdownMenuRadioItem></DropdownMenuRadioGroup>
+          <DropdownMenuSub><DropdownMenuSubTrigger>Move to</DropdownMenuSubTrigger></DropdownMenuSub>
+        </DropdownMenuContent>
+      </DropdownMenu>,
+    );
+    const menu = await screen.findByRole("menu");
+    expect(classes(menu)).toContain("bg-popover");
+    expect(classes(menu)).toContain("shadow-[var(--edge-highlight),var(--shadow-card)]");
+    expect(classes(menu)).not.toContain("bg-card");
+    const items = [
+      screen.getByRole("menuitem", { name: "Rename" }),
+      screen.getByRole("menuitemcheckbox", { name: "Pinned" }),
+      screen.getByRole("menuitemradio", { name: "Newest" }),
+      screen.getByRole("menuitem", { name: "Move to" }),
+    ];
+    for (const item of items) {
+      expectHelpers(item, ixRow);
+      expect(classes(item)).not.toContain("focus:bg-muted/50");
+    }
+  });
+
+  it("Card is a ladder level with a shadow; hover and interactive cards take ixControl", () => {
+    render(
+      <>
+        <Card data-testid="plain" />
+        <Card data-testid="hover" hover />
+        <Card data-testid="interactive" interactive />
+        <CardDescription>Guests, staff and vendors message your business on WhatsApp.</CardDescription>
+      </>,
+    );
+    const plain = screen.getByTestId("plain");
+    expect(plain).toHaveAttribute("data-slot", "card");
+    expect(classes(plain)).toContain("shadow-[var(--edge-highlight),var(--shadow-card)]");
+    expect(classes(plain)).not.toContain(HOVER_GLOW);
+    for (const id of ["hover", "interactive"]) {
+      const card = screen.getByTestId(id);
+      expectHelpers(card, ixControl);
+      expect(card).not.toHaveAttribute("interactive");
+      expect(classes(card)).not.toContain("hover:border-[var(--border-strong)]");
+    }
+    expect(classes(screen.getByText(/Guests, staff/))).toContain("line-clamp-2");
+  });
+
+  it("SegmentedControl row: a well track, soft items, the selected state on aria-checked", () => {
+    const options = [{ value: "a", label: "A–Z" }, { value: "b", label: "Recent" }];
+    render(<SegmentedControl aria-label="Sort" value="a" onValueChange={() => {}} options={options} />);
+    const track = screen.getByRole("radiogroup");
+    expect(classes(track)).toContain("bg-[var(--well)]");
+    expect(classes(track)).toContain("border-[var(--field-border)]");
+    expect(classes(track)).not.toContain("bg-card");
+    for (const radio of screen.getAllByRole("radio")) {
+      expectHelpers(radio, ixControlSoft, ixSelected);
+      for (const token of FOCUS_RING) expect(classes(radio)).toContain(token);
+      expect(classes(radio)).not.toContain("bg-[var(--accent-surface)]");
+    }
+  });
+
+  it("SegmentedControl tabs: the underline helper and a transparent border slot", () => {
+    const options = [{ value: "a", label: "Team" }, { value: "b", label: "Roles" }];
+    render(<SegmentedControl aria-label="Section" variant="tabs" value="a" onValueChange={() => {}} options={options} />);
+    for (const radio of screen.getAllByRole("radio")) {
+      expectHelpers(radio, ixTabUnderline);
+      expect(classes(radio)).toContain("border-transparent");
+      expect(classes(radio)).not.toContain("border-[var(--accent-text)]");
+    }
+  });
+
+  it.each([
+    ["default", [ixControlSoft, ixSelected]],
+    ["pills", [ixControlSoft, ixSelected]],
+    ["underline", [ixTabUnderline]],
+  ] as const)("TabsTrigger %s takes its helper", (variant, helpers) => {
+    render(
+      <Tabs defaultValue="a">
+        <TabsList variant={variant}>
+          <TabsTrigger variant={variant} value="a">Overview</TabsTrigger>
+          <TabsTrigger variant={variant} value="b">Activity</TabsTrigger>
+        </TabsList>
+      </Tabs>,
+    );
+    for (const tab of screen.getAllByRole("tab")) {
+      expectHelpers(tab, ...helpers);
+      for (const token of FOCUS_RING) expect(classes(tab)).toContain(token);
+      expect([...classes(tab)]).not.toEqual(expect.arrayContaining(["data-[state=active]:bg-background"]));
+      expect(classes(tab)).not.toContain("data-[state=active]:border-primary");
+    }
+  });
+});
+
+describe("Tailwind compiles every interaction class to the state it names", () => {
+  /** A fresh compiler per class, so each class's CSS is read on its own. */
+  async function cssFor(candidate: string) {
+    const compiler = await compile("@tailwind utilities;");
+    return compiler.build([candidate]);
+  }
+
+  const all = [...new Set([ixControl, ixControlAfter, ixControlSoft, ixField, ixSelected, ixTabUnderline, ixRow].flatMap(tokens))];
+
+  it.each(all)("%s emits a rule", async (candidate) => {
+    expect(await cssFor(candidate)).toMatch(/\{[^}]*:[^}]*\}/);
+  });
+
+  it("composes the hover and press glows with the focus ring instead of replacing it", async () => {
+    for (const [candidate, value] of [
+      ["hover:shadow-[var(--ix-hover)]", "var(--ix-hover)"],
+      ["active:shadow-[var(--ix-press)]", "var(--ix-press)"],
+    ]) {
+      const css = await cssFor(candidate);
+      expect(css).toContain(`--tw-shadow: ${value}`);
+      expect(css).toContain("var(--tw-ring-shadow), var(--tw-shadow)");
+    }
+  });
+
+  it("keys the after-click ring on mouse focus only", async () => {
+    const css = await cssFor("focus:not-focus-visible:shadow-[var(--ix-after)]");
+    expect(css).toContain(":focus:not(:focus-visible)");
+    expect(css).toContain("--tw-shadow: var(--ix-after)");
+  });
+
+  it("reads the field fill and border from the surface context", async () => {
+    expect(await cssFor("bg-[var(--field-surface,var(--well))]")).toContain("background-color: var(--field-surface,var(--well))");
+    expect(await cssFor("border-[var(--field-border)]")).toContain("border-color: var(--field-border)");
+    expect(await cssFor("hover:border-[var(--ix-hover-border)]")).toContain("border-color: var(--ix-hover-border)");
+  });
+
+  it("draws selection on aria-pressed, aria-checked, aria-current, data-state on and active", async () => {
+    const css = await cssFor("aria-[current=page]:shadow-[inset_0_0_0_1px_var(--ix-sel-ring)]");
+    expect(css).toContain('[aria-current="page"]');
+    expect(css).toContain("inset 0 0 0 1px");
+    expect(await cssFor("aria-pressed:bg-[var(--ix-sel-bg)]")).toContain('[aria-pressed="true"]');
+    expect(await cssFor("aria-checked:bg-[var(--ix-sel-bg)]")).toContain('[aria-checked="true"]');
+    expect(await cssFor("data-[state=active]:bg-[var(--ix-sel-bg)]")).toContain('[data-state="active"]');
+    expect(await cssFor("data-[highlighted]:bg-[var(--ix-sel-bg)]")).toContain("[data-highlighted]");
+  });
+});

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

@@ -271,7 +271,9 @@ describe("SegmentedControl", () => {
     const radiogroup = screen.getByRole("radiogroup")
     expect(radiogroup.className).toContain("flex-wrap")
     expect(radiogroup.className).toContain("rounded-lg")
-    expect(radiogroup.className).toContain("bg-card")
+    // The row track is a field well, so it steps off whatever plane holds it.
+    expect(radiogroup.className).toContain("bg-[var(--well)]")
+    expect(radiogroup.className).toContain("border-[var(--field-border)]")
   })
 
   it("applies tabs variant classes with nowrap", () => {
@@ -287,7 +289,7 @@ describe("SegmentedControl", () => {
     expect(radiogroup.className).toContain("flex-nowrap")
     expect(radiogroup.className).toContain("overflow-x-auto")
     expect(radiogroup.className).toContain("border-b")
-    expect(radiogroup.className).not.toContain("bg-card")
+    expect(radiogroup.className).not.toContain("bg-[var(--well)]")
   })
 
   it("passes aria-label to the radiogroup", () => {

package/src/primitives/segmented-control.tsx

@@ -5,6 +5,7 @@ declare const process: { env: { NODE_ENV?: string } } | undefined
 import * as React from "react"
 import { touchTarget } from "../lib/control-presentation"
 import { focusRing, focusRingInset } from "../lib/focus"
+import { ixControlSoft, ixSelected, ixTabUnderline } from "../lib/interaction"
 import { cn } from "../lib/utils"
 
 /**
@@ -19,7 +20,11 @@ import { cn } from "../lib/utils"
  * console warning fires when both are omitted.
  *
  * Design rules baked into the default variant:
- *   - Only the SELECTED segment shows a surface colour + accent text.
+ *   - The row track is a field well (`--well`, `--field-border`), so the
+ *     control reads as one inset group on whatever plane it sits on.
+ *   - Only the SELECTED segment shows a surface colour + accent text: the
+ *     shared selected state (`ixSelected`: tint plus an inset ring). A tab
+ *     shows it as an underline instead (`ixTabUnderline`).
  *   - Unselected segments have NO background — they're plain-text labels
  *     that darken on hover. This keeps the selected segment as the
  *     single visual anchor instead of the whole group competing with
@@ -160,7 +165,7 @@ export function SegmentedControl<T extends string = string>({
       className={cn(
         "flex gap-1",
         variant === "row" &&
-          "flex-wrap items-center rounded-lg border border-border bg-card p-1",
+          "flex-wrap items-center rounded-lg border border-[var(--field-border)] bg-[var(--well)] p-1",
         variant === "tabs" &&
           ["relative flex-nowrap items-end border-b border-border pb-0 overflow-x-auto", tabEdgeFade],
         className,
@@ -186,19 +191,13 @@ export function SegmentedControl<T extends string = string>({
             }}
             className={cn(
               "relative inline-flex items-center gap-2 whitespace-nowrap text-sm font-medium transition-[color,background-color,border-color,box-shadow]",
-              variant === "row" && ["rounded-md px-3 py-1.5", focusRing],
+              variant === "row" && ["rounded-md border border-transparent px-3 py-1.5", focusRing, ixControlSoft, ixSelected],
               // The strip scrolls horizontally, which would clip an outer ring.
-              variant === "tabs" && ["shrink-0 rounded-none border-b-2 -mb-px px-4 py-2", touchTarget, focusRingInset],
-              // Active styling is the ONLY styled state — unselected
-              // segments stay transparent on purpose so they don't
-              // compete visually with the selection.
-              active
-                ? variant === "row"
-                  ? "border border-transparent bg-[var(--accent-surface)] text-[var(--accent-text)]"
-                  : "border-[var(--accent-text)] text-[var(--accent-text)]"
-                : variant === "row"
-                  ? "border border-transparent text-muted-foreground hover:text-foreground"
-                  : "border-transparent text-muted-foreground hover:text-foreground",
+              // The border-b-2 slot stays transparent: the underline is ixTabUnderline's inset shadow.
+              variant === "tabs" && ["shrink-0 rounded-none border-b-2 border-transparent -mb-px px-4 py-2", touchTarget, focusRingInset, ixTabUnderline],
+              // Selection (aria-checked) is the only filled state; unselected
+              // segments stay transparent so they don't compete with it.
+              active ? "text-[var(--accent-text)]" : "text-muted-foreground hover:text-foreground",
             )}
           >
             <span>{option.label}</span>

package/src/primitives/select.tsx

@@ -4,6 +4,7 @@ import * as SelectPrimitive from "@radix-ui/react-select";
 import { Check, ChevronDown, ChevronUp } from "lucide-react";
 import * as React from "react";
 import { controlSizes, fieldPresentation, fieldSizes, fieldTouchText } from "../lib/control-presentation";
+import { ixControlAfter, ixRow } from "../lib/interaction";
 import { cn } from "../lib/utils";
 
 const Select = SelectPrimitive.Root;
@@ -22,14 +23,18 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex w-full items-center justify-between gap-2 whitespace-nowrap border py-1 shadow-sm placeholder:text-[var(--text-dim)] disabled:cursor-not-allowed disabled:opacity-50",
+      "flex w-full items-center justify-between gap-2 whitespace-nowrap border py-1 placeholder:text-[var(--text-dim)] disabled:cursor-not-allowed disabled:opacity-50",
+      // A field (ixField, via fieldPresentation) that keeps a soft ring after a
+      // mouse click, like every control.
       fieldPresentation,
+      ixControlAfter,
       fieldTouchText,
       // A long value ends in an ellipsis before the chevron: line-clamp cannot
       // ellipsize a nowrap line, so it clipped mid-glyph under the icon.
       "data-[placeholder]:text-[var(--text-dim)] [&>span]:min-w-0 [&>span]:truncate [&>span]:text-left",
-      // The designed open state: accent border and surface while the menu is up.
-      "data-[state=open]:border-primary data-[state=open]:bg-[var(--accent-surface-strong)] [&[data-state=open]>svg]:rotate-180 [&>svg]:transition-transform",
+      // Open: the after-click ring stays while the menu is up, and the field
+      // keeps its well fill so it still reads as the field it is.
+      "data-[state=open]:border-[var(--ix-hover-border)] data-[state=open]:shadow-[var(--ix-after)] [&[data-state=open]>svg]:rotate-180 [&>svg]:transition-transform",
       size === "compact" || size === "touch" ? cn(fieldSizes.md, controlSizes[size]) : fieldSizes[size === "default" ? "md" : size],
       className,
     )}
@@ -86,7 +91,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-lg border border-border bg-card text-foreground shadow-[var(--shadow-dropdown)] data-[state=closed]:animate-out data-[state=open]:animate-in",
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-lg border border-border bg-popover text-popover-foreground shadow-[var(--edge-highlight),var(--shadow-card)] data-[state=closed]:animate-out data-[state=open]:animate-in",
         position === "popper" &&
           "data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1",
         className,
@@ -129,7 +134,8 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-md py-1.5 pr-8 pl-2 text-sm outline-none transition-colors focus:bg-[var(--accent-surface-strong)] focus:text-foreground data-[state=checked]:bg-[var(--accent-surface-strong)] data-[state=checked]:font-medium data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex w-full cursor-default select-none items-center rounded-md py-1.5 pr-8 pl-2 text-sm outline-none transition-[color,background-color,box-shadow] focus:text-foreground data-[state=checked]:font-medium data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      ixRow,
       className,
     )}
     {...props}

package/src/primitives/tabs.tsx

@@ -1,6 +1,7 @@
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 import * as React from "react";
 import { focusRing } from "../lib/focus";
+import { ixControlSoft, ixSelected, ixTabUnderline } from "../lib/interaction";
 import { cn } from "../lib/utils";
 
 const Tabs = TabsPrimitive.Root;
@@ -34,13 +35,16 @@ const TabsTrigger = React.forwardRef<
     variant?: "default" | "pills" | "underline";
   }
 >(({ className, variant = "default", ...props }, ref) => {
+  // Selection is the shared selected state (lib/interaction.ts): a tint and an
+  // inset ring for default and pills, a 2px underline for underline, whose
+  // border-b-2 slot stays transparent.
   const variants = {
     default:
-      `inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium transition-all ${focusRing} disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm`,
+      `inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium transition-all ${focusRing} disabled:pointer-events-none disabled:opacity-50 ${ixControlSoft} ${ixSelected}`,
     pills:
-      `inline-flex items-center justify-center whitespace-nowrap rounded-full px-4 py-2 text-sm font-medium transition-all ${focusRing} disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=inactive]:text-muted-foreground data-[state=inactive]:hover:bg-muted`,
+      `inline-flex items-center justify-center whitespace-nowrap rounded-full px-4 py-2 text-sm font-medium transition-all ${focusRing} disabled:pointer-events-none disabled:opacity-50 data-[state=inactive]:text-muted-foreground ${ixControlSoft} ${ixSelected}`,
     underline:
-      `inline-flex items-center justify-center whitespace-nowrap rounded-t-md pb-3 text-sm font-medium transition-all ${focusRing} disabled:pointer-events-none disabled:opacity-50 border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:text-foreground data-[state=inactive]:text-muted-foreground`,
+      `inline-flex items-center justify-center whitespace-nowrap rounded-t-md pb-3 text-sm font-medium transition-all ${focusRing} disabled:pointer-events-none disabled:opacity-50 border-b-2 border-transparent data-[state=inactive]:text-muted-foreground ${ixTabUnderline}`,
   };
 
   return (

package/src/run/inline-thinking-item.test.tsx

@@ -0,0 +1,29 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import type { ReasoningPart } from "../types/parts";
+import { InlineThinkingItem } from "./inline-thinking-item";
+
+const TEXT = "**Ensuring workspace configuration** I need to be cautious because the saved file is not verifiable.";
+
+function part(active: boolean): ReasoningPart {
+  return { type: "reasoning", text: TEXT, time: active ? { start: Date.now() } : { start: 0, end: 4_000 } };
+}
+
+describe("InlineThinkingItem", () => {
+  it("previews the reasoning as plain text, never raw markdown marks", () => {
+    const { container } = render(<InlineThinkingItem part={part(false)} />);
+    expect(container.textContent).toContain("Ensuring workspace configuration I need to be cautious");
+    expect(container.textContent).not.toContain("**");
+  });
+
+  it("opens while the model thinks, by default", () => {
+    render(<InlineThinkingItem part={part(true)} />);
+    expect(screen.getByRole("button", { expanded: true })).toBeInTheDocument();
+  });
+
+  it("stays closed while the model thinks when the product keeps deliberation out of view", () => {
+    render(<InlineThinkingItem part={part(true)} openWhileActive={false} />);
+    expect(screen.getByRole("button", { expanded: false })).toBeInTheDocument();
+    expect(screen.getByText("Thinking…")).toBeInTheDocument();
+  });
+});

package/src/run/inline-thinking-item.tsx

@@ -1,6 +1,6 @@
 import { memo, useEffect, useRef, useState } from "react";
 import { Brain } from "lucide-react";
-import { truncateText } from "../utils/format";
+import { plainTextFromMarkdown, truncateText } from "../utils/format";
 import type { ReasoningPart } from "../types/parts";
 import { Markdown } from "../markdown/markdown";
 import { TextShimmer } from "../primitives/text-shimmer";
@@ -11,6 +11,12 @@ export interface InlineThinkingItemProps {
   part: ReasoningPart;
   defaultOpen?: boolean;
   autoCollapse?: boolean;
+  /**
+   * Open the row while the model is still thinking. A product that keeps
+   * deliberation out of the reader's way passes false: the row stays as
+   * `defaultOpen` left it, with its one-line preview, until the reader opens it.
+   */
+  openWhileActive?: boolean;
   className?: string;
   contentClassName?: string;
 }
@@ -20,6 +26,7 @@ export const InlineThinkingItem = memo(
     part,
     defaultOpen = false,
     autoCollapse = true,
+    openWhileActive = true,
     className,
     contentClassName,
   }: InlineThinkingItemProps) => {
@@ -31,12 +38,12 @@ export const InlineThinkingItem = memo(
     const durationMs =
       startTime != null && endTime != null ? endTime - startTime : undefined;
     const isActive = startTime != null && endTime == null;
-    const preview = part.text ? truncateText(part.text, 120) : undefined;
+    const preview = part.text ? truncateText(plainTextFromMarkdown(part.text), 120) : undefined;
 
     useEffect(() => {
       if (isActive) {
         autoCollapsedRef.current = false;
-        setOpen(true);
+        if (openWhileActive) setOpen(true);
         return;
       }
 
@@ -48,7 +55,7 @@ export const InlineThinkingItem = memo(
 
         return () => window.clearTimeout(timer);
       }
-    }, [autoCollapse, durationMs, isActive]);
+    }, [autoCollapse, durationMs, isActive, openWhileActive]);
 
     return (
       <RunRowShell

package/src/utils/format.test.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from "vitest";
-import { formatBytes, formatUptime } from "./format";
+import { formatBytes, formatUptime, plainTextFromMarkdown } from "./format";
 
 describe("formatUptime", () => {
   it("renders seconds for short durations", () => {
@@ -41,3 +41,18 @@ describe("formatBytes", () => {
     expect(formatBytes(-1)).toBe("—");
   });
 });
+
+describe("plainTextFromMarkdown", () => {
+  it("drops emphasis, headings, list markers, code marks and link syntax", () => {
+    expect(plainTextFromMarkdown("**Ensuring workspace configuration** I need to check")).toBe("Ensuring workspace configuration I need to check");
+    expect(plainTextFromMarkdown("## Plan\n- item one\n- *soft* point")).toBe("Plan\nitem one\nsoft point");
+    expect(plainTextFromMarkdown("see [docs](https://example.com) and _this_")).toBe("see docs and this");
+    expect(plainTextFromMarkdown("**bold** and __also__ ~~gone~~")).toBe("bold and also gone");
+    expect(plainTextFromMarkdown("1. First\n2) Second")).toBe("First\nSecond");
+  });
+
+  it("keeps characters that are not markdown marks", () => {
+    expect(plainTextFromMarkdown("read `src/a_b.ts` and snake_case_name")).toBe("read src/a_b.ts and snake_case_name");
+    expect(plainTextFromMarkdown("2 * 3 * 4 = 24")).toBe("2 * 3 * 4 = 24");
+  });
+});

package/src/utils/format.ts

@@ -8,6 +8,23 @@ export function formatDuration(ms: number): string {
   return remaining > 0 ? `${minutes}m ${remaining}s` : `${minutes}m`;
 }
 
+/**
+ * Markdown read as plain text, for a one-line preview: code fences, emphasis,
+ * headings, list and quote markers, and link syntax are removed, so a preview
+ * never shows `**` or `#`. Underscores inside words (`snake_case`) are kept.
+ */
+export function plainTextFromMarkdown(text: string): string {
+  return text
+    .replace(/```[^\n]*\n?([\s\S]*?)```/g, "$1")
+    .replace(/`([^`]*)`/g, "$1")
+    .replace(/!?\[([^\]]*)\]\([^)]*\)/g, "$1")
+    .replace(/^[ \t]{0,3}(?:#{1,6}[ \t]+|>[ \t]?|[-*+][ \t]+|\d+[.)][ \t]+)/gm, "")
+    .replace(/(\*\*|__)(?=\S)([\s\S]*?\S)\1/g, "$2")
+    .replace(/(^|[^\w*])\*(?=\S)([^*\n]*?\S)\*(?![\w*])/g, "$1$2")
+    .replace(/(^|[^\w])_(?=\S)([^_\n]*?\S)_(?!\w)/g, "$1$2")
+    .replace(/~~(?=\S)([\s\S]*?\S)~~/g, "$1");
+}
+
 /** Truncate text to `max` characters, appending "..." if truncated. */
 export function truncateText(text: string, max: number): string {
   const cleaned = text.replace(/\s+/g, " ").trim();

package/src/utils/index.ts

@@ -1,5 +1,5 @@
 export { copyText } from './copy-text';
-export { formatBytes, formatDuration, formatUptime, truncateText } from './format';
+export { formatBytes, formatDuration, formatUptime, plainTextFromMarkdown, truncateText } from './format';
 export { timeAgo } from './time-ago';
 export {
   getToolCategory,
@@ -15,3 +15,12 @@ export {
   focusRing,
   focusRingInset,
 } from '../lib/focus';
+export {
+  ixControl,
+  ixControlAfter,
+  ixControlSoft,
+  ixField,
+  ixRow,
+  ixSelected,
+  ixTabUnderline,
+} from '../lib/interaction';