@kortix/ui 0.0.0-stage → 0.14.4

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

@@ -0,0 +1,798 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslations } from '../../i18n/index.js';
+/**
+ * Review Center — the unified human-in-the-loop inbox. One place to see what
+ * finished, what changed, what needs approval, and what's waiting on a decision,
+ * across web and Slack-triggered sessions.
+ *
+ * Built for speed: keyboard-driven (j/k, Enter, a, e, d, x, 1-3, /, ?), every
+ * action is undoable, and live search. In Needs you, a row's checkbox (on
+ * hover) or `x` starts select mode: the floating bar approves, denies or
+ * dismisses up to 50 items through `onBulkAct`.
+ * Prototype: mock data, optimistic local actions.
+ */
+import { Badge } from '../../primitives/badge.js';
+import { Checkbox } from '../../primitives/checkbox.js';
+import { ConfirmDialog } from '../../primitives/confirm-dialog.js';
+import { CountBadge } from '../../primitives/count-badge.js';
+import { Button } from '../../primitives/button.js';
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, } from '../../primitives/dropdown-menu.js';
+import Hint from '../../primitives/hint.js';
+import { InputGroupSearch, InputGroupSearchIcon, InputGroupSearchInput, } from '../../primitives/input-group.js';
+import { Kbd } from '../../primitives/kbd.js';
+import Loading from '../../primitives/loading.js';
+import { Modal, ModalBody, ModalContent, ModalHeader, ModalTitle } from '../../primitives/modal.js';
+import { Skeleton } from '../../primitives/skeleton.js';
+import { DiffStat } from '../../primitives/status.js';
+import { Tabs, TabsList, TabsTrigger } from '../../primitives/tabs.js';
+import { errorToast, infoToast, successToast, toastIcon, undoToast, } from '../../primitives/toast.js';
+import { EmptyState } from '../../primitives/empty-state.js';
+import { ErrorState } from '../../primitives/error-state.js';
+import { localizeUiCatalog } from '../../i18n/ui-catalog/localize-ui-catalog.js';
+import { PRODUCT_CATALOG_TRANSLATION_KEYS } from '../../i18n/ui-catalog/product-catalog-translation-keys.generated.js';
+import { cn } from '../../internal/lib/utils.js';
+import { hasOpenFloatingLayer } from '../../lib/z-stack.js';
+import { SelectionBar } from '../../internal/selection/selection-bar.js';
+import { selectRange, toggleId } from '../../internal/selection/selection.js';
+import { ArrowUUpLeftIcon as ArrowUUpLeft, CheckIcon as Check, CheckCircleIcon as CheckCircleSolid, CheckSquareIcon, CaretDownIcon as ChevronDown, ClockIcon as Clock, DotsThreeIcon as DotsThree, MagnifyingGlassIcon as Search, WarningIcon, XIcon as X, } from '@phosphor-icons/react';
+import { useUiPathname, useUiRouter, useUiSearchParams } from '../../providers/ui-provider.js';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { statusToVerdict } from './map.js';
+import { getLocalizedMockItems } from './mock-data.js';
+import { BULK_MAX, BULK_VERDICT, bulkResultMessage, bulkSelectable, bulkSkipMessage, bulkSupports, formatExpiresIn, formatItemAge, isQuickDecidableApproval, resolveBulkOutcome, } from './review-actions.js';
+import { reviewArgsSummary } from '../../session/prompts/session-approval-review.js';
+import { approvalIdentity } from '../../markdown/setup-links/approval-decision.js';
+import { ConnectorAppMark } from '../../markdown/setup-links/connector-handshake.js';
+import { ApprovalDecisionModal, reviewApprovalAsker, reviewApprovalDenyOnly, reviewApprovalDetails, } from './approval-modal.js';
+import { ReviewDetail } from './review-detail.js';
+import { KIND_META, reviewKindLabel, reviewStatusLabel, } from './review-meta.js';
+import { bulkSetStatus, decideApprovalAction, filterItems, groupBySession, sessionOptions, setStatus, } from './review-reducer.js';
+import { segmentForStatus, } from './types.js';
+/**
+ * Relative time is client-only: it depends on `Date.now()`, which differs between
+ * the server render and hydration. Render nothing until mounted so SSR and the
+ * first client render agree, then fill it in.
+ */
+function TimeAgo({ iso }) {
+    const [mounted, setMounted] = useState(false);
+    useEffect(() => setMounted(true), []);
+    return _jsx("span", { className: "tabular-nums", children: mounted ? formatItemAge(iso) : '' });
+}
+/** "Expires in 3h" on a pending approval. Under one hour a clock glyph in the
+ *  warning accent leads it; the text stays muted (an accent paints a glyph,
+ *  never text). Client-only, like `TimeAgo`. Nothing once no time is left. */
+function ExpiresIn({ iso }) {
+    const tHardcodedUi = useTranslations('hardcodedUi');
+    const [mounted, setMounted] = useState(false);
+    useEffect(() => setMounted(true), []);
+    const left = mounted ? formatExpiresIn(iso) : null;
+    if (!left)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsx(Dot, {}), left.soon ? (_jsx(Clock, { "aria-hidden": true, className: "text-kortix-orange size-3.5 shrink-0" })) : null, _jsx("span", { className: "shrink-0 tabular-nums", children: tHardcodedUi('approvalPage.expiresIn', { time: left.time }) })] }));
+}
+const SEGMENTS = [
+    { value: 'needs_you', label: 'Needs you' },
+    { value: 'waiting', label: 'Waiting' },
+    { value: 'done', label: 'Done' },
+];
+const KIND_FILTERS = [
+    { value: 'all', label: 'All' },
+    { value: 'change', label: 'Changes' },
+    { value: 'approval', label: 'Approvals' },
+    { value: 'output', label: 'Outputs' },
+    { value: 'decision', label: 'Questions' },
+    { value: 'batch', label: 'Finished' },
+];
+const SHORTCUTS = [
+    { keys: ['j', 'k'], label: 'Move down / up' },
+    { keys: ['↵'], label: 'Open the focused item' },
+    { keys: ['a'], label: 'Approve / ship' },
+    { keys: ['e'], label: 'Ask for changes' },
+    { keys: ['d'], label: 'Dismiss' },
+    { keys: ['1', '2', '3'], label: 'Switch lists' },
+    { keys: ['/'], label: 'Search' },
+    { keys: ['?'], label: 'This help' },
+];
+/** Flat rows, no chrome — the row itself lifts on hover/focus/select. */
+const LIST_CLASS = 'space-y-1 py-2.5';
+/** One small glyph after the title says where the item landed; the row
+ *  carries no status badge. `needs_you` has no glyph — its action button is
+ *  the state. */
+const STATUS_GLYPH = {
+    approved: { icon: Check, className: 'text-kortix-green' },
+    done: { icon: Check, className: 'text-kortix-green' },
+    waiting: { icon: Clock, className: 'text-muted-foreground' },
+    changes_requested: { icon: ArrowUUpLeft, className: 'text-kortix-orange' },
+    rejected: { icon: X, className: 'text-kortix-red' },
+    dismissed: { icon: X, className: 'text-muted-foreground' },
+    expired: { icon: Clock, className: 'text-muted-foreground' },
+};
+function Dot() {
+    return (_jsx("span", { "aria-hidden": true, className: "text-muted-foreground", children: "\u2022" }));
+}
+function ItemRow({ item, idx, focused, fresh, sessionLabel, onOpen, onAskChanges, onDismiss, onOpenSession, selection, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const tBulk = useTranslations('hardcodedUi.reviewBulk');
+    const kind = KIND_META[item.kind];
+    const segment = segmentForStatus(item.status);
+    const pending = segment === 'needs_you';
+    const number = item.kind === 'change' ? item.detail.number : undefined;
+    const diff = item.kind === 'change' ? item.detail.advanced : undefined;
+    const glyph = STATUS_GLYPH[item.status];
+    // Meta line: when · who · where. The session stands in for the repo; when
+    // the group already names it, the row's own summary fills the slot.
+    const where = sessionLabel ?? item.summary;
+    // Nothing to review: the modal offers only Deny, so the row says so in
+    // place of "awaiting approval". Nothing is denied automatically.
+    const denyOnly = pending && reviewApprovalDenyOnly(item);
+    const tReview = useTranslations('hardcodedUi.approvalPage');
+    const selecting = selection?.selecting ?? false;
+    const selectable = !!selection && !selection.disabled;
+    // The leading icon names the kind by shape and the outcome by color:
+    // blue while it needs you, then green/orange/red/muted once decided — the
+    // same tone as the status check beside the title.
+    const kindIcon = (_jsx(kind.icon, { className: cn('size-5 shrink-0', glyph ? glyph.className : kind.iconColor, selectable && !selecting && 'group-focus-within:hidden group-hover:hidden'), "aria-label": reviewKindLabel(item.kind, tI18nComplete) }));
+    // One fixed 20 px slot: the kind icon, swapped for the checkbox on row
+    // hover and for the whole of select mode. Nothing shifts.
+    const leading = !selectable || !selection ? (kindIcon) : (_jsx("span", { className: "flex size-5 shrink-0 items-center justify-center", children: selecting ? (_jsx(Checkbox, { checked: selection.checked, tabIndex: -1, "aria-hidden": true, className: "pointer-events-none" })) : (_jsxs(_Fragment, { children: [kindIcon, _jsx(Checkbox, { checked: false, "aria-label": tBulk('selectRow', { title: item.title }), onClick: (e) => {
+                        // The row's own state decides; Radix skips its toggle.
+                        e.preventDefault();
+                        selection.onToggle(e.shiftKey);
+                    }, className: "hidden group-focus-within:flex group-hover:flex" })] })) }));
+    const body = (_jsxs(_Fragment, { children: [_jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "text-foreground truncate text-sm font-medium", children: item.title }), number != null && (_jsxs("span", { className: "text-muted-foreground shrink-0 text-sm tabular-nums", children: ["#", number] })), glyph && (_jsx(Hint, { label: reviewStatusLabel(item.status, tI18nComplete), children: _jsx(glyph.icon, { className: cn('size-3.5 shrink-0', glyph.className), "aria-label": reviewStatusLabel(item.status, tI18nComplete) }) })), fresh && (_jsx(Badge, { variant: "new", size: "sm", className: "shrink-0", children: tI18nComplete.raw('text18fdd549b2ed') }))] }), _jsxs("span", { className: "text-muted-foreground mt-0.5 flex min-w-0 items-center gap-1.5 text-xs", children: [_jsx(TimeAgo, { iso: item.createdAt }), item.kind === 'approval' && segment !== 'done' && item.expiresAt ? (_jsx(ExpiresIn, { iso: item.expiresAt })) : null, _jsx(Dot, {}), _jsx("span", { className: "truncate", children: item.agent }), denyOnly ? (_jsxs(_Fragment, { children: [_jsx(Dot, {}), _jsxs("span", { className: "flex min-w-0 items-center gap-1", children: [_jsx(WarningIcon, { "aria-hidden": true, className: "text-kortix-orange size-3.5 shrink-0" }), _jsx("span", { className: "truncate", children: tReview('canOnlyBeDenied') })] })] })) : where ? (_jsxs(_Fragment, { children: [_jsx(Dot, {}), _jsx("span", { className: "truncate", children: where })] })) : null] })] }));
+    // The menu's Select hands focus to the row (select mode drops the menu), not
+    // back to the trigger that is about to unmount.
+    const enteringSelect = useRef(false);
+    const diffStat = diff ? (_jsx(DiffStat, { additions: diff.additions, deletions: diff.deletions, className: "hidden text-xs sm:inline-flex" })) : null;
+    // Select mode: the whole row is the option (trigger-list.tsx), with no
+    // open button and no menu inside it to steal the click.
+    if (selecting && selection) {
+        return (_jsxs("li", { "data-idx": idx, role: "option", "aria-selected": selection.checked, "aria-disabled": selection.disabled || undefined, tabIndex: selectable ? 0 : -1, onClick: selectable ? (e) => selection.onToggle(e.shiftKey) : undefined, onKeyDown: (e) => {
+                if (selectable && (e.key === ' ' || e.key === 'Enter')) {
+                    e.preventDefault();
+                    selection.onToggle(e.shiftKey);
+                }
+            }, className: cn('flex items-center gap-3 rounded-md px-3 py-1.5 outline-none select-none', 'focus-visible:ring-ring focus-visible:ring-2', focused || selection.checked ? 'bg-active' : selectable && 'hover:bg-hover', selectable && 'cursor-pointer'), children: [leading, _jsx("span", { className: "min-w-0 flex-1", children: body }), diffStat ? _jsx("span", { className: "flex shrink-0 items-center", children: diffStat }) : null] }));
+    }
+    return (_jsxs("li", { "data-idx": idx, className: cn('group relative flex items-center gap-3 rounded-md px-3 py-1.5', focused ? 'bg-active' : 'hover:bg-hover'), children: [leading, _jsx("button", { type: "button", onClick: onOpen, className: "focus-visible:ring-ring min-w-0 flex-1 rounded-sm text-left focus-visible:ring-2 focus-visible:outline-none", children: body }), _jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [diffStat, _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": tI18nComplete('textcbd7bbfcd257', { value0: item.title }), className: "text-muted-foreground", children: _jsx(DotsThree, { className: "size-4" }) }) }), _jsxs(DropdownMenuContent, { align: "end", className: "w-52", onCloseAutoFocus: (e) => {
+                                    if (enteringSelect.current)
+                                        e.preventDefault();
+                                    enteringSelect.current = false;
+                                }, children: [_jsxs(DropdownMenuItem, { onClick: onOpen, children: [tI18nComplete.raw('texted077f3d8125'), _jsx(DropdownMenuShortcut, { children: "\u21B5" })] }), onOpenSession && (_jsx(DropdownMenuItem, { onClick: onOpenSession, children: tI18nComplete.raw('textb205bb47f81a') })), pending && (onAskChanges || onDismiss) && _jsx(DropdownMenuSeparator, {}), pending && onAskChanges && (_jsxs(DropdownMenuItem, { onClick: onAskChanges, children: [tI18nComplete.raw('text705364916412'), _jsx(DropdownMenuShortcut, { children: "e" })] })), pending && onDismiss && (_jsxs(DropdownMenuItem, { variant: "destructive", onClick: onDismiss, children: [tI18nComplete.raw('text48845bff334a'), _jsx(DropdownMenuShortcut, { children: "d" })] })), selectable && selection ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onSelect: () => {
+                                                    enteringSelect.current = true;
+                                                    selection.onToggle(false);
+                                                }, children: [_jsx(CheckSquareIcon, {}), tI18nComplete.raw('text2a78025de6aa'), _jsx(DropdownMenuShortcut, { children: "x" })] })] })) : null] })] })] })] }));
+}
+/** One plain bar per row, row height, while the inbox loads. */
+function ListSkeleton({ rows = 4 }) {
+    return (_jsx("div", { className: "space-y-1", children: Array.from({ length: rows }).map((_, i) => (_jsx(Skeleton, { className: "h-12 w-full rounded-md" }, i))) }));
+}
+function KeyboardHelp({ open, onClose }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const localized = localizeUiCatalog(SHORTCUTS, tI18nComplete, PRODUCT_CATALOG_TRANSLATION_KEYS);
+    // `x` after `d`. Its label is the shared "Select" message, which the
+    // generated catalog map does not list.
+    const shortcuts = [
+        ...localized.slice(0, 5),
+        { keys: ['x'], label: tI18nComplete.raw('text2a78025de6aa') },
+        ...localized.slice(5),
+    ];
+    return (_jsx(Modal, { open: open, onOpenChange: (o) => !o && onClose(), children: _jsxs(ModalContent, { className: "lg:max-w-sm", children: [_jsx(ModalHeader, { children: _jsx(ModalTitle, { children: tI18nComplete.raw('texte9bef0b0f3c2') }) }), _jsx(ModalBody, { children: _jsx("ul", { className: "space-y-2", children: shortcuts.map((s) => (_jsxs("li", { className: "flex items-center justify-between gap-4", children: [_jsx("span", { className: "text-muted-foreground text-sm", children: s.label }), _jsx("span", { className: "flex shrink-0 items-center gap-1", children: s.keys.map((k) => (_jsx(Kbd, { children: k }, k))) })] }, s.label))) }) })] }) }));
+}
+/** How long the prototype's Undo toast stays up: a display time, not motion. */
+const UNDO_TOAST_MS = 6000;
+/** The prototype inbox's rule: every verdict, since nothing reaches a route. */
+const EVERY_VERDICT = () => true;
+/** The status a bar verb leaves an item in, for the optimistic update. */
+const BULK_STATUS = {
+    approve: 'approved',
+    deny: 'rejected',
+    dismiss: 'dismissed',
+};
+const BULK_PROGRESS = { approve: 'approving', deny: 'denying', dismiss: 'dismissing' };
+const RISK_BADGE = {
+    none: { variant: 'muted', key: 'riskNone' },
+    low: { variant: 'muted', key: 'riskLow' },
+    medium: { variant: 'warning', key: 'riskMedium' },
+    high: { variant: 'destructive', key: 'riskHigh' },
+};
+export function ReviewCenter({ initialItems, segment: segmentProp, onSegmentChange, loadMore, onAct, onBulkAct, onOpenSession, onRecoverChange, recoveringCrId, onRefresh, isLoading, isFetching, isFetched, isError, sessionLabels, verdictAllowed = EVERY_VERDICT, } = {}) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const tBulk = useTranslations('hardcodedUi.reviewBulk');
+    const tSidebar = useTranslations('sidebar');
+    const segments = useMemo(() => localizeUiCatalog(SEGMENTS, tI18nComplete, PRODUCT_CATALOG_TRANSLATION_KEYS), [tI18nComplete]);
+    const kindFilters = useMemo(() => localizeUiCatalog(KIND_FILTERS, tI18nComplete, PRODUCT_CATALOG_TRANSLATION_KEYS), [tI18nComplete]);
+    const localizedMockItems = useMemo(() => getLocalizedMockItems(tI18nComplete), [tI18nComplete]);
+    const connected = !!onAct;
+    const [items, setItems] = useState(initialItems ?? (connected ? [] : localizedMockItems));
+    const [localSegment, setLocalSegment] = useState('needs_you');
+    const segment = segmentProp ?? localSegment;
+    const setSegment = onSegmentChange ?? setLocalSegment;
+    const [kindFilter, setKindFilter] = useState('all');
+    const [query, setQuery] = useState('');
+    // Per-session view: filter to one session, and/or group the list by session so
+    // a session's reviews + approvals sit together. Both operate on `sessionId`.
+    const [sessionFilter, setSessionFilter] = useState('all');
+    const [grouped, setGrouped] = useState(false);
+    // The open review lives in the URL (`?id=<review item id>`), not in state,
+    // so a refresh or a shared link lands on the same page.
+    const search = useUiSearchParams();
+    const router = useUiRouter();
+    const pathname = useUiPathname();
+    const idParam = search?.get('id') ?? null;
+    const [focusedIdx, setFocusedIdx] = useState(0);
+    // Only show the focused-row highlight while the user is actually navigating by
+    // keyboard — otherwise the first row looks arbitrarily tinted on load.
+    const [kbNav, setKbNav] = useState(false);
+    const [helpOpen, setHelpOpen] = useState(false);
+    // "Fresh" = items that arrived on a poll while the user wasn't looking. We diff
+    // incoming ids against the last-known set of each segment (each segment is
+    // its own read); any interaction clears the marks.
+    const knownIdsRef = useRef(new Map());
+    const [freshIds, setFreshIds] = useState(new Set());
+    const markSeen = () => setFreshIds((prev) => (prev.size ? new Set() : prev));
+    // The single item id currently mid-mutation (row quick-decide or the detail
+    // modal's approve/deny) + which verdict, so the row/modal button that fired
+    // it — and only that one — shows `Loading` while connected. Cleared on the
+    // next `initialItems` reconciliation (the refetch that follows a mutation).
+    const [pendingId, setPendingId] = useState(null);
+    const [pendingDecision, setPendingDecision] = useState(null);
+    const undoRef = useRef(null);
+    // Query root for scroll-into-view — a container of the [data-idx] rows. It wraps
+    // either the flat <ul> or the grouped <div>, so it's typed to the common base.
+    const listRef = useRef(null);
+    // Matched against the server list when connected: `items` (the optimistic
+    // state copy) is reconciled from `initialItems` in an effect, so it lags the
+    // server list by one commit — long enough for a fresh page load to see "no
+    // match" once and flash the inbox before the review page.
+    const sourceItems = initialItems ?? items;
+    const selectedId = useMemo(() => (idParam && sourceItems.some((i) => i.id === idParam) ? idParam : null), [sourceItems, idParam]);
+    const listLoaded = !connected || isFetched === true;
+    const setSelectedId = useCallback((id) => {
+        const params = new URLSearchParams(search?.toString() ?? '');
+        if (id)
+            params.set('id', id);
+        else
+            params.delete('id');
+        const suffix = params.toString();
+        const href = suffix ? `${pathname}?${suffix}` : pathname;
+        // Opening pushes so the browser's Back returns to the inbox; closing
+        // replaces so Back never lands on the page you just left.
+        if (id)
+            router.push(href, { scroll: false });
+        else
+            router.replace(href, { scroll: false });
+    }, [pathname, router, search]);
+    const labelFor = useMemo(() => (id) => sessionLabels?.[id], [sessionLabels]);
+    const visible = useMemo(() => filterItems(items, segment, kindFilter, query, sessionFilter), [items, segment, kindFilter, query, sessionFilter]);
+    const kindCounts = useMemo(() => {
+        // Respect the active session filter so the kind-tab badges never contradict
+        // the visible list when scoped to one session.
+        const seg = items.filter((i) => segmentForStatus(i.status) === segment &&
+            (sessionFilter === 'all' || (i.sessionId ?? '') === sessionFilter));
+        const c = { all: seg.length };
+        for (const i of seg)
+            c[i.kind] = (c[i.kind] ?? 0) + 1;
+        return c;
+    }, [items, segment, sessionFilter]);
+    // Sessions available to filter by = those present in the CURRENT segment (so
+    // the dropdown only offers sessions you can actually see here).
+    const sessionOpts = useMemo(() => {
+        const seg = items.filter((i) => segmentForStatus(i.status) === segment);
+        return sessionOptions(seg, labelFor);
+    }, [items, segment, labelFor]);
+    // The grouped view: buckets of the currently-visible items, keyed by session.
+    const groups = useMemo(() => groupBySession(visible, labelFor), [visible, labelFor]);
+    // Keyboard nav + focus highlight stay keyed to the flat `visible` order even in
+    // the grouped view, so j/k and the focus ring keep working — this maps an
+    // item id → its flat index.
+    const visibleIndexById = useMemo(() => {
+        const m = new Map();
+        visible.forEach((i, idx) => m.set(i.id, idx));
+        return m;
+    }, [visible]);
+    /* ── Select mode: pick up to 50 rows, then Approve / Deny / Dismiss ── */
+    // 'key' when `x` opened it: the bar then skips its enter animation.
+    const [selectMode, setSelectMode] = useState(false);
+    const [selectedIds, setSelectedIds] = useState(() => new Set());
+    const [anchorId, setAnchorId] = useState(null);
+    const [bulkProgress, setBulkProgress] = useState(null);
+    // The verb outlives `open` so the dialog keeps its copy while it closes.
+    const [confirm, setConfirm] = useState({
+        verb: 'approve',
+        open: false,
+    });
+    // Only Needs you holds rows a bar verb acts on.
+    const selectableIds = useMemo(() => segment === 'needs_you'
+        ? visible.filter((i) => bulkSelectable(i, verdictAllowed)).map((i) => i.id)
+        : [], [visible, segment, verdictAllowed]);
+    // Rows that left the list (decided, filtered) drop out of the selection.
+    const selectedItems = useMemo(() => visible.filter((i) => selectedIds.has(i.id)), [visible, selectedIds]);
+    const bulkIds = useMemo(() => {
+        const idsFor = (verb) => selectedItems.filter((i) => bulkSupports(i, verb, verdictAllowed)).map((i) => i.id);
+        return { approve: idsFor('approve'), deny: idsFor('deny'), dismiss: idsFor('dismiss') };
+    }, [selectedItems, verdictAllowed]);
+    const exitSelectMode = () => {
+        setSelectMode(false);
+        setSelectedIds(new Set());
+        setAnchorId(null);
+    };
+    const toggleSelected = (id, range, via) => {
+        let next = range
+            ? selectRange(selectedIds, selectableIds, anchorId, id)
+            : toggleId(selectedIds, id);
+        if (next.size > BULK_MAX) {
+            // A 51st single toggle changes nothing, the anchor included; a range
+            // keeps its first 50.
+            if (!range)
+                return;
+            next = new Set([...next].slice(0, BULK_MAX));
+        }
+        setSelectedIds(next);
+        setAnchorId(id);
+        // The toggled row takes the cursor, so select mode focuses it.
+        setFocusedIdx(visibleIndexById.get(id) ?? 0);
+        setSelectMode((mode) => mode || via);
+    };
+    // A segment, kind, session or search change drops the selection: a bulk
+    // verb never reaches a hidden row. Leaving Needs you leaves select mode.
+    const selectionScope = `${segment}\u0000${kindFilter}\u0000${sessionFilter}\u0000${query}`;
+    const [selectionScopeSeen, setSelectionScopeSeen] = useState(selectionScope);
+    if (selectionScope !== selectionScopeSeen) {
+        setSelectionScopeSeen(selectionScope);
+        setSelectedIds(new Set());
+        setAnchorId(null);
+        if (segment !== 'needs_you')
+            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]);
+    // Keep the focus cursor in range as the visible list changes.
+    useEffect(() => {
+        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.
+    useEffect(() => {
+        if (!selectMode)
+            return;
+        listRef.current
+            ?.querySelector(`[data-idx="${focusedIdx}"]`)
+            ?.focus({ preventScroll: true });
+    }, [selectMode, focusedIdx]);
+    // Scroll the focused row into view.
+    useEffect(() => {
+        listRef.current
+            ?.querySelector(`[data-idx="${focusedIdx}"]`)
+            ?.scrollIntoView({ block: 'nearest' });
+    }, [focusedIdx]);
+    // Connected mode: reconcile with the server list as it (re)loads. Each
+    // reconciliation is also the "settled" signal for a row/modal quick-decide
+    // 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(() => {
+        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).
+    // Reads the server list, not the optimistic copy: the copy lags a segment
+    // switch by one commit and would seed the new segment with nothing.
+    useEffect(() => {
+        if (!connected || isLoading || !initialItems)
+            return;
+        const ids = initialItems
+            .filter((i) => segmentForStatus(i.status) === segment)
+            .map((i) => i.id);
+        const known = knownIdsRef.current.get(segment);
+        knownIdsRef.current.set(segment, new Set(ids));
+        if (!known)
+            return;
+        const arrived = ids.filter((id) => !known.has(id));
+        if (arrived.length > 0) {
+            setFreshIds((prev) => {
+                const n = new Set(prev);
+                for (const id of arrived)
+                    n.add(id);
+                return n;
+            });
+        }
+    }, [initialItems, connected, segment, isLoading]);
+    /** Prototype mode: optimistic change with an Undo affordance in the toast. */
+    function commit(next, message, tone = 'success') {
+        undoRef.current = items;
+        setItems(next);
+        undoToast(message, {
+            duration: UNDO_TOAST_MS,
+            icon: tone === 'info' ? toastIcon('info') : toastIcon('success'),
+            undoLabel: tI18nComplete.raw('texta8283ade3185'),
+            onUndo: () => {
+                if (undoRef.current) {
+                    setItems(undoRef.current);
+                    undoRef.current = null;
+                    infoToast(tI18nComplete.raw('text5d561a1e3f17'));
+                }
+            },
+        });
+    }
+    /**
+     * Apply an optimistic change. Connected mode fires the server mutation and
+     * lets the refetch reconcile (the action is a real state change, so no local
+     * Undo); prototype mode is fully local and undoable.
+     */
+    function apply(next, message, tone = 'success', server) {
+        if (connected) {
+            setItems(next);
+            server?.();
+            (tone === 'info' ? infoToast : successToast)(message);
+        }
+        else {
+            commit(next, message, tone);
+        }
+    }
+    /** Every verdict path checks here first, so a refused verdict never commits. */
+    const allowsId = (id, verdict) => {
+        const item = items.find((i) => i.id === id) ?? sourceItems.find((i) => i.id === id);
+        return !!item && verdictAllowed(item, verdict);
+    };
+    const actions = {
+        resolve: (id, status, message, feedback) => {
+            const verdict = statusToVerdict(status);
+            if (verdict && !allowsId(id, verdict))
+                return;
+            if (connected && (status === 'approved' || status === 'rejected')) {
+                setPendingId(id);
+                setPendingDecision(status === 'approved' ? 'approve' : 'deny');
+            }
+            apply(setStatus(items, id, status), message ?? 'Updated', status === 'rejected' || status === 'changes_requested' ? 'info' : 'success', verdict && onAct ? () => onAct(id, verdict, feedback) : undefined);
+        },
+        decideAction: (itemId, actionId, decision) => setItems(decideApprovalAction(items, itemId, actionId, decision)),
+        openSession: onOpenSession,
+        recoverChange: onRecoverChange,
+        recoveringCrId,
+        allows: verdictAllowed,
+        connected,
+        pendingId,
+        pendingDecision,
+    };
+    /** Legacy quick-decision handler. The eligibility helper currently returns
+     *  false because Connector approvals require the parameter-review modal. */
+    const quickDecide = (item, decision) => {
+        actions.resolve(item.id, decision === 'approve' ? 'approved' : 'rejected', decision === 'approve' ? 'Approved — the agent will continue' : 'Denied');
+    };
+    const quickPrimary = (item) => {
+        if (connected && isQuickDecidableApproval(item)) {
+            quickDecide(item, 'approve');
+            return;
+        }
+        // Change Requests never one-click-ship from the inbox, even via the `a`
+        // shortcut — merging needs the full diff in view, so this always opens
+        // the detail (its "Ship it" button is the real merge action).
+        if (item.kind === 'approval' || item.kind === 'decision' || item.kind === 'change') {
+            setSelectedId(item.id); // needs a choice / full context — open the detail
+            return;
+        }
+        if (!verdictAllowed(item, 'approve'))
+            return;
+        apply(setStatus(items, item.id, 'approved'), `${item.primaryAction} · done`, 'success', onAct ? () => onAct(item.id, 'approve') : undefined);
+    };
+    const quickAskChanges = (item) => {
+        if (connected && isQuickDecidableApproval(item)) {
+            quickDecide(item, 'deny');
+            return;
+        }
+        if (item.kind === 'change' || item.kind === 'output') {
+            if (!verdictAllowed(item, 'changes'))
+                return;
+            apply(setStatus(items, item.id, 'changes_requested'), 'Sent back to the agent', 'info', onAct ? () => onAct(item.id, 'changes') : undefined);
+        }
+        else {
+            setSelectedId(item.id);
+        }
+    };
+    /** Connected mode: decide up-front what the verdict will really act on so
+     *  the optimistic removal + toast never claim more than the server was
+     *  asked. Bulk verdicts skip connector approvals and Change Requests. */
+    const connectedBulkOutcome = (ids, verdict) => {
+        const riskById = new Map(items.map((i) => [i.id, i.risk]));
+        return resolveBulkOutcome(ids, verdict, (id) => riskById.get(id));
+    };
+    const dismissIds = (requested) => {
+        const ids = requested.filter((id) => allowsId(id, 'dismiss'));
+        if (ids.length === 0)
+            return;
+        if (connected && onBulkAct) {
+            const outcome = connectedBulkOutcome(ids, 'dismiss');
+            const skipped = bulkSkipMessage(outcome);
+            if (skipped)
+                infoToast(skipped);
+            if (outcome.act.length > 0) {
+                apply(bulkSetStatus(items, outcome.act, 'dismissed'), `Dismissed ${outcome.act.length}`, 'info', () => void Promise.resolve(onBulkAct(outcome.act, 'dismiss')).catch((e) => errorToast(e.message)));
+            }
+            return;
+        }
+        apply(bulkSetStatus(items, ids, 'dismissed'), `Dismissed ${ids.length}`, 'info', onBulkAct ? () => onBulkAct(ids, 'dismiss') : undefined);
+    };
+    /** The bar's verb on every selected row that supports it. One request; the
+     *  results drive the optimistic update (ok ids only) and the toast. */
+    const runBulk = async (verb) => {
+        setConfirm((c) => ({ ...c, open: false }));
+        const ids = bulkIds[verb];
+        if (ids.length === 0)
+            return;
+        setBulkProgress({
+            label: tBulk(BULK_PROGRESS[verb], { count: ids.length }),
+            done: 0,
+            total: ids.length,
+        });
+        let results;
+        try {
+            results =
+                (await onBulkAct?.(ids, BULK_VERDICT[verb])) ?? ids.map((id) => ({ id, ok: true }));
+        }
+        catch (e) {
+            setBulkProgress(null);
+            errorToast(e instanceof Error ? e.message : String(e));
+            return;
+        }
+        setBulkProgress(null);
+        const okIds = new Set(results.filter((r) => r.ok).map((r) => r.id));
+        setItems((prev) => bulkSetStatus(prev, okIds, BULK_STATUS[verb]));
+        setSelectedIds((prev) => new Set([...prev].filter((id) => !okIds.has(id))));
+        const message = bulkResultMessage(tBulk, verb, results);
+        if (okIds.size === results.length)
+            successToast(message);
+        else if (okIds.size > 0)
+            infoToast(message);
+        else
+            errorToast(message);
+    };
+    // Every bulk verb confirms first, listing what it will decide.
+    const startBulk = (verb) => setConfirm({ verb, open: true });
+    // ── Keyboard shortcuts ──────────────────────────────────────────────────
+    useEffect(() => {
+        const onKey = (e) => {
+            const el = document.activeElement;
+            const typing = el instanceof HTMLInputElement ||
+                el instanceof HTMLTextAreaElement ||
+                el?.isContentEditable;
+            // Every shortcut below is a BARE letter or digit, so a keystroke
+            // carrying a command/control/alt modifier is never one of them — it
+            // belongs to the browser, the OS, or another surface. Without this
+            // guard the single-letter handlers fire alongside the real shortcut:
+            // ⌘K moved the review focus up AND opened the command palette, ⌘J
+            // moved it down AND started a session, and ⌘A — Select All — ran
+            // `quickPrimary` on the focused item, i.e. an ACTION on a review. Added
+            // when ⌘O was given to the palette's workspace switcher, which would
+            // have joined that list by opening the focused review at the same time.
+            //
+            // Not Shift: `?` is Shift+/ and is handled immediately below.
+            if (e.metaKey || e.ctrlKey || e.altKey)
+                return;
+            if (e.key === '?') {
+                e.preventDefault();
+                setHelpOpen((v) => !v);
+                return;
+            }
+            if (e.key === 'Escape') {
+                if (helpOpen)
+                    return setHelpOpen(false);
+                if (typing)
+                    return el.blur();
+                if (selectedId)
+                    return setSelectedId(null);
+                // An Esc that a dialog or menu already handled is theirs, not the selection's.
+                if (selectMode && !bulkProgress && !e.defaultPrevented && !hasOpenFloatingLayer()) {
+                    exitSelectMode();
+                }
+                return;
+            }
+            // Help, a review page or the bulk confirm owns the keyboard.
+            if (helpOpen || selectedId || confirm.open)
+                return;
+            if (typing)
+                return; // don't hijack search typing
+            if (e.key === '/') {
+                e.preventDefault();
+                document.getElementById('review-search')?.focus();
+                return;
+            }
+            if (e.key === '1' || e.key === '2' || e.key === '3') {
+                setSegment(segments[Number(e.key) - 1].value);
+                return;
+            }
+            if (visible.length === 0)
+                return;
+            const cur = visible[Math.min(focusedIdx, visible.length - 1)];
+            setKbNav(true);
+            if (e.key === 'j' || e.key === 'ArrowDown') {
+                e.preventDefault();
+                setFocusedIdx((i) => Math.min(visible.length - 1, i + 1));
+            }
+            else if (e.key === 'k' || e.key === 'ArrowUp') {
+                e.preventDefault();
+                setFocusedIdx((i) => Math.max(0, i - 1));
+            }
+            else if (e.key === 'x') {
+                if (cur && selectableIds.includes(cur.id))
+                    toggleSelected(cur.id, false, 'key');
+            }
+            else if (selectMode) {
+                // Select mode: a row's Space or Enter toggles it; no verb shortcut fires.
+                return;
+            }
+            else if (e.key === 'Enter' || e.key === 'o') {
+                e.preventDefault();
+                if (cur)
+                    setSelectedId(cur.id);
+            }
+            else if (e.key === 'a') {
+                if (cur)
+                    quickPrimary(cur);
+            }
+            else if (e.key === 'e') {
+                if (cur)
+                    quickAskChanges(cur);
+            }
+            else if (e.key === 'd') {
+                if (cur)
+                    dismissIds([cur.id]);
+            }
+        };
+        window.addEventListener('keydown', onKey);
+        return () => window.removeEventListener('keydown', onKey);
+    });
+    // Prefer the optimistic copy (it carries the status you just set); fall
+    // back to the server row for the one commit before the copy catches up.
+    const selected = selectedId
+        ? (items.find((i) => i.id === selectedId) ??
+            sourceItems.find((i) => i.id === selectedId) ??
+            null)
+        : null;
+    const renderRow = (item, idx, inGroup) => (_jsx(ItemRow, { item: item, idx: idx, focused: kbNav && idx === focusedIdx, fresh: freshIds.has(item.id), sessionLabel: !inGroup && item.sessionId ? labelFor(item.sessionId) : undefined, onOpen: () => setSelectedId(item.id), onAskChanges: verdictAllowed(item, 'changes') ? () => quickAskChanges(item) : undefined, onDismiss: verdictAllowed(item, 'dismiss') ? () => dismissIds([item.id]) : undefined, onOpenSession: item.sessionId && onOpenSession ? () => onOpenSession(item.sessionId) : undefined, selection: selectMode || selectableIds.includes(item.id)
+            ? {
+                checked: selectedIds.has(item.id),
+                selecting: !!selectMode,
+                disabled: !selectableIds.includes(item.id),
+                onToggle: (range) => toggleSelected(item.id, range, 'pointer'),
+            }
+            : null }, item.id));
+    // Select mode makes each row list a multi-select listbox (trigger-list.tsx).
+    const listboxProps = {
+        role: selectMode ? 'listbox' : undefined,
+        'aria-multiselectable': selectMode ? true : undefined,
+    };
+    const listProps = {
+        ref: (el) => {
+            listRef.current = el;
+        },
+        onPointerMove: () => {
+            setKbNav((k) => (k ? false : k));
+            markSeen();
+        },
+    };
+    // The Sessions page's Load more, same control and words (`sidebar.*`).
+    const loadMoreButton = loadMore ? (_jsx("div", { className: "flex justify-center pb-2", children: _jsx(Button, { variant: "outline", size: "sm", disabled: loadMore.isLoading, onClick: loadMore.onLoadMore, children: loadMore.isLoading
+                ? tSidebar('loadingMore')
+                : loadMore.isError
+                    ? tSidebar('retry')
+                    : tSidebar('loadMore') }) })) : null;
+    const shortcutsButton = (_jsxs("button", { type: "button", onClick: () => setHelpOpen(true), className: "text-muted-foreground hover:text-foreground duration-fast hidden items-center gap-1.5 text-xs transition-colors sm:flex", children: [_jsx(Kbd, { children: "?" }), tI18nComplete.raw('text46e978d0c193')] }));
+    const bulkActions = [
+        {
+            id: 'approve',
+            label: tBulk('approve'),
+            disabled: bulkIds.approve.length === 0,
+            onSelect: () => startBulk('approve'),
+        },
+        {
+            id: 'deny',
+            label: tBulk('deny'),
+            tone: 'destructive',
+            disabled: bulkIds.deny.length === 0,
+            onSelect: () => startBulk('deny'),
+        },
+        {
+            id: 'dismiss',
+            label: tBulk('dismiss'),
+            tone: 'destructive',
+            disabled: bulkIds.dismiss.length === 0,
+            onSelect: () => startBulk('dismiss'),
+        },
+    ];
+    const confirmCount = bulkIds[confirm.verb].length;
+    // 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))
+            .map((i) => {
+            const risk = RISK_BADGE[i.risk];
+            // The arguments, as the approval modal reads them: the content
+            // Kortix resolved, else the call's own preview.
+            const details = reviewApprovalDetails(i);
+            const args = reviewArgsSummary(details?.resolved_preview, details?.args_preview);
+            const who = details ? approvalIdentity(details) : null;
+            return (_jsxs("li", { className: "flex min-w-0 items-center gap-3 px-3 py-2.5", title: details?.action, children: [who ? _jsx(ConnectorAppMark, { name: who.connector ?? i.title, iconUrl: who.iconUrl, size: "md" }) : null, _jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("span", { className: "text-foreground truncate text-sm leading-5", children: who?.connector && who.action ? `${who.connector} · ${who.action}` : i.title }), args ? _jsx("span", { className: "text-muted-foreground truncate text-xs leading-4", children: args }) : null] }), _jsx(Badge, { variant: risk.variant, size: "xs", className: "shrink-0", children: tBulk(risk.key) })] }, i.id));
+        }) }));
+    const withList = (text) => (_jsxs("div", { className: "space-y-3", children: [_jsx("p", { children: text }), confirmList] }));
+    const confirmCopy = confirm.verb === 'approve'
+        ? {
+            title: tBulk('approveTitle', { count: confirmCount }),
+            confirm: tBulk('approveConfirm', { count: confirmCount }),
+            description: withList(tBulk('approveDescription')),
+        }
+        : confirm.verb === 'deny'
+            ? {
+                title: tBulk('denyTitle', { count: confirmCount }),
+                confirm: tBulk('denyConfirm', { count: confirmCount }),
+                description: withList(tBulk('denyDescription')),
+            }
+            : {
+                title: tBulk('dismissTitle', { count: confirmCount }),
+                confirm: tBulk('dismissConfirm', { count: confirmCount }),
+                description: withList(tBulk('dismissDescription')),
+            };
+    // A `?id=` we cannot resolve yet: hold the row skeleton until the list has
+    // fetched once, so a refresh never flashes the inbox on the way to the page.
+    if (idParam && !selected && !listLoaded && !isError) {
+        return (_jsx("div", { className: "flex h-full min-h-0 flex-col", children: _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto", children: _jsx("div", { className: "w-full p-4", children: _jsx(ListSkeleton, {}) }) }) }));
+    }
+    // A Connector call opens the standalone approve page's panel in a modal over
+    // the inbox, so it reads and decides the same way on both surfaces.
+    const approval = selected ? reviewApprovalDetails(selected) : null;
+    const approvalCall = approval && selected?.kind === 'approval' ? selected.detail.actions?.[0] : undefined;
+    const approvalModal = (_jsx(ApprovalDecisionModal, { details: approval, previewAuthorized: approvalCall?.previewAuthorized !== false, resolvers: approvalCall?.resolvers, ...(approval && selected ? reviewApprovalAsker(selected, sessionLabels) : null), busyDecision: selected && pendingId === selected.id ? pendingDecision : null, onDecision: 
+        // Only the viewer the API lets decide this call gets the decision.
+        connected && selected && verdictAllowed(selected, 'approve')
+            ? (decision, note) => actions.resolve(selected.id, decision === 'approve' ? 'approved' : 'rejected', decision === 'approve'
+                ? tI18nComplete.raw('text0674d4a026cb')
+                : tI18nComplete.raw('text4341be8eb7f0'), note)
+            : undefined, onOpenSession: selected?.sessionId && onOpenSession
+            ? () => onOpenSession(selected.sessionId)
+            : undefined, onClose: () => setSelectedId(null) }));
+    // Every other review page replaces the inbox in place — same scroll
+    // container, no modal. Escape and "Back to inbox" return to the list.
+    if (selected && !approval) {
+        return (_jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [_jsx("div", { className: "min-h-0 flex-1 overflow-y-auto", children: _jsx(ReviewDetail, { item: selected, actions: actions, onBack: () => setSelectedId(null) }) }), _jsx(KeyboardHelp, { open: helpOpen, onClose: () => setHelpOpen(false) })] }));
+    }
+    return (_jsxs("div", { className: "relative flex h-full min-h-0 flex-col", children: [_jsx("div", { className: "min-h-0 flex-1 overflow-y-auto", children: _jsxs("div", { className: cn('w-full px-4', selectMode && segment === 'needs_you' && 'pb-20'), children: [_jsxs("div", { className: "flex flex-col gap-2 py-4 sm:flex-row sm:items-center sm:justify-between", children: [_jsx(Tabs, { value: segment, onValueChange: (v) => {
+                                        setSegment(v);
+                                        markSeen();
+                                    }, className: "min-w-0", children: _jsx(TabsList, { className: "flex w-full items-center justify-start", children: segments.map((s) => (_jsx(TabsTrigger, { value: s.value, size: "sm", children: s.label }, s.value))) }) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: kindFilter === 'all' ? 'outline' : 'secondary', children: [kindFilter === 'all'
+                                                                ? tI18nComplete.raw('textf10988e79e8d')
+                                                                : kindFilters.find((f) => f.value === kindFilter)?.label, _jsx(ChevronDown, { className: "text-muted-foreground size-3.5 shrink-0" })] }) }), _jsxs(DropdownMenuContent, { align: "end", className: "w-52", children: [_jsx(DropdownMenuLabel, { children: tI18nComplete.raw('textbaaddf70fb5d') }), _jsx(DropdownMenuRadioGroup, { value: kindFilter, onValueChange: (v) => setKindFilter(v), children: kindFilters.map((f) => (_jsxs(DropdownMenuRadioItem, { value: f.value, side: "left", children: [f.label, (kindCounts[f.value] ?? 0) > 0 && (_jsx(CountBadge, { count: kindCounts[f.value] ?? 0, className: "ml-auto" }))] }, f.value))) })] })] }), sessionOpts.length > 0 && (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: sessionFilter === 'all' && !grouped ? 'outline' : 'secondary', className: "max-w-64", children: [_jsx("span", { className: "truncate", children: sessionFilter === 'all'
+                                                                    ? tI18nComplete.raw('text78648d4d6649')
+                                                                    : (sessionOpts.find((s) => s.sessionId === sessionFilter)?.label ??
+                                                                        'Session') }), _jsx(ChevronDown, { className: "text-muted-foreground size-3.5 shrink-0" })] }) }), _jsxs(DropdownMenuContent, { align: "end", className: "max-h-72 w-64 overflow-y-auto", children: [_jsx(DropdownMenuLabel, { children: tI18nComplete.raw('text6959b4159575') }), _jsxs(DropdownMenuRadioGroup, { value: sessionFilter, onValueChange: setSessionFilter, children: [_jsxs(DropdownMenuRadioItem, { value: "all", side: "left", children: [tI18nComplete.raw('text78648d4d6649'), _jsx(CountBadge, { count: filterItems(items, segment, kindFilter, query, 'all').length, className: "ml-auto" })] }), sessionOpts.map((s) => (_jsxs(DropdownMenuRadioItem, { value: s.sessionId, side: "left", children: [_jsx("span", { className: "truncate", children: s.label }), _jsx(CountBadge, { count: filterItems(items, segment, kindFilter, query, s.sessionId).length, className: "ml-auto" })] }, s.sessionId)))] }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuCheckboxItem, { checked: grouped, onCheckedChange: setGrouped, className: "pl-8", children: tI18nComplete.raw('text137f98df3b9b') })] })] })), _jsxs(InputGroupSearch, { className: "sm:w-56", children: [_jsx(InputGroupSearchIcon, { children: _jsx(Search, {}) }), _jsx(InputGroupSearchInput, { id: "review-search", value: query, onChange: (e) => {
+                                                        setQuery(e.target.value);
+                                                        setFocusedIdx(0);
+                                                    }, placeholder: tI18nComplete.raw('text49c266baaaa7'), variant: "popover", size: "sm" }), !query && _jsx(Kbd, { className: "absolute top-1/2 right-2 -translate-y-1/2", children: "/" })] })] })] }), isError && items.length === 0 ? (_jsx(ErrorState, { size: "sm", title: tI18nComplete.raw('text23686ff6ba91'), description: tI18nComplete.raw('text481859b689b0'), action: _jsxs(Button, { variant: "outline", size: "sm", onClick: onRefresh, disabled: isFetching, children: [isFetching ? _jsx(Loading, { className: "size-3.5 shrink-0" }) : null, tI18nComplete.raw('text942087cc2d41')] }) })) : isLoading && items.length === 0 ? (_jsx(ListSkeleton, {})) : visible.length === 0 && loadMore ? (
+                        // Nothing on the pages read so far matches, and more pages exist:
+                        // offer them, never the empty state (KRTX-1727).
+                        _jsx("div", { className: "pt-6", children: loadMoreButton })) : visible.length === 0 ? (_jsx(EmptyState, { icon: CheckCircleSolid, size: "sm", title: query
+                                ? tI18nComplete.raw('text2df01a03ff43')
+                                : segment === 'needs_you'
+                                    ? tI18nComplete.raw('text2f485b9971df')
+                                    : tI18nComplete.raw('textf4c7f41c12d6'), description: query
+                                ? tI18nComplete.raw('text2e6d79de50dc')
+                                : segment === 'needs_you'
+                                    ? tI18nComplete.raw('text67735374cc20')
+                                    : segment === 'waiting'
+                                        ? tI18nComplete.raw('text2c192433a710')
+                                        : tI18nComplete.raw('text6a00736dae3c') })) : grouped ? (_jsx("div", { ...listProps, className: "space-y-5", children: groups.map((g) => (_jsxs("section", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center gap-2 px-1", children: [_jsx("h2", { className: "text-foreground truncate text-xs font-medium", children: g.label }), _jsx(Badge, { variant: "secondary", size: "xs", className: "tabular-nums", children: g.items.length }), g.sessionId && onOpenSession && (_jsx("button", { type: "button", className: "text-muted-foreground hover:text-foreground duration-fast ml-auto shrink-0 text-xs transition-colors", onClick: () => onOpenSession(g.sessionId), children: tI18nComplete.raw('textb205bb47f81a') }))] }), _jsx("ul", { ...listboxProps, className: LIST_CLASS, children: g.items.map((item) => renderRow(item, visibleIndexById.get(item.id) ?? 0, true)) })] }, g.sessionId ?? '__none__'))) })) : (_jsx("ul", { ...listProps, ...listboxProps, className: LIST_CLASS, children: visible.map((item, idx) => renderRow(item, idx, false)) })), visible.length > 0 && loadMore ? loadMoreButton : null] }) }), selectMode && segment === 'needs_you' ? (
+            // Pinned to the bottom of the list column, not to the end of the list:
+            // `sticky` stops where a short list ends (schedule-view.tsx).
+            _jsx("div", { className: "pointer-events-none absolute inset-x-0 bottom-4 z-10 flex justify-center px-4", children: _jsx("div", { className: "pointer-events-auto w-full max-w-xl", children: _jsx(SelectionBar, { selectedCount: selectedItems.length, allSelected: selectableIds.length > 0 &&
+                            selectedItems.length >= Math.min(BULK_MAX, selectableIds.length), canSelectAll: selectableIds.length > 0, onSelectAll: () => setSelectedIds(new Set(selectableIds.slice(0, BULK_MAX))), onClear: () => setSelectedIds(new Set()), onExit: exitSelectMode, actions: bulkActions, progress: bulkProgress, animateIn: selectMode !== 'key', note: selectedItems.length >= BULK_MAX && selectableIds.length > BULK_MAX
+                            ? tBulk('limitNote', { count: BULK_MAX })
+                            : undefined }) }) })) : null, _jsx(ConfirmDialog, { open: confirm.open, onOpenChange: (open) => setConfirm((c) => ({ ...c, open })), title: confirmCopy.title, description: confirmCopy.description, confirmLabel: confirmCopy.confirm, confirmVariant: confirm.verb === 'approve' ? 'default' : 'destructive', onConfirm: () => void runBulk(confirm.verb) }), approvalModal, _jsx(KeyboardHelp, { open: helpOpen, onClose: () => setHelpOpen(false) })] }));
+}