@agent-platform/ui 0.0.6 → 0.0.7

package/README.md

@@ -39,3 +39,8 @@ pnpm --filter @agent-platform/ui publish:public
 ```bash
 pnpm --filter @agent-platform/ui publish:public:dry-run
 ```
+
+## Agent 状態管理
+
+- 画面状態・SSE・tool-call などの状態責務を文書化しています。
+- [Agent State Management](./docs/agent-state-management.md)

package/dist/components/agent/agent-container-state.d.ts

@@ -0,0 +1,2 @@
+import type { AgentChatStateShape, AgentContainerProps } from './types';
+export declare function useAgentContainerViewModel(props: AgentContainerProps): AgentChatStateShape;

package/dist/components/agent/agent-container-state.js

@@ -0,0 +1,52 @@
+'use client';
+import { useMemo } from 'react';
+import { DEFAULT_TOOL_NAME_LABELS } from './defaults';
+import { useOptionalAgentContext } from './provider/agent-context';
+export function useAgentContainerViewModel(props) {
+    const { showHeader = true, headerProps, showGreeting = true, greetingProps, showHomeCards = true, cards, onCardClick, toolNameLabels, autoShowMessages = true, showInput = true, inputProps, className, children, } = props;
+    const context = useOptionalAgentContext();
+    const messages = context?.messages ?? [];
+    const pendingToolCalls = context?.pendingToolCalls ?? [];
+    const activeApprovalRequest = context?.activeApprovalRequest ?? null;
+    const approveToolCall = context?.approveToolCall ?? (() => undefined);
+    const rejectToolCall = context?.rejectToolCall ?? (() => undefined);
+    const toolApprovalLabels = context?.config.toolApprovalLabels;
+    const error = context?.error ?? null;
+    const isLoading = context?.isLoading ?? false;
+    const sendMessage = context?.sendMessage;
+    const clearChat = context?.clearChat;
+    const mergedToolNameLabels = useMemo(() => ({ ...DEFAULT_TOOL_NAME_LABELS, ...toolNameLabels }), [toolNameLabels]);
+    const effectiveInputProps = useMemo(() => ({
+        ...inputProps,
+        onSend: inputProps?.onSend ?? sendMessage,
+        isLoading: inputProps?.isLoading ?? isLoading,
+    }), [inputProps, isLoading, sendMessage]);
+    const effectiveHeaderProps = useMemo(() => ({
+        ...headerProps,
+        onNewChatClick: headerProps?.onNewChatClick ?? clearChat,
+    }), [headerProps, clearChat]);
+    return {
+        showHeader,
+        effectiveHeaderProps,
+        showGreeting,
+        greetingProps,
+        showHomeCards,
+        cards,
+        onCardClick,
+        autoShowMessages,
+        showInput,
+        effectiveInputProps,
+        className,
+        messages,
+        pendingToolCalls,
+        activeApprovalRequest,
+        approveToolCall,
+        rejectToolCall,
+        toolApprovalLabels,
+        error,
+        isLoading,
+        mergedToolNameLabels,
+        hasMessages: messages.length > 0,
+        children,
+    };
+}

package/dist/components/agent/agent-container-view.d.ts

@@ -0,0 +1,3 @@
+import type { AgentChatStateShape } from './types';
+declare function AgentContainerView({ showHeader, effectiveHeaderProps, showGreeting, greetingProps, showHomeCards, cards, onCardClick, autoShowMessages, showInput, effectiveInputProps, className, children, messages, pendingToolCalls, activeApprovalRequest, approveToolCall, rejectToolCall, toolApprovalLabels, mergedToolNameLabels, isLoading, error, hasMessages, }: AgentChatStateShape): import("react/jsx-runtime").JSX.Element;
+export { AgentContainerView };

package/dist/components/agent/agent-container-view.js

