@agent-platform/ui 0.0.2 → 0.0.4

package/dist/components/agent/agent-input.js

@@ -4,6 +4,7 @@ import { Paperclip, PaperPlaneTilt } from '@phosphor-icons/react/dist/ssr';
 import { useCallback, useRef, useState } from 'react';
 import { cn } from '../../lib/utils';
 import { Button } from '../ui/button';
+import { Textarea } from '../ui/textarea';
 function AgentInput({ value: controlledValue, onChange, onSend, onAttach, placeholder = 'AIに相談してみましょう', disabled = false, isLoading = false, className, }) {
     const [uncontrolledValue, setUncontrolledValue] = useState('');
     const textareaRef = useRef(null);
@@ -45,6 +46,6 @@ function AgentInput({ value: controlledValue, onChange, onSend, onAttach, placeh
         }
     }, [handleSend]);
     const canSend = value.trim().length > 0 && !disabled && !isLoading;
-    return (_jsx("div", { "data-slot": "agent-input", className: cn('w-full border-t border-border bg-muted px-3 pb-3 pt-2', className), children: _jsxs("div", { className: "flex items-end gap-2 rounded-lg border border-border bg-background px-2.5 py-1.5 transition-colors focus-within:border-primary/40", children: [_jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", onClick: onAttach, disabled: disabled, "aria-label": "\u30D5\u30A1\u30A4\u30EB\u3092\u6DFB\u4ED8", className: "mb-0.5 text-muted-foreground hover:text-foreground", children: _jsx(Paperclip, { className: "size-5" }) }), _jsx("textarea", { ref: textareaRef, value: value, onChange: handleChange, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: disabled, rows: 1, className: "flex-1 resize-none bg-transparent text-sm leading-5 text-foreground placeholder:text-placeholder focus:outline-none disabled:cursor-not-allowed disabled:opacity-50", style: { maxHeight: '160px' } }), _jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", onClick: handleSend, disabled: !canSend, "aria-label": "\u9001\u4FE1 (\u2318+Enter)", className: "mb-0.5 text-muted-foreground hover:text-foreground disabled:opacity-30", children: _jsx(PaperPlaneTilt, { className: "size-5", weight: "fill" }) })] }) }));
+    return (_jsx("div", { "data-slot": "agent-input", className: cn('w-full border-t border-border bg-muted px-3 pb-3 pt-2', className), children: _jsxs("div", { className: "flex items-end gap-1 p-2 rounded-lg border border-border bg-background transition-colors", children: [_jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", onClick: onAttach, disabled: disabled, "aria-label": "\u30D5\u30A1\u30A4\u30EB\u3092\u6DFB\u4ED8", className: "mb-0.5 text-muted-foreground hover:text-foreground", children: _jsx(Paperclip, { className: "size-4", weight: "bold" }) }), _jsx(Textarea, { ref: textareaRef, value: value, onChange: handleChange, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: disabled, rows: 1, className: "border-none p-1 resize-none min-h-8 focus-visible:ring-0 focus-visible:border-0 bg-transparent" }), _jsx(Button, { type: "button", size: "icon-sm", onClick: handleSend, disabled: !canSend, "aria-label": "\u9001\u4FE1 (\u2318+Enter)", children: _jsx(PaperPlaneTilt, { className: "size-5", weight: "fill" }) })] }) }));
 }
 export { AgentInput };

package/dist/components/agent/agent-popup-widget.d.ts

@@ -12,4 +12,4 @@ export interface AgentPopupWidgetProps extends AgentProviderConfig {
     offsetRight?: number | string;
     zIndex?: number;
 }
-export declare function AgentPopupWidget({ agentId, executeClientTool, onError, authToken, getAuthToken, containerProps, defaultOpen, launcherLabel, launcherAriaLabel, closeLabel, className, launcherClassName, offsetBottom, offsetRight, zIndex, }: AgentPopupWidgetProps): import("react/jsx-runtime").JSX.Element;
+export declare function AgentPopupWidget({ agentId, executeClientTool, onError, authToken, getAuthToken, getAgentHeaders, disableToolApiAuthHeader, containerProps, defaultOpen, launcherLabel, launcherAriaLabel, closeLabel, className, launcherClassName, offsetBottom, offsetRight, zIndex, }: AgentPopupWidgetProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/agent/agent-popup-widget.js

@@ -1,8 +1,8 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from 'react';
-import { Button } from '../ui/button';
 import { cn } from '../../lib/utils';
+import { Button } from '../ui/button';
 import { AgentContainer } from './agent-container';
 import { AgentProvider } from './provider';
 const DEFAULT_OFFSET = '1.5rem';
@@ -14,7 +14,7 @@ function toCssSize(value, fallback) {
         return value;
     return fallback;
 }
-export function AgentPopupWidget({ agentId, executeClientTool, onError, authToken, getAuthToken, containerProps, defaultOpen = false, launcherLabel = 'AIアシスタント', launcherAriaLabel = 'AIアシスタントを開く', closeLabel = '閉じる', className, launcherClassName, offsetBottom, offsetRight, zIndex = DEFAULT_Z_INDEX, }) {
+export function AgentPopupWidget({ agentId, executeClientTool, onError, authToken, getAuthToken, getAgentHeaders, disableToolApiAuthHeader, containerProps, defaultOpen = false, launcherLabel = 'AIアシスタント', launcherAriaLabel = 'AIアシスタントを開く', closeLabel = '閉じる', className, launcherClassName, offsetBottom, offsetRight, zIndex = DEFAULT_Z_INDEX, }) {
     const [isOpen, setIsOpen] = useState(defaultOpen);
     const overlayStyle = useMemo(() => ({
         '--agent-popup-right': toCssSize(offsetRight, DEFAULT_OFFSET),
@@ -41,7 +41,7 @@ export function AgentPopupWidget({ agentId, executeClientTool, onError, authToke
             document.body.style.overflow = originalOverflow;
         };
     }, [isOpen]);
-    return (_jsx(AgentProvider, { agentId: agentId, executeClientTool: executeClientTool, onError: onError, authToken: authToken, getAuthToken: getAuthToken, children: _jsxs("div", { "data-slot": "agent-popup-widget", style: overlayStyle, children: [!isOpen && (_jsx(Button, { type: "button", "aria-label": launcherAriaLabel, onClick: () => setIsOpen(true), className: cn('fixed right-[var(--agent-popup-right)] bottom-[var(--agent-popup-bottom)] z-[var(--agent-popup-z-index)] h-12 rounded-full px-5 shadow-lg', launcherClassName), children: launcherLabel })), isOpen && (_jsx("div", { className: "fixed inset-0 z-[var(--agent-popup-z-index)] bg-black/45 animate-in fade-in duration-200", onClick: () => setIsOpen(false), onKeyDown: (event) => {
+    return (_jsx(AgentProvider, { agentId: agentId, executeClientTool: executeClientTool, onError: onError, authToken: authToken, getAuthToken: getAuthToken, getAgentHeaders: getAgentHeaders, disableToolApiAuthHeader: disableToolApiAuthHeader, children: _jsxs("div", { "data-slot": "agent-popup-widget", style: overlayStyle, children: [!isOpen && (_jsx(Button, { type: "button", "aria-label": launcherAriaLabel, onClick: () => setIsOpen(true), className: cn('fixed right-[var(--agent-popup-right)] bottom-[var(--agent-popup-bottom)] z-[var(--agent-popup-z-index)] h-12 rounded-full px-5 shadow-lg', launcherClassName), children: launcherLabel })), isOpen && (_jsx("div", { className: "fixed inset-0 z-[var(--agent-popup-z-index)] bg-black/45 animate-in fade-in duration-200", onClick: () => setIsOpen(false), onKeyDown: (event) => {
                         if (event.key === 'Escape') {
                             setIsOpen(false);
                         }

package/dist/components/agent/agent-screen.d.ts

@@ -2,4 +2,4 @@ import type { AgentProviderConfig } from './provider';
 import type { AgentContainerProps } from './types';
 export interface AgentScreenProps extends AgentProviderConfig, AgentContainerProps {
 }
-export declare function AgentScreen({ agentId, executeClientTool, onError, authToken, getAuthToken, ...containerProps }: AgentScreenProps): import("react/jsx-runtime").JSX.Element;
+export declare function AgentScreen({ agentId, executeClientTool, onError, authToken, getAuthToken, getAgentHeaders, disableToolApiAuthHeader, ...containerProps }: AgentScreenProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/agent/agent-screen.js

@@ -2,6 +2,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { AgentContainer } from './agent-container';
 import { AgentProvider } from './provider';
-export function AgentScreen({ agentId, executeClientTool, onError, authToken, getAuthToken, ...containerProps }) {
-    return (_jsx(AgentProvider, { agentId: agentId, executeClientTool: executeClientTool, onError: onError, authToken: authToken, getAuthToken: getAuthToken, children: _jsx(AgentContainer, { ...containerProps }) }));
+export function AgentScreen({ agentId, executeClientTool, onError, authToken, getAuthToken, getAgentHeaders, disableToolApiAuthHeader, ...containerProps }) {
+    return (_jsx(AgentProvider, { agentId: agentId, executeClientTool: executeClientTool, onError: onError, authToken: authToken, getAuthToken: getAuthToken, getAgentHeaders: getAgentHeaders, disableToolApiAuthHeader: disableToolApiAuthHeader, children: _jsx(AgentContainer, { ...containerProps }) }));
 }

package/dist/components/agent/index.d.ts

@@ -1,5 +1,5 @@
-export { AgentScreen } from './agent-screen';
-export type { AgentScreenProps } from './agent-screen';
-export { AgentPopupWidget } from './agent-popup-widget';
 export type { AgentPopupWidgetProps } from './agent-popup-widget';
+export { AgentPopupWidget } from './agent-popup-widget';
+export type { AgentScreenProps } from './agent-screen';
+export { AgentScreen } from './agent-screen';
 export type { AgentHomeCardProps } from './types';

package/dist/components/agent/index.js

@@ -1,2 +1,2 @@
-export { AgentScreen } from './agent-screen';
 export { AgentPopupWidget } from './agent-popup-widget';
+export { AgentScreen } from './agent-screen';

package/dist/components/agent/message/markdown.js

@@ -43,21 +43,21 @@ const components = {
         if (className) {
             return _jsx("code", { className: cn('text-xs', className), children: children });
         }
-        return (_jsx("code", { className: "bg-background/50 px-1 py-0.5 rounded text-xs", children: children }));
+        return _jsx("code", { className: "bg-background/50 px-1 py-0.5 rounded text-xs", children: children });
     },
     a: ({ href, children }) => (_jsx("a", { href: href, target: "_blank", rel: "noopener noreferrer", className: "text-primary underline hover:text-primary/80", children: children })),
-    ul: ({ children }) => (_jsx("ul", { className: "list-disc list-inside pl-1 my-1.5 space-y-0.5", children: children })),
-    ol: ({ children }) => (_jsx("ol", { className: "list-decimal list-inside pl-1 my-1.5 space-y-0.5", children: children })),
+    ul: ({ children }) => _jsx("ul", { className: "list-disc list-inside pl-3 my-1", children: children }),
+    ol: ({ children }) => _jsx("ol", { className: "list-decimal list-inside pl-3 my-1", children: children }),
     li: ({ children }) => _jsx("li", { className: "leading-relaxed", children: children }),
-    p: ({ children }) => _jsx("p", { className: "my-1.5 first:mt-0 last:mb-0", children: children }),
-    h1: ({ children }) => (_jsx("h1", { className: "text-base font-bold mt-3 mb-1.5 first:mt-0", children: children })),
-    h2: ({ children }) => (_jsx("h2", { className: "text-sm font-bold mt-2.5 mb-1 first:mt-0", children: children })),
-    h3: ({ children }) => (_jsx("h3", { className: "text-sm font-semibold mt-2 mb-1 first:mt-0", children: children })),
+    p: ({ children }) => _jsx("p", { className: "first:mt-0 last:mb-0", children: children }),
+    h1: ({ children }) => _jsx("h1", { className: "text-base font-bold mt-3 mb-1 first:mt-0", children: children }),
+    h2: ({ children }) => _jsx("h2", { className: "text-sm font-bold mt-2.5 mb-1 first:mt-0", children: children }),
+    h3: ({ children }) => _jsx("h3", { className: "text-sm font-semibold mt-2 mb-1 first:mt-0", children: children }),
     blockquote: ({ children }) => (_jsx("blockquote", { className: "border-l-2 border-border pl-3 my-1.5 text-muted-foreground italic", children: children })),
     table: ({ children }) => (_jsx("div", { className: "overflow-x-auto my-1.5", children: _jsx("table", { className: "min-w-full border-collapse border border-border text-xs", children: children }) })),
-    thead: ({ children }) => (_jsx("thead", { className: "bg-muted/50", children: children })),
+    thead: ({ children }) => _jsx("thead", { className: "bg-muted/50", children: children }),
     th: ({ children }) => (_jsx("th", { className: "border border-border px-2 py-1.5 text-left font-semibold", children: children })),
-    td: ({ children }) => (_jsx("td", { className: "border border-border px-2 py-1.5", children: children })),
+    td: ({ children }) => _jsx("td", { className: "border border-border px-2 py-1.5", children: children }),
     hr: () => _jsx("hr", { className: "my-3 border-border" }),
 };
 export function Markdown({ content, className }) {

package/dist/components/agent/message/message-item.d.ts

@@ -4,4 +4,4 @@ export interface MessageItemProps {
     pendingToolCalls: ToolCallState[];
     toolNameLabels?: Record<string, string>;
 }
-export declare function MessageItem({ message, pendingToolCalls, toolNameLabels, }: MessageItemProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function MessageItem({ message, pendingToolCalls, toolNameLabels }: MessageItemProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/agent/message/message-item.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from '../../../lib/utils';
 import { Markdown } from './markdown';
 import { ToolCallCard } from './tool-call-card';
-export function MessageItem({ message, pendingToolCalls, toolNameLabels, }) {
+export function MessageItem({ message, pendingToolCalls, toolNameLabels }) {
     const isUser = message.role === 'user';
     // メッセージからテキストを抽出
     const textContent = message.content

package/dist/components/agent/message/message-list.js

@@ -8,7 +8,7 @@ export function MessageList({ messages, pendingToolCalls, toolNameLabels, isLoad
     // 新しいメッセージが追加されたら自動スクロール
     useEffect(() => {
         bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
-    }, [messages, isLoading]);
+    }, []);
     if (messages.length === 0 && !isLoading) {
         return null;
     }
@@ -19,6 +19,7 @@ export function MessageList({ messages, pendingToolCalls, toolNameLabels, isLoad
     // Show loading indicator when:
     // 1. isLoading is true AND
     // 2. No messages yet OR last message is from user OR last assistant has no content
-    const showLoadingIndicator = isLoading && (messages.length === 0 || lastMessage?.role === 'user' || !lastAssistantHasContent);
+    const showLoadingIndicator = isLoading &&
+        (messages.length === 0 || lastMessage?.role === 'user' || !lastAssistantHasContent);
     return (_jsxs("div", { className: "flex flex-col gap-3 p-3", children: [messages.map((message) => (_jsx(MessageItem, { message: message, pendingToolCalls: pendingToolCalls, toolNameLabels: toolNameLabels }, message.id))), showLoadingIndicator && _jsx(MessageLoading, {}), _jsx("div", { ref: bottomRef })] }));
 }

package/dist/components/agent/message/message-loading.js

@@ -6,7 +6,7 @@ function BouncingDots() {
     return (_jsxs("span", { className: "flex gap-1", "aria-hidden": "true", children: [_jsx("span", { className: "h-1.5 w-1.5 animate-bounce rounded-full bg-muted-foreground [animation-delay:0ms]" }), _jsx("span", { className: "h-1.5 w-1.5 animate-bounce rounded-full bg-muted-foreground [animation-delay:150ms]" }), _jsx("span", { className: "h-1.5 w-1.5 animate-bounce rounded-full bg-muted-foreground [animation-delay:300ms]" })] }));
 }
 export function MessageLoading({ className }) {
-    return (_jsx("div", { className: cn('flex justify-start', className), role: "status", "aria-label": "AI\u5FDC\u7B54\u3092\u5F85\u6A5F\u4E2D", children: _jsx("div", { className: "max-w-xl", children: _jsxs("div", { className: "rounded-lg border border-border bg-card px-3 py-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("div", { className: "relative flex items-center justify-center", children: [_jsx("div", { className: "absolute h-4 w-4 animate-ping rounded-full bg-primary/20" }), _jsx("div", { className: "relative h-2 w-2 animate-pulse rounded-full bg-primary" })] }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "text-xs text-muted-foreground", children: "\u8003\u3048\u4E2D" }), _jsx(BouncingDots, {})] })] }), _jsxs("div", { className: "mt-2 space-y-1.5", "aria-hidden": "true", children: [_jsx("div", { className: "h-2.5 w-full animate-shimmer rounded bg-gradient-to-r from-muted via-muted-foreground/10 to-muted bg-[length:200%_100%]" }), _jsx("div", { className: "h-2.5 w-3/4 animate-shimmer rounded bg-gradient-to-r from-muted via-muted-foreground/10 to-muted bg-[length:200%_100%] [animation-delay:100ms]" }), _jsx("div", { className: "h-2.5 w-1/2 animate-shimmer rounded bg-gradient-to-r from-muted via-muted-foreground/10 to-muted bg-[length:200%_100%] [animation-delay:200ms]" })] })] }) }) }));
+    return (_jsx("div", { className: cn('flex justify-start', className), role: "status", "aria-label": "AI\u5FDC\u7B54\u3092\u5F85\u6A5F\u4E2D", children: _jsx("div", { className: "max-w-xl", children: _jsxs("div", { className: "rounded-lg border border-border bg-card px-3 py-2", children: [_jsxs("div", { className: "flex it ems-center gap-2", children: [_jsxs("div", { className: "relative flex items-center justify-center", children: [_jsx("div", { className: "absolute h-4 w-4 animate-ping rounded-full bg-primary/20" }), _jsx("div", { className: "relative h-2 w-2 animate-pulse rounded-full bg-primary" })] }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "text-xs text-muted-foreground", children: "\u8003\u3048\u4E2D" }), _jsx(BouncingDots, {})] })] }), _jsxs("div", { className: "mt-2 space-y-1.5", "aria-hidden": "true", children: [_jsx("div", { className: "h-2.5 w-full animate-shimmer rounded bg-linear-to-r from-muted via-muted-foreground/10 to-muted bg-size-[200%_100%]" }), _jsx("div", { className: "h-2.5 w-3/4 animate-shimmer rounded bg-linear-to-r from-muted via-muted-foreground/10 to-muted bg-size-[200%_100%] [animation-delay:100ms]" }), _jsx("div", { className: "h-2.5 w-1/2 animate-shimmer rounded bg-linear-to-r from-muted via-muted-foreground/10 to-muted bg-size-[200%_100%] [animation-delay:200ms]" })] })] }) }) }));
 }
 /**
  * Compact loading indicator for inline use (e.g., inside MessageItem during streaming)

package/dist/components/agent/provider/agent-provider.d.ts

@@ -7,4 +7,4 @@ export interface AgentProviderProps extends AgentProviderConfig {
  * エージェントチャット機能を提供する内部Provider
  * 公開APIは AgentScreen / AgentPopupWidget を使用する。
  */
-export declare function AgentProvider({ children, agentId, executeClientTool, onError, authToken, getAuthToken, }: AgentProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function AgentProvider({ children, agentId, executeClientTool, onError, authToken, getAuthToken, getAgentHeaders, disableToolApiAuthHeader, }: AgentProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/agent/provider/agent-provider.js

@@ -7,7 +7,7 @@ import { useAgentChatInternal } from './use-agent-chat';
  * エージェントチャット機能を提供する内部Provider
  * 公開APIは AgentScreen / AgentPopupWidget を使用する。
  */
-export function AgentProvider({ children, agentId, executeClientTool, onError, authToken, getAuthToken, }) {
+export function AgentProvider({ children, agentId, executeClientTool, onError, authToken, getAuthToken, getAgentHeaders, disableToolApiAuthHeader, }) {
     const runtimeConfig = resolveAgentRuntimeConfig();
     const value = useAgentChatInternal({
         config: {
@@ -18,6 +18,8 @@ export function AgentProvider({ children, agentId, executeClientTool, onError, a
             onError,
             authToken,
             getAuthToken,
+            getAgentHeaders,
+            disableToolApiAuthHeader,
         },
     });
     return _jsx(AgentContext.Provider, { value: value, children: children });

package/dist/components/agent/provider/runtime-config.js

@@ -1,8 +1,15 @@
-const FIXED_AGENT_ENDPOINT = 'https://agent-server-prod--agent-platform-dev-8e3ae.asia-east1.hosted.app/api/agent';
-const FIXED_API_BASE_URL = 'https://demo-scout-api-prod--agent-platform-dev-8e3ae.asia-east1.hosted.app/api';
+const isDevelopment = process.env.NODE_ENV === 'development';
+const PRODUCTION_AGENT_ENDPOINT = 'https://agent-server-prod--agent-platform-dev-8e3ae.asia-east1.hosted.app/api/agent';
+const DEVELOPMENT_AGENT_ENDPOINT = 'http://localhost:3002/api/agent';
+const FIXED_API_BASE_URL = isDevelopment
+    ? 'http://localhost:3001/api'
+    : 'https://demo-scout-api-prod--agent-platform-dev-8e3ae.asia-east1.hosted.app/api';
+function normalizeUrl(url) {
+    return url.replace(/\/$/, '');
+}
 export function resolveAgentRuntimeConfig() {
     return {
-        endpoint: FIXED_AGENT_ENDPOINT,
-        apiBaseUrl: FIXED_API_BASE_URL,
+        endpoint: normalizeUrl(isDevelopment ? DEVELOPMENT_AGENT_ENDPOINT : PRODUCTION_AGENT_ENDPOINT),
+        apiBaseUrl: normalizeUrl(FIXED_API_BASE_URL),
     };
 }

package/dist/components/agent/provider/types.d.ts

@@ -19,11 +19,13 @@ export type ClientToolExecutor = (toolCall: import('@agent-platform/server').Too
     output: unknown;
     isError?: boolean;
 }>;
+export type AgentHeadersProvider = () => Record<string, string> | Promise<Record<string, string>>;
 /**
  * AgentProvider設定
  */
 export interface AgentProviderConfig {
     agentId?: string;
+    /** 通信先URLは packages/ui 内部のruntime-configで解決される */
     /**
      * @deprecated 旧実装との後方互換用。
      * executeOn: 'client' のツールをブラウザ側で実行するコールバック
@@ -34,6 +36,10 @@ export interface AgentProviderConfig {
     authToken?: string;
     /** 動的にトークンを取得する関数（authTokenより優先） */
     getAuthToken?: () => string | Promise<string>;
+    /** Agent Server リクエストにのみ追加するヘッダー */
+    getAgentHeaders?: AgentHeadersProvider;
+    /** trueの場合、Tool APIへのAuthorizationヘッダー付与を無効化する */
+    disableToolApiAuthHeader?: boolean;
 }
 /**
  * Agent通信先を解決済みの内部設定

package/dist/components/agent/provider/use-agent-chat.js

@@ -163,21 +163,29 @@ async function executeApiEndpoint(toolCall, apiBaseUrl, authHeaders) {
 }
 export function useAgentChatInternal(options) {
     const { config } = options;
-    const { endpoint, agentId = 'assistant', apiBaseUrl, executeClientTool, onError, authToken, getAuthToken } = config;
+    const { endpoint, agentId = 'assistant', apiBaseUrl, executeClientTool, onError, authToken, getAuthToken, getAgentHeaders, disableToolApiAuthHeader = false, } = config;
     const [messages, setMessages] = useState([]);
     const [threadId, setThreadId] = useState(null);
     const [isLoading, setIsLoading] = useState(false);
     const [error, setError] = useState(null);
     const [pendingToolCalls, setPendingToolCalls] = useState(new Map());
     const abortControllerRef = useRef(null);
-    const buildHeaders = useCallback(async () => {
+    const buildAgentHeaders = useCallback(async () => {
         const headers = { 'Content-Type': 'application/json' };
         const token = getAuthToken ? await getAuthToken() : authToken;
         if (token) {
             headers['Authorization'] = token.startsWith('Bearer ') ? token : `Bearer ${token}`;
         }
+        const customHeaders = getAgentHeaders ? await getAgentHeaders() : undefined;
+        if (customHeaders) {
+            for (const [key, value] of Object.entries(customHeaders)) {
+                if (value) {
+                    headers[key] = value;
+                }
+            }
+        }
         return headers;
-    }, [authToken, getAuthToken]);
+    }, [authToken, getAuthToken, getAgentHeaders]);
     const handleError = useCallback((errorMessage) => {
         setError(errorMessage);
         onError?.(errorMessage);
@@ -244,10 +252,12 @@ export function useAgentChatInternal(options) {
             console.log('[processStream]     apiEndpoint:', JSON.stringify(tc.apiEndpoint, null, 2));
         }
         // 認証ヘッダーを構築
-        const authHeaders = {};
-        const token = getAuthToken ? await getAuthToken() : authToken;
-        if (token) {
-            authHeaders['Authorization'] = token.startsWith('Bearer ') ? token : `Bearer ${token}`;
+        const toolApiHeaders = {};
+        if (!disableToolApiAuthHeader) {
+            const token = getAuthToken ? await getAuthToken() : authToken;
+            if (token) {
+                toolApiHeaders['Authorization'] = token.startsWith('Bearer ') ? token : `Bearer ${token}`;
+            }
         }
         for (const tc of unresolvedCalls) {
             // apiBaseUrlとapiEndpointがある場合は自動実行
@@ -271,7 +281,7 @@ export function useAgentChatInternal(options) {
                 let result;
                 if (canAutoExecute) {
                     // 新しい自動実行パス
-                    result = await executeApiEndpoint(tc, apiBaseUrl, authHeaders);
+                    result = await executeApiEndpoint(tc, apiBaseUrl, toolApiHeaders);
                 }
                 else if (canLegacyExecute) {
                     // 従来のexecuteClientToolを使用（後方互換性）
@@ -304,7 +314,7 @@ export function useAgentChatInternal(options) {
             }
         }
         return { clientToolResults, clientToolCalls: executedClientToolCalls };
-    }, [apiBaseUrl, executeClientTool, authToken, getAuthToken, handleError]);
+    }, [apiBaseUrl, executeClientTool, authToken, getAuthToken, disableToolApiAuthHeader, handleError]);
     const sendMessage = useCallback(async (message) => {
         if (!message.trim() || isLoading)
             return;
@@ -327,7 +337,7 @@ export function useAgentChatInternal(options) {
         setMessages((prev) => [...prev, assistantMessage]);
         try {
             abortControllerRef.current = new AbortController();
-            const headers = await buildHeaders();
+            const headers = await buildAgentHeaders();
             const response = await fetch(`${endpoint}/chat`, {
                 method: 'POST',
                 headers,
@@ -364,7 +374,7 @@ export function useAgentChatInternal(options) {
                     ...prev,
                     { id: continueMessageId, role: 'assistant', content: [], isStreaming: true },
                 ]);
-                const continueHeaders = await buildHeaders();
+                const continueHeaders = await buildAgentHeaders();
                 const continueResponse = await fetch(`${endpoint}/chat/continue`, {
                     method: 'POST',
                     headers: continueHeaders,
@@ -400,12 +410,12 @@ export function useAgentChatInternal(options) {
             setIsLoading(false);
             abortControllerRef.current = null;
         }
-    }, [isLoading, threadId, endpoint, agentId, processStream, handleError, buildHeaders]);
+    }, [isLoading, threadId, endpoint, agentId, processStream, handleError, buildAgentHeaders]);
     const loadThread = useCallback(async (loadThreadId) => {
         setIsLoading(true);
         setError(null);
         try {
-            const threadHeaders = await buildHeaders();
+            const threadHeaders = await buildAgentHeaders();
             const response = await fetch(`${endpoint}/threads/${loadThreadId}/messages`, {
                 headers: threadHeaders,
                 credentials: 'include',
@@ -428,7 +438,7 @@ export function useAgentChatInternal(options) {
         finally {
             setIsLoading(false);
         }
-    }, [endpoint, buildHeaders]);
+    }, [endpoint, buildAgentHeaders]);
     const clearChat = useCallback(() => {
         if (abortControllerRef.current) {
             abortControllerRef.current.abort();

package/dist/components/ui/badge.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 declare const badgeVariants: (props?: ({
-    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
     asChild?: boolean;

package/dist/components/ui/button.d.ts

@@ -1,10 +1,10 @@
-import * as React from "react";
-import { type VariantProps } from "class-variance-authority";
+import { type VariantProps } from 'class-variance-authority';
+import type * as React from 'react';
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
     size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
+declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
     asChild?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
 export { Button, buttonVariants };

package/dist/components/ui/button.js

@@ -1,35 +1,35 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cva } from "class-variance-authority";
-import { Slot } from "radix-ui";
-import { cn } from "../../lib/utils";
+import { cva } from 'class-variance-authority';
+import { Slot } from 'radix-ui';
+import { cn } from '../../lib/utils';
 const buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", {
     variants: {
         variant: {
-            default: "bg-primary text-primary-foreground hover:bg-primary/90",
-            destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-            outline: "border bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-            secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-            ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-            link: "text-primary underline-offset-4 hover:underline",
+            default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+            destructive: 'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+            outline: 'border bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+            secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+            ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+            link: 'text-primary underline-offset-4 hover:underline',
         },
         size: {
-            default: "h-10 px-4 py-2 has-[>svg]:px-3",
+            default: 'h-10 px-4 py-2 has-[>svg]:px-3',
             xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
-            sm: "h-9 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-            lg: "h-11 rounded-md px-6 has-[>svg]:px-4",
-            icon: "size-10",
-            "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
-            "icon-sm": "size-8 min-h-12 min-w-12",
-            "icon-lg": "size-10",
+            sm: 'h-9 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
+            lg: 'h-11 rounded-md px-6 has-[>svg]:px-4',
+            icon: 'size-10',
+            'icon-xs': "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+            'icon-sm': "size-8 rounded-md [&_svg:not([class*='size-'])]:size-4",
+            'icon-lg': "size-10 rounded-md [&_svg:not([class*='size-'])]:size-5",
         },
     },
     defaultVariants: {
-        variant: "default",
-        size: "default",
+        variant: 'default',
+        size: 'default',
     },
 });
-function Button({ className, variant = "default", size = "default", asChild = false, ...props }) {
-    const Comp = asChild ? Slot.Root : "button";
+function Button({ className, variant = 'default', size = 'default', asChild = false, ...props }) {
+    const Comp = asChild ? Slot.Root : 'button';
     return (_jsx(Comp, { "data-slot": "button", "data-variant": variant, "data-size": size, className: cn(buttonVariants({ variant, size, className })), ...props }));
 }
 export { Button, buttonVariants };

package/dist/components/ui/textarea.d.ts

@@ -0,0 +1,3 @@
+import type * as React from 'react';
+declare function Textarea({ className, ...props }: React.ComponentProps<'textarea'>): import("react/jsx-runtime").JSX.Element;
+export { Textarea };

package/dist/components/ui/textarea.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '@/lib/utils';
+function Textarea({ className, ...props }) {
+    return (_jsx("textarea", { "data-slot": "textarea", className: cn('border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm', className), ...props }));
+}
+export { Textarea };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-platform/ui",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "private": false,
   "type": "module",
   "sideEffects": false,