@tangle-network/ui 11.51.15 → 11.51.17

package/src/primitives/stat-card.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react'
-import { Activity, Cpu, DollarSign, HardDrive, Terminal, Users, Zap } from 'lucide-react'
+import { Terminal } from 'lucide-react'
 import { StatCard } from './stat-card'
 
 const meta: Meta<typeof StatCard> = {
@@ -13,7 +13,7 @@ type Story = StoryObj<typeof StatCard>
 
 export const Default: Story = {
   args: {
-    title: 'Active Sessions',
+    title: 'Active sessions',
     value: 24,
     subtitle: 'across 3 regions',
     icon: <Terminal className="h-5 w-5" />,
@@ -21,10 +21,10 @@ export const Default: Story = {
 }
 
 export const SandboxVariant: Story = {
-  name: 'Sandbox Variant',
+  name: 'Sandbox variant',
   args: {
     variant: 'sandbox',
-    title: 'Active Sessions',
+    title: 'Active sessions',
     value: 24,
     subtitle: 'across 3 regions',
     icon: <Terminal className="h-5 w-5" />,
@@ -33,103 +33,92 @@ export const SandboxVariant: Story = {
 }
 
 export const CpuUsage: Story = {
-  name: 'CPU Usage',
+  name: 'CPU usage',
   args: {
-    title: 'Avg CPU Usage',
+    title: 'Avg CPU usage',
     value: '68%',
     subtitle: 'p95: 94%',
-    icon: <Cpu className="h-5 w-5" />,
     trend: { value: -4, label: 'vs yesterday' },
   },
 }
 
 export const MemoryUsage: Story = {
-  name: 'Memory Usage',
+  name: 'Memory usage',
   args: {
-    title: 'Memory Allocated',
+    title: 'Memory allocated',
     value: '12.4 GB',
     subtitle: 'of 32 GB pool',
-    icon: <HardDrive className="h-5 w-5" />,
     trend: { value: 8, label: 'vs last hour' },
   },
 }
 
 export const MonthlyCost: Story = {
-  name: 'Monthly Cost',
+  name: 'Monthly cost',
   args: {
-    title: 'Estimated Cost',
+    title: 'Estimated cost',
     value: '$142.80',
     subtitle: 'current billing cycle',
-    icon: <DollarSign className="h-5 w-5" />,
     trend: { value: 0, label: 'vs last month' },
   },
 }
 
 export const TrendPositive: Story = {
-  name: 'Trend — Positive',
+  name: 'Trend up',
   args: {
-    title: 'Sessions Today',
+    title: 'Sessions today',
     value: 1284,
-    icon: <Activity className="h-5 w-5" />,
     trend: { value: 23, label: 'vs yesterday' },
   },
 }
 
 export const TrendNegative: Story = {
-  name: 'Trend — Negative',
+  name: 'Trend down',
   args: {
-    title: 'Error Rate',
+    title: 'Error rate',
     value: '1.2%',
-    icon: <Zap className="h-5 w-5" />,
     trend: { value: -18, label: 'vs last week' },
   },
 }
 
 export const InfraGrid: Story = {
-  name: 'Infrastructure Grid',
+  name: 'Infrastructure grid',
   render: () => (
     <div className="grid grid-cols-2 gap-4 w-[640px]">
       <StatCard
-        title="Active Sessions"
+        title="Active sessions"
         value={24}
         subtitle="across 3 regions"
-        icon={<Terminal className="h-5 w-5" />}
         trend={{ value: 12, label: 'vs last hour' }}
       />
       <StatCard
-        title="CPU Usage"
+        title="CPU usage"
         value="68%"
         subtitle="p95: 94%"
-        icon={<Cpu className="h-5 w-5" />}
         trend={{ value: -4, label: 'vs yesterday' }}
       />
       <StatCard
-        title="Memory Allocated"
+        title="Memory allocated"
         value="12.4 GB"
         subtitle="of 32 GB pool"
-        icon={<HardDrive className="h-5 w-5" />}
         trend={{ value: 8, label: 'vs last hour' }}
       />
       <StatCard
         variant="sandbox"
-        title="Estimated Cost"
+        title="Estimated cost"
         value="$142.80"
         subtitle="current billing cycle"
-        icon={<DollarSign className="h-5 w-5" />}
         trend={{ value: 3, label: 'vs last month' }}
       />
       <StatCard
-        title="Unique Users"
+        title="Unique users"
         value={312}
         subtitle="last 30 days"
-        icon={<Users className="h-5 w-5" />}
-        trend={{ value: 19, label: 'MoM' }}
+        trend={{ value: 19, label: 'vs last month' }}
       />
       <StatCard
-        title="Avg Startup Time"
+        title="Avg startup time"
         value="840ms"
         subtitle="p99: 1.4s"
-        icon={<Zap className="h-5 w-5" />}
         trend={{ value: -11, label: 'vs last week' }}
       />
     </div>

package/src/primitives/stat-card.tsx

@@ -57,7 +57,7 @@ const StatCard = React.forwardRef<HTMLDivElement, StatCardProps>(
         <div className="flex items-start justify-between">
           <div className="space-y-1">
             <p className="text-muted-foreground text-sm">{title}</p>
-            <p className="font-bold text-3xl tracking-tight">{value}</p>
+            <p className="font-medium text-3xl tabular-nums tracking-tight">{value}</p>
             {/* A token, never `opacity-70` over the muted tone: a translucent
                 foreground renders as the token COMPOSITED over whatever plane sits
                 behind it, so the same class lands a different colour — and a

package/src/primitives/status-pill.test.tsx

@@ -28,31 +28,6 @@ describe("StatusPill", () => {
     expect(glyph).toHaveAttribute("aria-hidden", "true");
   });
 
-  it.each(TONES)("brings %s's own paired background", (tone) => {
-    const { container } = render(<StatusPill tone={tone}>Status</StatusPill>);
-    const pill = container.firstElementChild as HTMLElement;
-    expect(pill.className).toContain(`bg-[var(--surface-`);
-    expect(pill.className).toContain("border");
-  });
-
-  // A tone colour is solved against its own background. `bare` drops that
-  // background, so the tone may ride on the glyph only — lifting it onto the
-  // label would put it on whatever plane the caller happens to be on.
-  it.each(TONES)("keeps %s's tone off the label in bare mode", (tone) => {
-    const { container } = render(
-      <StatusPill bare tone={tone}>
-        Status
-      </StatusPill>,
-    );
-    const pill = container.firstElementChild as HTMLElement;
-    expect(pill.className).toContain("bg-transparent");
-    expect(pill.className).not.toContain("bg-[var(--surface-");
-
-    const glyphWrapper = container.querySelector("svg")
-      ?.parentElement as HTMLElement;
-    expect(glyphWrapper.className).toContain("text-[var(--surface-");
-  });
-
   // Guards the reason TONE_TEXT is declared rather than recovered by searching
   // TONE_SURFACE for a `text-` class: a miss there yields undefined and removes
   // the tone from the only channel bare mode has left.
@@ -68,22 +43,6 @@ describe("StatusPill", () => {
     expect(glyphWrapper.className).toMatch(/text-\[var\(--surface-[a-z]+-text\)\]/);
   });
 
-  // `px-2` from the size and `px-0` from bare are the same utility group, so
-  // which one lands is decided by the class merge rather than by reading order.
-  // Asserting the resolved class list keeps that a guarantee: a bare pill has to
-  // sit flush against the text beside it, and silently keeping the size padding
-  // would space it like a chip that lost only its background.
-  it.each(["sm", "md"] as const)("drops the %s size padding in bare mode", (size) => {
-    const { container } = render(
-      <StatusPill bare size={size} tone="info">
-        Queued
-      </StatusPill>,
-    );
-    const cls = (container.firstElementChild as HTMLElement).className;
-    expect(cls).toContain("px-0");
-    expect(cls).not.toMatch(/(^| )px-2(\.5)?( |$)/);
-  });
-
   it("gives no two tones the same silhouette", () => {
     const shapes = TONES.map((tone) => {
       const { container } = render(<StatusPill tone={tone}>S</StatusPill>);
@@ -91,15 +50,4 @@ describe("StatusPill", () => {
     });
     expect(new Set(shapes).size).toBe(shapes.length);
   });
-
-  it("takes a larger size", () => {
-    const { container } = render(
-      <StatusPill size="md" tone="info">
-        Queued
-      </StatusPill>,
-    );
-    expect((container.firstElementChild as HTMLElement).className).toContain(
-      "text-sm",
-    );
-  });
 });

package/src/primitives/switch.stories.tsx

@@ -41,7 +41,7 @@ export const Overview: Story = {
   name: 'Overview',
   render: () => (
     <div className="flex flex-col gap-6 p-6 w-80">
-      <div className="text-muted-foreground text-xs font-mono uppercase tracking-widest">States</div>
+      <div className="text-muted-foreground text-xs font-mono">States</div>
       <div className="flex flex-col gap-4">
         <div className="flex items-center justify-between">
           <span className="text-sm text-muted-foreground">Off</span>
@@ -61,7 +61,7 @@ export const Overview: Story = {
         </div>
       </div>
 
-      <div className="text-muted-foreground text-xs font-mono uppercase tracking-widest mt-2">Settings panel</div>
+      <div className="text-muted-foreground text-xs font-mono mt-2">Settings panel</div>
       <div className="rounded-xl border border-border bg-card p-4 flex flex-col gap-4">
         {[
           { id: 'auto-sleep', label: 'Auto-sleep after idle', checked: true },

package/src/primitives/tabs.stories.tsx

@@ -104,7 +104,7 @@ export const Overview: Story = {
   render: () => (
     <div className="flex flex-col gap-10 p-6 w-[480px]">
       <div>
-        <div className="text-muted-foreground text-xs font-mono uppercase tracking-widest mb-4">Default (segmented)</div>
+        <div className="text-muted-foreground text-xs font-mono mb-4">Default (segmented)</div>
         <Tabs defaultValue="overview">
           <TabsList>
             <TabsTrigger value="overview">Overview</TabsTrigger>
@@ -137,7 +137,7 @@ export const Overview: Story = {
       </div>
 
       <div>
-        <div className="text-muted-foreground text-xs font-mono uppercase tracking-widest mb-4">Pills</div>
+        <div className="text-muted-foreground text-xs font-mono mb-4">Pills</div>
         <Tabs defaultValue="all">
           <TabsList variant="pills">
             <TabsTrigger value="all" variant="pills">All</TabsTrigger>
@@ -157,7 +157,7 @@ export const Overview: Story = {
       </div>
 
       <div>
-        <div className="text-muted-foreground text-xs font-mono uppercase tracking-widest mb-4">Underline</div>
+        <div className="text-muted-foreground text-xs font-mono mb-4">Underline</div>
         <Tabs defaultValue="settings">
           <TabsList variant="underline">
             <TabsTrigger value="settings" variant="underline">Settings</TabsTrigger>

package/src/primitives/toast.tsx

@@ -13,7 +13,7 @@ import { focusRing } from "../lib/focus";
 import { cn } from "../lib/utils";
 
 const toastVariants = cva(
-  "pointer-events-auto relative flex w-full items-center justify-between gap-3 overflow-hidden rounded-lg border p-4 shadow-lg transition-all",
+  "pointer-events-auto relative flex w-full items-center justify-between gap-3 overflow-hidden rounded-lg border p-4 shadow-lg transition-[transform,opacity]",
   {
     variants: {
       variant: {

package/src/primitives/upload-progress.tsx

@@ -67,8 +67,8 @@ export function UploadProgress({ files, onRemove, onRetry, className }: UploadPr
             {file.status === "uploading" && file.progress !== undefined && (
               <div className="mt-1 h-1 w-full overflow-hidden rounded-full bg-muted/50">
                 <div
-                  className="h-full rounded-full bg-primary transition-all"
-                  style={{ width: `${file.progress}%` }}
+                  className="h-full w-full rounded-full bg-primary transition-transform duration-300 ease-out"
+                  style={{ transform: `translateX(-${100 - file.progress}%)` }}
                 />
               </div>
             )}

package/src/primitives/wizard.tsx

@@ -137,7 +137,7 @@ export function Wizard({ children, step, defaultStep = 0, onStepChange, onFinish
           </p>
           <div className="mt-2 h-1 overflow-hidden rounded-full bg-muted" role="progressbar"
             aria-valuemin={1} aria-valuemax={total} aria-valuenow={current + 1} aria-label={`Step ${current + 1} of ${total}`}>
-            <div className="h-full rounded-full bg-primary transition-all" style={{ width: `${((current + 1) / total) * 100}%` }} />
+            <div className="h-full w-full rounded-full bg-primary transition-transform duration-300 ease-out" style={{ transform: `translateX(-${100 - ((current + 1) / total) * 100}%)` }} />
           </div>
         </div>
         {steps.map((child, index) => index === current

package/src/run/expandable-content.tsx

@@ -68,7 +68,7 @@ export function ExpandableContent({
           type="button"
           onClick={() => setExpanded((value) => !value)}
           className={cn(
-            "mt-1 text-[11px] font-medium text-muted-foreground transition-colors hover:text-foreground",
+            "mt-1 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground",
             toggleClassName,
           )}
         >

package/src/run/expanded-tool-detail.tsx

@@ -128,7 +128,7 @@ export const ExpandedToolDetail = memo(({ part }: ExpandedToolDetailProps) => {
         <div className="overflow-hidden rounded-[var(--radius-lg)] border border-border bg-card">
           <div className="flex items-center gap-2 border-b border-border bg-background px-3 py-2">
             <ArrowRight className="h-3 w-3 text-primary" />
-            <span className="text-xs font-medium uppercase tracking-[0.08em] text-muted-foreground">
+            <span className="text-xs font-medium text-muted-foreground">
               Input
             </span>
           </div>
@@ -141,7 +141,7 @@ export const ExpandedToolDetail = memo(({ part }: ExpandedToolDetailProps) => {
         <div className="overflow-hidden rounded-[var(--radius-lg)] border border-border bg-card">
           <div className="flex items-center gap-2 border-b border-border bg-background px-3 py-2">
             <ArrowLeft className="h-3 w-3 text-primary" />
-            <span className="text-xs font-medium uppercase tracking-[0.08em] text-muted-foreground">
+            <span className="text-xs font-medium text-muted-foreground">
               Output
             </span>
           </div>
@@ -164,7 +164,7 @@ export const ExpandedToolDetail = memo(({ part }: ExpandedToolDetailProps) => {
         <div className="overflow-hidden rounded-[var(--radius-lg)] border border-[var(--surface-danger-border)]">
           <div className="flex items-center gap-2 border-b border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)] px-3 py-2">
             <RunStatusIcon status="failed" aria-hidden className="size-3" />
-            <span className="text-xs font-medium uppercase tracking-[0.08em] text-[var(--surface-danger-text)]">
+            <span className="text-xs font-medium text-[var(--surface-danger-text)]">
               Error
             </span>
           </div>

package/src/run/index.ts

@@ -1,6 +1,7 @@
 export { RunGroup, type RunGroupProps } from "./run-group";
 export {
   RunRowShell,
+  RunRowStatusDot,
   type RunRowShellProps,
   type RunRowStatus,
 } from "./run-row-shell";
@@ -13,6 +14,7 @@ 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.

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

@@ -154,11 +154,11 @@ export const UnifiedWithToolRow: Story = {
 export const AllStates: Story = {
   render: () => (
     <div className="p-6 max-w-2xl space-y-3">
-      <p className="text-xs font-mono uppercase tracking-widest text-muted-foreground px-1">Active</p>
+      <p className="text-xs font-mono text-muted-foreground px-1">Active</p>
       <InlineThinkingItem part={thinkingActive} defaultOpen={true} autoCollapse={false} />
-      <p className="text-xs font-mono uppercase tracking-widest text-muted-foreground px-1 pt-2">Complete (collapsed)</p>
+      <p className="text-xs font-mono text-muted-foreground px-1 pt-2">Complete (collapsed)</p>
       <InlineThinkingItem part={thinkingComplete} defaultOpen={false} autoCollapse={false} />
-      <p className="text-xs font-mono uppercase tracking-widest text-muted-foreground px-1 pt-2">Complete (expanded)</p>
+      <p className="text-xs font-mono text-muted-foreground px-1 pt-2">Complete (expanded)</p>
       <InlineThinkingItem part={thinkingLong} defaultOpen={true} autoCollapse={false} />
     </div>
   ),

package/src/run/inline-tool-item.stories.tsx

@@ -211,11 +211,11 @@ export const GroupedSequence: Story = {
 export const AllStates: Story = {
   render: () => (
     <div className="p-6 max-w-2xl space-y-3">
-      <p className="text-xs font-mono uppercase tracking-widest text-muted-foreground px-1">Completed</p>
+      <p className="text-xs font-mono text-muted-foreground px-1">Completed</p>
       <InlineToolItem part={bashComplete} groupPosition="single" />
-      <p className="text-xs font-mono uppercase tracking-widest text-muted-foreground px-1 pt-2">Running</p>
+      <p className="text-xs font-mono text-muted-foreground px-1 pt-2">Running</p>
       <InlineToolItem part={bashRunning} groupPosition="single" />
-      <p className="text-xs font-mono uppercase tracking-widest text-muted-foreground px-1 pt-2">Error</p>
+      <p className="text-xs font-mono text-muted-foreground px-1 pt-2">Error</p>
       <InlineToolItem part={bashError} groupPosition="single" />
     </div>
   ),

package/src/run/run-group.tsx

@@ -80,7 +80,7 @@ const DEFAULT_BRANDING: AgentBranding = {
 };
 
 const ASSISTANT_SHELL =
-  "min-w-0 flex-1 space-y-3 rounded-[26px] border border-[var(--border-subtle)] bg-[color:color-mix(in_srgb,var(--bg-card)_94%,transparent)] px-5 py-4 shadow-[0_1px_2px_rgba(15,23,42,0.04)]";
+  "min-w-0 flex-1 space-y-3 rounded-[var(--radius-panel)] border border-[var(--border-subtle)] bg-[color:color-mix(in_srgb,var(--bg-card)_94%,transparent)] px-5 py-4 shadow-[0_1px_2px_rgba(15,23,42,0.04)]";
 
 function AssistantShell({
   branding,
@@ -251,7 +251,7 @@ function CategoryBadges({ categories }: { categories: Set<ToolCategory> }) {
           <span
             key={cat}
             title={cat}
-            className="flex h-5 w-5 items-center justify-center rounded border border-border text-muted-foreground"
+            className="flex h-5 w-5 items-center justify-center text-muted-foreground"
           >
             <Icon className="h-3 w-3" />
           </span>
@@ -326,10 +326,10 @@ export const RunGroup = memo(
     const pendingResponse = (
       <AssistantShell branding={branding} isStreaming={true}>
         <div className="flex items-center gap-2 px-0.5 py-0.5 text-sm text-[var(--text-muted)]">
-          <span className="flex gap-[5px]">
-            <span className="h-2 w-2 animate-bounce rounded-full bg-[var(--brand-glow)]" style={{ animationDelay: "0ms" }} />
-            <span className="h-2 w-2 animate-bounce rounded-full bg-[var(--brand-glow)]" style={{ animationDelay: "150ms" }} />
-            <span className="h-2 w-2 animate-bounce rounded-full bg-[var(--brand-glow)]" style={{ animationDelay: "300ms" }} />
+          <span className="flex gap-1">
+            <span className="h-2 w-2 animate-[tangle-breathe_var(--motion-ambient)_infinite] motion-reduce:animate-none rounded-full bg-[var(--brand-glow)]" />
+            <span className="h-2 w-2 animate-[tangle-breathe_var(--motion-ambient)_infinite] motion-reduce:animate-none rounded-full bg-[var(--brand-glow)]" style={{ animationDelay: "200ms" }} />
+            <span className="h-2 w-2 animate-[tangle-breathe_var(--motion-ambient)_infinite] motion-reduce:animate-none rounded-full bg-[var(--brand-glow)]" style={{ animationDelay: "400ms" }} />
           </span>
         </div>
       </AssistantShell>
@@ -474,16 +474,16 @@ export const RunGroup = memo(
                   {branding.label}
                 </span>
                 {renderSummary(run) ? (
-                  <span className="text-[11px] text-muted-foreground">{renderSummary(run)}</span>
+                  <span className="text-xs text-muted-foreground">{renderSummary(run)}</span>
                 ) : null}
                 {collapsed && run.summaryText ? (
-                  <span className="min-w-0 truncate text-[11px] text-foreground/70">
+                  <span className="min-w-0 truncate text-xs text-foreground/70">
                     {run.summaryText}
                   </span>
                 ) : null}
                 <span className="ml-auto flex shrink-0 items-center gap-1.5">
                   <CategoryBadges categories={stats.toolCategories} />
-                  <span className="inline-flex items-center gap-1 rounded-full border border-border px-2 py-px text-[10px] font-semibold uppercase text-muted-foreground">
+                  <span className="inline-flex items-center gap-1 text-xs text-muted-foreground">
                     <RunStatusIcon status={isStreaming ? "running" : "done"} aria-hidden className="size-3" />
                     {statusMeta(isStreaming ? "running" : "done").label}
                   </span>

package/src/run/run-item-primitives.tsx

@@ -0,0 +1,12 @@
+import { useLiveTime } from "../hooks/use-live-time";
+import { formatDuration } from "../utils/format";
+
+export function LiveDuration({ startTime }: { startTime: number }) {
+  const elapsed = useLiveTime(100) - startTime;
+
+  return (
+    <span className="text-xs font-mono text-muted-foreground tabular-nums">
+      {formatDuration(elapsed)}
+    </span>
+  );
+}

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

@@ -7,6 +7,22 @@ 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. */

package/src/styles/presentation.css

@@ -5,7 +5,7 @@
 .tangle-heading[data-variant="page"] { font-size: var(--font-size-3xl); }
 .tangle-heading[data-variant="section"] { font-size: var(--font-size-xl); }
 .tangle-heading[data-variant="subsection"] { font-size: var(--font-size-base); }
-.tangle-heading[data-variant="eyebrow"] { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: hsl(var(--muted-foreground)); }
+.tangle-heading[data-variant="eyebrow"] { font-size: var(--font-size-xs); line-height: 1rem; font-weight: 500; letter-spacing: 0; color: hsl(var(--muted-foreground)); }
 .tangle-page-header { min-width: 0; margin-bottom: 1.5rem; }
 .tangle-page-header-main { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem; }
 .tangle-intro .tangle-page-header-main { display: block; }

package/src/tool-previews/command-preview.tsx

@@ -139,7 +139,7 @@ function ExitBadge({
 }) {
   if (status === "running" || status === "pending") {
     return (
-      <span className="inline-flex shrink-0 items-center gap-1 text-[11px] text-muted-foreground">
+      <span className="inline-flex shrink-0 items-center gap-1 text-xs text-muted-foreground">
         <Loader2 className="h-3 w-3 animate-spin" aria-hidden="true" />
         running
       </span>
@@ -171,7 +171,7 @@ function ExitBadge({
     <span
       className={cn(
         // Every badge has a border, so mixed rows keep one height.
-        "inline-flex shrink-0 items-center rounded-full border px-1.5 py-px font-sans text-[11px] font-medium tabular-nums",
+        "inline-flex shrink-0 items-center rounded-full border px-1.5 py-px font-sans text-xs font-medium tabular-nums",
         tone === "danger" &&
           "border-transparent bg-[var(--surface-danger-bg)] text-[var(--surface-danger-text)]",
         tone === "success" &&
@@ -253,7 +253,7 @@ function OutputRegion({
           type="button"
           onClick={() => setFull(true)}
           className={cn(
-            "w-full border-t border-white/10 px-3 py-1.5 text-left font-sans text-[11px] font-medium text-muted-foreground transition-colors hover:text-foreground",
+            "w-full border-t border-white/10 px-3 py-1.5 text-left font-sans text-xs font-medium text-muted-foreground transition-colors hover:text-foreground",
             focusRing,
           )}
         >

package/src/tool-previews/diff-preview.tsx

@@ -64,7 +64,7 @@ export const DiffPreview = memo(({ part }: DiffPreviewProps) => {
       ) : null}
       {!payload.diff && payload.before ? (
         <div className="space-y-2">
-          <div className="text-xs font-semibold uppercase tracking-[0.08em] text-muted-foreground">
+          <div className="text-xs font-medium text-muted-foreground">
             Before
           </div>
           <CodeBlock code={payload.before} language="text" className="rounded-[var(--radius-md)]" />
@@ -72,7 +72,7 @@ export const DiffPreview = memo(({ part }: DiffPreviewProps) => {
       ) : null}
       {!payload.diff && payload.after ? (
         <div className="space-y-2">
-          <div className="text-xs font-semibold uppercase tracking-[0.08em] text-muted-foreground">
+          <div className="text-xs font-medium text-muted-foreground">
             After
           </div>
           <CodeBlock code={payload.after} language="text" className="rounded-[var(--radius-md)]" />

package/src/tool-previews/question-preview.tsx

@@ -83,7 +83,7 @@ export const QuestionPreview = memo(({ part }: QuestionPreviewProps) => {
           key={`${question}-${index}`}
           className="rounded-[var(--radius-md)] border border-border bg-muted px-3 py-3"
         >
-          <div className="text-xs font-semibold uppercase tracking-[0.08em] text-muted-foreground">
+          <div className="text-xs font-medium text-muted-foreground">
             Question {index + 1}
           </div>
           <div className="mt-2 text-sm leading-relaxed text-foreground">