@@ -0,0 +1,22 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { resolveToolApprovalLabels, resolveToolApprovalRiskLabel } from './approval-ui-model';
+import { cn } from '../../lib/utils';
+import { AgentGreeting } from './agent-greeting';
+import { AgentHeader } from './agent-header';
+import { AgentHomeCards } from './agent-home-cards';
+import { AgentInput } from './agent-input';
+import { resolveInputMode } from './input-mode';
+import { MessageList } from './message';
+import { Button } from '../ui/button';
+function AgentContainerView({ showHeader, effectiveHeaderProps, showGreeting, greetingProps, showHomeCards, cards, onCardClick, autoShowMessages, showInput, effectiveInputProps, className, children, messages, pendingToolCalls, activeApprovalRequest, approveToolCall, rejectToolCall, toolApprovalLabels, mergedToolNameLabels, isLoading, error, hasMessages, }) {
+    const shouldShowMessages = autoShowMessages && (hasMessages || isLoading);
+    const inputMode = resolveInputMode({
+        showInput,
+        hasActiveApprovalRequest: Boolean(activeApprovalRequest),
+    });
+    const approvalLabels = resolveToolApprovalLabels(toolApprovalLabels);
+    const riskText = resolveToolApprovalRiskLabel(activeApprovalRequest?.riskLevel);
+    return (_jsxs("div", { "data-slot": "agent-container", className: cn('flex flex-col w-full h-full', className), children: [showHeader && _jsx(AgentHeader, { ...effectiveHeaderProps }), children ? (children) : shouldShowMessages ? (_jsxs("div", { className: "flex-1 overflow-y-auto bg-white", children: [_jsx(MessageList, { messages: messages, pendingToolCalls: pendingToolCalls, toolNameLabels: mergedToolNameLabels, isLoading: isLoading }), error && (_jsx("div", { className: "mx-4 mb-4 rounded-lg bg-red-50 p-3 text-sm text-red-600", children: error }))] })) : (_jsxs("div", { className: "flex flex-1 flex-col items-center justify-center gap-6 bg-background px-4 py-4", children: [showGreeting && _jsx(AgentGreeting, { ...greetingProps }), showHomeCards && cards && _jsx(AgentHomeCards, { cards: cards, onCardClick: onCardClick })] })), inputMode === 'input' && _jsx(AgentInput, { ...effectiveInputProps }), inputMode === 'approval' && activeApprovalRequest && (_jsx("div", { "data-slot": "agent-tool-approval", className: "w-full border-t border-border bg-muted px-3 pb-3 pt-2", children: _jsxs("div", { className: "flex flex-col gap-2 rounded-lg border border-border bg-primary-foreground p-3 shadow-sm", children: [_jsx("div", { className: "text-sm font-bold text-foreground text-balance", children: approvalLabels.title }), _jsx("div", { className: "text-sm font-medium text-foreground text-balance", children: activeApprovalRequest.actionLabel }), _jsxs("div", { className: "text-xs text-muted-foreground text-pretty", children: [approvalLabels.description, " (", riskText, ")"] }), _jsxs("div", { className: "flex gap-2 pt-1", children: [_jsx(Button, { type: "button", variant: "outline", onClick: rejectToolCall, className: "flex-1", children: approvalLabels.rejectButton }), _jsx(Button, { type: "button", onClick: approveToolCall, className: "flex-1", children: approvalLabels.approveButton })] })] }) }))] }));
+}
+export { AgentContainerView };

package/dist/components/agent/agent-container-view.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/agent/agent-container-view.test.js

@@ -0,0 +1,16 @@
+import { describe, expect, it } from 'vitest';
+import { resolveInputMode } from './input-mode';
+describe('resolveInputMode', () => {
+    it('承認待ちがある場合はapprovalを返す', () => {
+        expect(resolveInputMode({ showInput: true, hasActiveApprovalRequest: true })).toBe('approval');
+    });
+    it('showInput=falseでも承認待ちがあればapprovalを返す', () => {
+        expect(resolveInputMode({ showInput: false, hasActiveApprovalRequest: true })).toBe('approval');
+    });
+    it('承認待ちがなく入力表示有効ならinputを返す', () => {
+        expect(resolveInputMode({ showInput: true, hasActiveApprovalRequest: false })).toBe('input');
+    });
+    it('入力表示無効ならnoneを返す', () => {
+        expect(resolveInputMode({ showInput: false, hasActiveApprovalRequest: false })).toBe('none');
+    });
+});

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

