vibepulse 0.2.2 → 0.3.1-beta

package/.next/standalone/src/components/SessionCard.tsx

@@ -17,6 +17,16 @@ interface SessionCardProps {
     card: KanbanCard;
 }
 
+const RECENT_IDLE_CHILD_VISIBILITY_WINDOW_MS = 60_000;
+
+function shouldShowChildSession(child: { realTimeStatus: string; waitingForUser: boolean; updatedAt: number }): boolean {
+    if (child.realTimeStatus !== 'idle' || child.waitingForUser) {
+        return true;
+    }
+
+    return Date.now() - child.updatedAt <= RECENT_IDLE_CHILD_VISIBILITY_WINDOW_MS;
+}
+
 function formatRelativeTime(timestamp: number): string {
     const diffMs = Date.now() - timestamp;
     const diffMins = Math.floor(diffMs / (1000 * 60));
@@ -30,13 +40,16 @@ function formatRelativeTime(timestamp: number): string {
 }
 
 // Status indicator component
-function StatusIndicator({ status, waitingForUser }: { status: string; waitingForUser: boolean }) {
+function StatusIndicator({ status, waitingForUser, provider }: { status: string; waitingForUser: boolean; provider?: string }) {
+    const isClaudeProvider = provider === 'claude-code';
+    const shapeClass = isClaudeProvider ? 'rotate-45 rounded-[1px]' : 'rounded-full';
+    const dotSizeClass = isClaudeProvider ? 'h-[9px] w-[9px]' : 'h-2.5 w-2.5';
     if (waitingForUser) {
         return (
             <div className="flex items-center gap-1.5 text-amber-600 dark:text-amber-400">
-                <span className="relative flex h-2.5 w-2.5">
-                    <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-amber-400 opacity-75"></span>
-                    <span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-amber-500"></span>
+                <span className={`relative flex ${dotSizeClass}`}>
+                    <span className={`animate-ping absolute inline-flex h-full w-full ${shapeClass} bg-amber-400 opacity-75`} title="Waiting"></span>
+                    <span className={`relative inline-flex ${dotSizeClass} ${shapeClass} bg-amber-500`}></span>
                 </span>
                 <span className="text-xs font-medium">Waiting</span>
             </div>
@@ -46,9 +59,9 @@ function StatusIndicator({ status, waitingForUser }: { status: string; waitingFo
         case 'busy':
             return (
                 <div className="flex items-center gap-1.5 text-emerald-600 dark:text-emerald-400">
-                    <span className="relative flex h-2.5 w-2.5">
-                        <span className="animate-pulse absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
-                        <span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-emerald-500"></span>
+                    <span className={`relative flex ${dotSizeClass}`}>
+                        <span className={`animate-pulse absolute inline-flex h-full w-full ${shapeClass} bg-emerald-400 opacity-75`} title="Running"></span>
+                        <span className={`relative inline-flex ${dotSizeClass} ${shapeClass} bg-emerald-500`}></span>
                     </span>
                     <span className="text-xs font-medium">Running</span>
                 </div>
@@ -56,9 +69,9 @@ function StatusIndicator({ status, waitingForUser }: { status: string; waitingFo
         case 'retry':
             return (
                 <div className="flex items-center gap-1.5 text-red-600 dark:text-red-400">
-                    <span className="relative flex h-2.5 w-2.5">
-                        <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
-                        <span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-red-500"></span>
+                    <span className={`relative flex ${dotSizeClass}`}>
+                        <span className={`animate-ping absolute inline-flex h-full w-full ${shapeClass} bg-red-400 opacity-75`} title="Retrying"></span>
+                        <span className={`relative inline-flex ${dotSizeClass} ${shapeClass} bg-red-500`}></span>
                     </span>
                     <span className="text-xs font-medium">Retrying</span>
                 </div>
@@ -67,7 +80,7 @@ function StatusIndicator({ status, waitingForUser }: { status: string; waitingFo
         default:
             return (
                 <div className="flex items-center gap-1.5 text-gray-500 dark:text-gray-400">
-                    <span className="inline-flex rounded-full h-2.5 w-2.5 bg-gray-400"></span>
+                    <span className={`inline-flex ${dotSizeClass} bg-gray-400 ${shapeClass}`} title="Idle"></span>
                     <span className="text-xs font-medium">Idle</span>
                 </div>
             );
@@ -80,7 +93,7 @@ export function SessionCard({ card }: SessionCardProps) {
     const [remoteSshHost, setRemoteSshHost] = useState('');
     const [actionOpen, setActionOpen] = useState(false);
     const [actionError, setActionError] = useState<string | null>(null);
-    const [pendingAction, setPendingAction] = useState<'open' | 'archive' | 'delete' | null>(null);
+    const [pendingAction, setPendingAction] = useState<'open' | 'archive' | 'restore' | 'delete' | null>(null);
     const actionMenuRef = useRef<HTMLDivElement>(null);
     const { data: config, isLoading: isConfigLoading, isError: isConfigError } = useQuery<ConfigResponse>({
         queryKey: ['opencode-config'],
@@ -108,9 +121,11 @@ export function SessionCard({ card }: SessionCardProps) {
         ? 'Opening…'
         : pendingAction === 'archive'
             ? 'Archiving…'
-            : pendingAction === 'delete'
-                ? 'Deleting…'
-                : null;
+            : pendingAction === 'restore'
+                ? 'Restoring…'
+                : pendingAction === 'delete'
+                    ? 'Deleting…'
+                    : null;
 
     useEffect(() => {
         const storedTool = window.localStorage.getItem('vibepulse:open-tool');
@@ -181,12 +196,24 @@ export function SessionCard({ card }: SessionCardProps) {
             return;
         }
 
-        const useRemoteSshTarget = isRemoteCard && openEditorTargetMode === 'hub' && openTool === 'vscode';
+        const canOpenEditor = card.capabilities ? card.capabilities.openEditor : true;
+        if (isRemoteCard && openEditorTargetMode === 'remote' && !canOpenEditor && openTool === 'antigravity') {
+            setActionError('Antigravity cannot open remote sessions without remote editor support. Use VS Code.');
+            return;
+        }
+
+        const useRemoteSshTarget =
+            isRemoteCard
+            && openTool === 'vscode'
+            && (
+                openEditorTargetMode === 'hub'
+                || (openEditorTargetMode === 'remote' && !canOpenEditor)
+            );
         const target = buildEditorUri(openTool === 'antigravity' ? 'antigravity' : 'vscode', card.directory, {
             remoteSshHost: useRemoteSshTarget ? remoteSshHost : null,
         });
 
-        if (isRemoteCard && openEditorTargetMode === 'remote') {
+        if (isRemoteCard && openEditorTargetMode === 'remote' && canOpenEditor) {
             setPendingAction('open');
             try {
                 const response = await fetch(`/api/sessions/${card.id}/open-editor`, {
@@ -216,6 +243,9 @@ export function SessionCard({ card }: SessionCardProps) {
             return;
         }
 
+        const canArchive = card.capabilities ? card.capabilities.archive : !card.readOnly;
+        if (!canArchive) return;
+
         setActionError(null);
         setPendingAction('archive');
         try {
@@ -233,11 +263,39 @@ export function SessionCard({ card }: SessionCardProps) {
         }
     };
 
+    const handleRestore = async () => {
+        if (isActionPending) {
+            return;
+        }
+
+        const canArchive = card.capabilities ? card.capabilities.archive : !card.readOnly;
+        if (!canArchive) return;
+
+        setActionError(null);
+        setPendingAction('restore');
+        try {
+            const response = await fetch(`/api/sessions/${card.id}/restore`, { method: 'POST' });
+            if (!response.ok) {
+                const errorBody = await response.json().catch(() => null);
+                setActionError(mapSessionActionError(errorBody, 'Failed to restore session'));
+            }
+        } catch {
+            setActionError('Remote node is offline or unreachable.');
+        } finally {
+            setPendingAction(null);
+            setActionOpen(false);
+            await queryClient.invalidateQueries({ queryKey: ['sessions'] });
+        }
+    };
+
     const handleDelete = async () => {
         if (isActionPending) {
             return;
         }
 
+        const canDelete = card.capabilities ? card.capabilities.delete : !card.readOnly;
+        if (!canDelete) return;
+
         setActionError(null);
         setPendingAction('delete');
         try {
@@ -255,6 +313,10 @@ export function SessionCard({ card }: SessionCardProps) {
         }
     };
 
+    const canArchive = card.capabilities ? card.capabilities.archive : !card.readOnly;
+    const canDelete = card.capabilities ? card.capabilities.delete : !card.readOnly;
+    const showActionsMenu = canArchive || canDelete;
+
     return (
         <article
             className="relative w-full text-left p-4 bg-white dark:bg-zinc-800 rounded-xl shadow-sm border border-gray-200 dark:border-zinc-700 hover:shadow-lg hover:border-gray-300 dark:hover:border-zinc-600 transition-all duration-200"
@@ -269,7 +331,7 @@ export function SessionCard({ card }: SessionCardProps) {
             >
                 {/* Top: Status indicator */}
                 <div className="flex items-center justify-between mb-2">
-                    <StatusIndicator status={card.opencodeStatus} waitingForUser={card.waitingForUser} />
+                    <StatusIndicator status={card.opencodeStatus} waitingForUser={card.waitingForUser} provider={card.provider} />
                 </div>
                 <h3
                     className="font-semibold text-gray-900 dark:text-gray-100 text-base line-clamp-2"
@@ -278,18 +340,17 @@ export function SessionCard({ card }: SessionCardProps) {
                     {card.title || 'Untitled Session'}
                 </h3>
 
-                {card.agents.length > 0 && (
-                    <div className="flex flex-wrap gap-1 mt-2">
-                        {card.agents.map((agent) => (
-                            <span
-                                key={agent}
-                                className="px-2 py-0.5 bg-indigo-50 text-indigo-700 text-sm rounded-full font-medium"
-                            >
-                                {agent}
-                            </span>
-                        ))}
-                    </div>
-                )}
+                <div className="flex flex-wrap gap-1 mt-2">
+                    {card.agents.map((agent) => (
+                        <span
+                            key={agent}
+                            className="px-2 py-0.5 bg-indigo-50 text-indigo-700 dark:bg-indigo-900/20 dark:text-indigo-400 text-xs rounded-full font-medium"
+                        >
+                            {agent}
+                        </span>
+                    ))}
+                </div>
+
                 {card.projectName && (
                   <div className="mt-2 flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
                     <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" role="img" aria-hidden="true">
@@ -338,7 +399,33 @@ export function SessionCard({ card }: SessionCardProps) {
                         </div>
                     </div>
                 )}
+                {(() => {
+                    const visibleChildren = (card.children || []).filter(
+                        shouldShowChildSession
+                    );
+                    if (visibleChildren.length === 0) return null;
+                    return (
+                        <div className="mt-3 bg-gray-50/50 dark:bg-zinc-900/30 -mx-4 px-4 py-2 border-y border-gray-100 dark:border-zinc-700/50">
+                            {visibleChildren.map((child, i) => (
+                                <div
+                                    key={child.id}
+                                    className="flex items-center gap-2 pl-2 pr-3 py-1.5"
+                                    title={child.debugReason ? `Reason: ${child.debugReason}` : 'Subagent'}
+                                >
+                                    <span className="text-gray-300 dark:text-zinc-600 text-xs flex-shrink-0 font-mono leading-none">
+                                        {i === visibleChildren.length - 1 ? '└' : '├'}
+                                    </span>
+                                    <StatusIndicator status={child.realTimeStatus} waitingForUser={child.waitingForUser} provider={card.provider} />
+                                    <span className="text-xs text-gray-500 dark:text-gray-400 truncate flex-1 min-w-0">
+                                        {child.title || 'Subagent'}
+                                    </span>
+                                </div>
+                            ))}
+                        </div>
+                    );
+                })()}
                 {isConfigPendingForRemoteOpen ? (
+
                     <div className="mt-3 rounded-md border border-blue-200 bg-blue-50 px-2 py-1 text-xs text-blue-700 dark:border-blue-900/40 dark:bg-blue-900/20 dark:text-blue-300">
                         Loading open settings…
                     </div>
@@ -382,52 +469,71 @@ export function SessionCard({ card }: SessionCardProps) {
                         SSH: {remoteSshHost}
                     </span>
                 )}
-                <div className="relative" ref={actionMenuRef}>
-                    <button
-                        type="button"
-                        className="inline-flex items-center justify-center w-6 h-6 rounded-md text-gray-400 hover:text-gray-700 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50 dark:text-gray-500 dark:hover:text-gray-200 dark:hover:bg-zinc-700"
-                        onClick={(e) => {
-                            e.stopPropagation();
-                            if (!isActionPending) {
-                                setActionOpen((prev) => !prev);
-                            }
-                        }}
-                        onDoubleClick={(e) => e.stopPropagation()}
-                        aria-label="Actions"
-                        title="Actions"
-                        disabled={isActionPending}
-                    >
-                        <svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor" role="img" aria-hidden="true">
-                            <path d="M5 10a2 2 0 110 4 2 2 0 010-4zm7 0a2 2 0 110 4 2 2 0 010-4zm7 0a2 2 0 110 4 2 2 0 010-4z" />
-                        </svg>
-                    </button>
-                    {actionOpen && (
-                        <div className="absolute right-0 mt-1 w-36 rounded-md border border-gray-200 bg-white shadow-lg dark:border-zinc-700 dark:bg-zinc-900 z-10">
-                            <button
-                                type="button"
-                                className="w-full text-left px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50 dark:text-gray-200 dark:hover:bg-zinc-800"
-                                onClick={(e) => {
-                                    e.stopPropagation();
-                                    handleArchive();
-                                }}
-                                disabled={isActionPending}
-                            >
-                                Archive
-                            </button>
-                            <button
-                                type="button"
-                                className="w-full text-left px-3 py-2 text-sm text-red-600 hover:bg-red-50 disabled:cursor-not-allowed disabled:opacity-50 dark:text-red-400 dark:hover:bg-red-900/20"
-                                onClick={(e) => {
-                                    e.stopPropagation();
-                                    handleDelete();
-                                }}
-                                disabled={isActionPending}
-                            >
-                                Delete
-                            </button>
-                        </div>
-                    )}
-                </div>
+                {showActionsMenu && (
+                    <div className="relative" ref={actionMenuRef}>
+                        <button
+                            type="button"
+                            className="inline-flex items-center justify-center w-6 h-6 rounded-md text-gray-400 hover:text-gray-700 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50 dark:text-gray-500 dark:hover:text-gray-200 dark:hover:bg-zinc-700"
+                            onClick={(e) => {
+                                e.stopPropagation();
+                                if (!isActionPending) {
+                                    setActionOpen((prev) => !prev);
+                                }
+                            }}
+                            onDoubleClick={(e) => e.stopPropagation()}
+                            aria-label="Actions"
+                            title="Actions"
+                            disabled={isActionPending}
+                        >
+                            <svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor" role="img" aria-hidden="true">
+                                <path d="M5 10a2 2 0 110 4 2 2 0 010-4zm7 0a2 2 0 110 4 2 2 0 010-4zm7 0a2 2 0 110 4 2 2 0 010-4z" />
+                            </svg>
+                        </button>
+                        {actionOpen && (
+                            <div className="absolute right-0 mt-1 w-36 rounded-md border border-gray-200 bg-white shadow-lg dark:border-zinc-700 dark:bg-zinc-900 z-10">
+                                {(card.status !== 'done' && canArchive) && (
+                                    <button
+                                        type="button"
+                                        className="w-full text-left px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50 dark:text-gray-200 dark:hover:bg-zinc-800"
+                                        onClick={(e) => {
+                                            e.stopPropagation();
+                                            handleArchive();
+                                        }}
+                                        disabled={isActionPending}
+                                    >
+                                        Archive
+                                    </button>
+                                )}
+                                {(card.status === 'done' && canArchive) && (
+                                    <button
+                                        type="button"
+                                        className="w-full text-left px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50 dark:text-gray-200 dark:hover:bg-zinc-800"
+                                        onClick={(e) => {
+                                            e.stopPropagation();
+                                            handleRestore();
+                                        }}
+                                        disabled={isActionPending}
+                                    >
+                                        Restore
+                                    </button>
+                                )}
+                                {canDelete && (
+                                    <button
+                                        type="button"
+                                        className="w-full text-left px-3 py-2 text-sm text-red-600 hover:bg-red-50 disabled:cursor-not-allowed disabled:opacity-50 dark:text-red-400 dark:hover:bg-red-900/20"
+                                        onClick={(e) => {
+                                            e.stopPropagation();
+                                            handleDelete();
+                                        }}
+                                        disabled={isActionPending}
+                                    >
+                                        Delete
+                                    </button>
+                                )}
+                            </div>
+                        )}
+                    </div>
+                )}
             </div>
         </article>
     );

package/.next/standalone/src/components/opencode-config/AgentConfigForm.test.tsx

@@ -1,4 +1,4 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { describe, it, expect, vi, beforeEach, beforeAll, afterAll } from 'vitest';
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { AgentConfigForm } from './AgentConfigForm';
@@ -15,6 +15,16 @@ function jsonResponse(data: unknown): Response {
   } as Response;
 }
 
+beforeAll(() => {
+  window.HTMLElement.prototype.hasPointerCapture = vi.fn();
+  window.HTMLElement.prototype.scrollIntoView = vi.fn();
+});
+
+afterAll(() => {
+  delete (window.HTMLElement.prototype as any).hasPointerCapture;
+  delete (window.HTMLElement.prototype as any).scrollIntoView;
+});
+
 describe('AgentConfigForm - echo bug fix', () => {
   let queryClient: QueryClient;
 
@@ -69,6 +79,136 @@ describe('AgentConfigForm - echo bug fix', () => {
     });
   });
 
+  it('preserves rich fallback_models structure on submit and updates reasoningEffort', async () => {
+    const user = userEvent.setup();
+    
+    mockFetch.mockImplementation(async (url: RequestInfo | URL, init?: RequestInit) => {
+      if (url === '/api/opencode-config' && (!init?.method || init.method === 'GET')) {
+        return jsonResponse({
+          agents: { 
+            sisyphus: { 
+              model: 'openai/gpt-4o', 
+              temperature: 0.5,
+              fallback_models: [{ model: 'claude-3-5-sonnet-20240620', maxTokens: 4000 }]
+            } 
+          },
+          categories: {},
+        });
+      }
+      if (url === '/api/opencode-models') {
+        return jsonResponse({ models: ['openai/gpt-4o'], source: 'test' });
+      }
+      if (url === '/api/opencode-config' && init?.method === 'POST') {
+        return jsonResponse({ success: true });
+      }
+      return jsonResponse({});
+    });
+
+    render(
+      <QueryClientProvider client={queryClient}>
+        <AgentConfigForm agentName="sisyphus" />
+      </QueryClientProvider>
+    );
+
+    await waitFor(() => {
+      const fallbackInput = screen.getByLabelText(/fallback models \(json\)/i);
+      expect(fallbackInput).toHaveValue(JSON.stringify([{ model: 'claude-3-5-sonnet-20240620', maxTokens: 4000 }], null, 2));
+    });
+
+    const reasoningSelector = screen.getByLabelText(/reasoning effort/i);
+    await user.selectOptions(reasoningSelector, 'max');
+
+    const modelTrigger = screen.getAllByRole('combobox')[0];
+    await user.click(modelTrigger);
+    await waitFor(() => {
+      expect(screen.getByRole('option', { name: 'gpt-4o' })).toBeInTheDocument();
+    });
+    await user.click(screen.getByRole('option', { name: 'gpt-4o' }));
+
+    await user.click(screen.getByRole('button', { name: /save changes/i }));
+
+    await waitFor(() => {
+      const postCall = mockFetch.mock.calls.find((call) => call[0] === '/api/opencode-config' && call[1]?.method === 'POST');
+      expect(postCall).toBeTruthy();
+    });
+
+    const postCall = mockFetch.mock.calls.find((call) => call[0] === '/api/opencode-config' && call[1]?.method === 'POST');
+    const requestBody = JSON.parse(String(postCall?.[1]?.body));
+    expect(requestBody).toEqual({
+      agents: {
+        sisyphus: {
+          model: 'openai/gpt-4o',
+          temperature: 0.5,
+          top_p: 1,
+          variant: '',
+          prompt_append: '',
+          reasoningEffort: 'max',
+          fallback_models: [{ model: 'claude-3-5-sonnet-20240620', maxTokens: 4000 }],
+        }
+      }
+    });
+  });
+
+  it('sends explicit null when fallback_models is cleared and reasoningEffort is not set', async () => {
+    const user = userEvent.setup();
+    
+    mockFetch.mockImplementation(async (url: RequestInfo | URL, init?: RequestInit) => {
+      if (url === '/api/opencode-config' && (!init?.method || init.method === 'GET')) {
+        return jsonResponse({
+          agents: { 
+            sisyphus: { 
+              model: 'openai/gpt-4o', 
+              temperature: 0.5,
+              reasoningEffort: 'max',
+              fallback_models: [{ model: 'claude-3-5-sonnet-20240620', maxTokens: 4000 }]
+            } 
+          },
+          categories: {},
+        });
+      }
+      if (url === '/api/opencode-models') {
+        return jsonResponse({ models: ['openai/gpt-4o'], source: 'test' });
+      }
+      if (url === '/api/opencode-config' && init?.method === 'POST') {
+        return jsonResponse({ success: true });
+      }
+      return jsonResponse({});
+    });
+
+    render(
+      <QueryClientProvider client={queryClient}>
+        <AgentConfigForm agentName="sisyphus" />
+      </QueryClientProvider>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByLabelText(/fallback models \(json\)/i)).toHaveValue(JSON.stringify([{ model: 'claude-3-5-sonnet-20240620', maxTokens: 4000 }], null, 2));
+    });
+    const fallbackInput = screen.getByLabelText(/fallback models \(json\)/i);
+    await user.clear(fallbackInput);
+
+    const reasoningSelector = screen.getByLabelText(/reasoning effort/i);
+    await user.selectOptions(reasoningSelector, '');
+
+    const modelTrigger = screen.getAllByRole('combobox')[0];
+    await user.click(modelTrigger);
+    await waitFor(() => {
+      expect(screen.getByRole('option', { name: 'gpt-4o' })).toBeInTheDocument();
+    });
+    await user.click(screen.getByRole('option', { name: 'gpt-4o' }));
+
+    await user.click(screen.getByRole('button', { name: /save changes/i }));
+
+    await waitFor(() => {
+      const postCall = mockFetch.mock.calls.find((call) => call[0] === '/api/opencode-config' && call[1]?.method === 'POST');
+      expect(postCall).toBeTruthy();
+    });
+
+    const postCall = mockFetch.mock.calls.find((call) => call[0] === '/api/opencode-config' && call[1]?.method === 'POST');
+    const requestBody = JSON.parse(String(postCall?.[1]?.body));
+    expect(requestBody.agents.sisyphus.fallback_models).toBeNull();
+    expect(requestBody.agents.sisyphus.reasoningEffort).toBeNull();
+  });
   it('shows the upstream hephaestus fallback chain when no model is configured', async () => {
     mockFetch
       .mockResolvedValueOnce(