@kortix/ui 0.14.4 → 0.14.6

package/dist/terminal/session-terminal-panel.js

@@ -94,11 +94,9 @@ export function SessionTerminalPanel({ sessionId, projectId, projectSessionId, h
         setOptimisticPty(null);
         setTerminalPty(sessionId, null);
     }, [sessionId, setTerminalPty]);
-    useEffect(() => {
-        if (listedPty && optimisticPty?.id === listedPty.id) {
-            setOptimisticPty(null);
-        }
-    }, [listedPty, optimisticPty?.id]);
+    if (listedPty && optimisticPty?.id === listedPty.id) {
+        setOptimisticPty(null);
+    }
     useEffect(() => {
         if (!terminalPtyId || isLoading || !ptys || pty || optimisticPty?.id === terminalPtyId)
             return;

package/dist/theme/theme.js

@@ -123,8 +123,9 @@ function checkName(name) {
     return name;
 }
 function steps(field, allowed, values) {
+    const allowedSet = new Set(allowed);
     return Object.entries(values ?? {}).flatMap(([k, v]) => {
-        if (!allowed.includes(k))
+        if (!allowedSet.has(k))
             throw new Error(`@kortix/ui theme: unknown ${field} step "${k}"`);
         return v === undefined ? [] : [[k, v]];
     });

package/dist/workspace/projects/modal/github-import-pickers.js

@@ -10,7 +10,7 @@ import { Github } from '../../../internal/icons/github.js';
 import { cn } from '../../../internal/lib/utils.js';
 import { CaretDownIcon as CaretDown, GitBranchIcon as GitBranch, MagnifyingGlassIcon as Search, } from '@phosphor-icons/react';
 import { useTranslations } from '../../../i18n/index.js';
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 /** Varied so the placeholder reads as a list of names, not a barcode. */
 const SKELETON_WIDTHS = ['w-3/5', 'w-2/5', 'w-1/2', 'w-3/4', 'w-1/3'];
 /** Above this many options the list is fixed-height (see `SearchPicker`). */
@@ -28,13 +28,14 @@ function SearchPicker({ value, options, loading, disabled, loadingLabel, placeho
     const filtered = normalizedSearch
         ? options.filter((option) => option.keywords.includes(normalizedSearch))
         : options;
-    useEffect(() => {
-        if (!open) {
+    const handleOpenChange = (next) => {
+        setOpen(next);
+        if (!next) {
             setSearch('');
             onSearchChange?.('');
         }
-    }, [onSearchChange, open]);
-    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, modal: false, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { type: "button", disabled: disabled, className: cn(triggerVariants({ size: 'md' }), 'w-full'), children: [_jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [_jsx("span", { className: "text-muted-foreground flex shrink-0 [&_svg]:size-4", children: icon }), _jsx("span", { className: cn('min-w-0 truncate', !selected && 'text-muted-foreground'), children: selected?.label ?? (firstLoad ? loadingLabel : placeholder) })] }), loading ? (_jsx(Loading, { variant: "spokes", className: "text-muted-foreground! size-4 shrink-0" })) : (_jsx(CaretDown, { className: cn(TRIGGER_CARET_CLASS, TRIGGER_ICON_SIZE.md) }))] }) }), _jsxs(PopoverContent, { side: "top", align: "start", avoidCollisions: false, className: "w-[var(--radix-popover-trigger-width)] overflow-hidden p-0", children: [_jsx("div", { className: "border-border border-b py-1", children: _jsxs(InputGroupSearch, { children: [_jsx(InputGroupSearchIcon, { children: _jsx(Search, {}) }), _jsx(InputGroupSearchInput, { size: "xs", className: "border-transparent focus:border-transparent focus:ring-0", value: search, onChange: (event) => {
+    };
+    return (_jsxs(Popover, { open: open, onOpenChange: handleOpenChange, modal: false, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { type: "button", disabled: disabled, className: cn(triggerVariants({ size: 'md' }), 'w-full'), children: [_jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [_jsx("span", { className: "text-muted-foreground flex shrink-0 [&_svg]:size-4", children: icon }), _jsx("span", { className: cn('min-w-0 truncate', !selected && 'text-muted-foreground'), children: selected?.label ?? (firstLoad ? loadingLabel : placeholder) })] }), loading ? (_jsx(Loading, { variant: "spokes", className: "text-muted-foreground! size-4 shrink-0" })) : (_jsx(CaretDown, { className: cn(TRIGGER_CARET_CLASS, TRIGGER_ICON_SIZE.md) }))] }) }), _jsxs(PopoverContent, { side: "top", align: "start", avoidCollisions: false, className: "w-[var(--radix-popover-trigger-width)] overflow-hidden p-0", children: [_jsx("div", { className: "border-border border-b py-1", children: _jsxs(InputGroupSearch, { children: [_jsx(InputGroupSearchIcon, { children: _jsx(Search, {}) }), _jsx(InputGroupSearchInput, { size: "xs", className: "border-transparent focus:border-transparent focus:ring-0", value: search, onChange: (event) => {
                                         setSearch(event.target.value);
                                         onSearchChange?.(event.target.value);
                                     }, placeholder: searchPlaceholder, autoCapitalize: "none", autoCorrect: "off", autoFocus: true })] }) }), firstLoad ? (
@@ -49,7 +50,7 @@ function SearchPicker({ value, options, loading, disabled, loadingLabel, placeho
                             const active = option.value === value;
                             return (_jsx("li", { children: _jsxs("button", { type: "button", "aria-pressed": active, className: cn(menuRow('md', 'default'), 'text-left', option.description && 'items-start', active && 'bg-primary/10 text-foreground'), onClick: () => {
                                         onValueChange(option.value);
-                                        setOpen(false);
+                                        handleOpenChange(false);
                                     }, children: [_jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("span", { className: "text-foreground truncate", children: option.label }), option.description ? (_jsx("span", { className: "text-muted-foreground truncate text-xs", children: option.description })) : null] }), option.badge ? _jsx("span", { className: "shrink-0", children: option.badge }) : null] }) }, option.value));
                         }) }))] })] }));
 }