@@ -1,3 +1,3 @@
 import type { AgentContainerProps } from './types';
-declare function AgentContainer({ showHeader, headerProps, showGreeting, greetingProps, showHomeCards, cards, onCardClick, toolNameLabels, autoShowMessages, showInput, inputProps, className, children, }: AgentContainerProps): import("react/jsx-runtime").JSX.Element;
+declare function AgentContainer({ ...containerProps }: AgentContainerProps): import("react/jsx-runtime").JSX.Element;
 export { AgentContainer };

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

@@ -1,47 +1,9 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from '../../lib/utils';
-import { AgentGreeting } from './agent-greeting';
-import { AgentHeader } from './agent-header';
-import { AgentHomeCards } from './agent-home-cards';
-import { AgentInput } from './agent-input';
-import { DEFAULT_TOOL_NAME_LABELS } from './defaults';
-import { MessageList } from './message';
-import { useAgentContext } from './provider';
-function AgentContainer({ showHeader = true, headerProps, showGreeting = true, greetingProps, showHomeCards = true, cards, onCardClick, toolNameLabels, autoShowMessages = true, showInput = true, inputProps, className, children, }) {
-    // AgentProvider配下で使用されている場合のみ有効
-    let messages = [];
-    let pendingToolCalls = [];
-    let error = null;
-    let sendMessage;
-    let clearChat;
-    let isLoading = false;
-    try {
-        const context = useAgentContext();
-        messages = context.messages;
-        pendingToolCalls = context.pendingToolCalls;
-        error = context.error;
-        sendMessage = context.sendMessage;
-        clearChat = context.clearChat;
-        isLoading = context.isLoading;
-    }
-    catch {
-        // AgentProvider外で使用されている場合は無視
-    }
-    // propsのデフォルト値をコンテキストから適用
-    const effectiveInputProps = {
-        ...inputProps,
-        onSend: inputProps?.onSend ?? sendMessage,
-        isLoading: inputProps?.isLoading ?? isLoading,
-    };
-    const effectiveHeaderProps = {
-        ...headerProps,
-        onNewChatClick: headerProps?.onNewChatClick ?? clearChat,
-    };
-    const hasMessages = messages.length > 0;
-    const mergedToolNameLabels = { ...DEFAULT_TOOL_NAME_LABELS, ...toolNameLabels };
-    // 自動メッセージ表示用コンテンツ
-    const autoMessagesContent = autoShowMessages && (hasMessages || isLoading) && (_jsxs("div", { className: "flex-1 overflow-y-auto bg-white", children: [_jsx(MessageList, { messages: messages, pendingToolCalls: pendingToolCalls, toolNameLabels: mergedToolNameLabels, isLoading: isLoading }), error && (_jsx("div", { className: "mx-4 mb-4 rounded-lg bg-red-50 p-3 text-sm text-red-600", children: error }))] }));
-    return (_jsxs("div", { "data-slot": "agent-container", className: cn('flex flex-col w-full h-full', className), children: [showHeader && _jsx(AgentHeader, { ...effectiveHeaderProps }), children ? (children) : autoMessagesContent ? (autoMessagesContent) : (_jsxs("div", { className: "flex flex-1 flex-col items-center justify-center gap-6 bg-background px-4 py-4", children: [showGreeting && _jsx(AgentGreeting, { ...greetingProps }), showHomeCards && cards && _jsx(AgentHomeCards, { cards: cards, onCardClick: onCardClick })] })), showInput && _jsx(AgentInput, { ...effectiveInputProps })] }));
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useAgentContainerViewModel } from './agent-container-state';
+import { AgentContainerView } from './agent-container-view';
+function AgentContainer({ ...containerProps }) {
+    const viewModel = useAgentContainerViewModel(containerProps);
+    return _jsx(AgentContainerView, { ...viewModel });
 }
 export { AgentContainer };

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

@@ -1,3 +1,3 @@
-import type { AgentGreetingProps } from "./types";
+import type { AgentGreetingProps } from './types';
 declare function AgentGreeting({ greeting, subtext, className, }: AgentGreetingProps): import("react/jsx-runtime").JSX.Element;
 export { AgentGreeting };

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

