@kortix/ui 0.14.8 → 0.14.9

package/dist/workspace/memory/used-memory-chip.js

@@ -0,0 +1,61 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useProjectMemoryPages, useSessionMemoryUsage } from '@kortix/sdk/react';
+import { CaretRightIcon, SunDimIcon } from '@phosphor-icons/react';
+import { useEffect, useState } from 'react';
+import { useLocale, useTranslations } from '../../i18n/index.js';
+import { cn } from '../../lib/utils.js';
+import { Popover, PopoverContent, PopoverTrigger } from '../../primitives/popover.js';
+import { UiLink as Link } from '../../providers/ui-provider.js';
+import { agentLabel } from '../spaces/space-timeline.js';
+import { MEMORY_TYPE_ICON } from './memory-labels.js';
+import { useMemoryPageHref } from '../../internal/lib/memory-href.js';
+const ROW = 'flex h-7.5 w-full items-center gap-2 rounded-md px-2 text-left text-xs';
+/** A layer's name in the chip: "Company", "#marketing", or the DM's agent. */
+function useLayerName() {
+    const t = useTranslations('spaces.memory.used');
+    return (layer) => (layer.scope === 'company' ? t('company') : layer.scope === 'dm' ? agentLabel(layer.name) : layer.name);
+}
+/**
+ * "Used #marketing memory · 3 pages ›" under a thread's first prompt: the
+ * pages its agent was given at the first turn. It reads the record only once
+ * `ready` (a turn has finished): before that the record is empty, and nothing
+ * polls it. A turn that ends while the record is still empty reads it again.
+ * Hidden when the thread loaded no page.
+ */
+export function UsedMemoryChip({ projectId, sessionId, ready, className, }) {
+    const t = useTranslations('spaces.memory.used');
+    const locale = useLocale();
+    const layerName = useLayerName();
+    const [open, setOpen] = useState(false);
+    const usage = useSessionMemoryUsage(projectId, sessionId, { enabled: ready });
+    const layers = usage.data?.loaded_at ? usage.data.layers.filter((layer) => layer.pages.length > 0) : [];
+    const count = layers.reduce((sum, layer) => sum + layer.pages.length, 0);
+    if (count === 0)
+        return null;
+    const places = new Intl.ListFormat(locale, { type: 'conjunction' }).format(layers.map(layerName));
+    return (_jsx("div", { className: cn('flex py-1', className), children: _jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: "group/used text-muted-foreground hover:bg-hover hover:text-foreground focus-visible:ring-ring -mx-1 flex max-w-full items-center gap-1.5 rounded-md px-1 py-0.5 text-xs outline-none focus-visible:ring-2", children: [_jsx(SunDimIcon, { "aria-hidden": true, className: "size-4 shrink-0" }), _jsx("span", { className: "min-w-0 truncate", children: t('label', { places, count }) }), _jsx(CaretRightIcon, { "aria-hidden": true, className: "size-3 shrink-0" })] }) }), _jsxs(PopoverContent, { align: "start", className: "flex max-h-96 w-80 flex-col gap-1 overflow-y-auto p-1.5", children: [_jsx("p", { className: "text-muted-foreground px-2 pt-1 pb-0.5 text-xs", children: t('title') }), layers.map((layer) => (_jsx(UsedLayer, { projectId: projectId, layer: layer, name: layerName(layer), open: open, onOpen: () => setOpen(false) }, layer.layer_key)))] })] }) }));
+}
+/**
+ * One layer's pages. A page deleted since the thread started is shown as
+ * removed, read from the layer's live list (the one the Memory tab shares).
+ * No page request per row: a deleted page never reaches a 404.
+ */
+function UsedLayer({ projectId, layer, name, open, onOpen, }) {
+    const t = useTranslations('spaces.memory.used');
+    const live = useProjectMemoryPages(projectId, layer.layer_key, { enabled: open });
+    // Mounted when the popover opens: read the live list again, so a page
+    // deleted since the last read shows as removed, not as a link.
+    const { refetch } = live;
+    useEffect(() => {
+        void refetch();
+    }, [refetch]);
+    const href = useMemoryPageHref(projectId, open);
+    return (_jsxs("section", { className: "flex flex-col pt-1.5", children: [_jsx("p", { className: "px-2 pb-0.5 text-xs font-medium", children: name }), layer.pages.map((page) => {
+                const Glyph = MEMORY_TYPE_ICON[page.type];
+                const removed = !!live.data && !live.data.some((candidate) => candidate.page_id === page.page_id);
+                const target = removed ? null : href({ scope: layer.scope, key: layer.layer_key }, page.page_id);
+                const body = (_jsxs(_Fragment, { children: [_jsx(Glyph, { "aria-hidden": true, className: "text-muted-foreground size-3.5 shrink-0" }), _jsx("span", { className: cn('min-w-0 flex-1 truncate', removed && 'text-muted-foreground'), children: page.title }), removed ? _jsx("span", { className: "text-muted-foreground shrink-0", children: t('removed') }) : null] }));
+                return target ? (_jsx(Link, { href: target, onClick: onOpen, className: cn(ROW, 'hover:bg-hover focus-visible:ring-ring outline-none focus-visible:ring-2'), children: body }, page.page_id)) : (_jsx("div", { className: ROW, children: body }, page.page_id));
+            })] }));
+}

package/dist/workspace/new/advanced-fields.d.ts

@@ -1,6 +1,7 @@
 import type { NewWorkspaceFormState } from './new-workspace-form.js';
