@tangle-network/ui 11.5.0 → 11.7.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @tangle-network/ui
 
+## 11.7.0
+
+### Minor Changes
+
+- 0982a63: Quiet transcript rows: the agent transcript (`AgentTimeline`, `ChatContainer`'s `timeline` presentation) now reads as one column of prose with tool calls as quiet one-liners between the paragraphs. `RunRowShell` (and so `InlineToolItem` / `InlineThinkingItem`) rests with no card chrome — transparent border and fill, a bare 14px glyph, title and description at `text-sm` in `text-muted-foreground` that brighten on hover — and takes the bordered `--md3-surface-container` card only while open; the expand chevron replaces the glyph on hover and open, the success dot is gone (success is silence), the running spinner and live-ticking duration are gone (a running row shimmers its title through the new `TextShimmer` primitive, exported from `/primitives`), and the completed duration shows on hover only. `RunRowStatusDot` still exists and now draws only the error dot; `RunRowShellProps.startTime` is accepted and ignored (deprecated). `getToolDisplayMetadata` titles are the bare verb (`Read`, `Edit`, `Write`, `Shell`, `Search`, `Find`, `Web search`, `Fetch`, `Task`) and the path, command, pattern or query lives in `description` only, so a row no longer prints its subject twice; `targetPath` / `commandSnippet` are unchanged. `AgentTimeline` drops the connector spine, the uppercase "Tool activity" header above grouped calls (the group keeps that name as its `aria-label`), and the per-block timestamp on assistant prose; prose renders at 15px/1.5 with a muted streaming caret, and vertical rhythm now follows the pair of neighbours (`mt-4` at a user turn, `mt-1` inside tool sequences and between prose and tools). `UserMessage` loses its border and shows its timestamp beside the bubble on hover. Consumers that composed `RunRowShell` with a shimmer title of their own get the intended result now that the shell draws no spinner beside it.
+
+## 11.6.0
+
+### Minor Changes
+
+- b52965b: Load the `./editor` entry's optional peers through a dynamic `import()`.
+
+  The entry declares `@tiptap/*`, `@hocuspocus/provider` and `yjs` as optional peers, but reached them through static imports. A bundler resolves an uninstalled optional peer to a stub module that carries a default export only, so `import { EditorContent } from "@tiptap/react"` and `import { HocuspocusProvider } from "@hocuspocus/provider"` failed the build of every consumer that did not install them, with `MISSING_EXPORT`. The failure was not limited to `./editor`: `./files` reaches `DocumentEditorPane` through a lazy import, so `@tangle-network/ui/files` failed the same way.
+
+  `EditorProvider`, `TiptapEditor` and the local markdown editor are now built from namespaces that `loadCollaborationPeers`/`loadDocumentEditorPeers` resolve at first render. A consumer without the peers builds clean and sees an error that names the packages to install, and only when it renders an editor. Preview-only use of `DocumentEditorPane` needs no peer at all. The two loaders stay separate so the local markdown editor still runs on `@tiptap/react` and `@tiptap/starter-kit` alone, without yjs or Hocuspocus.
+
+  A bundler reads the literal specifier in a dynamic `import()`, so the clean build is not automatic in every bundler. Vite and Rollup leave the unresolved peer to run time on their own. esbuild does so only when the call carries a `.catch()`, which every peer import now has, and `pnpm test:package` builds the packed consumer under esbuild as well as Vite to hold that. webpack has no such rule: a webpack consumer that installs none of the peers must give `resolve.fallback` the value `false` for each one, which `packages/ui/README.md` documents.
+
+  `EditorProvider` loads `yjs` and `@hocuspocus/provider` on its own, through `loadEditorProviderPeers`. It reads no tiptap namespace, so a consumer that installs those two peers and drives its own editor from the provider's context keeps working — the same set the provider imported statically before.
+
+  Rendering an editor now goes through a `Suspense` boundary: `TiptapEditor` and the local editor show a "Loading editor…" placeholder for the first frame, and `EditorProvider` renders its children only after the peers land, because every child hook reads a context that only the loaded provider supplies.
+
 ## 11.5.0
 
 ### Minor Changes

package/README.md

@@ -26,10 +26,78 @@ export function App() {
 }
 ```
 
+## Styling
+
+This package ships no CSS. Its components are Tailwind v4 class names in source, and the build emits JavaScript only, so two pieces of consumer setup carry real weight.
+
+### Scan this package
+
+Your Tailwind or UnoCSS build has to read this package's files. Neither scans `node_modules` on its own, so a class that only this package names is never generated. Nothing fails loudly when one is missing: the element still renders, still occupies space and still takes clicks, it just looks inert. A `Switch` with no track colour in either state, a `Tabs` where the selected tab is indistinguishable from the rest, and a `Textarea` collapsed to one row all come out of this.
+
+Tailwind v4, in the stylesheet that imports `tailwindcss`. `@source` paths resolve relative to that stylesheet, so adjust the prefix to wherever yours lives:
+
+```css
+/* from src/styles/app.css, with node_modules two levels up */
+@source "../../node_modules/@tangle-network/ui/src/**/*.tsx";
+@source "../../node_modules/@tangle-network/ui/src/**/*.ts";
+```
+
+`sandbox-ui` runs exactly these two globs in `src/styles/globals.css`, alongside `@import "tailwindcss" source(none)` so the scan is the whole of what the bundle compiles from.
+
+UnoCSS, in `uno.config.ts`:
+
+```ts
+content: {
+  filesystem: ["node_modules/@tangle-network/ui/dist/**/*.js"],
+}
+```
+
+Under pnpm that plain glob can match zero files. `node_modules/@tangle-network/ui` is a symlink into `node_modules/.pnpm`, and UnoCSS's globber does not follow it, which leaves you exactly where you started with no error. Pre-expand the glob with something that does follow symlinks, resolve each hit through `realpath`, and hand UnoCSS concrete paths. `tangle-network/blueprint-agent`'s `apps/web/uno.config.ts` carries a worked version that walks the import graph of the two entries it uses rather than the whole `dist`.
+
+Two things to check after wiring this up, because the failure is silent either way. Read the generated CSS for a class this package alone names, rather than eyeballing the app. And assert the scan resolved a non-zero number of files: a scan that silently matches nothing looks identical to no scan at all.
+
+One consequence worth knowing. This is a scan, not a manifest, so a consumer emits only the classes the version it installed actually names. Upgrading this package can introduce a class your build has never generated, and it will go missing the same silent way.
+
+### Import the brand stylesheet
+
+`@tangle-network/brand` is a peer dependency. It holds the tokens every colour here resolves through, and a few real classes that some components reference by name instead of composing out of utilities. `Badge` with `dot` is the one to know about: it emits `status-dot status-dot-running` and its siblings, which are defined in `@tangle-network/brand/styles/globals.css` and nowhere else. Without that import the dots have no size and no colour.
+
+```css
+@import "@tangle-network/brand/styles";
+@import "tailwindcss";
+```
+
+See [`@tangle-network/brand`'s README](../brand/README.md) for the token-level breakdown, the finer-grained imports, and the fonts, which brand deliberately does not bundle.
+
 ## Subpaths
 
-Fourteen named exports: `primitives`, `chat`, `run`, `openui`, `files`, `editor`, `markdown`, `auth`, `hooks`, `sdk-hooks`, `stores`, `types`, `utils`, `tool-previews`.
+Sixteen named exports: `primitives`, `chat`, `run`, `openui`, `files`, `editor`, `markdown`, `auth`, `hooks`, `sdk-hooks`, `stores`, `types`, `utils`, `tool-previews`, `nav`, `redaction`.
 
 ## Optional peers
 
-`@nanostores/react`, `nanostores`, `@tanstack/react-query`, `@hocuspocus/provider`, `@tiptap/*`, `yjs` — install only the peers you actually use. The package will type-check and tree-shake without them.
+`@tiptap/core`, `@tiptap/react`, `@tiptap/starter-kit`, `@tiptap/extension-collaboration`, `@tiptap/extension-collaboration-caret`, `@hocuspocus/provider` and `yjs` back the `./editor` entry. The entry reaches every one of them through a dynamic `import()`, and gets a loud error that names the missing packages only when it renders an editor. `./editor` splits the cost three ways, so each surface costs only the peers it uses:
+
+| Surface | Peers it needs |
+| --- | --- |
+| `DocumentEditorPane` in preview mode | none |
+| `MarkdownDocumentEditor` (local) | `@tiptap/react`, `@tiptap/starter-kit` |
+| `EditorProvider` (collaboration transport) | `@hocuspocus/provider`, `yjs` |
+| `TiptapEditor` (collaborative) | all of the above, plus both collaboration extensions |
+
+`EditorProvider` builds the document and the socket from `yjs` and `@hocuspocus/provider` alone, so a consumer that drives its own editor from its context — through `useEditorConnection`, `useCollaborators` and the other `./editor` hooks — installs those two and no tiptap package.
+
+A bundler still reads the literal specifier in a dynamic `import()`, so what a consumer without the peers must do depends on the bundler:
+
+| Bundler | A consumer that installs none of the peers |
+| --- | --- |
+| Vite, Rollup | Builds. The unresolved peer becomes a chunk that throws when it loads. |
+| esbuild | Builds. Each import carries a `.catch()`, which moves the unresolved path from build time to run time. |
+| webpack | Needs configuration. Give `resolve.fallback` the value `false` for each peer you do not install, for example `resolve: { fallback: { "@tiptap/react": false } }`. |
+
+A TypeScript consumer resolves these entries through the emitted declarations, and those declarations name the optional peers in their own import statements. Keep `skipLibCheck: true` — the common default — and a consumer without the peers type-checks: its own imports resolve, and TypeScript skips the declaration files that name the packages it does not have. With `skipLibCheck: false`, TypeScript reads those files and reports `TS2307` for each absent peer; install the peers, or add a module declaration for each one you omit.
+
+`pnpm test:package` builds a packed consumer that installs none of the peers, under both Vite and esbuild, and type-checks it. `scripts/validate-dist.mjs` rejects a static import of any of them, and rejects a dynamic import that lost its `.catch()`.
+
+Because the peers now resolve at first render rather than at build time, a missing one surfaces as a thrown error while React renders. Wrap the editors in an error boundary, so the install list reaches a surface you control instead of unmounting the tree.
+
+`nanostores` and `@nanostores/react` back `./stores`, and `react-router` backs `./nav`. Those two entries create their values at module scope, so they hold a static import and a consumer that imports them must install the peer. Every other entry stays free of all of these.

package/dist/chat.d.ts

@@ -87,9 +87,11 @@ interface UserMessageProps {
     actions?: ReactNode;
 }
 /**
- * The single user message bubble — a quiet, right-aligned bordered bubble on the
- * muted surface (no loud fill, no uppercase label). Used by both the run/message
- * list (session-model `parts`) and AgentTimeline (direct `content`/`timestamp`).
+ * The single user message bubble — a quiet, right-aligned fill on the muted
+ * surface (no border, no loud fill, no uppercase label). The timestamp sits
+ * beside the bubble and appears on hover, so it costs no height. Used by both
+ * the run/message list (session-model `parts`) and AgentTimeline (direct
+ * `content`/`timestamp`).
  */
 declare const UserMessage: React.MemoExoticComponent<({ message: _message, parts, content, timestamp, actions }: UserMessageProps) => react_jsx_runtime.JSX.Element | null>;
 
@@ -126,6 +128,8 @@ interface AgentTimelineMessageItem {
     content: string;
     toolCalls?: ReactNode;
     isStreaming?: boolean;
+    /** Shown beside a user bubble on hover. Assistant prose carries no
+     *  timestamp of its own — the turn's user message dates the exchange. */
     timestamp?: Date;
     after?: ReactNode;
 }
@@ -140,6 +144,7 @@ interface AgentTimelineToolItem {
 interface AgentTimelineToolGroupItem {
     id: string;
     kind: "tool_group";
+    /** Accessible name of the group. Not drawn — the rows are the label. */
     title?: string;
     calls: ToolCallData[];
     /** Source tool parts, parallel to `calls`. */
@@ -166,6 +171,9 @@ interface AgentTimelineArtifactItem {
 interface AgentTimelineCustomItem {
     id: string;
     kind: "custom";
+    /** Laid out as a run row: it takes the same horizontal bleed as tool rows,
+     *  so a `RunRowShell`-based row (reasoning) aligns its glyph with the prose
+     *  edge. */
     content: ReactNode;
 }
 type AgentTimelineItem = AgentTimelineMessageItem | AgentTimelineToolItem | AgentTimelineToolGroupItem | AgentTimelineStatusItem | AgentTimelineArtifactItem | AgentTimelineCustomItem;
@@ -177,14 +185,16 @@ interface AgentTimelineProps {
     /** Optional actions rendered beside each tool item (e.g. "open in artifacts").
      *  Receives the source tool part carried on the item. */
     renderToolActions?: (part: ToolPart) => ReactNode;
-    /** When set, collapse the timeline to the first N spine rows behind a
-     *  "Show N more steps" toggle. Omit to always show every row. */
+    /** When set, collapse the timeline to the first N step rows (every item
+     *  except user messages) behind a "Show N more steps" toggle. Omit to always
+     *  show every row. */
     collapseAfter?: number;
 }
 /**
- * AgentTimeline — unified mixed-content timeline for agent-backed sandbox
- * sessions. Renders messages, tool steps, status cards, and artifact handoffs in
- * a single execution narrative.
+ * AgentTimeline — unified mixed-content transcript for agent-backed sandbox
+ * sessions. Renders messages, tool rows, status cards, and artifact handoffs
+ * as one plain column: prose at the reading size, tool calls as quiet
+ * one-liners between the paragraphs, no connector chrome.
  */
 declare function AgentTimeline({ items, isThinking, emptyState, className, renderToolActions, collapseAfter, }: AgentTimelineProps): react_jsx_runtime.JSX.Element | null;
 

package/dist/chat.js

@@ -5,12 +5,13 @@ import {
   MessageList,
   ThinkingIndicator,
   UserMessage
-} from "./chunk-RKC3GXHE.js";
-import "./chunk-AZWDI2JG.js";
-import "./chunk-R5GVQDL3.js";
-import "./chunk-J2G7KCYH.js";
-import "./chunk-ULDNFLIM.js";
+} from "./chunk-VDCZHOOO.js";
+import "./chunk-UYTRNR7Z.js";
+import "./chunk-CVX53NCC.js";
+import "./chunk-XT4JMYVB.js";
+import "./chunk-EIUE5GV2.js";
 import "./chunk-AAUNOHVL.js";
+import "./chunk-L57WRIND.js";
 import "./chunk-3M7BPSSW.js";
 import "./chunk-GYPQXTJU.js";
 import "./chunk-MKTSMWVD.js";

package/dist/{chunk-XROQW5J7.js → chunk-4ENFLPWQ.js}

@@ -11,7 +11,7 @@ import {
 } from "./chunk-OEX7NZE3.js";
 import {
   parseToolEvent
-} from "./chunk-XPYPZMYT.js";
+} from "./chunk-6RIX7M27.js";
 
 // src/hooks/use-dropdown-menu.ts
 import { useEffect, useRef, useState } from "react";

package/dist/{chunk-XPYPZMYT.js → chunk-6RIX7M27.js}

@@ -1,7 +1,7 @@
 import {
   ToolCallGroup,
   ToolCallStep
-} from "./chunk-J2G7KCYH.js";
+} from "./chunk-XT4JMYVB.js";
 import {
   Markdown
 } from "./chunk-P5F43A65.js";

package/dist/{chunk-R5GVQDL3.js → chunk-CVX53NCC.js}

@@ -2,11 +2,14 @@ import {
   ExpandableContent,
   InlineToolItem,
   RunRowShell
-} from "./chunk-J2G7KCYH.js";
+} from "./chunk-XT4JMYVB.js";
 import {
   formatDuration,
   truncateText
-} from "./chunk-ULDNFLIM.js";
+} from "./chunk-EIUE5GV2.js";
+import {
+  TextShimmer
+} from "./chunk-L57WRIND.js";
 import {
   OpenUIArtifactRenderer
 } from "./chunk-3M7BPSSW.js";
