@kortix/ui 0.14.3 → 0.14.4

package/dist/markdown/markdown-policy.js

@@ -0,0 +1,31 @@
+/**
+ * What the markdown renderer lets a piece of content do, decided by who wrote
+ * it and how it is shown. `UnifiedMarkdown` reads this and nothing else, so
+ * every caller states both facts and no rendering rule lives at a call site.
+ */
+const WRITER_RULES = {
+    trusted: { remoteImages: 'load', setupLinks: false },
+    agent: { remoteImages: 'load', setupLinks: true },
+    untrusted: { remoteImages: 'click-to-load', setupLinks: false },
+};
+const TRUST_LEVELS = Object.keys(WRITER_RULES);
+const VARIANTS = ['message', 'document'];
+/**
+ * One frozen object per (trust, variant). The renderer puts the policy in a
+ * context value and picks module-level plugin arrays from it; a stable
+ * identity keeps Streamdown from re-parsing every block on each render.
+ */
+const POLICIES = Object.fromEntries(TRUST_LEVELS.map((trust) => [
+    trust,
+    Object.fromEntries(VARIANTS.map((variant) => [
+        variant,
+        Object.freeze({
+            ...WRITER_RULES[trust],
+            rawHtml: variant === 'message',
+            fileLinks: trust === 'agent' && variant === 'message',
+        }),
+    ])),
+]));
+export function markdownPolicy(trust, variant = 'message') {
+    return POLICIES[trust][variant];
+}

package/dist/markdown/ordered-list.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+interface MarkerDigitsInput {
+    start?: number;
+    itemCount: number;
+    reversed?: boolean;
+}
+/**
+ * Characters in the widest ordinal the list paints, minus sign included.
+ * Mirrors the HTML list-item counter: `start` defaults to 1, or to the item
+ * count when the list is `reversed`.
+ */
+export declare function orderedListMarkerDigits({ start, itemCount, reversed, }: MarkerDigitsInput): number;
+/**
+ * The `ol` inline-start padding for markers of `digits` characters.
+ *
+ * `list-outside` markers hang in this padding, end-aligned to the text. A
+ * fixed `pl-6` (22.08px) holds `9. ` (16.3px at 15px Roobert, weight 500,
+ * tabular) but not `10. ` (25.7px), so the leading digit painted past the list
+ * edge and any `overflow-hidden` ancestor cut it. Each extra digit adds `1ch`:
+ * Roobert's `0` advance (0.632em) covers its tabular digit (0.630em), so the
+ * slack left of the widest marker stays ~5.8px at every digit count and scales
+ * with the font size. No spacing step can express a glyph-relative width.
+ */
+export declare function orderedListGutter(digits: number): string;
+interface MarkdownOrderedListProps {
+    children?: React.ReactNode;
+    start?: number | string;
+    reversed?: boolean;
+}
+export declare function MarkdownOrderedList({ children, start, reversed }: MarkdownOrderedListProps): React.JSX.Element;
+export {};

package/dist/markdown/ordered-list.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+/**
+ * Characters in the widest ordinal the list paints, minus sign included.
+ * Mirrors the HTML list-item counter: `start` defaults to 1, or to the item
+ * count when the list is `reversed`.
+ */
+export function orderedListMarkerDigits({ start, itemCount, reversed = false, }) {
+    const count = Math.max(itemCount, 1);
+    const first = start !== undefined && Number.isFinite(start) ? Math.trunc(start) : reversed ? count : 1;
+    const last = reversed ? first - count + 1 : first + count - 1;
+    return Math.max(String(first).length, String(last).length);
+}
+/**
+ * The `ol` inline-start padding for markers of `digits` characters.
+ *
+ * `list-outside` markers hang in this padding, end-aligned to the text. A
+ * fixed `pl-6` (22.08px) holds `9. ` (16.3px at 15px Roobert, weight 500,
+ * tabular) but not `10. ` (25.7px), so the leading digit painted past the list
+ * edge and any `overflow-hidden` ancestor cut it. Each extra digit adds `1ch`:
+ * Roobert's `0` advance (0.632em) covers its tabular digit (0.630em), so the
+ * slack left of the widest marker stays ~5.8px at every digit count and scales
+ * with the font size. No spacing step can express a glyph-relative width.
+ */
+export function orderedListGutter(digits) {
+    return `calc(var(--spacing) * 6 + ${Math.max(digits - 1, 0)}ch)`;
+}
+function parseStart(start) {
+    if (start === undefined)
+        return undefined;
+    const value = typeof start === 'string' ? Number.parseInt(start, 10) : start;
+    return Number.isFinite(value) ? value : undefined;
+}
+// The ordered-list renderer used by UnifiedMarkdown.
+export function MarkdownOrderedList({ children, start, reversed }) {
+    const startOrdinal = parseStart(start);
+    const itemCount = React.Children.toArray(children).filter(React.isValidElement).length;
+    const digits = orderedListMarkerDigits({ start: startOrdinal, itemCount, reversed });
+    return (_jsx("ol", { start: startOrdinal, reversed: reversed, className: "marker:text-muted-foreground/80 my-4 list-outside list-decimal space-y-1 marker:font-medium marker:tabular-nums first:mt-0 last:mb-0 [&_p]:mb-2 [&_p]:last:mb-0", style: { paddingInlineStart: orderedListGutter(digits) }, children: children }));
+}