@@ -1,7 +1,7 @@
-"use client";
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from "../../lib/utils";
-function AgentGreeting({ greeting = "こんにちは 👋", subtext = "何かお手伝いできることはありますか？", className, }) {
-    return (_jsxs("div", { "data-slot": "agent-greeting", className: cn("flex flex-col items-center gap-1.5 text-center", className), children: [_jsx("p", { className: "text-sm text-muted-foreground", children: greeting }), _jsx("p", { className: "text-lg font-semibold tracking-tight text-balance text-card-foreground", children: subtext })] }));
+import { cn } from '../../lib/utils';
+function AgentGreeting({ greeting = 'こんにちは 👋', subtext = '何かお手伝いできることはありますか？', className, }) {
+    return (_jsxs("div", { "data-slot": "agent-greeting", className: cn('flex flex-col items-center gap-1.5 text-center', className), children: [_jsx("p", { className: "text-sm text-muted-foreground", children: greeting }), _jsx("p", { className: "text-lg font-semibold tracking-tight text-balance text-card-foreground", children: subtext })] }));
 }
 export { AgentGreeting };

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

@@ -1,3 +1,3 @@
-import type { AgentHeaderProps } from "./types";
+import type { AgentHeaderProps } from './types';
 declare function AgentHeader({ historyLabel, onHistoryClick, onSettingsClick, onNewChatClick, newChatLabel, settingsAriaLabel, className, }: AgentHeaderProps): import("react/jsx-runtime").JSX.Element;
 export { AgentHeader };

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

@@ -1,9 +1,9 @@
-"use client";
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CaretDown, Gear } from "@phosphor-icons/react/dist/ssr";
-import { cn } from "../../lib/utils";
-import { Button } from "../ui/button";
-function AgentHeader({ historyLabel = "履歴", onHistoryClick, onSettingsClick, onNewChatClick, newChatLabel = "新規チャット", settingsAriaLabel = "設定", className, }) {
-    return (_jsxs("div", { "data-slot": "agent-header", className: cn("flex w-full items-center justify-between bg-background px-4 py-2", className), children: [_jsxs("div", { className: "flex items-center", children: [_jsx("span", { className: "text-sm font-semibold text-foreground", children: historyLabel }), _jsx(Button, { variant: "ghost", size: "icon-sm", onClick: onHistoryClick, "aria-label": historyLabel, children: _jsx(CaretDown, { className: "size-5" }) })] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Button, { variant: "ghost", size: "icon-sm", onClick: onSettingsClick, "aria-label": settingsAriaLabel, className: "text-foreground", children: _jsx(Gear, { className: "size-5" }) }), _jsx(Button, { size: "sm", onClick: onNewChatClick, className: "bg-foreground text-background text-xs font-medium hover:bg-foreground/90", children: newChatLabel })] })] }));
+import { CaretDown, Gear } from '@phosphor-icons/react/dist/ssr';
+import { cn } from '../../lib/utils';
+import { Button } from '../ui/button';
+function AgentHeader({ historyLabel = '履歴', onHistoryClick, onSettingsClick, onNewChatClick, newChatLabel = '新規チャット', settingsAriaLabel = '設定', className, }) {
+    return (_jsxs("div", { "data-slot": "agent-header", className: cn('flex w-full items-center justify-between bg-background px-4 py-2', className), children: [_jsxs("div", { className: "flex items-center", children: [_jsx("span", { className: "text-sm font-semibold text-foreground", children: historyLabel }), _jsx(Button, { variant: "ghost", size: "icon-sm", onClick: onHistoryClick, "aria-label": historyLabel, children: _jsx(CaretDown, { className: "size-5" }) })] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Button, { variant: "ghost", size: "icon-sm", onClick: onSettingsClick, "aria-label": settingsAriaLabel, className: "text-foreground", children: _jsx(Gear, { className: "size-5" }) }), _jsx(Button, { size: "sm", onClick: onNewChatClick, className: "bg-foreground text-background text-xs font-medium hover:bg-foreground/90", children: newChatLabel })] })] }));
 }
 export { AgentHeader };

