@tangle-network/ui 11.3.0 → 11.5.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @tangle-network/ui
 
+## 11.5.0
+
+### Minor Changes
+
+- 8dbe359: Export `RunRowShell` (+ `RunRowStatusDot`, `RunRowStatus`) from the `/run` entry. The shell is the shared run-row grammar beneath `InlineToolItem`/`InlineThinkingItem`; consumers whose row carries behaviors the fixed items don't model (a treated title, a streaming plain-text body) can now compose the grammar directly instead of re-forking it.
+
+## 11.4.0
+
+### Minor Changes
+
+- ef1be75: Publish the redaction renderer on its own `./redaction` subpath.
+
+  `RedactedDocument` is the client half of agent-app's reversible redaction: agent-app builds a document of masked spans and reveals one at a time through `revealSpan`, where authorization and the audit record happen, and this component renders that document and calls back for a reveal. It reached the package only through the root entry, and no consumer imports the bare package — every app takes ui through a subpath — so the component was unreachable in practice.
+
+  The module gains a header stating what it pairs with, including why its segment type omits the `cipher` that agent-app's carries: the ciphertext stays on the server, so the type a browser holds cannot name it.
+
+- b7c12be: `RunRowShell`'s `title` prop widens from `string` to `ReactNode` — purely additive (strings render unchanged). Lets a row carry a treated title (e.g. an active-state shimmer sweep) so consumers composing the canonical run-row grammar don't have to re-fork the shell for it.
+
 ## 11.3.0
 
 ### Minor Changes

package/dist/chat.js

@@ -5,10 +5,10 @@ import {
   MessageList,
   ThinkingIndicator,
   UserMessage
-} from "./chunk-IH2VRPGZ.js";
+} from "./chunk-RKC3GXHE.js";
 import "./chunk-AZWDI2JG.js";
-import "./chunk-SRAKCVPO.js";
-import "./chunk-4ORVXSMU.js";
+import "./chunk-R5GVQDL3.js";
+import "./chunk-J2G7KCYH.js";
 import "./chunk-ULDNFLIM.js";
 import "./chunk-AAUNOHVL.js";
 import "./chunk-3M7BPSSW.js";

package/dist/chunk-HGML45QH.js

@@ -0,0 +1,104 @@
+import {
+  cn
+} from "./chunk-RQHJBTEU.js";
+
+// src/redaction/redacted-document.tsx
+import { useCallback, useState } from "react";
+import { Eye, EyeOff, Loader2, ShieldAlert } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var defaultLabel = (kind) => kind.replace(/[-_]/g, " ").toUpperCase();
+function RedactedChip({
+  kind,
+  label,
+  onReveal
+}) {
+  const [state, setState] = useState({ status: "masked" });
+  const reveal = useCallback(async () => {
+    setState({ status: "loading" });
+    try {
+      const r = await onReveal();
+      setState(
+        r.ok && r.value !== void 0 ? { status: "revealed", value: r.value } : { status: "denied", reason: r.reason }
+      );
+    } catch {
+      setState({ status: "denied", reason: "error" });
+    }
+  }, [onReveal]);
+  if (state.status === "revealed") {
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setState({ status: "masked" }),
+        title: "Revealed \u2014 click to hide",
+        "aria-label": `${label}: revealed, click to hide`,
+        className: cn(
+          "inline-flex items-center gap-1 rounded-[var(--radius-sm)] px-1 font-medium",
+          "bg-[color-mix(in_oklch,var(--color-warning,orange)_18%,transparent)] text-foreground ring-1 ring-warning/40"
+        ),
+        children: [
+          state.value,
+          /* @__PURE__ */ jsx(EyeOff, { className: "size-3 opacity-60" })
+        ]
+      }
+    );
+  }
+  if (state.status === "denied") {
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        title: `Restricted${state.reason ? ` (${state.reason})` : ""}`,
+        "aria-label": `${label}: restricted`,
+        className: "inline-flex items-center gap-1 rounded-[var(--radius-sm)] bg-muted px-1 text-muted-foreground",
+        children: [
+          /* @__PURE__ */ jsx(ShieldAlert, { className: "size-3" }),
+          " ",
+          label
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      disabled: state.status === "loading",
+      onClick: reveal,
+      title: `${label} \u2014 click to reveal`,
+      "aria-label": `${label} redacted, click to reveal`,
+      className: cn(
+        "inline-flex items-center gap-1 rounded-[var(--radius-sm)] px-1 font-medium tracking-wide",
+        "bg-muted text-muted-foreground hover:bg-muted/80 hover:text-foreground transition-colors",
+        "cursor-pointer select-none"
+      ),
+      children: [
+        state.status === "loading" ? /* @__PURE__ */ jsx(Loader2, { className: "size-3 animate-spin" }) : /* @__PURE__ */ jsx(Eye, { className: "size-3 opacity-60" }),
+        /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "\u2588\u2588\u2588" }),
+        " ",
+        label
+      ]
+    }
+  );
+}
+function RedactedDocument({
+  document,
+  onReveal,
+  labelForKind = defaultLabel,
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn("whitespace-pre-wrap break-words leading-relaxed", className), children: document.segments.map(
+    (seg, i) => seg.type === "text" ? /* @__PURE__ */ jsx("span", { children: seg.text }, i) : /* @__PURE__ */ jsx(
+      RedactedChip,
+      {
+        kind: seg.kind,
+        label: labelForKind(seg.kind),
+        onReveal: () => onReveal(seg.id)
+      },
+      seg.id
+    )
+  ) });
+}
+
+export {
+  RedactedDocument
+};

