npm - @usetheo/ui - Versions diffs - 0.1.0-next.0 - Mend

@usetheo/ui 0.1.0-next.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (133) hide show

package/CHANGELOG.md +227 -0
package/LICENSE +201 -0
package/README.md +347 -0
package/dist/fonts/LICENSE-GEIST.txt +92 -0
package/dist/fonts/geist-400.woff2 +0 -0
package/dist/fonts/geist-500.woff2 +0 -0
package/dist/fonts/geist-600.woff2 +0 -0
package/dist/fonts/geist-mono-400.woff2 +0 -0
package/dist/fonts/geist-mono-500.woff2 +0 -0
package/dist/fonts/geist-mono-600.woff2 +0 -0
package/dist/fonts-cdn.css +28 -0
package/dist/fonts.css +75 -0
package/dist/index.d.ts +3063 -0
package/dist/index.js +7746 -0
package/dist/index.js.map +1 -0
package/dist/styles.css +88 -0
package/dist/tokens.css +230 -0
package/package.json +520 -0
package/registry/index.json +700 -0
package/registry/r/agent-composer.json +22 -0
package/registry/r/agent-editor.json +27 -0
package/registry/r/agent-error-card.json +22 -0
package/registry/r/agent-event.json +24 -0
package/registry/r/agent-handoff.json +22 -0
package/registry/r/agent-profile.json +23 -0
package/registry/r/agent-starting-state.json +22 -0
package/registry/r/agent-stream.json +27 -0
package/registry/r/agent-streaming.json +22 -0
package/registry/r/agent-timeline.json +22 -0
package/registry/r/agent-types.json +15 -0
package/registry/r/approval-card.json +25 -0
package/registry/r/artifact-preview.json +22 -0
package/registry/r/attachment-chip.json +24 -0
package/registry/r/audit-log-entry.json +23 -0
package/registry/r/auto-compact-notice.json +22 -0
package/registry/r/avatar.json +23 -0
package/registry/r/badge.json +22 -0
package/registry/r/browser-controls.json +22 -0
package/registry/r/build-log-stream.json +19 -0
package/registry/r/button.json +23 -0
package/registry/r/capability-indicator.json +23 -0
package/registry/r/card.json +22 -0
package/registry/r/chat-composer.json +23 -0
package/registry/r/chat-message.json +21 -0
package/registry/r/chat-thread.json +20 -0
package/registry/r/chat-types.json +15 -0
package/registry/r/checkbox.json +23 -0
package/registry/r/cn.json +19 -0
package/registry/r/command-palette.json +25 -0
package/registry/r/context-card.json +23 -0
package/registry/r/context-window-bar.json +20 -0
package/registry/r/cost-meter.json +22 -0
package/registry/r/created-files-card.json +23 -0
package/registry/r/cron-job-card.json +22 -0
package/registry/r/cron-jobs-list.json +23 -0
package/registry/r/deployment-row.json +23 -0
package/registry/r/dialog.json +23 -0
package/registry/r/diff-viewer.json +20 -0
package/registry/r/domain-config.json +25 -0
package/registry/r/empty-state.json +20 -0
package/registry/r/env-var-editor.json +25 -0
package/registry/r/folder-context-card.json +23 -0
package/registry/r/folder-selector.json +22 -0
package/registry/r/form-field.json +23 -0
package/registry/r/hook-config.json +22 -0
package/registry/r/hook-event-log.json +22 -0
package/registry/r/input.json +19 -0
package/registry/r/intent-selector.json +24 -0
package/registry/r/label.json +22 -0
package/registry/r/lane-board.json +20 -0
package/registry/r/live-region-context.json +16 -0
package/registry/r/login-split.json +20 -0
package/registry/r/mcp-server-card.json +22 -0
package/registry/r/mcp-server-list.json +23 -0
package/registry/r/memory-editor.json +23 -0
package/registry/r/mention-menu.json +23 -0
package/registry/r/metrics-panel.json +22 -0
package/registry/r/mode-types.json +15 -0
package/registry/r/model-card.json +23 -0
package/registry/r/model-selector.json +23 -0
package/registry/r/permission-matrix.json +22 -0
package/registry/r/permission-modal.json +24 -0
package/registry/r/permission-types.json +15 -0
package/registry/r/preview-env-card.json +25 -0
package/registry/r/preview-panel.json +21 -0
package/registry/r/progress-checklist.json +23 -0
package/registry/r/project-card.json +25 -0
package/registry/r/project-switcher.json +22 -0
package/registry/r/quick-action-chips.json +21 -0
package/registry/r/radio-group.json +23 -0
package/registry/r/recent-folders-list.json +22 -0
package/registry/r/rollback-ui.json +24 -0
package/registry/r/rule-card.json +23 -0
package/registry/r/rule-editor.json +28 -0
package/registry/r/rule-types.json +18 -0
package/registry/r/run-stats.json +22 -0
package/registry/r/running-tasks-panel.json +22 -0
package/registry/r/safe-href.json +16 -0
package/registry/r/scroll-area.json +22 -0
package/registry/r/select.json +23 -0
package/registry/r/session-list-item.json +20 -0
package/registry/r/session-timeline.json +22 -0
package/registry/r/sheet.json +24 -0
package/registry/r/sidebar.json +19 -0
package/registry/r/skeleton.json +19 -0
package/registry/r/skill-card.json +24 -0
package/registry/r/skill-editor.json +28 -0
package/registry/r/skills-list.json +23 -0
package/registry/r/social-auth-row.json +21 -0
package/registry/r/steps-rail.json +20 -0
package/registry/r/sub-agent-dispatch.json +22 -0
package/registry/r/switch.json +22 -0
package/registry/r/system-prompt-editor.json +22 -0
package/registry/r/tabs.json +22 -0
package/registry/r/tailwind-preset.json +19 -0
package/registry/r/task-header.json +24 -0
package/registry/r/task-plan.json +22 -0
package/registry/r/task-types.json +15 -0
package/registry/r/terminal-panel.json +22 -0
package/registry/r/textarea.json +19 -0
package/registry/r/theme-provider.json +59 -0
package/registry/r/theme-script.json +18 -0
package/registry/r/theo-ui-provider.json +20 -0
package/registry/r/toast.json +30 -0
package/registry/r/token-usage-chart.json +20 -0
package/registry/r/tokens.json +21 -0
package/registry/r/tool-call-card.json +23 -0
package/registry/r/tool-call.json +22 -0
package/registry/r/tool-result.json +20 -0
package/registry/r/tools-list.json +23 -0
package/registry/r/tooltip.json +22 -0
package/registry/r/topnav.json +22 -0
package/registry/r/types.json +15 -0

package/dist/index.d.ts ADDED Viewed