package/dist/markdown/setup-link-blocks.d.ts

@@ -0,0 +1,32 @@
+/**
+ * The slice of an mdast node this transform reads. Declared here rather than
+ * imported from `@types/mdast`, which `apps/web` does not depend on.
+ */
+export interface MdNode {
+    type: string;
+    url?: string;
+    value?: string;
+    children?: MdNode[];
+}
+/**
+ * Lifts setup links out of the table or list an agent wrapped them in.
+ *
+ * Every setup link renders as a full-width card (`SetupLinkButton`). An agent
+ * asked for several apps reliably writes them as an `App | Link` table or a
+ * bullet list, so each card landed inside a table cell or behind a bullet, next
+ * to a column that repeated the app's name. The table added nothing the card did
+ * not already say.
+ *
+ * A table or list whose rows are ONLY a label and one setup link is replaced by
+ * a single paragraph of those links, which renders as a plain stack of cards —
+ * the same card a lone link gets. Anything carrying more than that (a reason
+ * column, a sentence of context, a row without a link) is left as written, and
+ * its links render inline (see `SetupLinkInlineContext`).
+ *
+ * Top-level blocks only: Streamdown hands each top-level block to the parser on
+ * its own, and a setup-link table nested in a blockquote is not a shape agents
+ * produce.
+ */
+export declare function liftSetupLinkBlocks(tree: MdNode): void;
+/** `liftSetupLinkBlocks` as a remark plugin. */
+export declare function remarkSetupLinkBlocks(): (tree: MdNode) => void;

package/dist/markdown/setup-link-blocks.js

