@kortix/ui 0.0.0-stage → 0.14.4

package/dist/session/prompts/question-prompt.js

@@ -0,0 +1,224 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslations } from '../../i18n/index.js';
+/**
+ * QuestionPrompt — compact self-contained inline chip inside the chat input card.
+ *
+ * - Compact header row (icon + summary + dismiss/chevron)
+ * - Expandable body with question options
+ * - Single-question immediate submit on pick
+ * - Multi-select toggle + Next/Confirm flow
+ * - Custom answers typed in the main chat textarea (no nested input)
+ */
+import { cn } from '../../lib/utils.js';
+import { CaretDownIcon, CaretLeftIcon, CaretRightIcon, CheckIcon } from '@phosphor-icons/react';
+import React, { useCallback, useEffect, useImperativeHandle, useState } from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { Close } from '../../icons/close.js';
+// ---------------------------------------------------------------------------
+// Lightweight markdown renderer for question text (no Shiki/KaTeX/Mermaid)
+// ---------------------------------------------------------------------------
+function QuestionMarkdown({ content, className }) {
+    return (_jsx("div", { className: cn('question-md', className), children: _jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], components: {
+                p: ({ children }) => _jsx("p", { className: "my-1 leading-relaxed", children: children }),
+                strong: ({ children }) => (_jsx("strong", { className: "text-foreground font-semibold", children: children })),
+                em: ({ children }) => _jsx("em", { className: "text-muted-foreground", children: children }),
+                ul: ({ children }) => _jsx("ul", { className: "my-0.5 list-disc pl-4", children: children }),
+                ol: ({ children }) => _jsx("ol", { className: "my-0.5 list-decimal pl-4", children: children }),
+                li: ({ children }) => _jsx("li", { className: "my-0", children: children }),
+                code: ({ children }) => (_jsx("code", { className: "bg-muted rounded px-1 py-0.5 font-mono text-xs", children: children })),
+                a: ({ href, children }) => (_jsx("a", { href: href, target: "_blank", rel: "noopener noreferrer", className: "text-primary hover:text-primary/80 underline underline-offset-2", children: children })),
+            }, children: content }) }));
+}
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+export const QuestionPrompt = React.forwardRef(function QuestionPrompt({ request, onReply, onReject, onActionChange }, ref) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const tCommon = useTranslations('common');
+    const questions = request.questions;
+    const isSingle = questions.length === 1 && !questions[0].multiple;
+    const [tab, setTab] = useState(0);
+    const [answers, setAnswers] = useState(() => questions.map(() => []));
+    const [replying, setReplying] = useState(false);
+    // Collapsed hides the body so the transcript gets the height back.
+    const [collapsed, setCollapsed] = useState(false);
+    const isConfirm = tab === questions.length;
+    const currentQuestion = questions[tab];
+    const isMulti = currentQuestion?.multiple ?? false;
+    const options = currentQuestion?.options ?? [];
+    const currentAnswers = answers[tab] ?? [];
+    const currentAnswerSet = new Set(currentAnswers);
+    const showCustom = currentQuestion?.custom !== false;
+    // -----------------------------------------------------------------------
+    // Handlers
+    // -----------------------------------------------------------------------
+    const pick = useCallback((answer) => {
+        const next = [...answers];
+        next[tab] = [answer];
+        setAnswers(next);
+        if (isSingle) {
+            setReplying(true);
+            onReply(request.id, [[answer]]);
+            return;
+        }
+        // Advance to next tab
+        setTab(tab + 1);
+    }, [answers, tab, isSingle, request.id, onReply]);
+    const toggle = useCallback((answer) => {
+        const existing = answers[tab] ?? [];
+        const next = [...existing];
+        const idx = next.indexOf(answer);
+        if (idx === -1)
+            next.push(answer);
+        else
+            next.splice(idx, 1);
+        const updated = [...answers];
+        updated[tab] = next;
+        setAnswers(updated);
+    }, [answers, tab]);
+    const selectOption = useCallback((optIndex) => {
+        const opts = currentQuestion?.options ?? [];
+        const opt = opts[optIndex];
+        if (!opt)
+            return;
+        if (isMulti) {
+            toggle(opt.label);
+        }
+        else {
+            pick(opt.label);
+        }
+    }, [currentQuestion?.options, isMulti, toggle, pick]);
+    /** Called by the parent (via ref) when the user types a custom answer in the main textarea and hits send. */
+    const handleCustomSubmit = useCallback((value) => {
+        const trimmed = value.trim();
+        if (!trimmed)
+            return;
+        // On the Confirm tab there is no "current question" to answer. Treat a
+        // typed message as the user's intent to submit: send all collected
+        // answers and carry the typed text along as an extra note on the last
+        // question (the per-question reply contract has no separate channel for
+        // a free-form message, and an answer list already accepts custom text).
+        if (isConfirm) {
+            const finalAnswers = questions.map((_, i) => answers[i] ?? []);
+            const lastIdx = questions.length - 1;
+            if (lastIdx >= 0) {
+                finalAnswers[lastIdx] = [...finalAnswers[lastIdx], trimmed];
+            }
+            setReplying(true);
+            onReply(request.id, finalAnswers);
+            return;
+        }
+        if (isMulti) {
+            const existing = answers[tab] ?? [];
+            if (!existing.includes(trimmed)) {
+                const next = [...existing, trimmed];
+                const updated = [...answers];
+                updated[tab] = next;
+                setAnswers(updated);
+            }
+            return;
+        }
+        pick(trimmed);
+    }, [isConfirm, isMulti, answers, tab, pick, questions, request.id, onReply]);
+    const advanceToNext = useCallback(() => {
+        if (currentAnswers.length > 0) {
+            setTab(tab + 1);
+        }
+    }, [currentAnswers.length, tab]);
+    // Derive what action the main send button should represent
+    const action = (() => {
+        if (isSingle)
+            return 'send';
+        if (isConfirm)
+            return 'submit';
+        // Any non-confirm tab in a multi-question flow shows "Next"
+        return 'next';
+    })();
+    const canAct = (() => {
+        if (action === 'submit')
+            return true;
+        if (action === 'next')
+            return currentAnswers.length > 0;
+        return true;
+    })();
+    const submit = useCallback(() => {
+        setReplying(true);
+        const finalAnswers = questions.map((_, i) => answers[i] ?? []);
+        onReply(request.id, finalAnswers);
+    }, [answers, questions, request.id, onReply]);
+    const performAction = useCallback(() => {
+        if (action === 'submit') {
+            submit();
+        }
+        else if (action === 'next') {
+            advanceToNext();
+        }
+        // 'send' is handled by SessionChatInput directly (custom answer)
+    }, [action, submit, advanceToNext]);
+    // Notify parent of action state changes
+    useEffect(() => {
+        onActionChange?.(action, canAct);
+    }, [action, canAct, onActionChange]);
+    // Expose imperative handle for parent-driven interaction
+    useImperativeHandle(ref, () => ({
+        submitCustomAnswer: handleCustomSubmit,
+        acceptsCustom: showCustom && !isConfirm,
+        action,
+        canAct,
+        performAction,
+    }), [handleCustomSubmit, showCustom, isConfirm, action, canAct, performAction]);
+    const reject = useCallback(() => {
+        setReplying(true);
+        onReject(request.id);
+    }, [request.id, onReject]);
+    // -----------------------------------------------------------------------
+    // Once replied, hide completely
+    // -----------------------------------------------------------------------
+    if (replying)
+        return null;
+    // -----------------------------------------------------------------------
+    // Render — the question docks onto the composer card as one surface:
+    // a quiet `2 / 3 · Header` line, the question, then radio rows. Custom
+    // answers are typed in the composer right below.
+    // -----------------------------------------------------------------------
+    const total = questions.length;
+    const stepLabel = isConfirm
+        ? tI18nComplete.raw('texteebdd24a77d9')
+        : currentQuestion?.header?.trim() || '';
+    const collapsedLabel = isConfirm
+        ? stepLabel
+        : (currentQuestion?.question ?? '')
+            .replace(/[*_`#>]/g, '')
+            .split('\n')[0]
+            .trim() || stepLabel;
+    return (_jsxs("div", { className: "relative isolate z-10 w-full", children: [_jsxs("div", { className: "flex w-full items-center gap-2 px-3 py-1 pr-1.5", children: [_jsxs("button", { type: "button", onClick: () => setCollapsed((c) => !c), "aria-expanded": !collapsed, "aria-controls": `${request.id}-panel`, className: "text-muted-foreground hover:text-foreground flex min-h-6 min-w-0 flex-1 cursor-pointer items-center gap-1.5 text-left text-xs transition-colors", children: [!isSingle && (_jsxs("span", { className: "shrink-0 tabular-nums", children: [Math.min(tab + 1, total), " / ", total] })), (collapsed ? collapsedLabel : stepLabel) && (_jsxs("span", { className: cn('min-w-0 truncate', collapsed && 'text-foreground'), children: [!isSingle && (_jsxs("span", { "aria-hidden": "true", className: "text-muted-foreground", children: ["\u00B7", ' '] })), collapsed ? collapsedLabel : stepLabel] })), _jsx(CaretDownIcon, { className: cn('duration-normal size-3 shrink-0 transition-transform ease-out motion-reduce:transition-none', collapsed && '-rotate-90') })] }), !isSingle && !collapsed && (_jsxs("div", { className: "flex shrink-0 items-center", children: [_jsx("button", { type: "button", onClick: () => setTab(tab - 1), disabled: tab === 0, "aria-label": tCommon('back'), className: "text-muted-foreground hover:text-foreground hover:bg-muted hit-area-2 inline-flex size-6 cursor-pointer items-center justify-center rounded-md transition-colors disabled:pointer-events-none disabled:opacity-30", children: _jsx(CaretLeftIcon, { className: "size-3.5" }) }), _jsx("button", { type: "button", onClick: advanceToNext, disabled: isConfirm || currentAnswers.length === 0, "aria-label": tCommon('next'), className: "text-muted-foreground hover:text-foreground hover:bg-muted hit-area-2 inline-flex size-6 cursor-pointer items-center justify-center rounded-md transition-colors disabled:pointer-events-none disabled:opacity-30", children: _jsx(CaretRightIcon, { className: "size-3.5" }) })] })), _jsx("button", { type: "button", onClick: reject, "aria-label": tI18nComplete.raw('text31d11513a187'), className: "text-muted-foreground hover:text-foreground hover:bg-muted hit-area-2 inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-md transition-colors", children: _jsx(Close, { className: "size-3" }) })] }), _jsx("div", { className: cn('duration-normal grid transition-[grid-template-rows] ease-out motion-reduce:transition-none', collapsed ? 'grid-rows-[0fr]' : 'grid-rows-[1fr]'), children: _jsx("div", { id: `${request.id}-panel`, "aria-label": isSingle ? undefined : tI18nComplete.raw('text9a72221a2747'), inert: collapsed, className: cn('duration-normal min-h-0 overflow-y-auto px-px transition-opacity ease-out motion-reduce:transition-none', collapsed ? 'pb-0 opacity-0' : 'max-h-[420px] pb-1.5'), children: isConfirm ? (_jsx("div", { className: "flex flex-col", children: questions.map((q, i) => {
+                            const ans = answers[i] ?? [];
+                            const done = ans.length > 0;
+                            return (_jsxs("button", { type: "button", onClick: () => setTab(i), className: "hover:bg-muted/60 flex w-full cursor-pointer items-baseline gap-4 rounded-lg px-3 py-2 text-left transition-colors", children: [_jsx("span", { className: "text-muted-foreground w-28 shrink-0 truncate text-xs", children: q.header || q.question }), _jsx("span", { className: cn('min-w-0 flex-1 truncate text-sm', done ? 'text-foreground' : 'text-muted-foreground'), children: done ? ans.join(', ') : '—' })] }, i));
+                        }) })) : currentQuestion ? (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("div", { className: "text-foreground max-h-[300px] overflow-y-auto px-3 text-sm leading-relaxed font-medium", children: _jsx(QuestionMarkdown, { content: currentQuestion.question +
+                                        (isMulti ? tI18nComplete.raw('text79139c621384') : '') }) }), _jsx("div", { className: "flex flex-col", children: options.map((opt, i) => {
+                                    const isPicked = currentAnswerSet.has(opt.label);
+                                    // Adjacent picked rows join into one block: only the run's
+                                    // outer corners stay rounded.
+                                    const joinsAbove = isPicked && currentAnswerSet.has(options[i - 1]?.label ?? '');
+                                    const joinsBelow = isPicked && currentAnswerSet.has(options[i + 1]?.label ?? '');
+                                    const { title, recommended } = splitRecommended(opt.label);
+                                    return (_jsxs("button", { type: "button", "aria-pressed": isPicked, onClick: () => selectOption(i), className: cn('group duration-normal flex w-full cursor-pointer items-start gap-2.5 rounded-lg px-3 py-2 text-left transition-colors ease-out', isPicked ? 'bg-muted' : 'hover:bg-muted/60', joinsAbove && 'rounded-t-none', joinsBelow && 'rounded-b-none'), children: [_jsx("span", { className: cn('mt-0.5 flex size-4 shrink-0 items-center justify-center rounded border transition-colors', isPicked
+                                                    ? 'bg-foreground border-foreground'
+                                                    : 'border-muted-foreground/40 group-hover:border-foreground/60'), children: isPicked && (_jsx(CheckIcon, { weight: "bold", className: "text-background size-2.5" })) }), _jsxs("span", { className: "flex min-w-0 flex-col gap-0.5", children: [_jsxs("span", { className: "flex min-w-0 items-baseline gap-2", children: [_jsx("span", { className: "text-foreground text-sm font-medium", children: title }), recommended && (_jsx("span", { className: "text-muted-foreground shrink-0 text-xs", children: recommended }))] }), opt.description && (_jsx("span", { className: "text-muted-foreground text-xs leading-relaxed", children: opt.description }))] })] }, opt.label));
+                                }) })] })) : null }) })] }));
+});
+/** Agents mark the suggested option by suffixing its label with
+ *  "(Recommended)". Show that as a quiet tag; the reply keeps the raw label. */
+function splitRecommended(label) {
+    // Same result as `/^(.*?)\s*\((Recommended)\)\s*$/i`, whose `.*?` and `\s*`
+    // backtrack quadratically on a long space run (CodeQL js/polynomial-redos):
+    // the title is the text before the tag, trimmed, on one line.
+    const match = /\((Recommended)\)\s*$/i.exec(label);
+    const title = match ? label.slice(0, match.index).trimEnd() : '';
+    return match && !/[\n\r\u2028\u2029]/.test(title)
+        ? { title, recommended: match[1] }
+        : { title: label, recommended: null };
+}

package/dist/session/prompts/session-approval-prompt.d.ts

@@ -0,0 +1,68 @@
+/**
+ * In-session "agent needs your approval" card, pinned above the composer.
+ *
+ * It is a decision surface again — but only because it now shows what is being
+ * decided. Two rules constrain it, and both came from real failures:
+ *
+ *  1. **Never ask an unanswerable question.** The card used to show
+ *     `Run gmail.send_email` and nothing else — no recipient, no subject — so
+ *     "is this allowed?" could not be judged. Whether a call is safe depends on
+ *     its ARGUMENTS. The fix was to move the decision to a standalone page that
+ *     listed them; the fix here is to expand the redacted parameters in place,
+ *     using the SAME `ApprovalParameters` component that page renders. The
+ *     question and the evidence now arrive together, without leaving the
+ *     session.
+ *  2. **One decision, one call.** The buttons are exactly Deny and Approve this
+ *     call (`ApprovalDecisionActions`). The old session-wide, blanket, and
+ *     per-tool waiver buttons are gone: a reflex click that clears today's
+ *     prompt must not pre-authorise every later call, including ones with
+ *     entirely different arguments. To let a tool run unattended, author an
+ *     `always_run` rule in the Policies panel, where the whole rule set is in
+ *     view.
+ *
+ * The standalone /approve/<token> page stays, reachable from the ↗ on every
+ * row. That link is what gets relayed out-of-band (chat, email), so the human
+ * need not be watching the session — and it is the same absolute URL the API
+ * mints, so there is one link shape.
+ *
+ * Liveness is unchanged: rows come from the shared `useSessionAudit` query,
+ * which polls every 5s here. A decision taken anywhere else — the link, the
+ * Audit panel, another tab — drops the row on the next poll.
+ *
+ * Every viewer of the session sees the card, but only a viewer the API lets
+ * decide gets Deny / Approve (`can_resolve`, KRTX-1724). Anyone else reads
+ * the call and who decides it — a project manager or the person who started
+ * the session — instead of a decision that answers 403. The approval page
+ * refuses them too, so they get the link to copy, not to open.
+ */
+import { type ApprovalDecisionValue } from './approval-request.js';
+import { type ApprovalNoticeRow } from './session-approval-review.js';
+export declare function SessionApprovalPrompt({ onDockedChange, }?: {
+    /** True while a call waits on a decision: the composer docks onto the card,
+     *  the same treatment a pending question gets. */
+    onDockedChange?: (docked: boolean) => void;
+}): import("react").JSX.Element;
+interface SessionApprovalNoticeProps {
+    rows: ApprovalNoticeRow[];
+    /** Execution id of the pending call on screen. Null, or one that is no
+     *  longer pending, shows the first pending call. */
+    current: string | null;
+    busy: Record<string, ApprovalDecisionValue>;
+    onSelect: (executionId: string) => void;
+    onDecide: (executionId: string, decision: ApprovalDecisionValue, note?: string) => void;
+    /** Bound Slack conversation ids → names, for the summary and the parameters. */
+    channelNames?: ReadonlyMap<string, string>;
+    /** Who besides a project manager decides, for a viewer who may not
+     *  (`can_resolve: false`). Null: the plain wording. */
+    launcherName?: string | null;
+}
+/**
+ * The card itself — no data fetching, no mutation, so every state is directly
+ * testable. It docks onto the composer the way `QuestionPrompt` does: no card
+ * chrome of its own, a quiet `1 / 2 · headline` line that collapses the body,
+ * then ONE call at a time with its parameters in view and Deny / Approve under
+ * them. Deciding a call drops it from the pending set, so the next one takes
+ * its place without a click.
+ */
+export declare function SessionApprovalNotice({ rows, current, busy, onSelect, onDecide, channelNames, launcherName, }: SessionApprovalNoticeProps): import("react").JSX.Element | null;
+export {};

package/dist/session/prompts/session-approval-prompt.js

@@ -0,0 +1,169 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useTranslations } from '../../i18n/index.js';
+/**
+ * In-session "agent needs your approval" card, pinned above the composer.
+ *
+ * It is a decision surface again — but only because it now shows what is being
+ * decided. Two rules constrain it, and both came from real failures:
+ *
+ *  1. **Never ask an unanswerable question.** The card used to show
+ *     `Run gmail.send_email` and nothing else — no recipient, no subject — so
+ *     "is this allowed?" could not be judged. Whether a call is safe depends on
+ *     its ARGUMENTS. The fix was to move the decision to a standalone page that
+ *     listed them; the fix here is to expand the redacted parameters in place,
+ *     using the SAME `ApprovalParameters` component that page renders. The
+ *     question and the evidence now arrive together, without leaving the
+ *     session.
+ *  2. **One decision, one call.** The buttons are exactly Deny and Approve this
+ *     call (`ApprovalDecisionActions`). The old session-wide, blanket, and
+ *     per-tool waiver buttons are gone: a reflex click that clears today's
+ *     prompt must not pre-authorise every later call, including ones with
+ *     entirely different arguments. To let a tool run unattended, author an
+ *     `always_run` rule in the Policies panel, where the whole rule set is in
+ *     view.
+ *
+ * The standalone /approve/<token> page stays, reachable from the ↗ on every
+ * row. That link is what gets relayed out-of-band (chat, email), so the human
+ * need not be watching the session — and it is the same absolute URL the API
+ * mints, so there is one link shape.
+ *
+ * Liveness is unchanged: rows come from the shared `useSessionAudit` query,
+ * which polls every 5s here. A decision taken anywhere else — the link, the
+ * Audit panel, another tab — drops the row on the next poll.
+ *
+ * Every viewer of the session sees the card, but only a viewer the API lets
+ * decide gets Deny / Approve (`can_resolve`, KRTX-1724). Anyone else reads
+ * the call and who decides it — a project manager or the person who started
+ * the session — instead of a decision that answers 403. The approval page
+ * refuses them too, so they get the link to copy, not to open.
+ */
+import { ApprovalAgentContext, ApprovalDecisionActions, ApprovalParameters, approvalReviewable, ApprovalUnreviewableNotice, ApprovalWaitingNotice, } from './approval-request.js';
+import Hint from '../../primitives/hint.js';
+import { errorToast, successToast } from '../../primitives/toast.js';
+import { approvalArgsSummary, approvalLauncherName, approvalNoticeHeadline, approvalNoticeRows, approvalRequestFromAction, } from './session-approval-review.js';
+import { relativeTime, useResolveApproval, useSessionAudit, } from '../panel/session-audit-shared.js';
+import { cn } from '../../lib/utils.js';
+import { copyToClipboard } from '../../internal/lib/utils/clipboard.js';
+import { CaretDownIcon, CaretLeftIcon, CaretRightIcon, CheckCircleIcon, ArrowSquareOutIcon as ExternalLink, LinkIcon, ShieldWarningIcon as ShieldAlert, } from '@phosphor-icons/react';
+import { slackChannelNames } from '../turn/channel-message.js';
+import { useChannelBindings } from '../../internal/hooks/use-channel-bindings.js';
+import { useProjectSession } from '@kortix/sdk/react';
+import { useSessionIds } from '../../providers/session-ids.js';
+import { useEffect, useRef, useState } from 'react';
+/** How long a just-decided row stays on screen to confirm the outcome. */
+const DECIDED_LINGER_MS = 5_000;
+export function SessionApprovalPrompt({ onDockedChange, } = {}) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const { projectId, sessionId: projectSessionId } = useSessionIds();
+    const { data } = useSessionAudit(projectId, projectSessionId);
+    const resolve = useResolveApproval(projectId, projectSessionId);
+    // The session row the page already holds names who else may decide.
+    const { data: session } = useProjectSession(projectId, projectSessionId);
+    const [current, setCurrent] = useState(null);
+    const [busy, setBusy] = useState({});
+    const [decided, setDecided] = useState({});
+    // Each lingering confirmation owns one timer; drop them all on unmount so a
+    // late setState never lands on a torn-down card.
+    const timers = useRef([]);
+    useEffect(() => {
+        const pending = timers.current;
+        return () => {
+            for (const timer of pending)
+                clearTimeout(timer);
+        };
+    }, []);
+    const rows = approvalNoticeRows(data?.actions ?? [], decided);
+    const docked = rows.some((row) => row.decision === null);
+    useEffect(() => {
+        onDockedChange?.(docked);
+    }, [docked, onDockedChange]);
+    useEffect(() => () => onDockedChange?.(false), [onDockedChange]);
+    // A Slack connector call names a conversation by id; the project's bindings
+    // name it. Read only while an approval is on screen.
+    const { data: bindings } = useChannelBindings(rows.length > 0 ? projectId : null);
+    const channelNames = slackChannelNames(bindings?.bindings ?? []);
+    const decide = (executionId, decision, note) => {
+        const row = rows.find((candidate) => candidate.action.execution_id === executionId);
+        if (!row)
+            return;
+        setBusy((current) => ({ ...current, [executionId]: decision }));
+        resolve.mutate({ executionId, decision, note }, {
+            onSuccess: () => {
+                setDecided((current) => ({
+                    ...current,
+                    [executionId]: { action: row.action, decision },
+                }));
+                successToast(decision === 'approve'
+                    ? tI18nComplete.raw('text0674d4a026cb')
+                    : tI18nComplete.raw('text4341be8eb7f0'));
+                timers.current.push(window.setTimeout(() => {
+                    setDecided((current) => {
+                        const next = { ...current };
+                        delete next[executionId];
+                        return next;
+                    });
+                }, DECIDED_LINGER_MS));
+            },
+            onError: (cause) => errorToast(cause instanceof Error ? cause.message : tI18nComplete.raw('textaa7e623fc09a')),
+            onSettled: () => setBusy((current) => {
+                const next = { ...current };
+                delete next[executionId];
+                return next;
+            }),
+        });
+    };
+    return (_jsx(SessionApprovalNotice, { rows: rows, current: current, busy: busy, onSelect: setCurrent, onDecide: decide, channelNames: channelNames, launcherName: approvalLauncherName(session) }));
+}
+const ICON_BUTTON_CLASS = 'text-muted-foreground hover:text-foreground hover:bg-muted hit-area-2 inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-md transition-colors disabled:pointer-events-none disabled:opacity-30';
+/**
+ * The card itself — no data fetching, no mutation, so every state is directly
+ * testable. It docks onto the composer the way `QuestionPrompt` does: no card
+ * chrome of its own, a quiet `1 / 2 · headline` line that collapses the body,
+ * then ONE call at a time with its parameters in view and Deny / Approve under
+ * them. Deciding a call drops it from the pending set, so the next one takes
+ * its place without a click.
+ */
+export function SessionApprovalNotice({ rows, current, busy, onSelect, onDecide, channelNames, launcherName = null, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const tCommon = useTranslations('common');
+    const tWaiting = useTranslations('hardcodedUi.approvalWaiting');
+    const [collapsed, setCollapsed] = useState(false);
+    if (rows.length === 0)
+        return null;
+    const copyApprovalLink = async (url) => {
+        if (await copyToClipboard(url))
+            successToast(tI18nComplete.raw('textd12860c21e78'));
+        else
+            errorToast(tI18nComplete.raw('textfa46ef7689ff'));
+    };
+    const pending = rows.filter((row) => row.decision === null);
+    // "Needs your approval" is false for a viewer who may decide none of them.
+    const headline = pending.length > 0 && pending.every((row) => row.action.can_resolve === false)
+        ? { title: tI18nComplete.raw('textdb0e960b68b5'), hint: null }
+        : approvalNoticeHeadline(pending.length, tI18nComplete);
+    // Only lingering confirmations left: one quiet line per decided call.
+    if (pending.length === 0) {
+        return (_jsxs("div", { className: "w-full px-3 py-1 text-xs", role: "status", children: [_jsxs("div", { className: "flex min-h-6 items-center gap-1.5", children: [_jsx(CheckCircleIcon, { weight: "fill", className: "text-kortix-green size-3.5 shrink-0" }), _jsx("span", { className: "text-muted-foreground", children: headline.title })] }), rows.map(({ action, decision }) => (_jsxs("div", { className: "flex min-h-6 items-center gap-1.5 pl-5", children: [_jsx("code", { className: "text-foreground min-w-0 truncate font-mono", children: action.action }), _jsx("span", { className: cn('shrink-0', decision === 'approve' ? 'text-muted-foreground' : 'text-destructive'), children: decision === 'approve' ? 'Approved' : 'Denied' })] }, action.execution_id)))] }));
+    }
+    const index = Math.max(0, pending.findIndex((row) => row.action.execution_id === current));
+    const { action } = pending[index];
+    const executionId = action.execution_id;
+    const approvalUrl = action.approval_url ?? null;
+    const total = pending.length;
+    const summary = approvalArgsSummary(action, channelNames);
+    const request = approvalRequestFromAction(action, true);
+    // NOT the same test. A shortened value is still a reviewable one — see
+    // `approvalReviewable`. Only a call with nothing to show loses the Approve
+    // button, and it loses the button rather than wearing a disabled one.
+    const reviewable = approvalReviewable(request.argsPreview, request.reviewComplete, request.resolvedPreview);
+    const panelId = `${executionId}-approval-panel`;
+    const collapsedLabel = [action.action, summary].filter(Boolean).join(' · ');
+    return (
+    // `w-full`, or the composer's `items-center` strip shrinks this to its
+    // CONTENT width (composer.tsx). Same reason `QuestionPrompt` carries it.
+    _jsxs("div", { className: "relative isolate z-10 w-full", children: [_jsxs("div", { className: "flex w-full items-center gap-2 px-3 py-1 pr-1.5", children: [_jsxs("button", { type: "button", onClick: () => setCollapsed((c) => !c), "aria-expanded": !collapsed, "aria-controls": panelId, className: "text-muted-foreground hover:text-foreground flex min-h-6 min-w-0 flex-1 cursor-pointer items-center gap-1.5 text-left text-xs transition-colors", children: [_jsx(ShieldAlert, { className: "text-kortix-orange size-3.5 shrink-0" }), total > 1 && (_jsxs("span", { className: "shrink-0 tabular-nums", children: [index + 1, " / ", total] })), _jsxs("span", { className: cn('min-w-0 truncate', collapsed && 'text-foreground'), children: [total > 1 && (_jsxs("span", { "aria-hidden": "true", className: "text-muted-foreground", children: ["\u00B7", ' '] })), collapsed ? collapsedLabel : headline.title] }), _jsx(CaretDownIcon, { className: cn('duration-normal size-3 shrink-0 transition-transform ease-out motion-reduce:transition-none', collapsed && '-rotate-90') })] }), total > 1 && !collapsed && (_jsxs("div", { className: "flex shrink-0 items-center", children: [_jsx("button", { type: "button", onClick: () => onSelect(pending[index - 1].action.execution_id), disabled: index === 0, "aria-label": tCommon('back'), className: ICON_BUTTON_CLASS, children: _jsx(CaretLeftIcon, { className: "size-3.5" }) }), _jsx("button", { type: "button", onClick: () => onSelect(pending[index + 1].action.execution_id), disabled: index === total - 1, "aria-label": tCommon('next'), className: ICON_BUTTON_CLASS, children: _jsx(CaretRightIcon, { className: "size-3.5" }) })] })), approvalUrl && action.can_resolve === false ? (
+                    // The approval page refuses this viewer too (403). What they can do
+                    // is send the link to whoever decides.
+                    _jsx(Hint, { label: tWaiting('copyLink'), side: "top", children: _jsx("button", { type: "button", onClick: () => void copyApprovalLink(approvalUrl), "aria-label": tWaiting('copyLink'), className: ICON_BUTTON_CLASS, children: _jsx(LinkIcon, { className: "size-3.5" }) }) })) : action.approval_url ? (_jsx(Hint, { label: tI18nComplete.raw('textb7d2844482b4'), side: "top", children: _jsx("a", { href: action.approval_url, target: "_blank", rel: "noopener noreferrer", "aria-label": tI18nComplete.raw('textb7d2844482b4'), className: ICON_BUTTON_CLASS, children: _jsx(ExternalLink, { className: "size-3.5" }) }) })) : null] }), _jsx("div", { className: cn('duration-normal grid transition-[grid-template-rows] ease-out motion-reduce:transition-none', collapsed ? 'grid-rows-[0fr]' : 'grid-rows-[1fr]'), children: _jsx("div", { id: panelId, inert: collapsed, className: cn('duration-normal min-h-0 overflow-y-auto transition-opacity ease-out motion-reduce:transition-none', collapsed ? 'opacity-0' : 'max-h-[420px]'), children: _jsxs("div", { className: "flex flex-col gap-2 px-3 pt-0.5 pb-2.5", children: [_jsxs("div", { className: "flex min-w-0 items-baseline gap-2", children: [_jsxs("span", { className: "text-foreground min-w-0 truncate text-sm font-medium", children: [_jsxs("span", { className: "text-muted-foreground font-normal", children: [tI18nComplete.raw('text00d60e31a4e6'), ' '] }), _jsx("code", { className: "font-mono", children: action.action })] }), action.risk ? (_jsx("span", { className: cn('shrink-0 text-xs capitalize', action.risk === 'destructive' ? 'text-destructive' : 'text-muted-foreground'), children: action.risk })) : null, _jsx("span", { className: "text-muted-foreground ml-auto shrink-0 text-xs", children: relativeTime(action.at) })] }), _jsx(ApprovalAgentContext, { dense: true, context: request.approvalContext }), _jsx(ApprovalParameters, { dense: true, action: request.action, argsPreview: request.argsPreview, reviewComplete: request.reviewComplete !== false, resolvedPreview: request.resolvedPreview, resolvedError: request.resolvedError, channelNames: channelNames }), action.can_resolve === false ? (_jsx(ApprovalWaitingNotice, { dense: true, resolverName: launcherName, resolvers: action.resolvers })) : (_jsxs(_Fragment, { children: [!reviewable ? _jsx(ApprovalUnreviewableNotice, { dense: true }) : null, _jsx(ApprovalDecisionActions, { dense: true, onDecision: (next, note) => onDecide(executionId, next, note), busyDecision: busy[executionId] ?? null, approvable: reviewable })] }))] }, executionId) }) })] }));
+}

package/dist/session/prompts/session-approval-review.d.ts

@@ -0,0 +1,85 @@
+import type { UiTranslator } from '../../i18n/index.js';
+/**
+ * Pure mapping + list logic behind every connector-approval surface.
+ *
+ * Three views read a `SessionAuditAction` and render the SAME decision: the
+ * in-session notice above the composer (`session-approval-prompt.tsx`), the
+ * Audit side panel (`session-audit-panel.tsx`), and the standalone
+ * /approve/<token> page (via `ApprovalLinkDetails`, which the API derives from
+ * the same row). Keeping the row → `ApprovalRequestData` translation here means
+ * one definition of "what does this call touch?" instead of three drifting
+ * copies, and makes it testable without rendering anything.
+ */
+import type { ApprovalDecisionValue, ApprovalRequestData } from './approval-request.js';
+import type { ProjectSession, SessionAuditAction } from '@kortix/sdk';
+/**
+ * The REDACTED arguments the gateway recorded on the row. Null for a row
+ * written before arg previews existed — callers then show the tool name alone.
+ */
+export declare function approvalArgsPreview(action: SessionAuditAction): Record<string, unknown> | null;
+/** One-line "where is this going?" rendering for a collapsed row. */
+export declare function approvalArgsSummary(action: SessionAuditAction, 
+/** Bound Slack conversation ids → names: the summary reads the name. */
+channelNames?: ReadonlyMap<string, string>): string | null;
+/** `approvalArgsSummary` for a preview record already in hand (a Review
+ *  Center item's resolved or raw arguments). */
+export declare function previewArgsSummary(preview: Record<string, unknown> | null | undefined, channelNames?: ReadonlyMap<string, string>): string | null;
+/** The summary of the content Kortix resolved, else of the call's own
+ *  arguments. An empty resolved preview (`{}`) falls through. An email (the
+ *  resolved content merged over the arguments has a recipient) reads
+ *  `to · subject`, never the sender the server loaded. */
+export declare function reviewArgsSummary(resolvedPreview: Record<string, unknown> | null | undefined, argsPreview: Record<string, unknown> | null | undefined): string | null;
+/**
+ * Can a human actually judge this call from what we recorded?
+ *
+ * TRUNCATION IS NOT BLINDNESS. `reviewComplete` (server:
+ * `args_preview_complete`) goes false whenever the preview builder elided
+ * ANYTHING — an 11th recipient, a 96-char URL, a fourth nesting level, an
+ * attachment body — and every elision is written into the preview the human
+ * reads (`[+3 more]`, `[204800 chars omitted]`). Gating the decision on it made
+ * an ordinary "email this PDF" call permanently un-approvable: a disabled
+ * button beside a warning, with Deny as the only possible answer.
+ *
+ * Reviewability is the narrower question: is there anything to look at? A call
+ * that shows its parameters is decidable, elisions and all. One that shows none
+ * is not — and no approve path is offered for it, rather than a dead control.
+ *
+ * Content Kortix read from the provider (`resolvedPreview`) is reviewable on
+ * its own. Mirrors `approvalPreviewReviewable` in apps/api
+ * (connectors/args-preview.ts), which enforces the same rule on
+ * POST /approvals/:executionId.
+ */
+export declare function approvalReviewable(argsPreview: Record<string, unknown> | null | undefined, reviewComplete: boolean | undefined, resolvedPreview?: Record<string, unknown> | null): boolean;
+/** Row → the shape every approval surface renders. */
+export declare function approvalRequestFromAction(action: SessionAuditAction, pending?: boolean): ApprovalRequestData;
+/**
+ * Who besides a project manager decides this session's calls today: the
+ * person who started it (KRTX-1724). Null when that is not a person who can
+ * decide — a service account, or a backend wrapper whose `created_by` names
+ * nobody — or when the session row does not name its owner yet.
+ */
+export declare function approvalLauncherName(session: Pick<ProjectSession, 'owner_name' | 'owner_email' | 'owner_type' | 'origin'> | null | undefined): string | null;
+/** A decision this browser just made, kept so the card can confirm it in place. */
+export interface DecidedApproval {
+    /** Snapshot of the row as it was when the decision was taken. The audit poll
+     *  drops a resolved row entirely when the account has no historical audit
+     *  access, so the notice cannot re-read it from the query. */
+    action: SessionAuditAction;
+    decision: ApprovalDecisionValue;
+}
+export interface ApprovalNoticeRow {
+    action: SessionAuditAction;
+    /** Null while awaiting a decision; set once this browser resolved it. */
+    decision: ApprovalDecisionValue | null;
+}
+/**
+ * What the in-session notice renders: every unresolved approval, plus the ones
+ * this browser just decided (so the card confirms the outcome in place instead
+ * of vanishing mid-click). Newest first, matching the API's own ordering.
+ */
+export declare function approvalNoticeRows(actions: readonly SessionAuditAction[], decided: Readonly<Record<string, DecidedApproval>>): ApprovalNoticeRow[];
+/** Headline for the notice. `hint` is null once nothing is left to decide. */
+export declare function approvalNoticeHeadline(pendingCount: number, tI18nComplete: UiTranslator): {
+    title: string;
+    hint: string | null;
+};