-export declare function AdvancedFields({ state, accountId, onChange, }: {
+export declare function AdvancedFields({ state, accountId, onChange, connectComputer, }: {
     state: NewWorkspaceFormState;
+    connectComputer?: boolean;
     /** The account the create targets — resolved by the page, which owns the
      *  "one account, nothing to pick" fallback. The GitHub queries below are
      *  account-scoped, so they cannot run on `state.accountId` alone: that is

package/dist/workspace/new/advanced-fields.js

@@ -55,7 +55,7 @@ import { useEffect, useMemo, useRef, useState } from 'react';
  */
 /** The `<Select>` value that opens the add-account dialog instead of picking. */
 const ADD_ACCOUNT_VALUE = '__add_github_account__';
-export function AdvancedFields({ state, accountId, onChange, }) {
+export function AdvancedFields({ state, accountId, onChange, connectComputer, }) {
     const t = useTranslations('newWorkspace');
     const [addOpen, setAddOpen] = useState(false);
     // Same cache key the account hub's Git tab and `connected-tab.tsx` use, so
@@ -128,7 +128,7 @@ export function AdvancedFields({ state, accountId, onChange, }) {
     const addAccountDialog = accountId ? (_jsx(AddGitHubAccountDialog, { open: addOpen, onOpenChange: setAddOpen, accountId: accountId, installUrl: installUrl, 
         // Round trip: the setup page reads this path back on completion, so
         // the user lands on `/new` with the same source AND the same account.
-        returnPath: newWorkspaceReturnPath(state.source, accountId) })) : null;
+        returnPath: newWorkspaceReturnPath(state.source, accountId, connectComputer) })) : null;
     return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex flex-col space-y-3", children: [_jsx(Label, { htmlFor: "workspace-source", children: t('repository.gitAccountLabel') }), optionsLoading ? (
                     // The trigger's own shape (md: `h-10`, the field radius), so the
                     // Select lands in exactly the box that was holding its place — no

package/dist/workspace/new/source-param.d.ts

@@ -16,4 +16,4 @@
 import type { RepositorySource } from './new-workspace-form.js';
 export declare function readSourceParam(params: URLSearchParams): RepositorySource | null;
 /** The path `/github/setup` should return to, preserving the picked source. */
-export declare function newWorkspaceReturnPath(source: RepositorySource, accountId?: string | null): string;
+export declare function newWorkspaceReturnPath(source: RepositorySource, accountId?: string | null, connectComputer?: boolean): string;

package/dist/workspace/new/source-param.js

@@ -6,7 +6,7 @@ export function readSourceParam(params) {
     return SOURCES.find((source) => source === raw) ?? null;
 }
 /** The path `/github/setup` should return to, preserving the picked source. */
-export function newWorkspaceReturnPath(source, accountId) {
+export function newWorkspaceReturnPath(source, accountId, connectComputer) {
     const params = new URLSearchParams();
     if (source !== 'managed')
         params.set('source', source);
@@ -15,6 +15,8 @@ export function newWorkspaceReturnPath(source, accountId) {
     // account is connected" about the wrong account (dev, 2026-09-17).
     if (accountId)
         params.set('account', accountId);
+    if (connectComputer)
+        params.set('connect', 'computer');
     const qs = params.toString();
     return qs ? `/new?${qs}` : '/new';
 }

package/dist/workspace/new/use-create-workspace.d.ts

@@ -401,19 +401,15 @@ export type CreateOrchestrationClient = {
     projectsCachedForAccount: (accountId: string) => KortixProject[] | undefined;
     /**
      * Stamp the created project onboarded — the same `PATCH /projects/:id/onboarding`
-     * the wizard's own exits run. A create that lands the user directly on the
-     * project page (see `enterProject`) is an implicit skip: the wizard must not
-     * mount full-screen over the workspace they just asked for. This is why the
+     * the onboarding chat's kickoff runs. A later project lands on the usual home,
+     * never on the onboarding chat. This is why the
      * stamp lives in the flow and not on the server's provision route: it reuses
      * an existing endpoint instead of growing the create contract.
      *
      * Only a LATER project is stamped. A fresh account's first project stays
-     * unstamped, so the shell's wizard opens on the landing and walks the new
-     * user through work, apps and models — the post-signup onboarding the
-     * signup journey expects (KRTX-2092). That mount is not the trap the
-     * implicit skip exists to prevent: the shell's wizard now carries the Skip
-     * control, and its exit opens the first chat in place. An experienced user
-     * creating project two never sees the wizard again (KRTX-1419).
+     * unstamped, so it opens on the onboarding chat, where the agent onboards
+     * the new user (KRTX-2092). An experienced user creating project two never
+     * sees onboarding again (KRTX-1419).
      */
     completeOnboarding: (projectId: string) => Promise<unknown>;
     /**
@@ -497,7 +493,9 @@ export declare function runCreate(state: NewWorkspaceFormState, creatableAccount
  * target account (`resolveTargetAccountId`) without a second, page-specific
  * query.
  */
-export declare function useCreateWorkspace(): {
+export declare function useCreateWorkspace(options?: {
+    enterProject?: (projectId: string) => void;
+}): {
     create: (state: NewWorkspaceFormState) => Promise<void>;
     status: CreateStatus;
     error: string | null;

package/dist/workspace/new/use-create-workspace.js

@@ -641,7 +641,7 @@ export async function runCreate(state, creatableAccounts, userId, client) {
  * target account (`resolveTargetAccountId`) without a second, page-specific
  * query.
  */
-export function useCreateWorkspace() {
+export function useCreateWorkspace(options) {
     const router = useUiRouter();
     const queryClient = useQueryClient();
     const viewerId = useUiViewerId();
@@ -726,7 +726,7 @@ export function useCreateWorkspace() {
             // decision reads `projectsCachedForAccount`), so its onboarding wizard
             // opens on the landing (KRTX-2092).
             completeOnboarding: (projectId) => setProjectOnboardingComplete(projectId, true),
-            enterProject: (projectId) => router.replace(uiRoutes().project(encodeURIComponent(projectId))),
+            enterProject: options?.enterProject ?? ((projectId) => router.replace(uiRoutes().project(encodeURIComponent(projectId)))),
             now: Date.now,
         });
         if (!result.ok) {
@@ -734,7 +734,7 @@ export function useCreateWorkspace() {
             setError(messageFor(result.error));
             setLastError(result.error);
         }
-    }, [creatableAccounts, queryClient, router, viewerId]);
+    }, [creatableAccounts, queryClient, router, viewerId, options?.enterProject]);
     const retry = useCallback(() => {
         if (lastState)
             void create(lastState);

package/dist/workspace/projects/onboarding/app-logo.d.ts

@@ -1,5 +1,10 @@
-/** A catalogue app's logo in a 24px slot, or a plug when the catalogue has none. */
-export declare function AppLogo({ src, className }: {
+/**
+ * A catalogue app's logo in a 24px slot: the one connector logo
+ * (`ConnectorLogo`), so an app reads the same here as on its connector page.
+ * `slug` lets a Kortix-built app (Slack, Email, …) show its own mark.
+ */
+export declare function AppLogo({ src, slug, className, }: {
     src: string | null;
+    slug?: string | null;
     className?: string;
 }): import("react").JSX.Element;

package/dist/workspace/projects/onboarding/app-logo.js

@@ -1,18 +1,11 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { PlugIcon } from '@phosphor-icons/react';
-import { UiImage as Image } from '../../../providers/ui-provider.js';
-import { cn } from '../../../internal/lib/utils.js';
+import { ConnectorLogo } from '../../../internal/connector-logo/connector-logo.js';
 /**
- * Third-party logos are drawn for a white page: many are black marks (GitHub,
- * X, Notion) that vanish on a dark tile. Each one sits on a white chip in both
- * themes; on the light theme the chip matches the tile.
+ * A catalogue app's logo in a 24px slot: the one connector logo
+ * (`ConnectorLogo`), so an app reads the same here as on its connector page.
+ * `slug` lets a Kortix-built app (Slack, Email, …) show its own mark.
  */
-const LOGO_CHIP_CLASS = 'bg-white';
-/** A catalogue app's logo in a 24px slot, or a plug when the catalogue has none. */
-export function AppLogo({ src, className }) {
-    if (!src) {
-        return (_jsx("span", { "aria-hidden": true, className: cn('bg-muted text-muted-foreground flex size-6 shrink-0 items-center justify-center rounded-sm', className), children: _jsx(PlugIcon, { className: "size-3.5" }) }));
-    }
-    return (_jsx("span", { className: cn('flex size-6 shrink-0 items-center justify-center rounded-sm', LOGO_CHIP_CLASS, className), children: _jsx(Image, { src: src, alt: "", width: 24, height: 24, unoptimized: true, referrerPolicy: "no-referrer", className: "size-5 object-contain" }) }));
+export function AppLogo({ src, slug, className, }) {
+    return _jsx(ConnectorLogo, { source: { slug, icon: src }, size: "sm", className: className });
 }

package/dist/workspace/projects/policies-panel.js

@@ -5,7 +5,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * this panel CRUDs the same file via the admin endpoint, then the gateway
  * enforces on every Connector call.
  *
- * Rendered in two places: the Global rules sheet on the Connectors page
+ * Rendered in two places: the Rules tab of the Connectors page
  * (`capabilities/connectors/connectors-page.tsx`), and the Connectors section
  * of the customize panel. Both are narrow columns, so
  * the layout is a single stack of `Label` + `bg-popover rounded-md border`
@@ -136,7 +136,9 @@ export function PoliciesPanel({ projectId }) {
         policies: draft.map((d) => toPayloadRule(d)),
         defaultMode,
     });
-    const dirty = currentSig !== serverSig;
+    // Nothing is unsaved before the rules have loaded: the empty draft would
+    // differ from the empty signature and show the save bar over skeletons.
+    const dirty = serverSig !== '' && currentSig !== serverSig;
     const save = useMutation({
         mutationFn: async () => {
             const payload = [];
@@ -197,7 +199,7 @@ export function PoliciesPanel({ projectId }) {
                             return (_jsxs("button", { type: "button", onClick: () => setDefaultMode(opt.value), "aria-pressed": selected, className: cn('flex cursor-pointer flex-col items-start gap-1 rounded-md border px-4 py-3 text-left', 
                                 // Never `transition-all` — `scale` is listed so the press
                                 // feedback below actually eases instead of snapping.
-                                'transition-[background-color,border-color,scale] duration-150 ease-out', 'motion-safe:active:scale-[0.99]', selected
+                                'transition-[background-color,border-color,scale] duration-normal ease-out', 'motion-safe:active:scale-[0.99]', selected
                                     ? 'border-primary/40 bg-primary/[0.06]'
                                     : 'bg-popover hover:bg-foreground/[0.03]'), children: [_jsxs("span", { className: "flex w-full items-center justify-between gap-2", children: [_jsx("span", { className: "text-foreground text-sm font-medium", children: opt.label }), selected ? _jsx(CheckIcon, { className: "text-foreground size-4 shrink-0" }) : null] }), _jsx("span", { className: "text-muted-foreground text-xs text-pretty", children: opt.description })] }, opt.value));
                         }) }))] }), _jsxs("section", { className: "space-y-4", children: [_jsxs("div", { className: "flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between", children: [_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { children: tI18nHardcoded.raw('i18nComplete.text4228aeb07c41') }), _jsx("p", { className: "text-muted-foreground text-xs text-pretty", children: tI18nHardcoded.raw('i18nComplete.texteb35a8dd49a7') })] }), draft.length > 0 && (_jsxs(Button, { size: "sm", variant: "secondary", className: "shrink-0 gap-1.5 self-start sm:self-auto", onClick: addRule, disabled: query.isLoading, children: [_jsx(PlusIcon, { className: "size-4 shrink-0" }), tI18nHardcoded.raw('i18nComplete.texta27cff51a2e0')] }))] }), parseErrors.length > 0 && (_jsx(InfoBanner, { tone: "warning", title: tI18nHardcoded.raw('autoComponentsProjectsPoliciesPanelJsxAttrTitleKortixTomlHad8db85c74'), children: _jsx("ul", { className: "space-y-1", children: parseErrors.map((e) => (_jsxs("li", { className: "text-xs", children: [_jsx("span", { className: "font-mono", children: e.path }), ": ", e.error] }, `${e.path}:${e.error}`))) }) })), query.isLoading ? (_jsx("div", { className: "space-y-2", children: [0, 1].map((i) => (_jsx(Skeleton, { className: "h-28 rounded-md" }, i))) })) : draft.length === 0 ? (_jsx("div", { className: "bg-popover rounded-md border", children: _jsx(EmptyState, { icon: ShieldCheckIcon, size: "sm", className: "p-8 md:p-10", title: tI18nHardcoded.raw('autoComponentsProjectsPoliciesPanelJsxAttrTitleNoRulesYet795c2fb5'), description: tI18nHardcoded.raw('autoComponentsProjectsPoliciesPanelJsxAttrDescriptionRequireApprovalFor7e7b9477'), action: _jsxs(Button, { size: "sm", variant: "outline", className: "gap-1.5", onClick: addRule, children: [_jsx(PlusIcon, { className: "size-4 shrink-0" }), tI18nHardcoded.raw('i18nComplete.texta27cff51a2e0')] }) }) })) : (_jsx("ul", { className: "space-y-2", children: draft.map((rule, idx) => (_jsx(RuleRow, { rule: rule, index: idx, onChange: (patch) => updateRule(rule.id, patch), onRemove: () => removeRule(rule.id), onAddCondition: () => addCondition(rule.id), onChangeCondition: (cIdx, patch) => updateCondition(rule.id, cIdx, patch), onRemoveCondition: (cIdx) => removeCondition(rule.id, cIdx) }, rule.id))) }))] }), dirty && (_jsxs("div", { className: "bg-popover z-10 mt-auto flex flex-wrap items-center justify-between gap-3 rounded-md border px-4 py-3", children: [_jsxs("p", { className: "text-muted-foreground min-w-0 text-xs text-pretty", children: [tI18nHardcoded.raw('i18nComplete.text53121d4517f7'), ' ', _jsx("code", { className: "bg-muted text-foreground rounded-sm px-1 py-0.5 font-mono text-xs", children: "kortix.yaml" }), "."] }), _jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: revert, disabled: save.isPending, children: tI18nHardcoded.raw('i18nComplete.text0026c5053478') }), _jsxs(Button, { size: "sm", onClick: () => save.mutate(), disabled: save.isPending, children: [save.isPending ? _jsx(Loading, { className: "size-4 shrink-0" }) : null, tI18nHardcoded.raw('i18nComplete.textdd0ae7a5cbcf')] })] })] }))] }));

