@pikku/assistant-ui 0.12.3 → 0.12.5

package/CHANGELOG.md

@@ -1,11 +1,44 @@
 # @pikku/assistant-ui
 
+## 0.12.5
+
+### Patch Changes
+
+- 9060165: The console now shows function version history, live queue depths with a Failed column, and scheduler last-run status with run history. Workflow canvas and run selector have been polished. The console build is ~6.5× faster thanks to a switch to rolldown-vite (Vite 7 + Oxc React transform).
+
+## 0.12.4
+
+### Patch Changes
+
+- 424c777: `PikkuAgentChat` now accepts a `toolComponents` prop — a map of
+  `toolName` → React component — for per-tool custom rendering inside
+  the assistant bubble. Unmatched tool calls continue to fall through to
+  the default expandable tool-call display.
+
+  This unlocks generative-UI patterns: register a `renderWidget` tool on
+  the agent, return structured props from it, and mount real UI (charts,
+  diffs, cards) inline in the chat from the persisted tool-call args.
+  Because the rendered widget is just a tool call under the hood, it
+  survives refresh, streams correctly, and stays part of the thread's
+  history.
+
+  ```tsx
+  <PikkuAgentChat
+    agentName="myAgent"
+    threadId={threadId}
+    resourceId={userId}
+    api="/rpc/agent"
+    toolComponents={{
+      renderWidget: ({ args }) => <WidgetRegistry spec={args} />,
+    }}
+  />
+  ```
+
 ## 0.12.3
 
 ### Patch Changes
 
 - f85c234: Add unified credential system with per-user OAuth and AI agent pre-flight checks
-
   - Unified CredentialService with lazy loading per user via pikkuUserId
   - wire.getCredential() for typed single credential lookup
   - MissingCredentialError with structured payload for client-side connect flows

package/dist/cjs/pikku-agent-chat.d.ts

@@ -1,5 +1,8 @@
+import { type ComponentType, type ReactNode } from 'react';
+import { type ToolCallMessagePartComponent } from '@assistant-ui/react';
 import { type PikkuAgentRuntimeOptions } from './use-pikku-agent-runtime.js';
 export interface PikkuAgentChatProps extends PikkuAgentRuntimeOptions {
+    initialPrompt?: string;
     emptyMessage?: string;
     /** Hide tool calls from the chat display.
      *  - `true`: hide all non-approval tool calls
@@ -9,5 +12,18 @@ export interface PikkuAgentChatProps extends PikkuAgentRuntimeOptions {
     dark?: boolean;
     /** Max width of the chat content area. Defaults to 768. Set to 'none' for full width. */
     maxWidth?: number | 'none';
+    /**
+     * Per-tool renderers. Map `toolName` → React component to replace the
+     * default expandable tool-call box for that tool. Enables generative-UI
+     * patterns: e.g. register a `renderWidget` tool on the agent and mount
+     * real UI (charts, diffs, cards) inline in the assistant bubble from the
+     * persisted tool-call args.
+     *
+     * Any tool without an entry here falls through to the default renderer
+     * (which still respects `hideToolCalls` and the approval-request UI).
+     */
+    toolComponents?: Record<string, ToolCallMessagePartComponent>;
+    renderAssistantText?: (text: string) => ReactNode;
+    generativeUIComponents?: Record<string, ComponentType<any>>;
 }
 export declare function PikkuAgentChat(props: PikkuAgentChatProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/pikku-agent-chat.js

@@ -59,6 +59,9 @@ const darkColors = {
 };
 const ColorsContext = (0, react_1.createContext)(lightColors);
 const HideToolCallsContext = (0, react_1.createContext)(undefined);
+const ToolComponentsContext = (0, react_1.createContext)(undefined);
+const GenerativeUIComponentsContext = (0, react_1.createContext)(undefined);
+const RenderAssistantTextContext = (0, react_1.createContext)(undefined);
 function shouldHideToolCall(hideToolCalls, toolName) {
     if (!hideToolCalls)
         return false;
@@ -149,7 +152,9 @@ const ToolCallDisplay = ({ toolCallId, toolName, args, result, status, addResult
                         padding: '2px 6px',
                         borderRadius: 3,
                         background: responded === 'approved' ? colors.successBg : colors.errorBg,
-                        color: responded === 'approved' ? colors.successColor : colors.errorColor,
+                        color: responded === 'approved'
+                            ? colors.successColor
+                            : colors.errorColor,
                     }, children: responded })] }));
     }
     return ((0, jsx_runtime_1.jsxs)("div", { style: {
@@ -199,7 +204,12 @@ const ToolCallDisplay = ({ toolCallId, toolName, args, result, status, addResult
                             borderRadius: 4,
                             overflow: 'auto',
                             color: colors.text,
-                        }, children: JSON.stringify(displayArgs, null, 2) }), result !== undefined && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: 12, color: colors.textMuted, marginTop: 8, marginBottom: 2 }, children: "Result:" }), (0, jsx_runtime_1.jsx)("pre", { style: {
+                        }, children: JSON.stringify(displayArgs, null, 2) }), result !== undefined && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                                    fontSize: 12,
+                                    color: colors.textMuted,
+                                    marginTop: 8,
+                                    marginBottom: 2,
+                                }, children: "Result:" }), (0, jsx_runtime_1.jsx)("pre", { style: {
                                     fontSize: 11,
                                     background: colors.codeBg,
                                     padding: 8,
@@ -210,25 +220,68 @@ const ToolCallDisplay = ({ toolCallId, toolName, args, result, status, addResult
                                     ? result
                                     : JSON.stringify(result, null, 2) })] }))] }))] }));
 };
