@kortix/ui 0.14.3 → 0.14.5

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

@@ -0,0 +1,30 @@
+import type { ReviewVerdict } from '@kortix/sdk';
+import { type ReviewItem, type ReviewStatus } from './types.js';
+export interface ReviewActions {
+    resolve: (id: string, status: ReviewStatus, toast?: string, feedback?: string) => void;
+    decideAction: (itemId: string, actionId: string, decision: 'approved' | 'denied') => void;
+    /** Open the item's originating session (e.g. to watch the agent revise). */
+    openSession?: (sessionId: string) => void;
+    /** Live-data mode: verdicts go to the server through `resolve()`. */
+    connected?: boolean;
+    /** The review item id currently mid-mutation, if any — drives the
+     *  per-item `Loading` state on Approve/Deny while connected. */
+    pendingId?: string | null;
+    /** Which verdict `pendingId`'s in-flight mutation is — so Approve and Deny
+     *  don't both show `Loading` at once. */
+    pendingDecision?: 'approve' | 'deny' | null;
+    /** Start a real session from the blocked Change Request head branch. */
+    recoverChange?: (item: Extract<ReviewItem, {
+        kind: 'change';
+    }>, conflicts: string[]) => void;
+    recoveringCrId?: string | null;
+    /** Whether this viewer may give `verdict` on `item` (KRTX-1720): the inbox's
+     *  `reviewVerdictAllowed` over the viewer's leaves. A control for a verdict
+     *  it refuses does not render. */
+    allows: (item: ReviewItem, verdict: ReviewVerdict) => boolean;
+}
+export declare function ReviewDetail({ item, actions, onBack, }: {
+    item: ReviewItem;
+    actions: ReviewActions;
+    onBack: () => void;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,210 @@
+'use client';
+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.
+ *
+ * Actions mutate parent state optimistically via the passed handlers.
+ */
+import { Badge } from '../../primitives/badge.js';
+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 { DiffStat } from '../../primitives/status.js';
+import { infoToast, successToast } from '../../primitives/toast.js';
+import { useChangeRequestDiff, useChangeRequestMergePreview, } from '../../files/project/hooks/use-change-requests.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';
+import { ChangeFiles } from './change-files.js';
+import { formatItemAgeLong } from './review-actions.js';
+import { APPROVAL_ACTION_ICON, KIND_META, STATUS_META, VERIFICATION_BADGE, reviewKindLabel, reviewStatusLabel, } from './review-meta.js';
+import { isSafeRisk } from './types.js';
+/** A muted bordered panel — the friendly content surface. */
+function Panel({ children, className }) {
+    return (_jsx("div", { className: cn('bg-popover rounded-md border px-4 py-3.5', className), children: children }));
+}
+function SectionLabel({ children }) {
+    return _jsx("div", { className: "text-muted-foreground mb-2 text-sm font-semibold", children: children });
+}
+// ── change ────────────────────────────────────────────────────────────────
+function ChangeBody({ item, actions, onClose, conflicts, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const d = item.detail;
+    const whatChanged = d.whatChanged ?? [];
+    const verification = d.verification ?? [];
+    const requested = d.requestedChanges ?? [];
+    const recovering = actions.recoveringCrId === d.crId;
+    return (_jsxs(_Fragment, { children: [requested.length > 0 && (_jsxs(Item, { variant: "outline", size: "sm", children: [_jsxs(ItemContent, { children: [_jsx(ItemTitle, { children: tI18nComplete.raw('textb0eabce39690') }), _jsx("ul", { className: "text-foreground list-disc space-y-1 pl-5 text-sm", children: requested.map((r) => (_jsx("li", { className: "text-pretty", children: r.text }, r.at ?? r.text))) }), _jsx(ItemDescription, { children: tI18nComplete.raw('texte648ea58ae80') })] }), item.sessionId && actions.openSession ? (_jsx(ItemActions, { children: _jsx(Button, { variant: "ghost", size: "sm", onClick: () => {
+                                actions.openSession?.(item.sessionId);
+                                onClose();
+                            }, children: tI18nComplete.raw('textd1636c646e66') }) })) : null] })), (whatChanged.length > 0 || d.impact) && (_jsxs("div", { className: "space-y-2", children: [whatChanged.length > 0 && (_jsx("ul", { className: "text-muted-foreground list-disc space-y-1 pl-5 text-sm", children: whatChanged.map((line) => (_jsx("li", { className: "text-pretty", children: line }, line))) })), d.impact && _jsx("p", { className: "text-muted-foreground text-sm text-pretty", children: d.impact })] })), (verification.length > 0 || d.previewUrl) && (_jsxs(Item, { variant: "outline", size: "sm", children: [_jsxs(ItemContent, { children: [_jsx(ItemTitle, { children: tI18nComplete.raw('text7140f4f19dec') }), verification.length > 0 && (_jsx("div", { className: "flex flex-wrap items-center gap-1.5", children: verification.map((v) => (_jsx(Badge, { variant: VERIFICATION_BADGE[v.tone], size: "sm", children: v.label }, v.label))) }))] }), d.previewUrl && (_jsx(ItemActions, { children: _jsx(Button, { variant: "outline", size: "sm", asChild: true, children: _jsx("a", { href: d.previewUrl, target: "_blank", rel: "noopener noreferrer", children: tI18nComplete.raw('textf7afe3dde18c') }) }) }))] })), conflicts.length > 0 && (_jsxs(Item, { variant: "warning", size: "sm", children: [_jsxs(ItemContent, { children: [_jsxs(ItemTitle, { children: [tI18nComplete.raw('text62e2514edc8d'), " ", conflicts.length, ' ', conflicts.length === 1 ? 'file' : 'files'] }), _jsx(ItemDescription, { children: tI18nComplete.raw('text0ffc4db692f7') })] }), actions.allows(item, 'approve') ? (_jsx(ItemActions, { children: _jsxs(Button, { size: "sm", disabled: recovering, onClick: () => {
+                                if (actions.recoverChange) {
+                                    actions.recoverChange(item, conflicts);
+                                }
+                                else {
+                                    actions.resolve(item.id, 'waiting', tI18nComplete.raw('text92bb0a437a39'));
+                                    onClose();
+                                }
+                            }, children: [recovering ? _jsx(Loading, { className: "size-3.5 shrink-0" }) : null, tI18nComplete.raw('text30afafe4c16e')] }) })) : null] }))] }));
+}
+// ── approval ──────────────────────────────────────────────────────────────
+// Connector calls never reach this page: the inbox opens them in
+// `ApprovalDecisionModal`. What is left here is the native multi-action approval.
+function ApprovalActionRow({ action, connected, pending, readOnly, onApprove, onDeny, onOpenSession, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const Icon = APPROVAL_ACTION_ICON[action.icon];
+    const safe = isSafeRisk(action.risk);
+    const args = action.argsPreview ?? [];
+    const busy = !!pending;
+    return (_jsx("div", { className: "bg-popover rounded-md border px-4 py-3", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("span", { className: cn('flex size-9 shrink-0 items-center justify-center rounded-sm', safe ? 'bg-kortix-green/15' : 'bg-kortix-orange/15'), children: _jsx(Icon, { className: cn('size-5', safe ? 'text-kortix-green' : 'text-kortix-orange') }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "flex items-center gap-2", children: _jsx("span", { className: "text-foreground text-sm font-medium", children: action.title }) }), _jsx("div", { className: "text-muted-foreground mt-0.5 text-sm text-pretty", children: action.consequence }), args.length > 0 && (_jsx("dl", { className: "border-border/60 mt-2 grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 border-t pt-2 text-xs", children: args.map((a) => (_jsxs("div", { className: "col-span-2 grid grid-cols-subgrid", children: [_jsx("dt", { className: "text-muted-foreground font-mono", children: a.key }), _jsx("dd", { className: "text-foreground truncate font-mono", title: a.value, children: a.value })] }, a.key))) })), _jsxs("div", { className: "text-muted-foreground mt-1.5 flex flex-wrap items-center gap-1.5 text-xs", children: [_jsxs("span", { className: "font-mono", children: [action.connector, " \u00B7 ", action.action] }), _jsx("span", { children: tI18nComplete.raw('text3b9453dad42b') }), _jsx("span", { children: action.policySource })] })] }), _jsx("div", { className: "shrink-0", children: action.decided ? (_jsx(Badge, { variant: action.decided === 'approved' ? 'success' : 'destructive', size: "sm", children: action.decided === 'approved' ? 'Approved' : 'Denied' })) : readOnly ? null : (_jsxs("div", { className: "flex flex-col items-end gap-1.5", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsxs(Button, { variant: "ghost", size: "sm", disabled: busy, onClick: onDeny, children: [pending === 'deny' ? _jsx(Loading, { className: "size-3.5 shrink-0" }) : null, tI18nComplete.raw('text05a2d7332eb9')] }), _jsxs(Button, { size: "sm", disabled: busy, onClick: onApprove, children: [pending === 'approve' ? (_jsx(Loading, { className: "size-3.5 shrink-0" })) : (_jsx(Check, { className: "size-3.5" })), tI18nComplete.raw('text6007acbe30b2')] })] }), connected && onOpenSession ? (_jsxs("button", { type: "button", onClick: onOpenSession, className: "text-muted-foreground hover:text-foreground inline-flex items-center gap-1 text-xs underline-offset-2 hover:underline", children: [tI18nComplete.raw('textf42e280577fb'), _jsx(ArrowUpRight, { className: "size-3" })] })) : null] })) })] }) }));
+}
+function ApprovalBody({ item, actions, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const list = item.detail.actions ?? [];
+    const openSession = actions.openSession && item.sessionId
+        ? () => actions.openSession?.(item.sessionId)
+        : undefined;
+    return (_jsx(_Fragment, { children: (() => {
+            const wholeItem = !!actions.connected && list.filter((a) => !a.decided).length > 1;
+            const busy = actions.connected && actions.pendingId === item.id;
+            // Approve and deny assert the same leaves on a native item.
+            const decides = actions.allows(item, 'approve');
+            return (_jsxs(_Fragment, { children: [_jsx("div", { className: "space-y-2", children: list.map((a) => (_jsx(ApprovalActionRow, { action: a, connected: actions.connected, readOnly: wholeItem || !decides, pending: busy && !wholeItem ? (actions.pendingDecision ?? 'approve') : null, onOpenSession: openSession, onApprove: () => {
+                                if (actions.connected) {
+                                    actions.resolve(item.id, 'approved', `Approved · ${a.title}`);
+                                    return;
+                                }
+                                actions.decideAction(item.id, a.id, 'approved');
+                                successToast(tI18nComplete('text6ef671b81187', { value0: a.title }));
+                            }, onDeny: () => {
+                                if (actions.connected) {
+                                    actions.resolve(item.id, 'rejected', `Denied · ${a.title}`);
+                                    return;
+                                }
+                                actions.decideAction(item.id, a.id, 'denied');
+                                infoToast(tI18nComplete('text6ef671b81187', { value0: a.title }));
+                            } }, a.id))) }), wholeItem && decides && (_jsxs("div", { className: "bg-popover flex items-center justify-between gap-3 rounded-md border px-4 py-3", children: [_jsxs("p", { className: "text-muted-foreground min-w-0 text-sm text-pretty", children: [tI18nComplete.raw('text91273d498d36'), " ", list.length, ' ', tI18nComplete.raw('text9a24d7803caa')] }), _jsxs("div", { className: "flex shrink-0 items-center gap-1.5", children: [_jsxs(Button, { variant: "ghost", size: "sm", disabled: busy, onClick: () => actions.resolve(item.id, 'rejected', `Denied all ${list.length} actions`), children: [busy && actions.pendingDecision === 'deny' ? (_jsx(Loading, { className: "size-3.5 shrink-0" })) : null, tI18nComplete.raw('text5a41803b2dd1')] }), _jsxs(Button, { size: "sm", disabled: busy, onClick: () => actions.resolve(item.id, 'approved', `Approved all ${list.length} actions`), children: [busy && actions.pendingDecision === 'approve' ? (_jsx(Loading, { className: "size-3.5 shrink-0" })) : (_jsx(Check, { className: "size-3.5" })), tI18nComplete.raw('textae067b687107')] })] })] }))] }));
+        })() }));
+}
+// ── output ────────────────────────────────────────────────────────────────
+function OutputBody({ item }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    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))) }))] })] }));
+}
+// ── decision ──────────────────────────────────────────────────────────────
+function DecisionBody({ item, actions, onClose, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const d = item.detail;
+    // Answered already, or this viewer may not answer: the options only read.
+    const locked = item.status !== 'needs_you' || !actions.allows(item, 'answer');
+    return (_jsxs(_Fragment, { children: [_jsxs(Panel, { children: [_jsx("div", { className: "text-foreground text-sm font-medium", children: d.question }), d.context && (_jsx("div", { className: "text-muted-foreground mt-1.5 text-sm text-pretty", children: d.context }))] }), _jsx("div", { className: "space-y-2", children: [...(d.options ?? [])]
+                    .sort((a, b) => (b.recommended ? 1 : 0) - (a.recommended ? 1 : 0))
+                    .map((opt) => (_jsxs("button", { type: "button", disabled: locked, onClick: () => {
+                        actions.resolve(item.id, 'done', `Answered · ${opt.label} — agent resumed`);
+                        onClose();
+                    }, className: cn('focus-visible:ring-kortix-blue w-full rounded-md border px-4 py-3 text-left transition-colors focus-visible:ring-2 focus-visible:outline-none', opt.recommended ? 'border-primary/40 bg-primary/[0.03]' : 'bg-popover', !locked && 'hover:border-primary/40 hover:bg-primary/[0.05] active:scale-[0.99]', locked && 'opacity-60'), children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-foreground text-sm font-medium", children: opt.label }), opt.recommended && (_jsx(Badge, { variant: "kortix", size: "xs", children: tI18nComplete.raw('textd70604e84304') }))] }), opt.description && (_jsx("div", { className: "text-muted-foreground mt-0.5 text-sm text-pretty", children: opt.description }))] }, opt.id))) })] }));
+}
+// ── batch ─────────────────────────────────────────────────────────────────
+function BatchBody({ item }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const d = item.detail;
+    const children = d.children ?? [];
+    const needsReview = children.filter((c) => c.status === 'needs_review').length;
+    return (_jsxs(_Fragment, { children: [_jsx(Panel, { children: _jsx("div", { className: "text-foreground text-sm text-pretty", children: d.note }) }), _jsxs("div", { children: [_jsxs(SectionLabel, { children: [children.length, " ", tI18nComplete.raw('texte97caf2c8a6f'), " ", needsReview, ' ', tI18nComplete.raw('text967458798444')] }), _jsx("ul", { className: "bg-popover divide-border max-h-72 divide-y overflow-y-auto rounded-md border", children: children.map((c) => (_jsxs("li", { className: "flex items-center gap-2.5 px-4 py-2", children: [c.status === 'done' ? (_jsx(CheckCircleSolid, { weight: "fill", className: "text-kortix-green size-4 shrink-0" })) : (_jsx(Eye, { className: "text-kortix-yellow size-4 shrink-0" })), _jsx("span", { className: "text-foreground min-w-0 flex-1 truncate text-sm", children: c.title }), c.status === 'needs_review' && (_jsx(Badge, { variant: "warning", size: "xs", children: tI18nComplete.raw('texta0de5719f595') }))] }, c.id))) })] })] }));
+}
+// ── actions ─────────────────────────────────────────────────────────────────
+/** Optional free-text feedback returned to the agent when asking for changes. */
+function FeedbackComposer({ onCancel, onSend, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const [text, setText] = useState('');
+    const ref = useRef(null);
+    useEffect(() => {
+        ref.current?.focus();
+    }, []);
+    return (_jsxs("div", { className: "bg-popover space-y-2 rounded-md border px-4 py-3", children: [_jsx("textarea", { ref: ref, value: text, onChange: (e) => setText(e.target.value), onKeyDown: (e) => {
+                    if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
+                        e.preventDefault();
+                        onSend(text.trim());
+                    }
+                }, rows: 3, "aria-label": tI18nComplete.raw('text2534e74d5120'), placeholder: tI18nComplete.raw('text2534e74d5120'), className: "placeholder:text-muted-foreground w-full resize-none bg-transparent text-sm outline-none" }), _jsxs("div", { className: "flex items-center justify-end gap-2", children: [_jsxs("span", { className: "text-muted-foreground mr-auto text-xs", children: [_jsx(Kbd, { children: "\u2318" }), _jsx(Kbd, { children: "\u21B5" }), " ", tI18nComplete.raw('text1044b2d7aa48')] }), _jsx(Button, { variant: "outline-ghost", size: "sm", onClick: onCancel, children: tI18nComplete.raw('text19766ed6ccb2') }), _jsx(Button, { size: "sm", onClick: () => onSend(text.trim()), children: tI18nComplete.raw('text77a860cbc585') })] })] }));
+}
+/** 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');
+    if (item.status !== 'needs_you') {
+        return (_jsxs("span", { className: "text-muted-foreground text-xs", children: [reviewStatusLabel(item.status, tI18nComplete), " \u00B7 ", formatItemAgeLong(item.createdAt)] }));
+    }
+    // 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: () => {
+                    if (actions.recoverChange) {
+                        actions.recoverChange(item, conflicts);
+                    }
+                    else {
+                        actions.resolve(item.id, 'waiting', tI18nComplete.raw('text92bb0a437a39'));
+                        onBack();
+                    }
+                }, children: [actions.recoveringCrId === item.detail.crId ? (_jsx(Loading, { className: "size-3.5 shrink-0" })) : (_jsx(SparklesSolid, { weight: "fill", className: "size-3.5 shrink-0" })), tI18nComplete.raw('text30afafe4c16e')] })) : (_jsxs(Button, { size: "sm", 
+                // Ready to ship reads as success. Only high risk keeps the brake.
+                variant: item.risk === 'high' ? 'danger' : checkingConflicts ? 'warning' : 'success', disabled: checkingConflicts, onClick: () => {
+                    actions.resolve(item.id, 'approved', `${item.primaryAction} · done`);
+                    onBack();
+                }, children: [checkingConflicts ? _jsx(Loading, { className: "size-3.5 shrink-0" }) : null, checkingConflicts ? tI18nComplete.raw('textec963ffc911b') : item.primaryAction] }))] }));
+}
+/** `main ← feat/branch · 1 file · +38 −2` — the facts a reviewer scans first. */
+function ChangeFacts({ item }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const adv = item.detail.advanced;
+    const crId = item.detail.crId ?? null;
+    // The live diff query is shared with `ChangeFiles` below (same key), so this
+    // costs no extra request; it just lets the header agree with the file list.
+    const diff = useChangeRequestDiff(crId);
+    const files = diff.data?.files_changed ?? adv.files.length;
+    const additions = diff.data?.additions ?? adv.additions;
+    const deletions = diff.data?.deletions ?? adv.deletions;
+    const hasRefs = Boolean(adv.baseRef || adv.headRef);
+    const hasCounts = files > 0 || additions > 0 || deletions > 0;
+    if (!hasRefs && !hasCounts)
+        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 })] }));
+}
+export function ReviewDetail({ item, actions, onBack, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const crId = item.kind === 'change' ? (item.detail.crId ?? null) : null;
+    const mergePreview = useChangeRequestMergePreview(crId, Boolean(crId));
+    const [composing, setComposing] = useState(false);
+    const previewHasConflicts = Boolean(mergePreview.data && !mergePreview.data.is_up_to_date && !mergePreview.data.can_merge);
+    const conflicts = item.kind === 'change'
+        ? crId
+            ? previewHasConflicts
+                ? (mergePreview.data?.conflicts ?? [])
+                : []
+            : (item.detail.conflicts ?? [])
+        : [];
+    const kind = KIND_META[item.kind];
+    const number = item.kind === 'change' ? item.detail.number : undefined;
+    // A change waiting on you is "Open", the way a pull request is; every other
+    // state keeps the inbox's own label.
+    const open = item.status === 'needs_you' && item.kind === 'change';
+    const statusLabel = open
+        ? tI18nComplete.raw('texted077f3d8125')
+        : 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 })] })] }));
+}

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