package/dist/workspace/review/review-center.js

@@ -347,15 +347,15 @@ export function ReviewCenter({ initialItems, segment: segmentProp, onSegmentChan
             setSelectMode(false);
     }
     // If the active session filter no longer has items in this segment, reset it.
-    useEffect(() => {
-        if (sessionFilter !== 'all' && !sessionOpts.some((s) => s.sessionId === sessionFilter)) {
-            setSessionFilter('all');
-        }
-    }, [sessionOpts, sessionFilter]);
+    if (sessionFilter !== 'all' && !sessionOpts.some((s) => s.sessionId === sessionFilter)) {
+        setSessionFilter('all');
+    }
     // Keep the focus cursor in range as the visible list changes.
-    useEffect(() => {
+    const [visibleCountSeen, setVisibleCountSeen] = useState(null);
+    if (visible.length !== visibleCountSeen) {
+        setVisibleCountSeen(visible.length);
         setFocusedIdx((i) => Math.max(0, Math.min(i, visible.length - 1)));
-    }, [visible.length]);
+    }
     // Select mode: DOM focus follows the cursor (j/k, a toggled row), so Space
     // and Enter act on the row the user sees, and a pointer entry that
     // unmounts the clicked checkbox keeps focus on its row.
@@ -377,12 +377,14 @@ export function ReviewCenter({ initialItems, segment: segmentProp, onSegmentChan
     // mutation (there's no per-call settle callback threaded through `apply`),
     // so clear the pending marker here rather than leave a button spinning
     // forever if the item already left the list (e.g. a stale poll raced it).
-    useEffect(() => {
+    const [initialItemsSeen, setInitialItemsSeen] = useState(initialItems);
+    if (initialItems !== initialItemsSeen) {
+        setInitialItemsSeen(initialItems);
         if (initialItems)
             setItems(initialItems);
         setPendingId(null);
         setPendingDecision(null);
-    }, [initialItems]);
+    }
     // Detect items that arrived since the user last looked → flag them "fresh".
     // The first load of each segment seeds its known set silently (nothing is
     // "new" on open, or on a first visit to a segment).
@@ -711,9 +713,10 @@ export function ReviewCenter({ initialItems, segment: segmentProp, onSegmentChan
         },
     ];
     const confirmCount = bulkIds[confirm.verb].length;
+    const confirmIds = new Set(bulkIds[confirm.verb]);
     // Every item the verb will decide: which app, what it does, to what, how risky.
     const confirmList = (_jsx("ul", { className: "border-border divide-border max-h-72 w-full min-w-0 divide-y overflow-y-auto rounded-lg border", children: selectedItems
-            .filter((i) => bulkIds[confirm.verb].includes(i.id))
+            .filter((i) => confirmIds.has(i.id))
             .map((i) => {
             const risk = RISK_BADGE[i.risk];
             // The arguments, as the approval modal reads them: the content

package/dist/workspace/session-workspace.js

@@ -21,7 +21,7 @@ import { useKortixComputerStore } from '../internal/stores/kortix-computer-store
 import { sessionPreviewTabId, useSessionBrowserStore, } from '../internal/stores/session-browser-store.js';
 import { ProjectScope } from '../internal/project-scope.js';
 import { SessionThread } from '../session/thread/session-thread.js';
-import { memo, useCallback, useEffect, useState } from 'react';
+import { memo, useCallback, useState } from 'react';
 export const SessionLayout = memo(function SessionLayout({ sessionId, projectId, projectSessionId, children, bootStage = null, transient = false, }) {
     const isMobile = useIsMobile();
     const booting = !!bootStage;
@@ -129,15 +129,11 @@ function useSessionPanelBody({ sessionId, projectId, projectSessionId, isEasy, e
     const showTerminal = !isEasy && effectiveView === 'terminal';
     const showAudit = !isEasy && effectiveView === 'audit';
     const [terminalActivated, setTerminalActivated] = useState(false);
-    useEffect(() => {
-        if (showTerminal)
-            setTerminalActivated(true);
-    }, [showTerminal]);
+    if (showTerminal && !terminalActivated)
+        setTerminalActivated(true);
     const [browserActivated, setBrowserActivated] = useState(false);
-    useEffect(() => {
-        if (showBrowser)
-            setBrowserActivated(true);
-    }, [showBrowser]);
+    if (showBrowser && !browserActivated)
+        setBrowserActivated(true);
     // Easy mode's body is the detail shell and nothing else — the cards moved to
     // the floating overlay over the chat. The Advanced branches below are kept
     // intact (Advanced is disabled, not deleted) and are unreachable while

package/dist/workspace/sessions/deleted-session-row.js

@@ -5,6 +5,7 @@ import Loading from '../../primitives/loading.js';
 import { getSessionDisplayTitle } from '../../session/actions/project-session-list-helpers.js';
 import { useLocale, useTranslations } from '../../i18n/index.js';
 import { relativeTime } from '../../internal/lib/relative-time.js';
+import { useMemo } from 'react';
 /**
  * One row of Recently deleted (KRTX-2853): a session the viewer deleted (or,
  * as a manager, one they can open), still inside its restore window. Not a
@@ -16,10 +17,12 @@ export function DeletedSessionRow({ session, restoring, onRestore, }) {
     const title = getSessionDisplayTitle(session);
     const deletedAt = session.deleted_at ? new Date(session.deleted_at) : null;
     const restoreUntil = session.restore_until ? new Date(session.restore_until) : null;
-    const exact = (date) => new Intl.DateTimeFormat(locale, { dateStyle: 'medium', timeStyle: 'short' }).format(date);
+    const exactFormat = useMemo(() => new Intl.DateTimeFormat(locale, { dateStyle: 'medium', timeStyle: 'short' }), [locale]);
+    const dayFormat = useMemo(() => new Intl.DateTimeFormat(locale, { month: 'short', day: 'numeric' }), [locale]);
+    const exact = (date) => exactFormat.format(date);
     return (_jsxs("div", { className: "bg-popover flex items-center gap-3 rounded-md border px-3 py-2", "data-deleted-session-id": session.session_id, children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "text-foreground truncate text-sm", children: title }), _jsxs("p", { className: "text-muted-foreground truncate text-xs", children: [deletedAt ? (_jsx("time", { dateTime: session.deleted_at, title: exact(deletedAt), children: t('deletedAgo', {
                                     when: relativeTime(session.deleted_at, locale, undefined, { style: 'long' }),
                                 }) })) : null, deletedAt && restoreUntil ? ' · ' : null, restoreUntil ? (_jsx("time", { dateTime: session.restore_until, title: exact(restoreUntil), children: t('restorableUntil', {
-                                    date: new Intl.DateTimeFormat(locale, { month: 'short', day: 'numeric' }).format(restoreUntil),
+                                    date: dayFormat.format(restoreUntil),
                                 }) })) : null] })] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", disabled: restoring, onClick: () => onRestore(session), "aria-label": t('restoreNamed', { title }), children: [restoring ? _jsx(Loading, { className: "size-3.5 shrink-0" }) : null, t('restore')] })] }));
 }

package/dist/workspace/sidebar/footer/project-computer-nav.js

@@ -2,13 +2,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { PromoNavRow } from './promo-nav-row.js';
 import { LaptopIcon } from '@phosphor-icons/react';
-import { useCallback, useState } from 'react';
+import { useCallback, useState, useSyncExternalStore } from 'react';
 import Loading from '../../../primitives/loading.js';
 import { useSidebar } from '../../../primitives/sidebar.js';
 import { useConnectDesktopComputer, useOwnsPairedComputer, useThisComputerState, } from '../../../internal/tunnel/computer-connect.js';
 import { useIsMobile } from '../../../internal/hooks/index.js';
 import { useTranslations } from '../../../i18n/index.js';
 export const COMPUTER_PROMO_DISMISSED_KEY = 'kortix.computer-promo.dismissed';
+const subscribeNoop = () => () => { };
 function readDismissed() {
     try {
         return window.localStorage.getItem(COMPUTER_PROMO_DISMISSED_KEY) === '1';
@@ -30,9 +31,10 @@ function readDismissed() {
  *   and closing the sheet unmounts it together with anything it renders.
  */
 export function ProjectComputerNavItem({ projectId, onOpenConnect, }) {
-    // Client-only: the row renders nothing until its queries resolve, so the
-    // server render and the first client render agree.
-    const [dismissed, setDismissed] = useState(() => typeof window === 'undefined' ? true : readDismissed());
+    // The server and the hydrating render read "dismissed"; the stored flag applies after.
+    const stored = useSyncExternalStore(subscribeNoop, readDismissed, () => true);
+    const [dismissedNow, setDismissed] = useState(false);
+    const dismissed = stored || dismissedNow;
     const dismiss = useCallback(() => {
         setDismissed(true);
         try {

package/dist/workspace/sidebar/footer/project-mcp-nav.js

@@ -1,12 +1,13 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { PromoNavRow } from './promo-nav-row.js';
-import { useCallback, useState } from 'react';
+import { useCallback, useState, useSyncExternalStore } from 'react';
 import { useSidebar } from '../../../primitives/sidebar.js';
 import { Mcp } from '../../../internal/icons/mcp.js';
 import { useIsMobile } from '../../../internal/hooks/index.js';
 import { useTranslations } from '../../../i18n/index.js';
 export const MCP_PROMO_DISMISSED_KEY = 'kortix.mcp-promo.dismissed';
+const subscribeNoop = () => () => { };
 function readDismissed() {
     try {
         return window.localStorage.getItem(MCP_PROMO_DISMISSED_KEY) === '1';
@@ -26,7 +27,10 @@ export function ProjectMcpNavItem({ onOpenConnect }) {
     const tComputers = useTranslations('computers');
     const isMobile = useIsMobile();
     const { setOpenMobile } = useSidebar();
-    const [dismissed, setDismissed] = useState(() => typeof window === 'undefined' ? true : readDismissed());
+    // The server and the hydrating render read "dismissed"; the stored flag applies after.
+    const stored = useSyncExternalStore(subscribeNoop, readDismissed, () => true);
+    const [dismissedNow, setDismissed] = useState(false);
+    const dismissed = stored || dismissedNow;
     const dismiss = useCallback(() => {
         setDismissed(true);
         try {

package/dist/workspace/sidebar/modal/rename-session-modal.js

@@ -5,15 +5,20 @@ import { Input } from '../../../primitives/input.js';
 import Loading from '../../../primitives/loading.js';
 import { Modal, ModalBody, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalTitle, } from '../../../primitives/modal.js';
 import { useTranslations } from '../../../i18n/index.js';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { MAX_SESSION_NAME_LENGTH, useRenameSession } from '../../../session/actions/use-rename-session.js';
 export function RenameSessionModal({ projectId, sessionId, currentName, open, onOpenChange, onSaved, }) {
     const tI18nHardcoded = useTranslations('hardcodedUi');
     const [value, setValue] = useState(currentName ?? '');
-    useEffect(() => {
+    const [syncedFor, setSyncedFor] = useState([
+        open,
+        currentName,
+    ]);
+    if (syncedFor[0] !== open || syncedFor[1] !== currentName) {
+        setSyncedFor([open, currentName]);
         if (open)
             setValue(currentName ?? '');
-    }, [open, currentName]);
+    }
     const renameMutation = useRenameSession(projectId, sessionId, {
         onSuccess: () => {
             onSaved?.();

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