@agent-platform/ui 0.0.4 → 0.0.6

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

@@ -1,16 +1,16 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from '../../../lib/utils';
-/** Reusable bouncing dots animation */
-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]" })] }));
+/** Reusable loading dots animation */
+function LoadingDots() {
+    return (_jsxs("span", { className: "flex gap-0.5", "aria-hidden": "true", children: [_jsx("span", { className: "h-0.5 w-0.5 animate-dot-fade rounded-full bg-muted-foreground/50 [animation-delay:0ms]" }), _jsx("span", { className: "h-0.5 w-0.5 animate-dot-fade rounded-full bg-muted-foreground/50 [animation-delay:150ms]" }), _jsx("span", { className: "h-0.5 w-0.5 animate-dot-fade rounded-full bg-muted-foreground/50 [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 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]" })] })] }) }) }));
+    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 (_jsxs("div", { className: cn('flex items-center gap-2', className), role: "status", "aria-label": "\u8003\u3048\u4E2D", children: [_jsx("div", { className: "h-2 w-2 animate-pulse rounded-full bg-primary" }), _jsx(BouncingDots, {})] }));
+    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

@@ -21,5 +21,5 @@ export function ToolCallCard({ toolCallState, toolNameLabels = {}, statusLabels,
         ? { ...defaultStatusLabels, ...statusLabels }
         : defaultStatusLabels;
     const statusLabel = mergedStatusLabels[status];
-    return (_jsxs("div", { className: "rounded-md border border-border bg-card p-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-xs font-medium text-foreground", children: toolLabel }), _jsx("span", { className: cn('rounded-full px-1.5 py-0.5 text-[10px]', statusColors[status]), children: statusLabel })] }), status === 'executing' && (_jsx("div", { className: "h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent" })), status === 'completed' && (_jsx(CheckCircle, { className: "size-4 text-green-600", weight: "fill" })), status === 'error' && (_jsx(XCircle, { className: "size-4 text-destructive", weight: "fill" }))] }), _jsxs("details", { className: "mt-2", children: [_jsx("summary", { className: "cursor-pointer text-xs text-muted-foreground", children: parametersLabel }), _jsx("pre", { className: "mt-1 overflow-x-auto rounded bg-muted p-2 text-xs text-muted-foreground", children: JSON.stringify(toolCall.input, null, 2) })] }), status === 'completed' && result !== undefined && (_jsxs("details", { className: "mt-2", children: [_jsx("summary", { className: "cursor-pointer text-xs text-green-600 dark:text-green-400", children: resultLabel }), _jsx("pre", { className: "mt-1 max-h-40 overflow-auto rounded bg-green-50 p-2 text-xs text-muted-foreground dark:bg-green-950", children: typeof result === 'string' ? result : JSON.stringify(result, null, 2) })] })), status === 'error' && error && (_jsx("div", { className: "mt-2 rounded bg-destructive/10 p-2 text-xs text-destructive", children: error }))] }));
+    return (_jsxs("div", { className: "rounded-md border border-border bg-card p-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-xs font-medium text-foreground", children: toolLabel }), _jsx("span", { className: cn('rounded-full px-1.5 py-0.5 text-[10px]', statusColors[status]), children: statusLabel })] }), status === 'executing' && (_jsx("div", { className: "h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent" })), status === 'completed' && _jsx(CheckCircle, { className: "size-4 text-green-600", weight: "fill" }), status === 'error' && _jsx(XCircle, { className: "size-4 text-destructive", weight: "fill" })] }), _jsxs("details", { className: "mt-2", children: [_jsx("summary", { className: "cursor-pointer text-xs text-muted-foreground", children: parametersLabel }), _jsx("pre", { className: "mt-1 overflow-x-auto rounded bg-muted p-2 text-xs text-muted-foreground", children: JSON.stringify(toolCall.input, null, 2) })] }), status === 'completed' && result !== undefined && (_jsxs("details", { className: "mt-2", children: [_jsx("summary", { className: "cursor-pointer text-xs text-green-800 dark:text-green-400", children: resultLabel }), _jsx("pre", { className: "mt-1 max-h-40 overflow-auto rounded bg-green-50 p-2 text-xs text-muted-foreground dark:bg-green-950", children: typeof result === 'string' ? result : JSON.stringify(result, null, 2) })] })), status === 'error' && error && (_jsx("div", { className: "mt-2 rounded bg-destructive/10 p-2 text-xs text-destructive", children: error }))] }));
 }

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

@@ -3,6 +3,29 @@ import { useCallback, useRef, useState } from 'react';
 import { parseSSEBuffer } from './parse-sse-buffer';
 /** クライアントツール自動継続の最大回数 */
 const MAX_CONTINUE_ROUNDS = 10;
