vibepulse 0.2.2 → 0.3.0-beta.0

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

@@ -196,7 +196,7 @@ describe('SessionCard', () => {
     expect((fetchMock.mock.calls as unknown as Array<[RequestInfo | URL, RequestInit | undefined]>).filter(([, init]) => init?.method === 'POST')).toHaveLength(0);
   });
 
-  it('calls the hub open-editor route for remote mode remote sessions', async () => {
+  it('calls the hub open-editor route for remote mode sessions that support openEditor', async () => {
     const queryClient = new QueryClient({
       defaultOptions: {
         queries: { retry: false },
@@ -213,7 +213,14 @@ describe('SessionCard', () => {
 
     render(
       <QueryClientProvider client={queryClient}>
-        <SessionCard card={createCard()} />
+        <SessionCard card={createCard({
+          capabilities: {
+            openProject: true,
+            openEditor: true,
+            archive: true,
+            delete: true,
+          },
+        })} />
       </QueryClientProvider>
     );
 
@@ -234,6 +241,84 @@ describe('SessionCard', () => {
     expect(window.location.assign).not.toHaveBeenCalled();
   });
 
+  it('falls back to file open when remote mode is selected but openEditor capability is unsupported', async () => {
+    const queryClient = new QueryClient({
+      defaultOptions: {
+        queries: { retry: false },
+      },
+    });
+    queryClient.setQueryData(['opencode-config'], { vibepulse: { openEditorTargetMode: 'remote' } });
+    const fetchMock = vi.fn(async () => new Response(JSON.stringify({ success: true }), {
+      status: 200,
+      headers: { 'Content-Type': 'application/json' },
+    }));
+    Object.defineProperty(globalThis, 'fetch', { value: fetchMock, configurable: true });
+
+    render(
+      <QueryClientProvider client={queryClient}>
+        <SessionCard card={createCard({
+          provider: 'claude-code',
+          readOnly: true,
+          capabilities: {
+            openProject: true,
+            openEditor: false,
+            archive: false,
+            delete: false,
+          },
+        })} />
+      </QueryClientProvider>
+    );
+
+    await screen.findByText('Remote Session');
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: /remote session/i })).not.toBeDisabled();
+    });
+    fireEvent.doubleClick(screen.getByRole('button', { name: /remote session/i }));
+
+    expect(window.location.assign).toHaveBeenCalledWith('vscode://vscode-remote/ssh-remote+node-1.test/tmp/demo');
+    expect((fetchMock.mock.calls as unknown as Array<[RequestInfo | URL, RequestInit | undefined]>).filter(([, init]) => init?.method === 'POST')).toHaveLength(0);
+  });
+
+  it('shows actionable error when Antigravity is selected for remote fallback without openEditor support', async () => {
+    window.localStorage.setItem('vibepulse:open-tool', 'antigravity');
+    const queryClient = new QueryClient({
+      defaultOptions: {
+        queries: { retry: false },
+      },
+    });
+    queryClient.setQueryData(['opencode-config'], { vibepulse: { openEditorTargetMode: 'remote' } });
+    const fetchMock = vi.fn(async () => new Response(JSON.stringify({ success: true }), {
+      status: 200,
+      headers: { 'Content-Type': 'application/json' },
+    }));
+    Object.defineProperty(globalThis, 'fetch', { value: fetchMock, configurable: true });
+
+    render(
+      <QueryClientProvider client={queryClient}>
+        <SessionCard card={createCard({
+          provider: 'claude-code',
+          readOnly: true,
+          capabilities: {
+            openProject: true,
+            openEditor: false,
+            archive: false,
+            delete: false,
+          },
+        })} />
+      </QueryClientProvider>
+    );
+
+    await screen.findByText('Remote Session');
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: /remote session/i })).not.toBeDisabled();
+    });
+    fireEvent.doubleClick(screen.getByRole('button', { name: /remote session/i }));
+
+    expect(await screen.findByText('Antigravity cannot open remote sessions without remote editor support. Use VS Code.')).toBeTruthy();
+    expect(window.location.assign).not.toHaveBeenCalled();
+    expect((fetchMock.mock.calls as unknown as Array<[RequestInfo | URL, RequestInit | undefined]>).filter(([, init]) => init?.method === 'POST')).toHaveLength(0);
+  });
+
   it('shows an explicit loading state while a remote open request is in flight', async () => {
     const queryClient = new QueryClient({
       defaultOptions: {
@@ -515,6 +600,91 @@ describe('SessionCard', () => {
     expect(await screen.findByText('Session was not found.')).toBeTruthy();
   });
 
+  it('respects capabilities for action visibility over readOnly alone', async () => {
+    const capabilityCard = createCard({
+      readOnly: true,
+      capabilities: {
+        openProject: true,
+        openEditor: true,
+        archive: true,
+        delete: false,
+      },
+    });
+
+    const user = userEvent.setup();
+    renderWithProviders(<SessionCard card={capabilityCard} />);
+
+    await screen.findByText('Remote Session');
+
+    await user.click(screen.getByTitle('Actions'));
+
+    expect(screen.getByRole('button', { name: 'Archive' })).toBeTruthy();
+    expect(screen.queryByRole('button', { name: 'Delete' })).toBeNull();
+  });
+
+  it('shows no actions menu if both archive and delete capabilities are false', async () => {
+    const capabilityCard = createCard({
+      capabilities: {
+        openProject: true,
+        openEditor: true,
+        archive: false,
+        delete: false,
+      },
+    });
+
+    renderWithProviders(<SessionCard card={capabilityCard} />);
+
+    await screen.findByText('Remote Session');
+
+    expect(screen.queryByTitle('Actions')).toBeNull();
+  });
+
+  it('shows archive and delete actions for Claude sessions when capabilities allow them', async () => {
+    renderWithProviders(<SessionCard card={createCard({
+      provider: 'claude-code',
+      readOnly: true,
+      id: 'local:claude~550e8400-e29b-41d4-a716-446655440000',
+      rawSessionId: '550e8400-e29b-41d4-a716-446655440000',
+      capabilities: {
+        openProject: true,
+        openEditor: false,
+        archive: true,
+        delete: true,
+      },
+    })} />);
+
+    expect(screen.getByTitle('Actions')).toBeTruthy();
+  });
+
+  it('shows restore for archived Claude sessions', async () => {
+    const fetchMock = vi.fn(async () => new Response(JSON.stringify({ success: true }), {
+      status: 200,
+      headers: { 'Content-Type': 'application/json' },
+    }));
+    Object.defineProperty(globalThis, 'fetch', { value: fetchMock, configurable: true });
+
+    renderWithProviders(<SessionCard card={createCard({
+      provider: 'claude-code',
+      readOnly: true,
+      status: 'done',
+      id: 'local:claude~550e8400-e29b-41d4-a716-446655440000',
+      rawSessionId: '550e8400-e29b-41d4-a716-446655440000',
+      capabilities: {
+        openProject: true,
+        openEditor: false,
+        archive: true,
+        delete: true,
+      },
+    })} />);
+
+    fireEvent.click(screen.getByTitle('Actions'));
+    fireEvent.click(screen.getByText('Restore'));
+
+    await waitFor(() => {
+      expect(fetchMock).toHaveBeenCalledWith('/api/sessions/local:claude~550e8400-e29b-41d4-a716-446655440000/restore', expect.objectContaining({ method: 'POST' }));
+    });
+  });
+
   it('shows a loading-settings state before remote open mode is hydrated', async () => {
     const fetchMock = vi.fn(async () => new Promise<Response>(() => {}));
     Object.defineProperty(globalThis, 'fetch', { value: fetchMock, configurable: true });
@@ -563,4 +733,85 @@ describe('SessionCard', () => {
 
     expect(await screen.findByText('Remote node is offline or unreachable.')).toBeTruthy();
   });
+
+  it('shows recently-updated idle children so delegated subagents remain visible', () => {
+    const now = Date.now();
+    renderWithProviders(
+      <SessionCard
+        card={createCard({
+          hostId: 'local',
+          hostLabel: 'Local',
+          hostKind: 'local',
+          hostBaseUrl: undefined,
+          children: [
+            {
+              id: 'child-recent-idle',
+              title: 'Recent Idle Child',
+              realTimeStatus: 'idle',
+              waitingForUser: false,
+              createdAt: now - 120_000,
+              updatedAt: now - 20_000,
+            },
+          ],
+        })}
+      />
+    );
+
+    expect(screen.getByText('Recent Idle Child')).toBeTruthy();
+  });
+
+  it('hides stale idle children once they are older than the recent visibility window', () => {
+    const now = Date.now();
+    renderWithProviders(
+      <SessionCard
+        card={createCard({
+          hostId: 'local',
+          hostLabel: 'Local',
+          hostKind: 'local',
+          hostBaseUrl: undefined,
+          children: [
+            {
+              id: 'child-stale-idle',
+              title: 'Stale Idle Child',
+              realTimeStatus: 'idle',
+              waitingForUser: false,
+              createdAt: now - 180_000,
+              updatedAt: now - 120_000,
+            },
+          ],
+        })}
+      />
+    );
+
+    expect(screen.queryByText('Stale Idle Child')).toBeNull();
+  });
+});
+describe('SessionCard Provider Visuals', () => {
+  it('does not show a provider marker for OpenCode sessions', () => {
+    renderWithProviders(<SessionCard card={createCard({ provider: 'opencode' })} />);
+    expect(screen.queryByTitle('Provider: OpenCode')).toBeNull();
+  });
+
+  it('renders Claude status as a diamond instead of showing a separate provider marker', () => {
+    renderWithProviders(<SessionCard card={createCard({ provider: 'claude-code' })} />);
+    expect(screen.getByTitle('Idle').className).toContain('rotate-45');
+    expect(screen.getByTitle('Idle').className).toContain('h-[9px]');
+  });
+
+  it('does not render transcript affordances for Claude cards even when transcript metadata exists', () => {
+    const claudeCardWithTranscript: KanbanCard & { hasTranscript: boolean } = {
+      ...createCard({
+        provider: 'claude-code',
+        readOnly: true,
+        rawSessionId: '550e8400-e29b-41d4-a716-446655440000',
+        id: 'local:claude~550e8400-e29b-41d4-a716-446655440000',
+      }),
+      hasTranscript: true,
+    };
+
+    renderWithProviders(<SessionCard card={claudeCardWithTranscript} />);
+
+    expect(screen.queryByRole('button', { name: /transcript/i })).toBeNull();
+    expect(screen.queryByText(/transcript/i)).toBeNull();
+  });
 });

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>
     );