package/dist/components/agent/agent-home-cards.d.ts

@@ -1,9 +1,9 @@
-import type { AgentHomeCardProps } from "./types";
+import type { AgentHomeCardProps } from './types';
 interface AgentHomeCardsProps {
     cards: AgentHomeCardProps[];
     onCardClick?: (cardId: string) => void;
     className?: string;
 }
-declare function AgentHomeCards({ cards, onCardClick, className, }: AgentHomeCardsProps): import("react/jsx-runtime").JSX.Element;
+declare function AgentHomeCards({ cards, onCardClick, className }: AgentHomeCardsProps): import("react/jsx-runtime").JSX.Element;
 export { AgentHomeCards };
 export type { AgentHomeCardsProps };

package/dist/components/agent/agent-home-cards.js

@@ -1,9 +1,11 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from "../../lib/utils";
-import { AgentHomeCard } from "./agent-home-card";
-function AgentHomeCards({ cards, onCardClick, className, }) {
-    return (_jsx("div", { "data-slot": "agent-home-cards", className: cn("flex w-full items-start justify-center gap-4 px-12", className), children: cards.map((card) => (_jsx(AgentHomeCard, { ...card, onClick: () => {
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+function AgentHomeCard({ id, icon, title, description, onClick, className }) {
+    return (_jsxs("button", { type: "button", "data-slot": "agent-home-card", "data-card-id": id, onClick: onClick, className: cn('flex flex-1 flex-col items-start gap-2.5 rounded-lg border border-border bg-card p-3 text-left transition-all hover:border-primary/30 hover:bg-accent focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring', className), children: [_jsx("div", { className: "text-muted-foreground [&_svg]:size-5", children: icon }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("p", { className: "text-sm font-semibold leading-none text-card-foreground", children: title }), _jsx("p", { className: "text-xs leading-relaxed text-muted-foreground", children: description })] })] }));
+}
+function AgentHomeCards({ cards, onCardClick, className }) {
+    return (_jsx("div", { "data-slot": "agent-home-cards", className: cn('flex w-full items-start justify-center gap-4 px-12', className), children: cards.map((card) => (_jsx(AgentHomeCard, { ...card, onClick: () => {
                 card.onClick?.();
                 onCardClick?.(card.id);
             } }, card.id))) }));

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, getAgentHeaders, disableToolApiAuthHeader, ...containerProps }: AgentScreenProps): import("react/jsx-runtime").JSX.Element;
+export declare function AgentScreen({ agentId, onError, authToken, getAuthToken, getAgentHeaders, disableToolApiAuthHeader, toolApprovalLabels, ...containerProps }: AgentScreenProps): import("react/jsx-runtime").JSX.Element;

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

@@ -2,6 +2,9 @@
 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, getAgentHeaders, disableToolApiAuthHeader, ...containerProps }) {
-    return (_jsx(AgentProvider, { agentId: agentId, executeClientTool: executeClientTool, onError: onError, authToken: authToken, getAuthToken: getAuthToken, getAgentHeaders: getAgentHeaders, disableToolApiAuthHeader: disableToolApiAuthHeader, children: _jsx(AgentContainer, { ...containerProps }) }));
+function AgentScreenController({ ...containerProps }) {
+    return _jsx(AgentContainer, { ...containerProps });
+}
+export function AgentScreen({ agentId, onError, authToken, getAuthToken, getAgentHeaders, disableToolApiAuthHeader, toolApprovalLabels, ...containerProps }) {
+    return (_jsx(AgentProvider, { agentId: agentId, onError: onError, authToken: authToken, getAuthToken: getAuthToken, getAgentHeaders: getAgentHeaders, disableToolApiAuthHeader: disableToolApiAuthHeader, toolApprovalLabels: toolApprovalLabels, children: _jsx(AgentScreenController, { ...containerProps }) }));
 }

package/dist/components/agent/approval-ui-model.d.ts

@@ -0,0 +1,15 @@
+import type { ToolApprovalLabels } from './provider/types';
+type ToolApprovalRiskLevel = 'read' | 'write' | 'destructive';
+declare function resolveToolApprovalLabels(toolApprovalLabels?: ToolApprovalLabels): {
+    readonly title: "この操作を実行してもよろしいでしょうか？";
+    readonly description: "この操作はデータを変更する可能性があります。内容を確認して、承認または非承認を選択してください。";
+    readonly approveButton: "実行する";
+    readonly rejectButton: "実行しない";
+} | {
+    title: string;
+    description: string;
+    approveButton: string;
+    rejectButton: string;
+};
+declare function resolveToolApprovalRiskLabel(riskLevel?: ToolApprovalRiskLevel): "高リスク操作" | "変更操作" | "確認操作";
+export { resolveToolApprovalLabels, resolveToolApprovalRiskLabel };

package/dist/components/agent/approval-ui-model.js

@@ -0,0 +1,27 @@
+const DEFAULT_TOOL_APPROVAL_LABELS = {
+    title: 'この操作を実行してもよろしいでしょうか？',
+    description: 'この操作はデータを変更する可能性があります。内容を確認して、承認または非承認を選択してください。',
+    approveButton: '実行する',
+    rejectButton: '実行しない',
+};
+function resolveToolApprovalLabels(toolApprovalLabels) {
+    if (!toolApprovalLabels) {
+        return DEFAULT_TOOL_APPROVAL_LABELS;
+    }
+    return {
+        title: toolApprovalLabels.title ?? DEFAULT_TOOL_APPROVAL_LABELS.title,
+        description: toolApprovalLabels.description ?? DEFAULT_TOOL_APPROVAL_LABELS.description,
+        approveButton: toolApprovalLabels.approveButton ?? DEFAULT_TOOL_APPROVAL_LABELS.approveButton,
+        rejectButton: toolApprovalLabels.rejectButton ?? DEFAULT_TOOL_APPROVAL_LABELS.rejectButton,
+    };
+}
+function resolveToolApprovalRiskLabel(riskLevel) {
+    if (riskLevel === 'destructive') {
+        return '高リスク操作';
+    }
+    if (riskLevel === 'write') {
+        return '変更操作';
+    }
+    return '確認操作';
+}
+export { resolveToolApprovalLabels, resolveToolApprovalRiskLabel };

package/dist/components/agent/approval-ui-model.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/agent/approval-ui-model.test.js

@@ -0,0 +1,39 @@
+import { describe, expect, it } from 'vitest';
+import { resolveToolApprovalLabels, resolveToolApprovalRiskLabel } from './approval-ui-model';
+describe('resolveToolApprovalLabels', () => {
+    it('未指定時はデフォルト文言を返す', () => {
+        const labels = resolveToolApprovalLabels();
+        expect(labels).toEqual({
+            title: 'この操作を実行してもよろしいでしょうか？',
+            description: 'この操作はデータを変更する可能性があります。内容を確認して、承認または非承認を選択してください。',
+            approveButton: '実行する',
+            rejectButton: '実行しない',
+        });
+    });
+    it('指定された文言で部分上書きできる', () => {
+        const labels = resolveToolApprovalLabels({
+            description: '説明を上書き',
+            rejectButton: '非承認',
+        });
+        expect(labels).toEqual({
+            title: 'この操作を実行してもよろしいでしょうか？',
+            description: '説明を上書き',
+            approveButton: '実行する',
+            rejectButton: '非承認',
+        });
+    });
+});
+describe('resolveToolApprovalRiskLabel', () => {
+    it('destructiveは高リスク操作を返す', () => {
+        expect(resolveToolApprovalRiskLabel('destructive')).toBe('高リスク操作');
+    });
+    it('writeは変更操作を返す', () => {
+        expect(resolveToolApprovalRiskLabel('write')).toBe('変更操作');
+    });
+    it('readは確認操作を返す', () => {
+        expect(resolveToolApprovalRiskLabel('read')).toBe('確認操作');
+    });
+    it('未指定時は確認操作を返す', () => {
+        expect(resolveToolApprovalRiskLabel()).toBe('確認操作');
+    });
+});

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

@@ -1,9 +1,3 @@
-import type { AgentHomeCardProps } from './types';
-/**
- * デフォルトのホームカード定義
- * 消費側でカスタマイズ可能だが、デフォルトとして提供
- */
-export declare const DEFAULT_HOME_CARDS: Omit<AgentHomeCardProps, 'icon'>[];
 /**
  * デフォルトのツール名ラベル
  * 消費側でマージ/上書き可能

package/dist/components/agent/defaults.js

@@ -1,14 +1,3 @@
-/**
- * デフォルトのホームカード定義
- * 消費側でカスタマイズ可能だが、デフォルトとして提供
- */
-export const DEFAULT_HOME_CARDS = [
-    {
-        id: 'chat',
-        title: 'チャットを開始',
-        description: 'AIアシスタントと会話を始めましょう',
-    },
-];
 /**
  * デフォルトのツール名ラベル
  * 消費側でマージ/上書き可能

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

@@ -1,5 +1,3 @@
-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 @@
-export { AgentPopupWidget } from './agent-popup-widget';
 export { AgentScreen } from './agent-screen';

package/dist/components/agent/input-mode.d.ts

@@ -0,0 +1,5 @@
+export type InputMode = 'none' | 'input' | 'approval';
+export declare function resolveInputMode(input: {
+    showInput: boolean;
+    hasActiveApprovalRequest: boolean;
+}): InputMode;

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

@@ -0,0 +1,9 @@
+export function resolveInputMode(input) {
+    if (input.hasActiveApprovalRequest) {
+        return 'approval';
+    }
+    if (!input.showInput) {
+        return 'none';
+    }
+    return 'input';
+}

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

@@ -4,5 +4,5 @@ export { MessageItem } from './message-item';
 export type { MessageItemProps } from './message-item';
 export { ToolCallCard } from './tool-call-card';
 export type { ToolCallCardProps } from './tool-call-card';
-export { MessageLoading, ThinkingDots } from './message-loading';
+export { MessageLoading } from './message-loading';
 export type { MessageLoadingProps } from './message-loading';

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

@@ -1,4 +1,4 @@
 export { MessageList } from './message-list';
 export { MessageItem } from './message-item';
 export { ToolCallCard } from './tool-call-card';
-export { MessageLoading, ThinkingDots } from './message-loading';
+export { MessageLoading } from './message-loading';

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

@@ -3,17 +3,11 @@ 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';
+import { extractTextContent, extractToolCalls } from './utils';
 export function MessageItem({ message, pendingToolCalls, toolNameLabels }) {
     const isUser = message.role === 'user';
-    // メッセージからテキストを抽出
-    const textContent = message.content
-        .filter((c) => c.type === 'text')
-        .map((c) => c.text)
-        .join('');
-    // メッセージからツールコールを抽出
-    const toolCalls = message.content
-        .filter((c) => c.type === 'tool-call')
-        .map((c) => c.toolCall);
+    const textContent = extractTextContent(message.content);
+    const toolCalls = extractToolCalls(message.content);
     // 空のストリーミング中の assistant メッセージは非表示（MessageLoading が表示されるため）
     if (!isUser && message.isStreaming && !textContent && toolCalls.length === 0) {
         return null;

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

@@ -3,23 +3,18 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
 import { MessageItem } from './message-item';
 import { MessageLoading } from './message-loading';
+import { shouldShowLoadingIndicator } from './utils';
 export function MessageList({ messages, pendingToolCalls, toolNameLabels, isLoading = false, }) {
     const bottomRef = useRef(null);
-    // 新しいメッセージが追加されたら自動スクロール
     useEffect(() => {
         bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
-    }, []);
+    }, [messages, isLoading]);
     if (messages.length === 0 && !isLoading) {
         return null;
     }
-    const lastMessage = messages[messages.length - 1];
-    // Check if the last assistant message has actual text content
-    const lastAssistantHasContent = lastMessage?.role === 'assistant' &&
-        lastMessage.content.some((c) => c.type === 'text' && c.text.length > 0);
-    // 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 = shouldShowLoadingIndicator({
+        messages,
+        isLoading,
+    });
     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.d.ts

@@ -2,9 +2,3 @@ export interface MessageLoadingProps {
     className?: string;
 }
 export declare function MessageLoading({ className }: MessageLoadingProps): import("react/jsx-runtime").JSX.Element;
-/**
- * Compact loading indicator for inline use (e.g., inside MessageItem during streaming)
- */
-export declare function ThinkingDots({ className }: {
-    className?: string;
-}): import("react/jsx-runtime").JSX.Element;

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

@@ -8,9 +8,3 @@ function LoadingDots() {
 export function MessageLoading({ className }) {
     return (_jsx("output", { className: cn('flex justify-start', className), "aria-label": "AI\u5FDC\u7B54\u3092\u5F85\u6A5F\u4E2D", children: _jsx("div", { className: "max-w-xl", children: _jsx("div", { className: "rounded-lg border border-border bg-card px-3 py-2", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm text-muted-foreground", children: "\u8003\u3048\u4E2D" }), _jsx(LoadingDots, {})] }) }) }) }));
 }
-/**
- * Compact loading indicator for inline use (e.g., inside MessageItem during streaming)
- */
-export function ThinkingDots({ className }) {
-    return (_jsx("output", { className: cn('flex items-center gap-2', className), "aria-label": "\u8003\u3048\u4E2D", children: _jsx(LoadingDots, {}) }));
-}

package/dist/components/agent/message/tool-call-card.js

@@ -4,12 +4,14 @@ import { CheckCircle, XCircle } from '@phosphor-icons/react/dist/ssr';
 import { cn } from '../../../lib/utils';
 const defaultStatusLabels = {
     pending: '待機中',
+    'awaiting-approval': '承認待ち',
     executing: '実行中',
     completed: '完了',
     error: 'エラー',
 };
 const statusColors = {
     pending: 'bg-muted text-muted-foreground',
+    'awaiting-approval': 'bg-amber-100 text-amber-700 dark:bg-amber-950 dark:text-amber-300',
     executing: 'bg-primary/10 text-primary',
     completed: 'bg-green-100 text-green-600 dark:bg-green-950 dark:text-green-400',
     error: 'bg-destructive/10 text-destructive',

package/dist/components/agent/message/utils.d.ts

@@ -0,0 +1,8 @@
+import type { AgentMessage, ToolCallData } from '../provider/types';
+export interface LoadingIndicatorInput {
+    messages: AgentMessage[];
+    isLoading: boolean;
+}
+export declare function extractTextContent(content: AgentMessage['content']): string;
+export declare function extractToolCalls(content: AgentMessage['content']): ToolCallData[];
+export declare function shouldShowLoadingIndicator({ messages, isLoading, }: LoadingIndicatorInput): boolean;

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

@@ -0,0 +1,21 @@
+export function extractTextContent(content) {
+    return content
+        .filter((part) => part.type === 'text')
+        .map((part) => part.text)
+        .join('');
+}
+export function extractToolCalls(content) {
+    return content
+        .filter((part) => part.type === 'tool-call')
+        .map((part) => part.toolCall);
+}
+export function shouldShowLoadingIndicator({ messages, isLoading, }) {
+    if (!isLoading)
+        return false;
+    const lastMessage = messages[messages.length - 1];
+    const hasNoMessages = messages.length === 0;
+    if (hasNoMessages)
+        return true;
+    const lastAssistantHasContent = lastMessage?.role === 'assistant' && extractTextContent(lastMessage.content).trim().length > 0;
+    return lastMessage?.role === 'user' || !lastAssistantHasContent;
+}

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

@@ -1,3 +1,4 @@
 import type { AgentContextValue } from './types';
 export declare const AgentContext: import("react").Context<AgentContextValue | null>;
 export declare function useAgentContext(): AgentContextValue;
+export declare function useOptionalAgentContext(): AgentContextValue | null;

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

@@ -8,3 +8,6 @@ export function useAgentContext() {
     }
     return context;
 }
+export function useOptionalAgentContext() {
+    return useContext(AgentContext);
+}

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, getAgentHeaders, disableToolApiAuthHeader, }: AgentProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function AgentProvider({ children, agentId, onError, authToken, getAuthToken, getAgentHeaders, disableToolApiAuthHeader, toolApprovalLabels, }: AgentProviderProps): import("react/jsx-runtime").JSX.Element;