vibepulse 0.2.2 → 0.3.0-beta.0

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

@@ -22,6 +22,16 @@ interface ProjectCardProps {
     multipleHostsEnabled?: boolean;
 }
 
+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));
@@ -38,36 +48,39 @@ function buildTooltipTitle(lines: string[], debugReason?: string): string {
     return debugReason ? [...lines, `Reason: ${debugReason}`].join('\n') : lines.join('\n');
 }
 
-function StatusDot({ status, waitingForUser }: { status: string; waitingForUser: boolean }) {
+function StatusDot({ 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-[7px] w-[7px]' : 'h-2 w-2';
     if (waitingForUser) {
         return (
-            <span className="relative flex h-2 w-2 flex-shrink-0" title="Waiting">
-                <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 w-2 bg-amber-500"></span>
+            <span className={`relative flex ${dotSizeClass} flex-shrink-0`} title="Waiting">
+                <span className={`animate-ping absolute inline-flex h-full w-full ${shapeClass} bg-amber-400 opacity-75`}></span>
+                <span className={`relative inline-flex ${dotSizeClass} ${shapeClass} bg-amber-500`}></span>
             </span>
         );
     }
     switch (status) {
         case 'busy':
             return (
-                <span className="relative flex h-2 w-2 flex-shrink-0" title="Running">
-                    <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 w-2 bg-emerald-500"></span>
+                <span className={`relative flex ${dotSizeClass} flex-shrink-0`} title="Running">
+                    <span className={`animate-pulse absolute inline-flex h-full w-full ${shapeClass} bg-emerald-400 opacity-75`}></span>
+                    <span className={`relative inline-flex ${dotSizeClass} ${shapeClass} bg-emerald-500`}></span>
                 </span>
             );
         case 'retry':
             return (
-                <span className="relative flex h-2 w-2 flex-shrink-0" title="Retrying">
-                    <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 w-2 bg-red-500"></span>
+                <span className={`relative flex ${dotSizeClass} flex-shrink-0`} title="Retrying">
+                    <span className={`animate-ping absolute inline-flex h-full w-full ${shapeClass} bg-red-400 opacity-75`}></span>
+                    <span className={`relative inline-flex ${dotSizeClass} ${shapeClass} bg-red-500`}></span>
                 </span>
             );
         default:
-            return <span className="inline-flex rounded-full h-2 w-2 bg-gray-400 flex-shrink-0" title="Idle"></span>;
+            return <span className={`inline-flex ${dotSizeClass} bg-gray-400 flex-shrink-0 ${shapeClass}`} title="Idle"></span>;
     }
 }
 
-function HeaderActionMenu({ cards, readOnly = false, isActionPending, onActionError, onPendingActionChange }: { cards: KanbanCard[]; readOnly?: boolean; isActionPending: boolean; onActionError: (message: string | null) => void; onPendingActionChange: (value: 'open' | 'archive' | 'delete' | null) => void }) {
+function HeaderActionMenu({ cards, isActionPending, onActionError, onPendingActionChange, readOnlyMode }: { cards: KanbanCard[]; isActionPending: boolean; onActionError: (message: string | null) => void; onPendingActionChange: (value: 'open' | 'archive' | 'restore' | 'delete' | null) => void; readOnlyMode: boolean }) {
     const queryClient = useQueryClient();
     const [open, setOpen] = useState(false);
     const menuRef = useRef<HTMLDivElement>(null);
@@ -83,7 +96,11 @@ function HeaderActionMenu({ cards, readOnly = false, isActionPending, onActionEr
         return () => document.removeEventListener('mousedown', handler);
     }, [open]);
 
-    const hasUnarchived = cards.some(c => c.status !== 'done');
+    const canArchiveAny = !readOnlyMode && cards.some(c => c.capabilities ? c.capabilities.archive : !c.readOnly);
+    const canDeleteAny = !readOnlyMode && cards.some(c => c.capabilities ? c.capabilities.delete : !c.readOnly);
+
+    if (!canArchiveAny && !canDeleteAny) return null;
+
     const hasMixedHosts = new Set(cards.map((card) => card.hostId ?? 'local')).size > 1;
 
     const handleArchiveAll = async (e: React.MouseEvent) => {
@@ -96,7 +113,15 @@ function HeaderActionMenu({ cards, readOnly = false, isActionPending, onActionEr
             return;
         }
 
-        const unarchivedCards = cards.filter(c => c.status !== 'done');
+        const unarchivedCards = cards.filter(c => {
+            if (c.status === 'done') return false;
+            return c.capabilities ? c.capabilities.archive : !c.readOnly;
+        });
+        if (unarchivedCards.length === 0) {
+            setOpen(false);
+            return;
+        }
+
         onPendingActionChange('archive');
         try {
             const responses = await Promise.all(unarchivedCards.map(card =>
@@ -116,6 +141,41 @@ function HeaderActionMenu({ cards, readOnly = false, isActionPending, onActionEr
         await queryClient.invalidateQueries({ queryKey: ['sessions'] });
     };
 
+    const handleRestoreAll = async (e: React.MouseEvent) => {
+        e.stopPropagation();
+        if (isActionPending) return;
+        onActionError(null);
+        if (hasMixedHosts) {
+            onActionError('Mixed-host restore is not supported');
+            setOpen(false);
+            return;
+        }
+
+        const archivedCards = cards.filter(c => c.status === 'done' && (c.capabilities ? c.capabilities.archive : !c.readOnly));
+        if (archivedCards.length === 0) {
+            setOpen(false);
+            return;
+        }
+
+        onPendingActionChange('restore');
+        try {
+            const responses = await Promise.all(archivedCards.map(card =>
+                fetch(`/api/sessions/${card.id}/restore`, { method: 'POST' })
+            ));
+            const failedResponse = responses.find((response) => !response.ok);
+            if (failedResponse) {
+                const errorBody = await failedResponse.json().catch(() => null);
+                onActionError(mapSessionActionError(errorBody, 'Failed to restore sessions'));
+            }
+        } catch {
+            onActionError('Remote node is offline or unreachable.');
+        } finally {
+            onPendingActionChange(null);
+        }
+        setOpen(false);
+        await queryClient.invalidateQueries({ queryKey: ['sessions'] });
+    };
+
     const handleDeleteAll = async (e: React.MouseEvent) => {
         e.stopPropagation();
         if (isActionPending) return;
@@ -126,10 +186,16 @@ function HeaderActionMenu({ cards, readOnly = false, isActionPending, onActionEr
             return;
         }
 
-        if (!confirm(`Delete ${cards.length} session(s)? This cannot be undone.`)) return;
+        const deletableCards = cards.filter(c => c.capabilities ? c.capabilities.delete : !c.readOnly);
+        if (deletableCards.length === 0) {
+            setOpen(false);
+            return;
+        }
+
+        if (!confirm(`Delete ${deletableCards.length} session(s)? This cannot be undone.`)) return;
         onPendingActionChange('delete');
         try {
-            const responses = await Promise.all(cards.map(card =>
+            const responses = await Promise.all(deletableCards.map(card =>
                 fetch(`/api/sessions/${card.id}/delete`, { method: 'POST' })
             ));
             const failedResponse = responses.find((response) => !response.ok);
@@ -146,7 +212,8 @@ function HeaderActionMenu({ cards, readOnly = false, isActionPending, onActionEr
         await queryClient.invalidateQueries({ queryKey: ['sessions'] });
     };
 
-    if (readOnly) return null;
+    const hasArchivableInBatch = !readOnlyMode && cards.some(c => (c.status !== 'done') && (c.capabilities ? c.capabilities.archive : !c.readOnly));
+    const hasRestorableInBatch = !readOnlyMode && cards.some(c => c.status === 'done' && (c.capabilities ? c.capabilities.archive : !c.readOnly));
 
     return (
         <div className="relative" ref={menuRef}>
@@ -163,7 +230,7 @@ function HeaderActionMenu({ cards, readOnly = false, isActionPending, onActionEr
             </button>
             {open && (
                 <div className="absolute right-0 top-6 w-32 rounded-md border border-gray-200 bg-white shadow-lg dark:border-zinc-700 dark:bg-zinc-900 z-20">
-                    {hasUnarchived && (
+                    {hasArchivableInBatch && (
                         <button
                             type="button"
                             className="w-full text-left px-3 py-1.5 text-xs text-gray-700 hover:bg-gray-50 dark:text-gray-200 dark:hover:bg-zinc-800"
@@ -173,14 +240,26 @@ function HeaderActionMenu({ cards, readOnly = false, isActionPending, onActionEr
                             Archive all
                         </button>
                     )}
-                    <button
-                        type="button"
-                        className="w-full text-left px-3 py-1.5 text-xs text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20"
-                        onClick={handleDeleteAll}
-                        disabled={isActionPending}
-                    >
-                        Delete all
-                    </button>
+                    {hasRestorableInBatch && (
+                        <button
+                            type="button"
+                            className="w-full text-left px-3 py-1.5 text-xs text-gray-700 hover:bg-gray-50 dark:text-gray-200 dark:hover:bg-zinc-800"
+                            onClick={handleRestoreAll}
+                            disabled={isActionPending}
+                        >
+                            Restore all
+                        </button>
+                    )}
+                    {canDeleteAny && (
+                        <button
+                            type="button"
+                            className="w-full text-left px-3 py-1.5 text-xs text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20"
+                            onClick={handleDeleteAll}
+                            disabled={isActionPending}
+                        >
+                            Delete all
+                        </button>
+                    )}
                 </div>
             )}
         </div>
@@ -188,7 +267,7 @@ function HeaderActionMenu({ cards, readOnly = false, isActionPending, onActionEr
 }
 
 // Hover-reveal action menu for each session row
-function RowActionMenu({ cardId, archived, isActionPending, onActionError, onPendingActionChange }: { cardId: string; archived: boolean; isActionPending: boolean; onActionError: (message: string | null) => void; onPendingActionChange: (value: 'open' | 'archive' | 'delete' | null) => void }) {
+function RowActionMenu({ card, isActionPending, onActionError, onPendingActionChange, readOnlyMode }: { card: KanbanCard; isActionPending: boolean; onActionError: (message: string | null) => void; onPendingActionChange: (value: 'open' | 'archive' | 'restore' | 'delete' | null) => void; readOnlyMode: boolean }) {
     const queryClient = useQueryClient();
     const [open, setOpen] = useState(false);
     const menuRef = useRef<HTMLDivElement>(null);
@@ -204,13 +283,18 @@ function RowActionMenu({ cardId, archived, isActionPending, onActionError, onPen
         return () => document.removeEventListener('mousedown', handler);
     }, [open]);
 
+    const canArchive = !readOnlyMode && (card.capabilities ? card.capabilities.archive : !card.readOnly);
+    const canDelete = !readOnlyMode && (card.capabilities ? card.capabilities.delete : !card.readOnly);
+
+    if (!canArchive && !canDelete) return null;
+
     const handleArchive = async (e: React.MouseEvent) => {
         e.stopPropagation();
         if (isActionPending) return;
         onActionError(null);
         onPendingActionChange('archive');
         try {
-            const response = await fetch(`/api/sessions/${cardId}/archive`, { method: 'POST' });
+            const response = await fetch(`/api/sessions/${card.id}/archive`, { method: 'POST' });
             if (!response.ok) {
                 const errorBody = await response.json().catch(() => null);
                 onActionError(mapSessionActionError(errorBody, 'Failed to archive session'));
@@ -224,13 +308,33 @@ function RowActionMenu({ cardId, archived, isActionPending, onActionError, onPen
         }
     };
 
+    const handleRestore = async (e: React.MouseEvent) => {
+        e.stopPropagation();
+        if (isActionPending) return;
+        onActionError(null);
+        onPendingActionChange('restore');
+        try {
+            const response = await fetch(`/api/sessions/${card.id}/restore`, { method: 'POST' });
+            if (!response.ok) {
+                const errorBody = await response.json().catch(() => null);
+                onActionError(mapSessionActionError(errorBody, 'Failed to restore session'));
+            }
+        } catch {
+            onActionError('Remote node is offline or unreachable.');
+        } finally {
+            onPendingActionChange(null);
+            setOpen(false);
+            await queryClient.invalidateQueries({ queryKey: ['sessions'] });
+        }
+    };
+
     const handleDelete = async (e: React.MouseEvent) => {
         e.stopPropagation();
         if (isActionPending) return;
         onActionError(null);
         onPendingActionChange('delete');
         try {
-            const response = await fetch(`/api/sessions/${cardId}/delete`, { method: 'POST' });
+            const response = await fetch(`/api/sessions/${card.id}/delete`, { method: 'POST' });
             if (!response.ok) {
                 const errorBody = await response.json().catch(() => null);
                 onActionError(mapSessionActionError(errorBody, 'Failed to delete session'));
@@ -259,7 +363,7 @@ function RowActionMenu({ cardId, archived, isActionPending, onActionError, onPen
             </button>
             {open && (
                 <div className="absolute right-0 top-6 w-28 rounded-md border border-gray-200 bg-white shadow-lg dark:border-zinc-700 dark:bg-zinc-900 z-20">
-                    {!archived ? (
+                    {(card.status !== 'done' && canArchive) && (
                         <button
                             type="button"
                             className="w-full text-left px-3 py-1.5 text-xs text-gray-700 hover:bg-gray-50 dark:text-gray-200 dark:hover:bg-zinc-800"
@@ -268,15 +372,27 @@ function RowActionMenu({ cardId, archived, isActionPending, onActionError, onPen
                         >
                             Archive
                         </button>
-                    ) : null}
-                    <button
-                        type="button"
-                        className="w-full text-left px-3 py-1.5 text-xs text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20"
-                        onClick={handleDelete}
-                        disabled={isActionPending}
-                    >
-                        Delete
-                    </button>
+                    )}
+                    {(card.status === 'done' && canArchive) && (
+                        <button
+                            type="button"
+                            className="w-full text-left px-3 py-1.5 text-xs text-gray-700 hover:bg-gray-50 dark:text-gray-200 dark:hover:bg-zinc-800"
+                            onClick={handleRestore}
+                            disabled={isActionPending}
+                        >
+                            Restore
+                        </button>
+                    )}
+                    {canDelete && (
+                        <button
+                            type="button"
+                            className="w-full text-left px-3 py-1.5 text-xs text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20"
+                            onClick={handleDelete}
+                            disabled={isActionPending}
+                        >
+                            Delete
+                        </button>
+                    )}
                 </div>
             )}
         </div>
@@ -284,10 +400,10 @@ function RowActionMenu({ cardId, archived, isActionPending, onActionError, onPen
 }
 
 // Session row with expandable subagent children
-function SessionRow({ card, isLast, readOnly = false, isActionPending, onActionError, onPendingActionChange }: { card: KanbanCard; isLast: boolean; readOnly?: boolean; isActionPending: boolean; onActionError: (message: string | null) => void; onPendingActionChange: (value: 'open' | 'archive' | 'delete' | null) => void }) {
+function SessionRow({ card, isLast, isActionPending, onActionError, onPendingActionChange, readOnlyMode }: { card: KanbanCard; isLast: boolean; isActionPending: boolean; onActionError: (message: string | null) => void; onPendingActionChange: (value: 'open' | 'archive' | 'restore' | 'delete' | null) => void; readOnlyMode: boolean }) {
     const [expanded, setExpanded] = useState(true);
     const visibleChildren = (card.children || []).filter(
-        (child) => child.realTimeStatus !== 'idle' || child.waitingForUser
+        shouldShowChildSession
     );
     const hasChildren = visibleChildren.length > 0;
     const rowTitle = buildTooltipTitle([
@@ -319,7 +435,7 @@ function SessionRow({ card, isLast, readOnly = false, isActionPending, onActionE
                         </svg>
                     </button>
                 )}
-                <StatusDot status={card.opencodeStatus} waitingForUser={card.waitingForUser} />
+                <StatusDot status={card.opencodeStatus} waitingForUser={card.waitingForUser} provider={card.provider} />
                 <span className="text-sm text-gray-700 dark:text-gray-300 truncate flex-1 min-w-0">
                     {card.title || 'Untitled Session'}
                 </span>
@@ -334,11 +450,9 @@ function SessionRow({ card, isLast, readOnly = false, isActionPending, onActionE
                     {formatRelativeTime(card.updatedAt)}
                 </span>
                 {/* Action menu: hidden by default, visible on hover */}
-                {!readOnly ? (
-                    <div className="hidden group-hover/row:flex flex-shrink-0">
-                        <RowActionMenu cardId={card.id} archived={card.status === 'done'} isActionPending={isActionPending} onActionError={onActionError} onPendingActionChange={onPendingActionChange} />
-                    </div>
-                ) : null}
+                <div className="hidden group-hover/row:flex flex-shrink-0">
+                    <RowActionMenu card={card} isActionPending={isActionPending} onActionError={onActionError} onPendingActionChange={onPendingActionChange} readOnlyMode={readOnlyMode} />
+                </div>
             </div>
             {/* Subagent children */}
             {hasChildren && expanded && (
@@ -353,7 +467,7 @@ function SessionRow({ card, isLast, readOnly = false, isActionPending, onActionE
                             <span className="text-gray-300 dark:text-zinc-600 text-xs flex-shrink-0 font-mono leading-none">
                                 {i === visibleChildren.length - 1 ? '└' : '├'}
                             </span>
-                            <StatusDot status={child.realTimeStatus} waitingForUser={child.waitingForUser} />
+                            <StatusDot 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>
@@ -365,15 +479,36 @@ function SessionRow({ card, isLast, readOnly = false, isActionPending, onActionE
     );
 }
 
-export function ProjectCard({ projectName, branch, cards, readOnly: _readOnly, hostLabel: _hostLabel, multipleHostsEnabled }: ProjectCardProps) {
-    const firstCard = cards[0];
-    const readOnly = _readOnly ?? firstCard?.readOnly ?? false;
+export function ProjectCard({ projectName, branch, cards, readOnly = false, hostLabel: _hostLabel, multipleHostsEnabled }: ProjectCardProps) {
+    const childSessionIds = useMemo(() => {
+        const ids = new Set<string>();
+        for (const card of cards) {
+            for (const child of card.children || []) {
+                ids.add(child.id);
+            }
+        }
+        return ids;
+    }, [cards]);
+
+    const deduplicatedCards = useMemo(() => {
+        return cards.filter((card) => {
+            if (!childSessionIds.has(card.id)) {
+                return true;
+            }
+
+            return (card.children?.length ?? 0) > 0;
+        });
+    }, [cards, childSessionIds]);
+
+    const firstCard = deduplicatedCards[0] ?? cards[0];
+    const actionableCards = deduplicatedCards;
+    const primaryCard = actionableCards[0] ?? firstCard;
     const hostLabel = _hostLabel ?? firstCard?.hostLabel;
-    const hostId = firstCard?.hostId;
+    const hostId = primaryCard?.hostId ?? firstCard?.hostId;
     const showHostBadge = hostLabel && (multipleHostsEnabled || hostLabel !== 'Local');
     const hostAccentClass = getHostAccentTextClass(hostId, hostLabel);
     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 [openTool, setOpenTool] = useState(() => {
         if (typeof window === 'undefined') return 'vscode';
         return window.localStorage.getItem('vibepulse:open-tool') || 'vscode';
@@ -400,8 +535,8 @@ export function ProjectCard({ projectName, branch, cards, readOnly: _readOnly, h
             return storedHost;
         }
 
-        const firstRemoteBaseUrl = firstCard?.hostBaseUrl;
-        if (firstRemoteBaseUrl && firstCard?.hostId !== 'local') {
+        const firstRemoteBaseUrl = primaryCard?.hostBaseUrl;
+        if (firstRemoteBaseUrl && primaryCard?.hostId !== 'local') {
             try {
                 return new URL(firstRemoteBaseUrl).hostname;
             } catch {
@@ -414,20 +549,27 @@ export function ProjectCard({ projectName, branch, cards, readOnly: _readOnly, h
         }
 
         return '';
-    }, [firstCard?.hostBaseUrl, firstCard?.hostId]);
+    }, [primaryCard?.hostBaseUrl, primaryCard?.hostId]);
     const isActionPending = pendingAction !== null;
+    const isReadOnly = !!readOnly;
     const pendingActionLabel = pendingAction === 'open'
         ? 'Opening…'
         : pendingAction === 'archive'
             ? 'Archiving…'
-            : pendingAction === 'delete'
-                ? 'Deleting…'
-                : null;
-    const isRemoteProjectCard = !!firstCard && firstCard.hostId !== undefined && firstCard.hostId !== 'local';
+            : pendingAction === 'restore'
+                ? 'Restoring…'
+                : pendingAction === 'delete'
+                    ? 'Deleting…'
+                    : null;
+    const isRemoteProjectCard = !!primaryCard && primaryCard.hostId !== undefined && primaryCard.hostId !== 'local';
     const isConfigPendingForRemoteOpen = isRemoteProjectCard && isConfigLoading && !config;
     const isConfigUnavailableForRemoteOpen = isRemoteProjectCard && !config && !isConfigLoading;
 
     const handleOpenProject = () => {
+        if (isReadOnly) {
+            return;
+        }
+
         if (isActionPending) {
             return;
         }
@@ -441,24 +583,36 @@ export function ProjectCard({ projectName, branch, cards, readOnly: _readOnly, h
             return;
         }
 
-        const directory = cards[0]?.directory;
+        const directory = primaryCard?.directory;
         if (!directory) return;
         setActionError(null);
-        const firstProjectCard = cards[0];
+        const firstProjectCard = primaryCard;
         const openEditorTargetMode = config?.vibepulse?.openEditorTargetMode === 'hub' ? 'hub' : 'remote';
         const isRemoteProject = firstProjectCard?.hostId !== undefined && firstProjectCard.hostId !== 'local';
+        const canOpenEditor = firstProjectCard?.capabilities ? firstProjectCard.capabilities.openEditor : true;
 
         if (isRemoteProject && openEditorTargetMode === 'hub' && openTool === 'antigravity') {
             setActionError('Antigravity does not support hub-mode remote opens. Use VS Code or switch target mode to Remote node.');
             return;
         }
 
-        const useRemoteSshTarget = isRemoteProject && openEditorTargetMode === 'hub' && openTool === 'vscode';
+        if (isRemoteProject && openEditorTargetMode === 'remote' && !canOpenEditor && openTool === 'antigravity') {
+            setActionError('Antigravity cannot open remote sessions without remote editor support. Use VS Code.');
+            return;
+        }
+
+        const useRemoteSshTarget =
+            isRemoteProject
+            && openTool === 'vscode'
+            && (
+                openEditorTargetMode === 'hub'
+                || (openEditorTargetMode === 'remote' && !canOpenEditor)
+            );
         const target = buildEditorUri(openTool === 'antigravity' ? 'antigravity' : 'vscode', directory, {
             remoteSshHost: useRemoteSshTarget ? remoteSshHost : null,
         });
 
-        if (isRemoteProject && openEditorTargetMode === 'remote') {
+        if (isRemoteProject && openEditorTargetMode === 'remote' && canOpenEditor) {
             void (async () => {
                 setPendingAction('open');
                 try {
@@ -498,42 +652,40 @@ export function ProjectCard({ projectName, branch, cards, readOnly: _readOnly, h
                         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
                     </svg>
                 </div>
-                <span className="text-sm font-semibold text-gray-800 dark:text-gray-200 truncate flex-1 min-w-0">
-                    {projectName}
-                </span>
-                {(cards.length > 1 || !readOnly) && (
-                    <div className="flex items-center flex-shrink-0 bg-gray-100 dark:bg-zinc-700/50 rounded-full h-6 border border-gray-200/50 dark:border-zinc-700">
-                        {cards.length > 1 && (
-                            <span className={`text-[11px] font-medium text-gray-500 dark:text-gray-400 ${!readOnly ? 'pl-2.5 pr-1' : 'px-2.5'}`}>
-                                {cards.length}
-                            </span>
-                        )}
-                        {!readOnly && (
-                            <div className={`${cards.length > 1 ? 'pr-0.5' : 'px-0.5'}`}>
-                                <HeaderActionMenu cards={cards} readOnly={readOnly} isActionPending={isActionPending} onActionError={setActionError} onPendingActionChange={setPendingAction} />
-                            </div>
-                        )}
+                <div className="flex-1 min-w-0 flex items-center gap-2">
+                    <span className="text-sm font-semibold text-gray-800 dark:text-gray-200 truncate">
+                        {projectName}
+                    </span>
+                </div>
+                <div className="flex items-center flex-shrink-0 bg-gray-100 dark:bg-zinc-700/50 rounded-full h-6 border border-gray-200/50 dark:border-zinc-700">
+                    {deduplicatedCards.length > 1 && (
+                        <span className="text-[11px] font-medium text-gray-500 dark:text-gray-400 pl-2.5 pr-1">
+                            {deduplicatedCards.length}
+                        </span>
+                    )}
+                    <div className={`${deduplicatedCards.length > 1 ? 'pr-0.5' : 'px-0.5'}`}>
+                        <HeaderActionMenu cards={actionableCards} isActionPending={isActionPending} onActionError={setActionError} onPendingActionChange={setPendingAction} readOnlyMode={isReadOnly} />
                     </div>
-                )}
+                </div>
             </div>
 
             {/* Session rows */}
             <div className="border-t border-gray-100 dark:border-zinc-700/50">
-                {cards.map((card, index) => (
+                {deduplicatedCards.map((card, index) => (
                     <SessionRow
                         key={card.id}
                         card={card}
-                        isLast={index === cards.length - 1}
-                        readOnly={readOnly}
+                        isLast={index === deduplicatedCards.length - 1}
                         isActionPending={isActionPending}
                         onActionError={setActionError}
                         onPendingActionChange={setPendingAction}
+                        readOnlyMode={isReadOnly}
                     />
                 ))}
             </div>
 
             {/* Footer */}
-            {!readOnly && (
+            {(branch || primaryCard?.directory) && (
                 <div className="flex items-center justify-between gap-2 px-3 py-1.5 border-t border-gray-100 dark:border-zinc-700/50 bg-gray-50/50 dark:bg-zinc-800/50">
                     <div className="min-w-0 flex-1 text-[10px] text-gray-400 dark:text-gray-500 truncate">
                         {branch ? (
@@ -550,7 +702,7 @@ export function ProjectCard({ projectName, branch, cards, readOnly: _readOnly, h
                                 window.localStorage.setItem('vibepulse:open-tool', e.target.value);
                             }}
                             title="Select open tool"
-                            disabled={isActionPending || isConfigPendingForRemoteOpen || isConfigUnavailableForRemoteOpen}
+                            disabled={isReadOnly || isActionPending || isConfigPendingForRemoteOpen || isConfigUnavailableForRemoteOpen}
                         >
                             <option value="vscode">VSCode</option>
                             <option value="antigravity">Antigravity</option>
@@ -560,7 +712,7 @@ export function ProjectCard({ projectName, branch, cards, readOnly: _readOnly, h
                             onClick={handleOpenProject}
                             className="flex items-center gap-1 px-2 py-0.5 rounded-md text-[10px] font-medium text-gray-500 hover:text-blue-600 hover:bg-blue-50 disabled:cursor-not-allowed disabled:opacity-50 dark:text-gray-400 dark:hover:text-blue-400 dark:hover:bg-blue-900/20 transition-colors"
                             title="Open project"
-                            disabled={isActionPending || isConfigPendingForRemoteOpen || isConfigUnavailableForRemoteOpen}
+                            disabled={isReadOnly || isActionPending || isConfigPendingForRemoteOpen || isConfigUnavailableForRemoteOpen}
                         >
                             <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />