@tangle-network/ui 11.2.2 → 11.2.4

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @tangle-network/ui
 
+## 11.2.4
+
+### Patch Changes
+
+- 2088fb9: Retune the token spine to a neutral-grey surface ladder with indigo as trim rather than as field, in both themes. Surfaces separate by their own fill so a card, a nested panel and an overlay each read as a distinct plane, and the canvas sits off pure black so long reading sessions land away from the glare end of the range.
+
+  Faint text in `Input`, `Textarea`, `StatCard` and `TerminalLine` now takes a dedicated `--text-dim` token instead of a faded stronger one. A translucent foreground renders as its colour composited over the plane behind it, so those hints, subtitles and timestamps measured differently on a card than on the canvas and fell under the 4.5:1 floor on both.
+
+  **Worth a look after upgrading:** in dark mode `--sidebar-background` is now one step BELOW the canvas rather than above it, so the nav reads as chrome the content sits in front of instead of as another raised card. Apps that composited their own surfaces on top of the sidebar assuming it was the lighter plane should give that area a visual pass. Light mode is unchanged — the sidebar is still paper on a grey canvas.
+
+## 11.2.3
+
+### Patch Changes
+
+- 7eeed23: Show the animated thinking row immediately after a user submits a message, before the first assistant event arrives.
+
 ## 11.2.2
 
 ### Patch Changes

package/dist/chat.js

@@ -5,7 +5,7 @@ import {
   MessageList,
   ThinkingIndicator,
   UserMessage
-} from "./chunk-OTZWQJ5W.js";
+} from "./chunk-IH2VRPGZ.js";
 import "./chunk-AZWDI2JG.js";
 import "./chunk-SRAKCVPO.js";
 import "./chunk-4ORVXSMU.js";

package/dist/{chunk-XZFJAF6G.js → chunk-HSMVDKL3.js}

@@ -163,7 +163,7 @@ var Input = React2.forwardRef(
       ),
       input,
       error && /* @__PURE__ */ jsx2("p", { className: "text-[var(--surface-danger-text)] text-sm font-medium", children: error }),
-      hint && !error && /* @__PURE__ */ jsx2("p", { className: "text-muted-foreground/70 text-sm", children: hint })
+      hint && !error && /* @__PURE__ */ jsx2("p", { className: "text-[var(--text-dim)] text-sm", children: hint })
     ] });
   }
 );
@@ -203,7 +203,7 @@ var Textarea = React2.forwardRef(
       ),
       textarea,
       error && /* @__PURE__ */ jsx2("p", { className: "text-[var(--surface-danger-text)] text-sm", children: error }),
-      hint && !error && /* @__PURE__ */ jsx2("p", { className: "text-muted-foreground/70 text-sm", children: hint })
+      hint && !error && /* @__PURE__ */ jsx2("p", { className: "text-[var(--text-dim)] text-sm", children: hint })
     ] });
   }
 );
