@agent-native/toolkit 0.198.2 → 0.198.3-nightly-20260930124743

package/dist/app/observability/RunInsights.js

@@ -0,0 +1,658 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { requestAgentChatThreadOpen } from "@agent-native/core/client/agent-chat";
+import { useActionQuery } from "@agent-native/core/client/hooks";
+import { useT } from "@agent-native/core/client/i18n";
+import { Skeleton } from "@agent-native/toolkit/design-system";
+import { Button } from "@agent-native/toolkit/ui/button";
+import { Sheet, SheetContent, SheetDescription, SheetTitle, } from "@agent-native/toolkit/ui/sheet";
+import { IconAlertTriangle, IconChevronDown, IconChevronUp, IconCircleCheck, IconCircleX, IconInfoCircle, IconMessages, IconPigMoney, IconThumbDown, IconThumbUp, IconX, } from "@tabler/icons-react";
+import { useEffect, useMemo, useState } from "react";
+// Apps don't share chart tokens, and this set is checked for colour-blind separation in both themes.
+const LIGHT_PALETTE = 
+// guard:allow-raw-color — validated categorical palette, light surface
+"--usage-cache-read: #2a78d6; --usage-cache-write: #eb6834; --usage-fresh-input: #1baf7a; --usage-output: #eda100;";
+const DARK_PALETTE = 
+// guard:allow-raw-color — same palette stepped for the dark surface
+"--usage-cache-read: #3987e5; --usage-cache-write: #d95926; --usage-fresh-input: #199e70; --usage-output: #c98500;";
+const PALETTE_CSS = `.run-insights, .run-insights-panel { ${LIGHT_PALETTE} } .dark .run-insights, .dark .run-insights-panel { ${DARK_PALETTE} }`;
+const WRITE_VERBS = new Set([
+    "add",
+    "apply",
+    "create",
+    "delete",
+    "duplicate",
+    "edit",
+    "export",
+    "generate",
+    "insert",
+    "move",
+    "remove",
+    "rename",
+    "save",
+    "send",
+    "set",
+    "update",
+    "upload",
+    "write",
+]);
+function verbLabel(t, verb, object) {
+    const labels = {
+        add: () => t("agentChat.observability.insights.toolVerb.add", { object }),
+        analyze: () => t("agentChat.observability.insights.toolVerb.analyze", { object }),
+        apply: () => t("agentChat.observability.insights.toolVerb.apply", { object }),
+        capture: () => t("agentChat.observability.insights.toolVerb.capture", { object }),
+        check: () => t("agentChat.observability.insights.toolVerb.check", { object }),
+        connect: () => t("agentChat.observability.insights.toolVerb.connect", { object }),
+        consume: () => t("agentChat.observability.insights.toolVerb.read", { object }),
+        create: () => t("agentChat.observability.insights.toolVerb.create", { object }),
+        delete: () => t("agentChat.observability.insights.toolVerb.delete", { object }),
+        duplicate: () => t("agentChat.observability.insights.toolVerb.duplicate", { object }),
+        edit: () => t("agentChat.observability.insights.toolVerb.edit", { object }),
+        export: () => t("agentChat.observability.insights.toolVerb.export", { object }),
+        fetch: () => t("agentChat.observability.insights.toolVerb.fetch", { object }),
+        find: () => t("agentChat.observability.insights.toolVerb.find", { object }),
+        generate: () => t("agentChat.observability.insights.toolVerb.generate", { object }),
+        get: () => t("agentChat.observability.insights.toolVerb.read", { object }),
+        index: () => t("agentChat.observability.insights.toolVerb.index", { object }),
+        insert: () => t("agentChat.observability.insights.toolVerb.insert", { object }),
+        list: () => t("agentChat.observability.insights.toolVerb.list", { object }),
+        move: () => t("agentChat.observability.insights.toolVerb.move", { object }),
+        navigate: () => t("agentChat.observability.insights.toolVerb.navigate", { object }),
+        open: () => t("agentChat.observability.insights.toolVerb.open", { object }),
+        present: () => t("agentChat.observability.insights.toolVerb.present", { object }),
+        propose: () => t("agentChat.observability.insights.toolVerb.propose", { object }),
+        query: () => t("agentChat.observability.insights.toolVerb.query", { object }),
+        read: () => t("agentChat.observability.insights.toolVerb.read", { object }),
+        remove: () => t("agentChat.observability.insights.toolVerb.remove", { object }),
+        rename: () => t("agentChat.observability.insights.toolVerb.rename", { object }),
+        reply: () => t("agentChat.observability.insights.toolVerb.reply", { object }),
+        resolve: () => t("agentChat.observability.insights.toolVerb.resolve", { object }),
+        run: () => t("agentChat.observability.insights.toolVerb.run", { object }),
+        save: () => t("agentChat.observability.insights.toolVerb.save", { object }),
+        search: () => t("agentChat.observability.insights.toolVerb.search", { object }),
+        send: () => t("agentChat.observability.insights.toolVerb.send", { object }),
+        set: () => t("agentChat.observability.insights.toolVerb.set", { object }),
+        take: () => t("agentChat.observability.insights.toolVerb.take", { object }),
+        update: () => t("agentChat.observability.insights.toolVerb.update", { object }),
+        upload: () => t("agentChat.observability.insights.toolVerb.upload", { object }),
+        view: () => t("agentChat.observability.insights.toolVerb.view", { object }),
+        write: () => t("agentChat.observability.insights.toolVerb.write", { object }),
+    };
+    return labels[verb]?.() ?? null;
+}
+function toolWords(name) {
+    return name
+        .replace(/^mcp__[^_]+__/, "")
+        .split(/[-_]/)
+        .filter(Boolean);
+}
+function toolVerb(name) {
+    const words = toolWords(name);
+    if (WRITE_VERBS.has(words[0]) || READ_VERBS.has(words[0]))
+        return words[0];
+    const last = words.at(-1);
+    if (WRITE_VERBS.has(last) || READ_VERBS.has(last))
+        return last;
+    return null;
+}
+const READ_VERBS = new Set([
+    "analyze",
+    "capture",
+    "check",
+    "connect",
+    "consume",
+    "fetch",
+    "find",
+    "get",
+    "index",
+    "list",
+    "navigate",
+    "open",
+    "present",
+    "propose",
+    "query",
+    "read",
+    "reply",
+    "resolve",
+    "run",
+    "search",
+    "take",
+    "view",
+]);
+/** "edit-design" → "Edited design", "docs-search" → "Searched docs". */
+function humanizeTool(t, name) {
+    if (name === "tool-search") {
+        return t("agentChat.observability.insights.lookedForTools");
+    }
+    const words = toolWords(name);
+    const verb = toolVerb(name);
+    if (!verb)
+        return words.join(" ");
+    const object = (words[0] === verb ? words.slice(1) : words.slice(0, -1)).join(" ");
+    return verbLabel(t, verb, object) ?? words.join(" ");
+}
+function toolNoun(name) {
+    return toolWords(name).join(" ");
+}
+function listTools(t, tools) {
+    return tools
+        .map((tool) => tool.calls > 1
+        ? t("agentChat.observability.insights.timesCount", {
+            label: humanizeTool(t, tool.name),
+            count: tool.calls,
+        })
+        : humanizeTool(t, tool.name))
+        .join(", ");
+}
+function outcomeLine(t, tools) {
+    const writes = tools.filter((tool) => WRITE_VERBS.has(toolVerb(tool.name) ?? "") && tool.calls > tool.failed);
+    if (writes.length === 0)
+        return null;
+    return listTools(t, writes.slice(0, 4));
+}
+function turnLabel(t, turn, isLast) {
+    if (turn.toolCalls.length === 0) {
+        return isLast
+            ? t("agentChat.observability.insights.turnReply")
+            : t("agentChat.observability.insights.turnThought");
+    }
+    const counts = new Map();
+    for (const call of turn.toolCalls) {
+        counts.set(call.name, (counts.get(call.name) ?? 0) + 1);
+    }
+    return listTools(t, [...counts].map(([name, calls]) => ({ name, calls })));
+}
+function formatUsd(cents) {
+    if (cents <= 0)
+        return "$0";
+    if (cents < 1)
+        return "<1¢";
+    if (cents < 100)
+        return `${Math.round(cents)}¢`;
+    return `$${(cents / 100).toLocaleString(undefined, {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2,
+    })}`;
+}
+function formatDuration(ms) {
+    if (ms < 1000)
+        return `${Math.max(1, Math.round(ms))}ms`;
+    if (ms < 60_000)
+        return `${(ms / 1000).toFixed(1)}s`;
+    return `${Math.floor(ms / 60_000)}m ${Math.round((ms % 60_000) / 1000)}s`;
+}
+function formatTime(ms) {
+    return new Date(ms).toLocaleString(undefined, {
+        month: "short",
+        day: "numeric",
+        hour: "numeric",
+        minute: "2-digit",
+    });
+}
+function compactTokens(value) {
+    if (value >= 1_000_000)
+        return `${(value / 1_000_000).toFixed(1)}M`;
+    if (value >= 1_000)
+        return `${(value / 1_000).toFixed(1)}K`;
+    return Math.round(value).toLocaleString();
+}
+function percent(part, whole) {
+    return whole > 0 ? Math.round((part / whole) * 100) : 0;
+}
+/** Restarts worth mentioning: at least 10% of what the prompt cost. */
+function notableRestart(run) {
+    return (run.restarts.cents > 0 &&
+        run.restarts.cents >= run.cost.estimatedCents * 0.1);
+}
+function failedTools(run) {
+    return run.tools.filter((tool) => tool.failed > 0);
+}
+function mainRestartCause(run) {
+    const { byCause } = run.restarts;
+    return byCause["tool-lookup"].cents >= byCause["prefix-changed"].cents
+        ? "tool-lookup"
+        : "prefix-changed";
+}
+function restartReason(t, cause) {
+    return cause === "tool-lookup"
+        ? t("agentChat.observability.insights.reasonToolLookup")
+        : t("agentChat.observability.insights.reasonPrefixChanged");
+}
+function restartFix(t, cause) {
+    return cause === "tool-lookup"
+        ? t("agentChat.observability.insights.fixToolLookup")
+        : t("agentChat.observability.insights.fixPrefixChanged");
+}
+function buildInsights(t, runs) {
+    const total = runs.reduce((sum, run) => sum + run.cost.estimatedCents, 0);
+    const insights = [];
+    const errored = runs.filter((run) => run.status === "error");
+    if (errored.length > 0) {
+        insights.push({
+            key: "errored",
+            kind: "problem",
+            title: t("agentChat.observability.insights.erroredTitle", {
+                count: errored.length,
+            }),
+            body: t("agentChat.observability.insights.erroredBody"),
+            fix: t("agentChat.observability.insights.erroredFix"),
+            runIds: errored.map((run) => run.runId),
+        });
+    }
+    const toolFailures = new Map();
+    for (const run of runs) {
+        for (const tool of failedTools(run)) {
+            const entry = toolFailures.get(tool.name) ?? {
+                error: tool.error,
+                runIds: [],
+            };
+            entry.runIds.push(run.runId);
+            toolFailures.set(tool.name, entry);
+        }
+    }
+    const [worstTool] = [...toolFailures].sort((a, b) => b[1].runIds.length - a[1].runIds.length);
+    if (worstTool) {
+        const [name, { error, runIds }] = worstTool;
+        const recovered = runs.filter((run) => runIds.includes(run.runId) && run.status === "success").length;
+        const said = error
+            ? t("agentChat.observability.insights.toolFailedSaid", {
+                error: error.length > 180 ? `${error.slice(0, 179)}…` : error,
+            })
+            : t("agentChat.observability.insights.toolFailedGeneric");
+        const recovery = recovered === 0
+            ? ""
+            : recovered === runIds.length
+                ? t("agentChat.observability.insights.toolRecoveredAll")
+                : t("agentChat.observability.insights.toolRecoveredSome", {
+                    count: recovered,
+                });
+        insights.push({
+            key: `tool-${name}`,
+            kind: "problem",
+            title: t("agentChat.observability.insights.toolFailedTitle", {
+                tool: toolNoun(name),
+                count: runIds.length,
+            }),
+            body: recovery ? `${said} ${recovery}` : said,
+            runIds,
+        });
+    }
+    for (const cause of ["tool-lookup", "prefix-changed"]) {
+        const affected = runs.filter((run) => run.restarts.byCause[cause].cents > 0);
+        const cents = affected.reduce((sum, run) => sum + run.restarts.byCause[cause].cents, 0);
+        if (cents >= Math.max(5, total * 0.1)) {
+            insights.push({
+                key: `restart-${cause}`,
+                kind: "saving",
+                title: t("agentChat.observability.insights.restartTitle", {
+                    amount: formatUsd(cents),
+                    percent: percent(cents, total),
+                }),
+                body: t("agentChat.observability.insights.restartBody", {
+                    count: affected.length,
+                    total: runs.length,
+                    reason: restartReason(t, cause),
+                }),
+                fix: restartFix(t, cause),
+                runIds: affected.map((run) => run.runId),
+            });
+        }
+    }
+    const spend = runs.reduce((sum, run) => sum + run.cost.totalCents, 0);
+    const priciest = [...runs].sort((a, b) => b.cost.totalCents - a.cost.totalCents)[0];
+    if (runs.length >= 3 &&
+        priciest &&
+        spend >= 50 &&
+        priciest.cost.totalCents > spend * 0.4) {
+        insights.push({
+            key: "priciest",
+            kind: "info",
+            title: t("agentChat.observability.insights.priciestTitle", {
+                percent: percent(priciest.cost.totalCents, spend),
+            }),
+            body: t("agentChat.observability.insights.priciestBody", {
+                prompt: priciest.prompt ??
+                    t("agentChat.observability.insights.untitledPrompt"),
+                amount: formatUsd(priciest.cost.totalCents),
+                count: priciest.modelCalls,
+            }),
+            runIds: [priciest.runId],
+        });
+    }
+    return insights.slice(0, 3);
+}
+function InsightCard({ insight, onShow, }) {
+    const t = useT();
+    const style = {
+        problem: {
+            icon: (_jsx(IconAlertTriangle, { className: "size-4 text-amber-600 dark:text-amber-400" })),
+            label: t("agentChat.observability.insights.kindProblem"),
+            className: "border-amber-500/30",
+        },
+        saving: {
+            icon: (_jsx(IconPigMoney, { className: "size-4 text-emerald-600 dark:text-emerald-400" })),
+            label: t("agentChat.observability.insights.kindSaving"),
+            className: "border-emerald-500/30",
+        },
+        info: {
+            icon: _jsx(IconInfoCircle, { className: "size-4 text-muted-foreground" }),
+            label: t("agentChat.observability.insights.kindInfo"),
+            className: "border-border/70",
+        },
+    };
+    const kind = style[insight.kind];
+    return (_jsxs("div", { className: `rounded-lg border bg-card p-4 ${kind.className}`, children: [_jsxs("div", { className: "flex items-center gap-1.5 text-[11px] font-medium uppercase tracking-[0.06em] text-muted-foreground", children: [kind.icon, kind.label] }), _jsx("h4", { className: "mt-1.5 text-sm font-semibold leading-5 text-foreground", children: insight.title }), _jsx("p", { className: "mt-1 text-xs leading-5 text-muted-foreground", children: insight.body }), insight.fix ? (_jsxs("p", { className: "mt-1.5 text-xs leading-5 text-foreground/90", children: [_jsxs("span", { className: "font-medium", children: [t("agentChat.observability.insights.fixLabel"), " "] }), insight.fix] })) : null, _jsx(Button, { type: "button", variant: "link", size: "sm", className: "mt-1 h-auto p-0 text-xs", onClick: onShow, children: insight.runIds.length === 1
+                    ? t("agentChat.observability.insights.openPrompt")
+                    : t("agentChat.observability.insights.seePrompts", {
+                        count: insight.runIds.length,
+                    }) })] }));
+}
+function RunRow({ run, onOpen }) {
+    const t = useT();
+    const outcome = outcomeLine(t, run.tools);
+    const failures = failedTools(run);
+    return (_jsxs("button", { type: "button", onClick: onOpen, className: "flex w-full items-start justify-between gap-4 px-4 py-3 text-left transition-colors hover:bg-accent/40 focus-visible:bg-accent/40 focus-visible:outline-none", children: [_jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsx("span", { className: "truncate text-sm text-foreground", children: run.prompt ?? t("agentChat.observability.insights.promptNotSaved") }), run.feedback === "up" ? (_jsx(IconThumbUp, { "aria-label": t("agentChat.observability.insights.ratedHelpful"), className: "size-3.5 shrink-0 text-muted-foreground" })) : run.feedback === "down" ? (_jsx(IconThumbDown, { "aria-label": t("agentChat.observability.insights.ratedUnhelpful"), className: "size-3.5 shrink-0 text-muted-foreground" })) : null] }), _jsxs("div", { className: "mt-0.5 flex min-w-0 items-center gap-1.5 text-xs text-muted-foreground", children: [run.status === "error" ? (_jsxs("span", { className: "flex min-w-0 items-center gap-1 text-destructive", children: [_jsx(IconCircleX, { "aria-hidden": true, className: "size-3.5 shrink-0" }), _jsx("span", { className: "truncate", children: t("agentChat.observability.insights.stoppedWithError") })] })) : run.status === "unknown" ? (_jsx("span", { className: "truncate", children: t("agentChat.observability.insights.detailsUnavailable") })) : (_jsxs("span", { className: "truncate", children: ["\u2192 ", outcome ?? t("agentChat.observability.insights.answered")] })), notableRestart(run) ? (_jsxs("span", { className: "shrink-0 text-amber-700 dark:text-amber-400", children: ["\u00B7", " ", t("agentChat.observability.insights.startedOverShort", {
+                                        count: run.restarts.count,
+                                    })] })) : run.recoveredErrors > 0 ? (_jsxs("span", { className: "shrink-0", children: ["\u00B7", " ", t("agentChat.observability.insights.recoveredShort", {
+                                        count: run.recoveredErrors,
+                                    })] })) : failures.length > 0 ? (_jsxs("span", { className: "shrink-0 text-amber-700 dark:text-amber-400", children: ["\u00B7", " ", t("agentChat.observability.insights.toolsFailedShort", {
+                                        count: failures.length,
+                                    })] })) : null] })] }), _jsxs("div", { className: "shrink-0 text-right", children: [_jsx("div", { className: "text-sm font-medium tabular-nums text-foreground", children: formatUsd(run.cost.totalCents) }), _jsx("div", { className: "text-xs tabular-nums text-muted-foreground", children: run.durationMs
+                            ? formatDuration(run.durationMs)
+                            : formatTime(run.createdAt) })] })] }));
+}
+function CostDetails({ run }) {
+    const t = useT();
+    const parts = [
+        {
+            label: t("agentChat.observability.insights.partReused"),
+            cents: run.cost.cacheReadCents,
+            tokens: run.tokens.cacheReadTokens,
+            color: "var(--usage-cache-read)",
+        },
+        {
+            label: t("agentChat.observability.insights.partSaved"),
+            cents: run.cost.cacheWriteCents,
+            tokens: run.tokens.cacheWriteTokens,
+            color: "var(--usage-cache-write)",
+        },
+        {
+            label: t("agentChat.observability.insights.partNew"),
+            cents: run.cost.uncachedInputCents,
+            tokens: Math.max(0, run.tokens.inputTokens -
+                run.tokens.cacheReadTokens -
+                run.tokens.cacheWriteTokens),
+            color: "var(--usage-fresh-input)",
+        },
+        {
+            label: t("agentChat.observability.insights.partOutput"),
+            cents: run.cost.outputCents,
+            tokens: run.tokens.outputTokens,
+            color: "var(--usage-output)",
+        },
+    ];
+    const checks = run.scores.filter((score) => score.source === "heuristic");
+    const judged = run.scores.filter((score) => score.source === "judge");
+    const estimated = run.cost.estimatedCents;
+    return (_jsxs("div", { className: "space-y-4 text-xs", children: [_jsxs("div", { children: [formatUsd(run.cost.noCacheCents) !== formatUsd(estimated) ? (_jsx("p", { className: "text-muted-foreground", children: t("agentChat.observability.insights.noCacheCompare", {
+                            noCache: formatUsd(run.cost.noCacheCents),
+                            estimated: formatUsd(estimated),
+                        }) })) : null, _jsx("div", { className: "mt-2 flex h-2 w-full gap-[2px] overflow-hidden rounded-full", children: parts.map((part) => part.cents > 0 && estimated > 0 ? (_jsx("div", { style: {
+                                width: `${(part.cents / estimated) * 100}%`,
+                                minWidth: 3,
+                                background: part.color,
+                            } }, part.label)) : null) }), _jsx("div", { className: "mt-2 grid grid-cols-2 gap-x-4 gap-y-1.5", children: parts.map((part) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { "aria-hidden": true, className: "size-2 shrink-0 rounded-[2px]", style: { background: part.color } }), _jsx("span", { className: "text-muted-foreground", children: part.label }), _jsx("span", { className: "ml-auto tabular-nums text-foreground", children: formatUsd(part.cents) }), _jsx("span", { className: "w-12 text-right tabular-nums text-muted-foreground", children: compactTokens(part.tokens) })] }, part.label))) })] }), _jsxs("div", { children: [_jsx("div", { className: "font-medium text-foreground", children: t("agentChat.observability.insights.checksHeading") }), judged.length === 0 && checks.length === 0 ? (_jsx("p", { className: "mt-1 text-muted-foreground", children: t("agentChat.observability.insights.checksNone") })) : (_jsx("ul", { className: "mt-1 space-y-0.5 text-muted-foreground", children: [...judged, ...checks].map((score) => (_jsxs("li", { className: "flex justify-between gap-4", children: [_jsxs("span", { children: [score.criteria.replaceAll("_", " "), score.source === "judge"
+                                            ? ` ${t("agentChat.observability.insights.checksGraded")}`
+                                            : ""] }), _jsxs("span", { className: "tabular-nums", children: [Math.round(score.score * 100), "%"] })] }, score.criteria))) })), _jsx("p", { className: "mt-1 text-[11px] text-muted-foreground", children: t("agentChat.observability.insights.checksNote") })] })] }));
+}
+function StepList({ turns }) {
+    const t = useT();
+    const [openTurn, setOpenTurn] = useState(null);
+    return (_jsx("ol", { className: "mt-2 divide-y divide-border/50 rounded-lg border border-border/70", children: turns.map((turn, index) => {
+            const open = openTurn === turn.index;
+            const failed = turn.toolCalls.some((call) => call.status === "error");
+            return (_jsxs("li", { children: [_jsxs("button", { type: "button", className: "flex w-full items-center gap-3 px-3 py-2 text-left text-xs hover:bg-accent/40", onClick: () => setOpenTurn(open ? null : turn.index), "aria-expanded": open, children: [_jsx("span", { className: "w-5 shrink-0 text-right tabular-nums text-muted-foreground", children: turn.index }), _jsx("span", { className: "min-w-0 flex-1 truncate text-foreground", children: turnLabel(t, turn, index === turns.length - 1) }), turn.restart ? (_jsx("span", { className: "shrink-0 text-amber-700 dark:text-amber-400", children: t("agentChat.observability.insights.startedOverTag") })) : null, failed ? (_jsx("span", { className: "shrink-0 text-destructive", children: t("agentChat.observability.insights.toolFailedTag") })) : null, _jsx("span", { className: "w-12 shrink-0 text-right tabular-nums text-muted-foreground", children: formatDuration(turn.durationMs) }), _jsx("span", { className: "w-10 shrink-0 text-right tabular-nums text-foreground", children: formatUsd(turn.cost.estimatedCents) })] }), open ? (_jsxs("div", { className: "space-y-1.5 bg-muted/30 px-3 py-2.5 pl-11 text-xs text-muted-foreground", children: [_jsxs("p", { children: [t("agentChat.observability.insights.turnContext", {
+                                        tokens: compactTokens(turn.tokens.inputTokens),
+                                        percent: percent(turn.tokens.cacheReadTokens, turn.tokens.inputTokens),
+                                    }), " ", turn.cacheExpired
+                                        ? `${t("agentChat.observability.insights.turnExpired")} `
+                                        : "", t("agentChat.observability.insights.turnOutput", {
+                                        tokens: compactTokens(turn.tokens.outputTokens),
+                                    })] }), turn.restart ? (_jsx("p", { className: "text-amber-700 dark:text-amber-400", children: t("agentChat.observability.insights.turnRestart", {
+                                    reason: restartReason(t, turn.restart.cause),
+                                    amount: formatUsd(turn.restart.cents),
+                                }) })) : null, turn.toolCalls.map((call, callIndex) => (_jsxs("p", { className: call.status === "error" ? "text-destructive" : "", children: [humanizeTool(t, call.name), " \u00B7", " ", formatDuration(call.durationMs), call.status === "error" && call.errorMessage
+                                        ? ` · ${call.errorMessage}`
+                                        : ""] }, callIndex)))] })) : null] }, turn.index));
+        }) }));
+}
+function Expandable({ text, lines, limit, }) {
+    const t = useT();
+    const [full, setFull] = useState(false);
+    return (_jsxs(_Fragment, { children: [_jsx("p", { className: `whitespace-pre-wrap ${full ? "" : lines}`, children: text }), text.length > limit ? (_jsx("button", { type: "button", className: "mt-1 text-xs text-muted-foreground hover:text-foreground", onClick: () => setFull((value) => !value), children: full
+                    ? t("agentChat.observability.insights.showLess")
+                    : t("agentChat.observability.insights.showAll") })) : null] }));
+}
+function handledText(t, parallel, recovered) {
+    const lines = [];
+    if (parallel.savedMs >= 1000) {
+        lines.push(t("agentChat.observability.insights.handledParallel", {
+            count: parallel.calls,
+            duration: formatDuration(parallel.savedMs),
+        }));
+    }
+    if (recovered > 0) {
+        lines.push(t("agentChat.observability.insights.handledRecovered", {
+            count: recovered,
+        }));
+    }
+    return lines;
+}
+function HandledNote({ run }) {
+    const t = useT();
+    const lines = handledText(t, run.parallel, run.recoveredErrors);
+    if (lines.length === 0)
+        return null;
+    return (_jsxs("div", { className: "rounded-lg border border-emerald-500/30 bg-emerald-500/5 px-3.5 py-3 text-xs leading-5", children: [_jsx("p", { className: "font-medium text-foreground", children: t("agentChat.observability.insights.handledHeading") }), _jsx("ul", { className: "mt-0.5 space-y-0.5 text-muted-foreground", children: lines.map((line) => (_jsx("li", { children: line }, line))) })] }));
+}
+function RunPanel({ run, renderRawTrace, onClose, }) {
+    const t = useT();
+    const query = useActionQuery("get-usage-run", {
+        runId: run.runId,
+        scope: "me",
+    });
+    const [showSteps, setShowSteps] = useState(false);
+    const [showDetails, setShowDetails] = useState(false);
+    const [showRawTrace, setShowRawTrace] = useState(false);
+    const detail = query.data;
+    const failures = failedTools(run);
+    const outcome = outcomeLine(t, run.tools);
+    const cause = mainRestartCause(run);
+    const headline = run.status === "error"
+        ? t("agentChat.observability.insights.stoppedWithError")
+        : run.status === "unknown"
+            ? t("agentChat.observability.insights.detailsUnavailable")
+            : t("agentChat.observability.insights.finished");
+    return (_jsxs("div", { className: "flex h-full flex-col", children: [_jsxs("div", { className: "border-b border-border/70 px-5 pb-4 pt-5", children: [_jsxs("div", { className: "flex items-center gap-2 pr-20", children: [run.status === "error" ? (_jsx(IconCircleX, { className: "size-4 shrink-0 text-destructive" })) : run.status === "unknown" ? (_jsx(IconInfoCircle, { className: "size-4 shrink-0 text-muted-foreground" })) : (_jsx(IconCircleCheck, { className: "size-4 shrink-0 text-emerald-600 dark:text-emerald-400" })), _jsxs(SheetTitle, { className: "text-sm font-medium", children: [headline, run.durationMs
+                                        ? ` ${t("agentChat.observability.insights.headerDuration", {
+                                            duration: formatDuration(run.durationMs),
+                                        })}`
+                                        : "", " ", "\u00B7", " ", t("agentChat.observability.insights.stepsCount", {
+                                        count: run.modelCalls,
+                                    }), " ", "\u00B7 ", formatUsd(run.cost.totalCents)] })] }), _jsxs(SheetDescription, { className: "mt-1 text-xs", children: [formatTime(run.createdAt), " \u00B7 ", run.model, " \u00B7", " ", run.feedback === "up"
+                                ? t("agentChat.observability.insights.ratedHelpful")
+                                : run.feedback === "down"
+                                    ? t("agentChat.observability.insights.ratedUnhelpful")
+                                    : t("agentChat.observability.insights.notRated")] }), run.threadId ? (_jsxs("button", { type: "button", onClick: () => {
+                            requestAgentChatThreadOpen({ threadId: run.threadId });
+                            onClose();
+                        }, className: "mt-2 flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground", children: [_jsx(IconMessages, { className: "size-3.5" }), t("observability.openFullConversation")] })) : null] }), _jsxs("div", { className: "flex-1 space-y-5 overflow-y-auto px-5 py-5", children: [_jsxs("div", { className: "space-y-3", children: [_jsx("div", { className: "ml-auto max-w-[85%] rounded-2xl rounded-br-md bg-muted px-3.5 py-2.5 text-sm leading-6", children: _jsx(Expandable, { text: run.prompt ??
+                                        t("agentChat.observability.insights.promptNotSaved"), lines: "line-clamp-4", limit: 240 }) }), _jsxs("div", { className: "max-w-[92%] space-y-2", children: [outcome ? (_jsxs("p", { className: "text-xs text-muted-foreground", children: [_jsxs("span", { className: "font-medium text-foreground", children: [t("agentChat.observability.insights.whatItDid"), " "] }), outcome] })) : null, query.isLoading ? (_jsx(Skeleton, { className: "h-16 w-full" })) : detail?.reply ? (_jsx("div", { className: "rounded-2xl rounded-bl-md border border-border/70 px-3.5 py-2.5 text-sm leading-6", children: _jsx(Expandable, { text: detail.reply, lines: "line-clamp-6", limit: 400 }) })) : (_jsx("p", { className: "text-xs text-muted-foreground", children: t("agentChat.observability.insights.replyNotSaved") })), run.tools.length > 0 ? (_jsxs("div", { className: "flex flex-wrap gap-1.5 pt-1", children: [run.tools.slice(0, 8).map((tool) => (_jsxs("button", { type: "button", onClick: () => setShowSteps(true), className: `rounded-full border px-2 py-0.5 text-[11px] ${tool.failed ? "border-destructive/40 text-destructive" : "border-border/70 text-muted-foreground hover:text-foreground"}`, children: [tool.calls > 1
+                                                        ? t("agentChat.observability.insights.timesCount", {
+                                                            label: humanizeTool(t, tool.name),
+                                                            count: tool.calls,
+                                                        })
+                                                        : humanizeTool(t, tool.name), tool.failed
+                                                        ? ` · ${t("agentChat.observability.insights.failedSuffix")}`
+                                                        : ""] }, tool.name))), run.tools.length > 8 ? (_jsx("span", { className: "px-1 py-0.5 text-[11px] text-muted-foreground", children: t("agentChat.observability.insights.moreTools", {
+                                                    count: run.tools.length - 8,
+                                                }) })) : null] })) : null] })] }), _jsx(HandledNote, { run: run }), notableRestart(run) || failures.length > 0 ? (_jsxs("div", { className: "space-y-2", children: [notableRestart(run) ? (_jsxs("div", { className: "rounded-lg border border-amber-500/30 bg-amber-500/5 px-3.5 py-3 text-xs leading-5", children: [_jsx("p", { className: "text-foreground", children: t("agentChat.observability.insights.startedOverNote", {
+                                            count: run.restarts.count,
+                                            reason: restartReason(t, cause),
+                                            amount: formatUsd(run.restarts.cents),
+                                            total: formatUsd(run.cost.estimatedCents),
+                                        }) }), _jsxs("p", { className: "mt-1 text-muted-foreground", children: [_jsxs("span", { className: "font-medium text-foreground/90", children: [t("agentChat.observability.insights.fixLabel"), " "] }), restartFix(t, cause)] })] })) : null, failures.slice(0, 1).map((tool) => (_jsxs("div", { className: "rounded-lg border border-destructive/30 bg-destructive/5 px-3.5 py-3 text-xs leading-5", children: [_jsx("p", { className: "text-foreground", children: run.status === "success"
+                                            ? t("agentChat.observability.insights.toolFailedRecoveredNote", {
+                                                tool: toolNoun(tool.name),
+                                                count: tool.failed,
+                                            })
+                                            : t("agentChat.observability.insights.toolFailedNote", {
+                                                tool: toolNoun(tool.name),
+                                                count: tool.failed,
+                                            }) }), tool.error ? (_jsx("p", { className: "mt-1 text-muted-foreground", children: tool.error })) : null] }, tool.name)))] })) : null, run.status !== "unknown" ? (_jsxs("section", { children: [_jsxs("button", { type: "button", className: "flex items-center gap-1.5 text-xs font-medium text-foreground", onClick: () => setShowSteps((value) => !value), "aria-expanded": showSteps, children: [_jsx(IconChevronDown, { className: `size-3.5 transition-transform ${showSteps ? "rotate-180" : ""}` }), showSteps
+                                        ? t("agentChat.observability.insights.hideSteps")
+                                        : t("agentChat.observability.insights.showSteps", {
+                                            count: run.modelCalls,
+                                        })] }), showSteps ? (detail ? (_jsx(StepList, { turns: detail.turns })) : (_jsx(Skeleton, { className: "mt-2 h-24 w-full" }))) : null] })) : null, _jsxs("section", { children: [_jsxs("button", { type: "button", className: "flex items-center gap-1.5 text-xs font-medium text-foreground", onClick: () => setShowDetails((value) => !value), "aria-expanded": showDetails, children: [_jsx(IconChevronDown, { className: `size-3.5 transition-transform ${showDetails ? "rotate-180" : ""}` }), t("agentChat.observability.insights.costDetails")] }), showDetails && detail ? (_jsx("div", { className: "mt-3", children: _jsx(CostDetails, { run: detail }) })) : null] }), _jsxs("section", { children: [_jsxs("button", { type: "button", className: "flex items-center gap-1.5 text-xs font-medium text-foreground", onClick: () => setShowRawTrace((value) => !value), "aria-expanded": showRawTrace, children: [_jsx(IconChevronDown, { className: `size-3.5 transition-transform ${showRawTrace ? "rotate-180" : ""}` }), t("agentChat.observability.insights.rawTrace")] }), showRawTrace ? (_jsx("div", { className: "mt-3", children: renderRawTrace(run.runId) })) : null] })] })] }));
+}
+function median(values) {
+    if (values.length === 0)
+        return null;
+    const sorted = [...values].sort((a, b) => a - b);
+    return sorted[Math.floor(sorted.length / 2)];
+}
+function Stat({ label, value, detail, }) {
+    return (_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "text-xs text-muted-foreground", children: label }), _jsx("div", { className: "mt-0.5 text-lg font-semibold tabular-nums text-foreground", children: value }), detail ? (_jsx("div", { className: "text-xs text-muted-foreground", children: detail })) : null] }));
+}
+function changeText(t, current, previous) {
+    if (previous <= 0)
+        return undefined;
+    const change = Math.round(((current - previous) / previous) * 100);
+    if (change === 0)
+        return t("agentChat.observability.insights.changeSame");
+    return change > 0
+        ? t("agentChat.observability.insights.changeUp", { percent: change })
+        : t("agentChat.observability.insights.changeDown", { percent: -change });
+}
+function LoadFailed({ retrying, onRetry, }) {
+    const t = useT();
+    return (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("p", { role: "alert", className: "text-sm text-muted-foreground", children: t("agentChat.common.chunkLoadFailed") }), _jsx(Button, { size: "sm", variant: "outline", disabled: retrying, onClick: onRetry, children: t("agentChat.common.retry") })] }));
+}
+function useRunInsights(days) {
+    return useActionQuery("get-usage-insights", {
+        sinceDays: days,
+        scope: "me",
+    });
+}
+export function RunInsightsOverview({ days, extraStats = [], onShowRuns, }) {
+    const t = useT();
+    const { data, isError, isFetching, refetch } = useRunInsights(days);
+    const runs = useMemo(() => data?.runs ?? [], [data]);
+    const insights = useMemo(() => buildInsights(t, runs), [t, runs]);
+    if (isError) {
+        return _jsx(LoadFailed, { retrying: isFetching, onRetry: () => void refetch() });
+    }
+    if (!data) {
+        return (_jsxs("div", { className: "space-y-3", children: [_jsx(Skeleton, { className: "h-36 w-full" }), _jsx(Skeleton, { className: "h-32 w-full" })] }));
+    }
+    const { current, previous } = data;
+    const avgCents = current.runs ? current.cost.totalCents / current.runs : 0;
+    const previousAvg = previous.runs
+        ? previous.cost.totalCents / previous.runs
+        : 0;
+    const known = runs.filter((run) => run.status !== "unknown");
+    const completed = known.filter((run) => run.status === "success").length;
+    const recovered = runs.reduce((sum, run) => sum + run.recoveredErrors, 0);
+    const handled = handledText(t, {
+        calls: runs.reduce((sum, run) => sum + run.parallel.calls, 0),
+        savedMs: runs.reduce((sum, run) => sum + run.parallel.savedMs, 0),
+    }, recovered);
+    const typical = median(runs.map((run) => run.durationMs ?? 0).filter(Boolean));
+    const problems = insights.filter((insight) => insight.kind === "problem").length;
+    return (_jsxs("div", { className: "space-y-4", children: [_jsxs("section", { className: "rounded-lg border border-border/70 bg-card p-5", children: [_jsx("div", { className: "flex items-center gap-2 text-sm font-semibold text-foreground", children: insights.length === 0 ? (_jsxs(_Fragment, { children: [_jsx(IconCircleCheck, { className: "size-4 text-emerald-600 dark:text-emerald-400" }), t("agentChat.observability.insights.verdictSmooth")] })) : (_jsxs(_Fragment, { children: [_jsx(IconAlertTriangle, { className: "size-4 text-amber-600 dark:text-amber-400" }), t("agentChat.observability.insights.verdictLook", {
+                                    count: insights.length,
+                                }), problems
+                                    ? ` · ${t("agentChat.observability.insights.verdictProblems", {
+                                        count: problems,
+                                    })}`
+                                    : ""] })) }), _jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: t("agentChat.observability.insights.spentSummary", {
+                            amount: formatUsd(current.cost.totalCents),
+                            count: current.runs,
+                            days,
+                        }) }), handled.length > 0 ? (_jsxs("p", { className: "mt-2 flex items-start gap-1.5 text-xs leading-5 text-muted-foreground", children: [_jsx(IconCircleCheck, { className: "mt-0.5 size-3.5 shrink-0 text-emerald-600 dark:text-emerald-400" }), _jsxs("span", { children: [_jsxs("span", { className: "font-medium text-foreground", children: [t("agentChat.observability.insights.handledLabel"), " "] }), handled.join(" ")] })] })) : null, current.runs > runs.length ? (_jsx("p", { className: "mt-2 text-xs text-muted-foreground", children: t("agentChat.observability.insights.sampleNote", {
+                            shown: runs.length,
+                            total: current.runs,
+                        }) })) : null, _jsxs("div", { className: "mt-4 grid grid-cols-2 gap-4 border-t border-border/60 pt-4 sm:grid-cols-3 lg:grid-cols-5", children: [_jsx(Stat, { label: t("agentChat.observability.insights.avgPerPrompt"), value: formatUsd(avgCents), detail: changeText(t, avgCents, previousAvg) }), _jsx(Stat, { label: t("agentChat.observability.insights.completed"), value: known.length ? `${percent(completed, known.length)}%` : "—", detail: known.length
+                                    ? recovered
+                                        ? t("agentChat.observability.insights.completedRecovered", {
+                                            done: completed,
+                                            total: known.length,
+                                            count: recovered,
+                                        })
+                                        : t("agentChat.observability.insights.completedDetail", {
+                                            done: completed,
+                                            total: known.length,
+                                        })
+                                    : undefined }), _jsx(Stat, { label: t("agentChat.observability.insights.typicalTime"), value: typical ? formatDuration(typical) : "—", detail: t("agentChat.observability.insights.median") }), extraStats.map((stat) => (_jsx(Stat, { ...stat }, stat.label)))] })] }), insights.length > 0 ? (_jsx("div", { className: `grid gap-3 ${insights.length > 1 ? "md:grid-cols-2" : ""} ${insights.length > 2 ? "xl:grid-cols-3" : ""}`, children: insights.map((insight) => (_jsx(InsightCard, { insight: insight, onShow: () => onShowRuns({
+                        runIds: insight.runIds,
+                        openRunId: insight.runIds.length === 1 ? insight.runIds[0] : undefined,
+                    }) }, insight.key))) })) : null] }));
+}
+export function RunInsightsConversations({ days, filter, onClearFilter, renderRawTrace, }) {
+    const t = useT();
+    const { data, isError, isFetching, refetch } = useRunInsights(days);
+    const runs = useMemo(() => data?.runs ?? [], [data]);
+    const [sort, setSort] = useState("newest");
+    const [openRunId, setOpenRunId] = useState(filter?.openRunId ?? null);
+    useEffect(() => {
+        if (filter?.openRunId)
+            setOpenRunId(filter.openRunId);
+    }, [filter]);
+    const visible = useMemo(() => {
+        const filtered = filter
+            ? runs.filter((run) => filter.runIds.includes(run.runId))
+            : runs;
+        return sort === "cost"
+            ? [...filtered].sort((a, b) => b.cost.totalCents - a.cost.totalCents)
+            : filtered;
+    }, [runs, filter, sort]);
+    const openIndex = visible.findIndex((run) => run.runId === openRunId);
+    const openRun = openIndex >= 0 ? visible[openIndex] : null;
+    const openAt = (index) => {
+        const run = visible[index];
+        if (run)
+            setOpenRunId(run.runId);
+    };
+    useEffect(() => {
+        if (!openRun)
+            return;
+        const onKey = (event) => {
+            const target = event.target;
+            if (target instanceof Element &&
+                target.closest("input, textarea, [contenteditable=true]")) {
+                return;
+            }
+            if (event.key === "j")
+                openAt(openIndex + 1);
+            else if (event.key === "k")
+                openAt(openIndex - 1);
+        };
+        window.addEventListener("keydown", onKey);
+        return () => window.removeEventListener("keydown", onKey);
+    });
+    if (isError) {
+        return _jsx(LoadFailed, { retrying: isFetching, onRetry: () => void refetch() });
+    }
+    if (!data) {
+        return (_jsxs("div", { className: "space-y-2", children: [_jsx(Skeleton, { className: "h-10 w-full" }), _jsx(Skeleton, { className: "h-10 w-full" }), _jsx(Skeleton, { className: "h-10 w-full" })] }));
+    }
+    return (_jsxs("div", { className: "run-insights", children: [_jsx("style", { children: PALETTE_CSS }), _jsxs("section", { className: "rounded-lg border border-border/70 bg-card", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2 px-4 py-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("h3", { className: "text-sm font-semibold text-foreground", children: t("agentChat.observability.insights.promptsHeading") }), filter ? (_jsxs("button", { type: "button", className: "flex items-center gap-1 rounded-full bg-muted px-2 py-0.5 text-[11px] text-muted-foreground hover:text-foreground", onClick: onClearFilter, children: [t("agentChat.observability.insights.showing", {
+                                                count: filter.runIds.length,
+                                            }), " ", _jsx(IconX, { className: "size-3" })] })) : null] }), _jsx("div", { className: "flex items-center rounded-md border border-border/70 p-0.5", children: ["newest", "cost"].map((value) => (_jsx(Button, { type: "button", size: "sm", variant: sort === value ? "secondary" : "ghost", className: "h-7 px-2.5 text-xs", onClick: () => setSort(value), "aria-pressed": sort === value, children: value === "newest"
+                                        ? t("agentChat.observability.insights.sortNewest")
+                                        : t("agentChat.observability.insights.sortCost") }, value))) })] }), visible.length === 0 ? (_jsx("p", { className: "border-t border-border/70 px-4 py-8 text-center text-sm text-muted-foreground", children: t("agentChat.observability.insights.emptyPrompts") })) : (_jsx("div", { className: "divide-y divide-border/60 border-t border-border/70", children: visible.map((run) => (_jsx(RunRow, { run: run, onOpen: () => setOpenRunId(run.runId) }, run.runId))) }))] }), _jsx(Sheet, { open: Boolean(openRun), onOpenChange: (open) => {
+                    if (!open)
+                        setOpenRunId(null);
+                }, children: _jsx(SheetContent, { className: "run-insights-panel w-full gap-0 p-0 sm:max-w-[680px]", children: openRun ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "absolute end-12 top-4 flex items-center gap-1", children: [_jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "size-7", disabled: openIndex <= 0, onClick: () => openAt(openIndex - 1), "aria-label": t("agentChat.observability.insights.prevPrompt"), title: t("agentChat.observability.insights.prevPrompt"), children: _jsx(IconChevronUp, { className: "size-4" }) }), _jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "size-7", disabled: openIndex >= visible.length - 1, onClick: () => openAt(openIndex + 1), "aria-label": t("agentChat.observability.insights.nextPrompt"), title: t("agentChat.observability.insights.nextPrompt"), children: _jsx(IconChevronDown, { className: "size-4" }) })] }), _jsx(RunPanel, { run: openRun, renderRawTrace: renderRawTrace, onClose: () => setOpenRunId(null) }, openRun.runId)] })) : null }) })] }));
+}
+//# sourceMappingURL=RunInsights.js.map