@steerable/agent-ui 0.2.0

package/dist/components/MessageList.stories.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MessageList } from './MessageList.js';
+const meta = {
+    title: 'Components/MessageList',
+    component: MessageList,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'Headless message list with auto-scroll-to-bottom. Pass a `renderMessage` prop to swap in your own bubble. The default renderer just shows role + content and is meant for sandbox / debugging only.',
+            },
+        },
+    },
+    decorators: [
+        (Story) => (_jsx("div", { className: "h-[480px] w-[640px] border border-agent-border bg-agent-canvas", children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+const NOW = '2026-05-15T00:00:00Z';
+const baseMessages = [
+    { id: '1', role: 'user', content: 'Hi! What can you help me with?', createdAt: NOW },
+    {
+        id: '2',
+        role: 'assistant',
+        content: 'I can plan trips, draft emails, query your knowledge base and run safe shell commands. What would you like to start with?',
+        createdAt: NOW,
+    },
+    { id: '3', role: 'user', content: 'Plan a 2-day weekend in Kyoto.', createdAt: NOW },
+    {
+        id: '4',
+        role: 'assistant',
+        content: "Sure — Day 1: Fushimi Inari at sunrise, then Gion in the afternoon. Day 2: Arashiyama bamboo grove and a kaiseki dinner. I'll add restaurant picks next.",
+        createdAt: NOW,
+    },
+];
+export const Default = {
+    args: {
+        messages: baseMessages,
+    },
+};
+export const Empty = {
+    args: {
+        messages: [],
+    },
+};
+export const EmptyWithCustomState = {
+    args: {
+        messages: [],
+        emptyState: (_jsxs("div", { className: "m-auto max-w-xs text-center text-sm text-agent-muted-foreground", children: [_jsx("p", { className: "font-medium text-agent-foreground", children: "Nothing to show yet" }), _jsx("p", { className: "mt-1", children: "Send your first message to start a conversation." })] })),
+    },
+};
+export const Streaming = {
+    args: {
+        messages: [
+            ...baseMessages,
+            {
+                id: '5',
+                role: 'assistant',
+                content: "Day 2 — Morning: rent a bike near Arashiyama station and",
+                createdAt: NOW,
+            },
+        ],
+        isStreaming: true,
+    },
+};
+export const StreamingEmptyAssistant = {
+    args: {
+        messages: [
+            ...baseMessages,
+            { id: '6', role: 'assistant', content: '', createdAt: NOW },
+        ],
+        isStreaming: true,
+    },
+};
+export const LongConversation = {
+    args: {
+        messages: Array.from({ length: 30 }, (_, i) => ({
+            id: `m-${i}`,
+            role: i % 2 === 0 ? 'user' : 'assistant',
+            content: i % 2 === 0
+                ? `User question #${i / 2 + 1}: tell me about topic ${i}.`
+                : `Assistant answer to question #${(i - 1) / 2 + 1}. ` +
+                    'This response wraps across multiple lines so we exercise the auto-scroll behaviour and verify the bubble shape under longer content.',
+            createdAt: NOW,
+        })),
+    },
+};
+//# sourceMappingURL=MessageList.stories.js.map

package/dist/components/MessageList.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageList.stories.js","sourceRoot":"","sources":["../../src/components/MessageList.stories.tsx"],"names":[],"mappings":"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"}

package/dist/components/OrchestrationPlanCard.d.ts

@@ -0,0 +1,32 @@
+/**
+ * `OrchestrationPlanCard` — render a multi-step plan with per-step status.
+ *
+ * Maps to the `orchestration` SSE event family: the harness emits a structured
+ * plan up-front and updates step status as execution progresses. The card is
+ * intentionally read-only; consumers that want inline edit (`deeppath/apps/web`'s
+ * "PlanSteps") should compose their own editor using `useChatStream`'s
+ * `onUnknownEvent` hook to track plan events and feed updated steps in here.
+ */
+export type OrchestrationStepStatus = 'pending' | 'running' | 'done' | 'error' | 'skipped';
+export interface OrchestrationStep {
+    id: string;
+    title: string;
+    description?: string;
+    status: OrchestrationStepStatus;
+    /** Optional badge (`tool`, `wait`, `decision`, `agent:<name>`, …). */
+    kind?: string;
+    /** Optional ISO datetime when the step finished, used for the right column. */
+    finishedAt?: string;
+}
+export interface OrchestrationPlanCardProps {
+    title?: string;
+    steps: OrchestrationStep[];
+    className?: string;
+    /**
+     * Optional click handler — useful when you want to open a step's trace
+     * timeline in a side panel. Receives the step that was clicked.
+     */
+    onStepClick?: (step: OrchestrationStep) => void;
+}
+export declare function OrchestrationPlanCard(props: OrchestrationPlanCardProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=OrchestrationPlanCard.d.ts.map

package/dist/components/OrchestrationPlanCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrchestrationPlanCard.d.ts","sourceRoot":"","sources":["../../src/components/OrchestrationPlanCard.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAKH,MAAM,MAAM,uBAAuB,GAC/B,SAAS,GACT,SAAS,GACT,MAAM,GACN,OAAO,GACP,SAAS,CAAC;AAEd,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,uBAAuB,CAAC;IAChC,sEAAsE;IACtE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+EAA+E;IAC/E,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,0BAA0B;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;CACjD;AAkBD,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,0BAA0B,2CAoGtE"}

package/dist/components/OrchestrationPlanCard.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * `OrchestrationPlanCard` — render a multi-step plan with per-step status.
+ *
+ * Maps to the `orchestration` SSE event family: the harness emits a structured
+ * plan up-front and updates step status as execution progresses. The card is
+ * intentionally read-only; consumers that want inline edit (`deeppath/apps/web`'s
+ * "PlanSteps") should compose their own editor using `useChatStream`'s
+ * `onUnknownEvent` hook to track plan events and feed updated steps in here.
+ */
+import { useMemo } from 'react';
+import { cn } from './cn.js';
+const statusToIcon = {
+    pending: '○',
+    running: '◐',
+    done: '●',
+    error: '✕',
+    skipped: '—',
+};
+const statusToColor = {
+    pending: 'text-agent-muted-foreground',
+    running: 'text-agent-accent',
+    done: 'text-agent-tool-read',
+    error: 'text-agent-destructive',
+    skipped: 'text-agent-muted-foreground line-through',
+};
+export function OrchestrationPlanCard(props) {
+    const { title = 'Plan', steps, className, onStepClick } = props;
+    const summary = useMemo(() => {
+        const total = steps.length;
+        const done = steps.filter((s) => s.status === 'done').length;
+        const errored = steps.filter((s) => s.status === 'error').length;
+        return { total, done, errored };
+    }, [steps]);
+    return (_jsxs("div", { className: cn('rounded-agent-lg border border-agent-border bg-agent-canvas p-4', className), "data-testid": "orchestration-plan-card", children: [_jsxs("div", { className: "mb-3 flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm font-semibold text-agent-foreground", children: title }), _jsxs("span", { className: "rounded-full border border-agent-border px-2 py-0.5 text-[10px] uppercase tracking-wide text-agent-muted-foreground", children: [summary.done, "/", summary.total] })] }), summary.errored > 0 ? (_jsxs("span", { className: "text-[11px] font-medium text-agent-destructive", children: [summary.errored, " error", summary.errored === 1 ? '' : 's'] })) : null] }), _jsx("ol", { className: "space-y-1.5", children: steps.map((step, idx) => {
+                    const interactive = Boolean(onStepClick);
+                    const Tag = interactive ? 'button' : 'div';
+                    return (_jsx("li", { children: _jsxs(Tag, { ...(interactive
+                                ? {
+                                    type: 'button',
+                                    onClick: () => onStepClick?.(step),
+                                }
+                                : {}), className: cn('flex w-full items-start gap-2 rounded-agent-sm px-2 py-1.5 text-left', interactive
+                                ? 'transition-colors hover:bg-agent-muted'
+                                : ''), "data-status": step.status, children: [_jsx("span", { className: cn('mt-0.5 select-none font-mono text-base leading-none', statusToColor[step.status]), "aria-hidden": true, children: statusToIcon[step.status] }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "truncate text-xs font-mono text-agent-muted-foreground", children: (idx + 1).toString().padStart(2, '0') }), _jsx("span", { className: cn('truncate text-sm font-medium', statusToColor[step.status]), children: step.title }), step.kind ? (_jsx("span", { className: "shrink-0 rounded-full border border-agent-border bg-agent-muted px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-agent-muted-foreground", children: step.kind })) : null] }), step.description ? (_jsx("p", { className: "mt-0.5 text-xs text-agent-muted-foreground", children: step.description })) : null] }), step.finishedAt ? (_jsx("span", { className: "shrink-0 text-[10px] text-agent-muted-foreground", children: step.finishedAt })) : null] }) }, step.id));
+                }) })] }));
+}
+//# sourceMappingURL=OrchestrationPlanCard.js.map