-const MarkdownText = ({ text, colors }) => {
+const MarkdownText = ({ text, colors, }) => {
     const components = (0, react_1.useMemo)(() => ({
-        p: ({ children }) => ((0, jsx_runtime_1.jsx)("p", { style: { margin: '0 0 8px', fontSize: 14, lineHeight: 1.6, color: colors.text }, children: children })),
+        p: ({ children }) => ((0, jsx_runtime_1.jsx)("p", { style: {
+                margin: '0 0 8px',
+                fontSize: 14,
+                lineHeight: 1.6,
+                color: colors.text,
+            }, children: children })),
         strong: ({ children }) => ((0, jsx_runtime_1.jsx)("strong", { style: { fontWeight: 600, color: colors.text }, children: children })),
         em: ({ children }) => ((0, jsx_runtime_1.jsx)("em", { style: { color: colors.text }, children: children })),
-        ul: ({ children }) => ((0, jsx_runtime_1.jsx)("ul", { style: { margin: '4px 0 8px', paddingLeft: 20, fontSize: 14, color: colors.text }, children: children })),
-        ol: ({ children }) => ((0, jsx_runtime_1.jsx)("ol", { style: { margin: '4px 0 8px', paddingLeft: 20, fontSize: 14, color: colors.text }, children: children })),
+        ul: ({ children }) => ((0, jsx_runtime_1.jsx)("ul", { style: {
+                margin: '4px 0 8px',
+                paddingLeft: 20,
+                fontSize: 14,
+                color: colors.text,
+            }, children: children })),
+        ol: ({ children }) => ((0, jsx_runtime_1.jsx)("ol", { style: {
+                margin: '4px 0 8px',
+                paddingLeft: 20,
+                fontSize: 14,
+                color: colors.text,
+            }, children: children })),
         li: ({ children }) => ((0, jsx_runtime_1.jsx)("li", { style: { marginBottom: 2, lineHeight: 1.6 }, children: children })),
         code: ({ children, className }) => {
             const isBlock = className === null || className === void 0 ? void 0 : className.startsWith('language-');
             if (isBlock) {
-                return ((0, jsx_runtime_1.jsx)("pre", { style: { background: colors.codeBg, padding: 10, borderRadius: 4, overflow: 'auto', margin: '4px 0 8px', fontSize: 12 }, children: (0, jsx_runtime_1.jsx)("code", { style: { color: colors.text }, children: children }) }));
+                return ((0, jsx_runtime_1.jsx)("pre", { style: {
+                        background: colors.codeBg,
+                        padding: 10,
+                        borderRadius: 4,
+                        overflow: 'auto',
+                        margin: '4px 0 8px',
+                        fontSize: 12,
+                    }, children: (0, jsx_runtime_1.jsx)("code", { style: { color: colors.text }, children: children }) }));
             }
-            return ((0, jsx_runtime_1.jsx)("code", { style: { background: colors.codeBg, padding: '1px 4px', borderRadius: 3, fontSize: 13, color: colors.text }, children: children }));
+            return ((0, jsx_runtime_1.jsx)("code", { style: {
+                    background: colors.codeBg,
+                    padding: '1px 4px',
+                    borderRadius: 3,
+                    fontSize: 13,
+                    color: colors.text,
+                }, children: children }));
         },
         pre: ({ children }) => (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children }),
-        h1: ({ children }) => (0, jsx_runtime_1.jsx)("h3", { style: { margin: '8px 0 4px', fontSize: 16, fontWeight: 600, color: colors.text }, children: children }),
-        h2: ({ children }) => (0, jsx_runtime_1.jsx)("h4", { style: { margin: '8px 0 4px', fontSize: 15, fontWeight: 600, color: colors.text }, children: children }),
-        h3: ({ children }) => (0, jsx_runtime_1.jsx)("h5", { style: { margin: '8px 0 4px', fontSize: 14, fontWeight: 600, color: colors.text }, children: children }),
+        h1: ({ children }) => ((0, jsx_runtime_1.jsx)("h3", { style: {
+                margin: '8px 0 4px',
+                fontSize: 16,
+                fontWeight: 600,
+                color: colors.text,
+            }, children: children })),
+        h2: ({ children }) => ((0, jsx_runtime_1.jsx)("h4", { style: {
+                margin: '8px 0 4px',
+                fontSize: 15,
+                fontWeight: 600,
+                color: colors.text,
+            }, children: children })),
+        h3: ({ children }) => ((0, jsx_runtime_1.jsx)("h5", { style: {
+                margin: '8px 0 4px',
+                fontSize: 14,
+                fontWeight: 600,
+                color: colors.text,
+            }, children: children })),
         a: ({ href, children }) => ((0, jsx_runtime_1.jsx)("a", { href: href, target: "_blank", rel: "noopener noreferrer", style: { color: colors.textMuted, textDecoration: 'underline' }, children: children })),
     }), [colors]);
     return (0, jsx_runtime_1.jsx)(react_markdown_1.default, { components: components, children: text });
@@ -249,11 +302,18 @@ const UserMessage = () => {
                         borderRadius: 12,
                         backgroundColor: colors.userBubble,
                     }, children: (0, jsx_runtime_1.jsx)(react_2.MessagePrimitive.Content, { components: {
-                            Text: ({ text }) => ((0, jsx_runtime_1.jsx)("span", { style: { fontSize: 14, whiteSpace: 'pre-wrap', color: colors.text }, children: text })),
+                            Text: ({ text }) => ((0, jsx_runtime_1.jsx)("span", { style: {
+                                    fontSize: 14,
+                                    whiteSpace: 'pre-wrap',
+                                    color: colors.text,
+                                }, children: text })),
                         } }) })] }) }));
 };
 const AssistantMessage = () => {
     const colors = (0, react_1.useContext)(ColorsContext);
+    const toolComponents = (0, react_1.useContext)(ToolComponentsContext);
+    const generativeUIComponents = (0, react_1.useContext)(GenerativeUIComponentsContext);
+    const renderAssistantText = (0, react_1.useContext)(RenderAssistantTextContext);
     return ((0, jsx_runtime_1.jsx)("div", { style: {
             display: 'flex',
             justifyContent: 'flex-start',
@@ -262,12 +322,16 @@ const AssistantMessage = () => {
                         padding: 12,
                         borderRadius: 12,
                         backgroundColor: colors.assistantBubble,
-                    }, children: [(0, jsx_runtime_1.jsx)(react_2.MessagePrimitive.Content, { components: {
-                                Text: ({ text }) => ((0, jsx_runtime_1.jsx)(MarkdownText, { text: text, colors: colors })),
-                                tools: {
+                    }, children: [(0, jsx_runtime_1.jsx)(react_2.MessagePrimitive.Content, { components: Object.assign({ Text: ({ text }) => renderAssistantText ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: renderAssistantText(text) })) : ((0, jsx_runtime_1.jsx)(MarkdownText, { text: text, colors: colors })), tools: {
+                                    by_name: toolComponents,
                                     Fallback: (props) => ((0, jsx_runtime_1.jsx)(ToolCallDisplay, { toolCallId: props.toolCallId, toolName: props.toolName, args: props.args, result: props.result, status: (0, use_pikku_agent_runtime_js_1.resolvePikkuToolStatus)(props.status, props.result), addResult: props.addResult })),
-                                },
-                            } }), (0, jsx_runtime_1.jsx)(react_2.MessagePrimitive.If, { last: true, children: (0, jsx_runtime_1.jsx)(react_2.ThreadPrimitive.If, { running: true, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                                } }, (generativeUIComponents
+                                ? {
+                                    generativeUI: {
+                                        components: generativeUIComponents,
+                                    },
+                                }
+                                : {})) }), (0, jsx_runtime_1.jsx)(react_2.MessagePrimitive.If, { last: true, children: (0, jsx_runtime_1.jsx)(react_2.ThreadPrimitive.If, { running: true, children: (0, jsx_runtime_1.jsx)("div", { style: {
                                         display: 'flex',
                                         alignItems: 'center',
                                         gap: 6,
@@ -276,71 +340,99 @@ const AssistantMessage = () => {
                                         color: colors.textMuted,
                                     }, children: "Thinking..." }) }) })] })] }) }));
 };