@@ -54,10 +57,9 @@ var InlineThinkingItem = memo(
       RunRowShell,
       {
         icon: /* @__PURE__ */ jsx(Brain, { className: "h-3.5 w-3.5" }),
-        title: isActive ? "Thinking\u2026" : "Reasoning",
+        title: isActive ? /* @__PURE__ */ jsx(TextShimmer, { children: "Thinking\u2026" }) : "Reasoning",
         description: preview,
         status: isActive ? "running" : "idle",
-        startTime,
         durationMs,
         open,
         onOpenChange: setOpen,
@@ -107,7 +109,7 @@ function SpineRow({
         "span",
         {
           className: cn(
-            "relative mt-1.5 h-[var(--timeline-dot-size,0.5rem)] w-[var(--timeline-dot-size,0.5rem)] rounded-full ring-4 ring-[var(--bg-root)]",
+            "relative mt-2.5 h-[var(--timeline-dot-size,0.5rem)] w-[var(--timeline-dot-size,0.5rem)] rounded-full ring-4 ring-[var(--bg-root)]",
             accentClassName
           )
         }

package/dist/{chunk-ULDNFLIM.js → chunk-EIUE5GV2.js}

@@ -18,10 +18,6 @@ function extractCommand(input) {
 function extractFilePath(input) {
   return extractString(input, "file_path") ?? extractString(input, "path") ?? extractString(input, "filePath") ?? extractString(input, "file");
 }
-function cleanPath(path) {
-  const parts = path.split("/");
-  return parts.length > 3 ? ".../" + parts.slice(-2).join("/") : path;
-}
 var TOOL_CATEGORY_ICONS = {
   command: "terminal",
   write: "file-plus",
@@ -87,7 +83,7 @@ function getToolDisplayMetadata(part) {
     case "command":
     case "execute":
       return {
-        title: "Run command",
+        title: "Shell",
         description: command ? truncateCommand(command) : void 0,
         displayVariant: "command",
         commandSnippet: command
@@ -96,7 +92,7 @@ function getToolDisplayMetadata(part) {
     case "write_file":
     case "create_file":
       return {
-        title: filePath ? `Write ${cleanPath(filePath)}` : "Write file",
+        title: "Write",
         description: filePath,
         displayVariant: "write-file",
         targetPath: filePath
@@ -104,7 +100,7 @@ function getToolDisplayMetadata(part) {
     case "edit":
     case "patch":
       return {
-        title: filePath ? `Edit ${cleanPath(filePath)}` : "Edit file",
+        title: "Edit",
         description: filePath,
         hasDiffOutput: true,
         diffFilePath: filePath,
@@ -115,7 +111,7 @@ function getToolDisplayMetadata(part) {
     case "read_file":
     case "cat":
       return {
-        title: filePath ? `Read ${cleanPath(filePath)}` : "Read file",
+        title: "Read",
         description: filePath,
         displayVariant: "read-file",
         targetPath: filePath
@@ -125,7 +121,7 @@ function getToolDisplayMetadata(part) {
     case "rg": {
       const pattern = extractString(input, "pattern");
       return {
-        title: pattern ? `Search: ${pattern}` : "Search",
+        title: "Search",
         description: pattern,
         displayVariant: "grep"
       };
@@ -135,7 +131,7 @@ function getToolDisplayMetadata(part) {
     case "ls": {
       const pattern = extractString(input, "pattern");
       return {
-        title: pattern ? `Find: ${pattern}` : "Find files",
+        title: "Find",
         description: pattern,
         displayVariant: "glob"
       };
@@ -145,8 +141,8 @@ function getToolDisplayMetadata(part) {
     case "fetch": {
       const query = extractString(input, "query") ?? extractString(input, "url");
       return {
-        title: query ? `Web: ${truncateCommand(query)}` : "Web search",
-        description: query,
+        title: name === "web_search" ? "Web search" : "Fetch",
+        description: query ? truncateCommand(query) : void 0,
         displayVariant: "web-search"
       };
     }
@@ -155,8 +151,8 @@ function getToolDisplayMetadata(part) {
     case "spawn": {
       const desc = extractString(input, "description") ?? extractString(input, "prompt");
       return {
-        title: desc ? `Task: ${truncateCommand(desc)}` : "Agent task",
-        description: desc
+        title: "Task",
+        description: desc ? truncateCommand(desc) : void 0
       };
     }
     default:

package/dist/chunk-L57WRIND.js

@@ -0,0 +1,59 @@
+import {
+  cn
+} from "./chunk-RQHJBTEU.js";
+
+// src/primitives/text-shimmer.tsx
+import { useEffect, useLayoutEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+var CLASS_NAME = "tangle-text-shimmer";
+var STYLE_ID = "tangle-text-shimmer-styles";
+var SHIMMER_CSS = `
+@keyframes ${CLASS_NAME} {
+  from { -webkit-mask-position: 150% center; mask-position: 150% center; }
+  to { -webkit-mask-position: -50% center; mask-position: -50% center; }
+}
+.${CLASS_NAME} {
+  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0.72) 0%, #000 45%, rgba(0,0,0,0.72) 60%);
+  mask-image: linear-gradient(90deg, rgba(0,0,0,0.72) 0%, #000 45%, rgba(0,0,0,0.72) 60%);
+  -webkit-mask-size: 250% 100%;
+  mask-size: 250% 100%;
+  animation: ${CLASS_NAME} 1.4s linear infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+  .${CLASS_NAME} {
+    animation: none;
+    -webkit-mask-image: none;
+    mask-image: none;
+    text-decoration: underline dotted currentColor;
+    text-underline-offset: 3px;
+  }
+}
+`;
+function ensureShimmerStyles() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(STYLE_ID)) return;
+  const style = document.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = SHIMMER_CSS;
+  document.head.appendChild(style);
+}
+var useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+function TextShimmer({
+  children,
+  className,
+  durationMs = 1400
+}) {
+  useIsomorphicLayoutEffect(ensureShimmerStyles, []);
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(CLASS_NAME, "text-foreground", className),
+      style: { animationDuration: `${durationMs}ms` },
+      children
+    }
+  );
+}
+
+export {
+  TextShimmer
+};

package/dist/chunk-LFVF2HFB.js

@@ -0,0 +1,19 @@
+import {
+  formatDuration
+} from "./chunk-EIUE5GV2.js";
+
+// src/run/run-item-primitives.tsx
+import { useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+function LiveDuration({ startTime }) {
+  const [elapsed, setElapsed] = useState(Date.now() - startTime);
+  useEffect(() => {
+    const id = setInterval(() => setElapsed(Date.now() - startTime), 100);
+    return () => clearInterval(id);
+  }, [startTime]);
+  return /* @__PURE__ */ jsx("span", { className: "text-xs font-mono text-neutral-400 dark:text-neutral-500 tabular-nums", children: formatDuration(elapsed) });
+}
+
+export {
+  LiveDuration
+};

package/dist/{chunk-7O22XQ4D.js → chunk-PLWRAS5Z.js}

@@ -560,7 +560,7 @@ import { lazy, Suspense } from "react";
 import { Download as Download2, X as X3 } from "lucide-react";
 import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var LazyDocumentEditorPane = lazy(async () => {
-  const module = await import("./document-editor-pane-MX3FIZSE.js");
+  const module = await import("./document-editor-pane-A3JURPW5.js");
   return { default: module.DocumentEditorPane };
 });
 function FileArtifactPane({