@pikku/assistant-ui 0.12.4 → 0.12.6

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @pikku/assistant-ui
 
+## 0.12.6
+
+### Patch Changes
+
+- f4f7046: feat(assistant-ui): export useFileAttachment hook, modelSupportsVision, PendingFile, UploadAttachmentFn, and INLINE_SIZE_LIMIT
+
+## 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
@@ -33,7 +45,6 @@
 ### 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/index.d.ts

@@ -2,3 +2,6 @@ export { usePikkuAgentRuntime, usePikkuAgentNonStreamingRuntime, PikkuApprovalCo
 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';
+export { useFileAttachment, INLINE_SIZE_LIMIT } from './use-file-attachment.js';
+export type { PendingFile, UploadAttachmentFn } from './use-file-attachment.js';
+export { modelSupportsVision } from './model-capabilities.js';

package/dist/cjs/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PikkuAgentChat = exports.resolvePikkuToolStatus = exports.isDeniedResult = exports.convertDbMessages = exports.usePikkuApproval = exports.PikkuApprovalContext = exports.usePikkuAgentNonStreamingRuntime = exports.usePikkuAgentRuntime = void 0;
+exports.modelSupportsVision = exports.INLINE_SIZE_LIMIT = exports.useFileAttachment = exports.PikkuAgentChat = exports.resolvePikkuToolStatus = exports.isDeniedResult = exports.convertDbMessages = exports.usePikkuApproval = exports.PikkuApprovalContext = exports.usePikkuAgentNonStreamingRuntime = exports.usePikkuAgentRuntime = void 0;
 var use_pikku_agent_runtime_js_1 = require("./use-pikku-agent-runtime.js");
 Object.defineProperty(exports, "usePikkuAgentRuntime", { enumerable: true, get: function () { return use_pikku_agent_runtime_js_1.usePikkuAgentRuntime; } });
 Object.defineProperty(exports, "usePikkuAgentNonStreamingRuntime", { enumerable: true, get: function () { return use_pikku_agent_runtime_js_1.usePikkuAgentNonStreamingRuntime; } });
@@ -11,3 +11,8 @@ Object.defineProperty(exports, "isDeniedResult", { enumerable: true, get: functi
 Object.defineProperty(exports, "resolvePikkuToolStatus", { enumerable: true, get: function () { return use_pikku_agent_runtime_js_1.resolvePikkuToolStatus; } });
 var pikku_agent_chat_js_1 = require("./pikku-agent-chat.js");
 Object.defineProperty(exports, "PikkuAgentChat", { enumerable: true, get: function () { return pikku_agent_chat_js_1.PikkuAgentChat; } });
+var use_file_attachment_js_1 = require("./use-file-attachment.js");
+Object.defineProperty(exports, "useFileAttachment", { enumerable: true, get: function () { return use_file_attachment_js_1.useFileAttachment; } });
+Object.defineProperty(exports, "INLINE_SIZE_LIMIT", { enumerable: true, get: function () { return use_file_attachment_js_1.INLINE_SIZE_LIMIT; } });
+var model_capabilities_js_1 = require("./model-capabilities.js");
+Object.defineProperty(exports, "modelSupportsVision", { enumerable: true, get: function () { return model_capabilities_js_1.modelSupportsVision; } });

package/dist/cjs/model-capabilities.d.ts

@@ -0,0 +1 @@
+export declare function modelSupportsVision(modelID: string): boolean;

package/dist/cjs/model-capabilities.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.modelSupportsVision = modelSupportsVision;
+const MODEL_VISION_SUPPORT = new Set([
+    'claude-sonnet-4-5',
+    'claude-opus-4-1',
+    'gpt-4o-mini',
+    'gpt-5',
+    'gpt-5-mini',
+    'gpt-5-codex',
+    'gemini-2.5-pro',
+    'gemini-2.5-flash',
+]);
+function modelSupportsVision(modelID) {
+    return MODEL_VISION_SUPPORT.has(modelID);
+}

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

@@ -1,6 +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
@@ -21,5 +23,7 @@ export interface PikkuAgentChatProps extends PikkuAgentRuntimeOptions {
      * (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

@@ -60,6 +60,8 @@ 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;
@@ -310,6 +312,8 @@ const UserMessage = () => {
 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',
@@ -318,13 +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,
@@ -333,78 +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
+    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: 2, disabled: disabled, style: {
-                            flex: 1,
+                    : {})), 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, toolComponents } = props, runtimeOptions = __rest(props, ["emptyMessage", "hideToolCalls", "dark", "maxWidth", "toolComponents"]);
+    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)(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',
-                                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',
+                                            background: colors.bg,
+                                        }, children: (0, jsx_runtime_1.jsxs)(react_2.ThreadPrimitive.Root, { style: {
                                                 display: 'flex',
                                                 flexDirection: 'column',
-                                                gap: 16,
-                                            }, children: [(0, jsx_runtime_1.jsx)(react_2.ThreadPrimitive.Empty, { children: (0, jsx_runtime_1.jsx)("div", { style: {
+                                                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',
-                                                            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 }) })] }) }) }) }) }) }) }));
+                                                            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-file-attachment.d.ts

