@tangle-network/sandbox-ui 0.113.7 → 0.114.0

package/dist/index-CKRaj1pM.d.ts

@@ -0,0 +1,776 @@
+import { ArtifactPane as ArtifactPane$1, ArtifactPaneProps } from "@tangle-network/ui/primitives";
+import { HTMLAttributes, ReactNode, Ref } from "react";
+import { LucideIcon } from "lucide-react";
+import { FileNode, FileTabData, FileTreeVisibilityOptions } from "@tangle-network/ui/files";
+import { ActiveSessionRecord, ActiveSessionStatus, SessionProjectKey } from "@tangle-network/ui/stores";
+import { ChatContainerProps } from "@tangle-network/ui/chat";
+import { OpenUIAction, OpenUIComponentNode } from "@tangle-network/ui/openui";
+//#region src/workspace/workspace-layout.d.ts
+interface WorkspaceLayoutProps {
+  /** Left sidebar content (file tree, navigation) */
+  left?: ReactNode;
+  /** Left sidebar header */
+  leftHeader?: ReactNode;
+  /** Center main content */
+  center: ReactNode;
+  /** Center header (session name, etc.) */
+  centerHeader?: ReactNode;
+  /** Center footer (input bar) */
+  centerFooter?: ReactNode;
+  /** Right panel content (preview, editor) */
+  right?: ReactNode;
+  /** Right panel header */
+  rightHeader?: ReactNode;
+  /** Bottom panel (terminal) */
+  bottom?: ReactNode;
+  /** Bottom panel header */
+  bottomHeader?: ReactNode;
+  /** Default left panel state */
+  defaultLeftOpen?: boolean;
+  /** Default right panel state */
+  defaultRightOpen?: boolean;
+  /** Default bottom panel state */
+  defaultBottomOpen?: boolean;
+  /** Default left panel width in px */
+  defaultLeftWidth?: number;
+  /** Default right panel width in px */
+  defaultRightWidth?: number;
+  /** Default bottom panel height in px */
+  defaultBottomHeight?: number;
+  /** Minimum left panel width in px */
+  minLeftWidth?: number;
+  /** Maximum left panel width in px */
+  maxLeftWidth?: number;
+  /** Minimum right panel width in px */
+  minRightWidth?: number;
+  /** Maximum right panel width in px */
+  maxRightWidth?: number;
+  /**
+   * Width in px the center column keeps on desktop. When the shell is too
+   * narrow for the stored pane widths, the right pane yields down to its
+   * minimum first, then the left; the stored widths return when room does.
+   */
+  minCenterWidth?: number;
+  /** Minimum bottom panel height in px */
+  minBottomHeight?: number;
+  /** Maximum bottom panel height in px */
+  maxBottomHeight?: number;
+  /** Persist panel state and sizes in localStorage */
+  persistenceKey?: string;
+  /** Disable resize handles */
+  resizable?: boolean;
+  /** Visual theme for sandbox surfaces */
+  theme?: "vault";
+  /** Density mode for control sizing */
+  density?: "comfortable" | "compact";
+  /** Accessible label for the left panel */
+  leftLabel?: string;
+  /** Accessible label for the right panel */
+  rightLabel?: string;
+  /** Accessible label for the bottom panel */
+  bottomLabel?: string;
+  /**
+   * Controlled open state for the left pane. Omit to keep the pane
+   * uncontrolled (`defaultLeftOpen`, persisted under `persistenceKey`).
+   */
+  leftOpen?: boolean;
+  /** Called with the next state whenever the layout would open or close the left pane. */
+  onLeftOpenChange?: (open: boolean) => void;
+  /** Controlled open state for the right pane; see `leftOpen`. */
+  rightOpen?: boolean;
+  /** Called with the next state whenever the layout would open or close the right pane. */
+  onRightOpenChange?: (open: boolean) => void;
+  /**
+   * ⌘B / Ctrl+B toggles the left pane and ⌘E / Ctrl+E the right pane. A
+   * chord with Alt or Shift, or one fired while an input, textarea, select, or
+   * contentEditable has focus, is left to the page. Off by default.
+   */
+  keyboardShortcuts?: boolean;
+  /**
+   * Replaces the default "Open left panel" button at the top-left of the
+   * center pane while a left pane is provided but closed.
+   */
+  leftCollapsedControl?: ReactNode;
+  /** Extra classes for the left pane's scrolling content wrapper, e.g. `py-0` so a rail owns its own gutter. */
+  leftContentClassName?: string;
+  /** Extra classes for the right pane's scrolling content wrapper. */
+  rightContentClassName?: string;
+  /**
+   * `always` (default) keeps the center header row whenever a side or bottom
+   * pane exists, so pane headers line up across the shell even while the row
+   * is empty. `auto` renders the row only while it has content: a
+   * `centerHeader`, or an open-pane toggle for a closed pane.
+   */
+  centerHeaderVisibility?: "always" | "auto";
+  className?: string;
+}
+declare function WorkspaceLayout({ left, leftHeader, center, centerHeader, centerFooter, right, rightHeader, bottom, bottomHeader, defaultLeftOpen, defaultRightOpen, defaultBottomOpen, defaultLeftWidth, defaultRightWidth, defaultBottomHeight, minLeftWidth, maxLeftWidth, minRightWidth, maxRightWidth, minCenterWidth, minBottomHeight, maxBottomHeight, persistenceKey, resizable, theme, density, leftLabel, rightLabel, bottomLabel, leftOpen: leftOpenProp, onLeftOpenChange, rightOpen: rightOpenProp, onRightOpenChange, keyboardShortcuts, leftCollapsedControl, leftContentClassName, rightContentClassName, centerHeaderVisibility, className }: WorkspaceLayoutProps): import("react").JSX.Element;
+//#endregion
+//#region src/workspace/workspace-pane-header.d.ts
+type WorkspacePaneHeaderProps = HTMLAttributes<HTMLDivElement>;
+/**
+ * The shared 56px header row for top-level workspace panes and drawers.
+ * Bottom runtime panels intentionally use their own compact header.
+ */
+declare function WorkspacePaneHeader({ className, ...props }: WorkspacePaneHeaderProps): import("react").JSX.Element;
+//#endregion
+//#region src/workspace/directory-pane.d.ts
+interface DirectoryPaneProps {
+  root: FileNode;
+  selectedPath?: string;
+  onSelect?: (path: string, node: FileNode) => void;
+  onRefresh?: () => void;
+  onUpload?: () => void;
+  title?: string;
+  subtitle?: string;
+  defaultExpanded?: boolean;
+  searchPlaceholder?: string;
+  visibility?: FileTreeVisibilityOptions;
+  className?: string;
+}
+/**
+ * DirectoryPane — searchable file-system navigation surface for sandbox
+ * sessions.
+ */
+declare function DirectoryPane({ root, selectedPath, onSelect, onRefresh, onUpload, title, subtitle, defaultExpanded, searchPlaceholder, visibility, className }: DirectoryPaneProps): import("react").JSX.Element;
+//#endregion
+//#region src/workspace/status-banner.d.ts
+/**
+ * StatusBanner — full-width notification banner for connection/provisioning states.
+ */
+type BannerType = "provisioning" | "connecting" | "error" | "warning" | "success" | "info";
+interface StatusBannerProps {
+  type: BannerType;
+  message: string;
+  detail?: string;
+  onDismiss?: () => void;
+  className?: string;
+}
+declare function StatusBanner({ type, message, detail, onDismiss, className }: StatusBannerProps): import("react").JSX.Element;
+//#endregion
+//#region src/workspace/status-bar.d.ts
+/**
+ * StatusBar — compact bottom bar: connection state, file/artifact context
+ * badges, credits. The active model lives in the input box, not here.
+ */
+interface ContextBadge {
+  id: string;
+  label: string;
+  count?: number;
+}
+interface StatusBarProps {
+  /** @deprecated The model now lives in the input box; the status bar no longer
+   *  renders it. Retained so existing callers keep type-checking. */
+  modelLabel?: string;
+  /** @deprecated See `modelLabel`. */
+  onModelClick?: () => void;
+  credits?: number;
+  contextBadges?: ContextBadge[];
+  onRemoveBadge?: (id: string) => void;
+  status?: "connected" | "connecting" | "disconnected" | "provisioning";
+  className?: string;
+}
+declare function StatusBar({ credits, contextBadges, onRemoveBadge, status, className }: StatusBarProps): import("react").JSX.Element;
+//#endregion
+//#region src/workspace/terminal-panel.d.ts
+/**
+ * Terminal — read-only terminal output panel.
+ *
+ * Shows agent's bash command output with basic ANSI color support.
+ * Collapsible, auto-scrolls to bottom.
+ */
+interface TerminalLine {
+  id: string;
+  text: string;
+  type: "command" | "stdout" | "stderr" | "system";
+  timestamp?: number;
+}
+interface TerminalProps {
+  lines: TerminalLine[];
+  title?: string;
+  isCollapsed?: boolean;
+  onToggle?: () => void;
+  onClose?: () => void;
+  maxHeight?: number;
+  className?: string;
+}
+declare function TerminalPanel({ lines, title, isCollapsed, onToggle, onClose, maxHeight, className }: TerminalProps): import("react").JSX.Element;
+//#endregion
+//#region src/workspace/runtime-pane.d.ts
+interface RuntimePaneProps {
+  title?: string;
+  subtitle?: string;
+  statusBanner?: StatusBannerProps;
+  statusBar?: StatusBarProps;
+  /** When provided, replaces the entire 2-column grid with custom content (e.g. a full-pane TerminalView). */
+  content?: React.ReactNode;
+  terminal?: TerminalProps;
+  audit?: React.ReactNode;
+  inspector?: React.ReactNode;
+  footer?: React.ReactNode;
+  className?: string;
+}
+/**
+ * RuntimePane — shared operating surface for sandbox session state, terminal
+ * output, audit results, and runtime metadata.
+ */
+declare function RuntimePane({ title, subtitle, statusBanner, statusBar, content, terminal, audit, inspector, footer, className }: RuntimePaneProps): import("react").JSX.Element;
+//#endregion
+//#region src/workspace/session-optimistic.d.ts
+/**
+ * Optimistic session/thread list: reflect a just-created / renamed / deleted
+ * item in the sidebar INSTANTLY, before the server loader round-trips.
+ *
+ * The shell loader is the source of truth and reconciles in the background
+ * (typically the app calls `useRevalidator().revalidate()` after its mutation
+ * fetch settles). Until that lands, a local mirror of the loader items carries
+ * the optimistic edit so a delete / rename / new-thread does not feel broken
+ * for the duration of a D1 round-trip.
+ *
+ * Two ways to drive it, usable together:
+ *   1. A window `CustomEvent` (default name {@link SESSION_CREATED_EVENT}) — the
+ *      surface that creates a thread (often a different route from the sidebar's
+ *      route) dispatches it; the sidebar prepends the item with no prop wiring.
+ *   2. The imperative {@link SessionOptimisticController} returned here — the
+ *      sidebar's own action handlers (rename / delete / pin) call it directly.
+ */
+/** Default window-event name for "a session/thread was just created". */
+declare const SESSION_CREATED_EVENT = "sandbox-thread-created";
+/**
+ * Payload of a {@link SESSION_CREATED_EVENT}. Only `id` + `title` are required;
+ * everything else mirrors {@link SessionSidebarItem}. `updatedAt` defaults to
+ * now so the new item sorts to the top.
+ */
+interface SessionCreatedDetail extends Partial<Omit<SessionSidebarItem, "id" | "title">> {
+  id: string;
+  title: string;
+}
+/** Dispatch the shared "session created" event so any mounted sidebar updates. */
+declare function dispatchSessionCreated(detail: SessionCreatedDetail, eventName?: string): void;
+/** Imperative handle for driving optimistic edits from a mutation handler. */
+interface SessionOptimisticController {
+  /** Prepend (or move to top) an item — call before the create fetch settles. */
+  add: (item: SessionCreatedDetail) => void;
+  /** Patch an existing item in place — e.g. a rename or category change. */
+  update: (id: string, patch: Partial<SessionSidebarItem>) => void;
+  /** Drop an item — call before the delete fetch settles. */
+  remove: (id: string) => void;
+  /** Discard all optimistic edits and snap back to the loader items. */
+  reset: () => void;
+}
+interface UseOptimisticSessionItemsOptions {
+  /**
+   * Listen for the shared window create-event and prepend its item. Set `false`
+   * to drive optimistic state purely through the imperative controller.
+   * Defaults to `true`.
+   */
+  listenForCreate?: boolean;
+  /** Override the window event name to listen for. */
+  eventName?: string;
+}
+/**
+ * Mirror `items` with optimistic add/update/remove on top. The mirror re-syncs
+ * whenever `items` changes (the loader is authoritative), so an optimistic edit
+ * is naturally superseded once the server result arrives.
+ */
+declare function useOptimisticSessionItems(items: SessionSidebarItem[], options?: UseOptimisticSessionItemsOptions): {
+  items: SessionSidebarItem[];
+  controller: SessionOptimisticController;
+};
+//#endregion
+//#region src/workspace/session-sidebar.d.ts
+interface SessionSidebarItem {
+  id: string;
+  title: string;
+  subtitle?: string;
+  href?: string;
+  updatedAt?: string | number | Date;
+  projectId?: SessionProjectKey | null;
+  status?: ActiveSessionStatus;
+  category?: string;
+  isPinned?: boolean;
+  badges?: SessionSidebarBadge[];
+  /**
+   * Glyph rendered in a 16×20 slot before the title — a harness mark, for
+   * example. While an icon is present the status dot becomes a 6px badge on
+   * the icon's corner instead of a leading dot.
+   */
+  icon?: ReactNode;
+  /**
+   * Muted 12px line under the title, e.g. `harness · age`. When omitted and
+   * `showUpdatedAt` is set, the row renders `updatedAt` as a relative age here.
+   */
+  meta?: ReactNode;
+}
+interface SessionSidebarBadge {
+  id: string;
+  label: string;
+  tone?: "neutral" | "accent" | "success" | "warning" | "danger";
+}
+interface SessionSidebarLink {
+  id: string;
+  label: string;
+  href?: string;
+  icon?: "vault" | "settings" | "back";
+}
+interface SessionSidebarFilter {
+  id: string;
+  label: string;
+  matches: (item: SessionSidebarItem, options: {
+    session: ActiveSessionRecord | null;
+    isActive: boolean;
+  }) => boolean;
+}
+type SessionSidebarVariant = "default" | "quiet";
+type SessionSidebarGroupBy = "none" | "status";
+interface SessionSidebarProps {
+  title: string;
+  subtitle?: string;
+  projectId?: SessionProjectKey | null;
+  items: SessionSidebarItem[];
+  currentItemId?: string | null;
+  createLabel?: string;
+  onCreate?: () => void;
+  onSelectItem?: (item: SessionSidebarItem) => void;
+  onSelectLink?: (link: SessionSidebarLink) => void;
+  links?: SessionSidebarLink[];
+  className?: string;
+  emptyMessage?: string;
+  searchPlaceholder?: string;
+  enableSearch?: boolean;
+  activityMonitor?: ReactNode;
+  filters?: SessionSidebarFilter[];
+  defaultFilterId?: string;
+  resizable?: boolean;
+  defaultWidth?: number;
+  minWidth?: number;
+  maxWidth?: number;
+  onWidthChange?: (width: number) => void;
+  renderItemActions?: (item: SessionSidebarItem, options: {
+    session: ActiveSessionRecord | null;
+    isActive: boolean;
+  }) => ReactNode;
+  /**
+   * Opt into optimistic item updates: the sidebar keeps a local mirror of
+   * `items` so a just-created / renamed / deleted thread shows instantly,
+   * before the loader round-trips. Pass `true` for defaults, or an options
+   * object to tune the window create-event. Off by default — existing callers
+   * render `items` verbatim and are unaffected.
+   */
+  optimistic?: boolean | UseOptimisticSessionItemsOptions;
+  /**
+   * Ref to the imperative optimistic controller (`add` / `update` / `remove` /
+   * `reset`). Drive optimistic edits from the consumer's own rename/delete/pin
+   * handlers. Only populated when `optimistic` is enabled.
+   */
+  optimisticRef?: Ref<SessionOptimisticController | null>;
+  /**
+   * `default` is the branded panel: icon-in-a-box header, running-count chip,
+   * bordered search field, accent-filled selected row. `quiet` is the rail of a
+   * three-pane shell: the header is one row (a "new" text button plus the
+   * optional `onCollapse` button), rows are `rounded-lg` with a surface fill
+   * for hover and selection, only non-neutral badges render, and search is a
+   * borderless field.
+   */
+  variant?: SessionSidebarVariant;
+  /**
+   * `status` partitions the list into "Needs input" (`attention-needed`),
+   * "Failed" (`error`), "Working" (`running`), and "Done" (everything else),
+   * in that order. Group labels render only while more than one group has
+   * items. Within a group the sort is unchanged: pinned first, then activity.
+   * Status comes from the active-sessions store record when one exists for the
+   * id, else from `item.status`.
+   */
+  groupBy?: SessionSidebarGroupBy;
+  /** Render `updatedAt` as a relative age under the title for rows with no `meta`. */
+  showUpdatedAt?: boolean;
+  /** Renders a "Hide chats" button in the `quiet` header. */
+  onCollapse?: () => void;
+  /**
+   * Fill the parent instead of carrying the sidebar's own width: no inline
+   * width, `h-full w-full`. Use when a layout owns the pane size. Ignored while
+   * `resizable`, which needs the inline width it drags.
+   */
+  fill?: boolean;
+}
+declare function SessionSidebar({ title, subtitle, projectId, items, currentItemId, createLabel, onCreate, onSelectItem, onSelectLink, links, className, emptyMessage, searchPlaceholder, enableSearch, activityMonitor, filters, defaultFilterId, resizable, defaultWidth, minWidth, maxWidth, onWidthChange, renderItemActions, optimistic, optimisticRef, variant, groupBy, showUpdatedAt, onCollapse, fill }: SessionSidebarProps): import("react").JSX.Element;
+//#endregion
+//#region src/lib/format-relative-age.d.ts
+/**
+ * Compact age for a session rail: `now`, `5m`, `3h`, `2d`, `3w`, `4mo`, `1y`.
+ * Unlike `timeAgo` from `@tangle-network/ui/utils` it accepts any date input,
+ * rolls past hours into days and beyond, and carries no "ago" suffix, so it
+ * fits a "codex · 2h" meta line. A future or unparseable date reads `now` /
+ * empty rather than a negative count. `now` is injectable for deterministic tests.
+ */
+declare function formatRelativeAge(date: string | number | Date, now?: number): string;
+//#endregion
+//#region src/workspace/shell-revalidation.d.ts
+/**
+ * Snappy in-app navigation: a shared `shouldRevalidate` rule for the agent-app
+ * shell route(s) that own the workspace-list / sidebar loader.
+ *
+ * The shell loader (user + workspace list, sidebar state) runs on every
+ * navigation, but its data does not change just by moving between in-app pages.
+ * Refetching it on every internal GET nav adds a loader round-trip to each
+ * click — on Cloudflare Workers + D1 (HTTP-proxied) that is a visible stall.
+ *
+ * This helper encodes the rule that makes nav feel instant WITHOUT stranding
+ * freshly-mutated data:
+ *
+ *   - Non-GET navigation (form submit / action) → always revalidate.
+ *   - Internal app→app navigation that CHANGES the path → skip revalidation.
+ *   - Imperative `useRevalidator().revalidate()` (which targets the SAME url,
+ *     so `currentUrl.pathname === nextUrl.pathname`) → revalidate. Creating a
+ *     project / thread typically goes through a raw `fetch`, so a same-url
+ *     revalidate is the ONLY way the new row reaches the shell loader; the
+ *     same-path carve-out below is what keeps that working. Suppressing it is
+ *     the project-switcher regression — do not "simplify" it away.
+ *   - Anything else (cross-path-prefix nav, entering/leaving the app) →
+ *     defer to `defaultShouldRevalidate`.
+ *
+ * Framework-agnostic by design: sandbox-ui does not depend on react-router, so
+ * this takes a plain args object. The shape is a structural subset of
+ * react-router's `ShouldRevalidateFunctionArgs`, so an app can wire it as a
+ * route export with no adapter:
+ *
+ * ```ts
+ * // app/routes/app.tsx
+ * import { shellShouldRevalidate } from "@tangle-network/sandbox-ui/workspace";
+ * export const shouldRevalidate = shellShouldRevalidate;
+ * ```
+ *
+ * `shouldRevalidate` MUST be a per-app react-router route export — it cannot be
+ * exported FROM a library on the app's behalf — so the "out of the box" win is
+ * the one-line re-export above instead of every app re-deriving the rule (and
+ * re-introducing the same-url bug).
+ */
+/**
+ * The subset of react-router's `ShouldRevalidateFunctionArgs` this rule reads.
+ * Kept structural so callers can pass the full react-router args object as-is.
+ */
+interface ShellShouldRevalidateArgs {
+  currentUrl: URL;
+  nextUrl: URL;
+  formMethod?: string;
+  defaultShouldRevalidate: boolean;
+}
+interface ShellShouldRevalidateOptions {
+  /**
+   * Path prefix that marks "inside the app shell". Internal navigation between
+   * two paths under this prefix skips the shell-loader refetch. Defaults to
+   * `"/app"`.
+   */
+  appPathPrefix?: string;
+}
+/**
+ * Build a `shouldRevalidate` function for the shell route under `appPathPrefix`.
+ * Use this when the app mounts under a non-default prefix; otherwise prefer the
+ * ready-made {@link shellShouldRevalidate} export.
+ */
+declare function createShellShouldRevalidate(options?: ShellShouldRevalidateOptions): (args: ShellShouldRevalidateArgs) => boolean;
+/**
+ * Ready-made shell `shouldRevalidate` for apps mounted under `/app`. Wire it as
+ * a one-line route export:
+ *
+ * ```ts
+ * export const shouldRevalidate = shellShouldRevalidate;
+ * ```
+ *
+ * For a non-`/app` prefix, use {@link createShellShouldRevalidate}.
+ */
+declare const shellShouldRevalidate: (args: ShellShouldRevalidateArgs) => boolean;
+//#endregion
+//#region src/workspace/session-activity-monitor.d.ts
+interface SessionActivityMonitorProps {
+  className?: string;
+  compact?: boolean;
+  sessionsById?: Record<string, ActiveSessionRecord>;
+  emptyMessage?: string;
+  resolveProjectLabel?: (projectId: SessionProjectKey, label?: string) => string;
+  onSelectSession?: (session: ActiveSessionRecord) => void;
+}
+declare function SessionActivityMonitor({ className, compact, sessionsById, emptyMessage, resolveProjectLabel, onSelectSession }: SessionActivityMonitorProps): import("react").JSX.Element | null;
+//#endregion
+//#region src/workspace/sandbox-workbench.d.ts
+type SandboxWorkbenchPlacement = "left" | "right" | "bottom" | "hidden";
+interface SandboxWorkbenchArtifactBase {
+  id: string;
+  title: ReactNode;
+  subtitle?: ReactNode;
+  eyebrow?: ReactNode;
+  meta?: ReactNode;
+  headerActions?: ReactNode;
+  toolbar?: ReactNode;
+  footer?: ReactNode;
+  /** Tab glyph. Defaults per `kind`; a `custom` artifact usually names its own. */
+  icon?: LucideIcon;
+  /** A pinned artifact's tab sorts before the rest and carries no close button. */
+  pinned?: boolean;
+}
+interface SandboxWorkbenchFileArtifact extends SandboxWorkbenchArtifactBase {
+  kind: "file";
+  path: string;
+  filename: string;
+  content?: string;
+  blobUrl?: string;
+  mimeType?: string;
+  onDownload?: () => void;
+  tabs?: FileTabData[];
+  activeTabId?: string;
+  onTabSelect?: (id: string) => void;
+  onTabClose?: (id: string) => void;
+}
+interface SandboxWorkbenchMarkdownArtifact extends SandboxWorkbenchArtifactBase {
+  kind: "markdown";
+  content: string;
+}
+interface SandboxWorkbenchOpenUIArtifact extends SandboxWorkbenchArtifactBase {
+  kind: "openui";
+  schema: OpenUIComponentNode | OpenUIComponentNode[];
+  onAction?: (action: OpenUIAction) => void;
+}
+interface SandboxWorkbenchCustomArtifact extends SandboxWorkbenchArtifactBase {
+  kind: "custom";
+  content: ReactNode;
+}
+type SandboxWorkbenchArtifact = SandboxWorkbenchCustomArtifact | SandboxWorkbenchFileArtifact | SandboxWorkbenchMarkdownArtifact | SandboxWorkbenchOpenUIArtifact;
+interface SandboxWorkbenchSessionProps extends Omit<ChatContainerProps, "className"> {
+  eyebrow?: ReactNode;
+  title?: ReactNode;
+  subtitle?: ReactNode;
+  meta?: ReactNode;
+  headerActions?: ReactNode;
+  /**
+   * Controls rendered as a strip attached beneath the chat composer —
+   * harness/model/effort pickers, token meters, etc. Use
+   * `AgentSessionControls` from `@tangle-network/agent-app/web-react` for the
+   * standard set.
+   */
+  composerControls?: ReactNode;
+  renderRunActions?: ChatContainerProps["renderRunActions"];
+  renderUserMessageActions?: ChatContainerProps["renderUserMessageActions"];
+  renderToolActions?: ChatContainerProps["renderToolActions"];
+}
+interface SandboxWorkbenchLayoutOptions extends Pick<WorkspaceLayoutProps, "bottomHeader" | "defaultBottomOpen" | "defaultLeftOpen" | "defaultLeftWidth" | "defaultRightOpen" | "defaultRightWidth" | "density" | "keyboardShortcuts" | "leftCollapsedControl" | "leftOpen" | "maxLeftWidth" | "maxRightWidth" | "minLeftWidth" | "minRightWidth" | "onLeftOpenChange" | "onRightOpenChange" | "persistenceKey" | "resizable" | "rightOpen" | "theme"> {
+  directoryPlacement?: SandboxWorkbenchPlacement;
+  artifactPlacement?: SandboxWorkbenchPlacement;
+  runtimePlacement?: SandboxWorkbenchPlacement;
+}
+interface SandboxWorkbenchProps {
+  title?: ReactNode;
+  subtitle?: ReactNode;
+  status?: ReactNode;
+  /**
+   * Header above the transcript. `undefined` keeps the branded session card
+   * (`Tangle Sandbox` / `title` / `status`), a node replaces it, and `null`
+   * removes it: the transcript then renders directly on `bg-surface` with no
+   * eyebrow/title frame around it, and the shell's center header row appears
+   * only while it holds an open-pane toggle.
+   */
+  centerHeader?: ReactNode | null;
+  /**
+   * Composer rendered under the transcript on the panel background, inside the
+   * transcript's own `max-w-3xl` column. `session.composerControls`, when
+   * also given, sits above it as before.
+   */
+  composer?: ReactNode;
+  /**
+   * First section of the left region, ahead of the directory pane — a
+   * `SessionSidebar` for a chats rail. A rail that is the only left section
+   * fills the pane: no region header, no gutter. Give it `fill` and
+   * `className="border-r-0"` so the layout's own divider is the only one.
+   */
+  rail?: ReactNode;
+  directory?: DirectoryPaneProps;
+  session: SandboxWorkbenchSessionProps;
+  artifacts?: SandboxWorkbenchArtifact[];
+  activeArtifactId?: string;
+  onArtifactChange?: (artifactId: string) => void;
+  onArtifactClose?: (artifactId: string) => void;
+  runtime?: RuntimePaneProps;
+  layout?: SandboxWorkbenchLayoutOptions;
+  /**
+   * Shown in the artifact region while no artifact is selected. When given,
+   * the region renders before the first artifact exists.
+   */
+  emptyArtifactState?: ReactNode;
+  className?: string;
+}
+/**
+ * SandboxWorkbench — high-level composition that turns sandbox-ui primitives
+ * into a complete session surface: directory, agent timeline, artifacts, and
+ * runtime in one reusable shell.
+ */
+declare function SandboxWorkbench({ title, subtitle, status, centerHeader: centerHeaderProp, composer, rail, directory, session, artifacts: artifactsProp, activeArtifactId, onArtifactChange, onArtifactClose, runtime, layout, emptyArtifactState, className }: SandboxWorkbenchProps): import("react").JSX.Element;
+declare function AgentWorkbench(props: SandboxWorkbenchProps): import("react").JSX.Element;
+//#endregion
+//#region src/workspace/audit-results.d.ts
+/**
+ * AuditResults — structured pass/fail display for form audits.
+ */
+interface AuditCheck {
+  label: string;
+  expected: string | number;
+  actual?: string | number | null;
+  passed: boolean;
+  tolerance?: number;
+  fieldPath?: string;
+}
+interface FormAudit {
+  formId: string;
+  formName?: string;
+  found: boolean;
+  checks: AuditCheck[];
+  passed: number;
+  failed: number;
+}
+interface AuditResultsProps {
+  forms: FormAudit[];
+  crossFormChecks?: AuditCheck[];
+  overallScore?: number;
+  className?: string;
+}
+declare function AuditResults({ forms, crossFormChecks, overallScore, className }: AuditResultsProps): import("react").JSX.Element;
+//#endregion
+//#region src/workspace/task-board.d.ts
+interface TaskBoardItem {
+  id: string;
+  title: string;
+  description?: string | null;
+  status: string;
+  priority?: string | null;
+  tags?: string[];
+  dueDate?: Date | null;
+  assigneeId?: string | null;
+  meta?: Record<string, unknown>;
+}
+interface TaskBoardColumn {
+  id: string;
+  label: string;
+  accent?: string;
+}
+interface TaskBoardProps {
+  items: TaskBoardItem[];
+  columns: TaskBoardColumn[];
+  className?: string;
+  onMoveItem?: (itemId: string, toColumnId: string) => void;
+  onClickItem?: (item: TaskBoardItem) => void;
+  renderItemMeta?: (item: TaskBoardItem) => ReactNode;
+  renderColumnAction?: (column: TaskBoardColumn) => ReactNode;
+  renderBadge?: (value: string, type: "priority" | "tag") => ReactNode;
+  columnEmptyState?: ReactNode;
+  header?: ReactNode;
+  /**
+   * Wrap each column's item list container. Use this to inject a DnD
+   * droppable zone (e.g. Droppable from @hello-pangea/dnd).
+   *
+   * Receives the column ID, the default item list element, and the column's items.
+   * Return a ReactNode that wraps/replaces the default element.
+   *
+   * If not provided, the default unstyled div is rendered.
+   */
+  renderColumnBody?: (columnId: string, defaultChildren: ReactNode, items: TaskBoardItem[]) => ReactNode;
+  /**
+   * Wrap each item card. Use this to inject a DnD draggable
+   * (e.g. Draggable from @hello-pangea/dnd).
+   *
+   * Receives the item, its index, and the default card element.
+   * Return a ReactNode that wraps/replaces the default element.
+   *
+   * If not provided, the default card is rendered.
+   */
+  renderItemWrapper?: (item: TaskBoardItem, index: number, defaultCard: ReactNode) => ReactNode;
+}
+declare function TaskBoard({ items, columns, className, onMoveItem, onClickItem, renderItemMeta, renderColumnAction, renderBadge, columnEmptyState, header, renderColumnBody, renderItemWrapper }: TaskBoardProps): import("react").JSX.Element;
+//#endregion
+//#region src/workspace/calendar-view.d.ts
+interface CalendarEvent {
+  id: string;
+  title: string;
+  type?: string;
+  startAt: Date | string;
+  endAt?: Date | string | null;
+  allDay?: boolean;
+  /** Arbitrary data passed through to render props */
+  meta?: Record<string, unknown>;
+}
+interface CalendarViewProps {
+  events: CalendarEvent[];
+  className?: string;
+  /** Controlled month (0-indexed). Defaults to current month. */
+  month?: number;
+  year?: number;
+  onMonthChange?: (year: number, month: number) => void;
+  /** Which day is selected (ISO date string YYYY-MM-DD) */
+  selectedDay?: string | null;
+  onSelectDay?: (dateKey: string) => void;
+  onDoubleClickDay?: (dateKey: string) => void;
+  /** Render an event dot/chip inside a calendar cell */
+  renderEventChip?: (event: CalendarEvent) => ReactNode;
+  /** Render the day detail panel (right side) */
+  renderDayDetail?: (dateKey: string, dayEvents: CalendarEvent[]) => ReactNode;
+  /** Header slot (left of navigation) */
+  headerLeft?: ReactNode;
+  /** Header slot (right of navigation) */
+  headerRight?: ReactNode;
+  /** Whether to show the day detail panel. Default true. */
+  showDayPanel?: boolean;
+}
+/**
+ * CalendarView — month grid calendar with event chips and optional day detail panel.
+ *
+ * Stateless by default (controlled month/selectedDay). Falls back to internal
+ * state when uncontrolled. All rendering is customizable via render props.
+ */
+declare function CalendarView({ events, className, month: controlledMonth, year: controlledYear, onMonthChange, selectedDay: controlledSelectedDay, onSelectDay, onDoubleClickDay, renderEventChip, renderDayDetail, headerLeft, headerRight, showDayPanel }: CalendarViewProps): import("react").JSX.Element;
+//#endregion
+//#region src/workspace/approval-queue.d.ts
+interface ApprovalItem {
+  id: string;
+  title: string;
+  description?: string | null;
+  type: string;
+  status: "pending" | "approved" | "rejected" | "executed";
+  createdAt?: Date | string | null;
+  resolvedAt?: Date | string | null;
+  /** Arbitrary metadata — e.g. rejectionReason, confidence, content preview */
+  meta?: Record<string, unknown>;
+}
+interface ApprovalConfidenceStat {
+  type: string;
+  approved: number;
+  rejected: number;
+  total: number;
+  rate: number;
+}
+interface ApprovalQueueProps {
+  items: ApprovalItem[];
+  className?: string;
+  onApprove?: (item: ApprovalItem) => void;
+  onReject?: (item: ApprovalItem, reason?: string) => void;
+  /** Render custom content inside each approval card */
+  renderItemDetail?: (item: ApprovalItem) => ReactNode;
+  /** Render a custom badge for the item type */
+  renderTypeBadge?: (type: string) => ReactNode;
+  /** Render custom stats at the top. If not provided, auto-computed confidence stats shown. */
+  renderStats?: (stats: ApprovalConfidenceStat[]) => ReactNode;
+  /** Whether the user can approve/reject. Default true. */
+  canResolve?: boolean;
+  /** Header slot */
+  header?: ReactNode;
+  /** Empty state */
+  emptyState?: ReactNode;
+  /** Whether to show resolved items. Default: collapsed toggle. */
+  showResolved?: boolean;
+}
+/**
+ * ApprovalQueue — review queue for agent-proposed actions.
+ *
+ * Shows pending items with approve/reject controls, confidence stats per type,
+ * and a collapsible resolved history. Designed for the agent approval feedback
+ * loop: agent proposes → user approves/rejects → rejection reasons feed back.
+ */
+declare function ApprovalQueue({ items, className, onApprove, onReject, renderItemDetail, renderTypeBadge, renderStats, canResolve, header, emptyState, showResolved: controlledShowResolved }: ApprovalQueueProps): import("react").JSX.Element;
+//#endregion
+export { TerminalProps as $, ShellShouldRevalidateArgs as A, SessionSidebarLink as B, SandboxWorkbenchLayoutOptions as C, SandboxWorkbenchSessionProps as D, SandboxWorkbenchProps as E, SessionSidebar as F, SessionOptimisticController as G, SessionSidebarVariant as H, SessionSidebarBadge as I, useOptimisticSessionItems as J, UseOptimisticSessionItemsOptions as K, SessionSidebarFilter as L, createShellShouldRevalidate as M, shellShouldRevalidate as N, SessionActivityMonitor as O, formatRelativeAge as P, TerminalPanel as Q, SessionSidebarGroupBy as R, SandboxWorkbenchFileArtifact as S, SandboxWorkbenchOpenUIArtifact as T, SESSION_CREATED_EVENT as U, SessionSidebarProps as V, SessionCreatedDetail as W, RuntimePaneProps as X, RuntimePane as Y, TerminalLine as Z, FormAudit as _, ApprovalQueue as a, StatusBannerProps as at, SandboxWorkbenchArtifact as b, CalendarView as c, WorkspacePaneHeader as ct, TaskBoardColumn as d, WorkspaceLayoutProps as dt, ContextBadge as et, TaskBoardItem as f, AuditResultsProps as g, AuditResults as h, ApprovalItem as i, StatusBanner as it, ShellShouldRevalidateOptions as j, SessionActivityMonitorProps as k, CalendarViewProps as l, WorkspacePaneHeaderProps as lt, AuditCheck as m, ArtifactPaneProps as n, StatusBarProps as nt, ApprovalQueueProps as o, DirectoryPane as ot, TaskBoardProps as p, dispatchSessionCreated as q, ApprovalConfidenceStat as r, BannerType as rt, CalendarEvent as s, DirectoryPaneProps as st, ArtifactPane$1 as t, StatusBar as tt, TaskBoard as u, WorkspaceLayout as ut, AgentWorkbench as v, SandboxWorkbenchMarkdownArtifact as w, SandboxWorkbenchCustomArtifact as x, SandboxWorkbench as y, SessionSidebarItem as z };