@distri/react 0.3.5 → 0.3.7

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { Agent as Agent$1, DistriChatMessage, DistriBaseTool, ToolExecutionOptions, DistriMessage, DistriPart, AgentDefinition, DistriThread, ThreadListParams, AgentUsageInfo, DistriFnTool, ToolCall, ToolResult, PlanStep, TodoItem, DistriConfiguration, DistriClient, DistriClientConfig, SpeechToTextConfig, StreamingTranscriptionOptions, ConfigurationMeta, ConfigurationResponse, MessageReadStatus, MessageVoteSummary, MessageVote, DistriEvent, ImagePart } from '@distri/core';
+import { Agent as Agent$1, DistriChatMessage, DistriBaseTool, ToolExecutionOptions, DistriMessage, DistriPart, AgentDefinition, AgentUsageInfo, ThreadListParams, DistriThread, ProviderModelsStatus, DistriFnTool, ToolCall, ToolResult, PlanStep, TodoItem, TtsSpeechRequest, TtsSpeechResponse, DistriConfiguration, ContextHealth, DistriClient, DistriClientConfig, SpeechToTextConfig, ConfigurationMeta, ConfigurationResponse, MessageReadStatus, MessageVoteSummary, MessageVote, ContextCompactionEvent, WorkflowDefinition, StepResult, StepStatus, WorkflowRunnerOptions, WorkflowStep, ExecutionContext, WorkflowEvent, WorkflowStatus, DistriEvent, ImagePart } from '@distri/core';
 import * as React$1 from 'react';
 import React__default, { ReactNode } from 'react';
 import * as zustand from 'zustand';
@@ -103,6 +103,17 @@ interface UseThreadMessagesOptions {
     threadId: string | null;
 }
 