@@ -0,0 +1,26 @@
+export type PendingFile = {
+    id: string;
+    name: string;
+    mimeType: string;
+    previewUrl: string;
+    contentUrl: string;
+    isImage: boolean;
+};
+export type UploadAttachmentFn = (args: {
+    contentType: string;
+    sizeBytes: number;
+}) => Promise<{
+    uploadUrl: string;
+    signedReadUrl: string;
+    uploadMethod?: string;
+}>;
+export declare const INLINE_SIZE_LIMIT: number;
+export declare function useFileAttachment(upload: UploadAttachmentFn): {
+    pendingFiles: PendingFile[];
+    uploading: boolean;
+    uploadError: string | null;
+    fileInputRef: import("react").RefObject<HTMLInputElement | null>;
+    handleFileChange: (e: React.ChangeEvent<HTMLInputElement>) => Promise<void>;
+    removeFile: (id: string) => void;
+    clearFiles: () => void;
+};

package/dist/cjs/use-file-attachment.js

@@ -0,0 +1,99 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.INLINE_SIZE_LIMIT = void 0;
+exports.useFileAttachment = useFileAttachment;
+const react_1 = require("react");
+exports.INLINE_SIZE_LIMIT = 1 * 1024 * 1024;
+function useFileAttachment(upload) {
+    const [pendingFiles, setPendingFiles] = (0, react_1.useState)([]);
+    const [uploading, setUploading] = (0, react_1.useState)(false);
+    const [uploadError, setUploadError] = (0, react_1.useState)(null);
+    const fileInputRef = (0, react_1.useRef)(null);
+    const handleFileChange = (0, react_1.useCallback)((e) => __awaiter(this, void 0, void 0, function* () {
+        var _a;
+        const files = Array.from((_a = e.target.files) !== null && _a !== void 0 ? _a : []);
+        e.target.value = '';
+        if (!files.length)
+            return;
+        setUploading(true);
+        setUploadError(null);
+        try {
+            for (const file of files) {
+                const previewUrl = URL.createObjectURL(file);
+                let contentUrl;
+                if (file.type.startsWith('image/') &&
+                    file.size <= exports.INLINE_SIZE_LIMIT) {
+                    contentUrl = yield new Promise((resolve, reject) => {
+                        const reader = new FileReader();
+                        reader.onload = (ev) => resolve(ev.target.result);
+                        reader.onerror = reject;
+                        reader.readAsDataURL(file);
+                    });
+                }
+                else {
+                    const { uploadUrl, signedReadUrl, uploadMethod } = yield upload({
+                        contentType: file.type,
+                        sizeBytes: file.size,
+                    });
+                    const resp = yield fetch(uploadUrl, {
+                        method: uploadMethod !== null && uploadMethod !== void 0 ? uploadMethod : 'PUT',
+                        body: file,
+                        headers: { 'Content-Type': file.type },
+                    });
+                    if (!resp.ok)
+                        throw new Error(`Upload failed (${resp.status})`);
+                    contentUrl = signedReadUrl;
+                }
+                setPendingFiles((prev) => [
+                    ...prev,
+                    {
+                        id: `file_${Date.now().toString(36)}`,
+                        name: file.name,
+                        mimeType: file.type,
+                        previewUrl,
+                        contentUrl,
+                        isImage: file.type.startsWith('image/'),
+                    },
+                ]);
+            }
+        }
+        catch (err) {
+            setUploadError(err instanceof Error ? err.message : 'Upload failed');
+        }
+        finally {
+            setUploading(false);
+        }
+    }), [upload]);
+    const removeFile = (0, react_1.useCallback)((id) => {
+        setPendingFiles((prev) => {
+            const f = prev.find((x) => x.id === id);
+            if (f)
+                URL.revokeObjectURL(f.previewUrl);
+            return prev.filter((x) => x.id !== id);
+        });
+    }, []);
+    const clearFiles = (0, react_1.useCallback)(() => {
+        setPendingFiles((prev) => {
+            prev.forEach((f) => URL.revokeObjectURL(f.previewUrl));
+            return [];
+        });
+    }, []);
+    return {
+        pendingFiles,
+        uploading,
+        uploadError,
+        fileInputRef,
+        handleFileChange,
+        removeFile,
+        clearFiles,
+    };
+}

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

@@ -10,6 +10,10 @@ export interface PikkuAgentRuntimeOptions {
     headers?: Record<string, string>;
     model?: string;
     temperature?: number;
+    /** Structured context injected into the agent's system instructions.
+     *  Provide upfront state (e.g. current org/project/branch/deployment IDs)
+     *  so the agent can call tools without asking the user. */
+    context?: string;
 }
 export interface PendingApproval {
     toolCallId: string;