@@ -0,0 +1,114 @@
+import { parsePendingSetupLinkHref, parseSetupLinkHref } from './setup-links/util.js';
+/**
+ * A row or item may carry a short label beside its link ("HubSpot", "**Canva**:")
+ * and still be nothing but a holder for that link. Past this length the text is
+ * content the author meant the reader to see, and the block stays as written.
+ */
+const MAX_LABEL_CHARS = 40;
+/** Separators an agent puts between a label and its link. */
+const LABEL_NOISE = /[\s:|–—\-•·*_()]+/g;
+function isSetupLink(node) {
+    return (node.type === 'link' &&
+        (parseSetupLinkHref(node.url) !== null || parsePendingSetupLinkHref(node.url) !== null));
+}
+/** Every setup link under `node`, and the plain text outside them. */
+function splitLinks(node) {
+    const links = [];
+    let text = '';
+    const walk = (current) => {
+        if (isSetupLink(current)) {
+            links.push(current);
+            return;
+        }
+        if (typeof current.value === 'string')
+            text += ` ${current.value}`;
+        current.children?.forEach(walk);
+    };
+    walk(node);
+    return { links, text: text.replace(LABEL_NOISE, ' ').trim() };
+}
+function textOf(node) {
+    if (typeof node.value === 'string')
+        return node.value;
+    return (node.children ?? []).map(textOf).join('');
+}
+/**
+ * The one setup link a row or item holds, relabelled by the text beside it when
+ * the link's own text does not name the app (`[Connect](…)`, or a bare URL whose
+ * text is the token). Null when the holder is more than a label and a link.
+ */
+function liftedLink(holder) {
+    const { links, text } = splitLinks(holder);
+    if (links.length !== 1 || text.length > MAX_LABEL_CHARS)
+        return null;
+    const [link] = links;
+    const own = textOf(link).trim();
+    const namesApp = text === '' || own.toLowerCase().includes(text.toLowerCase());
+    const looksLikeUrl = /^https?:\/\//i.test(own) || own.includes('/connect/');
+    if (text !== '' && (!namesApp || looksLikeUrl)) {
+        return { ...link, children: [{ type: 'text', value: text }] };
+    }
+    return link;
+}
+function liftTable(table) {
+    const rows = (table.children ?? []).slice(1);
+    if (rows.length === 0)
+        return null;
+    const lifted = [];
+    for (const row of rows) {
+        // A second non-empty cell beside the label is data (a reason, a scope), and
+        // lifting would drop it.
+        const cellsWithText = (row.children ?? []).filter((cell) => splitLinks(cell).links.length === 0 && textOf(cell).trim() !== '');
+        if (cellsWithText.length > 1)
+            return null;
+        const link = liftedLink(row);
+        if (!link)
+            return null;
+        lifted.push(link);
+    }
+    return lifted;
+}
+function liftList(list) {
+    const items = list.children ?? [];
+    if (items.length === 0)
+        return null;
+    const lifted = [];
+    for (const item of items) {
+        const link = liftedLink(item);
+        if (!link)
+            return null;
+        lifted.push(link);
+    }
+    return lifted;
+}
+/**
+ * Lifts setup links out of the table or list an agent wrapped them in.
+ *
+ * Every setup link renders as a full-width card (`SetupLinkButton`). An agent
+ * asked for several apps reliably writes them as an `App | Link` table or a
+ * bullet list, so each card landed inside a table cell or behind a bullet, next
+ * to a column that repeated the app's name. The table added nothing the card did
+ * not already say.
+ *
+ * A table or list whose rows are ONLY a label and one setup link is replaced by
+ * a single paragraph of those links, which renders as a plain stack of cards —
+ * the same card a lone link gets. Anything carrying more than that (a reason
+ * column, a sentence of context, a row without a link) is left as written, and
+ * its links render inline (see `SetupLinkInlineContext`).
+ *
+ * Top-level blocks only: Streamdown hands each top-level block to the parser on
+ * its own, and a setup-link table nested in a blockquote is not a shape agents
+ * produce.
+ */
+export function liftSetupLinkBlocks(tree) {
+    if (!tree.children)
+        return;
+    tree.children = tree.children.map((block) => {
+        const links = block.type === 'table' ? liftTable(block) : block.type === 'list' ? liftList(block) : null;
+        return links ? { type: 'paragraph', children: links } : block;
+    });
+}
+/** `liftSetupLinkBlocks` as a remark plugin. */
+export function remarkSetupLinkBlocks() {
+    return (tree) => liftSetupLinkBlocks(tree);
+}

package/dist/markdown/setup-links/api-base.d.ts

@@ -0,0 +1,2 @@
+/** API base (already includes the /v1 suffix), e.g. https://api.kortix.com/v1. */
+export declare function setupLinkApiBase(): string;

package/dist/markdown/setup-links/api-base.js

@@ -0,0 +1,5 @@
+import { platformConfig, stripTrailingSlashes } from '@kortix/sdk';
+/** API base (already includes the /v1 suffix), e.g. https://api.kortix.com/v1. */
+export function setupLinkApiBase() {
+    return stripTrailingSlashes(platformConfig().backendUrl || 'http://localhost:8008/v1');
+}

package/dist/markdown/setup-links/approval-decision.d.ts