@@ -0,0 +1,3063 @@
+import { ClassValue } from 'clsx';
+import * as react from 'react';
+import { ReactNode, JSX, ComponentPropsWithoutRef, ComponentProps, ButtonHTMLAttributes, HTMLAttributes, InputHTMLAttributes, ComponentType, SVGProps, TextareaHTMLAttributes, ElementType, OutputHTMLAttributes } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as ToastPrimitive from '@radix-ui/react-toast';
+import { VariantProps } from 'class-variance-authority';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+import * as lucide_react from 'lucide-react';
+/**
+ * Merge Tailwind classes with conflict resolution.
+ * Standard utility across all @usetheo/ui components.
+ */
+declare function cn(...inputs: ClassValue[]): string;
+/**
+ * Theo UI — Theme types.
+ *
+ * A Theme is a frozen bundle of CSS-var values that the runtime can swap by
+ * setting `data-theme="<name>"` on `<html>`. The structure mirrors what lives
+ * in tokens.css so themes can be merged without ambiguity.
+ */
+type ThemeMode = "light" | "dark";
+interface ColorScale {
+    background: string;
+    foreground: string;
+    card: string;
+    "card-foreground": string;
+    popover: string;
+    "popover-foreground": string;
+    primary: string;
+    "primary-deep": string;
+    "primary-glow": string;
+    "primary-foreground": string;
+    secondary: string;
+    "secondary-foreground": string;
+    accent: string;
+    "accent-deep": string;
+    "accent-foreground": string;
+    muted: string;
+    "muted-foreground": string;
+    border: string;
+    input: string;
+    ring: string;
+    success: string;
+    "success-foreground": string;
+    warning: string;
+    "warning-foreground": string;
+    destructive: string;
+    "destructive-foreground": string;
+    info: string;
+    "info-foreground": string;
+}
+interface ThemeFonts {
+    /** Display headlines (h1-h3, hero text). */
+    display: string;
+    /** Body / UI text. */
+    body: string;
+    /** Code, mono, paths, timestamps. */
+    mono: string;
+}
+interface Theme {
+    /** Stable id, used in `data-theme`. */
+    name: string;
+    /** Human-readable label for theme switchers. */
+    label: string;
+    /** Optional short description shown in switchers. */
+    description?: string;
+    fonts: ThemeFonts;
+    light: ColorScale;
+    dark: ColorScale;
+    /**
+     * Optional URL(s) to fetch before applying. The provider injects a `<link>`
+     * tag once per URL to load remote fonts. Already-injected URLs are deduped.
+     */
+    fontUrls?: string[];
+}
+interface ThemeContextValue {
+    /** Active theme (full descriptor). */
+    theme: Theme;
+    /** Active mode: light or dark. */
+    mode: ThemeMode;
+    /** All available themes. */
+    themes: Theme[];
+    /** Swap the active theme by name. */
+    setTheme: (name: string) => void;
+    /** Set light/dark explicitly. */
+    setMode: (mode: ThemeMode) => void;
+    /** Toggle light <> dark. */
+    toggleMode: () => void;
+    /** Register an additional theme at runtime. */
+    registerTheme: (theme: Theme) => void;
+}
+interface ThemeProviderProps {
+    children: ReactNode;
+    /**
+     * Theme to start with. Must match the `name` of an entry in `themes`.
+     * Defaults to `"violet-forge"` for backward compat — if you don't pass
+     * `violet-forge` in `themes`, set this prop explicitly.
+     */
+    defaultTheme?: string;
+    /** Mode to start with. Defaults to `"dark"` (library is dark-first). */
+    defaultMode?: ThemeMode;
+    /**
+     * Available themes. **Required**: ThemeProvider does not auto-include any
+     * built-in theme since v0.1.0-next.0 — pass `builtinThemes` for all three
+     * Violet Forge defaults, or your own array for a slimmer bundle.
+     *
+     * Migration: consumers previously calling `<ThemeProvider>` without this
+     * prop now must pass `themes={builtinThemes}` (or use `<TheoUIProvider>`
+     * which defaults to `builtinThemes` for you).
+     */
+    themes: Theme[];
+    /**
+     * Persist selection in localStorage under this key. Pass `null` to disable.
+     * Default: "theo-ui:theme".
+     */
+    storageKey?: string | null;
+}
+/**
+ * ThemeProvider — central registry + runtime switcher for Theo themes.
+ *
+ * Behavior:
+ *   1. On mount, injects a `<style id="theo-ui-theme-vars">` element with
+ *      one CSS block per theme (`[data-theme="<name>"] { --token: ... }`).
+ *   2. Sets `data-theme` and `data-mode` on `<html>` so any element nested
+ *      below inherits the right tokens (the Tailwind config consumes them).
+ *   3. Lazy-loads theme font URLs by injecting `<link rel="stylesheet">`.
+ *   4. Optionally persists choice in localStorage.
+ */
+declare function ThemeProvider({ children, defaultTheme, defaultMode, themes: themesProp, storageKey, }: ThemeProviderProps): JSX.Element;
+/**
+ * useTheme — access theme state from any component inside <ThemeProvider>.
+ * Throws if used outside the provider — fail-fast.
+ */
+declare function useTheme(): ThemeContextValue;
+/**
+ * ThemeScript — inline `<script>` for SSR-safe theme initialization.
+ *
+ * Renders a synchronous script that runs BEFORE React hydration. It reads the
+ * persisted theme + mode from localStorage (or falls back to the defaults) and
+ * sets `data-theme` / `data-mode` on `<html>`, plus the `.dark` class when
+ * mode is dark. This eliminates FOUC and avoids hydration mismatch warnings
+ * when the user's persisted choice differs from the SSR defaults.
+ *
+ * Place this in `<head>` ABOVE `<body>`. The component does not need to live
+ * inside `<ThemeProvider>`.
+ *
+ * Security: every interpolated value is passed through `safe()`, which both
+ * `JSON.stringify`s the value AND escapes `<` to `<`. The `<` escape is
+ * REQUIRED because `JSON.stringify` alone does NOT escape `/`, so a payload
+ * like `"</script><script>alert(1)</script>"` would otherwise break out of
+ * the inline `<script>` tag even though it stays inside a JS string literal.
+ * (The browser tokenizes `</script>` at the HTML layer before JS parses.)
+ *
+ * Example (Next.js App Router): see docs/design-system.md → SSR section.
+ * Pass `defaultTheme` and `defaultMode` to align with the consumer's
+ * preferred initial state. Always wrap the root in `<html
+ * suppressHydrationWarning>` to silence the expected one-render diff.
+ */
+interface ThemeScriptProps {
+    /** Theme name to apply when no persisted value exists. Default `"violet-forge"`. */
+    defaultTheme?: string;
+    /** Mode to apply when no persisted value exists. Default `"dark"`. */
+    defaultMode?: ThemeMode;
+    /**
+     * localStorage namespace. Must match the `storageKey` passed to
+     * `<ThemeProvider>`. Default `"theo-ui:theme"`. Pass `null` to disable
+     * persistence reads (the script will always apply defaults).
+     */
+    storageKey?: string | null;
+}
+declare function ThemeScript({ defaultTheme, defaultMode, storageKey, }: ThemeScriptProps): JSX.Element;
+interface ThemeSwitcherProps {
+    className?: string;
+    /** If true, renders mode toggle inline next to the theme menu. */
+    showModeToggle?: boolean;
+}
+/**
+ * ThemeSwitcher — drop-in theme + mode picker.
+ *
+ * Two affordances:
+ *   - Palette dropdown lists all registered themes with the active marked.
+ *   - Optional sun/moon button toggles light/dark.
+ *
+ * Stateless wrt itself — pulls state from `useTheme()`.
+ */
+declare function ThemeSwitcher({ className, showModeToggle }: ThemeSwitcherProps): JSX.Element;
+/**
+ * Violet Forge — the default Theo theme.
+ *
+ * Identity: Theo violet primary (#7C3AED), burnt sienna accent (#C96442),
+ * Vercel-style neutral surfaces (pure white light / charcoal dark),
+ * Geist Sans + Geist Mono throughout.
+ *
+ * Source of truth for `data-theme` overrides. Values mirror
+ * src/styles/tokens.css for the default `:root`.
+ */
+declare const violetForge: Theme;
+/**
+ * Classic Paper — light-primary with deep-navy dark mirror; Inter + JetBrains Mono.
+ *
+ * Identity: warm paper background, deep navy foreground, indigo primary
+ * (closer to traditional dashboard SaaS), Inter throughout. Maximizes
+ * legibility and familiarity — use when reading endurance > differentiation.
+ *
+ * Provides a full `dark` palette mirror so consumers toggling `.dark` still
+ * get a coherent surface (it is not "light-only" by accident).
+ */
+declare const classicPaper: Theme;
+/**
+ * Aurora Terminal — dark-first, cyan-aurora primary, Geist Mono everywhere.
+ *
+ * Identity: deep oceanic background, cyan-aurora primary, aurora-pink accent.
+ * Headers use Geist with heavier tracking; body uses Geist Mono for full
+ * "developer console" feel. Suits CLI/devtools showcase.
+ */
+declare const auroraTerminal: Theme;
+/**
+ * All themes bundled with Theo UI. Pass to `<ThemeProvider themes={builtinThemes}>`
+ * if you want all of them available out of the box.
+ */
+declare const builtinThemes: Theme[];
+/**
+ * Toast — transient notification built on Radix Toast.
+ *
+ * Composition: app mounts <Toaster /> once. Components call `toast(...)` via
+ * the `useToast()` hook (see toaster.tsx). The look is theme-aware: status
+ * icon coloured by --primary/--success/--warning/--destructive; the body
+ * card uses --popover surface.
+ *
+ * Variants:
+ *   - default (neutral)
+ *   - info (primary tint)
+ *   - success (deploy ok, action completed)
+ *   - warning (queued, permission requested)
+ *   - destructive (failed, fatal)
+ */
+declare const toastVariants: (props?: ({
+    variant?: "success" | "warning" | "destructive" | "info" | "default" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type ToastVariant = NonNullable<VariantProps<typeof toastVariants>["variant"]>;
+interface ToastProps extends ComponentPropsWithoutRef<typeof ToastPrimitive.Root>, VariantProps<typeof toastVariants> {
+}
+declare const Toast: react.ForwardRefExoticComponent<ToastProps & react.RefAttributes<HTMLLIElement>> & {
+    Title: react.ForwardRefExoticComponent<Omit<ToastPrimitive.ToastTitleProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    Description: react.ForwardRefExoticComponent<Omit<ToastPrimitive.ToastDescriptionProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    Close: react.ForwardRefExoticComponent<Omit<ToastPrimitive.ToastCloseProps & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+    Action: react.ForwardRefExoticComponent<Omit<ToastPrimitive.ToastActionProps & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+    Provider: react.FC<ToastPrimitive.ToastProviderProps>;
+    Viewport: react.ForwardRefExoticComponent<ToastPrimitive.ToastViewportProps & react.RefAttributes<HTMLOListElement>>;
+};
+interface ToastDescriptor {
+    id: string;
+    title?: ReactNode;
+    description?: ReactNode;
+    variant?: ToastVariant;
+    /** Auto-dismiss in ms. Default 5000. Pass `null` for sticky. */
+    duration?: number | null;
+    action?: {
+        label: ReactNode;
+        onClick: () => void;
+    };
+}
+interface ToastContextValue {
+    toast: (descriptor: Omit<ToastDescriptor, "id">) => string;
+    dismiss: (id: string) => void;
+}
+interface ToasterProps {
+    children: ReactNode;
+    /** Toast viewport position. Default bottom-right. */
+    position?: "top-right" | "top-left" | "bottom-right" | "bottom-left";
+    className?: string;
+}
+/**
+ * Toaster — mount once at the app root. Wraps children in a Radix Toast
+ * Provider + Viewport and exposes the `useToast()` hook for descendants.
+ */
+declare function Toaster({ children, position, className }: ToasterProps): JSX.Element;
+/**
+ * useToast — fire toasts from anywhere inside <Toaster>.
+ *
+ * Example:
+ *   const { toast } = useToast();
+ *   toast({ title: "Deployed", variant: "success" });
+ */
+declare function useToast(): ToastContextValue;
+/**
+ * TheoUIProvider — primary entry point composing `<ThemeProvider>` and
+ * `<Toaster>` in the correct order with sensible defaults.
+ *
+ * Recommended for consumer apps to avoid hand-wiring the provider stack.
+ * Equivalent to:
+ *
+ *   <ThemeProvider themes={builtinThemes} {...theme}>
+ *     <Toaster {...toaster}>{children}</Toaster>
+ *   </ThemeProvider>
+ *
+ * Notes:
+ *   - Since v0.1.0-next.0, `<ThemeProvider>` requires the `themes` prop
+ *     (T2.5 decoupling). `<TheoUIProvider>` defaults it to `builtinThemes`
+ *     to preserve "works out of the box" DX. Pass `theme.themes` to override.
+ *   - The `"use client"` directive is required for Next.js App Router (RSC)
+ *     because `<ThemeProvider>` uses React state and effects internally.
+ *   - `<Tooltip>` provider stays per-instance (Radix recommendation) — this
+ *     wrapper does NOT introduce a global tooltip context.
+ *   - `<ThemeProvider>` and `<Toaster>` remain independently exported for
+ *     consumers who want bespoke control.
+ *
+ * SSR:
+ *   - Place `<ThemeScript>` in `<head>` to avoid FOUC + hydration mismatch.
+ *   - Wrap `<html lang="en" suppressHydrationWarning>`.
+ *
+ * @example
+ *   import { TheoUIProvider } from "@usetheo/ui";
+ *
+ *   export default function App({ children }) {
+ *     return <TheoUIProvider>{children}</TheoUIProvider>;
+ *   }
+ */
+interface TheoUIProviderProps {
+    children: ReactNode;
+    /** Pass-through props for the inner `<ThemeProvider>`. Optional. */
+    theme?: Omit<ComponentProps<typeof ThemeProvider>, "children" | "themes"> & {
+        /** Override the default theme set (defaults to `builtinThemes`). */
+        themes?: ComponentProps<typeof ThemeProvider>["themes"];
+    };
+    /** Pass-through props for the inner `<Toaster>`. */
+    toaster?: Omit<ComponentProps<typeof Toaster>, "children">;
+}
+declare function TheoUIProvider({ children, theme, toaster }: TheoUIProviderProps): JSX.Element;
+declare namespace TheoUIProvider {
+    var displayName: string;
+}
+type MessageRole = "user" | "assistant" | "system";
+interface Attachment {
+    id: string;
+    name: string;
+    size?: string;
+    type?: string;
+}
+interface Message {
+    id: string;
+    role: MessageRole;
+    content: string | ReactNode;
+    timestamp?: string;
+    /**
+     * Model that produced this message (assistant role only).
+     * e.g. "Opus 4.6", "Sonnet 4.6", "GPT-5.4".
+     */
+    model?: string;
+    attachments?: Attachment[];
+}
+type AgentEventType = "command" | "file_read" | "file_write" | "edit" | "lint" | "typecheck" | "build" | "tool";
+type AgentEventStatus = "pending" | "running" | "success" | "failed";
+interface AgentEvent$1 {
+    id: string;
+    type: AgentEventType;
+    label: string;
+    /** File path when the event is file-related. */
+    path?: string;
+    /** Diff stats for edit/write events. */
+    diff?: {
+        added: number;
+        removed: number;
+    };
+    status: AgentEventStatus;
+    timestamp?: string;
+    /** Optional expandable detail (e.g. command output, diff snippet). */
+    detail?: ReactNode;
+}
+type PermissionOperation = "read" | "write" | "delete";
+type PermissionDecision = "denied" | "allowed_once" | "always_allowed";
+interface PermissionRequest {
+    /** Absolute path to the resource (file or folder). */
+    path: string;
+    /** Operations the agent wants to perform on the resource. */
+    operations: PermissionOperation[];
+}
+type TaskStatus = "idle" | "permission_required" | "starting" | "running" | "verifying" | "completed" | "failed";
+type TaskStepStatus = "pending" | "running" | "done" | "skipped";
+interface TaskStep {
+    id: string;
+    label: string;
+    status: TaskStepStatus;
+    /** 0..1 progress for in-flight steps. */
+    progress?: number;
+}
+/**
+ * Button — primitive action element in the Violet Forge design system.
+ *
+ * Variants:
+ *   - primary    Theo violet fill, glow on hover (signature)
+ *   - secondary  surface with hairline border
+ *   - accent     burnt-sienna fill, celebratory actions
+ *   - ghost      transparent, hover lifts surface
+ *   - link       text-only, primary color, underline on hover
+ *   - destructive  for irreversible actions
+ *
+ * Sizes: sm (32px) · md (40px, default) · lg (48px) · icon (square 40px)
+ *
+ * `asChild` swaps the root for the consumer's element (Radix Slot pattern).
+ */
+declare const buttonVariants: (props?: ({
+    variant?: "primary" | "secondary" | "accent" | "destructive" | "link" | "ghost" | null | undefined;
+    size?: "sm" | "md" | "lg" | "icon" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+/**
+ * Badge — small status / tag indicator.
+ *
+ * Variants:
+ *   - default     muted surface, hairline border
+ *   - primary     violet outline + soft violet bg
+ *   - accent      burnt sienna (celebration / pro / beta)
+ *   - success     deploy succeeded
+ *   - warning     attention needed
+ *   - destructive failed
+ *   - outline     transparent, just border
+ *
+ * Status dots are inlined via `<Badge.Dot />` for things like "Building…",
+ * "Running", "Failed" rows in deployment lists.
+ */
+declare const badgeVariants: (props?: ({
+    variant?: "primary" | "accent" | "success" | "warning" | "destructive" | "default" | "outline" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface BadgeProps extends HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {
+}
+declare const Badge: react.ForwardRefExoticComponent<BadgeProps & react.RefAttributes<HTMLSpanElement>>;
+interface BadgeDotProps extends HTMLAttributes<HTMLSpanElement> {
+    pulse?: boolean;
+    tone?: "primary" | "accent" | "success" | "warning" | "destructive" | "muted";
+}
+declare const Dot: react.ForwardRefExoticComponent<BadgeDotProps & react.RefAttributes<HTMLSpanElement>>;
+declare const BadgeWithDot: typeof Badge & {
+    Dot: typeof Dot;
+};
+interface TitleProps extends HTMLAttributes<HTMLHeadingElement> {
+    /**
+     * When true, renders the child element with the Card.Title styles applied
+     * (Radix Slot pattern). Use to swap the default `<h3>` for `<h1>` / `<h2>`
+     * when the heading hierarchy requires it.
+     */
+    asChild?: boolean;
+}
+declare const Card: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>> & {
+    Header: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+    Title: react.ForwardRefExoticComponent<TitleProps & react.RefAttributes<HTMLHeadingElement>>;
+    Description: react.ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & react.RefAttributes<HTMLParagraphElement>>;
+    Body: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+    Footer: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+};
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+}
+/**
+ * Input — text input primitive.
+ *
+ * Violet Forge specifics:
+ *   - height 40px (h-10) matching default Button md.
+ *   - rounded-md (6px) — slightly less than buttons to differentiate.
+ *   - focus uses violet ring (--ring).
+ *   - placeholder uses --muted-foreground.
+ */
+declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
+interface ContentProps$1 extends ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+    hideCloseButton?: boolean;
+}
+declare const Dialog: react.FC<DialogPrimitive.DialogProps> & {
+    Trigger: react.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+    Close: react.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & react.RefAttributes<HTMLButtonElement>>;
+    Content: react.ForwardRefExoticComponent<ContentProps$1 & react.RefAttributes<HTMLDivElement>>;
+    Overlay: react.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    Header: {
+        ({ className, ...props }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+        displayName: string;
+    };
+    Body: {
+        ({ className, ...props }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+        displayName: string;
+    };
+    Footer: {
+        ({ className, ...props }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+        displayName: string;
+    };
+    Title: react.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & react.RefAttributes<HTMLHeadingElement>, "ref"> & react.RefAttributes<HTMLHeadingElement>>;
+    Description: react.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & react.RefAttributes<HTMLParagraphElement>, "ref"> & react.RefAttributes<HTMLParagraphElement>>;
+};
+declare const Tabs: react.ForwardRefExoticComponent<TabsPrimitive.TabsProps & react.RefAttributes<HTMLDivElement>> & {
+    List: react.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    Trigger: react.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+    Content: react.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+};
+/**
+ * Tooltip — built on Radix Tooltip.
+ *
+ * Visual: dark surface in light mode (and inverse in dark) with rounded-md,
+ * shadow-md, text-body-sm. 8px delay-show default.
+ *
+ * Wrap your app in <Tooltip.Provider> once (or use the default delayDuration here).
+ */
+declare const Provider: react.FC<TooltipPrimitive.TooltipProviderProps>;
+declare const Root: react.FC<TooltipPrimitive.TooltipProps>;
+declare const Trigger: react.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+declare const Content$1: react.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+interface TooltipProps extends ComponentPropsWithoutRef<typeof TooltipPrimitive.Root> {
+    label: ReactNode;
+    side?: "top" | "right" | "bottom" | "left";
+    align?: "start" | "center" | "end";
+    children: ReactNode;
+}
+/**
+ * Shorthand: <Tooltip label="…"><Button>…</Button></Tooltip>
+ * Wraps Provider + Root + Trigger asChild + Content for the common case.
+ * For advanced usage (controlled state, custom content), use Tooltip.Root etc. directly.
+ */
+declare const Tooltip: ({ label, side, align, delayDuration, children, ...rootProps }: TooltipProps) => ReturnType<typeof Provider>;
+declare const TooltipWithStatics: typeof Tooltip & {
+    Provider: typeof Provider;
+    Root: typeof Root;
+    Trigger: typeof Trigger;
+    Content: typeof Content$1;
+};
+/**
+ * ScrollArea — custom scroller with Violet Forge styling.
+ *
+ * Built on Radix ScrollArea so the native scrollbar is always hidden and the
+ * custom thumb stays consistent across Chrome/Firefox/Safari/macOS-trackpad.
+ *
+ * Visual:
+ *   - track is transparent, only the thumb is visible.
+ *   - thumb is `--primary` at 25% opacity by default; on hover, 45% with violet glow.
+ *   - active drag bumps to 60%.
+ *   - the rounded full pill thumb plays well with the brutalist border language
+ *     but stays subtle (1.5px wide on rest, 3px on hover).
+ *
+ * Modes (via `type`):
+ *   - "hover" (default)  — scrollbar fades in on hover/focus, otherwise hidden.
+ *   - "always"           — scrollbar always visible.
+ *   - "auto"             — scrollbar visible only when content overflows.
+ *   - "scroll"           — Radix-managed: visible only while scrolling.
+ */
+interface ScrollAreaProps extends ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> {
+    /**
+     * Optional override for which scrollbar(s) to render.
+     * Defaults: vertical only. Set to "both" for grids/tables with overflow-x.
+     */
+    orientation?: "vertical" | "horizontal" | "both";
+    /**
+     * Thickness of the scrollbar. Default "thin" (2.5px → 3.5px on hover).
+     * Use "regular" (8px) for content where the scrollbar should be a more prominent target.
+     */
+    size?: "thin" | "regular";
+}
+interface ScrollBarProps extends ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar> {
+    size?: "thin" | "regular";
+}
+declare const ScrollArea: react.ForwardRefExoticComponent<ScrollAreaProps & react.RefAttributes<HTMLDivElement>> & {
+    Bar: react.ForwardRefExoticComponent<ScrollBarProps & react.RefAttributes<HTMLDivElement>>;
+};
+/**
+ * Skeleton — placeholder block shown while content is loading.
+ *
+ * Uses --muted as base + a subtle shimmer that respects the violet theme.
+ * Compose multiple Skeletons to mirror your component layout while loading.
+ *
+ * Accessibility (LOW-004): the default `role="status"` + `aria-live="polite"`
+ * announces "Loading" to screen readers. In loops or grids where many
+ * Skeletons mount simultaneously, this can be noisy. Override per-instance
+ * with `aria-live="off"` and/or `aria-hidden` when only one container-level
+ * loading announcement is desired:
+ *
+ *   <div role="status" aria-live="polite" aria-label="Loading deployments">
+ *     {placeholders.map(id => (
+ *       <Skeleton key={id} aria-live="off" aria-hidden="true" className="h-8" />
+ *     ))}
+ *   </div>
+ */
+declare const Skeleton: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+/**
+ * Avatar — user/team avatar with safe fallback to initials.
+ *
+ * Composition:
+ *   <Avatar size="md">
+ *     <Avatar.Image src="…" alt="…" />
+ *     <Avatar.Fallback>AA</Avatar.Fallback>
+ *   </Avatar>
+ *
+ * Built on Radix Avatar (handles image load failures → fallback automatically).
+ * Sizes scale on the root; fallback inherits the size's text scale.
+ */
+declare const avatarVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | "xs" | "xl" | null | undefined;
+    tone?: "primary" | "accent" | "muted" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface AvatarProps extends ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>, VariantProps<typeof avatarVariants> {
+}
+declare const Avatar: react.ForwardRefExoticComponent<AvatarProps & react.RefAttributes<HTMLSpanElement>> & {
+    Image: react.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & react.RefAttributes<HTMLImageElement>, "ref"> & react.RefAttributes<HTMLImageElement>>;
+    Fallback: react.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & react.RefAttributes<HTMLSpanElement>, "ref"> & react.RefAttributes<HTMLSpanElement>>;
+};
+/**
+ * Label — form field label built on Radix Label.
+ *
+ * Behaviors:
+ *   - Clicking the label focuses the associated `htmlFor` input.
+ *   - Adds a small red asterisk when `required` is set.
+ *   - Inherits disabled visuals from the wrapper (`peer-disabled`).
+ */
+interface LabelProps extends ComponentPropsWithoutRef<typeof LabelPrimitive.Root> {
+    required?: boolean;
+}
+declare const Label: react.ForwardRefExoticComponent<LabelProps & react.RefAttributes<HTMLLabelElement>>;
+interface FormFieldProps extends HTMLAttributes<HTMLDivElement> {
+    /** Optional explicit id override. */
+    id?: string;
+    /** Marks the field as invalid; switches Hint → Error and toggles aria. */
+    invalid?: boolean;
+}
+interface FormFieldLabelProps extends ComponentPropsWithoutRef<typeof LabelPrimitive.Root> {
+    required?: boolean;
+}
+declare const FormField: react.ForwardRefExoticComponent<FormFieldProps & react.RefAttributes<HTMLDivElement>> & {
+    Label: react.ForwardRefExoticComponent<FormFieldLabelProps & react.RefAttributes<HTMLLabelElement>>;
+    Control: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+    Hint: react.ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & react.RefAttributes<HTMLParagraphElement>>;
+    Error: react.ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & react.RefAttributes<HTMLParagraphElement>>;
+};
+/**
+ * IconComponent — shape compatible with both lucide-react icons and custom React SVG components.
+ *
+ * Centralizing this here avoids TS2322 noise from `exactOptionalPropertyTypes` when mapping
+ * icons through Record<...> structures.
+ */
+type IconComponent = ComponentType<SVGProps<SVGSVGElement> & {
+    className?: string;
+}>;
+interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /** Icon shown above the title. */
+    icon?: IconComponent;
+    title: ReactNode;
+    description?: ReactNode;
+    /** Optional action slot (typically <Button>). */
+    action?: ReactNode;
+    /** Hint shown above the title (e.g. uppercase eyebrow). */
+    eyebrow?: ReactNode;
+    /** Bordered dashed surface (placeholder vibe). Default true. */
+    dashed?: boolean;
+}
+/**
+ * EmptyState — visual placeholder for empty lists / first-run screens.
+ *
+ * Composition: icon + eyebrow + title + description + action. All slots are
+ * optional except title.
+ */
+declare const EmptyState: react.ForwardRefExoticComponent<EmptyStateProps & react.RefAttributes<HTMLDivElement>>;
+/**
+ * Select — styled wrapper around Radix Select.
+ *
+ * Composition:
+ *   <Select value={value} onValueChange={setValue}>
+ *     <Select.Trigger>
+ *       <Select.Value placeholder="Pick…" />
+ *     </Select.Trigger>
+ *     <Select.Content>
+ *       <Select.Group>
+ *         <Select.Label>Group</Select.Label>
+ *         <Select.Item value="a">A</Select.Item>
+ *       </Select.Group>
+ *     </Select.Content>
+ *   </Select>
+ *
+ * Trigger matches Input height + violet focus ring. Content uses popover
+ * surface with check on the selected item.
+ */
+declare const SelectTrigger: react.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+declare const SelectContent: react.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+declare const SelectLabel: react.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+declare const SelectItem: react.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+declare const SelectSeparator: react.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+declare const Select: typeof SelectPrimitive.Root & {
+    Trigger: typeof SelectTrigger;
+    Value: typeof SelectPrimitive.Value;
+    Content: typeof SelectContent;
+    Group: typeof SelectPrimitive.Group;
+    Label: typeof SelectLabel;
+    Item: typeof SelectItem;
+    Separator: typeof SelectSeparator;
+};
+/**
+ * Checkbox — built on Radix Checkbox.
+ *
+ * Supports tri-state via `checked="indeterminate"`. Violet fill when on,
+ * border-only when off. Themed via tokens (--primary, --background).
+ */
+declare const Checkbox: react.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+declare const RadioGroup: react.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>> & {
+    Item: react.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+};
+/**
+ * Switch — built on Radix Switch. Used for binary toggles (autoaccept,
+ * dark mode preview, feature flags).
+ *
+ * Off-state uses --muted, on-state uses --primary with a subtle glow shadow
+ * to mark "this is active" in the violet brand language.
+ */
+declare const Switch: react.ForwardRefExoticComponent<Omit<SwitchPrimitive.SwitchProps & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+}
+/**
+ * Textarea — multi-line input mirror of Input.
+ *
+ * Matches Input visuals (violet focus ring, --input border, --card bg).
+ * Default minimum height of 96px; consumer can override via className.
+ */
+declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
+interface ContextWindowBarProps extends HTMLAttributes<HTMLDivElement> {
+    /** Tokens currently used in the context window. */
+    used: number;
+    /** Model's total context capacity (e.g. 200_000, 1_000_000). */
+    total: number;
+    /** Optional secondary label rendered on the right (e.g. model name). */
+    trailing?: ReactNode;
+    /** Optional title shown above the bar. */
+    label?: ReactNode;
+    /** Compact mode hides numbers and label; just the bar. */
+    compact?: boolean;
+    /**
+     * Override warning thresholds (0..1). Defaults: warn 0.7, danger 0.9.
+     */
+    warnAt?: number;
+    dangerAt?: number;
+}
+/**
+ * ContextWindowBar — shows how much of the model's context window has been
+ * consumed. Color transitions: success → warning → destructive past thresholds.
+ *
+ * Critical for transparency: a user should always be able to glance at this
+ * and know if the conversation is about to hit the cap.
+ */
+declare const ContextWindowBar: react.ForwardRefExoticComponent<ContextWindowBarProps & react.RefAttributes<HTMLDivElement>>;
+type CapabilityState = "enabled" | "disabled" | "blocked" | "active";
+interface Capability {
+    id: string;
+    /** Visible label. */
+    label: ReactNode;
+    /** Optional icon override. */
+    icon?: IconComponent;
+    /** Default state. */
+    state?: CapabilityState;
+    /** Tooltip / longer description. */
+    hint?: ReactNode;
+}
+interface CapabilityIndicatorProps extends HTMLAttributes<HTMLDivElement> {
+    capabilities: Capability[];
+}
+declare const CapabilityIndicator: react.ForwardRefExoticComponent<CapabilityIndicatorProps & react.RefAttributes<HTMLUListElement>>;
+/** Common capability presets — re-use these so apps don't reinvent labels. */
+declare const capabilityPresets: {
+    read: {
+        readonly id: "read";
+        readonly label: "Read files";
+        readonly icon: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    };
+    write: {
+        readonly id: "write";
+        readonly label: "Write files";
+        readonly icon: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    };
+    delete: {
+        readonly id: "delete";
+        readonly label: "Delete files";
+        readonly icon: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    };
+    bash: {
+        readonly id: "bash";
+        readonly label: "Run shell";
+        readonly icon: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    };
+    network: {
+        readonly id: "network";
+        readonly label: "Network";
+        readonly icon: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    };
+    deploy: {
+        readonly id: "deploy";
+        readonly label: "Deploy";
+        readonly icon: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    };
+    llm: {
+        readonly id: "llm";
+        readonly label: "Sub-agents";
+        readonly icon: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    };
+};
+type ToolEnablement = "enabled" | "ask" | "denied";
+interface ToolEntry {
+    id: string;
+    name: string;
+    description?: ReactNode;
+    icon?: IconComponent;
+    enablement?: ToolEnablement;
+    /**
+     * Source of the tool: built-in, plugin/skill, or MCP server name.
+     */
+    source?: string;
+    /** Optional badge text (e.g. "destructive", "experimental"). */
+    badge?: ReactNode;
+}
+interface ToolsListProps extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "onChange"> {
+    tools: ToolEntry[];
+    /** Title above the list. */
+    title?: ReactNode;
+    /**
+     * Fires when the consumer toggles a tool's enablement state.
+     * Cycle: enabled → ask → denied → enabled.
+     */
+    onEnablementChange?: (id: string, next: ToolEnablement) => void;
+}
+/**
+ * ToolsList — surface every tool the agent could call, with its enablement
+ * state. Click the chip to cycle: Allowed → Ask → Denied.
+ */
+declare const ToolsList: react.ForwardRefExoticComponent<ToolsListProps & react.RefAttributes<HTMLDivElement>>;
+type PermissionDecisionKind = "allow" | "ask" | "deny";
+interface PermissionRule {
+    id: string;
+    /** Tool the rule applies to. Use "*" for any. */
+    tool: string;
+    /** Glob path it applies to. Use "*" for any. */
+    path: string;
+    decision: PermissionDecisionKind;
+    /** Optional rationale shown as helper text. */
+    note?: string;
+}
+interface PermissionMatrixProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    rules: PermissionRule[];
+    title?: ReactNode;
+    /**
+     * Available tools shown in the add form. Pass `undefined` (or omit) — or an
+     * empty array — to hide the add form entirely. The form only renders when
+     * `onAdd` is provided AND `toolOptions` has at least one entry.
+     */
+    toolOptions?: string[];
+    onAdd?: (rule: Omit<PermissionRule, "id">) => void;
+    onRemove?: (id: string) => void;
+    onDecisionChange?: (id: string, decision: PermissionDecisionKind) => void;
+}
+/**
+ * PermissionMatrix — tool × path × decision grid for fine-grained access
+ * control. Used as the "permissions" tab in the agent settings.
+ *
+ * One PermissionRule per row. Click the decision pill to cycle Allow → Ask → Deny.
+ *
+ * Design decision (2026-05-14): PermissionMatrix stays in `primitives/`
+ * — not `composites/` — even though it renders inputs and a select. The native
+ * `<input>` / `<select>` elements use Theo design tokens directly (border-input,
+ * ring, font-mono) so visual parity with `Input` / `Select` primitives is
+ * preserved. Reason for keeping it primitive: a consumer installing
+ * `permission-matrix` from the registry gets a single self-contained file with
+ * no transitive Theo dependencies — opposite trade-off from `EnvVarEditor`
+ * which is intentionally a composite. Both shapes are valid; we ship one of
+ * each so consumers can pick the dependency profile that fits their app.
+ */
+declare const PermissionMatrix: react.ForwardRefExoticComponent<PermissionMatrixProps & react.RefAttributes<HTMLDivElement>>;
+/**
+ * Mode — top-level density / domain the agent session is operating in.
+ *
+ * `chat`  — conversational Q&A, lean UI.
+ * `code`  — code agent: read/plan/edit/verify inside the repo.
+ * `infra` — operate the deployed system: metrics, deploys, logs, rollback.
+ *
+ * Used everywhere resources can be scoped per-mode (Skills, Agents, Rules,
+ * SystemPrompt overrides, Sessions, …). `modes?: Mode[]` on a resource means
+ * "only available in these modes"; omitting `modes` means "available
+ * globally".
+ */
+type Mode = "chat" | "code" | "infra";
+declare const ALL_MODES: ReadonlyArray<Mode>;
+/** Friendly label per mode — render in chips, headers, badges. */
+declare const MODE_LABEL: Record<Mode, string>;
+type SkillSource = "builtin" | "project" | "user" | "plugin";
+type SkillState = "enabled" | "disabled";
+interface Skill {
+    id: string;
+    name: string;
+    description?: ReactNode;
+    /** Where the skill comes from. */
+    source: SkillSource;
+    /** Optional tools the skill is allowed to use (informational). */
+    allowedTools?: string[];
+    /** Optional trigger keywords / patterns for discovery. */
+    triggers?: string[];
+    state?: SkillState;
+    /** Modes this skill is visible in. Omit / empty = global (all modes). */
+    modes?: Mode[];
+}
+interface SkillCardProps extends Omit<HTMLAttributes<HTMLDivElement>, "onToggle"> {
+    skill: Skill;
+    onToggle?: (id: string, next: SkillState) => void;
+}
+/**
+ * SkillCard — single skill entry showing what it does, where it came from,
+ * and which tools it needs. Toggle to enable/disable for the current session.
+ */
+declare const SkillCard: react.ForwardRefExoticComponent<SkillCardProps & react.RefAttributes<HTMLDivElement>>;
+/**
+ * Rule — a user-authored behavior instruction injected into the system prompt.
+ *
+ * Equivalent to a single markdown file under `.claude/rules/` in Claude Code:
+ * short imperative text the user writes once and the agent follows always.
+ * Rules can be scoped (`global` = applies to every session; `project` = only
+ * inside the current workspace) and toggled on/off without deletion.
+ */
+type RuleScope = "global" | "project";
+type RuleState = "enabled" | "disabled";
+interface Rule {
+    id: string;
+    /** Short title shown in the list. */
+    title: string;
+    /** Markdown body — the actual instruction injected into the prompt. */
+    body: string;
+    /** Where this rule applies. */
+    scope: RuleScope;
+    /** Whether the rule is currently active. */
+    state: RuleState;
+    /** Optional tags for grouping ("testing", "style", "security"). */
+    tags?: string[];
+    /** Modes this rule applies to. Omit / empty = global (every mode). */
+    modes?: Mode[];
+    /** ISO timestamp / friendly label of last edit. */
+    updatedAt?: string;
+}
+interface RuleCardProps extends Omit<HTMLAttributes<HTMLElement>, "title" | "onSelect" | "onToggle"> {
+    rule: Rule;
+    /** Click on the card body — typically opens detail/edit view. */
+    onSelect?: (id: string) => void;
+    /** Click on the edit pencil. Defaults to onSelect if omitted. */
+    onEdit?: (id: string) => void;
+    /** Click on the trash icon. Renders the icon only when provided. */
+    onDelete?: (id: string) => void;
+    /** Toggle enabled/disabled. Renders the switch-like dot only when provided. */
+    onToggle?: (id: string, next: RuleState) => void;
+}
+declare const RuleCard: react.ForwardRefExoticComponent<RuleCardProps & react.RefAttributes<HTMLElement>>;
+interface CostMeterProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /** Current cost in USD. */
+    cost: number;
+    /** Optional monthly budget; renders progress bar when present. */
+    budget?: number;
+    /** Optional title (e.g. "This session", "Monthly"). */
+    title?: ReactNode;
+    /** Optional delta vs previous period. */
+    delta?: {
+        value: number;
+        period: string;
+    };
+    /** Compact mode — single-line summary. */
+    compact?: boolean;
+}
+/**
+ * CostMeter — gauge for token spend. Two visuals:
+ *   - card: title + big number + optional progress bar + optional delta.
+ *   - compact: chip "Coins $4.20" for nav bars.
+ */
+declare const CostMeter: react.ForwardRefExoticComponent<CostMeterProps & react.RefAttributes<HTMLDivElement>>;
+type PlanNodeStatus = "pending" | "running" | "done" | "skipped" | "failed";
+interface PlanNode {
+    id: string;
+    label: string;
+    status: PlanNodeStatus;
+    /** Optional details / sub-explanation. */
+    detail?: string;
+    /** Sub-nodes (rendered indented). */
+    children?: PlanNode[];
+}
+interface TaskNodeProps extends HTMLAttributes<HTMLLIElement> {
+    node: PlanNode;
+    depth?: number;
+}
+/**
+ * TaskNode — single row in a task plan. Renders its own children recursively
+ * with increasing indentation.
+ */
+declare const TaskNode: react.ForwardRefExoticComponent<TaskNodeProps & react.RefAttributes<HTMLLIElement>>;
+interface TaskPlanProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    nodes: PlanNode[];
+    /** Header title. */
+    title?: ReactNode;
+    /** Summary line shown next to the title (e.g. "3 of 7 done"). */
+    summary?: ReactNode;
+}
+/**
+ * TaskPlan — hierarchical task plan, à la Claude "plan mode".
+ *
+ * The agent emits a structured plan; the user sees each step progress from
+ * pending → running → done (or failed/skipped). Children render with one
+ * extra indent level and a left border to suggest hierarchy.
+ */
+declare const TaskPlan: react.ForwardRefExoticComponent<TaskPlanProps & react.RefAttributes<HTMLElement>>;
+interface SystemPromptEditorProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /** Vendor / default system prompt (read-only). */
+    defaultPrompt: string;
+    /** Current override; pass empty string for "use default". */
+    override: string;
+    onOverrideChange: (next: string) => void;
+    /** Approximate token count for the active prompt. */
+    tokenEstimate?: number;
+    title?: ReactNode;
+}
+/**
+ * SystemPromptEditor — surface the agent's system prompt with a clear
+ * "vendor default" vs "user override" toggle.
+ *
+ * Behavior:
+ *   - When override is empty, the textarea shows the default (greyed out,
+ *     editable starts blank).
+ *   - When user types, override takes effect.
+ *   - "Reset to default" wipes the override.
+ *
+ * Critical for transparency: a user must be able to see and edit the prompt.
+ */
+declare const SystemPromptEditor: react.ForwardRefExoticComponent<SystemPromptEditorProps & react.RefAttributes<HTMLDivElement>>;
+type MemoryScope = "global" | "project" | "session";
+interface MemoryLayer {
+    scope: MemoryScope;
+    /** File path on disk for transparency. */
+    path: string;
+    /** Markdown content. */
+    content: string;
+    /** Last modified label, e.g. "2m ago". */
+    modifiedAt?: string;
+}
+interface MemoryEditorProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    layers: MemoryLayer[];
+    /** Currently active layer for editing. */
+    activeScope: MemoryScope;
+    onScopeChange: (scope: MemoryScope) => void;
+    onContentChange: (scope: MemoryScope, next: string) => void;
+    title?: ReactNode;
+}
+/**
+ * MemoryEditor — three-layer Markdown memory editor (global / project /
+ * session) mirroring Claude Code's CLAUDE.md hierarchy.
+ *
+ * Each scope keeps its own file. Switching scopes via tab updates which
+ * layer is being edited. Path is shown explicitly so users know where the
+ * content lives on disk.
+ */
+declare const MemoryEditor: react.ForwardRefExoticComponent<MemoryEditorProps & react.RefAttributes<HTMLDivElement>>;
+type HookEvent = "PreToolUse" | "PostToolUse" | "UserPromptSubmit" | "Stop" | "SessionStart" | "SessionEnd";
+interface HookEntry {
+    id: string;
+    event: HookEvent;
+    /** Tool matcher (e.g. "Bash", "Write", "*"). */
+    matcher: string;
+    /** Shell command to run. */
+    command: string;
+    enabled?: boolean;
+}
+declare const HOOK_EVENTS: HookEvent[];
+interface HookConfigProps extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "onToggle"> {
+    hooks: HookEntry[];
+    onAdd?: (hook: Omit<HookEntry, "id">) => void;
+    onRemove?: (id: string) => void;
+    onToggle?: (id: string, enabled: boolean) => void;
+    title?: ReactNode;
+}
+/**
+ * HookConfig — editor for lifecycle hooks (PreToolUse, PostToolUse, Stop…).
+ *
+ * Mirrors Claude Code's settings.json hooks but visual. Each row is an
+ * { event × matcher × command } triple with on/off toggle.
+ */
+declare const HookConfig: react.ForwardRefExoticComponent<HookConfigProps & react.RefAttributes<HTMLDivElement>>;
+type HookEventResult = "ok" | "blocked" | "error";
+interface HookEventEntry {
+    id: string;
+    /** Hook event (e.g. PreToolUse). */
+    event: string;
+    /** Hook matcher (e.g. Bash). */
+    matcher: string;
+    /** What the hook command was. */
+    command: string;
+    result: HookEventResult;
+    timestamp: string;
+    /** Optional stderr/stdout snippet. */
+    output?: string;
+    /** Optional duration label, e.g. "120ms". */
+    duration?: string;
+}
+interface HookEventLogProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    events: HookEventEntry[];
+    title?: ReactNode;
+}
+/**
+ * HookEventLog — chronological list of hook firings, with result tone, the
+ * command that ran, and an optional output preview.
+ */
+declare const HookEventLog: react.ForwardRefExoticComponent<HookEventLogProps & react.RefAttributes<HTMLDivElement>>;
+type CronJobStatus = "idle" | "running" | "failed" | "disabled";
+interface CronJob {
+    id: string;
+    /** Human-readable job name. */
+    name: string;
+    /** Cron expression — e.g. every 4 hours. */
+    schedule: string;
+    /** What gets run (prompt or command). */
+    prompt: string;
+    status: CronJobStatus;
+    /** ISO/string timestamp of last run. */
+    lastRun?: string;
+    /** ISO/string timestamp of next run. */
+    nextRun?: string;
+    /** Optional last-run result line. */
+    lastResult?: ReactNode;
+}
+interface CronJobCardProps extends Omit<HTMLAttributes<HTMLElement>, "onToggle"> {
+    job: CronJob;
+    onRunNow?: (id: string) => void;
+    onToggle?: (id: string, enabled: boolean) => void;
+    onRemove?: (id: string) => void;
+}
+/**
+ * CronJobCard — one scheduled agent job. Shows cron expression, prompt,
+ * status, last/next run. Inline actions: run now, pause, delete.
+ */
+declare const CronJobCard: react.ForwardRefExoticComponent<CronJobCardProps & react.RefAttributes<HTMLElement>>;
+type MCPServerStatus = "connected" | "degraded" | "disconnected" | "starting";
+interface MCPServer {
+    id: string;
+    /** Friendly name, e.g. "postgres". */
+    name: string;
+    /** Transport endpoint (stdio command or URL). */
+    endpoint: string;
+    status: MCPServerStatus;
+    /** Tools exposed by the server. */
+    tools: string[];
+    /** Optional resources exposed. */
+    resources?: string[];
+    /** Diagnostic message when degraded/disconnected. */
+    message?: ReactNode;
+    /** Auto-restart toggle hint. */
+    autoRestart?: boolean;
+}
+interface MCPServerCardProps extends HTMLAttributes<HTMLElement> {
+    server: MCPServer;
+    onRestart?: (id: string) => void;
+    onDisconnect?: (id: string) => void;
+}
+/**
+ * MCPServerCard — one MCP server entry showing connection status, the tools
+ * it exposes, and inline controls (restart, disconnect).
+ *
+ * Pairs with claw-code's "degraded startup reporting" — failed servers can
+ * still appear here with a recovery message.
+ */
+declare const MCPServerCard: react.ForwardRefExoticComponent<MCPServerCardProps & react.RefAttributes<HTMLElement>>;
+interface ModelCapabilityFlag {
+    id: string;
+    label: string;
+    icon?: IconComponent;
+    enabled: boolean;
+}
+interface ModelInfo {
+    id: string;
+    /** Display name (e.g. "Opus 4.7"). */
+    name: string;
+    /** Vendor (Anthropic, OpenAI, …). */
+    vendor: string;
+    /** Optional tag (default, fast, smart, beta). */
+    tag?: ReactNode;
+    /** Total context window in tokens. */
+    contextWindow: number;
+    /** Max output tokens per turn. */
+    maxOutput: number;
+    /** USD per million input tokens. */
+    pricePerMInput?: number;
+    /** USD per million output tokens. */
+    pricePerMOutput?: number;
+    /** Knowledge cutoff date label (e.g. "Jan 2026"). */
+    cutoff?: string;
+    /** Capability flags shown as chips. */
+    capabilities?: ModelCapabilityFlag[];
+    /** Short description / positioning. */
+    description?: ReactNode;
+}
+interface ModelCardProps extends Omit<HTMLAttributes<HTMLElement>, "onSelect"> {
+    model: ModelInfo;
+    /** Render as the currently-selected variant (violet ring). */
+    selected?: boolean;
+    /** Fires when user clicks to select. */
+    onSelect?: (id: string) => void;
+}
+/**
+ * ModelCard — full info on a model: vendor, context, output cap, pricing,
+ * capabilities, knowledge cutoff. Used in the "switch model" surface.
+ */
+declare const ModelCard: react.ForwardRefExoticComponent<ModelCardProps & react.RefAttributes<HTMLElement>>;
+/** Pre-canned capability flags. */
+declare const modelCapabilityPresets: {
+    vision: {
+        readonly id: "vision";
+        readonly label: "Vision";
+        readonly icon: IconComponent;
+    };
+    tools: {
+        readonly id: "tools";
+        readonly label: "Tool use";
+        readonly icon: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    };
+    reasoning: {
+        readonly id: "reasoning";
+        readonly label: "Reasoning";
+        readonly icon: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    };
+    fineTuning: {
+        readonly id: "ft";
+        readonly label: "Fine-tuning";
+        readonly icon: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    };
+    multimodal: {
+        readonly id: "multimodal";
+        readonly label: "Multimodal";
+        readonly icon: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    };
+};
+interface AgentProfileDescriptor {
+    id: string;
+    /** Display name, e.g. "Coder", "Planner", "Reviewer". */
+    name: string;
+    /** Avatar initials (2 chars max). Falls back to first 2 letters of name. */
+    initials?: string;
+    /** Optional short description for tooltips and the dropdown. */
+    description?: ReactNode;
+    /**
+     * Identity tone — colors the avatar so users tell agents apart at a glance.
+     */
+    tone?: "primary" | "accent" | "success" | "warning" | "info" | "muted";
+    /** Optional badge text (e.g. "experimental"). */
+    badge?: ReactNode;
+}
+interface AgentProfileProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> {
+    agents: AgentProfileDescriptor[];
+    activeId: string;
+    onChange?: (id: string) => void;
+}
+/**
+ * AgentProfile — switcher between multiple agent profiles (coder, planner,
+ * reviewer, etc.). Each profile gets its own tone so the user can spot at a
+ * glance which "persona" is currently driving the session.
+ */
+declare const AgentProfile: react.ForwardRefExoticComponent<AgentProfileProps & react.RefAttributes<HTMLButtonElement>>;
+type SubAgentState = "spawning" | "running" | "completed" | "failed" | "cancelled";
+interface SubAgentRun {
+    id: string;
+    /** Profile name (matches AgentProfile.name). */
+    agent: string;
+    /** Short task description given to the sub-agent. */
+    task: string;
+    state: SubAgentState;
+    /** Optional duration label. */
+    duration?: string;
+    /** Optional last status line (preview of the latest event). */
+    lastEvent?: string;
+    /** Optional result summary (one-liner). */
+    result?: ReactNode;
+}
+interface SubAgentDispatchProps extends HTMLAttributes<HTMLElement> {
+    run: SubAgentRun;
+    /** When provided, renders a cancel button while the run is in flight. */
+    onCancel?: (id: string) => void;
+}
+/**
+ * SubAgentDispatch — visualization for a Task() / sub-agent invocation.
+ *
+ * Shows the agent name, the task summary, current state, an inline event
+ * preview, and an optional result. Use inside the agent timeline to make
+ * delegation visible.
+ */
+declare const SubAgentDispatch: react.ForwardRefExoticComponent<SubAgentDispatchProps & react.RefAttributes<HTMLElement>>;
+type SessionStatus = "active" | "completed" | "failed" | "aborted";
+interface SessionSummary {
+    id: string;
+    /** Friendly title (often the first user message). */
+    title: string;
+    /** ISO timestamp / friendly date label. */
+    startedAt: string;
+    duration?: string;
+    status: SessionStatus;
+    /** Agent/model that ran the session. */
+    model?: string;
+    /** Total tokens consumed (formatted, e.g. "35.7k"). */
+    tokens?: string;
+    /** Total cost (USD). */
+    cost?: number;
+    /** Number of messages in the session. */
+    messageCount?: number;
+}
+interface SessionTimelineProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    sessions: SessionSummary[];
+    /** Title above the list. */
+    title?: ReactNode;
+    /** Fires when a row is clicked. */
+    onOpen?: (id: string) => void;
+}
+/**
+ * SessionTimeline — historical view of past agent sessions with per-row
+ * tokens / cost / duration / status. Click a row to open the full session.
+ */
+declare const SessionTimeline: react.ForwardRefExoticComponent<SessionTimelineProps & react.RefAttributes<HTMLDivElement>>;
+type AuditActorKind = "user" | "agent" | "system";
+type AuditSeverity = "info" | "warning" | "error";
+interface AuditEntry {
+    id: string;
+    /** Who triggered the action. */
+    actor: {
+        kind: AuditActorKind;
+        name: string;
+    };
+    /** Verb / action label, e.g. "wrote file", "ran command". */
+    action: string;
+    /** Target of the action (file path, command, etc). */
+    target?: ReactNode;
+    /** ISO timestamp / friendly label. */
+    timestamp: string;
+    severity?: AuditSeverity;
+    /** Optional detail block (multi-line). */
+    detail?: ReactNode;
+}
+interface AuditLogEntryProps extends HTMLAttributes<HTMLElement> {
+    entry: AuditEntry;
+}
+/**
+ * AuditLogEntry — one row in the agent audit log. Tells the user exactly
+ * who did what and when. Severity colors the timestamp and target.
+ */
+declare const AuditLogEntry: react.ForwardRefExoticComponent<AuditLogEntryProps & react.RefAttributes<HTMLElement>>;
+type LaneState = "started" | "blocked" | "failed" | "finished";
+interface LaneCard {
+    id: string;
+    /** Card title (e.g. task name). */
+    title: ReactNode;
+    /** Optional description / preview. */
+    description?: ReactNode;
+    /** Optional footer / metadata row. */
+    footer?: ReactNode;
+}
+interface Lane {
+    state: LaneState;
+    cards: LaneCard[];
+}
+interface LaneBoardProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    lanes: Lane[];
+    title?: ReactNode;
+}
+/**
+ * LaneBoard — kanban-style task board with 4 lanes matching the claw-code
+ * lane event schema (started/blocked/failed/finished). Each card is a
+ * machine-readable task snapshot the agent emits.
+ */
+declare const LaneBoard: react.ForwardRefExoticComponent<LaneBoardProps & react.RefAttributes<HTMLDivElement>>;
+interface TokenUsagePoint {
+    /** ISO date or friendly label for the x-axis tooltip. */
+    label: string;
+    /** Input tokens for this period (e.g. day). */
+    input: number;
+    /** Output tokens for this period. */
+    output: number;
+}
+interface TokenUsageChartProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    points: TokenUsagePoint[];
+    /** Title above the chart. */
+    title?: ReactNode;
+    /** Chart height in px. Default 160. */
+    height?: number;
+    /** Show legend below the chart. Default true. */
+    showLegend?: boolean;
+    /**
+     * Maximum number of bars to render. When `points.length` exceeds this, the
+     * series is binned (summed in equal-width windows) so the chart stays
+     * legible and SVG node count stays bounded. Default 60.
+     */
+    maxBars?: number;
+}
+/**
+ * TokenUsageChart — stacked-bar chart of input vs output tokens over time.
+ *
+ * Pure SVG, no chart lib. Width is fluid; bars adjust to viewBox. Hover any
+ * bar to see the breakdown in the tooltip slot below.
+ */
+declare const TokenUsageChart: react.ForwardRefExoticComponent<TokenUsageChartProps & react.RefAttributes<HTMLDivElement>>;
+interface AutoCompactNoticeProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    /** Optional custom title. */
+    title?: ReactNode;
+    /**
+     * How many turns until the next auto-compaction. Used to render an inline
+     * countdown chip.
+     */
+    turnsRemaining?: number;
+    /** Approx tokens that will be removed/summarized. */
+    tokensToCompact?: number;
+    onCompactNow?: () => void;
+    onDismiss?: () => void;
+}
+/**
+ * AutoCompactNotice — inline banner warning the user that the agent is
+ * about to summarize / compact older context. Lets them act early (compact
+ * now) or dismiss.
+ *
+ * Critical for transparency: a user must not be surprised by silent context
+ * loss. This component announces it before it happens.
+ */
+declare const AutoCompactNotice: react.ForwardRefExoticComponent<AutoCompactNoticeProps & react.RefAttributes<HTMLElement>>;
+interface HandoffParty {
+    /** Display name, e.g. "planner". */
+    name: string;
+    /** Optional avatar initials (max 2 chars). */
+    initials?: string;
+    /** Identity tone matching AgentProfile. */
+    tone?: "primary" | "accent" | "success" | "warning" | "info" | "muted";
+}
+interface AgentHandoffProps extends HTMLAttributes<HTMLElement> {
+    from: HandoffParty;
+    to: HandoffParty;
+    /** What is being handed off — short reason / payload preview. */
+    reason: ReactNode;
+    /** Optional metadata footer (e.g. timestamp, token budget). */
+    footer?: ReactNode;
+}
+/**
+ * AgentHandoff — visual marker of one agent delegating to another. Pairs
+ * with AgentProfile for the identity tones; place it in the timeline so the
+ * user sees the baton being passed.
+ */
+declare const AgentHandoff: react.ForwardRefExoticComponent<AgentHandoffProps & react.RefAttributes<HTMLElement>>;
+/**
+ * AgentStreaming — inline "agent is thinking / typing" indicator.
+ *
+ * Renders inside an agent stream while the model is producing a response.
+ * Default visual is 3 violet dots pulsing. If `partial` is provided, renders
+ * the streamed-so-far text with a caret. Optional `model` label on the right.
+ */
+interface AgentStreamingProps extends HTMLAttributes<HTMLDivElement> {
+    /** Streamed-so-far text. When present, replaces the dots animation. */
+    partial?: ReactNode;
+    /** Optional model name shown as a chip. */
+    model?: ReactNode;
+}
+declare const AgentStreaming: react.ForwardRefExoticComponent<AgentStreamingProps & react.RefAttributes<HTMLDivElement>>;
+/**
+ * AgentErrorCard — inline error / blocked-state card for an agent stream.
+ *
+ * Renders when the agent run hits a wall it can't recover from on its own:
+ * rate limit, context overflow, auth lost, tool failure, network error.
+ * Severity is always destructive; the `kind` drives the icon and helps the
+ * consumer wire recovery actions in the footer slot.
+ */
+type AgentErrorKind = "rate-limit" | "context-overflow" | "auth" | "tool-failure" | "network" | "generic";
+interface AgentErrorCardProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    kind?: AgentErrorKind;
+    title: ReactNode;
+    detail?: ReactNode;
+    /** Recovery action slot (Retry, Reset, Re-auth, etc.). */
+    actions?: ReactNode;
+    timestamp?: ReactNode;
+}
+declare const AgentErrorCard: react.ForwardRefExoticComponent<AgentErrorCardProps & react.RefAttributes<HTMLElement>>;
+/**
+ * ToolCallCard — single agent tool invocation rendered inside the stream.
+ *
+ * Visual: row with tool icon + tool name + target/command (mono) + status +
+ * optional chevron. Expandable: when `output` is provided the row becomes a
+ * `<details>` whose body renders the stdout/stderr/result block.
+ *
+ * Distinct from `AgentEvent` in the existing AgentTimeline by being a
+ * stand-alone card that lives inside an AgentStream alongside chat messages.
+ */
+type ToolCallStatus = "running" | "success" | "failed" | "queued" | "skipped";
+interface ToolCallCardProps extends HTMLAttributes<HTMLElement> {
+    /** Tool name (matches Theo Code / Claude Code tool registry: Bash, Edit, Read, …). */
+    tool: ReactNode;
+    /** Optional icon for the tool. */
+    icon?: IconComponent;
+    /** Target / command shown in monospace next to the tool name. */
+    target?: ReactNode;
+    status: ToolCallStatus;
+    /** Optional stdout/stderr/result body. When present, the card becomes expandable. */
+    output?: ReactNode;
+    /** Default expanded state. Default: false (collapsed). */
+    defaultExpanded?: boolean;
+    /** Timestamp shown on the right. */
+    timestamp?: ReactNode;
+}
+declare function ToolCallCard({ className, tool, icon: Icon, target, status, output, defaultExpanded, timestamp, ...props }: ToolCallCardProps): react_jsx_runtime.JSX.Element;
+interface SectionProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    title?: ReactNode;
+}
+interface ItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
+    icon?: ElementType;
+    active?: boolean;
+    count?: number | string;
+    as?: "button" | "a";
+    href?: string;
+}
+declare const Sidebar: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & react.RefAttributes<HTMLElement>> & {
+    Header: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+    Section: react.ForwardRefExoticComponent<SectionProps & react.RefAttributes<HTMLDivElement>>;
+    Item: react.ForwardRefExoticComponent<ItemProps & react.RefAttributes<HTMLElement>>;
+    Footer: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+};
+interface BreadcrumbItem {
+    label: ReactNode;
+    href?: string;
+}
+interface BreadcrumbsProps extends HTMLAttributes<HTMLElement> {
+    items: BreadcrumbItem[];
+}
+interface ModeSwitcherOption {
+    value: string;
+    label: ReactNode;
+}
+interface ModeSwitcherProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    value: string;
+    options: ModeSwitcherOption[];
+    onChange?: (value: string) => void;
+    /**
+     * Accessible label for the radiogroup. Defaults to "Mode".
+     */
+    ariaLabel?: string;
+}
+declare const TopNav: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & react.RefAttributes<HTMLElement>> & {
+    Left: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+    Center: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+    Right: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+    Breadcrumbs: react.ForwardRefExoticComponent<BreadcrumbsProps & react.RefAttributes<HTMLElement>>;
+    ModeSwitcher: react.ForwardRefExoticComponent<ModeSwitcherProps & react.RefAttributes<HTMLDivElement>>;
+};
+/**
+ * Sheet — slide-in side panel built on Radix Dialog.
+ *
+ * Same Radix primitive as Dialog, but Content slides from an edge instead of
+ * fading from center. Used for: workspace overlays (Memory, Observability,
+ * Sub-agents), Settings, contextual filters.
+ *
+ * Composition:
+ *   <Sheet>
+ *     <Sheet.Trigger>Open</Sheet.Trigger>
+ *     <Sheet.Content side="right">
+ *       <Sheet.Header>
+ *         <Sheet.Title>Memory</Sheet.Title>
+ *         <Sheet.Description>Episodes and wiki pages</Sheet.Description>
+ *       </Sheet.Header>
+ *       <Sheet.Body>…</Sheet.Body>
+ *       <Sheet.Footer>…</Sheet.Footer>
+ *     </Sheet.Content>
+ *   </Sheet>
+ */
+declare const Overlay: react.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+declare const sheetVariants: (props?: ({
+    side?: "right" | "left" | "top" | "bottom" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ContentProps extends ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof sheetVariants> {
+    hideCloseButton?: boolean;
+}
+declare const Content: react.ForwardRefExoticComponent<ContentProps & react.RefAttributes<HTMLDivElement>>;
+declare const Header: {
+    ({ className, ...props }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const Body: {
+    ({ className, ...props }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const Footer: {
+    ({ className, ...props }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const Title: react.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & react.RefAttributes<HTMLHeadingElement>, "ref"> & react.RefAttributes<HTMLHeadingElement>>;
+declare const Description: react.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & react.RefAttributes<HTMLParagraphElement>, "ref"> & react.RefAttributes<HTMLParagraphElement>>;
+declare const Sheet: typeof DialogPrimitive.Root & {
+    Trigger: typeof DialogPrimitive.Trigger;
+    Close: typeof DialogPrimitive.Close;
+    Content: typeof Content;
+    Overlay: typeof Overlay;
+    Header: typeof Header;
+    Body: typeof Body;
+    Footer: typeof Footer;
+    Title: typeof Title;
+    Description: typeof Description;
+};
+/**
+ * ProjectSwitcher — sidebar header for a code agent app.
+ *
+ * Shows the active workspace (folder name) + branch + status dot + a tiny
+ * `ChevronsUpDown` hint when clickable. Used in Sidebar.Header to anchor the
+ * current project context for the session list below.
+ *
+ *   <Sidebar.Header className="p-0">
+ *     <ProjectSwitcher
+ *       workspace="acme-web"
+ *       branch="claude/alignment-grid"
+ *       status="running"
+ *       onClick={openProjectPicker}
+ *     />
+ *   </Sidebar.Header>
+ *
+ * If `onClick` is omitted, renders as a static `<div>` (no chevron, not focusable).
+ */
+type ProjectStatus = "idle" | "running" | "error" | "offline";
+interface ProjectSwitcherProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type" | "children"> {
+    /** Workspace / folder name (e.g. "acme-web"). */
+    workspace: ReactNode;
+    /** Optional git branch. Renders inline with a GitBranch icon. */
+    branch?: ReactNode;
+    /** Optional status dot. Defaults to "idle". */
+    status?: ProjectStatus;
+    /** Brand letter / icon shown in the violet tile. Default: first char of workspace if string. */
+    brand?: ReactNode;
+}
+declare const ProjectSwitcher: react.ForwardRefExoticComponent<ProjectSwitcherProps & react.RefAttributes<HTMLButtonElement>>;
+/**
+ * SessionListItem — single row in the sidebar's Sessions list for a code agent
+ * app. Richer than the generic `Sidebar.Item`: shows a status dot, the agent
+ * mode last used (chat/code/infra), and a relative timestamp.
+ *
+ *   <SessionListItem
+ *     title="Build the alignment grid demo"
+ *     status="running"
+ *     mode="code"
+ *     timestamp="2m ago"
+ *     active
+ *     onClick={() => navigate(`/session/${id}`)}
+ *   />
+ *
+ * The status dot maps to the agent run state and animates while running.
+ */
+type SessionRunStatus = "running" | "queued" | "completed" | "failed" | "cancelled";
+type SessionMode = "chat" | "code" | "infra";
+interface SessionListItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type" | "children" | "title"> {
+    /** Session title (truncated). */
+    title: ReactNode;
+    /** Agent run state. Drives the status dot. */
+    status: SessionRunStatus;
+    /** Last mode the user was viewing this session in. Optional pill. */
+    mode?: SessionMode;
+    /** Relative timestamp string ("2m ago", "yesterday"). */
+    timestamp?: ReactNode;
+    /** Optional unread count (pending agent events, new outputs). */
+    unread?: number;
+    /** Whether this is the currently selected session. */
+    active?: boolean;
+}
+declare const SessionListItem: react.ForwardRefExoticComponent<SessionListItemProps & react.RefAttributes<HTMLButtonElement>>;
+interface ChatMessageProps extends HTMLAttributes<HTMLElement> {
+    message: Message;
+    /**
+     * Optional avatar slot rendered before assistant/user content.
+     */
+    avatar?: ReactNode;
+    /**
+     * Optional toolbar (copy, regenerate, etc.) rendered after the content.
+     */
+    actions?: ReactNode;
+}
+/**
+ * ChatMessage — single chat turn.
+ *
+ * Visual:
+ *   - user      → soft surface bubble aligned right, max-width 70%
+ *   - assistant → card with violet accent border-left + display-font title for model + body
+ *   - system    → muted callout with accent-deep border
+ */
+declare const ChatMessage: react.ForwardRefExoticComponent<ChatMessageProps & react.RefAttributes<HTMLElement>>;
+/**
+ * ChatThread — simple vertical container that applies spacing + scroll.
+ *
+ * No virtualization or stickiness. Wrap with your own scroller for long threads.
+ *
+ * T4.1 (MF-4): declares the outer live region and wraps children in
+ * LiveRegionProvider so nested AgentStreaming / AgentErrorCard / Skeleton
+ * don't add their own aria-live (double-announcement avoided).
+ */
+declare const ChatThread: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+interface ModelOption {
+    id: string;
+    label: string;
+    /** Optional vendor hint shown small below the label. */
+    vendor?: string;
+    /** Optional tag e.g. "default", "fast", "smart". */
+    tag?: string;
+}
+interface ModelSelectorProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> {
+    value: string;
+    options: ModelOption[];
+    onChange?: (id: string) => void;
+}
+/**
+ * ModelSelector — chip dropdown for picking the active LLM.
+ *
+ * Visual: pill with violet dot + label + chevron. Dropdown uses Radix Menu.
+ */
+declare const ModelSelector: react.ForwardRefExoticComponent<ModelSelectorProps & react.RefAttributes<HTMLButtonElement>>;
+interface IntentOption {
+    id: string;
+    label: string;
+    /** Optional one-liner shown below the label in the menu. */
+    description?: string;
+    /** Optional icon — defaults to a pencil for the trigger if none. */
+    icon?: IconComponent;
+}
+interface IntentSelectorProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> {
+    value: string;
+    options: IntentOption[];
+    onChange?: (id: string) => void;
+}
+/**
+ * IntentSelector — chip dropdown for picking the agent's intent for the next
+ * turn (e.g. edit / plan / review). Mirrors ModelSelector: pill trigger +
+ * Radix DropdownMenu of options with description and a check on the active.
+ */
+declare const IntentSelector: react.ForwardRefExoticComponent<IntentSelectorProps & react.RefAttributes<HTMLButtonElement>>;
+interface MentionItem {
+    id: string;
+    /** Primary label shown on the row. */
+    label: ReactNode;
+    /** Secondary one-line description (optional). */
+    description?: ReactNode;
+    /** Optional per-row icon override. */
+    icon?: IconComponent;
+}
+/** Trigger character — drives the default header + icon if not overridden. */
+type MentionTrigger = "/" | "@" | "#";
+interface MentionMenuProps {
+    /** Whether the panel is open. The consumer (composer) controls this. */
+    open: boolean;
+    /** Trigger character that opened the menu — used for default title + icon. */
+    trigger: MentionTrigger;
+    /** Items to display (already filtered by the consumer). */
+    items: MentionItem[];
+    /** Fires when the user selects an item via click or Enter. */
+    onSelect: (item: MentionItem) => void;
+    /** Fires when the user dismisses (Esc, click outside). */
+    onClose: () => void;
+    /** Title above the list. Defaults to the trigger's domain ("Commands", "Files", "Memories"). */
+    title?: ReactNode;
+    /** Empty-state message when items is empty. */
+    emptyLabel?: ReactNode;
+    /** Override the alignment relative to its anchor. Default: above-left. */
+    className?: string;
+}
+/**
+ * MentionMenu — keyboard-navigable popover for slash-command / @file / #memory
+ * triggers inside an agent composer.
+ *
+ * Generic by design: the consumer decides what items appear for each trigger
+ * (commands list, file search, memory lookup, …). MentionMenu owns the visual
+ * presentation, selection highlight, Esc/Enter/Arrow keys.
+ *
+ * Position: absolute, anchored to the closest positioned ancestor — usually
+ * the composer wrapper. Default `bottom-full left-0` (above the composer).
+ */
+declare function MentionMenu({ open, trigger, items, onSelect, onClose, title, emptyLabel, className, }: MentionMenuProps): react_jsx_runtime.JSX.Element | null;
+interface FolderSelectorProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Currently selected absolute path. */
+    path: string;
+    /**
+     * Render in compact mode (smaller height, no chevron padding).
+     * Default is the full-width composer variant used in the Files panel.
+     */
+    compact?: boolean;
+}
+/**
+ * FolderSelector — chip showing the active working directory.
+ *
+ * Visual: folder icon + monospaced path (truncated middle) + chevron.
+ * Stateless: caller handles the actual folder-picker dialog.
+ */
+declare const FolderSelector: react.ForwardRefExoticComponent<FolderSelectorProps & react.RefAttributes<HTMLButtonElement>>;
+interface AttachmentChipProps extends HTMLAttributes<HTMLDivElement> {
+    attachment: Attachment;
+    onRemove?: (id: string) => void;
+}
+/**
+ * AttachmentChip — file pill shown in chat composer or message attachments row.
+ *
+ * Visual: rounded chip with type-icon + name + size + optional remove button.
+ * Truncates the name with `text-ellipsis`; full name available via title.
+ */
+declare const AttachmentChip: react.ForwardRefExoticComponent<AttachmentChipProps & react.RefAttributes<HTMLDivElement>>;
+interface QuickAction {
+    id: string;
+    label: ReactNode;
+    /** Icon component (e.g. from lucide-react). */
+    icon?: IconComponent;
+    /** When true, the chip is highlighted as the suggested next action. */
+    primary?: boolean;
+}
+interface QuickActionChipsProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
+    actions: QuickAction[];
+    onSelect?: (id: string) => void;
+}
+/**
+ * QuickActionChips — row of intent chips below a hero composer.
+ *
+ * Used in Chat Home ("Escrever / Aprender / Código / Assuntos pessoais")
+ * and the Files panel.
+ */
+declare const QuickActionChips: react.ForwardRefExoticComponent<QuickActionChipsProps & react.RefAttributes<HTMLDivElement>>;
+interface AgentEventProps extends HTMLAttributes<HTMLDivElement> {
+    event: AgentEvent$1;
+    /**
+     * If true, clicking the row toggles `event.detail` visibility.
+     */
+    collapsible?: boolean;
+    /**
+     * Force the collapsible state (for controlled scenarios).
+     */
+    defaultOpen?: boolean;
+}
+/**
+ * AgentEvent — single event row in the agent timeline.
+ *
+ * Composition: type icon + label + path + diff stats + status icon + (optional) chevron.
+ * Running events show a spinner via motion-safe:animate-spin (respects
+ * `prefers-reduced-motion`); failed events flash red.
+ *
+ * When `collapsible` is true and `event.detail` is provided, the row renders as
+ * a native `<button>` for correct keyboard and screen-reader semantics.
+ */
+declare const AgentEvent: react.ForwardRefExoticComponent<AgentEventProps & react.RefAttributes<HTMLDivElement>>;
+interface AgentStartingStateProps extends OutputHTMLAttributes<HTMLOutputElement> {
+    /** Title shown next to the spinner. Default "Starting up…". */
+    label?: ReactNode;
+    /** Optional secondary copy explaining the bootstrap step. */
+    hint?: ReactNode;
+}
+/**
+ * AgentStartingState — full-width skeleton shown while the agent boots.
+ *
+ * Visual: violet spinner + label, optional hint below. Wrapped in a soft card.
+ * Uses semantic `<output aria-live="polite">` so screen readers announce the state.
+ */
+declare const AgentStartingState: react.ForwardRefExoticComponent<AgentStartingStateProps & react.RefAttributes<HTMLOutputElement>>;
+interface RunStatsProps extends HTMLAttributes<HTMLDivElement> {
+    duration?: string;
+    /** Formatted token count, e.g. "35.7k". */
+    tokens?: string;
+    /** Number of files changed in the run. */
+    filesChanged?: number;
+}
+/**
+ * RunStats — inline metric row shown after an agent run.
+ *
+ * Visual: muted bullet-separated row with clock + tokens + files-changed icons.
+ * All optional — the component skips entries that aren't provided.
+ */
+declare const RunStats: react.ForwardRefExoticComponent<RunStatsProps & react.RefAttributes<HTMLDivElement>>;
+interface ToolCallProps extends HTMLAttributes<HTMLDivElement> {
+    /** Tool name e.g. "bash", "read_file", "edit_file". */
+    name?: string;
+    /**
+     * Summary label e.g. "Ran 2 commands", "Read 18 files".
+     */
+    summary: ReactNode;
+    /**
+     * Collapsible payload (e.g. command, stdout, file list).
+     */
+    detail?: ReactNode;
+    defaultOpen?: boolean;
+    /**
+     * If true, hides the wrench icon (useful when grouping by name elsewhere).
+     */
+    hideIcon?: boolean;
+}
+/**
+ * ToolCall — collapsible row representing an agent tool invocation.
+ *
+ * Visual: subtle muted container, wrench icon, summary in body text,
+ * chevron rotates on expand. Pairs with `<ToolResult>` for the rendered output.
+ *
+ * Typical usage inside a ChatMessage assistant body:
+ *
+ *   <ToolCall summary="Read 18 files" detail={<ToolResult>{output}</ToolResult>} />
+ */
+declare const ToolCall: react.ForwardRefExoticComponent<ToolCallProps & react.RefAttributes<HTMLDivElement>>;
+type Variant = "text" | "code" | "json";
+interface ToolResultProps extends HTMLAttributes<HTMLDivElement> {
+    variant?: Variant;
+    /**
+     * Pre-formatted content. For `code`/`json`, the component uses mono font
+     * and preserves whitespace. For `text`, normal body font.
+     */
+    children: ReactNode;
+}
+/**
+ * ToolResult — formatted output of a tool invocation.
+ *
+ * Three quick variants: plain text, code (monospace), json (monospace, tinted).
+ * Always rendered as a `<div>` for predictable prop typing; code/json variants
+ * wrap children in `<pre>` internally.
+ */
+declare const ToolResult: react.ForwardRefExoticComponent<ToolResultProps & react.RefAttributes<HTMLDivElement>>;
+interface ProgressChecklistProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    title?: ReactNode;
+    steps: TaskStep[];
+    /**
+     * If true, shows percentage bar for running steps with `progress`.
+     */
+    showProgressBars?: boolean;
+}
+/**
+ * ProgressChecklist — right-inspector checklist.
+ *
+ * Visual: vertical list of steps with status dot, label, optional progress bar.
+ * Matches WIREMOCKS §3 / §4 ("Progresso") with checkmarks and pulse on running.
+ */
+declare const ProgressChecklist: react.ForwardRefExoticComponent<ProgressChecklistProps & react.RefAttributes<HTMLDivElement>>;
+interface FolderEntry {
+    id: string;
+    name: string;
+    kind: "folder" | "file";
+    /**
+     * If true, the entry is expanded (icons + nested children).
+     * Pure visual flag; toggling is the caller's job.
+     */
+    open?: boolean;
+    /**
+     * Optional nested entries when this is a folder.
+     */
+    children?: FolderEntry[];
+    /** Optional adornment after the name (badge, modified indicator). */
+    trailing?: ReactNode;
+    /** Override the icon. */
+    icon?: IconComponent;
+}
+interface FolderContextCardProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    title?: ReactNode;
+    /**
+     * Root entries shown directly in the card.
+     */
+    entries: FolderEntry[];
+    /**
+     * Fires when an entry row is clicked.
+     */
+    onEntryClick?: (id: string) => void;
+}
+/**
+ * FolderContextCard — file/folder tree fragment for the right inspector.
+ *
+ * Visual: 1-level tree with chevron indicating expanded state. Renders nested
+ * children recursively, but does not manage open state — caller controls
+ * `entry.open` and reacts to `onEntryClick`.
+ */
+declare const FolderContextCard: react.ForwardRefExoticComponent<FolderContextCardProps & react.RefAttributes<HTMLElement>>;
+interface ContextCardProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    title?: ReactNode;
+    description?: ReactNode;
+    /** Optional illustration slot (rendered above title). */
+    illustration?: ReactNode;
+    /** Icon for the title row — used when illustration is omitted. */
+    icon?: IconComponent;
+}
+/**
+ * ContextCard — generic "informational" card for the right inspector.
+ *
+ * Used as the "Contexto" card on Files screens: illustration / icon, title,
+ * short description. Inert by design — no actions.
+ */
+declare const ContextCard: react.ForwardRefExoticComponent<ContextCardProps & react.RefAttributes<HTMLElement>>;
+interface CreatedFile {
+    id: string;
+    name: string;
+    /** Optional size for display, e.g. "42 KB". */
+    size?: string;
+    /** Icon override. */
+    icon?: IconComponent;
+    /** Optional destination metadata (e.g. "Google Drive · /Reports"). */
+    destination?: ReactNode;
+    /** Optional URL to open the file. */
+    href?: string;
+}
+interface CreatedFilesCardProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    title?: ReactNode;
+    files: CreatedFile[];
+    /**
+     * Optional CTA shown at the bottom (e.g. "Move to Google Drive").
+     */
+    cta?: ReactNode;
+}
+/**
+ * CreatedFilesCard — surfaces files produced by a completed task.
+ *
+ * From WIREMOCKS §2: each file is a card-like row with icon + name + destination.
+ * Used as social proof of delivery in Task Completed views.
+ */
+declare const CreatedFilesCard: react.ForwardRefExoticComponent<CreatedFilesCardProps & react.RefAttributes<HTMLElement>>;
+interface ArtifactPreviewProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    title: ReactNode;
+    /** Optional source/destination label (e.g. "Google Drive", "Local · ~/reports"). */
+    source?: ReactNode;
+    /**
+     * Tabs at the bottom of the artifact (e.g. "Expense Report | Currency Summary").
+     * Caller controls the active state externally.
+     */
+    tabs?: ReactNode;
+    /** Top toolbar actions. Defaults to refresh + maximize + close. */
+    toolbar?: ReactNode;
+    onMaximize?: () => void;
+    onRefresh?: () => void;
+    onClose?: () => void;
+}
+/**
+ * ArtifactPreview — shell for previewing a generated artifact (XLSX, PDF, image…).
+ *
+ * Renders a toolbar + content slot + optional bottom tabs. The actual preview
+ * (spreadsheet, PDF embed, image) is the caller's `children`, so this stays
+ * dependency-free.
+ */
+declare const ArtifactPreview: react.ForwardRefExoticComponent<ArtifactPreviewProps & react.RefAttributes<HTMLElement>>;
+interface RailStep {
+    id: string | number;
+    label?: ReactNode;
+    /**
+     * Visual state: "complete", "current", "pending".
+     */
+    state?: "complete" | "current" | "pending";
+}
+interface StepsRailProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    steps: RailStep[];
+    /**
+     * Optional label rendered at the top of the rail (e.g. "STEPS").
+     */
+    title?: ReactNode;
+}
+/**
+ * StepsRail — vertical numbered rail with connecting line.
+ *
+ * Mirrors the file-organisation wiremock right rail: 5 numbered dots, current
+ * highlighted, line connecting them.
+ */
+declare const StepsRail: react.ForwardRefExoticComponent<StepsRailProps & react.RefAttributes<HTMLElement>>;
+interface RecentFolder {
+    id: string;
+    name: ReactNode;
+    path: string;
+    /** When true, the row is highlighted as selected. */
+    active?: boolean;
+}
+interface RecentFoldersListProps extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "onSelect"> {
+    title?: ReactNode;
+    folders: RecentFolder[];
+    onSelect?: (id: string) => void;
+}
+/**
+ * RecentFoldersList — recently-used folders for the Files picker.
+ *
+ * Visual: a stack of rows with folder icon + name + path (smaller, muted),
+ * active row highlighted with violet bg.
+ */
+declare const RecentFoldersList: react.ForwardRefExoticComponent<RecentFoldersListProps & react.RefAttributes<HTMLDivElement>>;
+type DiffLineKind = "added" | "removed" | "unchanged" | "meta";
+interface DiffLine {
+    kind: DiffLineKind;
+    /** Original line number (left side); undefined for added lines. */
+    oldNumber?: number;
+    /** New line number (right side); undefined for removed lines. */
+    newNumber?: number;
+    content: string;
+}
+interface DiffHunk {
+    id: string;
+    /**
+     * Optional header (e.g. "@@ -42,7 +42,12 @@"). Caller usually formats this.
+     */
+    header?: string;
+    lines: DiffLine[];
+    /**
+     * If true, the hunk is rendered as a collapsed "N unmodified lines" placeholder.
+     */
+    collapsed?: boolean;
+}
+interface DiffViewerProps extends HTMLAttributes<HTMLDivElement> {
+    /** Path of the file being diffed. */
+    path: string;
+    /** Diff stats summary. */
+    stats?: {
+        added: number;
+        removed: number;
+    };
+    hunks: DiffHunk[];
+}
+/**
+ * DiffViewer — unified diff rendering, no external dep.
+ *
+ * Visual: two gutter columns (old/new line numbers) + sign + monospaced content.
+ * Added/removed rows tinted in success/destructive. Collapsed hunks render as
+ * a single muted row "N unmodified lines".
+ *
+ * For syntax highlighting, the consumer can render `content` via their own
+ * highlighter and pass `unchanged` lines with already-highlighted strings (not
+ * common; usually plain text is enough for the brutalist console aesthetic).
+ */
+declare const DiffViewer: react.ForwardRefExoticComponent<DiffViewerProps & react.RefAttributes<HTMLDivElement>>;
+interface TerminalLine {
+    id: string;
+    /**
+     * Visual kind: command (prompted), stdout, stderr, ok (success), prompt (active line).
+     */
+    kind?: "command" | "stdout" | "stderr" | "ok" | "prompt";
+    content: ReactNode;
+}
+interface TerminalPanelProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    title?: ReactNode;
+    lines: TerminalLine[];
+    /**
+     * Optional prompt prefix for commands, defaults to "$".
+     */
+    promptPrefix?: string;
+    /**
+     * Live-region politeness for screen readers. Use `"polite"` when streaming
+     * fresh output so assistive tech announces new lines without interrupting.
+     * Default `"off"` for static / historical views.
+     */
+    live?: "off" | "polite";
+}
+/**
+ * TerminalPanel — minimal terminal output viewer.
+ *
+ * Visual: dark card with mono font, "$ " prefix on command lines, color-coded
+ * stdout/stderr/success. No interactivity (read-only) — pair with your own
+ * pty/xterm for live shells if needed.
+ */
+declare const TerminalPanel: react.ForwardRefExoticComponent<TerminalPanelProps & react.RefAttributes<HTMLDivElement>>;
+type TaskSource = "agent" | "bash" | "tool";
+type RunningTaskStatus = "running" | "completed" | "failed";
+interface RunningTaskItem {
+    id: string;
+    label: ReactNode;
+    source: TaskSource;
+    status: RunningTaskStatus;
+}
+interface RunningTasksPanelProps extends HTMLAttributes<HTMLElement> {
+    tasks: RunningTaskItem[];
+}
+/**
+ * RunningTasksPanel — split list of Running vs Completed tasks.
+ *
+ * Used in the Code workspace right rail to give operational visibility into
+ * what the agent is executing (foreground/background) vs what already finished.
+ */
+declare const RunningTasksPanel: react.ForwardRefExoticComponent<RunningTasksPanelProps & react.RefAttributes<HTMLElement>>;
+interface BrowserControlsProps extends HTMLAttributes<HTMLDivElement> {
+    url: string;
+    onUrlChange?: (next: string) => void;
+    onBack?: () => void;
+    onForward?: () => void;
+    onReload?: () => void;
+    /**
+     * Disable URL editing (some previews are read-only).
+     */
+    readOnlyUrl?: boolean;
+}
+/**
+ * BrowserControls — back/forward/reload + URL bar.
+ *
+ * Used as the top of PreviewPanel in the Code workspace.
+ */
+declare const BrowserControls: react.ForwardRefExoticComponent<BrowserControlsProps & react.RefAttributes<HTMLDivElement>>;
+type LogLevel = "info" | "warn" | "error" | "success" | "debug";
+interface LogLine {
+    id: string;
+    timestamp: string;
+    level: LogLevel;
+    message: string;
+    source?: string;
+}
+interface BuildLogStreamProps extends HTMLAttributes<HTMLDivElement> {
+    lines: LogLine[];
+    /**
+     * If true, shows level filter chips above the stream.
+     */
+    filterable?: boolean;
+    /**
+     * Controlled filter — which levels are visible. Empty Set = show all.
+     *
+     * Pick one mode: either always pass `visibleLevels` + `onVisibleLevelsChange`
+     * (controlled), or never (uncontrolled). Mixing the two between renders is
+     * not supported and may produce surprising state.
+     */
+    visibleLevels?: Set<LogLevel>;
+    onVisibleLevelsChange?: (levels: Set<LogLevel>) => void;
+    /**
+     * Height of the scrollable region.
+     */
+    height?: string | number;
+    /**
+     * Maximum number of lines rendered. When exceeded, only the tail is shown
+     * and a banner indicates truncation. Defaults to 2000 — set higher with
+     * caution; React reconciliation cost scales linearly.
+     */
+    maxLines?: number;
+    /**
+     * Screen-reader live-region politeness for newly appended lines. Defaults
+     * to `"off"` because build-log streams can be high-volume; opt into
+     * `"polite"` only when running the build in the foreground.
+     */
+    live?: "off" | "polite";
+}
+/**
+ * BuildLogStream — terminal-like log viewer with timestamps + level coloring.
+ *
+ * Used in Code workspace and PaaS deployment views. Geist Mono throughout.
+ * Lines fade in via animate-fade-in-up on mount; new lines (when prepended/appended)
+ * are not animated to avoid feedback noise (consumer's responsibility to render
+ * incrementally if needed).
+ */
+declare const BuildLogStream: react.ForwardRefExoticComponent<BuildLogStreamProps & react.RefAttributes<HTMLDivElement>>;
+interface Metric {
+    /**
+     * Short label, e.g. "Requests/s", "p95 latency", "Error rate".
+     */
+    label: string;
+    /**
+     * Pre-formatted value string, e.g. "1.2k", "182ms", "0.03%".
+     * Consumer formats; the component does not parse.
+     */
+    value: string;
+    /**
+     * Optional unit suffix appended after value with .9 opacity.
+     */
+    unit?: string;
+    /**
+     * Optional change vs comparison period, e.g. "+12%", "-4ms", "+0.01pp".
+     */
+    delta?: string;
+    /**
+     * If true, delta is "good" (success color); if false, "bad" (destructive).
+     * If omitted, delta is rendered in muted (neutral).
+     *
+     * Caller decides semantics — "more requests" is good but "more errors" is bad.
+     */
+    deltaGood?: boolean;
+    /**
+     * Optional sparkline data, 0..1 normalized. Consumer is responsible for normalization.
+     */
+    sparkline?: number[];
+    /**
+     * Optional onClick to drill into the metric.
+     */
+    onClick?: () => void;
+    /**
+     * Optional override for the clickable tile's accessible name. When the
+     * tile is interactive (`onClick` set), defaults to `View <label> details`.
+     * Has no effect when `onClick` is absent (tile is rendered as a non-link
+     * `<div>` with no button semantics). T4.3.
+     */
+    actionLabel?: string;
+}
+interface MetricsPanelProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    title?: ReactNode;
+    description?: ReactNode;
+    metrics: Metric[];
+    /**
+     * Grid columns. Defaults to auto-fit ~180px min.
+     */
+    columns?: number;
+}
+/**
+ * MetricsPanel — grid of metric tiles for observability dashboards.
+ *
+ * Visual: each tile is a soft surface with a big value (font-display),
+ * label uppercase muted, optional delta with arrow icon + tone color,
+ * optional CSS-only sparkline drawn as flexed bars.
+ *
+ * No external chart lib — keeps the registry copy-pasteable.
+ */
+declare const MetricsPanel: react.ForwardRefExoticComponent<MetricsPanelProps & react.RefAttributes<HTMLDivElement>>;
+interface SocialProvider {
+    id: string;
+    label: ReactNode;
+    /** Icon component (e.g. brand-specific SVG). */
+    icon: IconComponent;
+}
+interface SocialAuthRowProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
+    providers: SocialProvider[];
+    onSelect?: (id: string) => void;
+    /**
+     * Stack vertically instead of horizontally (single-column flow).
+     */
+    vertical?: boolean;
+}
+/**
+ * SocialAuthRow — row of OAuth provider buttons.
+ *
+ * Stateless; caller wires the redirect on `onSelect`. Buttons share Theo button
+ * styling but with provider icon prominently on the left.
+ */
+declare const SocialAuthRow: react.ForwardRefExoticComponent<SocialAuthRowProps & react.RefAttributes<HTMLDivElement>>;
+interface LoginSplitProps extends HTMLAttributes<HTMLDivElement> {
+    /** Left pane content — form, brand, etc. */
+    left: ReactNode;
+    /** Right pane content — illustration, marketing, social proof. */
+    right: ReactNode;
+    /**
+     * Optional footer rendered below both panes.
+     */
+    footer?: ReactNode;
+    /**
+     * Reverse the split (form on the right). Default = form left.
+     */
+    reverse?: boolean;
+}
+/**
+ * LoginSplit — 50/50 split layout shell.
+ *
+ * Used for the auth flow. Two slots (`left`, `right`); the right pane has a
+ * subtle violet wash so the illustration sits inside Theo identity. Mobile
+ * collapses to single column.
+ */
+declare const LoginSplit: react.ForwardRefExoticComponent<LoginSplitProps & react.RefAttributes<HTMLDivElement>>;
+interface SkillsListProps extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "onToggle"> {
+    skills: Skill[];
+    title?: ReactNode;
+    /** If true, shows a search input above the grid. */
+    searchable?: boolean;
+    onToggle?: (id: string, next: SkillState) => void;
+}
+/**
+ * SkillsList — grid of SkillCards with optional search + source filter chips.
+ * Pairs with claw-code's `claw skills` inventory but visual.
+ */
+declare const SkillsList: react.ForwardRefExoticComponent<SkillsListProps & react.RefAttributes<HTMLDivElement>>;
+/**
+ * SkillEditor — form for creating or editing a Skill.
+ */
+type SkillDraft = Omit<Skill, "id"> & {
+    id?: string;
+    instructions?: string;
+};
+interface SkillEditorProps extends Omit<HTMLAttributes<HTMLFormElement>, "onSubmit" | "onChange"> {
+    initial?: Partial<Skill> & {
+        instructions?: string;
+    };
+    onSave: (draft: SkillDraft) => void;
+    onCancel?: () => void;
+    onDelete?: () => void;
+}
+declare function SkillEditor({ className, initial, onSave, onCancel, onDelete, ...formProps }: SkillEditorProps): react_jsx_runtime.JSX.Element;
+/**
+ * RuleEditor — form for creating or editing a Rule (behavior instruction
+ * injected into the system prompt).
+ */
+type RuleDraft = Omit<Rule, "id" | "updatedAt"> & {
+    id?: string;
+    tags?: string[];
+};
+interface RuleEditorProps extends Omit<HTMLAttributes<HTMLFormElement>, "onSubmit" | "onChange"> {
+    initial?: Partial<Rule>;
+    onSave: (draft: RuleDraft) => void;
+    onCancel?: () => void;
+    onDelete?: () => void;
+}
+declare function RuleEditor({ className, initial, onSave, onCancel, onDelete, ...formProps }: RuleEditorProps): react_jsx_runtime.JSX.Element;
+interface CronJobsListProps extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "onToggle"> {
+    jobs: CronJob[];
+    title?: ReactNode;
+    onAdd?: () => void;
+    onRunNow?: (id: string) => void;
+    onToggle?: (id: string, enabled: boolean) => void;
+    onRemove?: (id: string) => void;
+}
+/**
+ * CronJobsList — grid of CronJobCards with a sticky "new job" action.
+ */
+declare const CronJobsList: react.ForwardRefExoticComponent<CronJobsListProps & react.RefAttributes<HTMLDivElement>>;
+interface MCPServerListProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    servers: MCPServer[];
+    title?: ReactNode;
+    onAdd?: () => void;
+    onRestart?: (id: string) => void;
+    onDisconnect?: (id: string) => void;
+}
+/**
+ * MCPServerList — grouped MCP server inventory with status filter chips.
+ * Surfaces degraded/disconnected servers prominently so the user can act.
+ */
+declare const MCPServerList: react.ForwardRefExoticComponent<MCPServerListProps & react.RefAttributes<HTMLDivElement>>;
+/**
+ * AgentEditor — form for creating or editing an Agent persona.
+ */
+interface AgentDraft extends Omit<AgentProfileDescriptor, "id"> {
+    id?: string;
+    systemPrompt?: string;
+    model?: string;
+    allowedTools?: string[];
+    skillIds?: string[];
+    /** Modes this agent is visible in. Omit / empty = global (all modes). */
+    modes?: Mode[];
+}
+interface AgentEditorProps extends Omit<HTMLAttributes<HTMLFormElement>, "onSubmit" | "onChange"> {
+    initial?: Partial<AgentDraft>;
+    models?: Array<{
+        id: string;
+        label: string;
+    }>;
+    skills?: Array<{
+        id: string;
+        label: string;
+    }>;
+    onSave: (draft: AgentDraft) => void;
+    onCancel?: () => void;
+    onDelete?: () => void;
+}
+declare function AgentEditor({ className, initial, models, skills, onSave, onCancel, onDelete, ...formProps }: AgentEditorProps): react_jsx_runtime.JSX.Element;
+/**
+ * ApprovalCard — inline pause-and-ask card for an agent stream.
+ *
+ * Used when the agent wants to perform an action that requires the user's
+ * consent (run a destructive command, use a new tool, edit outside the
+ * sandbox, etc.). Renders as a bordered card inside the conversation stream,
+ * pauses the visual flow, and exposes Deny / Approve / Always-allow actions.
+ */
+declare const cardVariants: (props?: ({
+    severity?: "warning" | "destructive" | "info" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type ApprovalSeverity = NonNullable<VariantProps<typeof cardVariants>["severity"]>;
+interface ApprovalCardProps extends Omit<HTMLAttributes<HTMLElement>, "title">, VariantProps<typeof cardVariants> {
+    /** Short headline ("Run destructive command?"). */
+    title: ReactNode;
+    /** What is being requested (command, file path, tool name…). Renders monospace. */
+    request: ReactNode;
+    /** Optional explanation line under the request. */
+    description?: ReactNode;
+    /** Optional expandable details (e.g. full command, file diff). */
+    details?: ReactNode;
+    /** Pressing the primary "Approve" button. */
+    onApprove?: () => void;
+    /** Pressing "Deny". */
+    onDeny?: () => void;
+    /** Pressing "Always allow" — optional tertiary action. */
+    onAlways?: () => void;
+    /** Customise the icon shown in the corner. */
+    icon?: IconComponent;
+}
+declare const ApprovalCard: react.ForwardRefExoticComponent<ApprovalCardProps & react.RefAttributes<HTMLElement>>;
+type ComposerMode = "chat" | "code" | "infra";
+interface ChatComposerProps extends Omit<HTMLAttributes<HTMLFormElement>, "onSubmit"> {
+    mode?: ComposerMode;
+    value: string;
+    onValueChange: (next: string) => void;
+    onSubmit?: (value: string) => void;
+    /**
+     * If true, the composer is in "agent running" state — Send becomes a Stop button.
+     */
+    running?: boolean;
+    onStop?: () => void;
+    /**
+     * Slot above the textarea — used for the folder selector in Infra mode.
+     */
+    contextSlot?: ReactNode;
+    /**
+     * Slot above the textarea for attachments / chips.
+     */
+    attachmentsSlot?: ReactNode;
+    /**
+     * Slot on the bottom-left of the action row (e.g. custom toggles).
+     * Overrides the default attach button entirely when provided.
+     */
+    leadingActions?: ReactNode;
+    /**
+     * Slot on the bottom-right (e.g. model selector). Send/stop is appended after this.
+     */
+    trailingActions?: ReactNode;
+    /**
+     * Optional attach-file callback. If omitted (and `leadingActions` is also
+     * omitted), no attach button is rendered. This avoids fake affordances per
+     * Quality Gate §7.
+     */
+    onAttach?: () => void;
+    /**
+     * Optional voice-input callback. If omitted, no mic button is rendered.
+     * Same rationale as `onAttach`.
+     */
+    onVoiceInput?: () => void;
+    /**
+     * Accessible label for the textarea. Falls back to a mode-aware default.
+     */
+    textareaLabel?: string;
+    /**
+     * Textarea placeholder. Defaults change by mode.
+     */
+    placeholder?: string;
+    /**
+     * Extra textarea props (rows, maxLength…).
+     */
+    textareaProps?: Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "value" | "onChange">;
+}
+/**
+ * ChatComposer — message input area, shared by Chat / Code / Infra modes.
+ *
+ * Visual:
+ *   - chat / infra → soft card with violet ring on focus, generous padding
+ *   - code          → compact dense form with mono font, slash prefix hint
+ *
+ * Stateless: caller controls `value` + handles `onSubmit`. Submit fires on Enter
+ * (without Shift). Shift+Enter inserts a newline.
+ *
+ * Optional affordances (mic, attach) are opt-in via `onVoiceInput` / `onAttach`
+ * — Quality Gate §7 forbids rendering fake controls without behavior.
+ */
+declare const ChatComposer: react.ForwardRefExoticComponent<ChatComposerProps & react.RefAttributes<HTMLFormElement>>;
+/**
+ * AgentComposer — ChatComposer + slash-command / @file / #memory triggers.
+ *
+ * Wraps ChatComposer and watches the value for three trigger characters:
+ *   `/` → slash commands (`/clear`, `/help`, …)
+ *   `@` → file references (`@src/components/Foo.tsx`)
+ *   `#` → memory entries (`#alignment-grid`)
+ *
+ * Detection is string-based — no textarea ref required. A trigger is active
+ * iff the value ends with a token of the form `[\s|^]([/@#])[^\s]*` (i.e. a
+ * trigger char preceded by start-of-string or whitespace, with no space
+ * after).
+ *
+ * The consumer provides the candidate items per trigger. On selection the
+ * trailing token is replaced with the chosen value plus a trailing space.
+ */
+type ItemsProvider = (query: string) => MentionItem[];
+interface AgentComposerProps extends ComponentProps<typeof ChatComposer> {
+    /** Items shown when `/` is the active trigger. */
+    commands?: MentionItem[] | ItemsProvider;
+    /** Items shown when `@` is the active trigger. */
+    files?: MentionItem[] | ItemsProvider;
+    /** Items shown when `#` is the active trigger. */
+    memories?: MentionItem[] | ItemsProvider;
+    /**
+     * What text gets inserted when an item is picked. Defaults to
+     * `${trigger}${item.label}` (assumes `label` is a string). Override to
+     * insert a token different from the visible label (e.g. include path,
+     * id, …).
+     */
+    resolveInsertText?: (item: MentionItem, trigger: MentionTrigger) => string;
+    /** Optional slot for the empty-state copy per trigger. */
+    emptyLabels?: Partial<Record<MentionTrigger, ReactNode>>;
+    /** Outer wrapper className (the relative positioning anchor for the menu). */
+    containerClassName?: string;
+}
+declare function AgentComposer({ value, onValueChange, commands, files, memories, resolveInsertText, emptyLabels, containerClassName, className, textareaProps, ...chatComposerProps }: AgentComposerProps): react_jsx_runtime.JSX.Element;
+/**
+ * AgentStream — the canonical conversation surface for a code agent.
+ *
+ * Interleaves chat messages (user + assistant), tool invocations, approval
+ * gates, errors, and the live streaming indicator. Mirrors how Claude Code
+ * presents work to the user: conversation-centric, tool calls embedded,
+ * approvals pause the flow inline, errors surface where they happen.
+ *
+ * Items are rendered in array order. The consumer fully controls the data;
+ * AgentStream is a pure presentational composite over its child primitives.
+ */
+interface ToolCallStreamItem {
+    kind: "tool-call";
+    id: string;
+    tool: ReactNode;
+    icon?: IconComponent;
+    target?: ReactNode;
+    status: ToolCallStatus;
+    output?: ReactNode;
+    defaultExpanded?: boolean;
+    timestamp?: ReactNode;
+}
+interface ApprovalStreamItem {
+    kind: "approval";
+    id: string;
+    severity?: ApprovalSeverity;
+    title: ReactNode;
+    request: ReactNode;
+    description?: ReactNode;
+    details?: ReactNode;
+    onApprove?: () => void;
+    onDeny?: () => void;
+    onAlways?: () => void;
+}
+interface ErrorStreamItem {
+    kind: "error";
+    id: string;
+    errorKind?: AgentErrorKind;
+    title: ReactNode;
+    detail?: ReactNode;
+    actions?: ReactNode;
+    timestamp?: ReactNode;
+}
+interface StreamingStreamItem {
+    kind: "streaming";
+    id: string;
+    model?: ReactNode;
+    partial?: ReactNode;
+}
+interface MessageStreamItem {
+    kind: "message";
+    id: string;
+    message: Message;
+}
+interface CustomStreamItem {
+    kind: "custom";
+    id: string;
+    /** Arbitrary node — escape hatch for inline diff cards, etc. */
+    node: ReactNode;
+}
+type AgentStreamItem = MessageStreamItem | ToolCallStreamItem | ApprovalStreamItem | ErrorStreamItem | StreamingStreamItem | CustomStreamItem;
+interface AgentStreamProps extends HTMLAttributes<HTMLDivElement> {
+    items: AgentStreamItem[];
+}
+declare const AgentStream: react.ForwardRefExoticComponent<AgentStreamProps & react.RefAttributes<HTMLDivElement>>;
+interface AgentTimelineProps extends HTMLAttributes<HTMLOListElement> {
+    events: AgentEvent$1[];
+    /**
+     * If true, events with `detail` are collapsible.
+     */
+    collapsible?: boolean;
+    /**
+     * Renders a vertical line connecting events. Default true.
+     */
+    showLine?: boolean;
+}
+/**
+ * AgentTimeline — vertical list of agent events.
+ *
+ * Visual: optional thin border-left running through the column, with each
+ * AgentEvent slightly indented from the line. Events animate in via fade-in-up
+ * when first mounted.
+ */
+declare const AgentTimeline: react.ForwardRefExoticComponent<AgentTimelineProps & react.RefAttributes<HTMLOListElement>>;
+interface TaskHeaderProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    title: ReactNode;
+    status?: TaskStatus;
+    /**
+     * If provided, a chevron is shown next to the title and clicking it fires this callback.
+     * Used as the "expand task metadata" affordance in the Infra shell.
+     */
+    onToggle?: () => void;
+    /** Right-side actions (e.g. cancel task, close panel). */
+    actions?: ReactNode;
+}
+/**
+ * TaskHeader — title bar for a task pane.
+ *
+ * Visual: display-md title with chevron + optional status badge with pulse + actions slot.
+ */
+declare const TaskHeader: react.ForwardRefExoticComponent<TaskHeaderProps & react.RefAttributes<HTMLElement>>;
+interface PermissionModalLabels {
+    /** "Cancel" button. */
+    cancel: ReactNode;
+    /** "Always allow" tertiary button. */
+    always: ReactNode;
+    /** "Allow once" primary button. */
+    allow: ReactNode;
+    /** Inline label rendered before the operation list inside the body card. */
+    requestedOps: ReactNode;
+}
+interface PermissionModalProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    request: PermissionRequest;
+    /**
+     * Fires when the user picks a decision. The modal does NOT auto-close;
+     * caller decides whether the decision should dismiss the modal.
+     */
+    onDecide: (decision: PermissionDecision) => void;
+    /** Override the modal title. Defaults to "Allow Theo to {ops} files in {path}?". */
+    title?: ReactNode;
+    /** Override the modal description (body lead text). */
+    description?: ReactNode;
+    /** Override the verb used for each operation in the default copy. */
+    operationLabels?: Partial<Record<PermissionOperation, string>>;
+    /** Override button text + inline labels. Useful for i18n. */
+    labels?: Partial<PermissionModalLabels>;
+}
+/**
+ * PermissionModal — local-files access prompt built on Dialog.
+ *
+ * Three actions: Cancel (denied), Always allow, Allow once. Per WIREMOCKS §5,
+ * the path is shown in the title (not hidden in body) and destructive
+ * operations are listed inline.
+ *
+ * All visible text can be overridden via `title`, `description`,
+ * `operationLabels`, and `labels`. Defaults are English; pass overrides for
+ * other locales.
+ */
+declare function PermissionModal({ open, onOpenChange, request, onDecide, title, description, operationLabels, labels, }: PermissionModalProps): react_jsx_runtime.JSX.Element;
+interface PreviewPanelProps extends Omit<HTMLAttributes<HTMLElement>, "content"> {
+    url: string;
+    onUrlChange?: (next: string) => void;
+    onBack?: () => void;
+    onForward?: () => void;
+    onReload?: () => void;
+    /**
+     * Region rendered as the preview body. Typically an <iframe>.
+     */
+    content: ReactNode;
+    /**
+     * Optional logs section rendered below the preview (e.g. dev server output).
+     */
+    logsSlot?: ReactNode;
+}
+/**
+ * PreviewPanel — browser preview with controls + integrated logs slot.
+ *
+ * The Code workspace shows live dev-server URL + HMR logs side-by-side; this
+ * panel keeps both in a single card so the user doesn't switch contexts.
+ */
+declare const PreviewPanel: react.ForwardRefExoticComponent<PreviewPanelProps & react.RefAttributes<HTMLElement>>;
+type DeploymentStatus = "queued" | "building" | "deploying" | "live" | "failed" | "cancelled";
+interface Deployment {
+    id: string;
+    status: DeploymentStatus;
+    environment: string;
+    branch: string;
+    commitSha: string;
+    commitMessage: string;
+    author?: {
+        name: string;
+        avatarUrl?: string;
+    };
+    duration?: string;
+    timeAgo: string;
+}
+interface DeploymentRowProps extends HTMLAttributes<HTMLDivElement> {
+    deployment: Deployment;
+    actions?: ReactNode;
+}
+/**
+ * DeploymentRow — one row in a deployment list (table-ish layout).
+ *
+ * Inspired by Vercel/Railway deployment lists. Composes Badge + Badge.Dot for status,
+ * mono font for SHA/branch, muted-foreground for metadata.
+ */
+declare const DeploymentRow: react.ForwardRefExoticComponent<DeploymentRowProps & react.RefAttributes<HTMLDivElement>>;
+interface Project {
+    id: string;
+    name: string;
+    description?: string;
+    framework?: string;
+    branch: string;
+    commitSha: string;
+    commitMessage?: string;
+    status: DeploymentStatus;
+    url?: string;
+    region?: string;
+    lastDeployedAt: string;
+}
+interface ProjectCardProps extends HTMLAttributes<HTMLAnchorElement | HTMLDivElement> {
+    project: Project;
+    href?: string;
+    actions?: ReactNode;
+    /**
+     * Show the project description and commit message. Default true.
+     */
+    detailed?: boolean;
+}
+/**
+ * ProjectCard — surface for a project in a project listing.
+ *
+ * Light hover lift (no shadow inflation), violet ring on focus,
+ * status badge with optional pulse, framework + region in muted footer.
+ */
+declare const ProjectCard: react.ForwardRefExoticComponent<ProjectCardProps & react.RefAttributes<HTMLElement>>;
+type EnvScope = "production" | "staging" | "preview" | "all" | string;
+interface EnvVar {
+    id: string;
+    key: string;
+    /**
+     * Secret value. If `masked` is true, value is hidden by default.
+     */
+    value: string;
+    masked?: boolean;
+    scope?: EnvScope;
+    /**
+     * Read-only marker (e.g. system-managed vars like THEO_DEPLOY_ID).
+     */
+    readonly?: boolean;
+}
+interface EnvVarEditorProps extends HTMLAttributes<HTMLDivElement> {
+    vars: EnvVar[];
+    onAdd?: (entry: Omit<EnvVar, "id">) => void;
+    onRemove?: (id: string) => void;
+    /**
+     * Available scope options for the add form. Defaults to a sensible PaaS set.
+     */
+    scopeOptions?: EnvScope[];
+}
+/**
+ * EnvVarEditor — table-like editor for environment variables.
+ *
+ * Mono font on keys/values, mask toggle on secret values, scope badge,
+ * remove + copy actions. Add form sits above the list.
+ *
+ * Stateless: caller controls the list and reacts to onAdd / onRemove.
+ */
+declare const EnvVarEditor: react.ForwardRefExoticComponent<EnvVarEditorProps & react.RefAttributes<HTMLDivElement>>;
+interface PreviewService {
+    /** Service name e.g. "api", "web", "worker". */
+    name: string;
+    /** Live URL or null if not exposed (worker). */
+    url?: string;
+    status: DeploymentStatus;
+}
+interface PreviewEnv {
+    id: string;
+    prNumber: number;
+    prTitle: string;
+    branch: string;
+    author?: {
+        name: string;
+        avatarUrl?: string;
+    };
+    services: PreviewService[];
+    createdAt: string;
+}
+interface PreviewEnvCardProps extends HTMLAttributes<HTMLDivElement> {
+    env: PreviewEnv;
+    actions?: ReactNode;
+}
+/**
+ * PreviewEnvCard — preview environment card surfacing all services from one PR.
+ *
+ * Theo's killer feature: full-stack preview environments. The card shows:
+ *   - PR number + title at the top
+ *   - branch + author in the metadata row
+ *   - one badge per service with its own status + URL
+ *   - bottom action row (Open, Promote, Delete)
+ */
+declare const PreviewEnvCard: react.ForwardRefExoticComponent<PreviewEnvCardProps & react.RefAttributes<HTMLDivElement>>;
+type DomainStatus = "verified" | "pending" | "invalid";
+interface Domain {
+    id: string;
+    hostname: string;
+    status: DomainStatus;
+    primary?: boolean;
+    /**
+     * TLS state. If true, certificate is provisioned & valid.
+     */
+    tls?: boolean;
+    /**
+     * DNS record the user must add to verify ownership.
+     */
+    verificationRecord?: {
+        type: "TXT" | "CNAME" | "A";
+        name: string;
+        value: string;
+    };
+}
+interface DomainConfigProps extends HTMLAttributes<HTMLDivElement> {
+    domains: Domain[];
+    onAdd?: (hostname: string) => void;
+    onRemove?: (id: string) => void;
+    onSetPrimary?: (id: string) => void;
+}
+/**
+ * DomainConfig — manage custom domains for a project.
+ *
+ * Shows: hostname, status, TLS, primary flag, and verification DNS record when pending.
+ * Common in every PaaS dashboard (Vercel, Railway, Render).
+ */
+declare const DomainConfig: react.ForwardRefExoticComponent<DomainConfigProps & react.RefAttributes<HTMLDivElement>>;
+interface RollbackTarget {
+    id: string;
+    version: string;
+    commitSha: string;
+    commitMessage: string;
+    deployedAt: string;
+    isCurrent?: boolean;
+    /**
+     * Optional duration of the deploy (e.g. "24s") for context.
+     */
+    duration?: string;
+}
+interface RollbackUIProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Deployment history, newest first. The current deploy should have `isCurrent: true`.
+     */
+    history: RollbackTarget[];
+    /**
+     * Fires when user confirms rollback to a specific target.
+     */
+    onRollback?: (targetId: string) => void | Promise<void>;
+}
+/**
+ * RollbackUI — instant rollback selector showing recent versions.
+ *
+ * The current deploy is marked, every other version offers a "Roll back" button.
+ * On select, the row enters confirm state (Confirm / Cancel buttons inline) before
+ * firing onRollback. This protects against accidental rollbacks while still being one click.
+ */
+declare const RollbackUI: react.ForwardRefExoticComponent<RollbackUIProps & react.RefAttributes<HTMLDivElement>>;
+interface CommandItem {
+    id: string;
+    label: ReactNode;
+    /** Optional secondary line (path, hint, shortcut). */
+    hint?: ReactNode;
+    /** Optional group name. Items with the same group are visually grouped. */
+    group?: string;
+    /** Optional icon. */
+    icon?: IconComponent;
+    /** Optional searchable plain-text used by the cmdk ranker. Falls back to `label` when string. */
+    searchable?: string;
+}
+interface CommandPaletteProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    items: CommandItem[];
+    onSelect: (id: string) => void;
+    placeholder?: string;
+    emptyMessage?: ReactNode;
+    /**
+     * Optional custom filter score (0 = no match, > 0 = match). Receives the
+     * `value` (the item's searchable text) and the current `search` query.
+     * Defaults to cmdk's built-in fuzzy ranker which prioritizes substring +
+     * word-boundary + consecutive matches.
+     */
+    filter?: (value: string, search: string) => number;
+}
+/**
+ * CommandPalette — Cmd+K-style global launcher with full keyboard navigation.
+ *
+ * Built on `cmdk` (the de-facto shadcn pattern) + Theo Dialog. Provides
+ * out-of-the-box: ArrowUp/ArrowDown navigation, Enter selection, Escape close,
+ * Home/End, active-item highlight via `data-selected`, and fuzzy ranking.
+ *
+ * Stateless: caller owns `open` / `onOpenChange` / `items`. Selecting an item
+ * fires `onSelect(id)` and closes the dialog.
+ */
+declare function CommandPalette({ open, onOpenChange, items, onSelect, placeholder, emptyMessage, filter, }: CommandPaletteProps): react_jsx_runtime.JSX.Element;
+export { ALL_MODES, AgentComposer, type AgentDraft, AgentEditor, AgentErrorCard, type AgentErrorKind, AgentEvent, type AgentEvent$1 as AgentEventModel, type AgentEventStatus, type AgentEventType, AgentHandoff, AgentProfile, type AgentProfileDescriptor, AgentStartingState, AgentStream, type AgentStreamItem, AgentStreaming, AgentTimeline, ApprovalCard, type ApprovalSeverity, ArtifactPreview, type Attachment, AttachmentChip, type AuditActorKind, type AuditEntry, AuditLogEntry, type AuditSeverity, AutoCompactNotice, Avatar, BadgeWithDot as Badge, type BadgeProps, BrowserControls, BuildLogStream, Button, type ButtonProps, type Capability, CapabilityIndicator, type CapabilityState, Card, ChatComposer, ChatMessage, ChatThread, Checkbox, type ColorScale, type CommandItem, CommandPalette, type ComposerMode, ContextCard, ContextWindowBar, CostMeter, type CreatedFile, CreatedFilesCard, type CronJob, CronJobCard, type CronJobStatus, CronJobsList, type Deployment, DeploymentRow, type DeploymentStatus, Dialog, type DiffHunk, type DiffLine, type DiffLineKind, DiffViewer, type Domain, DomainConfig, type DomainStatus, EmptyState, type EnvScope, type EnvVar, EnvVarEditor, FolderContextCard, type FolderEntry, FolderSelector, FormField, HOOK_EVENTS, type HandoffParty, HookConfig, type HookEntry, type HookEvent, type HookEventEntry, HookEventLog, type HookEventResult, Input, type InputProps, type IntentOption, IntentSelector, Label, type Lane, LaneBoard, type LaneCard, type LaneState, type LogLevel, type LogLine, LoginSplit, type MCPServer, MCPServerCard, MCPServerList, type MCPServerStatus, MODE_LABEL, MemoryEditor, type MemoryLayer, type MemoryScope, type MentionItem, MentionMenu, type MentionTrigger, type Message, type MessageRole, type Metric, MetricsPanel, type Mode, type ModelCapabilityFlag, ModelCard, type ModelInfo, type ModelOption, ModelSelector, type PermissionDecision, type PermissionDecisionKind, PermissionMatrix, PermissionModal, type PermissionOperation, type PermissionRequest, type PermissionRule, type PlanNode, type PlanNodeStatus, type PreviewEnv, PreviewEnvCard, PreviewPanel, type PreviewService, ProgressChecklist, type Project, ProjectCard, type ProjectStatus, ProjectSwitcher, type QuickAction, QuickActionChips, RadioGroup, type RailStep, type RecentFolder, RecentFoldersList, type RollbackTarget, RollbackUI, type Rule, RuleCard, RuleEditor, type RuleScope, type RuleState, RunStats, type RunningTaskItem, type RunningTaskStatus, RunningTasksPanel, ScrollArea, Select, SessionListItem, type SessionMode, type SessionRunStatus, type SessionStatus, type SessionSummary, SessionTimeline, Sheet, Sidebar, Skeleton, type Skill, SkillCard, SkillEditor, type SkillSource, type SkillState, SkillsList, SocialAuthRow, type SocialProvider, StepsRail, SubAgentDispatch, type SubAgentRun, type SubAgentState, Switch, SystemPromptEditor, Tabs, TaskHeader, TaskNode, TaskPlan, type TaskSource, type TaskStatus, type TaskStep, type TaskStepStatus, type TerminalLine, TerminalPanel, Textarea, type TextareaProps, type Theme, type ThemeFonts, type ThemeMode, ThemeProvider, ThemeScript, ThemeSwitcher, TheoUIProvider, type TheoUIProviderProps, Toast, type ToastVariant, Toaster, TokenUsageChart, type TokenUsagePoint, ToolCall, ToolCallCard, type ToolCallStatus, type ToolEnablement, type ToolEntry, ToolResult, ToolsList, TooltipWithStatics as Tooltip, TopNav, auroraTerminal, avatarVariants, badgeVariants, builtinThemes, buttonVariants, capabilityPresets, classicPaper, cn, modelCapabilityPresets, sheetVariants, useTheme, useToast, violetForge };