package/dist/workspace/review/review-actions.d.ts

@@ -60,8 +60,10 @@ export declare const BULK_VERDICT: Record<BulkVerb, ReviewVerdict>;
 /**
  * Whether a bar verb acts on `item`, decided before the request so the bar
  * never sends an id the server must refuse. Approve and Deny decide a pending
- * approval; Approve also needs a call this viewer could review
- * (`approvalReviewable`) that has not expired. Dismiss acts on native items only. A `cr:` id takes no verb.
+ * approval, an output or a batch; on a connector approval Approve also needs a
+ * call this viewer could review (`approvalReviewable`) that has not expired.
+ * Dismiss acts on native items only. A question takes Dismiss only. A `cr:` id
+ * takes no verb.
  */
 export declare function bulkSupports(item: ReviewItem, verb: BulkVerb, allows: (item: ReviewItem, verdict: ReviewVerdict) => boolean, now?: number): boolean;
 /** True when any bar verb acts on `item`: the row shows a checkbox. */

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

@@ -86,8 +86,10 @@ export const BULK_VERDICT = {
 /**
  * Whether a bar verb acts on `item`, decided before the request so the bar
  * never sends an id the server must refuse. Approve and Deny decide a pending
- * approval; Approve also needs a call this viewer could review
- * (`approvalReviewable`) that has not expired. Dismiss acts on native items only. A `cr:` id takes no verb.
+ * approval, an output or a batch; on a connector approval Approve also needs a
+ * call this viewer could review (`approvalReviewable`) that has not expired.
+ * Dismiss acts on native items only. A question takes Dismiss only. A `cr:` id
+ * takes no verb.
  */
 export function bulkSupports(item, verb, allows, now = Date.now()) {
     if (segmentForStatus(item.status) !== 'needs_you')
@@ -96,6 +98,10 @@ export function bulkSupports(item, verb, allows, now = Date.now()) {
         return false;
     if (verb === 'dismiss')
         return connectorCallId(item.id) === null;
+    // A native output or batch takes the verdicts its own dialog offers. A
+    // question needs an answer, which no bar verb carries.
+    if (item.kind === 'output' || item.kind === 'batch')
+        return true;
     if (item.kind !== 'approval')
         return false;
     if (item.expiresAt && Date.parse(item.expiresAt) <= now)

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

@@ -45,7 +45,7 @@ import { reviewArgsSummary } from '../../session/prompts/session-approval-review
 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 { ReviewDetail, ReviewItemModal } 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';
@@ -591,7 +591,9 @@ export function ReviewCenter({ initialItems, segment: segmentProp, onSegmentChan
                     return setHelpOpen(false);
                 if (typing)
                     return el.blur();
-                if (selectedId)
+                // A modal closes itself on Escape and marks it handled: only the top
+                // layer closes (a file preview opened from the item, then the item).
+                if (selectedId && !e.defaultPrevented)
                     return setSelectedId(null);
                 // An Esc that a dialog or menu already handled is theirs, not the selection's.
                 if (selectMode && !bulkProgress && !e.defaultPrevented && !hasOpenFloatingLayer()) {
@@ -724,7 +726,7 @@ export function ReviewCenter({ initialItems, segment: segmentProp, onSegmentChan
             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));
+            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, slug: who.slug, 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'
@@ -762,9 +764,11 @@ export function ReviewCenter({ initialItems, segment: segmentProp, onSegmentChan
             : 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) {
+    // Every other item opens in a modal over the inbox, the same way.
+    const itemModal = (_jsx(ReviewItemModal, { item: selected && !approval && selected.kind !== 'change' ? selected : null, actions: actions, onClose: () => setSelectedId(null) }));
+    // A change request replaces the inbox in place: its diff needs the width.
+    // Escape and "Back to inbox" return to the list.
+    if (selected?.kind === 'change') {
         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) => {
@@ -797,5 +801,5 @@ export function ReviewCenter({ initialItems, segment: segmentProp, onSegmentChan
             _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) })] }));
+                            : 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, itemModal, _jsx(KeyboardHelp, { open: helpOpen, onClose: () => setHelpOpen(false) })] }));
 }

