@kortix/ui 0.14.4 → 0.14.5

package/dist/workspace/sidebar/project-session-list.js

@@ -17,7 +17,7 @@ import { useSidebar } from '../../primitives/sidebar.js';
 import { Skeleton } from '../../primitives/skeleton.js';
 import { errorToast, successToast } from '../../primitives/toast.js';
 import { changeRequestKeys } from '../../files/project/hooks/use-change-requests.js';
-import { useSessionNeedsYouCounts } from '../../internal/hooks/use-review-session-summary.js';
+import { useSessionNeedsYouCounts, useSessionsAwaitingAnswer, } from '../../internal/hooks/use-review-session-summary.js';
 import { childSessionHref, readRuntimeSessionParam, } from '../../session/tool/tools/session-spawn-urls.js';
 import { SessionStarterMark, useSessionStarter, } from '../sessions/session-starter-mark.js';
 import { SessionsEmptyState } from '../sessions/sessions-empty-state.js';
@@ -26,11 +26,11 @@ import { SessionDeleteModal } from '../../session/actions/session-delete-modal.j
 import { SessionLabelsModal } from './modal/session-labels-modal.js';
 import { ShareSessionModal } from './modal/share-session-modal.js';
 import { getSessionDisplayTitle, groupChangeRequestsBySession, projectSessionsRefetchInterval, resolveSessionListViewState, shortRelative, starterSectionOf, } from '../../session/actions/project-session-list-helpers.js';
-import { MobileSessionCreatedTime, SessionBriefDescription, SessionBriefHoverCard, } from './session-brief-hover-card.js';
+import { MobileSessionCreatedTime, SessionBriefDescription, SessionBriefCardHost, SessionBriefHoverCard, SubagentHoverCard, } from './session-brief-hover-card.js';
 import { SessionFilterMenu } from './session-filter-menu.js';
 import { groupSessions, } from './session-grouping.js';
 import { useSessionOpenIntent } from './session-open-intent.js';
-import { SessionStatusMark } from './session-status-mark.js';
+import { isReviewOverdue, SessionStatusMark } from './session-status-mark.js';
 import { SessionTitle } from './session-title.js';
 import { useMediaQuery } from '../../internal/hooks/index.js';
 import { cn } from '../../internal/lib/utils.js';
@@ -40,7 +40,7 @@ import { selectCollapsedSections, selectGroupMode, selectHiddenSections, selectL
 import { shouldBeginSessionSwitch, useSessionSwitchStore } from '../../internal/stores/session-switch-store.js';
 import { directSubsessions, createProjectSession, listChangeRequests, restartProjectSession, sessionParentId, stopProjectSession, } from '@kortix/sdk';
 import { qk, useProjectSession, useProjectSessions, useRuntimeSupports, useSessionChildren, } from '@kortix/sdk/react';
-import { ArchiveIcon, CaretRightIcon, DotsThreeIcon, PushPinIcon, PushPinSlashIcon, GitForkIcon, PencilSimpleIcon, ArrowCounterClockwiseIcon as RotateCcw, ShareIcon as Share, SparkleIcon, SquareIcon as Square, TagIcon, TrashIcon, } from '@phosphor-icons/react';
+import { ArchiveIcon, ArrowsSplitIcon, CaretRightIcon, DotsThreeIcon, PushPinIcon, PushPinSlashIcon, RobotIcon, GitForkIcon, PencilSimpleIcon, ArrowCounterClockwiseIcon as RotateCcw, ShareIcon as Share, SparkleIcon, SquareIcon as Square, TagIcon, TrashIcon, TreeViewIcon, } from '@phosphor-icons/react';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { formatDistanceToNowStrict } from 'date-fns';
 import { useUiPathname, useUiRouter, useUiSearchParams, useUiViewerId } from '../../providers/ui-provider.js';
@@ -227,6 +227,7 @@ export function ProjectSessionList({ projectId }) {
     // summary the footer "Review" pill reads) plus open agent questions and
     // connector approvals (KRTX-1739). A positive count makes a row `needs-you`.
     const needsYouBySession = useSessionNeedsYouCounts(projectId);
+    const awaitingAnswer = useSessionsAwaitingAnswer(projectId);
     // Grouping, ordering, and the two multi-select facets all live in the
     // persisted session-filter store (keyed by project) — see SessionFilterMenu,
     // which writes to the same store from the nested `⋯` menu.
@@ -302,7 +303,11 @@ export function ProjectSessionList({ projectId }) {
         const isSwitchTarget = switchingToSessionId === session.session_id;
         const children = directSubsessions(session);
         const spawnedCount = nested ? 0 : (session.child_count ?? 0);
-        const spawnedOpen = spawnedCount > 0 && expandedIdSet.has(session.session_id);
+        // Sub-agents and spawned sessions open together, under one toggle. A row
+        // whose sub-agent is the open page stays open, so that row stays visible.
+        const childRunsOpen = children.length + spawnedCount > 0 &&
+            (expandedIdSet.has(session.session_id) ||
+                (!!isActive && children.some((child) => child.id === activeRuntimeSessionId)));
         return (_jsxs("div", { className: "space-y-px", children: [_jsx(ProjectSessionRow, { session: session, href: href, isActive: !!isActive && !activeRuntimeSessionId, isSwitching: isSwitchTarget, onNavigate: (event) => {
                         if (switchingToSessionId && session.session_id === activeSessionId) {
                             event.preventDefault();
@@ -313,7 +318,7 @@ export function ProjectSessionList({ projectId }) {
                         if (shouldBeginSessionSwitch(event, session.session_id, activeSessionId)) {
                             beginSessionSwitch(session.session_id);
                         }
-                    }, displayTitle: getSessionDisplayTitle(session), inSharedGroup: inSharedGroup, childCount: children.length, spawnedCount: spawnedCount, spawnedOpen: spawnedOpen, onToggleSpawned: () => toggleExpanded(projectId, session.session_id), reviewCount: needsYouBySession[session.session_id] ?? 0, changeRequests: changeRequestsBySession.get(session.session_id) ?? [], canShowHoverCard: canShowSessionHoverCard, onDelete: (id, label) => setSessionToDelete({ id, label }), onPin: (id, pinned) => void listActions.setPinned(id, pinned), onArchive: (id, archived) => void listActions.setArchived(id, archived), onShare: (s) => setSessionToShare(s), onRename: (id, name) => setSessionToRename({ id, name }), onEditLabels: setSessionToLabel, onRestart: (id, label) => restartMutation.mutate({ sessionId: id, label }), isRestarting: restartMutation.isPending && restartMutation.variables?.sessionId === session.session_id, onStop: (id, label) => stopMutation.mutate({ sessionId: id, label }), isStopping: stopMutation.isPending && stopMutation.variables?.sessionId === session.session_id, canFork: runtimeForks &&
+                    }, displayTitle: getSessionDisplayTitle(session), inSharedGroup: inSharedGroup, spawned: nested, subagentCount: children.length, spawnedCount: spawnedCount, childRunsOpen: childRunsOpen, onToggleChildRuns: () => toggleExpanded(projectId, session.session_id), reviewCount: needsYouBySession[session.session_id] ?? 0, awaitingAnswer: awaitingAnswer.has(session.session_id), changeRequests: changeRequestsBySession.get(session.session_id) ?? [], canShowHoverCard: canShowSessionHoverCard, onDelete: (id, label) => setSessionToDelete({ id, label }), onPin: (id, pinned) => void listActions.setPinned(id, pinned), onArchive: (id, archived) => void listActions.setArchived(id, archived), onShare: (s) => setSessionToShare(s), onRename: (id, name) => setSessionToRename({ id, name }), onEditLabels: setSessionToLabel, onRestart: (id, label) => restartMutation.mutate({ sessionId: id, label }), isRestarting: restartMutation.isPending && restartMutation.variables?.sessionId === session.session_id, onStop: (id, label) => stopMutation.mutate({ sessionId: id, label }), isStopping: stopMutation.isPending && stopMutation.variables?.sessionId === session.session_id, canFork: runtimeForks &&
                         session.session_id === activeSessionId &&
                         !!(session.runtime_session_id ?? session.opencode_session_id), isForking: forkSession.isPending &&
                         forkSession.variables?.sessionId ===
@@ -325,28 +330,7 @@ export function ProjectSessionList({ projectId }) {
                         onError: (err) => {
                             errorToast(err instanceof Error ? err.message : tI18nComplete.raw('text32ad3abe4479'));
                         },
-                    }) }), children.length > 0 && isActive && (
-                // `ml-4` puts the trunk's local x=0 exactly under the parent's
-                // icon center (px-2 + half of size-4, both 2 tokens = 4 tokens
-                // total). No padding on this wrapper: padding here would shift an
-                // absolutely-positioned child's own `left:0` inward with it (it
-                // resolves against the padding box), throwing off the trunk.
-                //
-                // The trunk is ONE span for the whole block, not one per row: N
-                // separate `top-4 bottom-0` segments stacked edge-to-edge should
-                // in theory touch with zero gap, but sub-pixel rounding at each
-                // row boundary showed up as visible hairline breaks.
-                //
-                // The trunk stops at the TOP of the last row (each row is a fixed
-                // `h-8`, so that is `(N - 1) * 8` tokens). The last row's own
-                // elbow draws the rest and curves away. Running the trunk to the
-                // last row's center instead leaves a straight tail below the
-                // point where the elbow starts to curve.
-                _jsxs("div", { className: "relative ml-4", children: [children.length > 1 && (_jsx("span", { "aria-hidden": true, className: "border-border pointer-events-none absolute top-0 left-0 border-l-2", style: { height: `calc(var(--spacing) * ${(children.length - 1) * 8})` } })), children.map((child) => {
-                            const childHref = childSessionHref(href, child.id);
-                            const activeChild = !!isActive && activeRuntimeSessionId === child.id;
-                            return (_jsxs("div", { className: "relative h-8", children: [_jsx(SubAgentConnector, {}), _jsx("div", { style: { marginLeft: SUB_AGENT_CONNECTOR_RUN }, children: _jsx(ProjectSubsessionRow, { title: child.title || 'Sub-session', href: childHref, isActive: activeChild, updatedAt: child.updated_at }) })] }, child.id));
-                        })] })), spawnedOpen && (_jsx(SpawnedSessions, { projectId: projectId, parentId: session.session_id, renderNode: (child) => renderSessionNode(child, true) }))] }, session.session_id));
+                    }) }), childRunsOpen && (_jsx(ChildRuns, { projectId: projectId, parentId: session.session_id, subagents: children, spawnedCount: spawnedCount, renderSubagent: (child) => (_jsx(ProjectSubsessionRow, { id: child.id, title: child.title || 'Sub-session', href: childSessionHref(href, child.id), isActive: !!isActive && activeRuntimeSessionId === child.id, createdAt: child.created_at, updatedAt: child.updated_at })), renderSpawned: (child) => renderSessionNode(child, true) }))] }, session.session_id));
     };
     // Everything below the header — skeleton, error, empty, or the grouped list.
     // Kept as one function so the header stays mounted across all four states