@@ -0,0 +1,59 @@
+/**
+ * Presentation metadata for Review Center items — the single place that maps a
+ * kind / status / source to its icon, Kortix tone, and label. Uses the
+ * tinted-icon-tile pattern: a faint Kortix-token fill behind a solid Kortix-token
+ * icon.
+ */
+import type { UiTranslator } from '../../i18n/index.js';
+import { type ComponentType } from 'react';
+import type { ApprovalActionIcon, ReviewKind, ReviewSource, ReviewStatus } from './types.js';
+type IconCmp = ComponentType<{
+    className?: string;
+}>;
+type BadgeVariant = 'success' | 'warning' | 'destructive' | 'secondary' | 'muted' | 'kortix' | 'outline' | 'info';
+export declare const KIND_META: Record<ReviewKind, {
+    label: string;
+    icon: IconCmp;
+    tile: string;
+    iconColor: string;
+}>;
+/** A change's verification entries carry a tone; map it onto the Badge variant. */
+export declare const VERIFICATION_BADGE: Record<'success' | 'warning' | 'neutral' | 'info', BadgeVariant>;
+export declare const STATUS_META: Record<ReviewStatus, {
+    label: string;
+    badge: BadgeVariant;
+}>;
+export declare const SOURCE_META: Record<ReviewSource, {
+    label: string;
+    icon: IconCmp;
+}>;
+export declare const APPROVAL_ACTION_ICON: Record<ApprovalActionIcon, IconCmp>;
+export declare const SEGMENT_LABEL: {
+    readonly needs_you: "Needs you";
+    readonly waiting: "Waiting";
+    readonly done: "Done";
+};
+export declare function getLocalizedReviewMeta(tI18nComplete: UiTranslator): {
+    KIND_META: Record<import("@kortix/sdk").ReviewItemKind, {
+        label: string;
+        icon: IconCmp;
+        tile: string;
+        iconColor: string;
+    }>;
+    STATUS_META: Record<import("@kortix/sdk").ReviewItemStatus, {
+        label: string;
+        badge: BadgeVariant;
+    }>;
+    SOURCE_META: Record<import("@kortix/sdk").ReviewItemSource, {
+        label: string;
+        icon: IconCmp;
+    }>;
+    SEGMENT_LABEL: {
+        readonly needs_you: "Needs you";
+        readonly waiting: "Waiting";
+        readonly done: "Done";
+    };
+};
+export declare function reviewKindLabel(kind: ReviewKind, tI18nComplete: UiTranslator): string;
+export declare function reviewStatusLabel(status: ReviewStatus, tI18nComplete: UiTranslator): string;
+export {};

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