+const ComposerPrefill = ({ text }) => {
+    const composer = (0, react_2.useComposerRuntime)();
+    const filled = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(() => {
+        if (filled.current || !text)
+            return;
+        filled.current = true;
+        if (composer.getState().text === '')
+            composer.setText(text);
+    }, [text, composer]);
+    return null;
+};
 const PikkuComposer = ({ disabled, }) => {
     const colors = (0, react_1.useContext)(ColorsContext);
-    return ((0, jsx_runtime_1.jsx)("div", { style: { padding: '8px 0 16px' }, children: (0, jsx_runtime_1.jsx)(react_2.ComposerPrimitive.Root, { children: (0, jsx_runtime_1.jsxs)("div", { style: Object.assign({ border: `1px solid ${colors.border}`, borderRadius: 12, overflow: 'hidden', display: 'flex', alignItems: 'flex-end', padding: '6px 12px', gap: 8 }, (disabled ? { opacity: 0.5, pointerEvents: 'none' } : {})), children: [(0, jsx_runtime_1.jsx)(react_2.ComposerPrimitive.Input, { placeholder: disabled ? 'Respond to approval request above...' : 'Message...', rows: 2, disabled: disabled, style: {
-                            flex: 1,
+    return ((0, jsx_runtime_1.jsx)("div", { style: { padding: '8px 0 16px' }, children: (0, jsx_runtime_1.jsx)(react_2.ComposerPrimitive.Root, { children: (0, jsx_runtime_1.jsxs)("div", { style: Object.assign({ position: 'relative', zIndex: 2, display: 'flex', flexDirection: 'column', gap: 10, backgroundColor: colors.assistantBubble, border: `1px solid ${colors.border}`, borderRadius: 24, padding: '14px 12px 10px', boxShadow: darkColors.text === colors.text
+                        ? '0 14px 30px rgba(0,0,0,0.24)'
+                        : '0 14px 30px rgba(0,0,0,0.08)' }, (disabled
+                    ? { opacity: 0.5, pointerEvents: 'none' }
+                    : {})), children: [(0, jsx_runtime_1.jsx)(react_2.ComposerPrimitive.Input, { placeholder: disabled ? 'Respond to approval request above...' : 'Message...', rows: 1, disabled: disabled !== null && disabled !== void 0 ? disabled : false, style: {
+                            width: '100%',
+                            background: 'transparent',
                             border: 'none',
                             outline: 'none',
-                            resize: 'none',
+                            color: colors.text,
                             fontSize: 14,
                             fontFamily: 'inherit',
-                            padding: '4px 0',
-                            background: colors.inputBg,
-                            color: colors.text,
-                        } }), (0, jsx_runtime_1.jsx)(react_2.ComposerPrimitive.Send, { disabled: disabled, style: {
-                            width: 28,
-                            height: 28,
-                            borderRadius: '50%',
-                            border: 'none',
-                            background: disabled ? colors.textMuted : colors.sendBg,
-                            color: colors.sendColor,
-                            cursor: disabled ? 'not-allowed' : 'pointer',
+                            resize: 'none',
+                            lineHeight: 1.5,
+                            overflowY: 'auto',
+                        } }), (0, jsx_runtime_1.jsx)("div", { style: {
+                            width: '100%',
                             display: 'flex',
                             alignItems: 'center',
-                            justifyContent: 'center',
-                            flexShrink: 0,
-                            marginBottom: 2,
-                            fontSize: 14,
-                        }, children: "\u25B6" })] }) }) }));
+                            gap: 6,
+                            minWidth: 0,
+                            justifyContent: 'flex-end',
+                        }, children: (0, jsx_runtime_1.jsx)(react_2.ComposerPrimitive.Send, { disabled: disabled !== null && disabled !== void 0 ? disabled : false, style: {
+                                width: 30,
+                                height: 30,
+                                borderRadius: 999,
+                                border: `1px solid ${colors.border}`,
+                                background: '#e8e8e8',
+                                color: '#111111',
+                                cursor: disabled ? 'not-allowed' : 'pointer',
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                flexShrink: 0,
+                                transition: 'background-color 150ms ease, color 150ms ease, border-color 150ms ease',
+                            }, children: "\u2191" }) })] }) }) }));
 };
 function PikkuAgentChat(props) {
-    const { emptyMessage, hideToolCalls, dark, maxWidth = 768 } = props, runtimeOptions = __rest(props, ["emptyMessage", "hideToolCalls", "dark", "maxWidth"]);
+    const { emptyMessage, hideToolCalls, dark, maxWidth = 768, toolComponents, renderAssistantText, generativeUIComponents, initialPrompt } = props, runtimeOptions = __rest(props, ["emptyMessage", "hideToolCalls", "dark", "maxWidth", "toolComponents", "renderAssistantText", "generativeUIComponents", "initialPrompt"]);
     const { runtime, isAwaitingApproval, pendingApprovals, handleApproval } = (0, use_pikku_agent_runtime_js_1.usePikkuAgentRuntime)(runtimeOptions);
     const colors = dark ? darkColors : lightColors;
-    return ((0, jsx_runtime_1.jsx)(ColorsContext.Provider, { value: colors, children: (0, jsx_runtime_1.jsx)(use_pikku_agent_runtime_js_1.PikkuApprovalContext.Provider, { value: { pendingApprovals, handleApproval }, children: (0, jsx_runtime_1.jsx)(HideToolCallsContext.Provider, { value: hideToolCalls, children: (0, jsx_runtime_1.jsx)(react_2.AssistantRuntimeProvider, { runtime: runtime, children: (0, jsx_runtime_1.jsx)("div", { style: {
-                            height: '100%',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            background: colors.bg,
-                        }, children: (0, jsx_runtime_1.jsxs)(react_2.ThreadPrimitive.Root, { style: {
-                                display: 'flex',
-                                flexDirection: 'column',
-                                flex: 1,
-                                minHeight: 0,
-                            }, children: [(0, jsx_runtime_1.jsx)(react_2.ThreadPrimitive.Viewport, { style: {
-                                        flex: 1,
-                                        minHeight: 0,
-                                        overflowY: 'auto',
-                                    }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
-                                            maxWidth: maxWidth === 'none' ? undefined : maxWidth,
-                                            margin: '0 auto',
-                                            padding: 16,
+    return ((0, jsx_runtime_1.jsx)(ColorsContext.Provider, { value: colors, children: (0, jsx_runtime_1.jsx)(use_pikku_agent_runtime_js_1.PikkuApprovalContext.Provider, { value: { pendingApprovals, handleApproval }, children: (0, jsx_runtime_1.jsx)(HideToolCallsContext.Provider, { value: hideToolCalls, children: (0, jsx_runtime_1.jsx)(ToolComponentsContext.Provider, { value: toolComponents, children: (0, jsx_runtime_1.jsx)(GenerativeUIComponentsContext.Provider, { value: generativeUIComponents, children: (0, jsx_runtime_1.jsx)(RenderAssistantTextContext.Provider, { value: renderAssistantText, children: (0, jsx_runtime_1.jsxs)(react_2.AssistantRuntimeProvider, { runtime: runtime, children: [(0, jsx_runtime_1.jsx)(ComposerPrefill, { text: initialPrompt }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                            height: '100%',
                                             display: 'flex',
                                             flexDirection: 'column',
-                                            gap: 16,
-                                        }, children: [(0, jsx_runtime_1.jsx)(react_2.ThreadPrimitive.Empty, { children: (0, jsx_runtime_1.jsx)("div", { style: {
-                                                        display: 'flex',
-                                                        alignItems: 'center',
-                                                        justifyContent: 'center',
-                                                        minHeight: 300,
-                                                        color: colors.textMuted,
-                                                        textAlign: 'center',
-                                                        fontSize: 14,
-                                                    }, children: emptyMessage !== null && emptyMessage !== void 0 ? emptyMessage : (props.threadId
-                                                        ? 'Send a message to start the conversation.'
-                                                        : 'Start a new conversation.') }) }), (0, jsx_runtime_1.jsx)(react_2.ThreadPrimitive.Messages, { components: {
-                                                    UserMessage,
-                                                    AssistantMessage,
-                                                } })] }) }), (0, jsx_runtime_1.jsx)("div", { style: { maxWidth: maxWidth === 'none' ? undefined : maxWidth, margin: '0 auto', width: '100%', padding: '0 16px' }, children: (0, jsx_runtime_1.jsx)(PikkuComposer, { disabled: isAwaitingApproval }) })] }) }) }) }) }) }));
+                                            background: colors.bg,
+                                        }, children: (0, jsx_runtime_1.jsxs)(react_2.ThreadPrimitive.Root, { style: {
+                                                display: 'flex',
+                                                flexDirection: 'column',
+                                                flex: 1,
+                                                minHeight: 0,
+                                            }, children: [(0, jsx_runtime_1.jsx)(react_2.ThreadPrimitive.Viewport, { style: {
+                                                        flex: 1,
+                                                        minHeight: 0,
+                                                        overflowY: 'auto',
+                                                    }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                                                            maxWidth: maxWidth === 'none' ? undefined : maxWidth,
+                                                            margin: '0 auto',
+                                                            padding: 16,
+                                                            display: 'flex',
+                                                            flexDirection: 'column',
+                                                            gap: 16,
+                                                        }, children: [(0, jsx_runtime_1.jsx)(react_2.ThreadPrimitive.Empty, { children: (0, jsx_runtime_1.jsx)("div", { style: {
+                                                                        display: 'flex',
+                                                                        alignItems: 'center',
+                                                                        justifyContent: 'center',
+                                                                        minHeight: 300,
+                                                                        color: colors.textMuted,
+                                                                        textAlign: 'center',
+                                                                        fontSize: 14,
+                                                                    }, children: emptyMessage !== null && emptyMessage !== void 0 ? emptyMessage : (props.threadId
+                                                                        ? 'Send a message to start the conversation.'
+                                                                        : 'Start a new conversation.') }) }), (0, jsx_runtime_1.jsx)(react_2.ThreadPrimitive.Messages, { components: {
+                                                                    UserMessage,
+                                                                    AssistantMessage,
+                                                                } })] }) }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                                        maxWidth: maxWidth === 'none' ? undefined : maxWidth,
+                                                        margin: '0 auto',
+                                                        width: '100%',
+                                                        padding: '0 16px',
+                                                    }, children: (0, jsx_runtime_1.jsx)(PikkuComposer, { disabled: isAwaitingApproval }) })] }) })] }) }) }) }) }) }) }));
 }