@@ -383,12 +367,12 @@ export function ProjectSessionList({ projectId }) {
         if (viewState !== 'more' && grouped.sections.length === 0 && visibleOtherCount === 0) {
             return (_jsx("div", { className: "text-muted-foreground px-2 pt-1 pb-2 text-xs", children: t('allSectionsHidden') }));
         }
-        return (_jsxs(FadedScrollArea, { fadeColor: "from-background", className: "h-full min-h-0 space-y-px", children: [_jsx(StarterSection, { title: tPinArchive('section'), query: pinnedQuery, sessions: visiblePinned, open: !collapsedSectionIds.has(PINNED_SECTION_ID), onToggle: () => toggleSectionCollapsed(projectId, PINNED_SECTION_ID), renderNode: (session) => renderSessionNode(session, false) }), visiblePinned.length > 0 && (_jsx("div", { className: "px-2 py-1", children: _jsx(Separator, {}) })), grouped.sections.map((section) => (_jsx(SessionListSection, { section: section, projectId: projectId, sessions: sessions, reviewCountBySession: needsYouBySession, showHeader: grouped.showHeaders, open: !collapsedSectionIds.has(section.id), onOpenChange: () => toggleSectionCollapsed(projectId, section.id), children: section.sessions.map((session) => renderSessionNode(session, false)) }, section.id))), hasNextPage && (_jsx(ShowMoreButton, { loading: isFetchingNextPage, failed: isFetchNextPageError, label: t('loadMore'), onClick: () => fetchNextPage() })), _jsx(StarterSection, { title: t('startedBy.others'), query: sharedQuery, sessions: visibleShared, open: expandedIdSet.has('section:shared'), onToggle: () => toggleExpanded(projectId, 'section:shared'), renderNode: (session) => renderSessionNode(session, false, true) }), _jsx(StarterSection, { title: t('startedBy.automated'), query: automatedQuery, sessions: visibleAutomated, open: expandedIdSet.has('section:automated'), onToggle: () => toggleExpanded(projectId, 'section:automated'), renderNode: (session) => renderSessionNode(session, false) }), firstChatPending &&
+        return (_jsxs(FadedScrollArea, { fadeColor: "from-background", className: "h-full min-h-0 space-y-px", children: [_jsx(StarterSection, { title: tPinArchive('section'), query: pinnedQuery, sessions: visiblePinned, open: !collapsedSectionIds.has(PINNED_SECTION_ID), onToggle: () => toggleSectionCollapsed(projectId, PINNED_SECTION_ID), renderNode: (session) => renderSessionNode(session, false), caretOnHover: true }), visiblePinned.length > 0 && !grouped.showHeaders && (_jsx("div", { className: "px-2 py-1", children: _jsx(Separator, {}) })), grouped.sections.map((section) => (_jsx(SessionListSection, { section: section, projectId: projectId, sessions: sessions, reviewCountBySession: needsYouBySession, showHeader: grouped.showHeaders, open: !collapsedSectionIds.has(section.id), onOpenChange: () => toggleSectionCollapsed(projectId, section.id), children: section.sessions.map((session) => renderSessionNode(session, false)) }, section.id))), hasNextPage && (_jsx(ShowMoreButton, { loading: isFetchingNextPage, failed: isFetchNextPageError, label: t('loadMore'), onClick: () => fetchNextPage() })), _jsx(StarterSection, { title: t('startedBy.others'), query: sharedQuery, sessions: visibleShared, open: expandedIdSet.has('section:shared'), onToggle: () => toggleExpanded(projectId, 'section:shared'), renderNode: (session) => renderSessionNode(session, false, true) }), _jsx(StarterSection, { title: t('startedBy.automated'), query: automatedQuery, sessions: visibleAutomated, open: expandedIdSet.has('section:automated'), onToggle: () => toggleExpanded(projectId, 'section:automated'), renderNode: (session) => renderSessionNode(session, false), caretOnHover: true }), firstChatPending &&
                     !hasNextPage &&
                     !sharedQuery.hasNextPage &&
                     !automatedQuery.hasNextPage && (_jsx(FirstChatRow, { projectId: projectId, isActive: pathname === uiRoutes().project(projectId) && isFirstChatRequested(searchParams) }))] }));
     }
-    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col space-y-px", children: [_jsx(SessionListHeader, { projectId: projectId, sessions: sessions, reviewCountBySession: needsYouBySession, onMenuOpenChange: holdPeek }), _jsx("div", { className: "flex min-h-0 flex-1 flex-col overflow-hidden", children: renderBody() }), _jsx(ShareSessionModal, { projectId: projectId, session: sessionToShare, open: !!sessionToShare, onOpenChange: (open) => !open && setSessionToShare(null), onSaved: () => queryClient.invalidateQueries({ queryKey: qk.project.sessionsScope(projectId) }) }), _jsx(SessionLabelsModal, { projectId: projectId, session: sessionToLabel, open: !!sessionToLabel, onOpenChange: (open) => !open && setSessionToLabel(null) }), _jsx(RenameSessionModal, { projectId: projectId, sessionId: sessionToRename?.id ?? null, currentName: sessionToRename?.name, open: !!sessionToRename, onOpenChange: (open) => !open && setSessionToRename(null) }), _jsx(SessionDeleteModal, { projectId: projectId, sessionId: sessionToDelete?.id ?? null, sessionLabel: sessionToDelete?.label, open: !!sessionToDelete, onOpenChange: (open) => !open && setSessionToDelete(null) })] }));
+    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col space-y-px", children: [_jsx(SessionListHeader, { projectId: projectId, sessions: sessions, reviewCountBySession: needsYouBySession, onMenuOpenChange: holdPeek }), _jsx("div", { className: "flex min-h-0 flex-1 flex-col overflow-hidden", children: renderBody() }), _jsx(ShareSessionModal, { projectId: projectId, session: sessionToShare, open: !!sessionToShare, onOpenChange: (open) => !open && setSessionToShare(null), onSaved: () => queryClient.invalidateQueries({ queryKey: qk.project.sessionsScope(projectId) }) }), _jsx(SessionLabelsModal, { projectId: projectId, session: sessionToLabel, open: !!sessionToLabel, onOpenChange: (open) => !open && setSessionToLabel(null) }), _jsx(RenameSessionModal, { projectId: projectId, sessionId: sessionToRename?.id ?? null, currentName: sessionToRename?.name, open: !!sessionToRename, onOpenChange: (open) => !open && setSessionToRename(null) }), _jsx(SessionDeleteModal, { projectId: projectId, sessionId: sessionToDelete?.id ?? null, sessionLabel: sessionToDelete?.label, open: !!sessionToDelete, onOpenChange: (open) => !open && setSessionToDelete(null) }), canShowSessionHoverCard && _jsx(SessionBriefCardHost, {})] }));
 }
 /** The `Sessions` row above the list. Lives here — not in `project-sidebar.tsx`
  *  — because everything it needs (the session list, the review summary, the
@@ -462,58 +446,73 @@ function SessionSectionMenu({ projectId, sessions, reviewCountBySession, }) {
                         }
                     }, children: _jsx(DotsThreeIcon, { className: "size-4" }) }) }), _jsx(SessionFilterMenu, { projectId: projectId, sessions: sessions, reviewCountBySession: reviewCountBySession, align: "start" })] }));
 }
-/** Chevron + count of the sessions a row spawned. A `span`, not a button: it
- *  lives inside the row's link, so it stops the click before it navigates.
- *  Without an indicator strip beside it, it keeps the `⋯` slot free at rest,
- *  so hovering the row never moves it. */
-function SpawnedToggle({ count, open, onToggle, clearOfMenu, }) {
+/** Tree icon + count of everything this session started: its sub-agents and
+ *  the sessions it spawned. A `span`, not a button: it lives inside the row's
+ *  link, so it stops the click before it navigates. Without an indicator strip
+ *  beside it, it keeps the `⋯` slot free at rest, so hovering the row never
+ *  moves it. */
+function ChildRunsToggle({ count, open, onToggle, clearOfMenu, }) {
     const t = useTranslations('sidebar.sessionList');
     const toggle = (event) => {
         event.preventDefault();
         event.stopPropagation();
         onToggle();
     };
-    return (_jsxs("span", { role: "button", tabIndex: 0, "aria-expanded": open, "aria-label": open ? t('collapseChildren') : t('expandChildren', { count }), "data-session-children-toggle": "true", onClick: toggle, onKeyDown: (event) => {
+    return (_jsx("span", { role: "button", tabIndex: 0, "aria-expanded": open, "aria-label": open ? t('collapseChildren') : t('expandChildren', { count }), "data-session-children-toggle": "true", onClick: toggle, onKeyDown: (event) => {
             if (event.key === 'Enter' || event.key === ' ')
                 toggle(event);
-        }, className: cn('text-muted-foreground hover:text-sidebar-foreground flex shrink-0 items-center gap-0.5 rounded-sm text-xs tabular-nums', 'focus-visible:ring-kortix-base focus-visible:ring-[0.6px] focus-visible:outline-none', 
+        }, className: cn('flex shrink-0 items-center rounded-sm', open ? 'text-sidebar-foreground' : 'text-muted-foreground hover:text-sidebar-foreground', 'focus-visible:ring-kortix-base focus-visible:ring-[0.6px] focus-visible:outline-none', 
         // Reserve the `⋯` slot at rest. A toggle that slid out of the way on
         // hover moved away from the pointer and put the menu under the click.
-        clearOfMenu && 'mr-6'), children: [_jsx(CaretRightIcon, { "aria-hidden": true, className: cn('size-3 transition-transform', open && 'rotate-90') }), count] }));
+        clearOfMenu && 'mr-6'), children: _jsx(CountBadge, { count: count, icon: _jsx(TreeViewIcon, { "aria-hidden": true, className: "size-3.5" }), className: cn(open && 'bg-foreground/12') }) }));
 }
 /**
  * The Shared and Automated sections: top-level sessions another member or an
  * automation started. Closed until opened, and absent while the viewer has none.
  */
-function StarterSection({ title, query, sessions, open, onToggle, renderNode, }) {
+function StarterSection({ title, query, sessions, open, onToggle, renderNode, caretOnHover = false, }) {
     const t = useTranslations('sidebar');
     // A section with no row yet but a next page stays, with its Load more: the
     // rows the viewer can see may sit past the first pages (KRTX-1727).
     if (query.sessions.length === 0 && !query.hasNextPage)
         return null;
-    return (_jsxs(Disclosure, { open: open, onOpenChange: onToggle, className: "group/section space-y-1", transition: { duration: 0.15, ease: 'easeOut' }, children: [_jsx(DisclosureTrigger, { children: _jsxs("div", { className: cn('group/section-header text-muted-foreground flex items-center gap-1 px-2 text-sm font-medium', SESSION_ROW_HEIGHT_CLASS), children: [_jsx("span", { className: "truncate", children: title }), _jsx(CaretRightIcon, { "aria-hidden": true, className: "duration-normal size-3 shrink-0 transition-transform ease-out group-data-[state=open]/section:rotate-90" })] }) }), _jsxs(DisclosureContent, { contentClassName: "space-y-px", children: [sessions.map(renderNode), query.hasNextPage && (_jsx(ShowMoreButton, { loading: query.isFetchingNextPage, failed: query.isFetchNextPageError, label: t('loadMore'), onClick: () => query.fetchNextPage() }))] })] }));
+    return (_jsxs(Disclosure, { open: open, onOpenChange: onToggle, className: "group/section space-y-1", transition: { duration: 0.15, ease: 'easeOut' }, children: [_jsx(DisclosureTrigger, { children: _jsxs("div", { className: cn('group/section-header text-muted-foreground flex items-center gap-1 px-2 text-sm font-medium', SESSION_ROW_HEIGHT_CLASS), children: [_jsx("span", { className: "truncate", children: title }), _jsx(CaretRightIcon, { "aria-hidden": true, className: cn('duration-normal size-3 shrink-0 transition-[transform,opacity] ease-out group-data-[state=open]/section:rotate-90', caretOnHover &&
+                                'opacity-0 group-hover/section-header:opacity-100 group-focus-visible/section-header:opacity-100') })] }) }), _jsxs(DisclosureContent, { contentClassName: "space-y-px", children: [sessions.map(renderNode), query.hasNextPage && (_jsx(ShowMoreButton, { loading: query.isFetchingNextPage, failed: query.isFetchNextPageError, label: t('loadMore'), onClick: () => query.fetchNextPage() }))] })] }));
 }
 function ShowMoreButton({ loading, failed, label, onClick, }) {
     const t = useTranslations('sidebar');
     return (_jsx(Button, { variant: "ghost", size: "sm", className: "text-muted-foreground hover:text-foreground h-8 w-full justify-start px-2 text-xs", disabled: loading, onClick: onClick, children: loading ? t('loadingMore') : failed ? t('retry') : label }));
 }
 /**
- * The sessions one parent spawned, fetched when the parent opens, 20 at a time.
- * Drawn on the same trunk-and-elbow connector as the sub-agent rows.
+ * Everything one session started, on ONE trunk: its sub-agents first, then the
+ * sessions it spawned (fetched when the row opens, 20 at a time). `ml-4` puts
+ * the trunk's x=0 under the parent's icon center (px-2 + half of size-4).
  */
+function ChildRuns({ projectId, parentId, subagents, spawnedCount, renderSubagent, renderSpawned, }) {
+    return (_jsxs("div", { className: "ml-4", "data-session-children": parentId, children: [subagents.map((child, index) => (_jsx(ChildRunBranch, { continues: index < subagents.length - 1 || spawnedCount > 0, children: renderSubagent(child) }, child.id))), spawnedCount > 0 && (_jsx(SpawnedSessions, { projectId: projectId, parentId: parentId, renderNode: renderSpawned }))] }));
+}
+/**
+ * One child on the trunk. A child with siblings below it carries the trunk
+ * through its whole height; the last one ends at its own elbow. Each segment
+ * overlaps the next by 1px: edge-to-edge segments showed hairline breaks from
+ * sub-pixel rounding at row boundaries.
+ */
+function ChildRunBranch({ continues, children }) {
+    return (_jsxs("div", { className: "relative", children: [continues && (_jsx("span", { "aria-hidden": true, className: "border-border pointer-events-none absolute top-0 -bottom-px left-0 border-l-2" })), _jsx(SubAgentConnector, {}), _jsx("div", { style: { marginLeft: SUB_AGENT_CONNECTOR_RUN }, children: children })] }));
+}
 function SpawnedSessions({ projectId, parentId, renderNode, }) {
     const t = useTranslations('sidebar');
     const children = useSessionChildren(projectId, parentId, { limit: SIDEBAR_PAGE_SIZE });
     if (children.data === undefined) {
-        return (_jsx("div", { className: "ml-4 px-2", children: _jsx(Skeleton, { className: "h-3 w-24 py-0", "aria-hidden": true }) }));
+        return (_jsx("div", { className: "px-2", children: _jsx(Skeleton, { className: "h-3 w-24 py-0", "aria-hidden": true }) }));
     }
     if (children.isError && children.sessions.length === 0) {
-        return _jsx("p", { className: "text-destructive/80 ml-4 px-2 text-xs", children: t('sessionList.loadError') });
+        return _jsx("p", { className: "text-destructive/80 px-2 text-xs", children: t('sessionList.loadError') });
     }
     const rows = children.sessions;
-    return (_jsxs("div", { className: "ml-4", "data-session-children": parentId, children: [rows.map((child, index) => (_jsxs("div", { className: "relative", children: [(index < rows.length - 1 || children.hasNextPage) && (_jsx("span", { "aria-hidden": true, className: "border-border pointer-events-none absolute top-0 bottom-0 left-0 border-l-2" })), _jsx(SubAgentConnector, {}), _jsx("div", { style: { marginLeft: SUB_AGENT_CONNECTOR_RUN }, children: renderNode(child) })] }, child.session_id))), children.hasNextPage && (_jsxs("div", { className: "relative", children: [_jsx(SubAgentConnector, {}), _jsx("div", { style: { marginLeft: SUB_AGENT_CONNECTOR_RUN }, children: _jsx(ShowMoreButton, { loading: children.isFetchingNextPage, failed: children.isFetchNextPageError, label: t('sessionList.showMore'), onClick: () => children.fetchNextPage() }) })] }))] }));
+    return (_jsxs(_Fragment, { children: [rows.map((child, index) => (_jsx(ChildRunBranch, { continues: index < rows.length - 1 || children.hasNextPage, children: renderNode(child) }, child.session_id))), children.hasNextPage && (_jsx(ChildRunBranch, { continues: false, children: _jsx(ShowMoreButton, { loading: children.isFetchingNextPage, failed: children.isFetchNextPageError, label: t('sessionList.showMore'), onClick: () => children.fetchNextPage() }) }))] }));
 }
-function ProjectSessionRow({ session, href, isActive, isSwitching, onNavigate, displayTitle, onDelete, onPin, onArchive, onShare, onRename, onEditLabels, onRestart, isRestarting, onStop, isStopping, canFork = false, isForking = false, onFork, childCount = 0, spawnedCount = 0, spawnedOpen = false, onToggleSpawned, reviewCount = 0, changeRequests, canShowHoverCard, inSharedGroup = false, }) {
+function ProjectSessionRow({ session, href, isActive, isSwitching, onNavigate, displayTitle, onDelete, onPin, onArchive, onShare, onRename, onEditLabels, onRestart, isRestarting, onStop, isStopping, canFork = false, isForking = false, onFork, spawned = false, subagentCount = 0, spawnedCount = 0, childRunsOpen = false, onToggleChildRuns, reviewCount = 0, awaitingAnswer = false, changeRequests, canShowHoverCard, inSharedGroup = false, }) {
     const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
     const t = useTranslations('sidebar');
     const tPinArchive = useTranslations('sidebar.pinArchive');
@@ -549,7 +548,8 @@ function ProjectSessionRow({ session, href, isActive, isSwitching, onNavigate, d
     // listing the very change requests that made it `needs-you`. Both now read the
     // same `reviewCount` prop, so they agree by construction rather than by luck.
     const displayStatus = sessionDisplayStatus(session, reviewCount);
-    const sessionLink = (_jsxs(HoverPrefetchLink, { href: href, prefetch: true, onClick: onNavigate, ...openIntent, "aria-busy": isSwitching || undefined, "aria-current": isActive ? 'page' : undefined, "aria-describedby": descriptionId, className: "focus-visible:ring-kortix-base flex min-w-0 flex-1 items-center gap-2 self-stretch rounded-md py-1 focus-visible:ring-[0.6px] focus-visible:outline-none", children: [_jsx("div", { className: "size-4 shrink-0", children: _jsx(SessionStatusDot, { session: session, reviewCount: reviewCount }) }), isMeta && (_jsx(Hint, { side: "top", label: t('metaCoordinator'), children: _jsx("span", { className: "text-muted-foreground flex size-4 shrink-0 items-center justify-center", children: _jsx(SparkleIcon, { className: "size-3.5", weight: "fill" }) }) })), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx(SessionTitle, { title: displayTitle, className: cn('min-w-0', isActive && 'font-medium') }), _jsx("span", { className: "hidden max-md:block pointer-coarse:block [@media(hover:none)]:block", "aria-hidden": true, "data-session-mobile-created-at": "true", children: _jsx(MobileSessionCreatedTime, { createdAt: session.created_at }) })] }), childCount > 0 && _jsx(CountBadge, { count: childCount }), spawnedCount > 0 && onToggleSpawned && (_jsx(SpawnedToggle, { count: spawnedCount, open: spawnedOpen, onToggle: onToggleSpawned, clearOfMenu: !hasIndicators })), hasIndicators && (_jsxs("div", { className: cn('flex shrink-0 items-center gap-0 transition-none', 'max-md:hidden pointer-coarse:hidden [@media(hover:none)]:hidden', 'group-hover/session-list:pointer-events-none group-hover/session-list:opacity-0', 'group-has-data-[state=open]/session-list:pointer-events-none group-has-data-[state=open]/session-list:opacity-0'), "data-session-indicators": "true", children: [showStarter && (_jsx("span", { className: "flex size-5 shrink-0 items-center justify-center", "data-session-source": "true", "data-session-starter": starter.type, children: _jsx(Hint, { side: "top", label: t('startedByLabel', { name: starter.label }), children: _jsx("span", { className: "text-muted-foreground flex size-5 items-center justify-center", children: _jsx(SessionStarterMark, { session: session, starter: starter, iconClassName: "size-3", avatarClassName: "size-5" }) }) }) })), !inSharedGroup && _jsx(SessionSharedIcon, { session: session })] }))] }));
+    const waitingOn = awaitingAnswer ? 'answer' : 'review';
+    const sessionLink = (_jsxs(HoverPrefetchLink, { href: href, prefetch: true, onClick: onNavigate, ...openIntent, "aria-busy": isSwitching || undefined, "aria-current": isActive ? 'page' : undefined, "aria-describedby": descriptionId, className: "focus-visible:ring-kortix-base flex min-w-0 flex-1 items-center gap-2 self-stretch rounded-md py-1 focus-visible:ring-[0.6px] focus-visible:outline-none", children: [_jsx("div", { className: "size-4 shrink-0", children: spawned ? (_jsx(ArrowsSplitIcon, { "aria-hidden": true, className: "text-muted-foreground size-4" })) : (_jsx(SessionStatusDot, { session: session, reviewCount: reviewCount, waitingOn: waitingOn, changeRequests: changeRequests })) }), isMeta && (_jsx(Hint, { side: "top", label: t('metaCoordinator'), children: _jsx("span", { className: "text-muted-foreground flex size-4 shrink-0 items-center justify-center", children: _jsx(SparkleIcon, { className: "size-3.5", weight: "fill" }) }) })), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx(SessionTitle, { title: displayTitle, className: cn('min-w-0', isActive && 'font-medium') }), _jsx("span", { className: "hidden max-md:block pointer-coarse:block [@media(hover:none)]:block", "aria-hidden": true, "data-session-mobile-created-at": "true", children: _jsx(MobileSessionCreatedTime, { createdAt: session.created_at }) })] }), subagentCount + spawnedCount > 0 && onToggleChildRuns && (_jsx(ChildRunsToggle, { count: subagentCount + spawnedCount, open: childRunsOpen, onToggle: onToggleChildRuns, clearOfMenu: !hasIndicators })), hasIndicators && (_jsxs("div", { className: cn('flex shrink-0 items-center gap-0 transition-none', 'max-md:hidden pointer-coarse:hidden [@media(hover:none)]:hidden', 'group-hover/session-list:pointer-events-none group-hover/session-list:opacity-0', 'group-has-data-[state=open]/session-list:pointer-events-none group-has-data-[state=open]/session-list:opacity-0'), "data-session-indicators": "true", children: [showStarter && (_jsx("span", { className: "flex size-5 shrink-0 items-center justify-center", "data-session-source": "true", "data-session-starter": starter.type, children: _jsx(Hint, { side: "top", label: t('startedByLabel', { name: starter.label }), children: _jsx("span", { className: "text-muted-foreground flex size-5 items-center justify-center", children: _jsx(SessionStarterMark, { session: session, starter: starter, iconClassName: "size-3", avatarClassName: "size-5" }) }) }) })), !inSharedGroup && _jsx(SessionSharedIcon, { session: session })] }))] }));
     return (_jsx("div", { className: "group/session-list block", children: _jsxs("div", { className: cn(
             // --session-row-surface paints the row AND the title fade in the same
             // style pass. Do not transition background — transition-colors made the
@@ -558,7 +558,7 @@ function ProjectSessionRow({ session, href, isActive, isSwitching, onNavigate, d
             // the end fade can never disagree with the row fill.
             'relative flex h-8 cursor-pointer items-center gap-2 rounded-md px-2 transition-none', 'max-md:h-auto max-md:min-h-12 max-md:gap-1', '[@media(hover:none)]:h-auto [@media(hover:none)]:min-h-12 [@media(hover:none)]:gap-1', 'pointer-coarse:h-auto pointer-coarse:min-h-12 pointer-coarse:gap-1', isActive
                 ? 'text-sidebar-foreground bg-(--session-row-surface) font-medium [--session-row-surface:var(--sidebar-row)]'
-                : 'text-muted-foreground hover:text-sidebar-foreground bg-(--session-row-surface) [--session-row-surface:var(--background)] hover:[--session-row-surface:var(--sidebar-row)]'), children: [canShowHoverCard ? (_jsx(SessionBriefHoverCard, { sessionId: session.session_id, title: displayTitle, status: displayStatus, createdAt: session.created_at, source: source, changeRequests: changeRequests, labels: session.labels, projectId: session.project_id, children: sessionLink })) : (sessionLink), _jsx(SessionBriefDescription, { id: descriptionId, status: displayStatus, createdAt: session.created_at, source: source, changeRequests: changeRequests }), _jsxs(DropdownMenu, { open: menuOpen, onOpenChange: setMenuOpen, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", type: "button", "aria-label": t('sessionList.actionsFor', { title: displayTitle }), className: cn(SESSION_MENU_TRIGGER_CLASS, 'absolute top-1/2 right-1 z-10 -translate-y-1/2', 'bg-(--session-row-surface)', 'pointer-events-none opacity-0', 'group-hover/session-list:pointer-events-auto group-hover/session-list:opacity-100', 'focus-visible:pointer-events-auto focus-visible:opacity-100', 'data-[state=open]:pointer-events-auto data-[state=open]:opacity-100', SESSION_MENU_TRIGGER_TOUCH_CLASS), onClick: (e) => {
+                : 'text-muted-foreground hover:text-sidebar-foreground bg-(--session-row-surface) [--session-row-surface:var(--background)] hover:[--session-row-surface:var(--sidebar-row)]'), children: [canShowHoverCard ? (_jsx(SessionBriefHoverCard, { sessionId: session.session_id, title: displayTitle, status: displayStatus, createdAt: session.created_at, source: source, changeRequests: changeRequests, waitingOn: waitingOn, spawned: spawned, subagentCount: subagentCount, spawnedCount: spawnedCount, labels: session.labels, projectId: session.project_id, children: sessionLink })) : (sessionLink), _jsx(SessionBriefDescription, { id: descriptionId, status: displayStatus, createdAt: session.created_at, source: source, changeRequests: changeRequests, waitingOn: waitingOn }), _jsxs(DropdownMenu, { open: menuOpen, onOpenChange: setMenuOpen, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", type: "button", "aria-label": t('sessionList.actionsFor', { title: displayTitle }), className: cn(SESSION_MENU_TRIGGER_CLASS, 'absolute top-1/2 right-1 z-10 -translate-y-1/2', 'bg-(--session-row-surface)', 'pointer-events-none opacity-0', 'group-hover/session-list:pointer-events-auto group-hover/session-list:opacity-100', 'focus-visible:pointer-events-auto focus-visible:opacity-100', 'data-[state=open]:pointer-events-auto data-[state=open]:opacity-100', SESSION_MENU_TRIGGER_TOUCH_CLASS), onClick: (e) => {
                                     e.preventDefault();
                                     e.stopPropagation();
                                 }, children: _jsx(DotsThreeIcon, { className: "size-4" }) }) }), _jsxs(DropdownMenuContent, { align: "start", side: "right", className: "w-44", children: [_jsxs(DropdownMenuItem, { className: "cursor-pointer", onSelect: () => deferAfterClose(() => onRename(session.session_id, displayTitle)), children: [_jsx(PencilSimpleIcon, {}), tI18nComplete.raw('text3064d79a295c')] }), _jsxs(DropdownMenuItem, { className: "cursor-pointer", onSelect: () => deferAfterClose(() => onEditLabels(session)), children: [_jsx(TagIcon, {}), t('labels.menu')] }), _jsxs(DropdownMenuItem, { className: "cursor-pointer", onSelect: () => deferAfterClose(() => onShare(session)), children: [_jsx(Share, {}), session.can_manage_sharing !== false
@@ -596,16 +596,13 @@ const SUB_AGENT_CONNECTOR_RUN = 'calc(var(--spacing) * 3.5)';
 function SubAgentConnector() {
     return (_jsx("span", { "aria-hidden": true, className: "border-border pointer-events-none absolute top-0 left-0 h-4 rounded-bl-md border-b-2 border-l-2", style: { width: SUB_AGENT_CONNECTOR_RUN } }));
 }
-function ProjectSubsessionRow({ title, href, isActive, updatedAt, }) {
+function ProjectSubsessionRow({ id, title, href, isActive, createdAt, updatedAt, }) {
     const relative = updatedAt
         ? shortRelative(formatDistanceToNowStrict(new Date(updatedAt), { addSuffix: false }))
         : '';
-    return (
-    // Same reason as ProjectSessionRow: sub-session rows are session routes too,
-    // so prefetching them on mount multiplies the per-open RSC storm.
-    _jsx(HoverPrefetchLink, { href: href, className: "block", children: _jsxs("div", { className: cn('flex h-8 cursor-pointer items-center gap-2 rounded-lg px-2 text-sm', isActive ? 'bg-sidebar-accent text-sidebar-foreground font-medium' : ''), children: [_jsx("span", { title: title, className: cn('flex-1 truncate', isActive && 'font-medium'), children: title }), relative && _jsx("span", { className: SESSION_RELATIVE_TIME_CLASS, children: relative })] }) }));
+    return (_jsx(SubagentHoverCard, { id: id, title: title, createdAt: createdAt, updatedAt: updatedAt, children: _jsx(HoverPrefetchLink, { href: href, className: "block", children: _jsxs("div", { className: cn('flex h-8 cursor-pointer items-center gap-2 rounded-lg px-2 text-sm', isActive ? 'bg-sidebar-accent text-sidebar-foreground font-medium' : ''), children: [_jsx(RobotIcon, { "aria-hidden": true, className: "text-muted-foreground size-4 shrink-0" }), _jsx("span", { className: cn('flex-1 truncate', isActive && 'font-medium'), children: title }), relative && _jsx("span", { className: SESSION_RELATIVE_TIME_CLASS, children: relative })] }) }) }));
 }
-function SessionStatusDot({ session, reviewCount = 0, }) {
+function SessionStatusDot({ session, reviewCount = 0, waitingOn, changeRequests, }) {
     const display = sessionDisplayStatus(session, reviewCount);
-    return (_jsx("div", { className: "flex size-4 shrink-0 items-center justify-center", children: _jsx(SessionStatusMark, { status: display }) }));
+    return (_jsx("div", { className: "flex size-4 shrink-0 items-center justify-center", children: _jsx(SessionStatusMark, { status: display, waitingOn: waitingOn, overdue: isReviewOverdue(changeRequests) }) }));
 }

package/dist/workspace/sidebar/session-brief-hover-card.d.ts

@@ -9,31 +9,36 @@ interface SessionBrief {
     changeRequests: readonly ChangeRequest[];
     /** The session's free-form labels; the sidebar row has no room for them. */
     labels?: readonly string[];
+    /** `needs-you` only: what the session waits on, see `SessionStatusMark`. */
+    waitingOn?: 'answer' | 'review';
+    /** The session was spawned by another one and is drawn under it. */
+    spawned?: boolean;
+    /** What this session started: its sub-agents and the sessions it spawned. */
+    subagentCount?: number;
+    spawnedCount?: number;
 }
 interface SessionBriefInteractionProps {
     projectId: string;
 }
 /**
- * Radix HoverCard strips every tab stop inside its content — `getTabbableNodes`
- * runs on each render and sets `tabindex="-1"` — because a hover card is a
- * preview surface, not a menu. Pointer clicks and `cmd`-clicks on the change
- * rows still work; the keyboard route to the same changes is the footer's
- * Review pill, which is a Popover and therefore fully tabbable. Do not try to
- * restore focusability here: the effect has no dependency array and will
- * overwrite whatever you set on the next commit.
+ * The one card for the whole session list. Rows do not own a card: the active
+ * row renders its brief into this host's slot (`SessionBriefCard`), and the
+ * host lines up with that row. Moving to the next row therefore moves the same
+ * card, with a 150ms glide, instead of unmounting one card and mounting another
+ * at a new place. Radix HoverCard cannot do this: it exports no `Anchor`, so a
+ * single instance cannot follow the pointer between triggers.
  *
- * Timing and exclusivity belong to `useSessionHoverStore`, not to this instance,
- * because both are properties of the LIST: only one card may be open at a time,
- * and the second row the pointer visits must not pay the opening delay again.
- * Radix's own delays are zeroed and its `onOpenChange` left unwired — with
- * `closeDelay={0}` it would report a close the instant the pointer left the row,
- * cancelling the window in which the pointer travels into the card. The store is
- * the only thing that decides whether this card is showing.
+ * The first open fades in over 100ms and does not move: the card opens to the
+ * right, into the path the pointer is already taking. The glide is only for a
+ * move between rows, never for keyboard focus or reduced motion.
  *
- * `animated={false}` for the reason submenus opt out of their enter animation:
- * the card opens to the right, into the path the pointer is already taking, so
- * an enter animation is time spent moving content away from the hand.
+ * The left padding is the gap between row and card. It is part of the card's
+ * box, so the pointer never leaves on its way in and the card needs no close
+ * grace for the crossing beyond the store's own.
+ *
+ * Mount it once, client-side only, where hover cards can show at all.
  */
+export declare function SessionBriefCardHost(): import("react").ReactPortal;
 export declare function SessionBriefHoverCard({ sessionId, children, ...brief }: SessionBrief & SessionBriefInteractionProps & {
     sessionId: string;
     children: ReactElement;
@@ -42,10 +47,22 @@ export declare function SessionBriefHoverCard({ sessionId, children, ...brief }:
  * The same brief remains available to keyboard and screen-reader users when
  * the visual HoverCard is absent or intentionally ignored by assistive tech.
  */
-export declare function SessionBriefDescription({ id, status, createdAt, source, changeRequests, }: Omit<SessionBrief, 'title'> & {
+export declare function SessionBriefDescription({ id, status, createdAt, source, changeRequests, waitingOn, }: Omit<SessionBrief, 'title'> & {
     id: string;
 }): import("react").JSX.Element;
 export declare function MobileSessionCreatedTime({ createdAt }: {
     createdAt: string;
 }): import("react").JSX.Element;
+/**
+ * The hover card of a sub-agent row: what it is and when it ran. Same store,
+ * same shell as `SessionBriefHoverCard`, so one card is open at a time across
+ * sessions, sub-agents and spawned children, and moving between them is free.
+ */
+export declare function SubagentHoverCard({ id, title, createdAt, updatedAt, children, }: {
+    id: string;
+    title: string;
+    createdAt: number | null;
+    updatedAt: number | null;
+    children: ReactElement;
+}): import("react").JSX.Element;
 export {};

package/dist/workspace/sidebar/session-brief-hover-card.js

@@ -2,20 +2,25 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { HoverPrefetchLink } from '../../internal/components/hover-prefetch-link.js';
 import { SESSION_STATUS_TRANSLATION_KEY, } from '../../session/actions/session-label.js';
-import { HoverCard, HoverCardContent, HoverCardTrigger } from '../../primitives/hover-card.js';
+import { FLOATING_PANEL_SURFACE } from '../../primitives/menu-recipe.js';
+import { usePortalContainer } from '../../lib/portal-container.js';
+import { cn } from '../../lib/utils.js';
+import { floatingZ, useDialogDepth } from '../../lib/z-stack.js';
 import { LocalTime } from '../../primitives/local-time.js';
 import { menuRow } from '../../primitives/menu-recipe.js';
 import { CR_ID_PREFIX } from '../review/review-actions.js';
 import { reviewHref } from '../../internal/lib/capability-tab-routes.js';
 import { useTranslations } from '../../i18n/index.js';
 import { useSessionHoverStore } from '../../internal/stores/session-hover-store.js';
-import { GitDiffIcon } from '@phosphor-icons/react';
+import { ArrowsSplitIcon, GitDiffIcon, RobotIcon } from '@phosphor-icons/react';
 import { formatDistanceToNowStrict } from 'date-fns';
-import { useEffect } from 'react';
+import { Slot } from 'radix-ui';
+import { useEffect, useLayoutEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
 import { shortRelative } from '../../session/actions/project-session-list-helpers.js';
 import { SessionLabelBadges } from '../sessions/session-label-badges.js';
 import { SOURCE_ICONS } from './session-source-icons.js';
-import { SessionStatusMark } from './session-status-mark.js';
+import { isReviewOverdue, SessionStatusMark } from './session-status-mark.js';
 const DATE_TIME_OPTIONS = {
     year: 'numeric',
     month: 'short',
@@ -40,8 +45,10 @@ const CHANGE_REQUEST_STATUS_KEY = {
     merged: 'changeRequestStatus.merged',
     closed: 'changeRequestStatus.closed',
 };
-function useStatusLabel(status) {
+function useStatusLabel(status, waitingOn) {
     const t = useTranslations('sidebar.sessionList.status');
+    if (status === 'needs-you' && waitingOn === 'answer')
+        return t('needsInput');
     return t(SESSION_STATUS_TRANSLATION_KEY[status]);
 }
 function SessionCreatedTime({ createdAt, className }) {
@@ -87,59 +94,118 @@ function ChangeRequestRow({ changeRequest, projectId, onDismiss, }) {
  * `px-2.5`, so 3.5 spacing steps is exactly where the row labels start. The
  * title and the change titles share one left edge.
  */
-function SessionBriefContent({ title, status, createdAt, source, changeRequests, labels, projectId, onDismiss, }) {
+function SessionBriefContent({ title, status, createdAt, source, changeRequests, labels, waitingOn, spawned = false, subagentCount = 0, spawnedCount = 0, projectId, onDismiss, }) {
     const SourceIcon = source.kind === 'chat' ? null : SOURCE_ICONS[source.kind];
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "space-y-1.5 px-3.5 py-2.5", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [_jsx("p", { className: "text-foreground truncate text-sm font-medium", children: title }), _jsx("span", { className: "shrink-0", children: _jsx(SessionStatusMark, { status: status }) })] }), _jsx(RelativeCreatedTime, { createdAt: createdAt })] }), SourceIcon ? (_jsxs("div", { className: "text-muted-foreground flex min-w-0 items-center gap-2 text-xs", children: [_jsx(SourceIcon, { className: "size-3.5 shrink-0" }), _jsxs("span", { className: "text-foreground min-w-0 truncate", children: [source.label, source.triggerSlug ? (_jsxs("span", { className: "text-muted-foreground", children: [" \u00B7 ", source.triggerSlug] })) : null] })] })) : null, labels?.length ? _jsx(SessionLabelBadges, { session: { labels: [...labels] }, max: 6, className: "flex-wrap" }) : null] }), changeRequests.length > 0 ? (_jsx("ul", { className: "border-border max-h-64 overflow-y-auto overscroll-contain border-t p-1", children: changeRequests.map((changeRequest) => (_jsx("li", { children: _jsx(ChangeRequestRow, { changeRequest: changeRequest, projectId: projectId, onDismiss: onDismiss }) }, changeRequest.cr_id))) })) : null] }));
+    const statusLabel = useStatusLabel(status, waitingOn);
+    const t = useTranslations('sidebar.sessionList.brief');
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "space-y-1.5 px-3.5 py-2.5", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("p", { className: "text-foreground min-w-0 flex-1 truncate text-sm font-medium", children: title }), _jsx(RelativeCreatedTime, { createdAt: createdAt })] }), _jsxs("div", { className: "text-muted-foreground flex items-center gap-2 text-xs", children: [_jsx(SessionStatusMark, { status: status, waitingOn: waitingOn, overdue: isReviewOverdue(changeRequests) }), _jsx("span", { children: statusLabel })] }), spawned && (_jsxs("div", { className: "text-muted-foreground flex items-center gap-2 text-xs", children: [_jsx(ArrowsSplitIcon, { "aria-hidden": true, className: "size-4 shrink-0" }), _jsx("span", { children: t('spawned') })] })), subagentCount > 0 && (_jsxs("div", { className: "text-muted-foreground flex items-center gap-2 text-xs", children: [_jsx(RobotIcon, { "aria-hidden": true, className: "size-4 shrink-0" }), _jsx("span", { children: t('subAgentCount', { count: subagentCount }) })] })), spawnedCount > 0 && (_jsxs("div", { className: "text-muted-foreground flex items-center gap-2 text-xs", children: [_jsx(ArrowsSplitIcon, { "aria-hidden": true, className: "size-4 shrink-0" }), _jsx("span", { children: t('spawnedCount', { count: spawnedCount }) })] })), SourceIcon ? (_jsxs("div", { className: "text-muted-foreground flex min-w-0 items-center gap-2 text-xs", children: [_jsx(SourceIcon, { className: "size-3.5 shrink-0" }), _jsxs("span", { className: "text-foreground min-w-0 truncate", children: [source.label, source.triggerSlug ? (_jsxs("span", { className: "text-muted-foreground", children: [" \u00B7 ", source.triggerSlug] })) : null] })] })) : null, labels?.length ? _jsx(SessionLabelBadges, { session: { labels: [...labels] }, max: 6, className: "flex-wrap" }) : null] }), changeRequests.length > 0 ? (_jsx("ul", { className: "border-border max-h-64 overflow-y-auto overscroll-contain border-t p-1", children: changeRequests.map((changeRequest) => (_jsx("li", { children: _jsx(ChangeRequestRow, { changeRequest: changeRequest, projectId: projectId, onDismiss: onDismiss }) }, changeRequest.cr_id))) })) : null] }));
 }
+const CARD_EDGE_PX = 8;
 /**
- * Radix HoverCard strips every tab stop inside its content — `getTabbableNodes`
- * runs on each render and sets `tabindex="-1"` — because a hover card is a
- * preview surface, not a menu. Pointer clicks and `cmd`-clicks on the change
- * rows still work; the keyboard route to the same changes is the footer's
- * Review pill, which is a Popover and therefore fully tabbable. Do not try to
- * restore focusability here: the effect has no dependency array and will
- * overwrite whatever you set on the next commit.
+ * The one card for the whole session list. Rows do not own a card: the active
+ * row renders its brief into this host's slot (`SessionBriefCard`), and the
+ * host lines up with that row. Moving to the next row therefore moves the same
+ * card, with a 150ms glide, instead of unmounting one card and mounting another
+ * at a new place. Radix HoverCard cannot do this: it exports no `Anchor`, so a
+ * single instance cannot follow the pointer between triggers.
+ *
+ * The first open fades in over 100ms and does not move: the card opens to the
+ * right, into the path the pointer is already taking. The glide is only for a
+ * move between rows, never for keyboard focus or reduced motion.
  *
- * Timing and exclusivity belong to `useSessionHoverStore`, not to this instance,
- * because both are properties of the LIST: only one card may be open at a time,
- * and the second row the pointer visits must not pay the opening delay again.
- * Radix's own delays are zeroed and its `onOpenChange` left unwired — with
- * `closeDelay={0}` it would report a close the instant the pointer left the row,
- * cancelling the window in which the pointer travels into the card. The store is
- * the only thing that decides whether this card is showing.
+ * The left padding is the gap between row and card. It is part of the card's
+ * box, so the pointer never leaves on its way in and the card needs no close
+ * grace for the crossing beyond the store's own.
  *
- * `animated={false}` for the reason submenus opt out of their enter animation:
- * the card opens to the right, into the path the pointer is already taking, so
- * an enter animation is time spent moving content away from the hand.
+ * Mount it once, client-side only, where hover cards can show at all.
  */
-export function SessionBriefHoverCard({ sessionId, children, ...brief }) {
-    const open = useSessionHoverStore((state) => state.activeSessionId === sessionId);
+export function SessionBriefCardHost() {
+    const activeSessionId = useSessionHoverStore((state) => state.activeSessionId);
+    const anchor = useSessionHoverStore((state) => state.anchor);
+    const via = useSessionHoverStore((state) => state.via);
+    const setSlot = useSessionHoverStore((state) => state.setSlot);
     const openSession = useSessionHoverStore((state) => state.openSession);
     const closeSession = useSessionHoverStore((state) => state.closeSession);
     const dismiss = useSessionHoverStore((state) => state.dismiss);
+    const container = usePortalContainer();
+    const depth = useDialogDepth();
+    const wrapperRef = useRef(null);
+    const shown = useRef(false);
+    const visible = !!activeSessionId && !!anchor;
+    // Before paint: line up with the row, kept inside the viewport.
+    useLayoutEffect(() => {
+        const el = wrapperRef.current;
+        if (!el || !visible || !anchor) {
+            shown.current = false;
+            return;
+        }
+        const rect = anchor.getBoundingClientRect();
+        const top = Math.max(CARD_EDGE_PX, Math.min(rect.top, window.innerHeight - CARD_EDGE_PX - el.offsetHeight));
+        const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+        // A move between rows glides; the first open fades in, as the reminders card does.
+        el.style.transition =
+            shown.current && via === 'pointer' && !reduce
+                ? 'transform var(--duration-normal) var(--ease-in-out)'
+                : 'opacity var(--duration-fast) var(--ease-out)';
+        el.style.transform = `translate(${rect.right}px, ${top}px)`;
+        shown.current = true;
+    }, [visible, activeSessionId, anchor, via]);
+    // WCAG 1.4.13: dismissible without moving the pointer. A scroll moves the
+    // row away from the card, so it closes too, unless it scrolls the card itself.
+    useEffect(() => {
+        if (!visible)
+            return;
+        const onKey = (event) => event.key === 'Escape' && dismiss();
+        const onScroll = (event) => {
+            if (!wrapperRef.current?.contains(event.target))
+                dismiss();
+        };
+        document.addEventListener('keydown', onKey);
+        window.addEventListener('scroll', onScroll, true);
+        window.addEventListener('resize', dismiss);
+        return () => {
+            document.removeEventListener('keydown', onKey);
+            window.removeEventListener('scroll', onScroll, true);
+            window.removeEventListener('resize', dismiss);
+        };
+    }, [visible, dismiss]);
+    return createPortal(_jsx("div", { ref: wrapperRef, "data-slot": "session-brief-card", className: cn('fixed top-0 left-0 pl-3.5 starting:opacity-0', !visible && 'hidden'), style: { zIndex: floatingZ(depth) }, onPointerEnter: () => activeSessionId && openSession(activeSessionId), onPointerLeave: () => activeSessionId && closeSession(activeSessionId), children: _jsx("div", { ref: setSlot, className: cn(FLOATING_PANEL_SURFACE, 'w-72 overflow-hidden rounded-md shadow-xs') }) }), container ?? document.body);
+}
+/**
+ * A row's trigger plus its brief, rendered into the shared card while the row
+ * is active. Timing and exclusivity belong to `useSessionHoverStore`: only one
+ * card may show at a time, and the second row the pointer visits must not pay
+ * the opening delay again.
+ */
+function SessionBriefCard({ id, children, content, }) {
+    const open = useSessionHoverStore((state) => state.activeSessionId === id);
+    const slot = useSessionHoverStore((state) => state.slot);
+    const openSession = useSessionHoverStore((state) => state.openSession);
+    const closeSession = useSessionHoverStore((state) => state.closeSession);
     // A row can be filtered out, or the sidebar unmounted, while its card shows.
     // Without this the store keeps naming a row that no longer exists and the
     // group is still warm the next time the list mounts.
     useEffect(() => () => {
         const store = useSessionHoverStore.getState();
-        if (store.activeSessionId === sessionId)
+        if (store.activeSessionId === id)
             store.dismiss();
-    }, [sessionId]);
-    return (_jsxs(HoverCard, { open: open, openDelay: 0, closeDelay: 0, children: [_jsx(HoverCardTrigger, { asChild: true, onPointerEnter: () => openSession(sessionId), onPointerLeave: () => closeSession(sessionId), onFocus: () => openSession(sessionId), onBlur: () => closeSession(sessionId), children: children }), _jsx(HoverCardContent, { side: "right", align: "start", sideOffset: 14, animated: false, className: "w-72 overflow-hidden rounded-md p-0 shadow-xs", onPointerEnter: () => openSession(sessionId), onPointerLeave: () => closeSession(sessionId), 
-                // WCAG 1.4.13: content shown on hover must be dismissible without moving
-                // the pointer. Radix's own dismissal path runs through `setOpen`, which
-                // is inert here because the store owns `open`, so Escape is wired
-                // straight to the store. DismissableLayer listens on the document, so it
-                // fires even though nothing inside the card can hold focus.
-                onEscapeKeyDown: dismiss, children: _jsx(SessionBriefContent, { ...brief, onDismiss: dismiss }) })] }));
+    }, [id]);
+    return (_jsxs(_Fragment, { children: [_jsx(Slot.Root, { "data-state": open ? 'open' : 'closed', onPointerEnter: (event) => {
+                    if (event.pointerType !== 'touch')
+                        openSession(id, event.currentTarget, 'pointer');
+                }, onPointerLeave: () => closeSession(id), onFocus: (event) => openSession(id, event.currentTarget, 'focus'), onBlur: () => closeSession(id), children: children }), open && slot ? createPortal(content, slot) : null] }));
+}
+export function SessionBriefHoverCard({ sessionId, children, ...brief }) {
+    const dismiss = useSessionHoverStore((state) => state.dismiss);
+    return (_jsx(SessionBriefCard, { id: sessionId, content: _jsx(SessionBriefContent, { ...brief, onDismiss: dismiss }), children: children }));
 }
 /**
  * The same brief remains available to keyboard and screen-reader users when
  * the visual HoverCard is absent or intentionally ignored by assistive tech.
  */
-export function SessionBriefDescription({ id, status, createdAt, source, changeRequests, }) {
+export function SessionBriefDescription({ id, status, createdAt, source, changeRequests, waitingOn, }) {
     const t = useTranslations('sidebar.sessionList.brief');
-    const statusLabel = useStatusLabel(status);
+    const statusLabel = useStatusLabel(status, waitingOn);
     return (_jsxs("span", { id: id, className: "sr-only", children: [t('status'), ": ", statusLabel, ". ", t('created'), ": ", _jsx(SessionCreatedTime, { createdAt: createdAt }), ".", source.kind !== 'chat'
                 ? ` ${t('source')}: ${source.label}${source.triggerSlug ? `, ${source.triggerSlug}` : ''}.`
                 : null, ' ', changeRequests.length > 0
@@ -151,3 +217,14 @@ export function SessionBriefDescription({ id, status, createdAt, source, changeR
 export function MobileSessionCreatedTime({ createdAt }) {
     return (_jsx(SessionCreatedTime, { createdAt: createdAt, className: "text-muted-foreground block truncate text-xs leading-4 tabular-nums" }));
 }
+/**
+ * The hover card of a sub-agent row: what it is and when it ran. Same store,
+ * same shell as `SessionBriefHoverCard`, so one card is open at a time across
+ * sessions, sub-agents and spawned children, and moving between them is free.
+ */
+export function SubagentHoverCard({ id, title, createdAt, updatedAt, children, }) {
+    const t = useTranslations('sidebar.sessionList.brief');
+    const created = createdAt ?? updatedAt;
+    const createdIso = created ? new Date(created).toISOString() : null;
+    return (_jsx(SessionBriefCard, { id: id, content: _jsxs("div", { className: "space-y-1.5 px-3.5 py-2.5", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("p", { className: "text-foreground min-w-0 flex-1 truncate text-sm font-medium", children: title }), createdIso && _jsx(RelativeCreatedTime, { createdAt: createdIso })] }), _jsxs("div", { className: "text-muted-foreground flex items-center gap-2 text-xs", children: [_jsx(RobotIcon, { "aria-hidden": true, className: "size-4 shrink-0" }), _jsx("span", { children: t('subAgent') })] }), createdIso && (_jsxs("div", { className: "text-muted-foreground text-xs", children: [t('created'), ": ", _jsx(SessionCreatedTime, { createdAt: createdIso })] }))] }), children: children }));
+}