@@ -0,0 +1,100 @@
+/**
+ * Presentation metadata for Review Center items — the single place that maps a
+ * kind / status / source to its icon, Kortix tone, and label. Uses the
+ * tinted-icon-tile pattern: a faint Kortix-token fill behind a solid Kortix-token
+ * icon.
+ */
+import { localizeUiCatalog } from '../../i18n/ui-catalog/localize-ui-catalog.js';
+import { REVIEW_META_TRANSLATION_KEYS } from '../../i18n/ui-catalog/review-meta-translation-keys.generated.js';
+import { ChatsIcon as ChatMessages, CheckCircleIcon as CheckCircleSolid, CommandIcon as Command, CreditCardIcon as CreditCardSolid, DatabaseIcon as Database, GitPullRequestIcon as GitPullRequest, MonitorIcon as Monitor, QuestionIcon as QuestionCircleSolid, PaperPlaneTiltIcon as Send, ShieldCheckIcon as ShieldCheckSolid, SparkleIcon as SparklesSolid, TerminalWindowIcon as Terminal, } from '@phosphor-icons/react';
+import { createElement } from 'react';
+/** Wraps a fill-intent icon so the tinted-icon-tile pattern (see file header)
+ *  always renders it solid, without forcing `weight="fill"` on every icon
+ *  this module re-exports (`GitPullRequest`, `Monitor`, `Send`, … stay
+ *  outline). */
+function filled(IconComponent) {
+    const Fillable = IconComponent;
+    return function FilledIcon({ className }) {
+        return createElement(Fillable, { className, weight: 'fill' });
+    };
+}
+export const KIND_META = {
+    change: {
+        label: 'Change',
+        icon: GitPullRequest,
+        tile: 'bg-kortix-blue/15',
+        iconColor: 'text-kortix-blue',
+    },
+    approval: {
+        label: 'Approval',
+        icon: filled(ShieldCheckSolid),
+        tile: 'bg-kortix-orange/15',
+        iconColor: 'text-kortix-orange',
+    },
+    output: {
+        label: 'Output',
+        icon: filled(SparklesSolid),
+        tile: 'bg-kortix-purple/15',
+        iconColor: 'text-kortix-purple',
+    },
+    decision: {
+        label: 'Question',
+        icon: filled(QuestionCircleSolid),
+        tile: 'bg-kortix-yellow/15',
+        // kortix-yellow is the palette's lowest-contrast glyph on a light tint. The
+        // kind is always named in text beside the tile, so the glyph is redundant
+        // and the token stays pure (no raw palette, no `dark:`).
+        iconColor: 'text-kortix-yellow',
+    },
+    batch: {
+        label: 'Finished',
+        icon: filled(CheckCircleSolid),
+        tile: 'bg-kortix-green/15',
+        iconColor: 'text-kortix-green',
+    },
+};
+// Every chip in the Review Center is the one `Badge` component — no second
+// pill family (Jay, 2026-09-03: "use the badge component only").
+/** A change's verification entries carry a tone; map it onto the Badge variant. */
+export const VERIFICATION_BADGE = {
+    success: 'success',
+    warning: 'warning',
+    neutral: 'secondary',
+    info: 'info',
+};
+export const STATUS_META = {
+    needs_you: { label: 'Needs you', badge: 'warning' },
+    waiting: { label: 'Waiting on agent', badge: 'secondary' },
+    approved: { label: 'Approved', badge: 'success' },
+    changes_requested: { label: 'Changes requested', badge: 'warning' },
+    rejected: { label: 'Rejected', badge: 'destructive' },
+    done: { label: 'Done', badge: 'success' },
+    dismissed: { label: 'Dismissed', badge: 'muted' },
+    expired: { label: 'Expired', badge: 'muted' },
+};
+export const SOURCE_META = {
+    web: { label: 'Web', icon: Monitor },
+    slack: { label: 'Slack', icon: ChatMessages },
+    agent: { label: 'Agent', icon: filled(SparklesSolid) },
+};
+export const APPROVAL_ACTION_ICON = {
+    email: Send,
+    charge: filled(CreditCardSolid),
+    command: Terminal,
+    data: Database,
+    generic: Command,
+};
+export const SEGMENT_LABEL = {
+    needs_you: 'Needs you',
+    waiting: 'Waiting',
+    done: 'Done',
+};
+export function getLocalizedReviewMeta(tI18nComplete) {
+    return localizeUiCatalog({ KIND_META, STATUS_META, SOURCE_META, SEGMENT_LABEL }, tI18nComplete, REVIEW_META_TRANSLATION_KEYS);
+}
+export function reviewKindLabel(kind, tI18nComplete) {
+    return getLocalizedReviewMeta(tI18nComplete).KIND_META[kind].label;
+}
+export function reviewStatusLabel(status, tI18nComplete) {
+    return getLocalizedReviewMeta(tI18nComplete).STATUS_META[status].label;
+}

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