+function isLikelyJwtToken(token) {
+    const normalized = token.startsWith('Bearer ') ? token.slice(7) : token;
+    return normalized.split('.').length === 3;
+}
+function normalizeErrorMessage(error) {
+    if (typeof error === 'string' && error.trim().length > 0)
+        return error;
+    if (typeof error === 'object' &&
+        error !== null &&
+        'message' in error &&
+        typeof error.message === 'string') {
+        return error.message;
+    }
+    if (error !== undefined) {
+        try {
+            return JSON.stringify(error);
+        }
+        catch {
+            return String(error);
+        }
+    }
+    return 'Unknown error';
+}
 // --- イベントハンドラ ---
 function handleTextDelta(text, accumulatedText, toolCalls, assistantMessageId, setMessages) {
     const newText = accumulatedText + text;
@@ -55,7 +78,7 @@ function handleToolResult(tr, serverResolvedToolIds, setPendingToolCalls) {
                 ...state,
                 status: tr.isError ? 'error' : 'completed',
                 result: tr.result,
-                error: tr.isError ? String(tr.result) : undefined,
+                error: tr.isError ? normalizeErrorMessage(tr.result) : undefined,
             });
         }
         return newMap;
@@ -67,7 +90,12 @@ function handleFinish(assistantMessageId, setMessages) {
         const idx = updated.findIndex((m) => m.id === assistantMessageId);
         const existing = idx >= 0 ? updated[idx] : undefined;
         if (existing) {
-            updated[idx] = { id: existing.id, role: existing.role, content: existing.content, isStreaming: false };
+            updated[idx] = {
+                id: existing.id,
+                role: existing.role,
+                content: existing.content,
+                isStreaming: false,
+            };
         }
         return updated;
     });
@@ -173,6 +201,7 @@ export function useAgentChatInternal(options) {
     const buildAgentHeaders = useCallback(async () => {
         const headers = { 'Content-Type': 'application/json' };
         const token = getAuthToken ? await getAuthToken() : authToken;
+        console.log('[buildAgentHeaders] Building headers for agent request: ', token ? 'with auth' : 'no auth');
         if (token) {
             headers['Authorization'] = token.startsWith('Bearer ') ? token : `Bearer ${token}`;
         }
@@ -186,7 +215,8 @@ export function useAgentChatInternal(options) {
         }
         return headers;
     }, [authToken, getAuthToken, getAgentHeaders]);
-    const handleError = useCallback((errorMessage) => {
+    const handleError = useCallback((errorInput) => {
+        const errorMessage = normalizeErrorMessage(errorInput);
         setError(errorMessage);
         onError?.(errorMessage);
     }, [onError]);
@@ -255,7 +285,9 @@ export function useAgentChatInternal(options) {
         const toolApiHeaders = {};
         if (!disableToolApiAuthHeader) {
             const token = getAuthToken ? await getAuthToken() : authToken;
-            if (token) {
+            // Tool APIはcredentials: 'include'でCookie送信されるため、
+            // 非JWT（例: ANON_KEY）はAuthorizationヘッダーに載せずCookie認証を優先する。
+            if (token && isLikelyJwtToken(token)) {
                 toolApiHeaders['Authorization'] = token.startsWith('Bearer ') ? token : `Bearer ${token}`;
             }
         }
@@ -297,7 +329,7 @@ export function useAgentChatInternal(options) {
                         toolCall: tc,
                         status: isError ? 'error' : 'completed',
                         result: result.output,
-                        error: isError ? String(result.output) : undefined,
+                        error: isError ? normalizeErrorMessage(result.output) : undefined,
                     });
                     return newMap;
                 });
@@ -403,8 +435,7 @@ export function useAgentChatInternal(options) {
         catch (e) {
             if (e instanceof Error && e.name === 'AbortError')
                 return;
-            const errorMessage = e instanceof Error ? e.message : 'Unknown error';
-            handleError(errorMessage);
+            handleError(e);
         }
         finally {
             setIsLoading(false);
@@ -433,7 +464,7 @@ export function useAgentChatInternal(options) {
             })) || []);
         }
         catch (e) {
-            setError(e instanceof Error ? e.message : 'Unknown error');
+            setError(normalizeErrorMessage(e));
         }
         finally {
             setIsLoading(false);

package/dist/styles/globals.css

@@ -132,23 +132,25 @@
 
 /* Custom animations for agent loading states */
 @layer utilities {
-  @keyframes shimmer {
-    0% {
-      background-position: 200% 0;
-    }
+  @keyframes dot-fade {
+    0%,
+    80%,
     100% {
-      background-position: -200% 0;
+      opacity: 0.35;
+    }
+    40% {
+      opacity: 1;
     }
   }
 
-  .animate-shimmer {
-    animation: shimmer 2s ease-in-out infinite;
+  .animate-dot-fade {
+    animation: dot-fade 1.2s ease-in-out infinite;
   }
 }
 
 /* Respect reduced motion preferences */
 @media (prefers-reduced-motion: reduce) {
-  .animate-shimmer,
+  .animate-dot-fade,
   .animate-ping,
   .animate-pulse,
   .animate-bounce {

package/package.json

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