package/dist/workspace/review/review-detail.d.ts

@@ -28,3 +28,13 @@ export declare function ReviewDetail({ item, actions, onBack, }: {
     actions: ReviewActions;
     onBack: () => void;
 }): import("react").JSX.Element;
+/**
+ * Every review item but a change request opens here, over the inbox, the way a
+ * connector approval does (`ApprovalDecisionModal`). A change keeps its page:
+ * its diff needs the width. Null closes the modal.
+ */
+export declare function ReviewItemModal({ item, actions, onClose, }: {
+    item: ReviewItem | null;
+    actions: ReviewActions;
+    onClose: () => void;
+}): import("react").JSX.Element;

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

@@ -2,9 +2,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useTranslations } from '../../i18n/index.js';
 /**
- * Review Center — the per-item review page. It replaces the inbox in place
- * (no modal): a status + title header, the branch/diff facts for a change,
- * the plain-language body for the item's kind, and the live file diffs.
+ * Review Center — one item. A change request opens as a page that replaces the
+ * inbox in place: a status + title header, the branch/diff facts, and the live
+ * file diffs. Every other kind opens in `ReviewItemModal`, over the inbox, the
+ * way a connector approval does.
  *
  * Actions mutate parent state optimistically via the passed handlers.
  */
@@ -13,9 +14,16 @@ import { Button } from '../../primitives/button.js';
 import { Item, ItemActions, ItemContent, ItemDescription, ItemTitle } from '../../primitives/item.js';
 import { Kbd } from '../../primitives/kbd.js';
 import Loading from '../../primitives/loading.js';