@@ -0,0 +1,51 @@
+/**
+ * Pure state transitions for the Review Center inbox. Kept free of React so the
+ * decision logic (the part worth getting right — bulk approve, roll-up to a final
+ * status, filtering) is unit-testable in isolation. The component holds the items
+ * in state and calls these to produce the next array.
+ */
+import { type ApprovalAction, type ReviewItem, type ReviewKind, type ReviewSegment, type ReviewStatus } from './types.js';
+/**
+ * Once every action in an approval has been decided, the item rolls up to a
+ * terminal status: approved if at least one was approved, otherwise rejected.
+ * Returns null while any action is still pending.
+ */
+export declare function rollupApprovalStatus(actions: ApprovalAction[]): 'approved' | 'rejected' | null;
+/** Set an item's status outright (ship, answer, request changes, deny-all, …). */
+export declare function setStatus(items: ReviewItem[], id: string, status: ReviewStatus): ReviewItem[];
+/** Approve or deny a single action inside an approval, rolling up if complete. */
+export declare function decideApprovalAction(items: ReviewItem[], itemId: string, actionId: string, decision: 'approved' | 'denied'): ReviewItem[];
+/** Approve every still-pending safe (none/low-risk) action; risky ones untouched. */
+export declare function approveAllSafe(items: ReviewItem[], itemId: string): ReviewItem[];
+/** Count of pending safe actions across the given items (drives the bulk bar). */
+export declare function safePendingCount(items: ReviewItem[]): number;
+/** How many items sit in each inbox segment. */
+export declare function countsBySegment(items: ReviewItem[]): Record<ReviewSegment, number>;
+/** True if the free-text query matches an item's title / summary / project / agent. */
+export declare function matchesQuery(item: ReviewItem, query: string): boolean;
+/** Items visible for the current segment + kind + query + optional session,
+ *  newest-first. The explicit sort keeps the top of Needs-you the most recent
+ *  blocking item and stops a poll refetch from reordering rows (which would
+ *  jump the j/k focus cursor). Ties break on id for a stable order. */
+export declare function filterItems(items: ReviewItem[], segment: ReviewSegment, kind: ReviewKind | 'all', query?: string, sessionFilter?: string | 'all'): ReviewItem[];
+/** One "group by session" bucket. `sessionId === null` is the catch-all for
+ *  items with no originating session (e.g. a project-level submission). */
+export interface SessionGroup {
+    sessionId: string | null;
+    label: string;
+    items: ReviewItem[];
+}
+/**
+ * Group items by their originating session — newest-activity first, with the
+ * "No session" bucket always last. Reviews and approvals for a session end up
+ * side by side under one header. `labelFor` resolves a session id to its name.
+ */
+export declare function groupBySession(items: ReviewItem[], labelFor: (sessionId: string) => string | undefined): SessionGroup[];
+/** Distinct sessions present across items (for the session-filter dropdown),
+ *  each with a resolved label, ordered by newest activity. */
+export declare function sessionOptions(items: ReviewItem[], labelFor: (sessionId: string) => string | undefined): {
+    sessionId: string;
+    label: string;
+}[];
+/** Set the same status on many items at once (multi-select bulk approve / dismiss). */
+export declare function bulkSetStatus(items: ReviewItem[], ids: Iterable<string>, status: ReviewStatus): ReviewItem[];

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

