@pikku/assistant-ui 0.12.2 → 0.12.4

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # @pikku/assistant-ui
 
+## 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
+  - Console UI: Global/Users credential tabs, per-user OAuth connect/revoke
+  - AI agent pre-flight check: detects missing OAuth credentials from addon metadata, shows "Connect your accounts" prompt before chat
+  - CLI codegen: generates credentialsMeta per addon package for runtime lookup
+  - Vercel AI runner: catches MissingCredentialError as runtime fallback
+
 ## 0.12.2
 
 ### Patch Changes

package/dist/cjs/index.d.ts

@@ -1,4 +1,4 @@
 export { usePikkuAgentRuntime, usePikkuAgentNonStreamingRuntime, PikkuApprovalContext, usePikkuApproval, convertDbMessages, isDeniedResult, resolvePikkuToolStatus, } from './use-pikku-agent-runtime.js';
-export type { PikkuAgentRuntimeOptions, PendingApproval, PikkuApprovalContextValue, PikkuToolStatusType, PikkuToolStatus, } from './use-pikku-agent-runtime.js';
+export type { PikkuAgentRuntimeOptions, PendingApproval, PikkuApprovalContextValue, PikkuToolStatusType, PikkuToolStatus, MissingCredentialPayload, } from './use-pikku-agent-runtime.js';
 export { PikkuAgentChat } from './pikku-agent-chat.js';
 export type { PikkuAgentChatProps } from './pikku-agent-chat.js';

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

@@ -1,3 +1,4 @@
+import { type ToolCallMessagePartComponent } from '@assistant-ui/react';
 import { type PikkuAgentRuntimeOptions } from './use-pikku-agent-runtime.js';
 export interface PikkuAgentChatProps extends PikkuAgentRuntimeOptions {
     emptyMessage?: string;
@@ -7,5 +8,18 @@ export interface PikkuAgentChatProps extends PikkuAgentRuntimeOptions {
      */
     hideToolCalls?: boolean | string[];
     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>;
 }
 export declare function PikkuAgentChat(props: PikkuAgentChatProps): import("react/jsx-runtime").JSX.Element;

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

@@ -34,6 +34,8 @@ const lightColors = {
     successColor: '#2e7d32',
     errorBg: '#ffebee',
     errorColor: '#c62828',
+    warningBg: '#fff3e0',
+    warningColor: '#e65100',
 };
 const darkColors = {
     bg: 'transparent',
@@ -52,9 +54,12 @@ const darkColors = {
     successColor: '#00e68a',
     errorBg: 'rgba(220, 38, 38, 0.1)',
     errorColor: '#f87171',
+    warningBg: 'rgba(245, 158, 11, 0.1)',
+    warningColor: '#fbbf24',
 };
 const ColorsContext = (0, react_1.createContext)(lightColors);
 const HideToolCallsContext = (0, react_1.createContext)(undefined);
+const ToolComponentsContext = (0, react_1.createContext)(undefined);
 function shouldHideToolCall(hideToolCalls, toolName) {
     if (!hideToolCalls)
         return false;
@@ -145,7 +150,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: {
@@ -170,7 +177,13 @@ const ToolCallDisplay = ({ toolCallId, toolName, args, result, status, addResult
                             borderRadius: 3,
                             background: colors.errorBg,
                             color: colors.errorColor,
-                        }, children: "error" })), status.type === 'denied' && ((0, jsx_runtime_1.jsx)("span", { style: {
+                        }, children: "error" })), status.type === 'missing-credential' && ((0, jsx_runtime_1.jsx)("span", { style: {
+                            fontSize: 11,
+                            padding: '1px 5px',
+                            borderRadius: 3,
+                            background: colors.warningBg,
+                            color: colors.warningColor,
+                        }, children: "credential required" })), status.type === 'denied' && ((0, jsx_runtime_1.jsx)("span", { style: {
                             fontSize: 11,
                             padding: '1px 5px',
                             borderRadius: 3,
@@ -189,7 +202,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,
@@ -200,25 +218,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 });
@@ -239,11 +300,16 @@ 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);
     return ((0, jsx_runtime_1.jsx)("div", { style: {
             display: 'flex',
             justifyContent: 'flex-start',
@@ -253,8 +319,9 @@ const AssistantMessage = () => {
                         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 })),
+                                Text: ({ 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: {
@@ -268,7 +335,9 @@ const AssistantMessage = () => {
 };
 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: {
+    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,
                             border: 'none',
                             outline: 'none',
@@ -295,42 +364,47 @@ const PikkuComposer = ({ disabled, }) => {
                         }, children: "\u25B6" })] }) }) }));
 };
 function PikkuAgentChat(props) {
-    const { emptyMessage, hideToolCalls, dark } = props, runtimeOptions = __rest(props, ["emptyMessage", "hideToolCalls", "dark"]);
+    const { emptyMessage, hideToolCalls, dark, maxWidth = 768, toolComponents } = props, runtimeOptions = __rest(props, ["emptyMessage", "hideToolCalls", "dark", "maxWidth", "toolComponents"]);
     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: {
+    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)(react_2.AssistantRuntimeProvider, { runtime: runtime, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                                height: '100%',
                                 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: 768,
+                                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',
-                                            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: 768, margin: '0 auto', width: '100%', padding: '0 16px' }, children: (0, jsx_runtime_1.jsx)(PikkuComposer, { disabled: isAwaitingApproval }) })] }) }) }) }) }) }));
+                                            width: '100%',
+                                            padding: '0 16px',
+                                        }, children: (0, jsx_runtime_1.jsx)(PikkuComposer, { disabled: isAwaitingApproval }) })] }) }) }) }) }) }) }));
 }

