@tangle-network/ui 1.0.1 → 3.0.0

package/CHANGELOG.md

@@ -1,5 +1,53 @@
 # @tangle-network/ui
 
+## 3.0.0
+
+### Patch Changes
+
+- Updated dependencies [8152d92]
+  - @tangle-network/brand@0.4.0
+
+## 2.1.0
+
+### Minor Changes
+
+- 12f5565: Add `<RedactedDocument>` viewer (`@tangle-network/ui/redaction`): renders a server-produced redacted document with masked, click-to-reveal spans. The client holds only `{ id, kind }` per span; revealing one round-trips through an `onReveal` callback so authorization and the audit trail stay server-side (pairs with `@tangle-network/agent-app/redact`'s `buildRedactedDocument` / `revealSpan`).
+
+## 2.0.0
+
+### Major Changes
+
+- 4d7cc77: Drop `editor` re-exports from `@tangle-network/ui` root barrel. The `@tangle-network/ui/editor` subpath is unchanged.
+
+  **Rationale:** the editor surface drags `@tiptap/*`, `yjs`, and `@hocuspocus/provider` type chains into the package root's `.d.ts`. These are specialized collaboration tooling, not generic UI primitives — they should not appear in a consumer's default import.
+
+  **Migration:**
+
+  ```ts
+  // before
+  import {
+    TiptapEditor,
+    EditorToolbar,
+    DocumentEditorPane,
+  } from "@tangle-network/ui";
+
+  // after
+  import {
+    TiptapEditor,
+    EditorToolbar,
+    DocumentEditorPane,
+  } from "@tangle-network/ui/editor";
+  ```
+
+  `sed` recipe:
+
+  ```bash
+  grep -rl '"@tangle-network/ui"' src/ \
+    | xargs sed -i '' -E '/Tiptap|Editor|Collaborat|useYjs|useAwareness|DocumentEditor|ConnectionState/s|"@tangle-network/ui"|"@tangle-network/ui/editor"|g'
+  ```
+
+  **Known residual:** `dist/index.d.ts` still emits type-only side-effect imports for `@hocuspocus/provider` and `yjs`. These come from `FileArtifactPaneEditorOptions` in `files/file-artifact-pane.tsx`, which types its optional collaboration config against `DocumentEditorMode`/`DocumentEditorBackend`/`DocumentEditorPaneCollaborationConfig` from `editor/`. The actual editor symbols (`TiptapEditor`, `EditorProvider`, etc.) and `@tiptap/*` types are no longer at the root. A follow-up PR can either extract the editor option types out of `editor/` or drop `./files` from the root barrel; both exceed this PR's scope.
+
 ## 1.0.1
 
 ### Patch Changes

package/dist/editor.js

@@ -1,4 +1,3 @@
-import "./chunk-Q7EIIWTC.js";
 import {
   CollaboratorsList,
   DocumentEditorPane,

package/dist/index.d.ts

@@ -7,12 +7,10 @@ export { ExpandedToolDetail, ExpandedToolDetailProps, InlineThinkingItem, Inline
 export { F as FeedSegment, T as ToolCallData, a as ToolCallFeed, b as ToolCallFeedProps, c as ToolCallGroup, d as ToolCallGroupProps, e as ToolCallStatus, f as ToolCallStep, g as ToolCallStepProps, h as ToolCallType, p as parseToolEvent } from './tool-call-feed-Bs3MyQMT.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, FileNode, FilePreview, FilePreviewProps, FileTabData, FileTabs, FileTabsProps, FileTree, FileTreeProps, FileTreeVisibilityOptions, RichFileTree, RichFileTreeGitEntry, RichFileTreeGitStatus, RichFileTreeProps, RichFileTreeThemeVars, filterFileTree } from './files.js';
-export { C as Collaborator, a as ConnectionState, D as DocumentEditorBackend, b as DocumentEditorMode, c as DocumentEditorPane, d as DocumentEditorPaneCollaborationConfig, e as DocumentEditorPaneProps, E as EditorContextValue, f as EditorProvider, g as EditorProviderProps, h as EditorTokenRefreshResult, i as EditorUser, u as useEditorContext } from './document-editor-pane-DyDEX_Zm.js';
-export { CollaboratorsList, EditorToolbar, TiptapEditor, TiptapEditorProps, useAwareness, useCollaboratorPresence, useCollaborators, useDocumentChanges, useEditorConnection, useYjsState } from './editor.js';
 export { Markdown, MarkdownProps } from './markdown.js';
 export { C as CodeBlock, a as CodeBlockProps, b as CopyButton } from './code-block-DjXf8eOG.js';
 export { AuthHeader, AuthHeaderProps, GitHubLoginButton, GitHubLoginButtonProps, LoginLayout, LoginLayoutProps, SessionUser, UserMenu, UserMenuProps } from './auth.js';
-export { AgentStreamEvent, AppendUserMessageOptions, ApplySdkEventOptions, AutomationStreamEvent, BeginAssistantMessageOptions, BotStreamEvent, CompleteAssistantMessageOptions, RealtimeSessionOptions, RealtimeSessionRegistry, RealtimeSessionRegistryProps, RealtimeSessionState, RealtimeSessionTarget, SSEEvent, SdkSessionAttachment, SdkSessionEvent, SdkSessionSeed, TaskStreamEvent, TerminalStreamEvent, UseRunGroupsOptions, UseSSEStreamOptions, UseSSEStreamResult, UseSdkSessionOptions, UseSdkSessionReturn, UseToolCallStreamReturn, useAutoScroll, useDropdownMenu, useRealtimeSession, useRunCollapseState, useRunGroups, useSSEStream, useSdkSession, useToolCallStream } from './sdk-hooks.js';
+export { AgentStreamEvent, AppendUserMessageOptions, ApplySdkEventOptions, AutomationStreamEvent, BeginAssistantMessageOptions, BotStreamEvent, CompleteAssistantMessageOptions, ConnectionState, RealtimeSessionOptions, RealtimeSessionRegistry, RealtimeSessionRegistryProps, RealtimeSessionState, RealtimeSessionTarget, SSEEvent, SdkSessionAttachment, SdkSessionEvent, SdkSessionSeed, TaskStreamEvent, TerminalStreamEvent, UseRunGroupsOptions, UseSSEStreamOptions, UseSSEStreamResult, UseSdkSessionOptions, UseSdkSessionReturn, UseToolCallStreamReturn, useAutoScroll, useDropdownMenu, useRealtimeSession, useRunCollapseState, useRunGroups, useSSEStream, useSdkSession, useToolCallStream } from './sdk-hooks.js';
 export { AuthUser, UseAuthOptions, UseAuthResult, createAuthFetcher, useApiKey, useAuth, useLiveTime } from './hooks.js';
 export { A as ActiveProjectActivity, a as ActiveSessionActivityOptions, b as ActiveSessionConnectionOptions, c as ActiveSessionConnectionState, d as ActiveSessionReconnectState, e as ActiveSessionRecord, f as ActiveSessionStatus, g as ActiveSessionTransportMode, h as ActiveSessionsState, R as RegisterActiveSessionOptions, S as SessionProjectKey, i as activeSessionsAtom, j as bumpActiveSessionActivity, k as getActiveSession, l as getAllActiveSessions, m as getAllProjectActivity, n as getSessionsByActivity, o as getSessionsForNavbar, p as getSessionsForProject, q as getTotalRunningSessionCount, r as hasBackgroundRunningSessions, s as registerActiveSession, t as resetActiveSessions, u as setActiveSessionAttention, v as setActiveSessionConnection, w as setActiveSessionError, x as setActiveSessionRunning, y as setForegroundActiveSession, z as unregisterActiveSession, B as updateActiveSessionMeta, C as useActiveSession, D as useActiveSessions, E as useActiveSessionsState, F as useHasBackgroundRunningSessions, G as useNavbarSessions, H as useProjectActivity, I as useProjectSessions, J as useSessionsByActivity, K as useTotalRunningSessions } from './active-sessions-store-CeOmXgv5.js';
 export { addMessage, addParts, clearChat, isStreamingAtom, messagesAtom, partMapAtom, updatePart } from './stores.js';
@@ -23,8 +21,8 @@ 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';
 import 'class-variance-authority/types';
-import 'react';
 import 'react/jsx-runtime';
 import '@radix-ui/react-dialog';
 import 'class-variance-authority';
@@ -36,8 +34,49 @@ import '@radix-ui/react-progress';
 import '@radix-ui/react-switch';
 import '@radix-ui/react-label';
 import '@pierre/trees';
+import './document-editor-pane-DyDEX_Zm.js';
 import '@hocuspocus/provider';
 import 'yjs';
-import '@tiptap/react';
 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

@@ -216,21 +216,6 @@ import {
   RichFileTree,
   filterFileTree
 } from "./chunk-HJKCSXCH.js";
-import "./chunk-Q7EIIWTC.js";
-import {
-  CollaboratorsList,
-  DocumentEditorPane,
-  EditorProvider,
-  EditorToolbar,
-  TiptapEditor,
-  useAwareness,
-  useCollaboratorPresence,
-  useCollaborators,
-  useDocumentChanges,
-  useEditorConnection,
-  useEditorContext,
-  useYjsState
-} from "./chunk-EEE55AVS.js";
 import {
   Tabs,
   TabsContent,
@@ -251,6 +236,103 @@ 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,
@@ -270,7 +352,6 @@ export {
   ChatInput,
   ChatMessage,
   CodeBlock,
-  CollaboratorsList,
   CommandPreview,
   CopyButton,
   Dialog,
@@ -284,7 +365,6 @@ export {
   DialogTitle,
   DialogTrigger,
   DiffPreview,
-  DocumentEditorPane,
   DropZone,
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -301,8 +381,6 @@ export {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
-  EditorProvider,
-  EditorToolbar,
   EmptyState,
   ExpandedToolDetail,
   FileArtifactPane,
@@ -326,6 +404,7 @@ export {
   Progress,
   QuestionPreview,
   RealtimeSessionRegistry,
+  RedactedDocument,
   RichFileTree,
   RunGroup,
   SegmentedControl,
@@ -366,7 +445,6 @@ export {
   Textarea,
   ThemeToggle,
   ThinkingIndicator,
-  TiptapEditor,
   ToastContainer,
   ToastProvider,
   ToolCallFeed,
@@ -424,13 +502,7 @@ export {
   useApiKey,
   useAuth,
   useAutoScroll,
-  useAwareness,
-  useCollaboratorPresence,
-  useCollaborators,
-  useDocumentChanges,
   useDropdownMenu,
-  useEditorConnection,
-  useEditorContext,
   useHasBackgroundRunningSessions,
   useLiveTime,
   useNavbarSessions,
@@ -445,6 +517,5 @@ export {
   useTheme,
   useToast,
   useToolCallStream,
-  useTotalRunningSessions,
-  useYjsState
+  useTotalRunningSessions
 };

package/dist/nav.d.ts

@@ -0,0 +1,25 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { LinkProps, NavLinkProps } from 'react-router';
+export { LinkProps, NavLinkProps } from 'react-router';
+
+/**
+ * Navigation primitives that make agent-app products feel snappy by default.
+ *
+ * The dominant source of the "1–2s when I click through pages" latency in the
+ * fleet is NOT slow queries (route loaders' D1 indexes already cover their
+ * filters) — it is that every click is a COLD loader round-trip the user waits
+ * on, because bare `<Link>`s do no prefetching. React Router can fire the
+ * target route's loader on hover/focus (`prefetch="intent"`), overlapping the
+ * round-trip with the user's mouse travel so the transition feels instant.
+ *
+ * These wrappers default `prefetch="intent"` so a product gets that behaviour
+ * by importing the shared `<Link>` instead of remembering the flag on every
+ * nav element. The default is overridable — a caller that passes `prefetch`
+ * wins (the spread is applied after the default).
+ */
+/** `react-router` `<Link>` with `prefetch="intent"` on by default. */
+declare function Link({ prefetch, ...props }: LinkProps): react_jsx_runtime.JSX.Element;
+/** `react-router` `<NavLink>` with `prefetch="intent"` on by default. */
+declare function NavLink({ prefetch, ...props }: NavLinkProps): react_jsx_runtime.JSX.Element;
+
+export { Link, NavLink };

package/dist/nav.js

@@ -0,0 +1,16 @@
+// src/nav/index.tsx
+import {
+  Link as RRLink,
+  NavLink as RRNavLink
+} from "react-router";
+import { jsx } from "react/jsx-runtime";
+function Link({ prefetch = "intent", ...props }) {
+  return /* @__PURE__ */ jsx(RRLink, { prefetch, ...props });
+}
+function NavLink({ prefetch = "intent", ...props }) {
+  return /* @__PURE__ */ jsx(RRNavLink, { prefetch, ...props });
+}
+export {
+  Link,
+  NavLink
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "1.0.1",
+  "version": "3.0.0",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",
@@ -96,6 +96,11 @@
       "types": "./dist/tool-previews.d.ts",
       "import": "./dist/tool-previews.js",
       "default": "./dist/tool-previews.js"
+    },
+    "./nav": {
+      "types": "./dist/nav.d.ts",
+      "import": "./dist/nav.js",
+      "default": "./dist/nav.js"
     }
   },
   "dependencies": {
@@ -126,7 +131,8 @@
   "peerDependencies": {
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19",
-    "@tangle-network/brand": "^0.3.0"
+    "react-router": "^7",
+    "@tangle-network/brand": "^0.4.0"
   },
   "peerDependenciesMeta": {
     "@nanostores/react": {
@@ -158,6 +164,9 @@
     },
     "yjs": {
       "optional": true
+    },
+    "react-router": {
+      "optional": true
     }
   },
   "devDependencies": {
@@ -177,7 +186,8 @@
     "@storybook/react": "^8.6.18",
     "tsup": "^8.3.5",
     "typescript": "^5.6.0",
-    "yjs": "^13.6.0"
+    "yjs": "^13.6.0",
+    "react-router": "^7"
   },
   "keywords": [
     "tangle",

package/src/index.ts

@@ -3,8 +3,6 @@ export * from "./chat";
 export * from "./run";
 export * from "./openui";
 export * from "./files";
-export { type ConnectionState } from "./editor";
-export * from "./editor";
 export * from "./markdown";
 export * from "./auth";
 export * from "./hooks";
@@ -12,3 +10,4 @@ export * from "./stores";
 export * from "./types";
 export * from "./utils";
 export * from "./tool-previews";
+export * from "./redaction";

package/src/nav/index.tsx

@@ -0,0 +1,34 @@
+import {
+  Link as RRLink,
+  NavLink as RRNavLink,
+  type LinkProps,
+  type NavLinkProps,
+} from "react-router";
+
+/**
+ * Navigation primitives that make agent-app products feel snappy by default.
+ *
+ * The dominant source of the "1–2s when I click through pages" latency in the
+ * fleet is NOT slow queries (route loaders' D1 indexes already cover their
+ * filters) — it is that every click is a COLD loader round-trip the user waits
+ * on, because bare `<Link>`s do no prefetching. React Router can fire the
+ * target route's loader on hover/focus (`prefetch="intent"`), overlapping the
+ * round-trip with the user's mouse travel so the transition feels instant.
+ *
+ * These wrappers default `prefetch="intent"` so a product gets that behaviour
+ * by importing the shared `<Link>` instead of remembering the flag on every
+ * nav element. The default is overridable — a caller that passes `prefetch`
+ * wins (the spread is applied after the default).
+ */
+
+/** `react-router` `<Link>` with `prefetch="intent"` on by default. */
+export function Link({ prefetch = "intent", ...props }: LinkProps) {
+  return <RRLink prefetch={prefetch} {...props} />;
+}
+
+/** `react-router` `<NavLink>` with `prefetch="intent"` on by default. */
+export function NavLink({ prefetch = "intent", ...props }: NavLinkProps) {
+  return <RRNavLink prefetch={prefetch} {...props} />;
+}
+
+export type { LinkProps, NavLinkProps } from "react-router";

package/src/redaction/index.ts

@@ -0,0 +1,7 @@
+export {
+  RedactedDocument,
+  type RedactedDocumentProps,
+  type RedactedDocumentData,
+  type RedactedDocSegment,
+  type RevealResult,
+} from "./redacted-document";

package/src/redaction/redacted-document.tsx

@@ -0,0 +1,150 @@
+import { useCallback, useState, type ReactNode } from "react";
+import { Eye, EyeOff, Loader2, ShieldAlert } from "lucide-react";
+import { cn } from "../lib/utils";
+
+/**
+ * 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.
+ */
+
+export type RedactedDocSegment =
+  | { type: "text"; text: string }
+  | { type: "redacted"; id: string; kind: string };
+
+export interface RedactedDocumentData {
+  segments: RedactedDocSegment[];
+}
+
+export interface RevealResult {
+  ok: boolean;
+  value?: string;
+  /** e.g. `forbidden` | `not_found` when `ok` is false. */
+  reason?: string;
+}
+
+export 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;
+}
+
+type ChipState =
+  | { status: "masked" }
+  | { status: "loading" }
+  | { status: "revealed"; value: string }
+  | { status: "denied"; reason?: string };
+
+const defaultLabel = (kind: string) => kind.replace(/[-_]/g, " ").toUpperCase();
+
+function RedactedChip({
+  kind,
+  label,
+  onReveal,
+}: {
+  kind: string;
+  label: string;
+  onReveal: () => Promise<RevealResult>;
+}) {
+  const [state, setState] = useState<ChipState>({ status: "masked" });
+
+  const reveal = useCallback(async () => {
+    setState({ status: "loading" });
+    try {
+      const r = await onReveal();
+      setState(
+        r.ok && r.value !== undefined
+          ? { status: "revealed", value: r.value }
+          : { status: "denied", reason: r.reason },
+      );
+    } catch {
+      setState({ status: "denied", reason: "error" });
+    }
+  }, [onReveal]);
+
+  if (state.status === "revealed") {
+    return (
+      <button
+        type="button"
+        onClick={() => setState({ status: "masked" })}
+        title="Revealed — 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",
+        )}
+      >
+        {state.value}
+        <EyeOff className="size-3 opacity-60" />
+      </button>
+    );
+  }
+
+  if (state.status === "denied") {
+    return (
+      <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"
+      >
+        <ShieldAlert className="size-3" /> {label}
+      </span>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      disabled={state.status === "loading"}
+      onClick={reveal}
+      title={`${label} — 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",
+      )}
+    >
+      {state.status === "loading" ? (
+        <Loader2 className="size-3 animate-spin" />
+      ) : (
+        <Eye className="size-3 opacity-60" />
+      )}
+      <span aria-hidden>{"███"}</span> {label}
+    </button>
+  );
+}
+
+export function RedactedDocument({
+  document,
+  onReveal,
+  labelForKind = defaultLabel,
+  className,
+}: RedactedDocumentProps): ReactNode {
+  return (
+    <div className={cn("whitespace-pre-wrap break-words leading-relaxed", className)}>
+      {document.segments.map((seg, i) =>
+        seg.type === "text" ? (
+          <span key={i}>{seg.text}</span>
+        ) : (
+          <RedactedChip
+            key={seg.id}
+            kind={seg.kind}
+            label={labelForKind(seg.kind)}
+            onReveal={() => onReveal(seg.id)}
+          />
+        ),
+      )}
+    </div>
+  );
+}