+import { Modal, ModalBody, ModalContent, ModalDescription, ModalHeader, ModalTitle, } from '../../primitives/modal.js';
 import { DiffStat } from '../../primitives/status.js';
 import { infoToast, successToast } from '../../primitives/toast.js';
+import { useProjectContext } from '../../files/project/context.js';
+import { getFileIcon } from '../../files/project/components/file-icon.js';
 import { useChangeRequestDiff, useChangeRequestMergePreview, } from '../../files/project/hooks/use-change-requests.js';
+import { ShowContentRenderer } from '../../files/renderers/show-content-renderer.js';
+import { getShowFileCategory } from '../../files/renderers/show-type-utils.js';
+import { SessionDriveFilesScope, sessionDriveMountPath, } from '../../internal/files/session-drive-files.js';
+import { useFilePreviewStore } from '../../internal/stores/file-preview-store.js';
 import { cn } from '../../internal/lib/utils.js';
 import { ArrowLeftIcon as ArrowLeft, ArrowUpRightIcon as ArrowUpRight, CheckIcon as Check, CheckCircleIcon as CheckCircleSolid, EyeIcon as Eye, SparkleIcon as SparklesSolid, } from '@phosphor-icons/react';
 import { useEffect, useRef, useState } from 'react';
@@ -91,10 +99,38 @@ function ApprovalBody({ item, actions, }) {
         })() }));
 }
 // ── output ────────────────────────────────────────────────────────────────