@@ -0,0 +1,120 @@
+/**
+ * Pure state transitions for the Review Center inbox. Kept free of React so the
+ * decision logic (the part worth getting right — bulk approve, roll-up to a final
+ * status, filtering) is unit-testable in isolation. The component holds the items
+ * in state and calls these to produce the next array.
+ */
+import { isSafeRisk, segmentForStatus, } from './types.js';
+/**
+ * Once every action in an approval has been decided, the item rolls up to a
+ * terminal status: approved if at least one was approved, otherwise rejected.
+ * Returns null while any action is still pending.
+ */
+export function rollupApprovalStatus(actions) {
+    if (actions.length === 0)
+        return null;
+    if (!actions.every((a) => a.decided))
+        return null;
+    return actions.some((a) => a.decided === 'approved') ? 'approved' : 'rejected';
+}
+/** Set an item's status outright (ship, answer, request changes, deny-all, …). */
+export function setStatus(items, id, status) {
+    return items.map((i) => (i.id === id ? { ...i, status } : i));
+}
+/** Approve or deny a single action inside an approval, rolling up if complete. */
+export function decideApprovalAction(items, itemId, actionId, decision) {
+    return items.map((i) => {
+        if (i.id !== itemId || i.kind !== 'approval')
+            return i;
+        const actions = i.detail.actions.map((a) => a.id === actionId ? { ...a, decided: decision } : a);
+        return { ...i, detail: { actions }, status: rollupApprovalStatus(actions) ?? i.status };
+    });
+}
+/** Approve every still-pending safe (none/low-risk) action; risky ones untouched. */
+export function approveAllSafe(items, itemId) {
+    return items.map((i) => {
+        if (i.id !== itemId || i.kind !== 'approval')
+            return i;
+        const actions = i.detail.actions.map((a) => isSafeRisk(a.risk) && !a.decided ? { ...a, decided: 'approved' } : a);
+        return { ...i, detail: { actions }, status: rollupApprovalStatus(actions) ?? i.status };
+    });
+}
+/** Count of pending safe actions across the given items (drives the bulk bar). */
+export function safePendingCount(items) {
+    return items.reduce((n, i) => n +
+        (i.kind === 'approval'
+            ? i.detail.actions.filter((a) => isSafeRisk(a.risk) && !a.decided).length
+            : 0), 0);
+}
+/** How many items sit in each inbox segment. */
+export function countsBySegment(items) {
+    const counts = { needs_you: 0, waiting: 0, done: 0 };
+    for (const i of items)
+        counts[segmentForStatus(i.status)] += 1;
+    return counts;
+}
+/** True if the free-text query matches an item's title / summary / project / agent. */
+export function matchesQuery(item, query) {
+    const q = query.trim().toLowerCase();
+    if (!q)
+        return true;
+    return `${item.title} ${item.summary} ${item.project} ${item.agent}`.toLowerCase().includes(q);
+}
+/** Items visible for the current segment + kind + query + optional session,
+ *  newest-first. The explicit sort keeps the top of Needs-you the most recent
+ *  blocking item and stops a poll refetch from reordering rows (which would
+ *  jump the j/k focus cursor). Ties break on id for a stable order. */
+export function filterItems(items, segment, kind, query = '', sessionFilter = 'all') {
+    return items
+        .filter((i) => segmentForStatus(i.status) === segment &&
+        (kind === 'all' || i.kind === kind) &&
+        (sessionFilter === 'all' || (i.sessionId ?? '') === sessionFilter) &&
+        matchesQuery(i, query))
+        .sort((a, b) => b.createdAt.localeCompare(a.createdAt) || a.id.localeCompare(b.id));
+}
+/** Resolve a session id → human label, falling back to a short id. */
+function sessionLabel(sessionId, labelFor) {
+    return labelFor(sessionId) ?? `Session ${sessionId.slice(0, 8)}`;
+}
+/**
+ * Group items by their originating session — newest-activity first, with the
+ * "No session" bucket always last. Reviews and approvals for a session end up
+ * side by side under one header. `labelFor` resolves a session id to its name.
+ */
+export function groupBySession(items, labelFor) {
+    const byId = new Map();
+    for (const i of items) {
+        const key = i.sessionId ?? null;
+        const list = byId.get(key);
+        if (list)
+            list.push(i);
+        else
+            byId.set(key, [i]);
+    }
+    const newest = (list) => list.reduce((m, i) => (i.createdAt > m ? i.createdAt : m), '');
+    return [...byId.entries()]
+        .map(([sessionId, list]) => ({
+        sessionId,
+        label: sessionId === null ? 'No session' : sessionLabel(sessionId, labelFor),
+        items: list,
+    }))
+        .sort((a, b) => {
+        if (a.sessionId === null)
+            return 1; // "No session" sinks last
+        if (b.sessionId === null)
+            return -1;
+        return newest(b.items).localeCompare(newest(a.items));
+    });
+}
+/** Distinct sessions present across items (for the session-filter dropdown),
+ *  each with a resolved label, ordered by newest activity. */
+export function sessionOptions(items, labelFor) {
+    return groupBySession(items, labelFor)
+        .filter((g) => g.sessionId !== null)
+        .map((g) => ({ sessionId: g.sessionId, label: g.label }));
+}
+/** Set the same status on many items at once (multi-select bulk approve / dismiss). */
+export function bulkSetStatus(items, ids, status) {
+    const set = ids instanceof Set ? ids : new Set(ids);
+    return items.map((i) => (set.has(i.id) ? { ...i, status } : i));
+}