package/dist/{chunk-4ORVXSMU.js → chunk-J2G7KCYH.js}

@@ -216,20 +216,6 @@ function LiveDuration({ startTime }) {
   return /* @__PURE__ */ jsx3("span", { className: "text-xs font-mono text-neutral-400 dark:text-neutral-500 tabular-nums", children: formatDuration(elapsed) });
 }
 
-// src/run/inline-tool-item.tsx
-import { memo as memo2 } from "react";
-import {
-  Terminal,
-  FileEdit,
-  FileSearch,
-  Search,
-  PencilLine,
-  Bot,
-  Globe,
-  ClipboardList,
-  Settings
-} from "lucide-react";
-
 // src/run/run-row-shell.tsx
 import { useState as useState3 } from "react";
 import * as Collapsible from "@radix-ui/react-collapsible";
@@ -347,6 +333,18 @@ function RunRowShell({
 }
 
 // src/run/inline-tool-item.tsx
+import { memo as memo2 } from "react";
+import {
+  Terminal,
+  FileEdit,
+  FileSearch,
+  Search,
+  PencilLine,
+  Bot,
+  Globe,
+  ClipboardList,
+  Settings
+} from "lucide-react";
 import { jsx as jsx5 } from "react/jsx-runtime";
 var TOOL_CATEGORY_ICON_MAP = {
   command: Terminal,
@@ -500,6 +498,7 @@ export {
   ExpandableContent,
   ExpandedToolDetail,
   LiveDuration,
+  RunRowStatusDot,
   RunRowShell,
   InlineToolItem,
   ToolCallStep,

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

@@ -2,7 +2,7 @@ import {
   ExpandableContent,
   InlineToolItem,
   RunRowShell
-} from "./chunk-4ORVXSMU.js";
+} from "./chunk-J2G7KCYH.js";
 import {
   formatDuration,
   truncateText

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

@@ -6,11 +6,11 @@ import {
 import {
   InlineThinkingItem,
   RunGroup
-} from "./chunk-SRAKCVPO.js";
+} from "./chunk-R5GVQDL3.js";
 import {
   ToolCallGroup,
   ToolCallStep
-} from "./chunk-4ORVXSMU.js";
+} from "./chunk-J2G7KCYH.js";
 import {
   getToolDisplayMetadata
 } from "./chunk-ULDNFLIM.js";

package/dist/{chunk-J3YZIQNI.js → chunk-XPYPZMYT.js}

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

package/dist/{chunk-HW4ROISY.js → chunk-XROQW5J7.js}

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

package/dist/hooks.js

@@ -11,15 +11,15 @@ import {
   useSSEStream,
   useSdkSession,
   useToolCallStream
-} from "./chunk-HW4ROISY.js";
+} from "./chunk-XROQW5J7.js";
 import "./chunk-OEX7NZE3.js";
 import {
   useAutoScroll,
   useRunCollapseState,
   useRunGroups
 } from "./chunk-AZWDI2JG.js";
-import "./chunk-J3YZIQNI.js";
-import "./chunk-4ORVXSMU.js";
+import "./chunk-XPYPZMYT.js";
+import "./chunk-J2G7KCYH.js";
 import "./chunk-ULDNFLIM.js";
 import "./chunk-AAUNOHVL.js";
 import "./chunk-ZRVH3WCA.js";

package/dist/index.d.ts

@@ -3,7 +3,7 @@ export { Avatar, AvatarFallback, AvatarImage, Badge, BadgeProps, Card, CardConte
 export { Logo, LogoProps, TangleKnot } from '@tangle-network/brand';
 export { A as ArtifactPane, a as ArtifactPaneProps } from './artifact-pane-DpuWcAiF.js';
 export { AgentTimeline, AgentTimelineArtifactItem, AgentTimelineCustomItem, AgentTimelineItem, AgentTimelineMessageItem, AgentTimelineProps, AgentTimelineStatusItem, AgentTimelineTone, AgentTimelineToolGroupItem, AgentTimelineToolItem, ChatContainer, ChatContainerProps, ChatMessage, ChatMessageProps, MessageList, MessageListProps, MessageRole, ThinkingIndicator, ThinkingIndicatorProps, UserMessage, UserMessageProps } from './chat.js';
-export { ExpandedToolDetail, ExpandedToolDetailProps, InlineThinkingItem, InlineThinkingItemProps, InlineToolItem, InlineToolItemProps, LiveDuration, RunGroup, RunGroupProps } from './run.js';
+export { ExpandedToolDetail, ExpandedToolDetailProps, InlineThinkingItem, InlineThinkingItemProps, InlineToolItem, InlineToolItemProps, LiveDuration, RunGroup, RunGroupProps, RunRowShell, RunRowShellProps, RunRowStatus, RunRowStatusDot } from './run.js';
 export { F as FeedSegment, T as ToolCallData, a as ToolCallFeed, b as ToolCallFeedProps, c as ToolCallStatus, d as ToolCallType, p as parseToolEvent } from './tool-call-feed-D9iofJgW.js';
 export { OpenUIAction, OpenUIActionsNode, OpenUIArtifactRenderer, OpenUIArtifactRendererProps, OpenUIBadgeNode, OpenUICardNode, OpenUICodeNode, OpenUIComponentNode, OpenUIGridNode, OpenUIHeadingNode, OpenUIKeyValueNode, OpenUIMarkdownNode, OpenUIPrimitive, OpenUISeparatorNode, OpenUIStackNode, OpenUIStatNode, OpenUITableNode, OpenUITextNode } from './openui.js';
 export { FileArtifactPane, FileArtifactPaneProps, FileFormat, FileNode, FilePreview, FilePreviewProps, FileTabData, FileTabs, FileTabsProps, FileTree, FileTreeProps, FileTreeVisibilityOptions, RichFileTree, RichFileTreeGitEntry, RichFileTreeGitStatus, RichFileTreeProps, RichFileTreeThemeVars, detectFileFormat, fileExtension, filterFileTree, getCodeLanguage, getFormatLabel, getSyntaxLanguage } from './files.js';
@@ -21,8 +21,9 @@ export { F as FinalTextPart, G as GroupedMessage, M as MessageRun, a as MessageU
 export { C as CustomToolRenderer, D as DisplayVariant, T as ToolDisplayMetadata } from './tool-display-z4JcDmMQ.js';
 export { TOOL_CATEGORY_ICONS, cn, copyText, formatBytes, formatDuration, formatUptime, getToolCategory, getToolDisplayMetadata, getToolErrorText, timeAgo, truncateText } from './utils.js';
 export { CommandPreview, CommandPreviewProps, DiffPreview, DiffPreviewProps, GlobResultsPreview, GlobResultsPreviewProps, GrepResultsPreview, GrepResultsPreviewProps, QuestionPreview, QuestionPreviewProps, WebSearchPreview, WebSearchPreviewProps, WriteFilePreview, WriteFilePreviewProps } from './tool-previews.js';
-import { ReactNode } from 'react';
+export { RedactedDocSegment, RedactedDocument, RedactedDocumentData, RedactedDocumentProps, RevealResult } from './redaction.js';
 import 'class-variance-authority/types';
+import 'react';
 import 'react/jsx-runtime';
 import '@radix-ui/react-dialog';
 import 'class-variance-authority';
@@ -39,44 +40,3 @@ import '@hocuspocus/provider';
 import 'yjs';
 import 'nanostores';
 import 'clsx';
-
-/**
- * Viewer for a server-produced redacted document. Renders text inline and each
- * redacted span as a masked chip; clicking a chip asks the server to reveal that
- * one span. The original plaintext is NEVER in the document the client holds —
- * the chip carries only an id + kind; `onReveal` round-trips to the server, where
- * `@tangle-network/agent-app/redact`'s `revealSpan` runs the authorization check
- * and writes the audit trail. So authz + audit are server-truth; this is display.
- *
- * Structural types (no `@tangle-network/agent-app` dependency) — the viewer needs
- * only `{ id, kind }` per span; the cipher stays server-side.
- */
-type RedactedDocSegment = {
-    type: "text";
-    text: string;
-} | {
-    type: "redacted";
-    id: string;
-    kind: string;
-};
-interface RedactedDocumentData {
-    segments: RedactedDocSegment[];
-}
-interface RevealResult {
-    ok: boolean;
-    value?: string;
-    /** e.g. `forbidden` | `not_found` when `ok` is false. */
-    reason?: string;
-}
-interface RedactedDocumentProps {
-    document: RedactedDocumentData;
-    /** Reveal one span by id. Wire to a server route that calls agent-app's
-     *  `revealSpan` (authz + audit happen there). Resolves with the original. */
-    onReveal: (spanId: string) => Promise<RevealResult>;
-    /** Display label for a redaction kind (default: the kind, upper-cased). */
-    labelForKind?: (kind: string) => string;
-    className?: string;
-}
-declare function RedactedDocument({ document, onReveal, labelForKind, className, }: RedactedDocumentProps): ReactNode;
-
-export { type RedactedDocSegment, RedactedDocument, type RedactedDocumentData, type RedactedDocumentProps, type RevealResult };

package/dist/index.js

@@ -1,3 +1,6 @@
+import {
+  RedactedDocument
+} from "./chunk-HGML45QH.js";
 import {
   AuthHeader,
   GitHubLoginButton,
@@ -17,7 +20,7 @@ import {
   useSSEStream,
   useSdkSession,
   useToolCallStream
-} from "./chunk-HW4ROISY.js";
+} from "./chunk-XROQW5J7.js";
 import {
   addMessage,
   addParts,
@@ -143,26 +146,28 @@ import {
   MessageList,
   ThinkingIndicator,
   UserMessage
-} from "./chunk-IH2VRPGZ.js";
+} from "./chunk-RKC3GXHE.js";
 import {
   useAutoScroll,
   useRunCollapseState,
   useRunGroups
 } from "./chunk-AZWDI2JG.js";
-import "./chunk-47XH56SV.js";
+import "./chunk-LQS34IGP.js";
 import {
   ToolCallFeed,
   parseToolEvent
-} from "./chunk-J3YZIQNI.js";
+} from "./chunk-XPYPZMYT.js";
 import {
   InlineThinkingItem,
   RunGroup
-} from "./chunk-SRAKCVPO.js";
+} from "./chunk-R5GVQDL3.js";
 import {
   ExpandedToolDetail,
   InlineToolItem,
-  LiveDuration
-} from "./chunk-4ORVXSMU.js";
+  LiveDuration,
+  RunRowShell,
+  RunRowStatusDot
+} from "./chunk-J2G7KCYH.js";
 import {
   TOOL_CATEGORY_ICONS,
   formatBytes,
@@ -244,103 +249,6 @@ import {
 import {
   cn
 } from "./chunk-RQHJBTEU.js";
-
-// src/redaction/redacted-document.tsx
-import { useCallback, useState } from "react";
-import { Eye, EyeOff, Loader2, ShieldAlert } from "lucide-react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var defaultLabel = (kind) => kind.replace(/[-_]/g, " ").toUpperCase();
-function RedactedChip({
-  kind,
-  label,
-  onReveal
-}) {
-  const [state, setState] = useState({ status: "masked" });
-  const reveal = useCallback(async () => {
-    setState({ status: "loading" });
-    try {
-      const r = await onReveal();
-      setState(
-        r.ok && r.value !== void 0 ? { status: "revealed", value: r.value } : { status: "denied", reason: r.reason }
-      );
-    } catch {
-      setState({ status: "denied", reason: "error" });
-    }
-  }, [onReveal]);
-  if (state.status === "revealed") {
-    return /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: () => setState({ status: "masked" }),
-        title: "Revealed \u2014 click to hide",
-        "aria-label": `${label}: revealed, click to hide`,
-        className: cn(
-          "inline-flex items-center gap-1 rounded-[var(--radius-sm)] px-1 font-medium",
-          "bg-[color-mix(in_oklch,var(--color-warning,orange)_18%,transparent)] text-foreground ring-1 ring-warning/40"
-        ),
-        children: [
-          state.value,
-          /* @__PURE__ */ jsx(EyeOff, { className: "size-3 opacity-60" })
-        ]
-      }
-    );
-  }
-  if (state.status === "denied") {
-    return /* @__PURE__ */ jsxs(
-      "span",
-      {
-        title: `Restricted${state.reason ? ` (${state.reason})` : ""}`,
-        "aria-label": `${label}: restricted`,
-        className: "inline-flex items-center gap-1 rounded-[var(--radius-sm)] bg-muted px-1 text-muted-foreground",
-        children: [
-          /* @__PURE__ */ jsx(ShieldAlert, { className: "size-3" }),
-          " ",
-          label
-        ]
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      type: "button",
-      disabled: state.status === "loading",
-      onClick: reveal,
-      title: `${label} \u2014 click to reveal`,
-      "aria-label": `${label} redacted, click to reveal`,
-      className: cn(
-        "inline-flex items-center gap-1 rounded-[var(--radius-sm)] px-1 font-medium tracking-wide",
-        "bg-muted text-muted-foreground hover:bg-muted/80 hover:text-foreground transition-colors",
-        "cursor-pointer select-none"
-      ),
-      children: [
-        state.status === "loading" ? /* @__PURE__ */ jsx(Loader2, { className: "size-3 animate-spin" }) : /* @__PURE__ */ jsx(Eye, { className: "size-3 opacity-60" }),
-        /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "\u2588\u2588\u2588" }),
-        " ",
-        label
-      ]
-    }
-  );
-}
-function RedactedDocument({
-  document,
-  onReveal,
-  labelForKind = defaultLabel,
-  className
-}) {
-  return /* @__PURE__ */ jsx("div", { className: cn("whitespace-pre-wrap break-words leading-relaxed", className), children: document.segments.map(
-    (seg, i) => seg.type === "text" ? /* @__PURE__ */ jsx("span", { children: seg.text }, i) : /* @__PURE__ */ jsx(
-      RedactedChip,
-      {
-        kind: seg.kind,
-        label: labelForKind(seg.kind),
-        onReveal: () => onReveal(seg.id)
-      },
-      seg.id
-    )
-  ) });
-}
 export {
   AgentTimeline,
   ArtifactPane,
@@ -418,6 +326,8 @@ export {
   RedactedDocument,
   RichFileTree,
   RunGroup,
+  RunRowShell,
+  RunRowStatusDot,
   SegmentedControl,
   Select,
   SelectContent,

package/dist/redaction.d.ts

@@ -0,0 +1,42 @@
+import { ReactNode } from 'react';
+
+/**
+ * Viewer for a server-produced redacted document. Renders text inline and each
+ * redacted span as a masked chip; clicking a chip asks the server to reveal that
+ * one span. The original plaintext is NEVER in the document the client holds —
+ * the chip carries only an id + kind; `onReveal` round-trips to the server, where
+ * `@tangle-network/agent-app/redact`'s `revealSpan` runs the authorization check
+ * and writes the audit trail. So authz + audit are server-truth; this is display.
+ *
+ * Structural types (no `@tangle-network/agent-app` dependency) — the viewer needs
+ * only `{ id, kind }` per span; the cipher stays server-side.
+ */
+type RedactedDocSegment = {
+    type: "text";
+    text: string;
+} | {
+    type: "redacted";
+    id: string;
+    kind: string;
+};
+interface RedactedDocumentData {
+    segments: RedactedDocSegment[];
+}
+interface RevealResult {
+    ok: boolean;
+    value?: string;
+    /** e.g. `forbidden` | `not_found` when `ok` is false. */
+    reason?: string;
+}
+interface RedactedDocumentProps {
+    document: RedactedDocumentData;
+    /** Reveal one span by id. Wire to a server route that calls agent-app's
+     *  `revealSpan` (authz + audit happen there). Resolves with the original. */
+    onReveal: (spanId: string) => Promise<RevealResult>;
+    /** Display label for a redaction kind (default: the kind, upper-cased). */
+    labelForKind?: (kind: string) => string;
+    className?: string;
+}
+declare function RedactedDocument({ document, onReveal, labelForKind, className, }: RedactedDocumentProps): ReactNode;
+
+export { type RedactedDocSegment, RedactedDocument, type RedactedDocumentData, type RedactedDocumentProps, type RevealResult };

package/dist/redaction.js

@@ -0,0 +1,7 @@
+import {
+  RedactedDocument
+} from "./chunk-HGML45QH.js";
+import "./chunk-RQHJBTEU.js";
+export {
+  RedactedDocument
+};

package/dist/run.d.ts

@@ -28,6 +28,53 @@ interface RunGroupProps {
  */
 declare const RunGroup: React.MemoExoticComponent<({ run, partMap, collapsed, onToggle, branding, renderToolDetail, headerActions, renderToolActions, }: RunGroupProps) => react_jsx_runtime.JSX.Element | null>;
 
+type RunRowStatus = "running" | "success" | "error" | "idle";
+/**
+ * Trailing status indicator shared by every run row: a spinner while running,
+ * a green/red dot on terminal states, nothing when idle. Status is shown here
+ * — it never replaces the row's semantic lead icon.
+ */
+declare function RunRowStatusDot({ status }: {
+    status: RunRowStatus;
+}): react_jsx_runtime.JSX.Element | null;
+interface RunRowShellProps {
+    /** Semantic lead glyph — always visible; never replaced by status. */
+    icon: ReactNode;
+    /** Row title. A string in the common case; a node when the title carries its
+     *  own treatment (e.g. an active-state shimmer sweep) — it renders inline in
+     *  the shell's title slot either way. */
+    title: ReactNode;
+    /** Secondary inline text (tool path/command, or a reasoning preview). */
+    description?: string;
+    /** Render the description in mono (tools) vs prose (reasoning). */
+    descriptionMono?: boolean;
+    status?: RunRowStatus;
+    /** Live-ticks a duration while running. */
+    startTime?: number;
+    /** Static duration shown once the row is no longer running. */
+    durationMs?: number;
+    /** Radius shaping when rows are stacked into a group. */
+    groupPosition?: "single" | "first" | "middle" | "last";
+    /** Message shown below the header while collapsed (tool errors). */
+    collapsedError?: string;
+    actions?: ReactNode;
+    /** Controlled open state. Omit for internal (uncontrolled) state. */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    defaultOpen?: boolean;
+    className?: string;
+    contentClassName?: string;
+    /** Expanded body. When absent the row is not expandable. */
+    children?: ReactNode;
+}
+/**
+ * Shared shell for the agent activity rows (reasoning + tool). Owns the
+ * bordered container, the lead icon badge, title/description, the trailing
+ * meta cluster (duration + status + chevron) and the collapsible body, so
+ * both row kinds read as one family instead of two bespoke layouts.
+ */
+declare function RunRowShell({ icon, title, description, descriptionMono, status, startTime, durationMs, groupPosition, collapsedError, actions, open: openProp, onOpenChange, defaultOpen, className, contentClassName, children, }: RunRowShellProps): react_jsx_runtime.JSX.Element;
+
 interface InlineToolItemProps {
     part: ToolPart;
     renderToolDetail?: CustomToolRenderer;
@@ -71,4 +118,4 @@ declare function LiveDuration({ startTime }: {
     startTime: number;
 }): react_jsx_runtime.JSX.Element;
 
-export { ExpandedToolDetail, type ExpandedToolDetailProps, InlineThinkingItem, type InlineThinkingItemProps, InlineToolItem, type InlineToolItemProps, LiveDuration, RunGroup, type RunGroupProps };
+export { ExpandedToolDetail, type ExpandedToolDetailProps, InlineThinkingItem, type InlineThinkingItemProps, InlineToolItem, type InlineToolItemProps, LiveDuration, RunGroup, type RunGroupProps, RunRowShell, type RunRowShellProps, type RunRowStatus, RunRowStatusDot };

package/dist/run.js

@@ -1,17 +1,19 @@
-import "./chunk-47XH56SV.js";
+import "./chunk-LQS34IGP.js";
 import {
   ToolCallFeed,
   parseToolEvent
-} from "./chunk-J3YZIQNI.js";
+} from "./chunk-XPYPZMYT.js";
 import {
   InlineThinkingItem,
   RunGroup
-} from "./chunk-SRAKCVPO.js";
+} from "./chunk-R5GVQDL3.js";
 import {
   ExpandedToolDetail,
   InlineToolItem,
-  LiveDuration
-} from "./chunk-4ORVXSMU.js";
+  LiveDuration,
+  RunRowShell,
+  RunRowStatusDot
+} from "./chunk-J2G7KCYH.js";
 import "./chunk-ULDNFLIM.js";
 import "./chunk-AAUNOHVL.js";
 import "./chunk-3M7BPSSW.js";
@@ -27,6 +29,8 @@ export {
   InlineToolItem,
   LiveDuration,
   RunGroup,
+  RunRowShell,
+  RunRowStatusDot,
   ToolCallFeed,
   parseToolEvent
 };

package/dist/sdk-hooks.js

@@ -5,15 +5,15 @@ import {
   useSSEStream,
   useSdkSession,
   useToolCallStream
-} from "./chunk-HW4ROISY.js";
+} from "./chunk-XROQW5J7.js";
 import "./chunk-OEX7NZE3.js";
 import {
   useAutoScroll,
   useRunCollapseState,
   useRunGroups
 } from "./chunk-AZWDI2JG.js";