+/** File kinds an output draws inline. Everything else is a row that opens it. */
+const INLINE_MEDIA = new Set(['image', 'video', 'audio']);
+/** One file of an output: its label and name, and when it can be read, a
+ *  button that opens it in the file preview. */
+function OutputFileRow({ file, readable, }) {
+    const name = file.path.split('/').pop() || file.path;
+    const body = (_jsxs(_Fragment, { children: [getFileIcon(name, { className: 'text-muted-foreground size-4 shrink-0' }), _jsx("span", { className: "text-foreground truncate text-sm", children: file.note ?? name }), file.note ? (_jsx("span", { className: "text-muted-foreground truncate font-mono text-xs", children: name })) : null] }));
+    return (_jsx("li", { title: file.path, children: readable ? (_jsx("button", { type: "button", onClick: () => useFilePreviewStore.getState().openPreview(file.path), className: "hover:bg-hover duration-fast focus-visible:ring-ring flex w-full min-w-0 items-center gap-2.5 rounded-md px-2 py-1.5 text-left transition-colors focus-visible:ring-2 focus-visible:outline-none", children: body })) : (_jsx("div", { className: "flex min-w-0 items-center gap-2.5 px-2 py-1.5", children: body })) }));
+}
+/**
+ * The agent's note, then what it made: the first image, video or sound drawn
+ * inline, its text, and every other file as a row. Nothing it made, no section.
+ *
+ * A `/drives/…` path reads through the item's session: its mounts name the
+ * drive behind each path (`SessionDriveFilesScope`), exactly as in the
+ * session. A workspace path needs a running box, which the inbox does not
+ * have, so it is listed and not opened.
+ */
 function OutputBody({ item }) {
     const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const projectId = useProjectContext()?.projectId;
+    const sessionId = item.sessionId;
     const d = item.detail;
-    return (_jsxs(_Fragment, { children: [_jsx(Panel, { children: _jsxs("div", { className: "text-foreground flex items-start gap-2 text-sm text-pretty", children: [_jsx(SparklesSolid, { weight: "fill", className: "text-kortix-purple mt-0.5 size-4 shrink-0" }), _jsx("span", { children: d.note })] }) }), _jsxs(Panel, { children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("div", { className: "min-w-0", children: [_jsx(SectionLabel, { children: d.artifactLabel }), d.preview && (_jsx("div", { className: "text-muted-foreground text-sm text-pretty", children: d.preview }))] }), d.previewUrl && (_jsx(Button, { variant: "outline", size: "sm", className: "shrink-0 gap-1.5", asChild: true, children: _jsxs("a", { href: d.previewUrl, target: "_blank", rel: "noopener noreferrer", children: [tI18nComplete.raw('textf7afe3dde18c'), _jsx(ArrowUpRight, { className: "size-3.5" })] }) }))] }), d.files && d.files.length > 0 && (_jsx("div", { className: "mt-3 space-y-1", children: d.files.map((f) => (_jsxs("div", { className: "flex items-center gap-2 text-xs", children: [_jsx("span", { className: "text-foreground truncate font-mono", children: f.path }), f.note && _jsxs("span", { className: "text-muted-foreground", children: ["\u2014 ", f.note] })] }, f.path))) }))] })] }));
+    const files = d.files ?? [];
+    const readable = (path) => !!projectId && !!sessionId && sessionDriveMountPath(path) !== null;
+    const media = files.find((f) => readable(f.path) && INLINE_MEDIA.has(getShowFileCategory(f.path)));
+    const rest = files.filter((f) => f !== media);
+    const video = !!media && getShowFileCategory(media.path) === 'video';
+    return (_jsxs(_Fragment, { children: [projectId && sessionId ? (_jsx(SessionDriveFilesScope, { projectId: projectId, sessionId: sessionId })) : null, d.note ? (_jsx("p", { className: "text-foreground text-sm whitespace-pre-wrap text-pretty", children: d.note })) : null, media ? (
+            // A video takes a 16:9 box: the inline card's fixed height bars a
+            // landscape cut top and bottom, worst on a phone.
+            _jsx("div", { className: cn('overflow-hidden rounded-md border', video && 'aspect-video'), children: _jsx(ShowContentRenderer, { type: "file", path: media.path, fill: video }) })) : null, d.preview ? (_jsxs("section", { children: [_jsx(SectionLabel, { children: tI18nComplete.raw('text526e0087cc3f') }), _jsx("p", { className: "text-foreground text-sm whitespace-pre-wrap text-pretty", children: d.preview })] })) : null, rest.length > 0 ? (_jsxs("section", { children: [_jsx(SectionLabel, { children: tI18nComplete.raw('textabc7e9892806') }), _jsx("ul", { className: "-mx-2 space-y-0.5", children: rest.map((f) => (_jsx(OutputFileRow, { file: f, readable: readable(f.path) }, f.path))) })] })) : null, d.previewUrl ? (_jsx(Button, { variant: "outline", size: "sm", className: "gap-1.5", asChild: true, children: _jsxs("a", { href: d.previewUrl, target: "_blank", rel: "noopener noreferrer", children: [tI18nComplete.raw('textf7afe3dde18c'), _jsx(ArrowUpRight, { className: "size-3.5 shrink-0" })] }) })) : null] }));
 }
 // ── decision ──────────────────────────────────────────────────────────────
 function DecisionBody({ item, actions, onClose, }) {
@@ -136,19 +172,22 @@ function FeedbackComposer({ onCancel, onSend, }) {
 /** The header's right-hand group: what you can do to this item right now. */
 function ActionBar({ item, actions, onBack, conflicts, checkingConflicts, composing, setComposing, }) {
     const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    // Decisions and native approvals decide inside their body, with their own session link.
+    if (item.kind === 'decision' || item.kind === 'approval') {
+        return item.status === 'needs_you' ? null : (_jsxs("span", { className: "text-muted-foreground text-xs", children: [reviewStatusLabel(item.status, tI18nComplete), " \u00B7 ", formatItemAgeLong(item.createdAt)] }));
+    }
+    // The session that produced this item is where its reasoning lives.
+    const openSession = item.sessionId && actions.openSession ? (_jsx(Button, { variant: "secondary", size: "sm", onClick: () => actions.openSession?.(item.sessionId), children: tI18nComplete.raw('textb205bb47f81a') })) : null;
     if (item.status !== 'needs_you') {
-        return (_jsxs("span", { className: "text-muted-foreground text-xs", children: [reviewStatusLabel(item.status, tI18nComplete), " \u00B7 ", formatItemAgeLong(item.createdAt)] }));
+        return (_jsxs("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [_jsxs("span", { className: "text-muted-foreground text-xs", children: [reviewStatusLabel(item.status, tI18nComplete), " \u00B7 ", formatItemAgeLong(item.createdAt)] }), openSession] }));
     }
-    // Decisions and native approvals decide inside their body.
-    if (item.kind === 'decision' || item.kind === 'approval')
-        return null;
     // change · output · batch. Each control shows only for a verdict the viewer
     // may give (KRTX-1720). Ship it on a change merges it; the conflict fix stands
     // in for Ship it, so it follows the same verdict.
     const secondaryLabel = item.secondaryAction;
     const hasConflicts = item.kind === 'change' && conflicts.length > 0;
     const showPrimary = actions.allows(item, 'approve');
-    return (_jsxs("div", { className: "flex items-center gap-2", children: [secondaryLabel && !composing && actions.allows(item, 'changes') && (_jsx(Button, { variant: "ghost", size: "sm", onClick: () => setComposing(true), children: secondaryLabel })), !showPrimary ? null : hasConflicts && item.kind === 'change' ? (_jsxs(Button, { size: "sm", disabled: actions.recoveringCrId === item.detail.crId, onClick: () => {
+    return (_jsxs("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [openSession, secondaryLabel && !composing && actions.allows(item, 'changes') && (_jsx(Button, { variant: "ghost", size: "sm", onClick: () => setComposing(true), children: secondaryLabel })), !showPrimary ? null : hasConflicts && item.kind === 'change' ? (_jsxs(Button, { size: "sm", disabled: actions.recoveringCrId === item.detail.crId, onClick: () => {
                     if (actions.recoverChange) {
                         actions.recoverChange(item, conflicts);
                     }
@@ -180,6 +219,28 @@ function ChangeFacts({ item }) {
         return null;
     return (_jsxs(_Fragment, { children: [hasRefs && (_jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx(Badge, { variant: "secondary", className: "border-0 align-middle font-mono ring-0", size: "sm", children: adv.baseRef || '—' }), _jsx(ArrowLeft, { className: "text-muted-foreground size-3.5 shrink-0", "aria-label": tI18nComplete.raw('text75857a458999') }), _jsx(Badge, { variant: "secondary", size: "sm", className: "line-clamp-1 max-w-96 truncate border-0 align-middle font-mono ring-0", children: _jsx("span", { className: "truncate", children: adv.headRef || '—' }) })] })), files > 0 && (_jsxs("span", { className: "tabular-nums", children: [files, " ", files === 1 ? 'file' : 'files'] })), _jsx(DiffStat, { additions: additions, deletions: deletions })] }));
 }
+/** The plain-language body for the item's kind: the page's and the modal's. */
+function KindBody({ item, actions, onClose, conflicts, }) {
+    switch (item.kind) {
+        case 'change':
+            return _jsx(ChangeBody, { item: item, actions: actions, onClose: onClose, conflicts: conflicts });
+        case 'approval':
+            return _jsx(ApprovalBody, { item: item, actions: actions });
+        case 'output':
+            return _jsx(OutputBody, { item: item });
+        case 'decision':
+            return _jsx(DecisionBody, { item: item, actions: actions, onClose: onClose });
+        case 'batch':
+            return _jsx(BatchBody, { item: item });
+    }
+}
+/** "Ask for changes" with an optional note, sent back to the agent. */
+function ChangesComposer({ item, actions, onCancel, onSent, }) {
+    return (_jsx(FeedbackComposer, { onCancel: onCancel, onSend: (text) => {
+            actions.resolve(item.id, 'changes_requested', text ? `Sent to the agent: “${text}”` : `${item.secondaryAction} — sent to the agent`, text || undefined);
+            onSent();
+        } }));
+}
 export function ReviewDetail({ item, actions, onBack, }) {
     const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
     const crId = item.kind === 'change' ? (item.detail.crId ?? null) : null;
@@ -203,8 +264,35 @@ export function ReviewDetail({ item, actions, onBack, }) {
         : reviewStatusLabel(item.status, tI18nComplete);
     const statusBadge = open ? 'success' : STATUS_META[item.status].badge;
     const secondaryLabel = item.secondaryAction;
-    return (_jsxs("div", { className: "w-full p-4", children: [_jsxs("header", { className: "flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between", children: [_jsxs("div", { className: "min-w-0 space-y-3", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [_jsxs(Button, { variant: "ghost", size: "sm", onClick: onBack, className: "text-muted-foreground hover:text-foreground -ml-2.5", children: [_jsx(ArrowLeft, { className: "size-3.5 shrink-0" }), tI18nComplete.raw('text76900f1bfd16')] }), _jsx(Badge, { variant: statusBadge, size: "sm", children: statusLabel }), item.kind !== 'change' && (_jsx(Badge, { variant: "outline", size: "sm", children: reviewKindLabel(item.kind, tI18nComplete) }))] }), _jsxs("div", { className: "mt-10 space-y-2", children: [_jsxs("p", { className: "text-muted-foreground text-xs", children: [item.project, number != null && _jsxs("span", { className: "tabular-nums", children: [" #", number] })] }), _jsx("h1", { className: "text-foreground line-clamp-2 truncate text-2xl font-semibold tracking-tight text-pretty", children: item.title })] }), _jsxs("div", { className: "text-muted-foreground flex flex-wrap items-center gap-x-3 gap-y-1.5 text-sm", children: [_jsx("span", { children: item.agent }), item.kind === 'change' && _jsx(ChangeFacts, { item: item }), _jsx("span", { children: formatItemAgeLong(item.createdAt) })] })] }), _jsx("div", { className: "shrink-0", children: _jsx(ActionBar, { item: item, actions: actions, onBack: onBack, conflicts: conflicts, checkingConflicts: Boolean(crId) && mergePreview.isLoading, composing: composing, setComposing: setComposing }) })] }), _jsxs("div", { className: "mt-8 space-y-8", children: [composing && secondaryLabel && item.kind !== 'approval' && (_jsx(FeedbackComposer, { onCancel: () => setComposing(false), onSend: (text) => {
-                            actions.resolve(item.id, 'changes_requested', text ? `Sent to the agent: “${text}”` : `${secondaryLabel} — sent to the agent`, text || undefined);
-                            onBack();
-                        } })), _jsxs("section", { className: "space-y-3", children: [_jsx("h2", { className: "text-foreground text-sm font-medium", children: tI18nComplete.raw('text526e0087cc3f') }), _jsxs("div", { className: "space-y-4", children: [item.kind === 'change' && (_jsx(ChangeBody, { item: item, actions: actions, onClose: onBack, conflicts: conflicts })), item.kind === 'approval' && _jsx(ApprovalBody, { item: item, actions: actions }), item.kind === 'output' && _jsx(OutputBody, { item: item }), item.kind === 'decision' && (_jsx(DecisionBody, { item: item, actions: actions, onClose: onBack })), item.kind === 'batch' && _jsx(BatchBody, { item: item })] })] }), crId && _jsx(ChangeFiles, { crId: crId })] })] }));
+    return (_jsxs("div", { className: "w-full p-4", children: [_jsxs("header", { className: "flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between", children: [_jsxs("div", { className: "min-w-0 space-y-3", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [_jsxs(Button, { variant: "ghost", size: "sm", onClick: onBack, className: "text-muted-foreground hover:text-foreground -ml-2.5", children: [_jsx(ArrowLeft, { className: "size-3.5 shrink-0" }), tI18nComplete.raw('text76900f1bfd16')] }), _jsx(Badge, { variant: statusBadge, size: "sm", children: statusLabel }), item.kind !== 'change' && (_jsx(Badge, { variant: "outline", size: "sm", children: reviewKindLabel(item.kind, tI18nComplete) }))] }), _jsxs("div", { className: "mt-10 space-y-2", children: [_jsxs("p", { className: "text-muted-foreground text-xs", children: [item.project, number != null && _jsxs("span", { className: "tabular-nums", children: [" #", number] })] }), _jsx("h1", { className: "text-foreground line-clamp-2 truncate text-2xl font-semibold tracking-tight text-pretty", children: item.title })] }), _jsxs("div", { className: "text-muted-foreground flex flex-wrap items-center gap-x-3 gap-y-1.5 text-sm", children: [_jsx("span", { children: item.agent }), item.kind === 'change' && _jsx(ChangeFacts, { item: item }), _jsx("span", { children: formatItemAgeLong(item.createdAt) })] })] }), _jsx("div", { className: "shrink-0", children: _jsx(ActionBar, { item: item, actions: actions, onBack: onBack, conflicts: conflicts, checkingConflicts: Boolean(crId) && mergePreview.isLoading, composing: composing, setComposing: setComposing }) })] }), _jsxs("div", { className: "mt-8 space-y-8", children: [composing && secondaryLabel && item.kind !== 'approval' && (_jsx(ChangesComposer, { item: item, actions: actions, onCancel: () => setComposing(false), onSent: onBack })), _jsxs("section", { className: "space-y-3", children: [_jsx("h2", { className: "text-foreground text-sm font-medium", children: tI18nComplete.raw('text526e0087cc3f') }), _jsx("div", { className: "space-y-4", children: _jsx(KindBody, { item: item, actions: actions, onClose: onBack, conflicts: conflicts }) })] }), crId && _jsx(ChangeFiles, { crId: crId })] })] }));
+}
+/** The open item in its modal: who made it, its title, its body, its verdict. */
+function ReviewItemDialog({ item, actions, onClose, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const [composing, setComposing] = useState(false);
+    const kind = KIND_META[item.kind];
+    // A question and a native approval decide inside their body.
+    const decidesInBody = (item.kind === 'decision' || item.kind === 'approval') && item.status === 'needs_you';
+    return (_jsxs(_Fragment, { children: [_jsxs(ModalHeader, { className: "shrink-0 gap-3 pr-12 pb-4", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [_jsx("span", { className: cn('flex size-8 shrink-0 items-center justify-center rounded-sm', kind.tile), children: _jsx(kind.icon, { className: cn('size-4', kind.iconColor) }) }), _jsxs("div", { className: "flex min-w-0 flex-col", children: [_jsx("p", { className: "text-foreground truncate text-sm leading-5 font-medium", children: reviewKindLabel(item.kind, tI18nComplete) }), _jsxs(ModalDescription, { className: "truncate text-xs leading-4", children: [item.agent, " \u00B7 ", formatItemAgeLong(item.createdAt)] })] })] }), _jsx(ModalTitle, { className: "text-xl leading-snug wrap-anywhere", children: item.title })] }), _jsx(ModalBody, { className: "min-h-0 space-y-5 overflow-y-auto pb-5", children: _jsx(KindBody, { item: item, actions: actions, onClose: onClose, conflicts: [] }) }), decidesInBody ? null : (_jsx("div", { className: "border-border flex shrink-0 justify-end border-t px-5 pt-4 pb-5", children: composing && item.secondaryAction ? (_jsx("div", { className: "w-full", children: _jsx(ChangesComposer, { item: item, actions: actions, onCancel: () => setComposing(false), onSent: onClose }) })) : (_jsx(ActionBar, { item: item, actions: actions, onBack: onClose, conflicts: [], checkingConflicts: false, composing: composing, setComposing: setComposing })) }))] }));
+}
+/**
+ * Every review item but a change request opens here, over the inbox, the way a
+ * connector approval does (`ApprovalDecisionModal`). A change keeps its page:
+ * its diff needs the width. Null closes the modal.
+ */
+export function ReviewItemModal({ item, actions, onClose, }) {
+    // The last item stays drawn while the modal fades out.
+    const [shown, setShown] = useState(item);
+    if (item && item !== shown)
+        setShown(item);
+    return (_jsx(Modal, { open: item !== null, onOpenChange: (open) => !open && onClose(), children: _jsx(ModalContent
+        // Focus the dialog, not its first control: a file row or the video
+        // would open with a focus ring nobody asked for.
+        , { 
+            // Focus the dialog, not its first control: a file row or the video
+            // would open with a focus ring nobody asked for.
+            onOpenAutoFocus: (event) => {
+                event.preventDefault();
+                event.currentTarget?.focus();
+            }, className: "flex flex-col space-y-0 overflow-hidden lg:h-auto lg:max-h-[85svh] lg:max-w-2xl", children: shown ? (_jsx(ReviewItemDialog, { item: shown, actions: actions, onClose: onClose }, shown.id)) : null }) }));
 }

package/dist/workspace/saved-session-skeleton.d.ts

@@ -5,7 +5,7 @@ export declare function SavedSessionSkeleton({ projectId, sessionId, stage, stat
     /** The route's session id. */
     sessionId: string;
     stage: SessionStartStage;
-    /** Drawn in place of the skeleton rows: there is no saved conversation to
-     *  stand in for, only the wake's status. */
+    /** The wake's status, centered above the skeleton rows. It may render
+     *  nothing (a routine wake); the rows show either way. */
     status?: ReactNode;
 }): import("react").JSX.Element;

package/dist/workspace/saved-session-skeleton.js

@@ -16,8 +16,8 @@ import { useMemo } from 'react';
  * answers in one round trip; the computer takes 5-240 s to wake. So a session
  * that has a saved copy opens on this — its header, skeleton turns, and the
  * composer's outline — and the conversation replaces it in one step. A session
- * with nothing to read (`resolveResumeOverlay`) gets the same frame with a
- * `status` in place of the rows.
+ * with nothing to read (`resolveResumeOverlay`) gets the same frame and rows,
+ * with the wake's `status` centered above them.
  *
  * Built from the geometry the real chat uses (`SessionLayout`, `SessionBodyRow`,
  * `SESSION_TRANSCRIPT_CLASS`, `COMPOSER_SHELL_CLASS`), so the crossfade into
@@ -40,5 +40,5 @@ const APPEAR_AFTER_A_MOMENT = 'animate-in fade-in fill-mode-both duration-normal
 export function SavedSessionSkeleton({ projectId, sessionId, stage, status, }) {
     const t = useTranslations('sessionPage');
     const shape = useMemo(() => savedSessionSkeletonShape(sessionId), [sessionId]);
-    return (_jsx(SessionLayout, { sessionId: sessionId, projectId: projectId, projectSessionId: sessionId, transient: true, bootStage: stage === 'ready' ? null : stage, children: _jsxs("div", { className: "bg-background relative flex h-full flex-col", children: [_jsx(SessionSiteHeader, { sessionId: sessionId, sessionTitle: "" }), _jsxs(SessionBodyRow, { transient: true, children: [_jsx("div", { className: "relative z-10 min-h-0 flex-1 overflow-hidden", children: status ?? (_jsx("div", { role: "status", "aria-busy": "true", "aria-label": t('loadingConversation'), "data-testid": "saved-session-skeleton", className: cn(SESSION_TRANSCRIPT_CLASS, APPEAR_AFTER_A_MOMENT), children: _jsx(SavedSessionSkeletonRows, { shape: shape }) })) }), _jsx("div", { "aria-hidden": true, className: cn(COMPOSER_SHELL_CLASS, 'pb-8', APPEAR_AFTER_A_MOMENT), children: _jsx(SkeletonBar, { phase: shape.composerPhase, phases: shape.phases, className: "h-28 w-full rounded-xl" }) })] })] }) }));
+    return (_jsx(SessionLayout, { sessionId: sessionId, projectId: projectId, projectSessionId: sessionId, transient: true, bootStage: stage === 'ready' ? null : stage, children: _jsxs("div", { className: "bg-background relative flex h-full flex-col", children: [_jsx(SessionSiteHeader, { sessionId: sessionId, sessionTitle: "" }), _jsxs(SessionBodyRow, { transient: true, children: [_jsxs("div", { className: "relative z-10 min-h-0 flex-1 overflow-hidden", children: [_jsx("div", { role: "status", "aria-busy": "true", "aria-label": t('loadingConversation'), "data-testid": "saved-session-skeleton", className: cn(SESSION_TRANSCRIPT_CLASS, APPEAR_AFTER_A_MOMENT), children: _jsx(SavedSessionSkeletonRows, { shape: shape }) }), status ? (_jsx("div", { className: "absolute inset-0 flex items-center justify-center px-4", children: _jsx("div", { className: "bg-background border-border rounded-xl border py-4 empty:hidden", children: status }) })) : null] }), _jsx("div", { "aria-hidden": true, className: cn(COMPOSER_SHELL_CLASS, 'pb-8', APPEAR_AFTER_A_MOMENT), children: _jsx(SkeletonBar, { phase: shape.composerPhase, phases: shape.phases, className: "h-28 w-full rounded-xl" }) })] })] }) }));
 }