+interface UseModelsResult {
+    providers: ProviderModelsStatus[];
+    loading: boolean;
+    error: Error | null;
+    refetch: () => Promise<void>;
+}
+/**
+ * Hook to fetch available models grouped by provider with configuration status.
+ */
+declare function useModels(): UseModelsResult;
+
 type LoadingAnimationPreset = 'typing-dots' | 'pulse-ring' | 'teacher-typing' | 'spinner' | 'wave';
 interface LoadingAnimationConfig {
     /** Preset animation style */
@@ -119,6 +130,8 @@ interface LoadingAnimationConfig {
     label?: string;
     /** Size variant */
     size?: 'sm' | 'md' | 'lg';
+    /** Words to cycle through during loading. Pass [] for dots only. */
+    cycleWords?: string[];
 }
 interface LoadingAnimationProps {
     config?: LoadingAnimationConfig;
@@ -158,6 +171,63 @@ type ToolRendererProps = {
 };
 type ToolRendererMap = Record<string, (props: ToolRendererProps) => React__default.ReactNode>;
 type ChatCustomRenderers = never;
+type RenderingMode = 'minimal' | 'rich';
+interface ToolSummary {
+    verb: string;
+    subject?: string;
+    detail?: string;
+}
+type SummaryFn = (input: Record<string, unknown>, result?: ToolResult) => ToolSummary;
+interface RendererConfig {
+    rendering?: RenderingMode;
+    toolSummaryOverrides?: Record<string, SummaryFn>;
+}
+interface DeveloperTraceConfig {
+    /** Host app callback used by the built-in traces controls to open a trace surface. */
+    open: (threadId: string) => void;
+}
+interface DeveloperDiagnoseConfig {
+    /** Agent to receive diagnose requests. Defaults to `distri`. */
+    agentId?: string;
+    /** Optional fixed diagnose thread id or thread id builder. */
+    threadId?: string | ((threadId: string) => string);
+    /** Builds the diagnose prompt. Defaults to a prompt that targets the current thread. */
+    promptBuilder?: (threadId: string) => string;
+    /** Optional label shown on locally injected diagnose user messages. */
+    label?: string;
+}
+interface DeveloperMode {
+    /** Enable built-in traces controls and route them through the configured trace opener. */
+    traces?: boolean | DeveloperTraceConfig;
+    /** @deprecated Use `traces={{ open }}` instead. */
+    onShowTrace?: (threadId: string) => void;
+    /** Show verbose toggle button in developer toolbar */
+    verbosity?: boolean;
+    /** Show tools panel listing all agent tools */
+    tools?: boolean;
+    /** Enable diagnose mode, which sends a parallel diagnose request on a separate thread. */
+    diagnose?: boolean | DeveloperDiagnoseConfig;
+}
+interface ChatSessionSettings {
+    verbose: boolean;
+    rendering: RenderingMode;
+    audioEnabled: boolean;
+}
+type ChatCommandId = 'verbose' | 'audio' | 'reset';
+interface ChatCommand {
+    id: ChatCommandId;
+    label: string;
+    description: string;
+    /** Emoji or display character for the command, e.g. '📊' */
+    icon: string;
+    type: 'toggle' | 'action';
+    currentValue?: boolean;
+}
+interface ChatCommandEvent {
+    command: ChatCommandId;
+    value?: boolean;
+    timestamp: number;
+}
 
 type StreamingIndicator = 'typing' | 'thinking' | 'generating';
 interface ThinkingRendererProps {
@@ -167,9 +237,10 @@ interface ThinkingRendererProps {
     name?: string;
     thoughtText?: string;
 }
-declare const LoadingShimmer: ({ text, className }: {
+declare const LoadingShimmer: ({ text, className, showIcon }: {
     text: string;
     className?: string;
+    showIcon?: boolean;
 }) => react_jsx_runtime.JSX.Element;
 declare const ThinkingRenderer: React__default.FC<ThinkingRendererProps>;
 
@@ -224,6 +295,9 @@ interface ChatState {
     isLoading: boolean;
     error: Error | null;
     debug: boolean;
+    verbose: boolean;
+    audioEnabled: boolean;
+    rendering: RenderingMode;
     tasks: Map<string, TaskState>;
     plans: Map<string, PlanState>;
     steps: Map<string, StepState>;
@@ -231,6 +305,7 @@ interface ChatState {
     currentRunId?: string;
     currentTaskId?: string;
     currentPlanId?: string;
+    currentAgentId?: string;
     messages: DistriChatMessage[];
     streamingIndicator: StreamingIndicator | undefined;
     currentThought?: string;
@@ -252,6 +327,8 @@ interface ChatStateStore extends ChatState {
     setLoading: (isLoading: boolean) => void;
     setError: (error: Error | null) => void;
     setDebug: (debug: boolean) => void;
+    setVerbose: (verbose: boolean) => void;
+    setSessionSettings: (settings: Partial<ChatSessionSettings>) => void;
     setStreamingIndicator: (indicator: StreamingIndicator | undefined) => void;
     setCurrentThought: (thought: string | undefined) => void;
     setBrowserSession: (sessionId: string, viewerUrl?: string, streamUrl?: string) => void;
@@ -291,6 +368,40 @@ interface ChatStateStore extends ChatState {
 }
 declare const useChatStateStore: zustand.UseBoundStore<zustand.StoreApi<ChatStateStore>>;
 
+type TtsMode = 'distri' | 'browser';
+interface TtsConfig {
+    /** Use Distri server-side TTS ('distri') or browser SpeechSynthesis ('browser'). Defaults to 'distri'. */
+    mode?: TtsMode;
+    /** Default voice to use when not specified per-request. */
+    defaultVoice?: string;
+    /** Default speed multiplier (0.25–4.0 for Distri, 0.1–10 for browser). */
+    defaultSpeed?: number;
+    /** Default provider (only used in 'distri' mode). */
+    defaultProvider?: string;
+    /** Default model (only used in 'distri' mode). */
+    defaultModel?: string;
+}
+declare const useTts: (config?: TtsConfig) => {
+    /** Current TTS mode ('distri' or 'browser'). */
+    mode: TtsMode;
+    /** Whether speech is currently being synthesized or played. */
+    isSynthesizing: boolean;
+    /** Synthesize speech. Returns TtsSpeechResponse in distri mode, void in browser mode. */
+    synthesize: (input: string | TtsSpeechRequest) => Promise<TtsSpeechResponse | void>;
+    /** Synthesize and immediately play. Works in both modes. */
+    speak: (input: string | TtsSpeechRequest) => Promise<void>;
+    /** Play audio from a TtsSpeechResponse or Blob. */
+    playAudio: (audio: TtsSpeechResponse | Blob) => Promise<void>;
+    /** Stop any active TTS (browser or server). */
+    stop: () => void;
+    /** Fetch available TTS models (distri mode only). */
+    fetchModels: () => Promise<any[]>;
+    /** Fetch TTS provider definitions (distri mode only). */
+    fetchProviders: () => Promise<any[]>;
+    /** Get browser SpeechSynthesis voices. */
+    getBrowserVoices: () => SpeechSynthesisVoice[];
+};
+
 interface ChatEmptyStateStarter {
     id?: string;
     /** Display label for the starter button */
@@ -339,10 +450,6 @@ interface ChatInstance {
     triggerTool: (toolName: string, input: any) => Promise<void>;
     isStreaming: boolean;
     isLoading: boolean;
-    startStreamingVoice?: () => void;
-    stopStreamingVoice?: () => void;
-    isStreamingVoice?: boolean;
-    streamingTranscript?: string;
 }
 interface ChatEmptyStateController {
     input: string;
@@ -390,27 +497,28 @@ interface ChatProps {
     renderLoadingAnimation?: () => React__default.ReactNode;
     voiceEnabled?: boolean;
     useSpeechRecognition?: boolean;
-    ttsConfig?: {
-        model: 'openai' | 'gemini';
-        voice?: string;
-        speed?: number;
-    };
+    ttsConfig?: TtsConfig;
+    /** Handsfree mode: auto-send after transcription and auto-play TTS responses. */
+    handsfree?: boolean;
     initialInput?: string;
     allowBrowserPreview?: boolean;
     maxWidth?: string;
     className?: string;
     agentId?: string;
     enableHistory?: boolean;
-    /**
-     * Enable debug mode to show developer messages in the chat.
-     * Developer messages are hidden by default.
-     */
-    debug?: boolean;
     /**
      * Enable message feedback (voting) UI on assistant messages.
      * Shows thumbs up/down buttons for rating responses.
      */
     enableFeedback?: boolean;
+    /** Enable slash-command palette in the input */
+    allowCommands?: boolean;
+    /** Initial session settings applied on mount */
+    sessionSettings?: Partial<ChatSessionSettings>;
+    /** Callback fired when a slash command is selected */
+    onCommand?: (event: ChatCommandEvent) => void;
+    /** Developer mode options: traces, verbosity, tools panel, and parallel diagnose mode */
+    developerMode?: DeveloperMode;
 }
 declare const ChatInner: React__default.ForwardRefExoticComponent<ChatProps & React__default.RefAttributes<ChatInstance>>;
 interface ChatContainerProps extends ChatProps {
@@ -421,14 +529,13 @@ interface ChatContainerProps extends ChatProps {
 declare const Chat: React__default.ForwardRefExoticComponent<ChatProps & React__default.RefAttributes<ChatInstance>>;
 
 interface Agent {
-    id: string;
     name: string;
     description?: string;
 }
 interface AgentSelectProps {
     agents: Agent[];
     selectedAgentId?: string;
-    onAgentSelect: (agentId: string) => void;
+    onAgentSelect: (agentName: string) => void;
     className?: string;
     placeholder?: string;
     disabled?: boolean;
@@ -458,12 +565,19 @@ interface ChatInputProps {
     onAddImages?: (files: FileList | File[]) => void;
     voiceEnabled?: boolean;
     onVoiceRecord?: (audioBlob: Blob) => void;
-    onStartStreamingVoice?: () => void;
-    isStreamingVoice?: boolean;
     useSpeechRecognition?: boolean;
     onSpeechTranscript?: (text: string) => void;
+    handsfree?: boolean;
+    onToggleHandsfree?: () => void;
+    verbose?: boolean;
+    onToggleVerbose?: () => void;
+    developerModeControl?: React__default.ReactNode;
+    developerModeStatus?: React__default.ReactNode;
     variant?: 'default' | 'hero';
     theme?: 'light' | 'dark' | 'auto';
+    allowCommands?: boolean;
+    commands?: ChatCommand[];
+    onCommand?: (event: ChatCommandEvent) => void;
 }
 declare const ChatInput: React__default.FC<ChatInputProps>;
 
@@ -554,6 +668,25 @@ interface AskFollowUpOutput {
 declare const ASK_FOLLOW_UP_TOOL_NAME = "ask_follow_up";
 declare function createAskFollowUpTool(): DistriUiTool;
 
+interface ContextIndicatorProps {
+    contextHealth: ContextHealth | null;
+    isCompacting?: boolean;
+    className?: string;
+}
+/**
+ * Visual indicator for context window health.
+ *
+ * Shows a progress bar representing context usage and compaction status.
+ * Can be placed in a chat header, sidebar, or status bar.
+ *
+ * Usage:
+ * ```tsx
+ * const { contextHealth, isCompacting } = useContextHealth();
+ * <ContextIndicator contextHealth={contextHealth} isCompacting={isCompacting} />
+ * ```
+ */
+declare function ContextIndicator({ contextHealth, isCompacting, className, }: ContextIndicatorProps): react_jsx_runtime.JSX.Element | null;
+
 interface DistriContextValue {
     client: DistriClient | null;
     error: Error | null;
@@ -650,51 +783,9 @@ interface UseChatMessagesReturn {
 }
 declare function useChatMessages({ initialMessages, threadId, onError, enabled, }?: UseChatMessagesOptions): UseChatMessagesReturn;
 
-interface TtsRequest {
-    text: string;
-    model: 'openai' | 'gemini';
-    voice?: string;
-    speed?: number;
-}
-interface TtsConfig {
-    baseUrl?: string;
-    accessToken?: string;
-}
-interface StreamingTtsOptions {
-    onAudioChunk?: (audioData: Uint8Array) => void;
-    onTextChunk?: (text: string, isFinal: boolean) => void;
-    onError?: (error: Error) => void;
-    onStart?: () => void;
-    onEnd?: () => void;
-    voice?: string;
-    speed?: number;
-}
-declare const useTts: (config?: TtsConfig) => {
-    synthesize: (request: TtsRequest) => Promise<Blob>;
-    getAvailableVoices: () => Promise<any>;
-    playAudio: (audioBlob: Blob) => Promise<void>;
-    streamingPlayAudio: (audioChunks: Uint8Array[]) => Promise<void>;
-    startStreamingTts: (options?: StreamingTtsOptions) => {
-        sendText: (text: string) => void;
-        stop: () => void;
-    };
-    stopStreamingTts: () => void;
-    isSynthesizing: boolean;
-};
-
 declare const useSpeechToText: () => {
     transcribe: (audioBlob: Blob, config?: SpeechToTextConfig) => Promise<string>;
     isTranscribing: boolean;
-    startStreamingTranscription: (options?: StreamingTranscriptionOptions) => Promise<{
-        sendAudio: (audioData: ArrayBuffer) => void;
-        sendText: (text: string) => void;
-        stop: () => void;
-        close: () => void;
-    }>;
-    stopStreamingTranscription: () => void;
-    sendAudio: (audioData: ArrayBuffer) => void;
-    sendText: (text: string) => void;
-    isStreaming: boolean;
 };
 
 type UseConfigurationResult = {
@@ -808,6 +899,31 @@ interface UseMessageVotesResult {
  */
 declare function useMessageVotes(options: UseMessageVotesOptions): UseMessageVotesResult;
 
+/**
+ * Hook that tracks context health by listening for ContextCompaction events
+ * in the agent event stream.
+ *
+ * Usage:
+ * ```tsx
+ * const { contextHealth, lastCompaction, isCompacting } = useContextHealth();
+ * ```
+ *
+ * This hook maintains a running picture of context usage. It updates whenever
+ * a `context_compaction` event is received from the server event stream.
+ */
+declare function useContextHealth(): {
+    /** Current context health snapshot, or null if no compaction has occurred yet */
+    contextHealth: ContextHealth | null;
+    /** The most recent compaction event */
+    lastCompaction: ContextCompactionEvent | null;
+    /** Whether a compaction just occurred (true for ~1.5s after event) */
+    isCompacting: boolean;
+    /** Call with raw event objects from the stream to update health */
+    handleEvent: (event: Record<string, unknown>) => void;
+    /** Reset state (e.g., when switching threads) */
+    reset: () => void;
+};
+
 /**
  * Wraps a DistriFnTool as a DistriUiTool with DefaultToolActions component
  */
@@ -817,6 +933,431 @@ declare function wrapFnToolAsUiTool(fnTool: DistriFnTool, options?: ToolExecutio
  */
 declare function wrapTools(tools: (DistriFnTool | DistriUiTool)[], options?: ToolExecutionOptions): DistriUiTool[];
 
+interface PathConfig {
+    /** URL pattern with optional `:param` wildcards, e.g. `/api/users/:id` */
+    pattern: string;
+    /** Human-readable label shown in the card header, e.g. "Get User" */
+    label?: string;
+}
+interface HttpToolCardProps {
+    toolCall: ToolCall;
+    state?: ToolCallState;
+    /** Registered path configs for label matching */
+    paths?: PathConfig[];
+}
+declare const HttpToolCard: React__default.FC<HttpToolCardProps>;
+
+/**
+ * Options for creating HTTP tool renderers.
+ */
+interface HttpToolRendererOptions {
+    /**
+     * Tool names to handle (e.g. `['distri_request', 'api_request']`).
+     * Each name gets an entry in the returned `ToolRendererMap`.
+     */
+    toolNames: string[];
+    /**
+     * Registered path patterns with optional display labels.
+     *
+     * Patterns support `:param` wildcards:
+     * ```
+     * { pattern: '/api/users/:id', label: 'Get User' }
+     * ```
+     */
+    paths?: PathConfig[];
+}
+/**
+ * Creates a `ToolRendererMap` that renders HTTP tool calls with an
+ * improved UI — color-coded method badges, request body display,
+ * formatted JSON responses, and status code indicators.
+ *
+ * Registered `paths` let you attach human-readable labels that appear
+ * in the card header when the request URL matches a pattern.
+ *
+ * @example
+ * ```tsx
+ * import { createHttpToolRenderer } from '@distri/react';
+ *
+ * const httpRenderers = createHttpToolRenderer({
+ *   toolNames: ['distri_request', 'api_request'],
+ *   paths: [
+ *     { pattern: '/api/users',     label: 'List Users' },
+ *     { pattern: '/api/users/:id', label: 'Get User' },
+ *   ],
+ * });
+ *
+ * <Chat toolRenderers={{ ...httpRenderers }} />
+ * ```
+ */
+declare function createHttpToolRenderer(options: HttpToolRendererOptions): ToolRendererMap;
+
+type EntryType = 'file' | 'directory';
+interface FileRecord {
+    path: string;
+    type: EntryType;
+    content?: string;
+    createdAt: number;
+    updatedAt: number;
+}
+interface FileInfo {
+    path: string;
+    size: number;
+    is_file: boolean;
+    is_dir: boolean;
+    modified: number;
+    created: number;
+}
+interface DirectoryTreeNode {
+    name: string;
+    path: string;
+    type: EntryType;
+    children?: DirectoryTreeNode[];
+}
+interface SearchMatch {
+    path: string;
+    matches: Array<{
+        line_number: number;
+        line_content: string;
+    }>;
+}
+type FilesystemChangeType = 'write' | 'edit' | 'delete' | 'create_directory';
+interface FilesystemChangeEvent {
+    type: FilesystemChangeType;
+    path: string;
+    metadata?: Record<string, unknown>;
+}
+interface BrowserToolsOptions {
+    onChange?: (event: FilesystemChangeEvent) => void;
+}
+
+/**
+ * IndexedDB-backed filesystem for browser-tools.
+ *
+ * Provides the storage layer for Read/Write/Edit/Grep/Glob tools running
+ * in the browser. Each projectId maps to its own IndexedDB database.
+ */
+
+declare class IndexedDbFilesystem {
+    private static instances;
+    static forProject(projectId: string): IndexedDbFilesystem;
+    readonly projectId: string;
+    private readonly hasIndexedDb;
+    private readonly memory;
+    private dbPromise?;
+    private constructor();
+    private openDatabase;
+    private withStore;
+    private getRecord;
+    private putRecord;
+    private deleteRecord;
+    private getAllRecords;
+    private ensureParents;
+    writeFile(path: string, content: string): Promise<{
+        path: string;
+        bytes_written: number;
+    }>;
+    readFile(path: string): Promise<{
+        path: string;
+        content: string;
+    }>;
+    readFileWithLines(path: string, offset?: number, limit?: number): Promise<{
+        content: string;
+        total_lines: number;
+        lines_read: number;
+        truncated: boolean;
+    }>;
+    editFile(path: string, oldString: string, newString: string, replaceAll?: boolean): Promise<{
+        path: string;
+        replacements: number;
+    }>;
+    deleteEntry(path: string, recursive?: boolean): Promise<void>;
+    createDirectory(path: string): Promise<void>;
+    listDirectory(path: string, recursive?: boolean): Promise<string[]>;
+    getFileInfo(path: string): Promise<FileInfo>;
+    glob(pattern: string, basePath?: string): Promise<string[]>;
+    grep(pattern: string, options?: {
+        path?: string;
+        glob?: string;
+        caseInsensitive?: boolean;
+        outputMode?: 'content' | 'files_with_matches' | 'count';
+        beforeContext?: number;
+        afterContext?: number;
+        headLimit?: number;
+    }): Promise<{
+        matches: SearchMatch[];
+        output: string;
+        total_matches: number;
+    }>;
+    tree(path?: string): Promise<DirectoryTreeNode>;
+}
+
+declare const READ_TOOL_DEF: {
+    readonly name: "Read";
+    readonly description: "Read a file from the local filesystem.";
+    readonly prompt: string;
+    readonly parameters: {
+        readonly type: "object";
+        readonly required: readonly ["file_path"];
+        readonly properties: {
+            readonly file_path: {
+                readonly type: "string";
+                readonly description: "The path to the file to read";
+            };
+            readonly offset: {
+                readonly type: "number";
+                readonly description: "The line number to start reading from (0-based)";
+            };
+            readonly limit: {
+                readonly type: "number";
+                readonly description: "The number of lines to read";
+            };
+        };
+    };
+};
+
+declare const WRITE_TOOL_DEF: {
+    readonly name: "Write";
+    readonly description: "Write a file to the local filesystem.";
+    readonly prompt: string;
+    readonly parameters: {
+        readonly type: "object";
+        readonly required: readonly ["file_path", "content"];
+        readonly properties: {
+            readonly file_path: {
+                readonly type: "string";
+                readonly description: "The path to the file to write";
+            };
+            readonly content: {
+                readonly type: "string";
+                readonly description: "The content to write to the file";
+            };
+        };
+    };
+};
+
+declare const EDIT_TOOL_DEF: {
+    readonly name: "Edit";
+    readonly description: "Perform exact string replacements in files.";
+    readonly prompt: string;
+    readonly parameters: {
+        readonly type: "object";
+        readonly required: readonly ["file_path", "old_string", "new_string"];
+        readonly properties: {
+            readonly file_path: {
+                readonly type: "string";
+                readonly description: "The path to the file to edit";
+            };
+            readonly old_string: {
+                readonly type: "string";
+                readonly description: "The text to replace";
+            };
+            readonly new_string: {
+                readonly type: "string";
+                readonly description: "The replacement text";
+            };
+            readonly replace_all: {
+                readonly type: "boolean";
+                readonly description: "Replace all occurrences (default false)";
+                readonly default: false;
+            };
+        };
+    };
+};
+
+declare const GREP_TOOL_DEF: {
+    readonly name: "Grep";
+    readonly description: "Search file contents with regex.";
+    readonly prompt: string;
+    readonly parameters: {
+        readonly type: "object";
+        readonly required: readonly ["pattern"];
+        readonly properties: {
+            readonly pattern: {
+                readonly type: "string";
+                readonly description: "The regex pattern to search for";
+            };
+            readonly path: {
+                readonly type: "string";
+                readonly description: "File or directory to search in";
+            };
+            readonly glob: {
+                readonly type: "string";
+                readonly description: "Glob pattern to filter files";
+            };
+            readonly output_mode: {
+                readonly type: "string";
+                readonly enum: readonly ["content", "files_with_matches", "count"];
+                readonly description: "Output mode (default: files_with_matches)";
+            };
+            readonly '-A': {
+                readonly type: "number";
+                readonly description: "Lines after match";
+            };
+            readonly '-B': {
+                readonly type: "number";
+                readonly description: "Lines before match";
+            };
+            readonly '-C': {
+                readonly type: "number";
+                readonly description: "Context lines";
+            };
+            readonly '-i': {
+                readonly type: "boolean";
+                readonly description: "Case insensitive";
+            };
+            readonly '-n': {
+                readonly type: "boolean";
+                readonly description: "Show line numbers";
+            };
+            readonly head_limit: {
+                readonly type: "number";
+                readonly description: "Limit output lines (default 250)";
+            };
+        };
+    };
+};
+
+declare const GLOB_TOOL_DEF: {
+    readonly name: "Glob";
+    readonly description: "Fast file pattern matching tool.";
+    readonly prompt: string;
+    readonly parameters: {
+        readonly type: "object";
+        readonly required: readonly ["pattern"];
+        readonly properties: {
+            readonly pattern: {
+                readonly type: "string";
+                readonly description: "The glob pattern to match files against";
+            };
+            readonly path: {
+                readonly type: "string";
+                readonly description: "The directory to search in (defaults to project root)";
+            };
+        };
+    };
+};
+
+declare const EXEC_JS_TOOL_DEF: {
+    readonly name: "ExecJs";
+    readonly description: "Execute JavaScript code in the browser sandbox.";
+    readonly prompt: string;
+    readonly parameters: {
+        readonly type: "object";
+        readonly required: readonly ["code"];
+        readonly properties: {
+            readonly code: {
+                readonly type: "string";
+                readonly description: "JavaScript code to execute";
+            };
+            readonly timeout: {
+                readonly type: "number";
+                readonly description: "Timeout in milliseconds (default 5000, max 30000)";
+            };
+        };
+    };
+};
+
+/**
+ * createBrowserTools — factory that returns DistriFnTool[] backed by IndexedDB.
+ *
+ * Tool names and schemas match distri-cli (Read, Write, Edit, Grep, Glob)
+ * so the same agent prompt works in both browser and CLI environments.
+ * ExecJs is browser-specific (replaces CLI's Bash tool).
+ */
+
+declare function createBrowserTools(projectId: string, options?: BrowserToolsOptions): DistriFnTool[];
+
+/**
+ * useWorkflow — React hook for tracking and running workflows.
+ *
+ * Provides:
+ * - workflow state (steps, status, progress)
+ * - runNextStep() to advance the workflow
+ * - runAll() to run all remaining steps
+ * - isRunning flag
+ */
+
+interface UseWorkflowOptions {
+    /** Initial workflow definition */
+    workflow: WorkflowDefinition;
+    /** Optional entry point ID to start from (skips earlier steps) */
+    entryPointId?: string;
+    /** Called when a step needs to be executed. Returns the step result. */
+    onExecuteStep: (stepId: string, step: WorkflowDefinition['steps'][0], context: Record<string, unknown>) => Promise<StepResult>;
+    /** Called when workflow state changes (for persistence) */
+    onStateChange?: (workflow: WorkflowDefinition) => void;
+}
+interface UseWorkflowReturn {
+    /** Current workflow state */
+    workflow: WorkflowDefinition;
+    /** Whether any step is currently running */
+    isRunning: boolean;
+    /** Whether workflow is paused waiting for human input */
+    isPaused: boolean;
+    /** The step currently waiting for input, if any */
+    waitingStep: WorkflowDefinition['steps'][0] | null;
+    /** Progress percentage (0-100) */
+    progress: number;
+    /** Step counts by status */
+    counts: Record<StepStatus, number>;
+    /** Run the next pending step */
+    runNextStep: () => Promise<void>;
+    /** Run all remaining steps */
+    runAll: () => Promise<void>;
+    /** Resume a paused workflow by providing input for the waiting step */
+    resume: (stepId: string, input: unknown) => Promise<void>;
+    /** Update workflow state directly (e.g., from SSE events) */
+    updateWorkflow: (workflow: WorkflowDefinition) => void;
+}
+declare function useWorkflow({ workflow: initial, entryPointId, onExecuteStep, onStateChange }: UseWorkflowOptions): UseWorkflowReturn;
+
+/**
+ * useWorkflowRunner — React hook that runs workflows using DistriClient.
+ *
+ * Combines WorkflowRunner (from @distri/core) with React state management.
+ * Steps execute against distri-cloud APIs. Events update state in real-time.
+ *
+ * Usage:
+ *   const { run, status, events, steps, isRunning } = useWorkflowRunner()
+ *   await run(workflowDef, { doc_id: 'abc' })
+ */
+
+interface UseWorkflowRunnerOptions {
+    /** Hook to customize HTTP requests (add auth headers, base URL, etc.) */
+    buildRequest?: WorkflowRunnerOptions['buildRequest'];
+    /** Environment variables for {env.X} namespace */
+    env?: Record<string, unknown>;
+    /** Custom step executor override */
+    executeStep?: (step: WorkflowStep, resolvedInput: unknown, context: ExecutionContext) => Promise<StepResult>;
+    /** Called on each event */
+    onEvent?: (event: WorkflowEvent) => void;
+}
+interface UseWorkflowRunnerReturn {
+    /** Run a workflow with the given input. Optionally specify an entry point to start from. */
+    run: (workflow: WorkflowDefinition, input?: Record<string, unknown>, entryPointId?: string) => Promise<WorkflowStatus>;
+    /** Resume a paused workflow by providing input for the waiting step. */
+    resume: (stepId: string, input: unknown) => Promise<WorkflowStatus>;
+    /** Whether a workflow is currently running. */
+    isRunning: boolean;
+    /** Whether the workflow is paused waiting for human input. */
+    isPaused: boolean;
+    /** Current status (null if not started). */
+    status: WorkflowStatus | null;
+    /** All events emitted so far. */
+    events: WorkflowEvent[];
+    /** Stop the running workflow. */
+    stop: () => void;
+}
+declare function useWorkflowRunner(options?: UseWorkflowRunnerOptions): UseWorkflowRunnerReturn;
+
+interface WorkflowProgressProps {
+    workflow: WorkflowDefinition;
+    className?: string;
+    /** Show step details (kind, result preview) */
+    detailed?: boolean;
+}
+declare function WorkflowProgress({ workflow, className, detailed }: WorkflowProgressProps): react_jsx_runtime.JSX.Element;
+
 declare const buttonVariants: {
     variant: {
         default: string;
@@ -1005,6 +1546,19 @@ interface AssistantMessageRendererProps {
 }
 declare const AssistantMessageRenderer: React__default.FC<AssistantMessageRendererProps>;
 
+interface ToolExecutionRendererProps {
+    event: any;
+    toolCallStates: Map<string, ToolCallState>;
+    toolRenderers?: ToolRendererMap;
+    debug?: boolean;
+    verbose?: boolean;
+    rendering?: RenderingMode;
+    onToolComplete?: (result: ToolResult) => void;
+}
+/** Generate human-readable status text for a tool call */
+declare const formatStatusText: (toolName: string, input: any) => string;
+declare const ToolExecutionRenderer: React__default.FC<ToolExecutionRendererProps>;
+
 interface ImageRendererProps {
     imageParts: ImagePart[];
     className?: string;
@@ -1018,8 +1572,12 @@ interface MessageFeedbackProps {
     compact?: boolean;
     /** CSS class name */
     className?: string;
+    /** Show thumbs up/down feedback controls (default: true) */
+    enableFeedback?: boolean;
     /** Called when a vote is submitted */
     onVote?: (voteType: 'upvote' | 'downvote', comment?: string) => void;
+    /** Omit to hide the traces button */
+    onShowTrace?: (threadId: string) => void;
 }
 /**
  * Message feedback component with thumbs up/down voting.
@@ -1079,12 +1637,17 @@ interface MessageRendererProps {
     toolRenderers?: ToolRendererMap;
     /** Enable debug mode to show developer messages */
     debug?: boolean;
+    /** Show all tool calls (detailed mode) vs collapsed summary (normal mode) */
+    verbose?: boolean;
     /** Thread ID for feedback functionality */
     threadId?: string;
     /** Enable message feedback (voting) UI */
     enableFeedback?: boolean;
+    rendering?: RenderingMode;
+    toolSummaryOverrides?: Record<string, SummaryFn>;
+    onShowTrace?: (threadId: string) => void;
 }
-declare function MessageRenderer({ message, index, toolRenderers, debug, threadId, enableFeedback, }: MessageRendererProps): React__default.ReactNode;
+declare function MessageRenderer({ message, index, toolRenderers, debug, verbose, threadId, enableFeedback, rendering, toolSummaryOverrides, onShowTrace, }: MessageRendererProps): React__default.ReactNode;
 
 interface StepBasedRendererProps {
     message: DistriMessage;
@@ -1129,4 +1692,82 @@ interface UserMessageRendererProps {
 }
 declare const UserMessageRenderer: React__default.FC<UserMessageRendererProps>;
 
-export { ASK_FOLLOW_UP_TOOL_NAME, AgentSelect, type AskFollowUpInput, type AskFollowUpOutput, AssistantMessageRenderer, type AssistantMessageRendererProps, type AttachedImage, AuthLoading, type AuthStatus, Badge, BrowserPreviewPanel, BrowserViewport, type BrowserViewportProps, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Chat, type ChatContainerProps, type ChatCustomRenderers, type ChatEmptyStateCategory, type ChatEmptyStateController, type ChatEmptyStateOptions, type ChatEmptyStateStarter, ChatInner, ChatInput, type ChatInputProps, type ChatInstance, type ChatProps, type ChatState, type ChatStateStore, ConfigurationPanel, DialogRoot as Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, type DistriAnyTool, DistriAuthProvider, DistriContext, DistriProvider, type DistriUiTool, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type ExtractedContent, type FollowUpQuestion, ImageRenderer, type ImageRendererProps, Input, LoadingAnimation, type LoadingAnimationConfig, type LoadingAnimationPreset, type LoadingAnimationProps, LoadingShimmer, MessageFeedback, type MessageFeedbackProps, MessageReadProvider, type MessageReadProviderProps, MessageReadTracker, type MessageReadTrackerProps, MessageRenderer, type MessageRendererProps, type ModelOption, type PlanState, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, StepBasedRenderer, type StepBasedRendererProps, type StepState, type StreamingIndicator, StreamingTextRenderer, type StreamingTtsOptions, type TaskState, Textarea, ThemeProvider, ThemeToggle, ThinkingRenderer, type ThinkingRendererProps, TodosDisplay, type TodosDisplayProps, type ToolCallState, type ToolCallStatus, type ToolRendererMap, type ToolRendererProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type TtsConfig, type TtsRequest, TypingIndicator, type UiToolProps, type UseAgentOptions, type UseAgentResult, type UseAgentsByUsageOptions, type UseAgentsByUsageResult, type UseAgentsResult, type UseChatMessagesOptions, type UseChatMessagesReturn, type UseChatOptions, type UseChatReturn, type UseConfigurationResult, type UseMessageReadStatusOptions, type UseMessageReadStatusResult, type UseMessageVoteOptions, type UseMessageVoteResult, type UseMessageVotesOptions, type UseMessageVotesResult, type UseThreadMessagesOptions, type UseThreadReadStatusOptions, type UseThreadReadStatusResult, type UseThreadsOptions, type UseThreadsResult, UserMessageRenderer, type UserMessageRendererProps, VoiceInput, type VoiceInputProps, createAskFollowUpTool, extractContent, useAgent, useAgentDefinitions, useAgentsByUsage, useChat, useChatMessages, useChatStateStore, useConfiguration, useDistri, useDistriAuth, useDistriToken, useMessageReadContext, useMessageReadStatus, useMessageVote, useMessageVotes, useSidebar, useSpeechToText, useTheme, useThreadReadStatus, useThreads, useTts, useWorkspace, wrapFnToolAsUiTool, wrapTools };
+interface LoadingStripProps {
+    words?: string[];
+    className?: string;
+}
+declare const LoadingStrip: React__default.FC<LoadingStripProps>;
+
+interface TodosCompactProps {
+    todos: TodoItem[];
+    className?: string;
+}
+declare const TodosCompact: React__default.FC<TodosCompactProps>;
+
+interface DiffViewProps {
+    diff: string;
+}
+declare function looksLikeDiff(text: string): boolean;
+declare const DiffView: React__default.FC<DiffViewProps>;
+
+declare function getToolSummary(toolName: string, input: Record<string, unknown>, result?: ToolResult, overrides?: Record<string, SummaryFn>): ToolSummary;
+
+interface MinimalToolRowProps {
+    summary: ToolSummary;
+    state: ToolCallState;
+    debug?: boolean;
+}
+declare const MinimalToolRow: React__default.FC<MinimalToolRowProps>;
+
+interface RichToolCardProps {
+    summary: ToolSummary;
+    state: ToolCallState;
+}
+declare const RichToolCard: React__default.FC<RichToolCardProps>;
+
+interface InteractiveToolCardProps {
+    toolCall: ToolCall;
+    state: ToolCallState;
+    rendering: RenderingMode;
+    onComplete: (result: ToolResult) => void;
+}
+declare const InteractiveToolCard: React__default.FC<InteractiveToolCardProps>;
+
+interface RendererContextValue {
+    rendering: RenderingMode;
+    toolSummaryOverrides: Record<string, SummaryFn>;
+    onShowTrace?: (threadId: string) => void;
+    threadId?: string;
+}
+declare const RendererContext: React$1.Context<RendererContextValue>;
+declare const useRendererContext: () => RendererContextValue;
+
+interface CommandPaletteProps {
+    commands: ChatCommand[];
+    filter: string;
+    onSelect: (event: ChatCommandEvent) => void;
+    onClose: () => void;
+}
+declare const CommandPalette: React__default.FC<CommandPaletteProps>;
+
+interface CommandPillProps {
+    event: ChatCommandEvent;
+}
+declare const CommandPill: React__default.FC<CommandPillProps>;
+
+interface DeveloperModeComponentProps {
+    developerMode: DeveloperMode;
+    threadId: string;
+    verbose: boolean;
+    onToggleVerbose: () => void;
+    diagnoseEnabled: boolean;
+    onToggleDiagnose: () => void;
+    onOpenTrace?: (threadId: string) => void;
+    agentDefinition?: AgentDefinition | null;
+    disabled?: boolean;
+    triggerClassName?: string;
+    triggerIconClassName?: string;
+}
+declare function DeveloperModeComponent({ developerMode, threadId, verbose, onToggleVerbose, diagnoseEnabled, onToggleDiagnose, onOpenTrace, agentDefinition, disabled, triggerClassName, triggerIconClassName, }: DeveloperModeComponentProps): react_jsx_runtime.JSX.Element;
+
+export { ASK_FOLLOW_UP_TOOL_NAME, AgentSelect, type AskFollowUpInput, type AskFollowUpOutput, AssistantMessageRenderer, type AssistantMessageRendererProps, type AttachedImage, AuthLoading, type AuthStatus, Badge, BrowserPreviewPanel, type BrowserToolsOptions, BrowserViewport, type BrowserViewportProps, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Chat, type ChatCommand, type ChatCommandEvent, type ChatCommandId, type ChatContainerProps, type ChatCustomRenderers, type ChatEmptyStateCategory, type ChatEmptyStateController, type ChatEmptyStateOptions, type ChatEmptyStateStarter, ChatInner, ChatInput, type ChatInputProps, type ChatInstance, type ChatProps, type ChatSessionSettings, type ChatState, type ChatStateStore, CommandPalette, CommandPill, ConfigurationPanel, ContextIndicator, type DeveloperDiagnoseConfig, type DeveloperMode, DeveloperModeComponent, type DeveloperTraceConfig, DialogRoot as Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, DiffView, type DirectoryTreeNode, type DistriAnyTool, DistriAuthProvider, DistriContext, DistriProvider, type DistriUiTool, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EDIT_TOOL_DEF, EXEC_JS_TOOL_DEF, type EntryType, type ExtractedContent, type FileInfo, type FileRecord, type FilesystemChangeEvent, type FilesystemChangeType, type FollowUpQuestion, GLOB_TOOL_DEF, GREP_TOOL_DEF, HttpToolCard, type HttpToolCardProps, type HttpToolRendererOptions, ImageRenderer, type ImageRendererProps, IndexedDbFilesystem, Input, InteractiveToolCard, LoadingAnimation, type LoadingAnimationConfig, type LoadingAnimationPreset, type LoadingAnimationProps, LoadingShimmer, LoadingStrip, MessageFeedback, type MessageFeedbackProps, MessageReadProvider, type MessageReadProviderProps, MessageReadTracker, type MessageReadTrackerProps, MessageRenderer, type MessageRendererProps, MinimalToolRow, type ModelOption, type PathConfig, type PlanState, READ_TOOL_DEF, type RendererConfig, RendererContext, type RenderingMode, RichToolCard, type SearchMatch, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, StepBasedRenderer, type StepBasedRendererProps, type StepState, type StreamingIndicator, StreamingTextRenderer, type SummaryFn, type TaskState, Textarea, ThemeProvider, ThemeToggle, ThinkingRenderer, type ThinkingRendererProps, TodosCompact, TodosDisplay, type TodosDisplayProps, type ToolCallState, type ToolCallStatus, ToolExecutionRenderer, type ToolRendererMap, type ToolRendererProps, type ToolSummary, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type TtsConfig, type TtsMode, TypingIndicator, type UiToolProps, type UseAgentOptions, type UseAgentResult, type UseAgentsByUsageOptions, type UseAgentsByUsageResult, type UseAgentsResult, type UseChatMessagesOptions, type UseChatMessagesReturn, type UseChatOptions, type UseChatReturn, type UseConfigurationResult, type UseMessageReadStatusOptions, type UseMessageReadStatusResult, type UseMessageVoteOptions, type UseMessageVoteResult, type UseMessageVotesOptions, type UseMessageVotesResult, type UseModelsResult, type UseThreadMessagesOptions, type UseThreadReadStatusOptions, type UseThreadReadStatusResult, type UseThreadsOptions, type UseThreadsResult, type UseWorkflowOptions, type UseWorkflowReturn, type UseWorkflowRunnerOptions, type UseWorkflowRunnerReturn, UserMessageRenderer, type UserMessageRendererProps, VoiceInput, type VoiceInputProps, WRITE_TOOL_DEF, WorkflowProgress, type WorkflowProgressProps, createAskFollowUpTool, createBrowserTools, createHttpToolRenderer, extractContent, formatStatusText, getToolSummary, looksLikeDiff, useAgent, useAgentDefinitions, useAgentsByUsage, useChat, useChatMessages, useChatStateStore, useConfiguration, useContextHealth, useDistri, useDistriAuth, useDistriToken, useMessageReadContext, useMessageReadStatus, useMessageVote, useMessageVotes, useModels, useRendererContext, useSidebar, useSpeechToText, useTheme, useThreadReadStatus, useThreads, useTts, useWorkflow, useWorkflowRunner, useWorkspace, wrapFnToolAsUiTool, wrapTools };