@tangle-network/ui 11.3.0 → 11.4.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @tangle-network/ui
 
+## 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/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/index.d.ts

@@ -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,
@@ -244,103 +247,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,

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.3.0",
+  "version": "11.4.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/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). */