@tangle-network/ui 11.2.4 → 11.4.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @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
+
+- e67a809: Raise the dark surface ladder to AA and add the page-level primitives.
+
+  In the dark spine, `--md3-surface-container-high` and `--md3-surface-container-highest` sat close enough to the ink ramp that `--text-dim` fell under 4.5:1 on them. The ladder is re-spaced and the ink ramp moves with it, so every ink tier clears AA on all five planes.
+
+  Dark status chips keep their hue, drop 14% chroma, and lift the fill to 1.50:1 from the card. A new `--run-mix-*` ramp carries proportional bars, spaced in relative luminance so adjacent segments clear the 3:1 floor for non-text contrast.
+
+  One light token moves: `--surface-warning-text` goes `#b45309` to `#ab4f09`. It is a contrast fix, not a hue change. The old value measured 4.16:1 on the light page canvas, under the 4.5:1 body floor, whenever the colour was used as text away from its own pill background; the new value measures 4.51:1 there and 5.25:1 on the pill. Every other light value is unchanged.
+
+  `@tangle-network/ui` gains four primitives: `PageHeader`, `StatusPill`, `MetricStrip`, and `Toolbar`/`FilterField`. All additive; no existing export changes.
+
 ## 11.2.4
 
 ### Patch Changes

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

@@ -1261,6 +1261,275 @@ function ThemeToggle() {
   );
 }
 