-import "./chunk-J3YZIQNI.js";
-import "./chunk-4ORVXSMU.js";
+import "./chunk-XPYPZMYT.js";
+import "./chunk-J2G7KCYH.js";
 import "./chunk-ULDNFLIM.js";
 import "./chunk-AAUNOHVL.js";
 import "./chunk-ZRVH3WCA.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.3.0",
+  "version": "11.5.0",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",
@@ -101,6 +101,11 @@
       "types": "./dist/nav.d.ts",
       "import": "./dist/nav.js",
       "default": "./dist/nav.js"
+    },
+    "./redaction": {
+      "types": "./dist/redaction.d.ts",
+      "import": "./dist/redaction.js",
+      "default": "./dist/redaction.js"
     }
   },
   "dependencies": {
@@ -141,7 +146,7 @@
     "react-dom": "^18 || ^19",
     "react-router": "^7 || ^8",
     "yjs": "^13.6.0",
-    "@tangle-network/brand": "^1.4.0"
+    "@tangle-network/brand": "^1.5.0"
   },
   "peerDependenciesMeta": {
     "@nanostores/react": {

package/src/redaction/index.ts

@@ -1,3 +1,15 @@
+/**
+ * The client half of agent-app's reversible redaction.
+ *
+ * `agent-app/redact` builds a document of masked spans with each original kept
+ * encrypted, and reveals one span at a time through `revealSpan`, where the
+ * authorization and the audit record happen. This module renders that document
+ * and calls back for a reveal.
+ *
+ * The two segment types are deliberately not identical: agent-app's carries the
+ * `cipher` for a masked span, and this one does not. The ciphertext stays on the
+ * server, so the type a browser holds cannot name it.
+ */
 export {
   RedactedDocument,
   type RedactedDocumentProps,

package/src/run/index.ts

@@ -1,4 +1,10 @@
 export { RunGroup, type RunGroupProps } from "./run-group";
+export {
+  RunRowShell,
+  RunRowStatusDot,
+  type RunRowShellProps,
+  type RunRowStatus,
+} from "./run-row-shell";
 export { InlineToolItem, type InlineToolItemProps } from "./inline-tool-item";
 export {
   InlineThinkingItem,

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

@@ -32,7 +32,10 @@ export function RunRowStatusDot({ status }: { status: RunRowStatus }) {
 export interface RunRowShellProps {
   /** Semantic lead glyph — always visible; never replaced by status. */
   icon: ReactNode;
-  title: string;
+  /** Row title. A string in the common case; a node when the title carries its
+   *  own treatment (e.g. an active-state shimmer sweep) — it renders inline in
+   *  the shell's title slot either way. */
+  title: ReactNode;
   /** Secondary inline text (tool path/command, or a reasoning preview). */
   description?: string;
   /** Render the description in mono (tools) vs prose (reasoning). */