package/dist/cjs/use-pikku-agent-runtime.d.ts

@@ -17,6 +17,10 @@ export interface PendingApproval {
     args: unknown;
     reason?: string;
     runId: string;
+    type?: 'approval-request' | 'credential-request';
+    credentialName?: string;
+    credentialType?: 'oauth2' | 'apikey';
+    connectUrl?: string;
 }
 export interface PikkuApprovalContextValue {
     pendingApprovals: PendingApproval[];
@@ -25,9 +29,18 @@ export interface PikkuApprovalContextValue {
 export declare const PikkuApprovalContext: import("react").Context<PikkuApprovalContextValue>;
 export declare const usePikkuApproval: () => PikkuApprovalContextValue;
 export declare function isDeniedResult(result: unknown): boolean;
-export type PikkuToolStatusType = 'running' | 'requires-action' | 'completed' | 'denied' | 'error';
+export type PikkuToolStatusType = 'running' | 'requires-action' | 'completed' | 'denied' | 'error' | 'missing-credential';
+export type MissingCredentialPayload = {
+    error: 'missing_credential';
+    credentialName: string;
+    credentialType: 'oauth2' | 'apikey';
+    connectUrl?: string;
+};
 export type PikkuToolStatus = {
-    type: PikkuToolStatusType;
+    type: Exclude<PikkuToolStatusType, 'missing-credential'>;
+} | {
+    type: 'missing-credential';
+    payload: MissingCredentialPayload;
 };
 export declare function resolvePikkuToolStatus(status: {
     type: string;

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

@@ -129,6 +129,19 @@ function processStream(reader, text, toolCalls, yieldContent, onFinish) {
                             args: event.args,
                             reason: event.reason,
                             runId: event.runId,
+                            type: 'approval-request',
+                        });
+                        break;
+                    case 'credential-request':
+                        pendingApprovals.push({
+                            toolCallId: event.toolCallId,
+                            toolName: event.toolName,
+                            args: event.args,
+                            runId: event.runId,
+                            type: 'credential-request',
+                            credentialName: event.credentialName,
+                            credentialType: event.credentialType,
+                            connectUrl: event.connectUrl,
                         });
                         break;
                     case 'error':
@@ -162,6 +175,22 @@ function isDeniedResult(result) {
         return false;
     }
 }
+function isMissingCredentialResult(result) {
+    if (typeof result === 'object' &&
+        result &&
+        result.error === 'missing_credential') {
+        return result;
+    }
+    if (typeof result === 'string') {
+        try {
+            const parsed = JSON.parse(result);
+            if ((parsed === null || parsed === void 0 ? void 0 : parsed.error) === 'missing_credential')
+                return parsed;
+        }
+        catch (_a) { }
+    }
+    return null;
+}
 function resolvePikkuToolStatus(status, result) {
     if (status.type === 'running')
         return { type: 'running' };
@@ -169,6 +198,9 @@ function resolvePikkuToolStatus(status, result) {
         return { type: 'requires-action' };
     if (isDeniedResult(result))
         return { type: 'denied' };
+    const missingCred = isMissingCredentialResult(result);
+    if (missingCred)
+        return { type: 'missing-credential', payload: missingCred };
     if (typeof result === 'string' && result.startsWith('Error:'))
         return { type: 'error' };
     return { type: 'completed' };
@@ -315,8 +347,11 @@ function createPikkuStreamingAdapter(optionsRef, pendingApprovalsRef, approvalDe
                 catch (e) {
                     const msg = (e === null || e === void 0 ? void 0 : e.message) || 'Unknown error';
                     let errorText = 'Failed to connect to the agent.';
-                    if (msg.includes('Failed to fetch') || msg.includes('NetworkError') || msg.includes('CORS')) {
-                        errorText = 'Unable to reach the agent server. The deployment may be down or the URL may be incorrect.';
+                    if (msg.includes('Failed to fetch') ||
+                        msg.includes('NetworkError') ||
+                        msg.includes('CORS')) {
+                        errorText =
+                            'Unable to reach the agent server. The deployment may be down or the URL may be incorrect.';
                     }
                     else if (msg.includes('abort')) {
                         return yield __await(void 0);
@@ -330,10 +365,12 @@ function createPikkuStreamingAdapter(optionsRef, pendingApprovalsRef, approvalDe
                         errorText = 'Authentication error.';
                     }
                     else if (response.status === 404) {
-                        errorText = 'Agent not found — the agent may not be configured for this project.';
+                        errorText =
+                            'Agent not found — the agent may not be configured for this project.';
                     }
                     else if (response.status === 502 || response.status === 503) {
-                        errorText = 'The agent server is currently unavailable. Try again in a moment.';
+                        errorText =
+                            'The agent server is currently unavailable. Try again in a moment.';
                     }
                     else if (response.status === 429) {
                         errorText = 'Rate limited — too many requests. Please wait a moment.';

package/dist/esm/index.d.ts

@@ -1,4 +1,4 @@
 export { usePikkuAgentRuntime, usePikkuAgentNonStreamingRuntime, PikkuApprovalContext, usePikkuApproval, convertDbMessages, isDeniedResult, resolvePikkuToolStatus, } from './use-pikku-agent-runtime.js';
-export type { PikkuAgentRuntimeOptions, PendingApproval, PikkuApprovalContextValue, PikkuToolStatusType, PikkuToolStatus, } from './use-pikku-agent-runtime.js';
+export type { PikkuAgentRuntimeOptions, PendingApproval, PikkuApprovalContextValue, PikkuToolStatusType, PikkuToolStatus, MissingCredentialPayload, } from './use-pikku-agent-runtime.js';
 export { PikkuAgentChat } from './pikku-agent-chat.js';
 export type { PikkuAgentChatProps } from './pikku-agent-chat.js';

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

@@ -1,3 +1,4 @@
+import { type ToolCallMessagePartComponent } from '@assistant-ui/react';
 import { type PikkuAgentRuntimeOptions } from './use-pikku-agent-runtime.js';
 export interface PikkuAgentChatProps extends PikkuAgentRuntimeOptions {
     emptyMessage?: string;
@@ -7,5 +8,18 @@ export interface PikkuAgentChatProps extends PikkuAgentRuntimeOptions {
      */
     hideToolCalls?: boolean | string[];
     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>;
 }
 export declare function PikkuAgentChat(props: PikkuAgentChatProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { createContext, useContext, useState, useMemo } from 'react';
+import { createContext, useContext, useState, useMemo, } from 'react';
 import Markdown from 'react-markdown';
 import { AssistantRuntimeProvider, ThreadPrimitive, MessagePrimitive, ComposerPrimitive, } from '@assistant-ui/react';
 import { usePikkuAgentRuntime, PikkuApprovalContext, usePikkuApproval, resolvePikkuToolStatus, } from './use-pikku-agent-runtime.js';
@@ -20,6 +20,8 @@ const lightColors = {
     successColor: '#2e7d32',
     errorBg: '#ffebee',
     errorColor: '#c62828',
+    warningBg: '#fff3e0',
+    warningColor: '#e65100',
 };
 const darkColors = {
     bg: 'transparent',
@@ -38,9 +40,12 @@ const darkColors = {
     successColor: '#00e68a',
     errorBg: 'rgba(220, 38, 38, 0.1)',
     errorColor: '#f87171',
+    warningBg: 'rgba(245, 158, 11, 0.1)',
+    warningColor: '#fbbf24',
 };
 const ColorsContext = createContext(lightColors);
 const HideToolCallsContext = createContext(undefined);
+const ToolComponentsContext = createContext(undefined);
 function shouldHideToolCall(hideToolCalls, toolName) {
     if (!hideToolCalls)
         return false;
@@ -131,7 +136,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 (_jsxs("div", { style: {
@@ -156,7 +163,13 @@ const ToolCallDisplay = ({ toolCallId, toolName, args, result, status, addResult
                             borderRadius: 3,
                             background: colors.errorBg,
                             color: colors.errorColor,
-                        }, children: "error" })), status.type === 'denied' && (_jsx("span", { style: {
+                        }, children: "error" })), status.type === 'missing-credential' && (_jsx("span", { style: {
+                            fontSize: 11,
+                            padding: '1px 5px',
+                            borderRadius: 3,
+                            background: colors.warningBg,
+                            color: colors.warningColor,
+                        }, children: "credential required" })), status.type === 'denied' && (_jsx("span", { style: {
                             fontSize: 11,
                             padding: '1px 5px',
                             borderRadius: 3,
@@ -175,7 +188,12 @@ const ToolCallDisplay = ({ toolCallId, toolName, args, result, status, addResult
                             borderRadius: 4,
                             overflow: 'auto',
                             color: colors.text,
-                        }, children: JSON.stringify(displayArgs, null, 2) }), result !== undefined && (_jsxs(_Fragment, { children: [_jsx("div", { style: { fontSize: 12, color: colors.textMuted, marginTop: 8, marginBottom: 2 }, children: "Result:" }), _jsx("pre", { style: {
+                        }, children: JSON.stringify(displayArgs, null, 2) }), result !== undefined && (_jsxs(_Fragment, { children: [_jsx("div", { style: {
+                                    fontSize: 12,
+                                    color: colors.textMuted,
+                                    marginTop: 8,
+                                    marginBottom: 2,
+                                }, children: "Result:" }), _jsx("pre", { style: {
                                     fontSize: 11,
                                     background: colors.codeBg,
                                     padding: 8,
@@ -186,25 +204,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 = useMemo(() => ({
-        p: ({ children }) => (_jsx("p", { style: { margin: '0 0 8px', fontSize: 14, lineHeight: 1.6, color: colors.text }, children: children })),
+        p: ({ children }) => (_jsx("p", { style: {
+                margin: '0 0 8px',
+                fontSize: 14,
+                lineHeight: 1.6,
+                color: colors.text,
+            }, children: children })),
         strong: ({ children }) => (_jsx("strong", { style: { fontWeight: 600, color: colors.text }, children: children })),
         em: ({ children }) => (_jsx("em", { style: { color: colors.text }, children: children })),
-        ul: ({ children }) => (_jsx("ul", { style: { margin: '4px 0 8px', paddingLeft: 20, fontSize: 14, color: colors.text }, children: children })),
-        ol: ({ children }) => (_jsx("ol", { style: { margin: '4px 0 8px', paddingLeft: 20, fontSize: 14, color: colors.text }, children: children })),
+        ul: ({ children }) => (_jsx("ul", { style: {
+                margin: '4px 0 8px',
+                paddingLeft: 20,
+                fontSize: 14,
+                color: colors.text,
+            }, children: children })),
+        ol: ({ children }) => (_jsx("ol", { style: {
+                margin: '4px 0 8px',
+                paddingLeft: 20,
+                fontSize: 14,
+                color: colors.text,
+            }, children: children })),
         li: ({ children }) => (_jsx("li", { style: { marginBottom: 2, lineHeight: 1.6 }, children: children })),
         code: ({ children, className }) => {
             const isBlock = className?.startsWith('language-');
             if (isBlock) {
-                return (_jsx("pre", { style: { background: colors.codeBg, padding: 10, borderRadius: 4, overflow: 'auto', margin: '4px 0 8px', fontSize: 12 }, children: _jsx("code", { style: { color: colors.text }, children: children }) }));
+                return (_jsx("pre", { style: {
+                        background: colors.codeBg,
+                        padding: 10,
+                        borderRadius: 4,
+                        overflow: 'auto',
+                        margin: '4px 0 8px',
+                        fontSize: 12,
+                    }, children: _jsx("code", { style: { color: colors.text }, children: children }) }));
             }
-            return (_jsx("code", { style: { background: colors.codeBg, padding: '1px 4px', borderRadius: 3, fontSize: 13, color: colors.text }, children: children }));
+            return (_jsx("code", { style: {
+                    background: colors.codeBg,
+                    padding: '1px 4px',
+                    borderRadius: 3,
+                    fontSize: 13,
+                    color: colors.text,
+                }, children: children }));
         },
         pre: ({ children }) => _jsx(_Fragment, { children: children }),
-        h1: ({ children }) => _jsx("h3", { style: { margin: '8px 0 4px', fontSize: 16, fontWeight: 600, color: colors.text }, children: children }),
-        h2: ({ children }) => _jsx("h4", { style: { margin: '8px 0 4px', fontSize: 15, fontWeight: 600, color: colors.text }, children: children }),
-        h3: ({ children }) => _jsx("h5", { style: { margin: '8px 0 4px', fontSize: 14, fontWeight: 600, color: colors.text }, children: children }),
+        h1: ({ children }) => (_jsx("h3", { style: {
+                margin: '8px 0 4px',
+                fontSize: 16,
+                fontWeight: 600,
+                color: colors.text,
+            }, children: children })),
+        h2: ({ children }) => (_jsx("h4", { style: {
+                margin: '8px 0 4px',
+                fontSize: 15,
+                fontWeight: 600,
+                color: colors.text,
+            }, children: children })),
+        h3: ({ children }) => (_jsx("h5", { style: {
+                margin: '8px 0 4px',
+                fontSize: 14,
+                fontWeight: 600,
+                color: colors.text,
+            }, children: children })),
         a: ({ href, children }) => (_jsx("a", { href: href, target: "_blank", rel: "noopener noreferrer", style: { color: colors.textMuted, textDecoration: 'underline' }, children: children })),
     }), [colors]);
     return _jsx(Markdown, { components: components, children: text });
@@ -225,11 +286,16 @@ const UserMessage = () => {
                         borderRadius: 12,
                         backgroundColor: colors.userBubble,
                     }, children: _jsx(MessagePrimitive.Content, { components: {
-                            Text: ({ text }) => (_jsx("span", { style: { fontSize: 14, whiteSpace: 'pre-wrap', color: colors.text }, children: text })),
+                            Text: ({ text }) => (_jsx("span", { style: {
+                                    fontSize: 14,
+                                    whiteSpace: 'pre-wrap',
+                                    color: colors.text,
+                                }, children: text })),
                         } }) })] }) }));
 };
 const AssistantMessage = () => {
     const colors = useContext(ColorsContext);
+    const toolComponents = useContext(ToolComponentsContext);
     return (_jsx("div", { style: {
             display: 'flex',
             justifyContent: 'flex-start',
@@ -239,8 +305,9 @@ const AssistantMessage = () => {
                         borderRadius: 12,
                         backgroundColor: colors.assistantBubble,
                     }, children: [_jsx(MessagePrimitive.Content, { components: {
-                                Text: ({ text }) => (_jsx(MarkdownText, { text: text, colors: colors })),
+                                Text: ({ text }) => _jsx(MarkdownText, { text: text, colors: colors }),
                                 tools: {
+                                    by_name: toolComponents,
                                     Fallback: (props) => (_jsx(ToolCallDisplay, { toolCallId: props.toolCallId, toolName: props.toolName, args: props.args, result: props.result, status: resolvePikkuToolStatus(props.status, props.result), addResult: props.addResult })),
                                 },
                             } }), _jsx(MessagePrimitive.If, { last: true, children: _jsx(ThreadPrimitive.If, { running: true, children: _jsx("div", { style: {
@@ -262,7 +329,9 @@ const PikkuComposer = ({ disabled, }) => {
                     alignItems: 'flex-end',
                     padding: '6px 12px',
                     gap: 8,
-                    ...(disabled ? { opacity: 0.5, pointerEvents: 'none' } : {}),
+                    ...(disabled
+                        ? { opacity: 0.5, pointerEvents: 'none' }
+                        : {}),
                 }, children: [_jsx(ComposerPrimitive.Input, { placeholder: disabled ? 'Respond to approval request above...' : 'Message...', rows: 2, disabled: disabled, style: {
                             flex: 1,
                             border: 'none',
@@ -290,43 +359,48 @@ const PikkuComposer = ({ disabled, }) => {
                         }, children: "\u25B6" })] }) }) }));
 };
 export function PikkuAgentChat(props) {
-    const { emptyMessage, hideToolCalls, dark, ...runtimeOptions } = props;
+    const { emptyMessage, hideToolCalls, dark, maxWidth = 768, toolComponents, ...runtimeOptions } = props;
     const { runtime, isAwaitingApproval, pendingApprovals, handleApproval } = usePikkuAgentRuntime(runtimeOptions);
     const colors = dark ? darkColors : lightColors;
-    return (_jsx(ColorsContext.Provider, { value: colors, children: _jsx(PikkuApprovalContext.Provider, { value: { pendingApprovals, handleApproval }, children: _jsx(HideToolCallsContext.Provider, { value: hideToolCalls, children: _jsx(AssistantRuntimeProvider, { runtime: runtime, children: _jsx("div", { style: {
-                            height: '100%',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            background: colors.bg,
-                        }, children: _jsxs(ThreadPrimitive.Root, { style: {
+    return (_jsx(ColorsContext.Provider, { value: colors, children: _jsx(PikkuApprovalContext.Provider, { value: { pendingApprovals, handleApproval }, children: _jsx(HideToolCallsContext.Provider, { value: hideToolCalls, children: _jsx(ToolComponentsContext.Provider, { value: toolComponents, children: _jsx(AssistantRuntimeProvider, { runtime: runtime, children: _jsx("div", { style: {
+                                height: '100%',
                                 display: 'flex',
                                 flexDirection: 'column',
-                                flex: 1,
-                                minHeight: 0,
-                            }, children: [_jsx(ThreadPrimitive.Viewport, { style: {
-                                        flex: 1,
-                                        minHeight: 0,
-                                        overflowY: 'auto',
-                                    }, children: _jsxs("div", { style: {
-                                            maxWidth: 768,
+                                background: colors.bg,
+                            }, children: _jsxs(ThreadPrimitive.Root, { style: {
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    flex: 1,
+                                    minHeight: 0,
+                                }, children: [_jsx(ThreadPrimitive.Viewport, { style: {
+                                            flex: 1,
+                                            minHeight: 0,
+                                            overflowY: 'auto',
+                                        }, children: _jsxs("div", { style: {
+                                                maxWidth: maxWidth === 'none' ? undefined : maxWidth,
+                                                margin: '0 auto',
+                                                padding: 16,
+                                                display: 'flex',
+                                                flexDirection: 'column',
+                                                gap: 16,
+                                            }, children: [_jsx(ThreadPrimitive.Empty, { children: _jsx("div", { style: {
+                                                            display: 'flex',
+                                                            alignItems: 'center',
+                                                            justifyContent: 'center',
+                                                            minHeight: 300,
+                                                            color: colors.textMuted,
+                                                            textAlign: 'center',
+                                                            fontSize: 14,
+                                                        }, children: emptyMessage ??
+                                                            (props.threadId
+                                                                ? 'Send a message to start the conversation.'
+                                                                : 'Start a new conversation.') }) }), _jsx(ThreadPrimitive.Messages, { components: {
+                                                        UserMessage,
+                                                        AssistantMessage,
+                                                    } })] }) }), _jsx("div", { style: {
+                                            maxWidth: maxWidth === 'none' ? undefined : maxWidth,
                                             margin: '0 auto',
-                                            padding: 16,
-                                            display: 'flex',
-                                            flexDirection: 'column',
-                                            gap: 16,
-                                        }, children: [_jsx(ThreadPrimitive.Empty, { children: _jsx("div", { style: {
-                                                        display: 'flex',
-                                                        alignItems: 'center',
-                                                        justifyContent: 'center',
-                                                        minHeight: 300,
-                                                        color: colors.textMuted,
-                                                        textAlign: 'center',
-                                                        fontSize: 14,
-                                                    }, children: emptyMessage ??
-                                                        (props.threadId
-                                                            ? 'Send a message to start the conversation.'
-                                                            : 'Start a new conversation.') }) }), _jsx(ThreadPrimitive.Messages, { components: {
-                                                    UserMessage,
-                                                    AssistantMessage,
-                                                } })] }) }), _jsx("div", { style: { maxWidth: 768, margin: '0 auto', width: '100%', padding: '0 16px' }, children: _jsx(PikkuComposer, { disabled: isAwaitingApproval }) })] }) }) }) }) }) }));
+                                            width: '100%',
+                                            padding: '0 16px',
+                                        }, children: _jsx(PikkuComposer, { disabled: isAwaitingApproval }) })] }) }) }) }) }) }) }));
 }

package/dist/esm/use-pikku-agent-runtime.d.ts

@@ -17,6 +17,10 @@ export interface PendingApproval {
     args: unknown;
     reason?: string;
     runId: string;
+    type?: 'approval-request' | 'credential-request';
+    credentialName?: string;
+    credentialType?: 'oauth2' | 'apikey';
+    connectUrl?: string;
 }
 export interface PikkuApprovalContextValue {
     pendingApprovals: PendingApproval[];
@@ -25,9 +29,18 @@ export interface PikkuApprovalContextValue {
 export declare const PikkuApprovalContext: import("react").Context<PikkuApprovalContextValue>;
 export declare const usePikkuApproval: () => PikkuApprovalContextValue;
 export declare function isDeniedResult(result: unknown): boolean;
-export type PikkuToolStatusType = 'running' | 'requires-action' | 'completed' | 'denied' | 'error';
+export type PikkuToolStatusType = 'running' | 'requires-action' | 'completed' | 'denied' | 'error' | 'missing-credential';
+export type MissingCredentialPayload = {
+    error: 'missing_credential';
+    credentialName: string;
+    credentialType: 'oauth2' | 'apikey';
+    connectUrl?: string;
+};
 export type PikkuToolStatus = {
-    type: PikkuToolStatusType;
+    type: Exclude<PikkuToolStatusType, 'missing-credential'>;
+} | {
+    type: 'missing-credential';
+    payload: MissingCredentialPayload;
 };
 export declare function resolvePikkuToolStatus(status: {
     type: string;

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

@@ -84,6 +84,19 @@ async function processStream(reader, text, toolCalls, yieldContent, onFinish) {
                     args: event.args,
                     reason: event.reason,
                     runId: event.runId,
+                    type: 'approval-request',
+                });
+                break;
+            case 'credential-request':
+                pendingApprovals.push({
+                    toolCallId: event.toolCallId,
+                    toolName: event.toolName,
+                    args: event.args,
+                    runId: event.runId,
+                    type: 'credential-request',
+                    credentialName: event.credentialName,
+                    credentialType: event.credentialType,
+                    connectUrl: event.connectUrl,
                 });
                 break;
             case 'error':
@@ -108,6 +121,22 @@ export function isDeniedResult(result) {
         return false;
     }
 }
+function isMissingCredentialResult(result) {
+    if (typeof result === 'object' &&
+        result &&
+        result.error === 'missing_credential') {
+        return result;
+    }
+    if (typeof result === 'string') {
+        try {
+            const parsed = JSON.parse(result);
+            if (parsed?.error === 'missing_credential')
+                return parsed;
+        }
+        catch { }
+    }
+    return null;
+}
 export function resolvePikkuToolStatus(status, result) {
     if (status.type === 'running')
         return { type: 'running' };
@@ -115,6 +144,9 @@ export function resolvePikkuToolStatus(status, result) {
         return { type: 'requires-action' };
     if (isDeniedResult(result))
         return { type: 'denied' };
+    const missingCred = isMissingCredentialResult(result);
+    if (missingCred)
+        return { type: 'missing-credential', payload: missingCred };
     if (typeof result === 'string' && result.startsWith('Error:'))
         return { type: 'error' };
     return { type: 'completed' };
@@ -263,8 +295,11 @@ function createPikkuStreamingAdapter(optionsRef, pendingApprovalsRef, approvalDe
             catch (e) {
                 const msg = e?.message || 'Unknown error';
                 let errorText = 'Failed to connect to the agent.';
-                if (msg.includes('Failed to fetch') || msg.includes('NetworkError') || msg.includes('CORS')) {
-                    errorText = 'Unable to reach the agent server. The deployment may be down or the URL may be incorrect.';
+                if (msg.includes('Failed to fetch') ||
+                    msg.includes('NetworkError') ||
+                    msg.includes('CORS')) {
+                    errorText =
+                        'Unable to reach the agent server. The deployment may be down or the URL may be incorrect.';
                 }
                 else if (msg.includes('abort')) {
                     return;
@@ -278,10 +313,12 @@ function createPikkuStreamingAdapter(optionsRef, pendingApprovalsRef, approvalDe
                     errorText = 'Authentication error.';
                 }
                 else if (response.status === 404) {
-                    errorText = 'Agent not found — the agent may not be configured for this project.';
+                    errorText =
+                        'Agent not found — the agent may not be configured for this project.';
                 }
                 else if (response.status === 502 || response.status === 503) {
-                    errorText = 'The agent server is currently unavailable. Try again in a moment.';
+                    errorText =
+                        'The agent server is currently unavailable. Try again in a moment.';
                 }
                 else if (response.status === 429) {
                     errorText = 'Rate limited — too many requests. Please wait a moment.';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pikku/assistant-ui",
-  "version": "0.12.2",
+  "version": "0.12.4",
   "author": "yasser.fadl@gmail.com",
   "license": "MIT",
   "type": "module",

package/src/index.ts

@@ -13,6 +13,7 @@ export type {
   PikkuApprovalContextValue,
   PikkuToolStatusType,
   PikkuToolStatus,
+  MissingCredentialPayload,
 } from './use-pikku-agent-runtime.js'
 export { PikkuAgentChat } from './pikku-agent-chat.js'
 export type { PikkuAgentChatProps } from './pikku-agent-chat.js'

package/src/pikku-agent-chat.tsx

@@ -5,6 +5,7 @@ import {
   ThreadPrimitive,
   MessagePrimitive,
   ComposerPrimitive,
+  type ToolCallMessagePartComponent,
 } from '@assistant-ui/react'
 import {
   usePikkuAgentRuntime,
@@ -23,6 +24,19 @@ export interface PikkuAgentChatProps extends PikkuAgentRuntimeOptions {
    */
   hideToolCalls?: boolean | string[]
   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>
 }
 
 interface ChatColors {
@@ -42,6 +56,8 @@ interface ChatColors {
   successColor: string
   errorBg: string
   errorColor: string
+  warningBg: string
+  warningColor: string
 }
 
 const lightColors: ChatColors = {
@@ -61,6 +77,8 @@ const lightColors: ChatColors = {
   successColor: '#2e7d32',
   errorBg: '#ffebee',
   errorColor: '#c62828',
+  warningBg: '#fff3e0',
+  warningColor: '#e65100',
 }
 
 const darkColors: ChatColors = {
@@ -80,10 +98,15 @@ const darkColors: ChatColors = {
   successColor: '#00e68a',
   errorBg: 'rgba(220, 38, 38, 0.1)',
   errorColor: '#f87171',
+  warningBg: 'rgba(245, 158, 11, 0.1)',
+  warningColor: '#fbbf24',
 }
 
 const ColorsContext = createContext<ChatColors>(lightColors)
 const HideToolCallsContext = createContext<boolean | string[] | undefined>(undefined)
+const ToolComponentsContext = createContext<
+  Record<string, ToolCallMessagePartComponent> | undefined
+>(undefined)
 
 function shouldHideToolCall(
   hideToolCalls: boolean | string[] | undefined,
@@ -284,6 +307,19 @@ const ToolCallDisplay: FunctionComponent<{
             error
           </span>
         )}
+        {status.type === 'missing-credential' && (
+          <span
+            style={{
+              fontSize: 11,
+              padding: '1px 5px',
+              borderRadius: 3,
+              background: colors.warningBg,
+              color: colors.warningColor,
+            }}
+          >
+            credential required
+          </span>
+        )}
         {status.type === 'denied' && (
           <span
             style={{
@@ -449,6 +485,7 @@ const UserMessage: FunctionComponent = () => {
 
 const AssistantMessage: FunctionComponent = () => {
   const colors = useContext(ColorsContext)
+  const toolComponents = useContext(ToolComponentsContext)
   return (
     <div
       style={{
@@ -474,6 +511,7 @@ const AssistantMessage: FunctionComponent = () => {
                 <MarkdownText text={text} colors={colors} />
               ),
               tools: {
+                by_name: toolComponents,
                 Fallback: (props) => (
                   <ToolCallDisplay
                     toolCallId={props.toolCallId}
@@ -571,7 +609,7 @@ const PikkuComposer: FunctionComponent<{ disabled?: boolean }> = ({
 }
 
 export function PikkuAgentChat(props: PikkuAgentChatProps) {
-  const { emptyMessage, hideToolCalls, dark, ...runtimeOptions } = props
+  const { emptyMessage, hideToolCalls, dark, maxWidth = 768, toolComponents, ...runtimeOptions } = props
   const { runtime, isAwaitingApproval, pendingApprovals, handleApproval } =
     usePikkuAgentRuntime(runtimeOptions)
 
@@ -581,6 +619,7 @@ export function PikkuAgentChat(props: PikkuAgentChatProps) {
     <ColorsContext.Provider value={colors}>
     <PikkuApprovalContext.Provider value={{ pendingApprovals, handleApproval }}>
     <HideToolCallsContext.Provider value={hideToolCalls}>
+    <ToolComponentsContext.Provider value={toolComponents}>
     <AssistantRuntimeProvider runtime={runtime}>
       <div
         style={{
@@ -607,7 +646,7 @@ export function PikkuAgentChat(props: PikkuAgentChatProps) {
           >
             <div
               style={{
-                maxWidth: 768,
+                maxWidth: maxWidth === 'none' ? undefined : maxWidth,
                 margin: '0 auto',
                 padding: 16,
                 display: 'flex',
@@ -641,12 +680,13 @@ export function PikkuAgentChat(props: PikkuAgentChatProps) {
               />
             </div>
           </ThreadPrimitive.Viewport>
-          <div style={{ maxWidth: 768, margin: '0 auto', width: '100%', padding: '0 16px' }}>
+          <div style={{ maxWidth: maxWidth === 'none' ? undefined : maxWidth, margin: '0 auto', width: '100%', padding: '0 16px' }}>
             <PikkuComposer disabled={isAwaitingApproval} />
           </div>
         </ThreadPrimitive.Root>
       </div>
     </AssistantRuntimeProvider>
+    </ToolComponentsContext.Provider>
     </HideToolCallsContext.Provider>
     </PikkuApprovalContext.Provider>
     </ColorsContext.Provider>

package/src/use-pikku-agent-runtime.ts

@@ -31,6 +31,10 @@ export interface PendingApproval {
   args: unknown
   reason?: string
   runId: string
+  type?: 'approval-request' | 'credential-request'
+  credentialName?: string
+  credentialType?: 'oauth2' | 'apikey'
+  connectUrl?: string
 }
 
 export interface PikkuApprovalContextValue {
@@ -143,6 +147,19 @@ async function processStream(
           args: event.args,
           reason: event.reason,
           runId: event.runId,
+          type: 'approval-request',
+        })
+        break
+      case 'credential-request':
+        pendingApprovals.push({
+          toolCallId: event.toolCallId,
+          toolName: event.toolName,
+          args: event.args,
+          runId: event.runId,
+          type: 'credential-request',
+          credentialName: event.credentialName,
+          credentialType: event.credentialType,
+          connectUrl: event.connectUrl,
         })
         break
       case 'error':
@@ -174,8 +191,37 @@ export type PikkuToolStatusType =
   | 'completed'
   | 'denied'
   | 'error'
+  | 'missing-credential'
 
-export type PikkuToolStatus = { type: PikkuToolStatusType }
+export type MissingCredentialPayload = {
+  error: 'missing_credential'
+  credentialName: string
+  credentialType: 'oauth2' | 'apikey'
+  connectUrl?: string
+}
+
+export type PikkuToolStatus =
+  | { type: Exclude<PikkuToolStatusType, 'missing-credential'> }
+  | { type: 'missing-credential'; payload: MissingCredentialPayload }
+
+function isMissingCredentialResult(
+  result: unknown
+): MissingCredentialPayload | null {
+  if (
+    typeof result === 'object' &&
+    result &&
+    (result as any).error === 'missing_credential'
+  ) {
+    return result as MissingCredentialPayload
+  }
+  if (typeof result === 'string') {
+    try {
+      const parsed = JSON.parse(result)
+      if (parsed?.error === 'missing_credential') return parsed
+    } catch {}
+  }
+  return null
+}
 
 export function resolvePikkuToolStatus(
   status: { type: string },
@@ -184,6 +230,8 @@ export function resolvePikkuToolStatus(
   if (status.type === 'running') return { type: 'running' }
   if (status.type === 'requires-action') return { type: 'requires-action' }
   if (isDeniedResult(result)) return { type: 'denied' }
+  const missingCred = isMissingCredentialResult(result)
+  if (missingCred) return { type: 'missing-credential', payload: missingCred }
   if (typeof result === 'string' && result.startsWith('Error:'))
     return { type: 'error' }
   return { type: 'completed' }
@@ -370,8 +418,13 @@ function createPikkuStreamingAdapter(
       } catch (e: any) {
         const msg = e?.message || 'Unknown error'
         let errorText = 'Failed to connect to the agent.'
-        if (msg.includes('Failed to fetch') || msg.includes('NetworkError') || msg.includes('CORS')) {
-          errorText = 'Unable to reach the agent server. The deployment may be down or the URL may be incorrect.'
+        if (
+          msg.includes('Failed to fetch') ||
+          msg.includes('NetworkError') ||
+          msg.includes('CORS')
+        ) {
+          errorText =
+            'Unable to reach the agent server. The deployment may be down or the URL may be incorrect.'
         } else if (msg.includes('abort')) {
           return
         }
@@ -384,9 +437,11 @@ function createPikkuStreamingAdapter(
         if (response.status === 401 || response.status === 403) {
           errorText = 'Authentication error.'
         } else if (response.status === 404) {
-          errorText = 'Agent not found — the agent may not be configured for this project.'
+          errorText =
+            'Agent not found — the agent may not be configured for this project.'
         } else if (response.status === 502 || response.status === 503) {
-          errorText = 'The agent server is currently unavailable. Try again in a moment.'
+          errorText =
+            'The agent server is currently unavailable. Try again in a moment.'
         } else if (response.status === 429) {
           errorText = 'Rate limited — too many requests. Please wait a moment.'
         }