package/dist/components/OrchestrationPlanCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrchestrationPlanCard.js","sourceRoot":"","sources":["../../src/components/OrchestrationPlanCard.tsx"],"names":[],"mappings":"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"}

package/dist/components/OrchestrationPlanCard.stories.d.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { OrchestrationPlanCard } from './OrchestrationPlanCard.js';
+declare const meta: Meta<typeof OrchestrationPlanCard>;
+export default meta;
+type Story = StoryObj<typeof OrchestrationPlanCard>;
+export declare const InProgress: Story;
+export declare const AllDone: Story;
+export declare const WithError: Story;
+export declare const SkippedBranch: Story;
+export declare const Empty: Story;
+export declare const Interactive: Story;
+//# sourceMappingURL=OrchestrationPlanCard.stories.d.ts.map

package/dist/components/OrchestrationPlanCard.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrchestrationPlanCard.stories.d.ts","sourceRoot":"","sources":["../../src/components/OrchestrationPlanCard.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,qBAAqB,EAA0B,MAAM,4BAA4B,CAAC;AAE3F,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,qBAAqB,CAuB5C,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAqBpD,eAAO,MAAM,UAAU,EAAE,KAIxB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAYvB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAQ3B,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAInB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAKzB,CAAC"}

package/dist/components/OrchestrationPlanCard.stories.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { OrchestrationPlanCard } from './OrchestrationPlanCard.js';
+const meta = {
+    title: 'Components/OrchestrationPlanCard',
+    component: OrchestrationPlanCard,
+    parameters: {
+        layout: 'centered',
+        actions: { argTypesRegex: '^on[A-Z].*' },
+        docs: {
+            description: {
+                component: 'Read-only multi-step plan with per-step status icons and a header summary. Status values are `pending` / `running` / `done` / `error` / `skipped`. Pass `onStepClick` to make rows interactive (used in production to open a step\u2019s trace timeline in a side panel).',
+            },
+        },
+    },
+    args: {
+        title: 'Plan',
+    },
+    decorators: [
+        (Story) => (_jsx("div", { className: "w-[480px]", children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+const steps = [
+    { id: 's1', title: 'Parse user request', status: 'done', kind: 'decision' },
+    {
+        id: 's2',
+        title: 'Look up matching projects',
+        status: 'done',
+        kind: 'tool',
+        description: 'web_search → project_index',
+    },
+    {
+        id: 's3',
+        title: 'Draft proposal outline',
+        status: 'running',
+        kind: 'agent:writer',
+    },
+    { id: 's4', title: 'Estimate budget', status: 'pending', kind: 'tool' },
+    { id: 's5', title: 'Send for review', status: 'pending', kind: 'wait' },
+];
+export const InProgress = {
+    args: {
+        steps,
+    },
+};
+export const AllDone = {
+    args: {
+        steps: steps.map((s) => ({ ...s, status: 'done', finishedAt: '15:32' })),
+    },
+};
+export const WithError = {
+    args: {
+        steps: [
+            ...steps.slice(0, 2),
+            {
+                ...steps[2],
+                status: 'error',
+                description: 'writer_agent rejected: missing required tone parameter',
+            },
+            ...steps.slice(3),
+        ],
+    },
+};
+export const SkippedBranch = {
+    args: {
+        steps: [
+            ...steps.slice(0, 3).map((s) => ({ ...s, status: 'done' })),
+            { ...steps[3], status: 'skipped', description: 'no budget needed' },
+            { ...steps[4], status: 'done', finishedAt: '15:55' },
+        ],
+    },
+};
+export const Empty = {
+    args: {
+        steps: [],
+    },
+};
+export const Interactive = {
+    args: {
+        steps,
+        onStepClick: () => { },
+    },
+};
+//# sourceMappingURL=OrchestrationPlanCard.stories.js.map

package/dist/components/OrchestrationPlanCard.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrchestrationPlanCard.stories.js","sourceRoot":"","sources":["../../src/components/OrchestrationPlanCard.stories.tsx"],"names":[],"mappings":"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"}

package/dist/components/SSEStreamView.d.ts

@@ -0,0 +1,29 @@
+/**
+ * `SSEStreamView` — debug / power-user view that prints the raw SSE event log.
+ *
+ * Used in two production contexts today:
+ *   1. The "Trace" tab in `deeppath/apps/web` admin tooling.
+ *   2. The mockCflog log window in `deeppath-agent`, where it doubles as a
+ *      dev console for the Electron app.
+ *
+ * The component is intentionally append-only; consumers feed it events via the
+ * `events` prop and it auto-scrolls to keep the latest in view.
+ */
+import type { SSEEvent } from '@steerable/agent-protocol';
+export interface SSEStreamViewProps {
+    events: SSEEvent[];
+    className?: string;
+    /** Show full JSON payloads instead of a one-line summary. */
+    verbose?: boolean;
+    autoScroll?: boolean;
+    /**
+     * Optional filter; only events whose `type` is in the set are rendered.
+     * Useful for production debugging where you only care about, e.g.,
+     * `tool_call` + `tool_result` chains.
+     */
+    filterTypes?: SSEEvent['type'][];
+    emptyState?: React.ReactNode;
+    maxRows?: number;
+}
+export declare function SSEStreamView(props: SSEStreamViewProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SSEStreamView.d.ts.map

package/dist/components/SSEStreamView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SSEStreamView.d.ts","sourceRoot":"","sources":["../../src/components/SSEStreamView.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAGH,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAG1D,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,QAAQ,EAAE,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6DAA6D;IAC7D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,WAAW,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC;IACjC,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAuCD,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CA6EtD"}

package/dist/components/SSEStreamView.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * `SSEStreamView` — debug / power-user view that prints the raw SSE event log.
+ *
+ * Used in two production contexts today:
+ *   1. The "Trace" tab in `deeppath/apps/web` admin tooling.
+ *   2. The mockCflog log window in `deeppath-agent`, where it doubles as a
+ *      dev console for the Electron app.
+ *
+ * The component is intentionally append-only; consumers feed it events via the
+ * `events` prop and it auto-scrolls to keep the latest in view.
+ */
+import { useEffect, useMemo, useRef } from 'react';
+import { cn } from './cn.js';
+const typeColor = {
+    content: 'text-agent-foreground',
+    error: 'text-agent-destructive',
+    agent: 'text-agent-accent',
+    orchestration: 'text-agent-tool-write',
+    'loader-hint': 'text-agent-muted-foreground',
+    keepalive: 'text-agent-muted-foreground/60',
+    done: 'text-agent-tool-read',
+    budget_exhausted: 'text-agent-destructive',
+    tool_call: 'text-agent-tool-write',
+    tool_result: 'text-agent-tool-read',
+};
+function summarize(event) {
+    if (event.type === 'content') {
+        const c = typeof event.content === 'string' ? event.content : '';
+        return c.length > 80 ? c.slice(0, 80) + '…' : c;
+    }
+    if (event.type === 'error' || event.type === 'budget_exhausted') {
+        return event.message ?? '';
+    }
+    if (event.type === 'tool_call' || event.type === 'tool_result') {
+        const payload = event.payload;
+        return payload ? JSON.stringify(payload).slice(0, 120) : '';
+    }
+    if (event.type === 'loader-hint') {
+        return event.hint ?? '';
+    }
+    if (event.type === 'orchestration') {
+        return event.orchestrationGroupId ?? '';
+    }
+    if (event.type === 'agent') {
+        return JSON.stringify(event).slice(0, 120);
+    }
+    return '';
+}
+export function SSEStreamView(props) {
+    const { events, className, verbose = false, autoScroll = true, filterTypes, emptyState, maxRows = 1000, } = props;
+    const containerRef = useRef(null);
+    const visible = useMemo(() => {
+        let list = filterTypes ? events.filter((e) => filterTypes.includes(e.type)) : events;
+        if (list.length > maxRows) {
+            list = list.slice(list.length - maxRows);
+        }
+        return list;
+    }, [events, filterTypes, maxRows]);
+    useEffect(() => {
+        if (!autoScroll)
+            return;
+        const el = containerRef.current;
+        if (!el)
+            return;
+        el.scrollTop = el.scrollHeight;
+    }, [autoScroll, visible.length]);
+    return (_jsx("div", { ref: containerRef, className: cn('h-full overflow-y-auto rounded-agent-md border border-agent-border bg-agent-canvas font-mono text-[11px] leading-relaxed', 'focus:outline-none focus-visible:ring-2 focus-visible:ring-agent-accent', className), role: "log", "aria-live": "polite", "aria-label": "SSE event log", tabIndex: 0, children: visible.length === 0 ? (_jsx("div", { className: "flex h-full items-center justify-center text-agent-muted-foreground", children: emptyState ?? 'No events yet.' })) : (_jsx("ul", { className: "divide-y divide-agent-border", children: visible.map((event, idx) => (_jsxs("li", { className: "flex flex-col gap-0.5 px-3 py-1.5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: cn('shrink-0 font-semibold uppercase tracking-wide', typeColor[event.type]), children: event.type }), !verbose ? (_jsx("span", { className: "truncate text-agent-muted-foreground", children: summarize(event) })) : null] }), verbose ? (_jsx("pre", { className: "overflow-x-auto whitespace-pre-wrap break-words text-agent-muted-foreground", children: safeStringify(event) })) : null] }, `${idx}_${event.type}`))) })) }));
+}
+function safeStringify(value) {
+    try {
+        return JSON.stringify(value, null, 2);
+    }
+    catch {
+        return String(value);
+    }
+}
+//# sourceMappingURL=SSEStreamView.js.map

package/dist/components/SSEStreamView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SSEStreamView.js","sourceRoot":"","sources":["../../src/components/SSEStreamView.tsx"],"names":[],"mappings":"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"}

package/dist/components/SSEStreamView.stories.d.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SSEStreamView } from './SSEStreamView.js';
+declare const meta: Meta<typeof SSEStreamView>;
+export default meta;
+type Story = StoryObj<typeof SSEStreamView>;
+export declare const Empty: Story;
+export declare const Default: Story;
+export declare const Verbose: Story;
+export declare const FilteredToolEvents: Story;
+export declare const ErrorAndBudget: Story;
+export declare const HighVolume: Story;
+//# sourceMappingURL=SSEStreamView.stories.d.ts.map

package/dist/components/SSEStreamView.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SSEStreamView.stories.d.ts","sourceRoot":"","sources":["../../src/components/SSEStreamView.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEnD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,aAAa,CAmBpC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,aAAa,CAAC,CAAC;AA4B5C,eAAO,MAAM,KAAK,EAAE,KAInB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAKhC,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAQ5B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAQxB,CAAC"}

package/dist/components/SSEStreamView.stories.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SSEStreamView } from './SSEStreamView.js';
+const meta = {
+    title: 'Components/SSEStreamView',
+    component: SSEStreamView,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'Append-only debug view of the raw SSE event log. Used in production for the "Trace" tab in `deeppath/apps/web` and as a dev console inside `deeppath-agent`. Toggle `verbose` to inspect full JSON payloads, or pass `filterTypes` to narrow to a single event family.',
+            },
+        },
+    },
+    decorators: [
+        (Story) => (_jsx("div", { className: "h-[400px] w-[640px]", children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+const events = [
+    { type: 'agent', agentId: 'planner', model: 'gpt-4o-mini' },
+    {
+        type: 'orchestration',
+        orchestrationGroupId: 'plan-1',
+        payload: { phase: 'plan_started' },
+    },
+    { type: 'content', content: 'Looking up the latest project status…' },
+    {
+        type: 'tool_call',
+        payload: {
+            callId: 'call_1',
+            name: 'project_search',
+            arguments: { query: 'Q4 roadmap', limit: 5 },
+        },
+    },
+    {
+        type: 'tool_result',
+        payload: { callId: 'call_1', name: 'project_search', status: 'success', count: 3 },
+    },
+    { type: 'content', content: 'Found 3 active projects. Drafting summary…' },
+    { type: 'loader-hint', hint: 'Composing response…' },
+    { type: 'content', content: 'Here are the highlights:\n1. Project Alpha\n2. Project Beta' },
+    { type: 'done' },
+];
+export const Empty = {
+    args: {
+        events: [],
+    },
+};
+export const Default = {
+    args: {
+        events,
+    },
+};
+export const Verbose = {
+    args: {
+        events,
+        verbose: true,
+    },
+};
+export const FilteredToolEvents = {
+    args: {
+        events,
+        filterTypes: ['tool_call', 'tool_result'],
+    },
+};
+export const ErrorAndBudget = {
+    args: {
+        events: [
+            ...events.slice(0, 5),
+            { type: 'budget_exhausted', message: 'token budget reached after 3.2k tokens' },
+            { type: 'error', message: 'tool_dispatch failed: timeout after 30s' },
+        ],
+    },
+};
+export const HighVolume = {
+    args: {
+        events: Array.from({ length: 200 }, (_, i) => {
+            if (i % 13 === 0)
+                return { type: 'tool_call', payload: { callId: `c${i}`, name: 'noop' } };
+            if (i % 13 === 6)
+                return { type: 'tool_result', payload: { callId: `c${i - 6}`, status: 'success' } };
+            return { type: 'content', content: `chunk ${i}: ` + 'lorem ipsum dolor sit amet '.repeat(2) };
+        }),
+    },
+};
+//# sourceMappingURL=SSEStreamView.stories.js.map

package/dist/components/SSEStreamView.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SSEStreamView.stories.js","sourceRoot":"","sources":["../../src/components/SSEStreamView.stories.tsx"],"names":[],"mappings":"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"}

package/dist/components/ToolCallRenderer.d.ts

@@ -0,0 +1,42 @@
+/**
+ * `ToolCallRenderer` — display a single tool call + (optional) tool result.
+ *
+ * Renders three visual rows depending on lifecycle / mode:
+ *
+ *   ┌──────────────────────────────────────────────────┐
+ *   │ [icon] tool_name [mode-pill]              [time] │
+ *   │   args (collapsed by default)                    │
+ *   │   ── result ──                                   │
+ *   │   message + data (collapsed by default)          │
+ *   └──────────────────────────────────────────────────┘
+ *
+ * Headless body: callers can override the args / result subtree with
+ * `renderArgs` / `renderResult` if they need richer formatting (diffs, code
+ * blocks, structured cards). Default body uses pretty-printed JSON.
+ */
+import type { ToolCall, ToolResult } from '@steerable/agent-protocol';
+import { type ToolCallMode } from '../hooks/useToolCallStatus.js';
+export interface ToolCallRendererProps {
+    call: ToolCall;
+    result?: ToolResult;
+    /**
+     * Optional explicit mode override. Use when the framework's `decide_tool_mode`
+     * has already classified the tool (the local `ToolRouter` ships this value
+     * alongside the call in production setups).
+     */
+    mode?: ToolCallMode;
+    runningHint?: boolean;
+    /**
+     * Approval handler. Must be supplied when rendering a `local`-mode call you
+     * want the user to confirm before execution. If omitted, the renderer falls
+     * back to the read-only "awaiting result" treatment.
+     */
+    onApprove?: (call: ToolCall) => void;
+    onReject?: (call: ToolCall) => void;
+    className?: string;
+    renderArgs?: (call: ToolCall) => React.ReactNode;
+    renderResult?: (result: ToolResult) => React.ReactNode;
+    defaultExpanded?: boolean;
+}
+export declare function ToolCallRenderer(props: ToolCallRendererProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ToolCallRenderer.d.ts.map

package/dist/components/ToolCallRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolCallRenderer.d.ts","sourceRoot":"","sources":["../../src/components/ToolCallRenderer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAGH,OAAO,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACtE,OAAO,EAAqB,KAAK,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAGrF,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,QAAQ,CAAC;IACf,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB;;;;OAIG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;OAIG;IACH,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACrC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,KAAK,CAAC,SAAS,CAAC;IACjD,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,KAAK,CAAC,SAAS,CAAC;IACvD,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AA8ED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,2CA2F5D"}