package/dist/cjs/use-pikku-agent-runtime.js

@@ -73,7 +73,7 @@ function parseSSEStream(reader) {
  * Shared helper: consume an SSE stream and populate text/toolCalls.
  * Returns an array of PendingApprovals when the stream requests them, or empty when done.
  */
-function processStream(reader, text, toolCalls, yieldContent, onFinish) {
+function processStream(reader, text, toolCalls, structuredParts, yieldContent, onFinish) {
     return __awaiter(this, void 0, void 0, function* () {
         var _a, e_1, _b, _c;
         const pendingApprovals = [];
@@ -122,6 +122,31 @@ function processStream(reader, text, toolCalls, yieldContent, onFinish) {
                         }
                         break;
                     }
+                    case 'generative-ui': {
+                        const nextPart = {
+                            type: 'generative-ui',
+                            spec: event.spec,
+                        };
+                        const existingIndex = structuredParts.findIndex((part) => part.type === 'generative-ui');
+                        if (existingIndex === -1)
+                            structuredParts.push(nextPart);
+                        else
+                            structuredParts[existingIndex] = nextPart;
+                        break;
+                    }
+                    case 'data': {
+                        const nextPart = {
+                            type: 'data',
+                            name: event.name,
+                            data: event.data,
+                        };
+                        const existingIndex = structuredParts.findIndex((part) => part.type === 'data' && part.name === event.name);
+                        if (existingIndex === -1)
+                            structuredParts.push(nextPart);
+                        else
+                            structuredParts[existingIndex] = nextPart;
+                        break;
+                    }
                     case 'approval-request':
                         pendingApprovals.push({
                             toolCallId: event.toolCallId,
@@ -205,13 +230,32 @@ function resolvePikkuToolStatus(status, result) {
         return { type: 'error' };
     return { type: 'completed' };
 }
-function buildContent(text, toolCalls) {
+function buildRichContent(text, structuredParts, toolCalls) {
     const content = [];
     if (text.value)
         content.push({ type: 'text', text: text.value });
+    content.push(...structuredParts);
     content.push(...toolCalls);
     return content;
 }
+function buildContentFromAgentResult(result) {
+    const content = [];
+    if (typeof result === 'string') {
+        if (result)
+            content.push({ type: 'text', text: result });
+        return content;
+    }
+    if (!result || typeof result !== 'object')
+        return content;
+    const record = result;
+    if (typeof record.text === 'string' && record.text) {
+        content.push({ type: 'text', text: record.text });
+    }
+    if (record.ui != null) {
+        content.push({ type: 'generative-ui', spec: record.ui });
+    }
+    return content;
+}
 function createPikkuStreamingAdapter(optionsRef, pendingApprovalsRef, approvalDecisionsRef, setPendingApprovalsRef, onFinishRef) {
     return {
         run(_a) {
@@ -237,6 +281,7 @@ function createPikkuStreamingAdapter(optionsRef, pendingApprovalsRef, approvalDe
                     // The last resume triggers continuation (next LLM step).
                     let lastText = { value: '' };
                     let lastToolCalls = [];
+                    let lastStructuredParts = [];
                     let nextApprovals = [];
                     for (let i = 0; i < decisions.length; i++) {
                         const decision = decisions[i];
@@ -262,8 +307,9 @@ function createPikkuStreamingAdapter(optionsRef, pendingApprovalsRef, approvalDe
                         }
                         const text = { value: '' };
                         const toolCalls = [];
+                        const structuredParts = [];
                         const reader = resumeResponse.body.getReader();
-                        const streamApprovals = yield __await(processStream(reader, text, toolCalls, () => { }, i === decisions.length - 1
+                        const streamApprovals = yield __await(processStream(reader, text, toolCalls, structuredParts, () => { }, i === decisions.length - 1
                             ? ((_d = onFinishRef.current) !== null && _d !== void 0 ? _d : undefined)
                             : undefined)
                         // Keep the last resume's output (it has continuation content)
@@ -271,12 +317,13 @@ function createPikkuStreamingAdapter(optionsRef, pendingApprovalsRef, approvalDe
                         // Keep the last resume's output (it has continuation content)
                         lastText = text;
                         lastToolCalls = toolCalls;
+                        lastStructuredParts = structuredParts;
                         if (streamApprovals.length > 0) {
                             nextApprovals = streamApprovals;
                         }
                     }
                     // Build content from the last resume's output
-                    const content = buildContent(lastText, lastToolCalls);
+                    const content = buildRichContent(lastText, lastStructuredParts, lastToolCalls);
                     if (nextApprovals.length > 0) {
                         // More approvals from continuation — show them
                         pendingApprovalsRef.current = nextApprovals;
@@ -301,7 +348,7 @@ function createPikkuStreamingAdapter(optionsRef, pendingApprovalsRef, approvalDe
                                 lastToolCalls.push(approvalToolCall);
                             }
                         }
-                        const updatedContent = buildContent(lastText, lastToolCalls);
+                        const updatedContent = buildRichContent(lastText, lastStructuredParts, lastToolCalls);
                         yield yield __await({
                             content: updatedContent,
                             status: {
@@ -380,14 +427,15 @@ function createPikkuStreamingAdapter(optionsRef, pendingApprovalsRef, approvalDe
                 }
                 const text = { value: '' };
                 const toolCalls = [];
+                const structuredParts = [];
                 let pendingContent = null;
                 const yieldContent = () => {
-                    const content = buildContent(text, toolCalls);
+                    const content = buildRichContent(text, structuredParts, toolCalls);
                     if (content.length > 0)
                         pendingContent = content;
                 };
                 const reader = response.body.getReader();
-                const approvals = yield __await(processStream(reader, text, toolCalls, yieldContent, (_e = onFinishRef.current) !== null && _e !== void 0 ? _e : undefined));
+                const approvals = yield __await(processStream(reader, text, toolCalls, structuredParts, yieldContent, (_e = onFinishRef.current) !== null && _e !== void 0 ? _e : undefined));
                 if (approvals.length === 0) {
                     // No approval needed — yield final content and done
                     if (pendingContent) {
@@ -427,7 +475,7 @@ function createPikkuStreamingAdapter(optionsRef, pendingApprovalsRef, approvalDe
                         toolCalls.splice(i, 1);
                     }
                 }
-                const content = buildContent(text, toolCalls);
+                const content = buildRichContent(text, structuredParts, toolCalls);
                 yield yield __await({
                     content,
                     status: {
@@ -497,7 +545,12 @@ const convertDbMessages = (dbMessages) => {
             continue;
         const parts = [];
         if (msg.content) {
-            parts.push({ type: 'text', text: msg.content });
+            if (Array.isArray(msg.content)) {
+                parts.push(...msg.content);
+            }
+            else {
+                parts.push({ type: 'text', text: msg.content });
+            }
         }
         if (Array.isArray(msg.toolCalls)) {
             for (const tc of msg.toolCalls) {
@@ -587,6 +640,7 @@ function createPikkuNonStreamingAdapter(optionsRef, pendingApprovalsRef, approva
                     // Resume uses SSE (same as streaming mode)
                     let lastText = { value: '' };
                     let lastToolCalls = [];
+                    let lastStructuredParts = [];
                     let nextApprovals = [];
                     for (let i = 0; i < decisions.length; i++) {
                         const decision = decisions[i];
@@ -611,17 +665,19 @@ function createPikkuNonStreamingAdapter(optionsRef, pendingApprovalsRef, approva
                         }
                         const text = { value: '' };
                         const toolCalls = [];
+                        const structuredParts = [];
                         const reader = resumeResponse.body.getReader();
-                        const streamApprovals = yield __await(processStream(reader, text, toolCalls, () => { }, i === decisions.length - 1
+                        const streamApprovals = yield __await(processStream(reader, text, toolCalls, structuredParts, () => { }, i === decisions.length - 1
                             ? ((_d = onFinishRef.current) !== null && _d !== void 0 ? _d : undefined)
                             : undefined));
                         lastText = text;
                         lastToolCalls = toolCalls;
+                        lastStructuredParts = structuredParts;
                         if (streamApprovals.length > 0) {
                             nextApprovals = streamApprovals;
                         }
                     }
-                    const content = buildContent(lastText, lastToolCalls);
+                    const content = buildRichContent(lastText, lastStructuredParts, lastToolCalls);
                     if (nextApprovals.length > 0) {
                         pendingApprovalsRef.current = nextApprovals;
                         setPendingApprovalsRef.current(nextApprovals);
@@ -644,7 +700,7 @@ function createPikkuNonStreamingAdapter(optionsRef, pendingApprovalsRef, approva
                                 lastToolCalls.push(approvalToolCall);
                             }
                         }
-                        const updatedContent = buildContent(lastText, lastToolCalls);
+                        const updatedContent = buildRichContent(lastText, lastStructuredParts, lastToolCalls);
                         yield yield __await({
                             content: updatedContent,
                             status: {
@@ -701,9 +757,7 @@ function createPikkuNonStreamingAdapter(optionsRef, pendingApprovalsRef, approva
                             : {})), (approval.reason ? { __approvalReason: approval.reason } : {})),
                     }));
                     const content = [];
-                    if (json.result) {
-                        content.push({ type: 'text', text: json.result });
-                    }
+                    content.push(...buildContentFromAgentResult(json.result));
                     content.push(...toolCalls);
                     yield yield __await({
                         content,
@@ -716,10 +770,7 @@ function createPikkuNonStreamingAdapter(optionsRef, pendingApprovalsRef, approva
                 }
                 // No approvals — yield complete content
                 (_f = onFinishRef.current) === null || _f === void 0 ? void 0 : _f.call(onFinishRef);
-                const content = [];
-                if (json.result) {
-                    content.push({ type: 'text', text: String(json.result) });
-                }
+                const content = buildContentFromAgentResult(json.result);
                 if (content.length > 0) {
                     yield yield __await({ content });
                 }

package/dist/esm/pikku-agent-chat.d.ts

@@ -1,5 +1,8 @@
+import { type ComponentType, type ReactNode } from 'react';
+import { type ToolCallMessagePartComponent } from '@assistant-ui/react';
 import { type PikkuAgentRuntimeOptions } from './use-pikku-agent-runtime.js';
 export interface PikkuAgentChatProps extends PikkuAgentRuntimeOptions {
+    initialPrompt?: string;
     emptyMessage?: string;
     /** Hide tool calls from the chat display.
      *  - `true`: hide all non-approval tool calls
@@ -9,5 +12,18 @@ export interface PikkuAgentChatProps extends PikkuAgentRuntimeOptions {
     dark?: boolean;
     /** Max width of the chat content area. Defaults to 768. Set to 'none' for full width. */
     maxWidth?: number | 'none';
+    /**
+     * Per-tool renderers. Map `toolName` → React component to replace the
+     * default expandable tool-call box for that tool. Enables generative-UI
+     * patterns: e.g. register a `renderWidget` tool on the agent and mount
+     * real UI (charts, diffs, cards) inline in the assistant bubble from the
+     * persisted tool-call args.
+     *
+     * Any tool without an entry here falls through to the default renderer
+     * (which still respects `hideToolCalls` and the approval-request UI).
+     */
+    toolComponents?: Record<string, ToolCallMessagePartComponent>;
+    renderAssistantText?: (text: string) => ReactNode;
+    generativeUIComponents?: Record<string, ComponentType<any>>;
 }
 export declare function PikkuAgentChat(props: PikkuAgentChatProps): import("react/jsx-runtime").JSX.Element;