@kortix/ui 0.14.4 → 0.14.6

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

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

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

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

package/dist/workspace/sidebar/session-status-mark.d.ts

@@ -1,5 +1,19 @@
 import type { SessionDisplayStatus } from '../../session/actions/session-label.js';
+/**
+ * A review is overdue when an open change request has not moved for 24h.
+ * The row then turns the review glyph from blue (your turn) to yellow (still
+ * waiting on you). Merged and closed requests never count.
+ */
+export declare function isReviewOverdue(changeRequests: readonly {
+    status: string;
+    updated_at: string;
+}[], now?: number): boolean;
 /** A status glyph with stable 16px geometry across every session state. */
-export declare function SessionStatusMark({ status }: {
+export declare function SessionStatusMark({ status, waitingOn, overdue, }: {
     status: SessionDisplayStatus;
+    /** `needs-you` only: an agent question or permission (`answer`) or a change
+     *  request (`review`). An answer blocks the agent, so callers pass it first. */
+    waitingOn?: 'answer' | 'review';
+    /** `needs-you` review only: it has waited too long, see `isReviewOverdue`. */
+    overdue?: boolean;
 }): import("react").JSX.Element;

package/dist/workspace/sidebar/session-status-mark.js

@@ -1,24 +1,70 @@
 'use client';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import Loading from '../../primitives/loading.js';
-import { ClockCounterClockwiseIcon } from '@phosphor-icons/react';
-const STATUS_MARK_STYLE = {
-    'needs-you': { color: 'var(--kortix-green)', glyph: 'ring', fill: true },
-    starting: { color: 'var(--kortix-yellow)', glyph: 'ring', fill: false },
-    running: { color: 'var(--kortix-green)', glyph: 'ring', fill: true },
-    done: { color: 'var(--muted-foreground)', glyph: 'check', fill: false },
-    stopped: { color: 'var(--muted-foreground)', glyph: 'ring', fill: false },
-    failed: { color: 'var(--kortix-red)', glyph: 'ring', fill: true },
-    legacy: { color: 'var(--muted-foreground)', glyph: 'ring', fill: false },
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ClockCounterClockwiseIcon, GitDiffIcon, QuestionIcon } from '@phosphor-icons/react';
+/**
+ * Color says who acts: gray nobody, green the agent, blue you (yellow once it waits
+ * over 24h), red broken.
+ * `starting` draws the stopped ring: a wake is meant to be instant, so it gets
+ * no state of its own, and blue and yellow stay reserved for `needs-you`.
+ */
+const RING_STATUS_STYLE = {
+    starting: { color: 'var(--muted-foreground)', fill: false },
+    stopped: { color: 'var(--muted-foreground)', fill: false },
+    failed: { color: 'var(--kortix-red)', fill: true },
 };
+const DOT_COUNT = 8;
+const DOT_RADIUS = 6;
+const DOTS = Array.from({ length: DOT_COUNT }, (_, i) => {
+    const angle = (i * 2 * Math.PI) / DOT_COUNT;
+    return { cx: 8 + DOT_RADIUS * Math.sin(angle), cy: 8 - DOT_RADIUS * Math.cos(angle) };
+});
+/** Behind the arc, clockwise: each dash fainter, so the still glyph reads as
+ *  turning. Nothing animates: many rows can be working at once. */
+const WORKING_TRAIL = [
+    { d: 'M2.84 4.39 A6.3 6.3 0 0 1 4.39 2.84', opacity: 0.85 },
+    { d: 'M1.8 9.1 A6.3 6.3 0 0 1 1.8 6.9', opacity: 0.55 },
+    { d: 'M4.39 13.16 A6.3 6.3 0 0 1 2.84 11.61', opacity: 0.25 },
+];
+const GREEN_GLYPH = {
+    height: '16',
+    width: '16',
+    viewBox: '0 0 16 16',
+    style: { color: 'var(--kortix-green)' },
+    className: 'shrink-0',
+    'aria-hidden': true,
+};
+/** `done` (agent idle, ready for a prompt): the dot ring filled with a core. */
+function ReadyGlyph() {
+    return (_jsxs("svg", { ...GREEN_GLYPH, "data-glyph": "ready", children: [DOTS.map((dot, i) => (_jsx("circle", { "data-dot": "", cx: dot.cx, cy: dot.cy, r: "1", fill: "currentColor" }, i))), _jsx("circle", { "data-core": "", cx: "8", cy: "8", r: "3.6", fill: "currentColor" })] }));
+}
+/** `running`: a solid half arc leading a fading trail of dashes. */
+function WorkingGlyph() {
+    return (_jsxs("svg", { ...GREEN_GLYPH, "data-glyph": "working", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", children: [WORKING_TRAIL.map((dash) => (_jsx("path", { "data-dash": "", d: dash.d, opacity: dash.opacity }, dash.d))), _jsx("path", { d: "M8 1.7 A6.3 6.3 0 0 1 8 14.3" })] }));
+}
+const REVIEW_OVERDUE_MS = 24 * 60 * 60 * 1000;
+/**
+ * A review is overdue when an open change request has not moved for 24h.
+ * The row then turns the review glyph from blue (your turn) to yellow (still
+ * waiting on you). Merged and closed requests never count.
+ */
+export function isReviewOverdue(changeRequests, now = Date.now()) {
+    return changeRequests.some((cr) => cr.status === 'open' && now - Date.parse(cr.updated_at) >= REVIEW_OVERDUE_MS);
+}
 /** A status glyph with stable 16px geometry across every session state. */
-export function SessionStatusMark({ status }) {
-    const style = STATUS_MARK_STYLE[status];
-    if (status === 'starting') {
-        return _jsx(Loading, { className: "text-kortix-yellow size-3.5", "aria-hidden": true });
+export function SessionStatusMark({ status, waitingOn = 'review', overdue = false, }) {
+    if (status === 'done')
+        return _jsx(ReadyGlyph, {});
+    if (status === 'running')
+        return _jsx(WorkingGlyph, {});
+    if (status === 'needs-you' && waitingOn === 'answer') {
+        return (_jsx(QuestionIcon, { "data-glyph": "question", className: "size-4 shrink-0", style: { color: 'var(--kortix-blue)' }, "aria-hidden": true }));
+    }
+    if (status === 'needs-you') {
+        return (_jsx(GitDiffIcon, { "data-glyph": "review", className: "size-4 shrink-0", style: { color: overdue ? 'var(--kortix-yellow)' : 'var(--kortix-blue)' }, "aria-hidden": true }));
     }
     if (status === 'legacy') {
-        return (_jsx(ClockCounterClockwiseIcon, { className: "size-3.5 shrink-0", style: { color: style.color }, "aria-hidden": true }));
+        return (_jsx(ClockCounterClockwiseIcon, { className: "size-3.5 shrink-0", style: { color: 'var(--muted-foreground)' }, "aria-hidden": true }));
     }
-    return (_jsx("svg", { height: "16", width: "16", viewBox: "0 0 16 16", strokeLinejoin: "round", style: { color: style.color }, className: "shrink-0", "aria-hidden": true, children: style.glyph === 'check' ? (_jsx("path", { d: "M4 8.4 L6.8 11.2 L12 5.2", stroke: "currentColor", fill: "none", strokeWidth: "1.5", strokeLinecap: "round" })) : (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "8", cy: "8", r: "6.3", stroke: "currentColor", fill: "none", strokeWidth: "1.5" }), style.fill && (_jsx("circle", { cx: "8", cy: "8", r: status === 'needs-you' ? 3.2 : 4, fill: "currentColor" }))] })) }));
+    const style = RING_STATUS_STYLE[status];
+    return (_jsxs("svg", { height: "16", width: "16", viewBox: "0 0 16 16", style: { color: style.color }, className: "shrink-0", "aria-hidden": true, children: [_jsx("circle", { cx: "8", cy: "8", r: "6.3", stroke: "currentColor", fill: "none", strokeWidth: "1.5" }), style.fill && _jsx("circle", { cx: "8", cy: "8", r: "4", fill: "currentColor" })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kortix/ui",
-  "version": "0.14.4",
+  "version": "0.14.6",
   "description": "Kortix UI: the shared React component library for apps/web, Kortix Apps and SDK hosts. Tailwind v4 classes, themed by CSS variables.",
   "type": "module",
   "license": "Elastic-2.0",
@@ -1637,6 +1637,10 @@
       "types": "./dist/session/models/model-grouping.d.ts",
       "import": "./dist/session/models/model-grouping.js"
     },
+    "./session/models/model-search-empty": {
+      "types": "./dist/session/models/model-search-empty.d.ts",
+      "import": "./dist/session/models/model-search-empty.js"
+    },
     "./session/models/model-selector": {
       "types": "./dist/session/models/model-selector.d.ts",
       "import": "./dist/session/models/model-selector.js"
@@ -2153,7 +2157,7 @@
     "@extend-ai/react-docx": "^0.7.5",
     "@extend-ai/react-xlsx": "0.13.4",
     "@glideapps/glide-data-grid": "6.0.4-alpha24",
-    "@kortix/llm-catalog": "0.14.4",
+    "@kortix/llm-catalog": "0.14.6",
     "@lezer/highlight": "1.2.3",
     "@paper-design/shaders-react": "^0.0.76",
     "@phosphor-icons/react": "2.1.10",
@@ -2242,7 +2246,7 @@
     "zustand": "^5.0.3"
   },
   "peerDependencies": {
-    "@kortix/sdk": "^0.14.4",
+    "@kortix/sdk": "^0.14.6",
     "@tanstack/react-query": "^5.75.2",
     "@types/react": ">=18",
     "react": ">=19",

package/skills/kortix-ui/SKILL.md

@@ -84,7 +84,7 @@ Theme with `@kortix/ui/theme`, never by forking a component: `themeToCss(theme)`
 
 | Import from | Names |
 | --- | --- |
-| `@kortix/ui` (adapters) | `cn`, `UiProvider`, `defaultUiStrings`, `useUiStrings`, `useUiLink`, `useUiImage`, `useUiBrand`, `UiStrings`, `UiStringsInput`, `UiLinkProps`, `UiLinkComponent`, `UiImageProps`, `UiImageComponent`, `UiBrand`, `UseUiBrand`, `useIsDark`, `useUiRouter`, `useUiShallowNavigate`, `UiShallowNavigate`, `useUiPathname`, `useUiSearchParams`, `useUiParams`, `defaultUiNavigation`, `UiNavigation`, `UiRouter`, `UiRouteParams`, `UiSearchParams`, `useUiViewerId`, `useUiHostConfig`, `defaultUiHostConfig`, `UiHostConfig`, `SessionIdsProvider`, `useSessionIds`, `UiSessionIds` |
+| `@kortix/ui` (adapters) | `cn`, `UiProvider`, `defaultUiStrings`, `useUiStrings`, `useUiLink`, `useUiImage`, `useUiBrand`, `UiStrings`, `UiStringsInput`, `UiLinkProps`, `UiLinkComponent`, `UiImageProps`, `UiImageComponent`, `UiBrand`, `UseUiBrand`, `useIsDark`, `useUiRouter`, `useUiShallowNavigate`, `UiShallowNavigate`, `useUiPathname`, `useUiSearchParams`, `useUiParams`, `defaultUiNavigation`, `UiNavigation`, `UiRouter`, `UiRouteParams`, `UiSearchParams`, `useUiViewerId`, `useUiHostConfig`, `defaultUiHostConfig`, `UiHostConfig`, `UiSlashAction`, `SessionIdsProvider`, `useSessionIds`, `UiSessionIds` |
 | `@kortix/ui` (actions, display) | `Button`, `buttonVariants`, `ButtonProps`, `Badge`, `badgeVariants`, `Card`, `CardAction`, `CardButton`, `CardContent`, `CardDescription`, `CardEyebrow`, `CardFeature`, `CardFooter`, `CardGroup`, `CardHeader`, `CardImage`, `CardMedia`, `CardTitle`, `CardButtonProps`, `CardButtonSize`, `CardButtonVariant`, `CardGroupProps`, `CardLogo`, `CardProps`, `Separator`, `Skeleton` |
 | `@kortix/ui` (forms) | `Input`, `inputFocusClasses`, `inputInvalidClasses`, `inputSurfaceClasses`, `inputTransitionClasses`, `InputProps`, `useAutosizeTextArea`, `Textarea`, `AutosizeTextAreaRef`, `AutosizeTextAreaProps`, `Label`, `Checkbox`, `CheckboxProps`, `CheckboxVariant`, `Switch`, `SwitchProps`, `Select`, `SelectContent`, `SelectGroup`, `SelectItem`, `SelectLabel`, `SelectScrollDownButton`, `SelectScrollUpButton`, `SelectSeparator`, `SelectTrigger`, `SelectValue`, `SelectTriggerProps` |
 | `@kortix/ui` (overlays) | `Modal`, `ModalBody`, `ModalClose`, `ModalContent`, `ModalContentInner`, `ModalDescription`, `ModalFooter`, `ModalHeader`, `ModalOverlay`, `ModalPortal`, `ModalTitle`, `ModalTrigger`, `Hint`, `HintProps`, `Popover`, `PopoverAnchor`, `PopoverContent`, `PopoverTrigger`, `DropdownMenu`, `DropdownMenuCheckboxItem`, `DropdownMenuContent`, `DropdownMenuGroup`, `DropdownMenuItem`, `DropdownMenuLabel`, `DropdownMenuPortal`, `DropdownMenuRadioGroup`, `DropdownMenuRadioItem`, `DropdownMenuSeparator`, `DropdownMenuShortcut`, `DropdownMenuSub`, `DropdownMenuSubContent`, `DropdownMenuSubTrigger`, `DropdownMenuTrigger` |

package/dist/customize/sections/view/sandbox-provider-result.d.ts

@@ -1,47 +0,0 @@
-import { type SandboxProviderTransitionState, type UpdateProjectSandboxProviderResult } from '@kortix/sdk';
-import type { QueryClient } from '@tanstack/react-query';
-/**
- * A provider-migration transition never changes again once it reaches one of
- * these statuses (mirrors the API's TERMINAL_TRANSITION_STATUSES) — plus the
- * immediate `noop`/`cleared` markers a transition row can carry. Polling stops
- * on any of them.
- */
-export declare const SANDBOX_PROVIDER_TERMINAL_STATUSES: Set<string>;
-/** A missing/absent status (no live transition) is treated as terminal too. */
-export declare function isSandboxProviderTransitionTerminal(status: string | null | undefined): boolean;
-type CacheClient = Pick<QueryClient, 'setQueryData' | 'invalidateQueries'>;
-/**
- * FIX-L: apply the PATCH /sandbox-provider result to the query cache.
- *
- * Writes the project caches ONLY for the immediate `kind:'project'` result. A
- * `kind:'preparation'` result is a durable TRANSITION object, not a project —
- * writing it into `qk.project.summary(id)` would corrupt the cached project
- * shape (it has no repo_url / metadata / experimental_features …). On
- * preparation we leave the project cache untouched and return `'preparation'`
- * so the caller polls the transition instead. Returns the result's kind.
- */
-export declare function applySandboxProviderResult(queryClient: CacheClient, projectId: string, result: UpdateProjectSandboxProviderResult): 'project' | 'preparation';
-export interface PollSandboxProviderTransitionOptions {
-    /** Injected for tests; defaults to the SDK poll call. */
-    fetchState?: (projectId: string) => Promise<SandboxProviderTransitionState>;
-    /** Called once when polling stops (terminal status, no transition, or exhausted).
-     *  `null` means the poll ended without a readable state (404/no-transition). */
-    onSettled?: (state: SandboxProviderTransitionState | null) => void;
-    maxAttempts?: number;
-    baseDelayMs?: number;
-    maxDelayMs?: number;
-    /** Cooperative cancellation (e.g. component unmounted). */
-    signal?: {
-        aborted: boolean;
-    };
-    /** Injected for tests; defaults to setTimeout. */
-    sleep?: (ms: number) => Promise<void>;
-}
-/**
- * FIX-L: poll the durable provider-migration transition after a `kind:'preparation'`
- * switch. Bounded (maxAttempts) with exponential backoff; stops on a terminal
- * status, and treats a 404 / no-transition / any read error as terminal (nothing
- * left to poll). Never throws — surfaces progress via `onSettled`.
- */
-export declare function pollSandboxProviderTransition(projectId: string, opts?: PollSandboxProviderTransitionOptions): Promise<SandboxProviderTransitionState | null>;
-export {};

package/dist/customize/sections/view/sandbox-provider-result.js

@@ -1,79 +0,0 @@
-import { getProjectSandboxProviderTransition, } from '@kortix/sdk';
-import { qk } from '@kortix/sdk/react';
-/**
- * A provider-migration transition never changes again once it reaches one of
- * these statuses (mirrors the API's TERMINAL_TRANSITION_STATUSES) — plus the
- * immediate `noop`/`cleared` markers a transition row can carry. Polling stops
- * on any of them.
- */
-export const SANDBOX_PROVIDER_TERMINAL_STATUSES = new Set([
-    'activated',
-    'failed',
-    'superseded',
-    'cancelled',
-    'noop',
-    'cleared',
-]);
-/** A missing/absent status (no live transition) is treated as terminal too. */
-export function isSandboxProviderTransitionTerminal(status) {
-    return status == null || SANDBOX_PROVIDER_TERMINAL_STATUSES.has(status);
-}
-/**
- * FIX-L: apply the PATCH /sandbox-provider result to the query cache.
- *
- * Writes the project caches ONLY for the immediate `kind:'project'` result. A
- * `kind:'preparation'` result is a durable TRANSITION object, not a project —
- * writing it into `qk.project.summary(id)` would corrupt the cached project
- * shape (it has no repo_url / metadata / experimental_features …). On
- * preparation we leave the project cache untouched and return `'preparation'`
- * so the caller polls the transition instead. Returns the result's kind.
- */
-export function applySandboxProviderResult(queryClient, projectId, result) {
-    if (result.kind !== 'project')
-        return 'preparation';
-    // Strip the discriminant so the cached value is a pure KortixProject.
-    const { kind: _kind, ...project } = result;
-    const cached = project;
-    queryClient.setQueryData(qk.project.summary(projectId), cached);
-    queryClient.setQueryData(qk.project.detail(projectId), (c) => c ? { ...c, project: cached } : c);
-    queryClient.invalidateQueries({ queryKey: qk.project.detail(projectId) });
-    // qk.projects.scope(), not the precise per-account form: restores the
-    // reach the old bare projects-literal prefix match had — every account's
-    // list, and the accountless slot the marketplace picker reads. A
-    // sandbox-provider switch is rare — over-invalidating costs nothing.
-    queryClient.invalidateQueries({ queryKey: qk.projects.scope() });
-    return 'project';
-}
-/**
- * FIX-L: poll the durable provider-migration transition after a `kind:'preparation'`
- * switch. Bounded (maxAttempts) with exponential backoff; stops on a terminal
- * status, and treats a 404 / no-transition / any read error as terminal (nothing
- * left to poll). Never throws — surfaces progress via `onSettled`.
- */
-export async function pollSandboxProviderTransition(projectId, opts = {}) {
-    const fetchState = opts.fetchState ?? getProjectSandboxProviderTransition;
-    const maxAttempts = opts.maxAttempts ?? 60;
-    const baseDelayMs = opts.baseDelayMs ?? 2_000;
-    const maxDelayMs = opts.maxDelayMs ?? 15_000;
-    const sleep = opts.sleep ?? ((ms) => new Promise((r) => setTimeout(r, ms)));
-    let last = null;
-    for (let attempt = 0; attempt < maxAttempts; attempt++) {
-        if (opts.signal?.aborted)
-            return last;
-        try {
-            last = await fetchState(projectId);
-        }
-        catch {
-            // 404 / no transition / transient read failure → nothing to keep polling.
-            opts.onSettled?.(null);
-            return null;
-        }
-        if (isSandboxProviderTransitionTerminal(last?.latest?.status)) {
-            opts.onSettled?.(last);
-            return last;
-        }
-        await sleep(Math.min(baseDelayMs * 2 ** attempt, maxDelayMs));
-    }
-    opts.onSettled?.(last);
-    return last;
-}