+// src/primitives/page-header.tsx
+import * as React12 from "react";
+import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
+var PageHeader = React12.forwardRef(
+  ({
+    className,
+    title,
+    description,
+    actions,
+    meta,
+    titleId,
+    level = 1,
+    ...props
+  }, ref) => {
+    const Heading = level === 1 ? "h1" : "h2";
+    return /* @__PURE__ */ jsxs15("header", { ref, className: cn("mb-6", className), ...props, children: [
+      /* @__PURE__ */ jsxs15("div", { className: "flex flex-wrap items-start justify-between gap-x-6 gap-y-3", children: [
+        /* @__PURE__ */ jsxs15("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx17(
+            Heading,
+            {
+              id: titleId,
+              className: cn(
+                "text-balance font-semibold tracking-tight",
+                level === 1 ? "text-2xl" : "text-lg"
+              ),
+              children: title
+            }
+          ),
+          description && /* @__PURE__ */ jsx17("p", { className: "mt-1 max-w-prose text-muted-foreground text-sm", children: description })
+        ] }),
+        actions && /* @__PURE__ */ jsx17("div", { className: "flex flex-wrap items-center gap-2", children: actions })
+      ] }),
+      meta && /* @__PURE__ */ jsx17("div", { className: "mt-3 flex flex-wrap items-center gap-x-4 gap-y-2 text-[var(--text-dim)] text-xs", children: meta })
+    ] });
+  }
+);
+PageHeader.displayName = "PageHeader";
+
+// src/primitives/status-pill.tsx
+import * as React13 from "react";
+import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
+var TONE_SURFACE = {
+  success: "bg-[var(--surface-success-bg)] text-[var(--surface-success-text)] border-[var(--surface-success-border)]",
+  warning: "bg-[var(--surface-warning-bg)] text-[var(--surface-warning-text)] border-[var(--surface-warning-border)]",
+  danger: "bg-[var(--surface-danger-bg)] text-[var(--surface-danger-text)] border-[var(--surface-danger-border)]",
+  info: "bg-[var(--surface-info-bg)] text-[var(--surface-info-text)] border-[var(--surface-info-border)]",
+  // `running` shares the info triple on purpose. `--status-running` exists but
+  // is the green dot on a sandbox — a machine's power state, not a run's
+  // outcome — and it ships as one colour with no paired background or text
+  // tier, which is the pairing this component is built to guarantee. Green also
+  // already means SUCCEEDED here, so a green "running" pill would say a run had
+  // finished well while it was still going.
+  running: "bg-[var(--surface-info-bg)] text-[var(--surface-info-text)] border-[var(--surface-info-border)]",
+  neutral: "bg-[var(--surface-neutral-bg)] text-[var(--surface-neutral-text)] border-[var(--surface-neutral-border)]"
+};
+var TONE_TEXT = {
+  success: "text-[var(--surface-success-text)]",
+  warning: "text-[var(--surface-warning-text)]",
+  danger: "text-[var(--surface-danger-text)]",
+  info: "text-[var(--surface-info-text)]",
+  running: "text-[var(--surface-info-text)]",
+  neutral: "text-[var(--surface-neutral-text)]"
+};
+function ToneGlyph({ tone }) {
+  const common = {
+    viewBox: "0 0 8 8",
+    className: "size-2 shrink-0"
+  };
+  switch (tone) {
+    // Settled and good: a solid disc.
+    case "success":
+      return /* @__PURE__ */ jsx18("svg", { ...common, "aria-hidden": "true", fill: "currentColor", children: /* @__PURE__ */ jsx18("circle", { cx: "4", cy: "4", r: "3.25" }) });
+    // Settled and bad: a disc with a bar through it, so it differs from
+    // success in OUTLINE and not only in hue.
+    case "danger":
+      return /* @__PURE__ */ jsxs16(
+        "svg",
+        {
+          ...common,
+          "aria-hidden": "true",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          children: [
+            /* @__PURE__ */ jsx18("circle", { cx: "4", cy: "4", r: "3.1", fill: "currentColor", opacity: "0.35" }),
+            /* @__PURE__ */ jsx18("path", { d: "M1.9 6.1 6.1 1.9", strokeLinecap: "round" })
+          ]
+        }
+      );
+    // Needs a person: a triangle.
+    case "warning":
+      return /* @__PURE__ */ jsx18("svg", { ...common, "aria-hidden": "true", fill: "currentColor", children: /* @__PURE__ */ jsx18("path", { d: "M4 0.6 7.7 7.1H0.3z" }) });
+    // Still moving: an open ring, visibly hollow at 8px.
+    case "running":
+      return /* @__PURE__ */ jsx18(
+        "svg",
+        {
+          ...common,
+          "aria-hidden": "true",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "1.75",
+          children: /* @__PURE__ */ jsx18("circle", { cx: "4", cy: "4", r: "2.9" })
+        }
+      );
+    // Informational: a square, the only right-angled mark in the set.
+    case "info":
+      return /* @__PURE__ */ jsx18("svg", { ...common, "aria-hidden": "true", fill: "currentColor", children: /* @__PURE__ */ jsx18("rect", { x: "0.9", y: "0.9", width: "6.2", height: "6.2", rx: "1.2" }) });
+    // Nothing has happened: a dash. No enclosed area at all.
+    default:
+      return /* @__PURE__ */ jsx18(
+        "svg",
+        {
+          ...common,
+          "aria-hidden": "true",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "1.75",
+          children: /* @__PURE__ */ jsx18("path", { d: "M1 4h6", strokeLinecap: "round" })
+        }
+      );
+  }
+}
+var StatusPill = React13.forwardRef(
+  ({ className, tone, children, bare = false, size = "sm", ...props }, ref) => /* @__PURE__ */ jsxs16(
+    "span",
+    {
+      ref,
+      className: cn(
+        "inline-flex items-center gap-1.5 whitespace-nowrap rounded-full font-medium",
+        size === "sm" ? "px-2 py-0.5 text-xs" : "px-2.5 py-1 text-sm",
+        bare ? "border border-transparent bg-transparent px-0" : cn("border", TONE_SURFACE[tone]),
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx18("span", { className: cn("inline-flex", bare && TONE_TEXT[tone]), children: /* @__PURE__ */ jsx18(ToneGlyph, { tone }) }),
+        children
+      ]
+    }
+  )
+);
+StatusPill.displayName = "StatusPill";
+
+// src/primitives/metric-strip.tsx
+import * as React14 from "react";
+import { jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
+var MetricStrip = React14.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx19(
+    "dl",
+    {
+      ref,
+      className: cn(
+        "grid grid-cols-2 rounded-[var(--radius-lg)] border border-border bg-card shadow-[var(--shadow-card)] sm:grid-cols-4",
+        className
+      ),
+      ...props,
+      children
+    }
+  )
+);
+MetricStrip.displayName = "MetricStrip";
+var Metric = React14.forwardRef(
+  ({ className, label, value, hint, attention, ...props }, ref) => /* @__PURE__ */ jsxs17(
+    "div",
+    {
+      ref,
+      className: cn(
+        // Leading hairline, DRAWN only where a divider belongs — never drawn
+        // and then suppressed. Stating it as `border-l` plus `border-l-0`
+        // variants puts both in one conflict group, where the winner is decided
+        // by emitted-rule order rather than by intent; that resolved the wrong
+        // way at every breakpoint and left a rule down the start of each row.
+        // `:not(:nth-child(Nn+1))` is the row-start test for the column count
+        // at that breakpoint, so no rule ever contradicts another.
+        //
+        // N is COUPLED to the grid template on `MetricStrip`: 2 columns below
+        // `sm`, 4 from `sm`. A new breakpoint there — `md:grid-cols-3`, say —
+        // needs its `md:[&:not(:nth-child(3n+1))]:border-l` here in the same
+        // change, or the dividers land mid-row at that width.
+        "border-border p-4 sm:p-5",
+        "max-sm:[&:not(:nth-child(2n+1))]:border-l",
+        "sm:[&:not(:nth-child(4n+1))]:border-l",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs17("dt", { className: "flex items-center gap-2 text-muted-foreground text-sm", children: [
+          /* @__PURE__ */ jsx19("span", { className: "truncate", children: label }),
+          attention && /* @__PURE__ */ jsx19(StatusPill, { tone: attention.tone, children: attention.label })
+        ] }),
+        /* @__PURE__ */ jsx19(
+          "dd",
+          {
+            className: cn(
+              "mt-1 truncate font-semibold text-xl tabular-nums tracking-tight lg:text-2xl",
+              attention?.tone === "danger" && "text-[var(--surface-danger-text)]"
+            ),
+            title: typeof value === "string" ? value : void 0,
+            children: value
+          }
+        ),
+        hint && // Titled for the same reason the value is: the line truncates, and a
+        // hint is where the qualifying detail lives — which wallet, which
+        // window — so a clipped one is the case most worth recovering.
+        /* @__PURE__ */ jsx19(
+          "dd",
+          {
+            className: "mt-0.5 truncate text-[var(--text-dim)] text-xs",
+            title: typeof hint === "string" ? hint : void 0,
+            children: hint
+          }
+        )
+      ]
+    }
+  )
+);
+Metric.displayName = "Metric";
+
+// src/primitives/toolbar.tsx
+import * as React15 from "react";
+import { jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
+var Toolbar = React15.forwardRef(
+  ({ className, search, filters, actions, ...props }, ref) => /* @__PURE__ */ jsxs18(
+    "div",
+    {
+      ref,
+      className: cn(
+        "mb-4 flex flex-col gap-3 lg:flex-row lg:items-center",
+        className
+      ),
+      ...props,
+      children: [
+        search && /* @__PURE__ */ jsx20("div", { className: "min-w-0 lg:max-w-sm lg:flex-1", children: search }),
+        filters && // `py-1` leaves room for a focus ring above and below; horizontally the
+        // scroll container clips it, which is the trade a single-line filter row
+        // makes. No negative margin — pulling the row wider than its parent is
+        // what made every page report 4px of horizontal overflow.
+        /* @__PURE__ */ jsx20("div", { className: "flex min-w-0 items-center gap-2 overflow-x-auto py-1 lg:flex-1", children: filters }),
+        actions && /* @__PURE__ */ jsx20("div", { className: "flex shrink-0 items-center gap-2 lg:ml-auto", children: actions })
+      ]
+    }
+  )
+);
+Toolbar.displayName = "Toolbar";
+var FilterField = React15.forwardRef(
+  ({ className, label, htmlFor, children, ...props }, ref) => /* @__PURE__ */ jsxs18(
+    "div",
+    {
+      ref,
+      className: cn("flex shrink-0 items-center gap-2", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx20(
+          "label",
+          {
+            htmlFor,
+            className: "whitespace-nowrap text-muted-foreground text-xs",
+            children: label
+          }
+        ),
+        children
+      ]
+    }
+  )
+);
+FilterField.displayName = "FilterField";
+
 export {
   Dialog,
   DialogTrigger,
@@ -1305,6 +1574,12 @@ export {
   SidebarDropZone,
   useTheme,
   ThemeToggle,
+  PageHeader,
+  StatusPill,
+  MetricStrip,
+  Metric,
+  Toolbar,
+  FilterField,
   Logo,
   TangleKnot
 };

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

@@ -1,5 +1,5 @@
 export { B as Button, a as ButtonProps, b as buttonVariants } from './button-CMQuQEW_.js';
-export { Avatar, AvatarFallback, AvatarImage, Badge, BadgeProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, EmptyStateProps, InlineCode, InlineCodeProps, Input, InputProps, Label, Progress, SegmentedControl, SegmentedControlOption, SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SidebarDropZone, SidebarDropZoneProps, Skeleton, SkeletonCard, SkeletonTable, StatCard, StatCardProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, Textarea, TextareaProps, ThemeToggle, Toast, ToastContainer, ToastProvider, UploadFile, UploadProgress, UploadProgressProps, badgeVariants, useTheme, useToast } from './primitives.js';
+export { Avatar, AvatarFallback, AvatarImage, Badge, BadgeProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, EmptyStateProps, FilterField, FilterFieldProps, InlineCode, InlineCodeProps, Input, InputProps, Label, Metric, MetricProps, MetricStrip, MetricStripProps, PageHeader, PageHeaderProps, Progress, SegmentedControl, SegmentedControlOption, SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SidebarDropZone, SidebarDropZoneProps, Skeleton, SkeletonCard, SkeletonTable, StatCard, StatCardProps, StatusPill, StatusPillProps, StatusTone, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, Textarea, TextareaProps, ThemeToggle, Toast, ToastContainer, ToastProvider, Toolbar, ToolbarProps, UploadFile, UploadProgress, UploadProgressProps, badgeVariants, useTheme, useToast } from './primitives.js';
 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';
@@ -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,
@@ -76,9 +79,13 @@ import {
   DialogTrigger,
   DropZone,
   EmptyState,
+  FilterField,
   Input,
   Label,
   Logo,
+  Metric,
+  MetricStrip,
+  PageHeader,
   Progress,
   SegmentedControl,
   Select,
@@ -96,6 +103,7 @@ import {
   SkeletonCard,
   SkeletonTable,
   StatCard,
+  StatusPill,
   Switch,
   TangleKnot,
   TerminalCursor,
@@ -106,10 +114,11 @@ import {
   ThemeToggle,
   ToastContainer,
   ToastProvider,
+  Toolbar,
   UploadProgress,
   useTheme,
   useToast
-} from "./chunk-HSMVDKL3.js";
+} from "./chunk-EJ5NBW7V.js";
 import {
   Avatar,
   AvatarFallback,
@@ -238,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,
@@ -388,6 +300,7 @@ export {
   FilePreview,
   FileTabs,
   FileTree,
+  FilterField,
   GitHubLoginButton,
   GlobResultsPreview,
   GrepResultsPreview,
@@ -401,7 +314,10 @@ export {
   Logo,
   Markdown,
   MessageList,
+  Metric,
+  MetricStrip,
   OpenUIArtifactRenderer,
+  PageHeader,
   Progress,
   QuestionPreview,
   RealtimeSessionRegistry,
@@ -424,6 +340,7 @@ export {
   SkeletonCard,
   SkeletonTable,
   StatCard,
+  StatusPill,
   Switch,
   TOOL_CATEGORY_ICONS,
   Table,
@@ -449,6 +366,7 @@ export {
   ToastContainer,
   ToastProvider,
   ToolCallFeed,
+  Toolbar,
   UploadProgress,
   UserMenu,
   UserMessage,