@@ -0,0 +1,72 @@
+import { type ApprovalDecisionValue, type ApprovalResolvers } from '../../session/prompts/approval-request.js';
+import { type ApprovalLinkDetails } from '@kortix/sdk';
+/**
+ * Who the call goes to and what it does, as people read them: the connector's
+ * display name ("Gmail", never the slug), the action ("Send email") and the
+ * logo. The decision panel header and the bulk Approve confirm share it.
+ */
+export declare function approvalIdentity(details: ApprovalLinkDetails): {
+    connector: string | null;
+    action: string | null;
+    iconUrl: string | null;
+};
+/**
+ * The standalone approval screen: the decision panel (`ApprovalDecisionPanel`)
+ * in a bordered card, or, once decided, the same card with its outcome.
+ */
+export declare function ApprovalDecision({ token }: {
+    token: string;
+}): import("react").JSX.Element;
+/**
+ * Every state of the approval screen, as a function of what was loaded and
+ * what was decided. No fetching, so each state renders in a test:
+ * loading, cannot open, pending decision, unreviewable, approved, denied.
+ */
+export declare function ApprovalDecisionView({ loading, details, outcome, busyDecision, error, onDecision, onOpenSession, }: {
+    loading: boolean;
+    details: ApprovalLinkDetails | null;
+    /** A decision made on this screen; it outlives the refetch. */
+    outcome: ApprovalDecisionValue | null;
+    busyDecision: ApprovalDecisionValue | null;
+    error: string | null;
+    onDecision: (decision: ApprovalDecisionValue, note?: string) => void;
+    onOpenSession?: () => void;
+}): import("react").JSX.Element;
+/** What the expiry chip says for `msLeft`, and whether it warns (< 6 h). */
+export declare function expiryChip(msLeft: number): {
+    key: 'leftDays' | 'leftHours' | 'leftHoursMinutes' | 'leftMinutes';
+    values: Record<string, number>;
+    warn: boolean;
+};
+/**
+ * The approval itself, without the page frame: the standalone page wraps it in
+ * a bordered card inside `AuthFrame`; the Review Center opens the same panel in
+ * `ApprovalDecisionModal`, so a call reads and decides the same way on both.
+ *
+ * Top to bottom (Paper V01, sentence-first): the connector and action with the
+ * time left; one plain sentence of what the agent wants; the agent's own
+ * description as a quotation; the call as the app shows it (an email, a pull
+ * request, an issue, or the key/value list); the access it needs and who asked;
+ * then the note and the two decisions. The tool id stays on the header as its
+ * tooltip.
+ *
+ * No `onDecision` = read-only: the viewer may see the call but not decide it.
+ * A pending call then says who decides (`resolvers`, KRTX-1724).
+ */
+export declare function ApprovalDecisionPanel({ details, outcome, busyDecision, error, onDecision, onOpenSession, previewAuthorized, resolvers, agentName, sessionTitle, }: {
+    details: ApprovalLinkDetails;
+    outcome: ApprovalDecisionValue | null;
+    busyDecision: ApprovalDecisionValue | null;
+    error: string | null;
+    onDecision?: (decision: ApprovalDecisionValue, note?: string) => void;
+    /** Opens the session that asked for the call. */
+    onOpenSession?: () => void;
+    /** False when this viewer may not see the call's arguments at all. */
+    previewAuthorized?: boolean;
+    /** Who decides the call, for a viewer who may not. Null: the plain wording. */
+    resolvers?: ApprovalResolvers | null;
+    /** The agent that asked. Null: "An agent". */
+    agentName?: string | null;
+    /** The session that asked, by its title. Null: not named. */
+    sessionTitle?: string | null;
+}): import("react").JSX.Element;

package/dist/markdown/setup-links/approval-decision.js