@@ -755,7 +755,7 @@ var StatCard = React10.forwardRef(
           /* @__PURE__ */ jsxs9("div", { className: "space-y-1", children: [
             /* @__PURE__ */ jsx11("p", { className: "text-muted-foreground text-sm", children: title }),
             /* @__PURE__ */ jsx11("p", { className: "font-bold text-3xl tracking-tight", children: value }),
-            subtitle && /* @__PURE__ */ jsx11("p", { className: "text-muted-foreground opacity-70 text-xs", children: subtitle }),
+            subtitle && /* @__PURE__ */ jsx11("p", { className: "text-[var(--text-dim)] text-xs", children: subtitle }),
             trend && trendStatus && /* @__PURE__ */ jsxs9(
               "div",
               {
@@ -872,7 +872,7 @@ var TerminalLine = React11.forwardRef(
         children: [
           (type === "input" || type === "command") && /* @__PURE__ */ jsx12("span", { className: "shrink-0 select-none text-[var(--surface-success-text)]", children: prompt }),
           type === "thinking" && /* @__PURE__ */ jsx12("span", { className: "shrink-0 select-none", children: "..." }),
-          timestamp && /* @__PURE__ */ jsxs10("span", { className: "shrink-0 select-none text-muted-foreground opacity-50", children: [
+          timestamp && /* @__PURE__ */ jsxs10("span", { className: "shrink-0 select-none text-[var(--text-dim)]", children: [
             "[",
             timestamp,
             "]"

package/dist/{chunk-OTZWQJ5W.js → chunk-IH2VRPGZ.js}

@@ -121,17 +121,25 @@ function ThinkingIndicator({ className }) {
     const interval = window.setInterval(() => setElapsed((current) => current + 1), 1e3);
     return () => window.clearInterval(interval);
   }, []);
-  return /* @__PURE__ */ jsxs2("div", { className: cn("flex items-center gap-2 px-3 py-1.5", className), children: [
-    /* @__PURE__ */ jsxs2("div", { className: "flex gap-[3px]", children: [
-      /* @__PURE__ */ jsx3("span", { className: "h-[var(--indicator-dot-size)] w-[var(--indicator-dot-size)] animate-bounce rounded-full bg-[var(--brand-glow)]", style: { animationDelay: "0ms" } }),
-      /* @__PURE__ */ jsx3("span", { className: "h-[var(--indicator-dot-size)] w-[var(--indicator-dot-size)] animate-bounce rounded-full bg-[var(--brand-glow)]", style: { animationDelay: "150ms" } }),
-      /* @__PURE__ */ jsx3("span", { className: "h-[var(--indicator-dot-size)] w-[var(--indicator-dot-size)] animate-bounce rounded-full bg-[var(--brand-glow)]", style: { animationDelay: "300ms" } })
-    ] }),
-    elapsed > 3 && /* @__PURE__ */ jsxs2("span", { className: "text-[var(--font-size-xs)] tabular-nums text-muted-foreground", children: [
-      elapsed,
-      "s"
-    ] })
-  ] });
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      role: "status",
+      "aria-label": "Agent is thinking",
+      className: cn("flex items-center gap-2 px-3 py-1.5", className),
+      children: [
+        /* @__PURE__ */ jsxs2("div", { className: "flex gap-[3px]", children: [
+          /* @__PURE__ */ jsx3("span", { className: "h-[var(--indicator-dot-size)] w-[var(--indicator-dot-size)] animate-bounce rounded-full bg-[var(--brand-glow)]", style: { animationDelay: "0ms" } }),
+          /* @__PURE__ */ jsx3("span", { className: "h-[var(--indicator-dot-size)] w-[var(--indicator-dot-size)] animate-bounce rounded-full bg-[var(--brand-glow)]", style: { animationDelay: "150ms" } }),
+          /* @__PURE__ */ jsx3("span", { className: "h-[var(--indicator-dot-size)] w-[var(--indicator-dot-size)] animate-bounce rounded-full bg-[var(--brand-glow)]", style: { animationDelay: "300ms" } })
+        ] }),
+        elapsed > 3 && /* @__PURE__ */ jsxs2("span", { className: "text-[var(--font-size-xs)] tabular-nums text-muted-foreground", children: [
+          elapsed,
+          "s"
+        ] })
+      ]
+    }
+  );
 }
 
 // src/chat/agent-timeline.tsx
@@ -439,7 +447,15 @@ function mapToolPartToTimelineType(part) {
 }
 function buildTimelineItems(messages, partMap, isStreaming, onOpenUIAction, enableOpenUI = true) {
   const items = [];
-  const lastAssistantMessage = [...messages].reverse().find((message) => message.role === "assistant");
+  let latestUserIndex = -1;
+  for (let index = messages.length - 1; index >= 0; index -= 1) {
+    if (messages[index].role === "user") {
+      latestUserIndex = index;
+      break;
+    }
+  }
+  const responseMessages = latestUserIndex >= 0 ? messages.slice(latestUserIndex + 1) : messages;
+  const lastAssistantMessage = [...responseMessages].reverse().find((message) => message.role === "assistant");
   const toToolCall = (part) => {
     const meta = getToolDisplayMetadata(part);
     const start = part.state.time?.start;
@@ -566,9 +582,9 @@ function buildTimelineItems(messages, partMap, isStreaming, onOpenUIAction, enab
     });
     flushToolBuffer(parts.length);
   }
-  const showThinking = isStreaming && lastAssistantMessage != null && !items.some(
+  const showThinking = isStreaming && latestUserIndex >= 0 && (lastAssistantMessage == null || !items.some(
     (item) => item.kind === "message" && item.role === "assistant" && item.id.startsWith(lastAssistantMessage.id)
-  );
+  ));
   return { items, showThinking };
 }
 var ChatContainer = memo3(

package/dist/index.js

@@ -109,7 +109,7 @@ import {
   UploadProgress,
   useTheme,
   useToast
-} from "./chunk-XZFJAF6G.js";
+} from "./chunk-HSMVDKL3.js";
 import {
   Avatar,
   AvatarFallback,
@@ -137,7 +137,7 @@ import {
   MessageList,
   ThinkingIndicator,
   UserMessage
-} from "./chunk-OTZWQJ5W.js";
+} from "./chunk-IH2VRPGZ.js";
 import {
   useAutoScroll,
   useRunCollapseState,

package/dist/primitives.js

@@ -44,7 +44,7 @@ import {
   UploadProgress,
   useTheme,
   useToast
-} from "./chunk-XZFJAF6G.js";
+} from "./chunk-HSMVDKL3.js";
 import {
   Avatar,
   AvatarFallback,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.2.2",
+  "version": "11.2.4",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",
@@ -141,7 +141,7 @@
     "react-dom": "^18 || ^19",
     "react-router": "^7 || ^8",
     "yjs": "^13.6.0",
-    "@tangle-network/brand": "^1.1.0"
+    "@tangle-network/brand": "^1.3.0"
   },
   "peerDependenciesMeta": {
     "@nanostores/react": {

package/src/chat/chat-container.test.tsx

@@ -27,6 +27,68 @@ const editPart: ToolPart = {
 const partMap: Record<string, SessionPart[]> = { m1: [editPart] }
 
 describe("ChatContainer timeline tool rendering", () => {
+  it("shows thinking as soon as a submitted user message is streaming", () => {
+    render(
+      <ChatContainer
+        messages={[{ id: "user-1", role: "user" }]}
+        partMap={{
+          "user-1": [{ type: "text", text: "hello" }],
+        }}
+        isStreaming
+        presentation="timeline"
+      />,
+    )
+
+    expect(
+      screen.getByRole("status", { name: "Agent is thinking" }),
+    ).toBeInTheDocument()
+  })
+
+  it("does not let an earlier assistant reply hide the next turn's thinking state", () => {
+    render(
+      <ChatContainer
+        messages={[
+          { id: "user-1", role: "user" },
+          { id: "assistant-1", role: "assistant" },
+          { id: "user-2", role: "user" },
+        ]}
+        partMap={{
+          "user-1": [{ type: "text", text: "first" }],
+          "assistant-1": [{ type: "text", text: "done" }],
+          "user-2": [{ type: "text", text: "second" }],
+        }}
+        isStreaming
+        presentation="timeline"
+      />,
+    )
+
+    expect(
+      screen.getByRole("status", { name: "Agent is thinking" }),
+    ).toBeInTheDocument()
+  })
+
+  it("replaces the generic thinking row when the current reply has text", () => {
+    render(
+      <ChatContainer
+        messages={[
+          { id: "user-1", role: "user" },
+          { id: "assistant-1", role: "assistant" },
+        ]}
+        partMap={{
+          "user-1": [{ type: "text", text: "hello" }],
+          "assistant-1": [{ type: "text", text: "working on it" }],
+        }}
+        isStreaming
+        presentation="timeline"
+      />,
+    )
+
+    expect(
+      screen.queryByRole("status", { name: "Agent is thinking" }),
+    ).not.toBeInTheDocument()
+    expect(screen.getByText("working on it")).toBeInTheDocument()
+  })
+
   it("shows a clean tool detail (the file path), not the raw input JSON", () => {
     render(
       <ChatContainer

package/src/chat/chat-container.tsx

@@ -179,7 +179,18 @@ function buildTimelineItems(
   enableOpenUI = true,
 ): { items: AgentTimelineItem[]; showThinking: boolean } {
   const items: AgentTimelineItem[] = [];
-  const lastAssistantMessage = [...messages].reverse().find((message) => message.role === "assistant");
+  let latestUserIndex = -1;
+  for (let index = messages.length - 1; index >= 0; index -= 1) {
+    if (messages[index].role === "user") {
+      latestUserIndex = index;
+      break;
+    }
+  }
+  const responseMessages =
+    latestUserIndex >= 0 ? messages.slice(latestUserIndex + 1) : messages;
+  const lastAssistantMessage = [...responseMessages]
+    .reverse()
+    .find((message) => message.role === "assistant");
   const toToolCall = (part: ToolPart) => {
     const meta = getToolDisplayMetadata(part as ToolPart);
     const start = part.state.time?.start;
@@ -346,13 +357,14 @@ function buildTimelineItems(
 
   const showThinking =
     isStreaming &&
-    lastAssistantMessage != null &&
-    !items.some(
-      (item) =>
-        item.kind === "message" &&
-        item.role === "assistant" &&
-        item.id.startsWith(lastAssistantMessage.id),
-    );
+    latestUserIndex >= 0 &&
+    (lastAssistantMessage == null ||
+      !items.some(
+        (item) =>
+          item.kind === "message" &&
+          item.role === "assistant" &&
+          item.id.startsWith(lastAssistantMessage.id),
+      ));
 
   return { items, showThinking };
 }

package/src/chat/thinking-indicator.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react'
+import { ChatContainer } from './chat-container'
 import { ThinkingIndicator } from './thinking-indicator'
 
 const meta: Meta<typeof ThinkingIndicator> = {
@@ -42,6 +43,25 @@ export const InContext: Story = {
   ),
 }
 
+/**
+ * The production handoff state: the user's message is already visible while
+ * the first assistant event has not arrived yet.
+ */
+export const PendingChatResponse: Story = {
+  render: () => (
+    <div className="h-80 rounded-xl border border-border bg-[var(--bg-root)]">
+      <ChatContainer
+        messages={[{ id: 'user-1', role: 'user' }]}
+        partMap={{
+          'user-1': [{ type: 'text', text: 'Hello — can you inspect this sandbox?' }],
+        }}
+        isStreaming
+        presentation="timeline"
+      />
+    </div>
+  ),
+}
+
 /**
  * Multiple indicators to show staggered animation timing.
  */

package/src/chat/thinking-indicator.tsx

@@ -14,7 +14,11 @@ export function ThinkingIndicator({ className }: ThinkingIndicatorProps) {
   }, []);
 
   return (
-    <div className={cn("flex items-center gap-2 px-3 py-1.5", className)}>
+    <div
+      role="status"
+      aria-label="Agent is thinking"
+      className={cn("flex items-center gap-2 px-3 py-1.5", className)}
+    >
       <div className="flex gap-[3px]">
         <span className="h-[var(--indicator-dot-size)] w-[var(--indicator-dot-size)] animate-bounce rounded-full bg-[var(--brand-glow)]" style={{ animationDelay: "0ms" }} />
         <span className="h-[var(--indicator-dot-size)] w-[var(--indicator-dot-size)] animate-bounce rounded-full bg-[var(--brand-glow)]" style={{ animationDelay: "150ms" }} />

package/src/primitives/faint-text.test.tsx

@@ -0,0 +1,127 @@
+import { render, screen } from "@testing-library/react"
+import { describe, expect, it } from "vitest"
+import { Input, Textarea } from "./input"
+import { StatCard } from "./stat-card"
+import { TerminalLine } from "./terminal-display"
+
+/**
+ * The quietest line in each primitive — a field hint, a stat subtitle, a log
+ * timestamp — must take its colour from a TOKEN, never from a faded stronger
+ * one.
+ *
+ * A translucent foreground does not render the colour it names: it renders that
+ * colour composited over whatever plane is behind it. So `text-muted-foreground/70`
+ * measures one ratio on a card and a different one on the canvas, and the same
+ * markup is legible in one place and not in another. That is how these three
+ * landed at 3.65:1, 2.91:1 and 3.4:1 while looking, in the source, like they had
+ * been styled deliberately.
+ *
+ * These assert the RULE rather than the current class string — the point is that
+ * faint text carries no alpha, not that it carries one specific token today.
+ */
+
+/**
+ * A class with its variant chain removed: `dark:hover:text-white/50` → `text-white/50`.
+ *
+ * Split on the colons that separate variants, which are the ones at bracket
+ * depth zero — an arbitrary value carries its own (`text-[color:var(--x)]`,
+ * `supports-[display:grid]:`) and splitting on those would mangle the utility.
+ */
+function bareUtility(cls: string): string {
+  let depth = 0
+  let start = 0
+  for (let i = 0; i < cls.length; i++) {
+    const c = cls[i]
+    if (c === "[") depth++
+    else if (c === "]") depth--
+    else if (c === ":" && depth === 0) start = i + 1
+  }
+  return cls.slice(start)
+}
+
+/** Colour utilities, where a trailing `/NN` is an alpha modifier rather than a fraction. */
+const COLOUR = "text|bg|border|ring|outline|decoration|placeholder|caret|accent|fill|stroke|divide|from|via|to|shadow"
+/** `text-white/70`, `bg-card/60`, `text-[var(--x)]/40`. */
+const ALPHA_MODIFIER = new RegExp(`^(?:${COLOUR})-.+/\\d{1,3}$`)
+/** `opacity-50` — the same fade by another route. */
+const OPACITY_UTILITY = /^opacity-\d{1,3}$/
+
+function expectSolidColour(el: HTMLElement | null, what: string) {
+  expect(el, `${what} should render`).not.toBeNull()
+  // Per class, not across the whole string: a variant prefix has no whitespace
+  // in it, so a single regex over the joined list never sees where one class
+  // ends — and `dark:text-white/50` slips past a pattern anchored on spaces.
+  const faded = (el?.className ?? "")
+    .split(/\s+/)
+    .filter(Boolean)
+    .filter((cls) => {
+      const bare = bareUtility(cls)
+      return ALPHA_MODIFIER.test(bare) || OPACITY_UTILITY.test(bare)
+    })
+  expect(faded, `${what} must take a token, not a faded colour`).toEqual([])
+}
+
+describe("the fade detector itself", () => {
+  // The guard below is only worth as much as this table. An earlier version
+  // anchored on whitespace and so never saw a variant prefix — `dark:text-white/50`
+  // read as clean, which is the exact mistake the guard exists to catch.
+  const FADED = [
+    "text-muted-foreground/70",
+    "text-[var(--text-dim)]/70",
+    "dark:text-white/50",
+    "hover:text-muted-foreground/70",
+    "group-hover:text-foreground/40",
+    "md:bg-card/60",
+    "supports-[display:grid]:text-white/50",
+    "opacity-50",
+    "hover:opacity-50",
+  ]
+  const SOLID = [
+    "text-[var(--text-dim)]",
+    "text-sm",
+    "text-muted-foreground",
+    "dark:text-white",
+    // A slash that is a FRACTION, not an alpha modifier — must not trip the guard.
+    "w-1/2",
+    "basis-1/3",
+    // A colon inside an arbitrary value, which must survive variant-stripping.
+    "text-[color:var(--text-dim)]",
+  ]
+  const isFaded = (cls: string) =>
+    ALPHA_MODIFIER.test(bareUtility(cls)) || OPACITY_UTILITY.test(bareUtility(cls))
+
+  for (const cls of FADED) {
+    it(`catches ${cls}`, () => expect(isFaded(cls)).toBe(true))
+  }
+  for (const cls of SOLID) {
+    it(`allows ${cls}`, () => expect(isFaded(cls)).toBe(false))
+  }
+})
+
+describe("faint text is a token, not a faded one", () => {
+  it("Input renders its hint at full strength", () => {
+    render(<Input label="Name" hint="Shown on your public profile" />)
+    expectSolidColour(
+      screen.getByText("Shown on your public profile"),
+      "the Input hint",
+    )
+  })
+
+  it("Textarea renders its hint at full strength", () => {
+    render(<Textarea label="Bio" hint="Markdown is supported" />)
+    expectSolidColour(
+      screen.getByText("Markdown is supported"),
+      "the Textarea hint",
+    )
+  })
+
+  it("StatCard renders its subtitle at full strength", () => {
+    render(<StatCard title="Sandboxes" value={12} subtitle="up from 9" />)
+    expectSolidColour(screen.getByText("up from 9"), "the StatCard subtitle")
+  })
+
+  it("TerminalLine renders its timestamp at full strength", () => {
+    render(<TerminalLine timestamp="12:04:11">compiling</TerminalLine>)
+    expectSolidColour(screen.getByText("[12:04:11]"), "the TerminalLine timestamp")
+  })
+})

package/src/primitives/input.tsx

@@ -65,7 +65,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
         {input}
         {error && <p className="text-[var(--surface-danger-text)] text-sm font-medium">{error}</p>}
         {hint && !error && (
-          <p className="text-muted-foreground/70 text-sm">{hint}</p>
+          <p className="text-[var(--text-dim)] text-sm">{hint}</p>
         )}
       </div>
     );
@@ -125,7 +125,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
         {textarea}
         {error && <p className="text-[var(--surface-danger-text)] text-sm">{error}</p>}
         {hint && !error && (
-          <p className="text-muted-foreground/70 text-sm">{hint}</p>
+          <p className="text-[var(--text-dim)] text-sm">{hint}</p>
         )}
       </div>
     );

package/src/primitives/stat-card.tsx

@@ -58,8 +58,12 @@ const StatCard = React.forwardRef<HTMLDivElement, StatCardProps>(
           <div className="space-y-1">
             <p className="text-muted-foreground text-sm">{title}</p>
             <p className="font-bold text-3xl 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
+                different contrast ratio — on a card than on the canvas. */}
             {subtitle && (
-              <p className="text-muted-foreground opacity-70 text-xs">{subtitle}</p>
+              <p className="text-[var(--text-dim)] text-xs">{subtitle}</p>
             )}
             {trend && trendStatus && (
               <div

package/src/primitives/terminal-display.tsx

@@ -113,7 +113,7 @@ const TerminalLine = React.forwardRef<HTMLDivElement, TerminalLineProps>(
           <span className="shrink-0 select-none">...</span>
         )}
         {timestamp && (
-          <span className="shrink-0 select-none text-muted-foreground opacity-50">
+          <span className="shrink-0 select-none text-[var(--text-dim)]">
             [{timestamp}]
           </span>
         )}

package/src/stories/theme-showcase.stories.tsx

@@ -11,6 +11,7 @@ type Story = StoryObj;
 
 const THEMES: { name: string; theme?: string }[] = [
   { name: "Tangle (neutral)", theme: undefined }, // default :root dark
+  { name: "Tangle · dark", theme: "tangle-dark" }, // the same spine, named
   { name: "Tangle · light", theme: "tangle-light" },
   { name: "Aubergine (bazaar)", theme: "aubergine" },
   { name: "Aubergine · light", theme: "aubergine-light" },