package/dist/workspace/review/types.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Review Center — the unified human-in-the-loop review model.
+ *
+ * A ReviewItem is "one thing a human needs to look at or decide on." It carries
+ * a plain-language envelope and a polymorphic `kind`. In production these come
+ * from a read model that unions the canonical `review_items` table with adapters
+ * over change requests and connector approvals; in the
+ * prototype they come from mock-data.ts.
+ */
+import { reviewSegmentForStatus, type ReviewApprovalAction, type ReviewApprovalActionIcon, type ReviewApprovalDetail, type ReviewBatchChild, type ReviewBatchDetail, type ReviewChangeDetail, type ReviewDecisionDetail, type ReviewDecisionOption, type ReviewItem as SdkReviewItem, type ReviewItemKind, type ReviewItemRisk, type ReviewItemSource, type ReviewItemStatus, type ReviewOutputDetail, type ReviewRequestedChange, type ReviewSegment as SdkReviewSegment } from '@kortix/sdk';
+export type ReviewKind = ReviewItemKind;
+export type ReviewRisk = ReviewItemRisk;
+export type ReviewStatus = ReviewItemStatus;
+export type ReviewSegment = SdkReviewSegment;
+export type ReviewSource = ReviewItemSource;
+export interface ReviewActor {
+    name: string;
+    initials: string;
+}
+/** What the web inbox adds to the SDK's item: its own copy and avatar. */
+interface ReviewItemPresentation {
+    project: string;
+    actor: ReviewActor;
+    primaryAction: string;
+    secondaryAction?: string;
+}
+export type RequestedChange = ReviewRequestedChange;
+export type ChangeDetail = ReviewChangeDetail;
+export type ApprovalActionIcon = ReviewApprovalActionIcon;
+export type ApprovalAction = ReviewApprovalAction;
+export type ApprovalDetail = ReviewApprovalDetail;
+export type OutputDetail = ReviewOutputDetail;
+export type DecisionOption = ReviewDecisionOption;
+export type DecisionDetail = ReviewDecisionDetail;
+export type BatchChild = ReviewBatchChild;
+export type BatchDetail = ReviewBatchDetail;
+export type ReviewItem = SdkReviewItem & ReviewItemPresentation;
+/** Which inbox segment a status belongs to. */
+export declare const segmentForStatus: typeof reviewSegmentForStatus;
+/** Prototype/native approval actions can use the safe-risk helper. Connector approvals cannot. */
+export declare function isSafeRisk(risk: ReviewRisk): boolean;
+export {};