@@ -0,0 +1,322 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { uiRoutes } from '../../lib/routes.js';
+import { ApprovalAgentContext, ApprovalDecisionActions, ApprovalParameters, ApprovalWaitingNotice, approvalReviewable, approvalSubject, approvalVerb, resolvedLabel, resolvedTone, useIssuePriorityWord, } from '../../session/prompts/approval-request.js';
+import { Button } from '../../primitives/button.js';
+import { cn } from '../../lib/utils.js';
+import { Alert, AlertDescription } from '../../primitives/alert.js';
+import { Skeleton } from '../../primitives/skeleton.js';
+import { errorToast, successToast } from '../../primitives/toast.js';
+import { AuthFrame } from '../../internal/auth/auth-card-shell.js';
+import { OutcomeTitle } from '../../internal/auth/auth-consent.js';
+import { Rise, StepHeader } from '../../internal/auth/auth-primitives.js';
+import { useTranslations } from '../../i18n/index.js';
+import { getApprovalLink, resolveApproval } from '@kortix/sdk';
+import { CheckCircleIcon, ClockIcon, EyeIcon, MinusCircleIcon, PencilSimpleIcon, UserIcon, WarningIcon, XCircleIcon, } from '@phosphor-icons/react';
+import { UiLink as Link, useUiRouter } from '../../providers/ui-provider.js';
+import { useEffect, useState } from 'react';
+import { isApprovalExpiredError } from '../../internal/lib/approval-expired.js';
+import { ConnectorAppMark } from './connector-handshake.js';
+/** `github.merge_pull_request` → "Merge pull request". Null when the action has no readable tail. */
+function actionLabel(action) {
+    const tail = action.includes('.') ? action.slice(action.lastIndexOf('.') + 1) : '';
+    const words = tail.replace(/[_-]+/g, ' ').trim();
+    return words ? words.charAt(0).toUpperCase() + words.slice(1) : null;
+}
+/**
+ * The connector's logo. The API sends the connector's own (`connector_icon_url`),
+ * which is right for every connector in the catalogue. An older server sends
+ * none; the catalogue URL guessed from the slug then stands in, and a slug the
+ * catalogue does not know fails to load and leaves the connector's first letter.
+ */
+function connectorLogoUrl(details) {
+    if (details.connector_icon_url !== undefined)
+        return details.connector_icon_url;
+    return details.connector
+        ? `https://logos.composio.dev/api/${encodeURIComponent(details.connector)}`
+        : null;
+}
+/**
+ * Who the call goes to and what it does, as people read them: the connector's
+ * display name ("Gmail", never the slug), the action ("Send email") and the
+ * logo. The decision panel header and the bulk Approve confirm share it.
+ */
+export function approvalIdentity(details) {
+    return {
+        connector: details.connector_name ??
+            (details.connector ? details.connector.charAt(0).toUpperCase() + details.connector.slice(1) : null),
+        action: actionLabel(details.action),
+        iconUrl: connectorLogoUrl(details),
+    };
+}
+/**
+ * The standalone approval screen: the decision panel (`ApprovalDecisionPanel`)
+ * in a bordered card, or, once decided, the same card with its outcome.
+ */
+export function ApprovalDecision({ token }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const tHardcodedUi = useTranslations('hardcodedUi');
+    const router = useUiRouter();
+    const [details, setDetails] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [busyDecision, setBusyDecision] = useState(null);
+    const [outcome, setOutcome] = useState(null);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        let cancelled = false;
+        void getApprovalLink(token)
+            .then((body) => {
+            if (!cancelled)
+                setDetails(body);
+        })
+            .catch((cause) => {
+            if (!cancelled) {
+                setError(cause instanceof Error ? cause.message : 'Could not load this approval.');
+            }
+        })
+            .finally(() => {
+            if (!cancelled)
+                setLoading(false);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [token]);
+    async function decide(decision, note) {
+        if (!details)
+            return;
+        setBusyDecision(decision);
+        setError(null);
+        try {
+            await resolveApproval(details.project_id, details.execution_id, decision, { note });
+            setOutcome(decision);
+            setDetails((current) => (current ? { ...current, pending: false } : current));
+            // Compared against the value, not a catalogue string: in a locale
+            // that translates "approve", every approval toasted "Action denied".
+            const approved = decision === 'approve';
+            successToast(approved ? tI18nComplete.raw('text0674d4a026cb') : tI18nComplete.raw('text4341be8eb7f0'));
+        }
+        catch (cause) {
+            if (isApprovalExpiredError(cause)) {
+                // The panel turns to its expired state; the toast says why nothing ran.
+                setDetails((current) => current ? { ...current, pending: false, status: 'expired' } : current);
+                errorToast(tHardcodedUi('approvalPage.expiredHint'));
+                return;
+            }
+            const message = cause instanceof Error ? cause.message : 'Could not record your decision.';
+            setError(message);
+            errorToast(message);
+        }
+        finally {
+            setBusyDecision(null);
+        }
+    }
+    const sessionHref = details?.session_id
+        ? uiRoutes().session(details.project_id, details.session_id)
+        : null;
+    return (_jsx(ApprovalDecisionView, { loading: loading, details: details, outcome: outcome, busyDecision: busyDecision, error: error, onDecision: decide, onOpenSession: sessionHref ? () => router.push(sessionHref) : undefined }));
+}
+/**
+ * Every state of the approval screen, as a function of what was loaded and
+ * what was decided. No fetching, so each state renders in a test:
+ * loading, cannot open, pending decision, unreviewable, approved, denied.
+ */
+export function ApprovalDecisionView({ loading, details, outcome, busyDecision, error, onDecision, onOpenSession, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    if (loading) {
+        // The shape of the screen that is coming, so the panel and the two
+        // decisions do not jump in under a spinner.
+        return (_jsx(AuthFrame, { footerVariant: "none", children: _jsxs("div", { role: "status", "aria-label": tI18nComplete.raw('textdc380888c4e2'), children: [_jsxs("div", { className: "mb-10", children: [_jsx(Skeleton, { className: "hidden h-10 w-28 py-0 md:block" }), _jsx(Skeleton, { className: "h-8 w-3/4 py-0 md:mt-6" }), _jsx(Skeleton, { className: "mt-3 h-4 w-full py-0" })] }), _jsxs("div", { className: "space-y-5", children: [_jsx(Skeleton, { className: "h-40 w-full py-0" }), _jsx(Skeleton, { className: "h-24 w-full py-0" }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Skeleton, { className: "h-9 flex-1 py-0" }), _jsx(Skeleton, { className: "h-9 flex-1 py-0" })] })] })] }) }));
+    }
+    if (!details) {
+        return (_jsxs(AuthFrame, { footerVariant: "none", children: [_jsx(Rise, { children: _jsx(StepHeader, { title: _jsx(OutcomeTitle, { tone: "muted", children: tI18nComplete.raw('text4c05fac320dc') }), description: error ?? tI18nComplete.raw('text301fe0058472') }) }), _jsx(Rise, { delay: 0.06, children: _jsx(Button, { size: "lg", variant: "secondary", className: "w-full", asChild: true, children: _jsx(Link, { href: "/", children: tI18nComplete.raw('text5fae82827f98') }) }) })] }));
+    }
+    return (_jsx(AuthFrame, { footerVariant: "none", children: _jsx("div", { className: "border-border overflow-hidden rounded-xl border", children: _jsx(ApprovalDecisionPanel, { details: details, outcome: outcome, busyDecision: busyDecision, error: error, onDecision: onDecision, onOpenSession: onOpenSession }) }) }));
+}
+/** Below this much time left, the expiry chip turns to the warning tone. */
+const EXPIRY_WARN_MS = 6 * 60 * 60 * 1000;
+/** What the expiry chip says for `msLeft`, and whether it warns (< 6 h). */
+export function expiryChip(msLeft) {
+    const minutes = Math.max(0, Math.floor(msLeft / 60_000));
+    const hours = Math.floor(minutes / 60);
+    const warn = msLeft < EXPIRY_WARN_MS;
+    if (hours >= 48)
+        return { key: 'leftDays', values: { days: Math.floor(hours / 24) }, warn };
+    if (hours >= 6)
+        return { key: 'leftHours', values: { hours }, warn };
+    if (hours >= 1) {
+        return {
+            key: 'leftHoursMinutes',
+            values: { hours, minutes: minutes % 60 },
+            warn,
+        };
+    }
+    return { key: 'leftMinutes', values: { minutes }, warn };
+}
+const clockFormat = new Intl.DateTimeFormat(undefined, {
+    hour: '2-digit',
+    minute: '2-digit',
+});
+const dateFormat = new Intl.DateTimeFormat(undefined, {
+    dateStyle: 'medium',
+    timeStyle: 'short',
+});
+function sameDay(left, right) {
+    return (left.getFullYear() === right.getFullYear() &&
+        left.getMonth() === right.getMonth() &&
+        left.getDate() === right.getDate());
+}
+/** The time now, refreshed every 30 s so the chip counts down while the panel is open. */
+function useClock() {
+    const [now, setNow] = useState(() => Date.now());
+    useEffect(() => {
+        const id = setInterval(() => setNow(Date.now()), 30_000);
+        return () => clearInterval(id);
+    }, []);
+    return now;
+}
+/** A pill at the header's trailing edge: the time left, or the outcome. The words stay ink. */
+function HeaderChip({ warn = false, icon, children, }) {
+    return (_jsxs("span", { className: cn('text-foreground flex shrink-0 items-center gap-1.5 rounded-full py-1 pr-2.5 pl-2 text-xs font-medium tabular-nums', warn ? 'bg-kortix-orange/15' : 'bg-muted'), children: [icon, children] }));
+}
+/** One fact under the preview: a 16 px glyph slot and one line. */
+function FactRow({ icon, muted = false, children, }) {
+    return (_jsxs("div", { className: "flex items-start gap-2", children: [_jsx("span", { className: "flex h-5 w-4 shrink-0 items-center justify-center", children: icon }), _jsx("p", { className: cn('min-w-0 text-xs leading-5 text-pretty', muted ? 'text-muted-foreground' : 'text-foreground'), children: children })] }));
+}
+/**
+ * The approval itself, without the page frame: the standalone page wraps it in
+ * a bordered card inside `AuthFrame`; the Review Center opens the same panel in
+ * `ApprovalDecisionModal`, so a call reads and decides the same way on both.
+ *
+ * Top to bottom (Paper V01, sentence-first): the connector and action with the
+ * time left; one plain sentence of what the agent wants; the agent's own
+ * description as a quotation; the call as the app shows it (an email, a pull
+ * request, an issue, or the key/value list); the access it needs and who asked;
+ * then the note and the two decisions. The tool id stays on the header as its
+ * tooltip.
+ *
+ * No `onDecision` = read-only: the viewer may see the call but not decide it.
+ * A pending call then says who decides (`resolvers`, KRTX-1724).
+ */
+export function ApprovalDecisionPanel({ details, outcome, busyDecision, error, onDecision, onOpenSession, previewAuthorized = true, resolvers = null, agentName = null, sessionTitle = null, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const tHardcodedUi = useTranslations('hardcodedUi');
+    const t = useTranslations('hardcodedUi.approvalPage');
+    const priorityWord = useIssuePriorityWord();
+    const now = useClock();
+    const expiresAt = Date.parse(details.expires_at);
+    // The server says `expired` once the window closed. A row read before that
+    // still offers the decision; the API then answers 409 APPROVAL_EXPIRED.
+    const expired = outcome === null && details.status === 'expired';
+    const resolved = !details.pending || outcome !== null || expired;
+    const waiting = !resolved && !onDecision;
+    const reviewable = approvalReviewable(details.args_preview, details.review_complete, details.resolved_preview);
+    const label = resolvedLabel({
+        status: expired ? 'expired' : details.status,
+        resolution: !details.pending && details.status === 'ok'
+            ? 'approve'
+            : !details.pending && details.status === 'denied'
+                ? 'deny'
+                : null,
+    }, outcome);
+    const readable = actionLabel(details.action);
+    const hasParameters = !!details.args_preview && Object.keys(details.args_preview).length > 0;
+    const hasLoaded = !!details.resolved_preview && Object.keys(details.resolved_preview).length > 0;
+    // `ApprovalParameters` renders nothing for a call that recorded nothing and
+    // loaded nothing; the facts then follow the header with no second gap.
+    const showsPreview = hasParameters || (hasLoaded && previewAuthorized);
+    const connectorName = approvalIdentity(details).connector;
+    const agent = agentName?.trim() || null;
+    const subject = approvalSubject(details.action, details.args_preview, details.resolved_preview ?? null);
+    const who = agent ?? t('anAgent');
+    const headline = subject.kind === 'email'
+        ? subject.others > 0
+            ? t('wantsEmailOthers', {
+                agent: who,
+                recipient: subject.recipient,
+                count: subject.others,
+            })
+            : t('wantsEmail', { agent: who, recipient: subject.recipient })
+        : subject.kind === 'merge'
+            ? subject.base
+                ? t('wantsMerge', {
+                    agent: who,
+                    number: subject.number,
+                    base: subject.base,
+                })
+                : t('wantsMergePr', { agent: who, number: subject.number })
+            : subject.kind === 'issue'
+                ? (() => {
+                    const priority = priorityWord(subject.priority);
+                    return t('wantsIssue', {
+                        agent: who,
+                        article: /^[aeiou]/i.test(priority) ? 'an' : 'a',
+                        priority,
+                        team: subject.team,
+                    });
+                })()
+                : subject.kind === 'newIssue'
+                    ? t('wantsCreateIssue', { agent: who })
+                    : readable
+                        ? t('wantsAction', { agent: who, action: readable.toLowerCase() })
+                        : t('wantsCall', { agent: who, action: details.action });
+    const verb = approvalVerb(details.action);
+    const approveLabel = verb === 'send'
+        ? t('approveSend')
+        : verb === 'merge'
+            ? t('approveMerge')
+            : verb === 'create'
+                ? t('approveCreate')
+                : t('approve');
+    // The chip counts down only while the call can still be decided.
+    const live = details.pending && outcome === null && !expired && Number.isFinite(expiresAt);
+    let chip = null;
+    if (resolved) {
+        const tone = resolvedTone(label);
+        const Mark = tone === 'success' ? CheckCircleIcon : tone === 'destructive' ? XCircleIcon : MinusCircleIcon;
+        const words = label === 'Approved'
+            ? tI18nComplete.raw('text0674d4a026cb')
+            : label === 'Denied'
+                ? tI18nComplete.raw('text4341be8eb7f0')
+                : label === 'Expired'
+                    ? tI18nComplete.raw('text424a2551d356')
+                    : label;
+        chip = (_jsx(HeaderChip, { icon: _jsx(Mark, { weight: "fill", "aria-hidden": true, className: cn('size-3.5 shrink-0', tone === 'success'
+                    ? 'text-kortix-green'
+                    : tone === 'destructive'
+                        ? 'text-kortix-red'
+                        : 'text-muted-foreground') }), children: words }));
+    }
+    else if (live) {
+        const left = expiryChip(expiresAt - now);
+        chip = (_jsx(HeaderChip, { warn: left.warn, icon: _jsx(ClockIcon, { "aria-hidden": true, className: cn('size-3.5 shrink-0', left.warn ? 'text-kortix-orange' : 'text-muted-foreground') }), children: t(left.key, left.values) }));
+    }
+    const expiresWhen = (() => {
+        if (!live)
+            return null;
+        const at = new Date(expiresAt);
+        const today = new Date(now);
+        const tomorrow = new Date(now);
+        tomorrow.setDate(tomorrow.getDate() + 1);
+        if (sameDay(at, today))
+            return t('today', { time: clockFormat.format(at) });
+        if (sameDay(at, tomorrow))
+            return t('tomorrow', { time: clockFormat.format(at) });
+        return dateFormat.format(at);
+    })();
+    const askedAgent = agent ?? t('anAgentLower');
+    const sessionWords = sessionTitle?.trim() || (onOpenSession ? t('thisSession') : null);
+    const asked = sessionWords
+        ? t.rich('askedByIn', {
+            agent: askedAgent,
+            title: sessionWords,
+            session: (chunks) => onOpenSession ? (_jsx("button", { type: "button", onClick: onOpenSession, className: "text-foreground underline-offset-2 transition-colors hover:underline", children: chunks })) : (chunks),
+        })
+        : t('askedBy', { agent: askedAgent });
+    const risk = details.risk === 'destructive' ? (_jsx(FactRow, { icon: _jsx(WarningIcon, { "aria-hidden": true, className: "text-kortix-red size-4" }), children: t('riskDestructive') })) : details.risk === 'write' ? (_jsx(FactRow, { icon: _jsx(PencilSimpleIcon, { "aria-hidden": true, className: "text-foreground size-4" }), children: t('riskWrite', { action: (readable ?? details.action).toLowerCase() }) })) : details.risk === 'read' ? (_jsx(FactRow, { icon: _jsx(EyeIcon, { "aria-hidden": true, className: "text-foreground size-4" }), children: t('riskRead') })) : null;
+    const decidable = details.pending && !resolved && !!onDecision;
+    const footer = error || expired || decidable || waiting;
+    return (_jsxs(Rise, { children: [_jsxs("div", { className: "flex flex-col gap-3 px-5 pt-5 pb-4", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-3", title: details.action, children: [_jsx(ConnectorAppMark, { name: connectorName ?? details.action, iconUrl: connectorLogoUrl(details), size: "md" }), _jsxs("div", { className: "flex min-w-0 flex-col", children: [_jsx("p", { className: "text-foreground truncate text-sm leading-5 font-medium", children: connectorName ?? readable ?? details.action }), connectorName ? (_jsx("p", { className: "text-muted-foreground truncate text-xs leading-4", children: readable ?? details.action })) : null] })] }), chip] }), _jsx("h2", { className: "text-foreground text-xl leading-snug font-semibold wrap-anywhere", children: headline }), _jsx(ApprovalAgentContext, { quote: true, context: details.approval_context })] }), showsPreview ? (_jsx("div", { className: "px-5", children: _jsx(ApprovalParameters, { native: true, action: details.action, argsPreview: details.args_preview, reviewComplete: details.review_complete !== false, resolvedPreview: details.resolved_preview, resolvedError: details.resolved_error, className: "overflow-hidden rounded-lg border" }) })) : null, _jsxs("div", { className: cn('flex flex-col gap-2 px-5 pb-4', showsPreview && 'pt-4'), children: [risk, _jsxs(FactRow, { muted: true, icon: _jsx(UserIcon, { "aria-hidden": true, className: "text-muted-foreground size-4" }), children: [asked, expiresWhen ? ` · ${t('expiresAt', { when: expiresWhen })}` : null] })] }), footer ? (_jsxs("div", { className: "border-border flex flex-col gap-3 border-t px-5 pt-4 pb-5", children: [error ? (_jsx(Alert, { variant: "destructive", children: _jsx(AlertDescription, { children: error }) })) : null, expired ? (_jsxs(_Fragment, { children: [_jsx(Alert, { children: _jsx(AlertDescription, { children: tHardcodedUi('approvalPage.expiredHint') }) }), onDecision ? (_jsx(ApprovalDecisionActions, { onDecision: onDecision, disabled: true, sessionId: details.session_id, notePlaceholder: agent ? t('notePlaceholder', { agent }) : t('notePlaceholderAgent'), approveLabel: approveLabel, noteMinHeight: 80, className: "border-0 p-0" })) : null] })) : decidable && onDecision ? (_jsxs(_Fragment, { children: [reviewable ? null : (_jsx(Alert, { variant: "warning", children: _jsx(AlertDescription, { children: previewAuthorized
+                                        ? tI18nComplete.raw('text7c4a3e7e2251')
+                                        : tI18nComplete.raw('textf7873b149941') }) })), _jsx(ApprovalDecisionActions, { onDecision: onDecision, busyDecision: busyDecision, approvable: reviewable, sessionId: details.session_id, notePlaceholder: agent ? t('notePlaceholder', { agent }) : t('notePlaceholderAgent'), approveLabel: approveLabel, noteMinHeight: 80, className: "border-0 p-0" })] })) : waiting ? (_jsx(ApprovalWaitingNotice, { dense: true, resolvers: resolvers })) : null] })) : null] }));
+}