@agent-native/core 0.187.0 → 0.187.1-nightly-20260925003003

package/dist/agent/production-agent.js

@@ -3735,6 +3735,7 @@ export async function runAgentLoop(opts) {
         outputTokens: 0,
         cacheReadTokens: 0,
         cacheWriteTokens: 0,
+        engineName: opts.engine.name,
         model,
     };
     const maxIterations = normalizeMaxIterations(opts.maxIterations, getDefaultMaxIterations());
@@ -4313,12 +4314,21 @@ export async function runAgentLoop(opts) {
                                 outputTokens: event.outputTokens,
                                 cacheReadTokens: event.cacheReadTokens ?? 0,
                                 cacheWriteTokens: event.cacheWriteTokens ?? 0,
+                                engineName: opts.engine.name,
                                 model,
+                                ...(event.builderCreditsUsed !== undefined
+                                    ? { builderCreditsUsed: event.builderCreditsUsed }
+                                    : {}),
                             };
                             usage.inputTokens += eventUsage.inputTokens;
                             usage.outputTokens += eventUsage.outputTokens;
                             usage.cacheReadTokens += eventUsage.cacheReadTokens;
                             usage.cacheWriteTokens += eventUsage.cacheWriteTokens;
+                            if (eventUsage.builderCreditsUsed !== undefined) {
+                                usage.builderCreditsUsed =
+                                    (usage.builderCreditsUsed ?? 0) +
+                                        eventUsage.builderCreditsUsed;
+                            }
                             usage.usageReported = true;
                             opts.onUsage?.(eventUsage);
                         }
@@ -6188,6 +6198,7 @@ export async function runAgentLoopWithMainChatInternalContinuations(opts) {
         outputTokens: 0,
         cacheReadTokens: 0,
         cacheWriteTokens: 0,
+        engineName: opts.engine.name,
         model: opts.model,
     };
     const addUsage = (next) => {
@@ -6195,6 +6206,11 @@ export async function runAgentLoopWithMainChatInternalContinuations(opts) {
         usage.outputTokens += next.outputTokens;
         usage.cacheReadTokens += next.cacheReadTokens;
         usage.cacheWriteTokens += next.cacheWriteTokens;
+        if (next.builderCreditsUsed !== undefined) {
+            usage.builderCreditsUsed =
+                (usage.builderCreditsUsed ?? 0) + next.builderCreditsUsed;
+        }
+        usage.engineName = next.engineName ?? usage.engineName;
         usage.model = next.model;
         if (typeof next.llmCalls === "number") {
             usage.llmCalls = (usage.llmCalls ?? 0) + next.llmCalls;
@@ -7541,7 +7557,7 @@ export function createProductionAgentHandler(options) {
             availableRequestActions = filterActionsByAllowedNames(availableRequestActions, filterHostedHarnessToolNames(Object.keys(availableRequestActions)));
         }
         let surfacedRequestActions = availableRequestActions;
-        let useDefaultRequestActionSurface = !options.resolveActionSurface;
+        let shouldFilterInitialRequestTools = !options.resolveActionSurface;
         if (options.resolveActionSurface) {
             const persistedSurface = isBackgroundWorker
                 ? readPersistedActionSurface(body, "__resolvedActionSurface")
@@ -7573,13 +7589,14 @@ export function createProductionAgentHandler(options) {
                     availableActionNames: Object.keys(availableRequestActions),
                 });
             const normalizedSurface = normalizeAgentActionSurfaceResolution(surface);
+            shouldFilterInitialRequestTools =
+                normalizedSurface.mode === "default" || !normalizedSurface.actionScope;
             if (requestedActionScope &&
                 (normalizedSurface.mode === "default" || !normalizedSurface.actionScope)) {
                 throw new Error("resolveActionSurface must return actionScope for a scoped request");
             }
             const runCtx = ensureRequestRunContext();
             if (normalizedSurface.mode === "default") {
-                useDefaultRequestActionSurface = true;
                 if (runCtx) {
                     delete runCtx.allowedActionNames;
                     delete runCtx.actionScope;
@@ -8113,7 +8130,7 @@ export function createProductionAgentHandler(options) {
             ? createPlanModeActionRegistry(surfacedRequestActions)
             : surfacedRequestActions;
         const availableRequestTools = getEngineTools(requestActions);
-        const initialRequestTools = useDefaultRequestActionSurface
+        const initialRequestTools = shouldFilterInitialRequestTools
             ? filterInitialEngineTools(availableRequestTools, options.initialToolNames)
             : availableRequestTools;
         const curatedRequestTools = requestMode === "plan"
@@ -9074,6 +9091,8 @@ export function createProductionAgentHandler(options) {
                                 outputTokens: subUsage.outputTokens,
                                 cacheReadTokens: subUsage.cacheReadTokens,
                                 cacheWriteTokens: subUsage.cacheWriteTokens,
+                                builderCreditsUsed: subUsage.builderCreditsUsed,
+                                engineName: engine.name,
                                 model: subUsage.model,
                                 label: `custom-agent:${ref.name}`,
                                 runId,
@@ -9178,6 +9197,7 @@ export function createProductionAgentHandler(options) {
                 outputTokens: 0,
                 cacheReadTokens: 0,
                 cacheWriteTokens: 0,
+                engineName: engine.name,
                 model: effectiveModel,
             };
             const agentLoopOpts = {
@@ -9197,6 +9217,11 @@ export function createProductionAgentHandler(options) {
                     turnUsage.outputTokens += usage.outputTokens;
                     turnUsage.cacheReadTokens += usage.cacheReadTokens;
                     turnUsage.cacheWriteTokens += usage.cacheWriteTokens;
+                    if (usage.builderCreditsUsed !== undefined) {
+                        turnUsage.builderCreditsUsed =
+                            (turnUsage.builderCreditsUsed ?? 0) + usage.builderCreditsUsed;
+                    }
+                    turnUsage.engineName = usage.engineName ?? turnUsage.engineName;
                     turnUsage.model = usage.model;
                 },
                 ownerEmail,
@@ -9367,7 +9392,8 @@ export function createProductionAgentHandler(options) {
                         (turnUsage.inputTokens > 0 ||
                             turnUsage.outputTokens > 0 ||
                             turnUsage.cacheReadTokens > 0 ||
-                            turnUsage.cacheWriteTokens > 0)) {
+                            turnUsage.cacheWriteTokens > 0 ||
+                            turnUsage.builderCreditsUsed != null)) {
                         const { recordUsage } = await import("../usage/store.js");
                         await recordUsage({
                             ownerEmail: resolvedOwnerEmail,
@@ -9375,6 +9401,8 @@ export function createProductionAgentHandler(options) {
                             outputTokens: turnUsage.outputTokens,
                             cacheReadTokens: turnUsage.cacheReadTokens,
                             cacheWriteTokens: turnUsage.cacheWriteTokens,
+                            builderCreditsUsed: turnUsage.builderCreditsUsed,
+                            engineName: engine.name,
                             model: turnUsage.model,
                             label: turnUsageLabel || "chat",
                             // token_usage has had run_id/thread_id/task_id since it was

package/dist/agent/run-loop-with-resume.js

@@ -373,6 +373,7 @@ control) {
         outputTokens: 0,
         cacheReadTokens: 0,
         cacheWriteTokens: 0,
+        engineName: opts.engine.name,
         model: opts.model,
     };
     const addUsage = (next) => {
@@ -380,6 +381,11 @@ control) {
         usage.outputTokens += next.outputTokens;
         usage.cacheReadTokens += next.cacheReadTokens;
         usage.cacheWriteTokens += next.cacheWriteTokens;
+        if (next.builderCreditsUsed !== undefined) {
+            usage.builderCreditsUsed =
+                (usage.builderCreditsUsed ?? 0) + next.builderCreditsUsed;
+        }
+        usage.engineName = next.engineName ?? usage.engineName;
         usage.model = next.model;
         // Without these, a retry that never got a usage report merges its zeros
         // over an earlier attempt's real numbers, and telemetry reports an

package/dist/cli/index.js

@@ -7,7 +7,7 @@ import { fileURLToPath } from "url";
 import * as Sentry from "@sentry/node";
 import { clearAgentNativeNitroPresetMarker, resolveAgentNativeNitroPreset, } from "../deploy/nitro-preset.js";
 import { resolveDeployPostBuildInvocation } from "./deploy-build.js";
-import { cliSpawnOptions } from "./process.js";
+import { cliSpawnOptions, runDevServer } from "./process.js";
 import { findBinUpwards, findReactRouterInvocation, } from "./react-router-command.js";
 import { shouldTrackCliRun } from "./telemetry-routing.js";
 import { createCliTelemetry } from "./telemetry.js";
@@ -529,14 +529,14 @@ switch (command) {
         const vite = findViteBin();
         const { inspectFlag, rest } = extractNodeInspectFlag(args);
         if (!inspectFlag) {
-            run(vite, rest);
+            runDevServer(vite, rest);
             break;
         }
         const viteJsEntry = findViteJsEntry();
         if (!viteJsEntry) {
             console.warn("[agent-native] Could not resolve Vite's JS entry; starting dev " +
                 "server without the debugger.");
-            run(vite, rest);
+            runDevServer(vite, rest);
             break;
         }
         // Attach inspect flag to server process (not Vite or Nitro process)
@@ -551,7 +551,7 @@ switch (command) {
             NITRO_DEV_RUNNER: process.env.NITRO_DEV_RUNNER ?? "node-process",
         };
         console.log(`[agent-native] API server debugger listening on ${target}`);
-        run(process.execPath, ["--import", preload, viteJsEntry, ...rest], {
+        runDevServer(process.execPath, ["--import", preload, viteJsEntry, ...rest], {
             env,
             shell: false,
         });

package/dist/cli/process.d.ts

@@ -1,7 +1,16 @@
-import type { SpawnOptions } from "node:child_process";
+import { spawn, type SpawnOptions } from "node:child_process";
+export declare const DEV_SERVER_SUPERVISOR_ENV = "AGENT_NATIVE_DEV_SUPERVISOR";
+export declare const DEV_SERVER_RECOVERY_EXIT_CODE = 86;
 /**
  * Keep Windows command-name launches compatible with `.cmd` shims while
  * allowing callers that already have a real executable path to opt out of the
  * shell. The latter is important for paths such as `C:\\Program Files\\nodejs\\node.exe`.
  */
 export declare function cliSpawnOptions(options?: Pick<SpawnOptions, "env" | "shell" | "stdio">, platform?: NodeJS.Platform): Pick<SpawnOptions, "env" | "shell" | "stdio">;
+export declare function runDevServer(command: string, args: string[], options?: {
+    env?: NodeJS.ProcessEnv;
+    shell?: boolean;
+    stdio?: "inherit" | "pipe";
+    spawnProcess?: typeof spawn;
+    exitProcess?: (code: number) => void;
+}): void;

package/dist/cli/process.js

@@ -1,3 +1,7 @@
+import { spawn, } from "node:child_process";
+import { constants as osConstants } from "node:os";
+export const DEV_SERVER_SUPERVISOR_ENV = "AGENT_NATIVE_DEV_SUPERVISOR";
+export const DEV_SERVER_RECOVERY_EXIT_CODE = 86;
 /**
  * Keep Windows command-name launches compatible with `.cmd` shims while
  * allowing callers that already have a real executable path to opt out of the
@@ -10,3 +14,65 @@ export function cliSpawnOptions(options = {}, platform = process.platform) {
         env: options.env ?? process.env,
     };
 }
+export function runDevServer(command, args, options = {}) {
+    const env = {
+        ...(options.env ?? process.env),
+        [DEV_SERVER_SUPERVISOR_ENV]: "1",
+    };
+    const spawnProcess = options.spawnProcess ?? spawn;
+    const exitProcess = options.exitProcess ?? ((code) => process.exit(code));
+    const signalHandlers = new Map();
+    let child;
+    let restartTimer;
+    let forceExitTimer;
+    let shuttingDown = false;
+    const cleanup = () => {
+        for (const [signal, handler] of signalHandlers) {
+            process.removeListener(signal, handler);
+        }
+        signalHandlers.clear();
+        if (restartTimer)
+            clearTimeout(restartTimer);
+        if (forceExitTimer)
+            clearTimeout(forceExitTimer);
+    };
+    const start = () => {
+        restartTimer = undefined;
+        child = spawnProcess(command, args, cliSpawnOptions({
+            env,
+            shell: options.shell,
+            stdio: options.stdio,
+        }));
+        child.once("exit", (code, signal) => {
+            if (code === DEV_SERVER_RECOVERY_EXIT_CODE && !shuttingDown) {
+                restartTimer = setTimeout(start, 250);
+                return;
+            }
+            cleanup();
+            exitProcess(code ?? (signal ? 128 + osConstants.signals[signal] : 0));
+        });
+    };
+    for (const signal of ["SIGINT", "SIGTERM", "SIGHUP"]) {
+        const handler = () => {
+            if (shuttingDown)
+                return;
+            shuttingDown = true;
+            if (restartTimer) {
+                clearTimeout(restartTimer);
+                restartTimer = undefined;
+                cleanup();
+                exitProcess(128 + osConstants.signals[signal]);
+                return;
+            }
+            child?.kill(signal);
+            forceExitTimer = setTimeout(() => {
+                child?.kill("SIGKILL");
+                exitProcess(1);
+            }, 5_000);
+            forceExitTimer.unref();
+        };
+        signalHandlers.set(signal, handler);
+        process.on(signal, handler);
+    }
+    start();
+}

package/dist/cli/workspace-dev.js

@@ -10,6 +10,7 @@ import { extractOAuthStateAppId } from "../shared/oauth-state.js";
 import { DEFAULT_WORKSPACE_APP_AUDIENCE, normalizeWorkspaceAppHomePath, workspaceAppAudienceFromPackageJson, workspaceAppRouteAccessFromPackageJson, } from "../shared/workspace-app-audience.js";
 import { inferWorkspaceAppRootHomePath, readConfiguredWorkspaceAppHomePath, } from "../workspace-app-config.js";
 import { attachGatewaySocketErrorSink, normalizeOrigin, rewriteRedirectLocation, escapeHtml, } from "./gateway-helpers.js";
+import { DEV_SERVER_SUPERVISOR_ENV } from "./process.js";
 const DEFAULT_GATEWAY_HOST = "127.0.0.1";
 const DEFAULT_GATEWAY_PORT = 8080;
 const DEFAULT_APP_PORT_START = 8100;
@@ -692,6 +693,7 @@ export async function runWorkspaceDev(options = {}) {
             env: devWatcherEnv({
                 ...env,
                 APP_NAME: app.id,
+                [DEV_SERVER_SUPERVISOR_ENV]: "1",
                 AGENT_NATIVE_WORKSPACE: "1",
                 AGENT_NATIVE_WORKSPACE_APP_ID: app.id,
                 AGENT_NATIVE_WORKSPACE_APPS_JSON: workspaceAppsJson(),

package/dist/client/agent-chat.js

@@ -760,8 +760,18 @@ export function sendToAgentChat(opts) {
     const actionScope = opts.actionScope === undefined
         ? undefined
         : normalizeAgentActionScope(opts.actionScope);
-    const isCodeRequest = routesToCodeFrame(opts);
-    const localChatTarget = opts.chatTarget === "local" || keepsApprovalInAppChat(opts);
+    const mcpBridgeEnabled = isMcpAppChatBridgeEnabled();
+    const hasMcpAppLocalPayload = mcpBridgeEnabled &&
+        Boolean(opts.attachments?.length ||
+            opts.images?.length ||
+            opts.referenceImagePaths?.length ||
+            opts.uploadedReferenceImages?.length ||
+            opts.usageLabel ||
+            actionScope);
+    const isCodeRequest = routesToCodeFrame(opts) && !hasMcpAppLocalPayload;
+    const localChatTarget = opts.chatTarget === "local" ||
+        keepsApprovalInAppChat(opts) ||
+        hasMcpAppLocalPayload;
     const requestMode = normalizeAgentChatRequestMode(opts.requestMode ?? opts.mode) ??
         readStoredAgentChatRequestMode();
     if (opts.submit !== false && opts.message.trim()) {
@@ -793,18 +803,7 @@ export function sendToAgentChat(opts) {
             ...(requestMode ? { mode: requestMode, requestMode } : {}),
         },
     };
-    if (opts.submit !== false &&
-        !localChatTarget &&
-        isMcpAppChatBridgeEnabled()) {
-        // MCP host follow-up APIs carry neither attachment descriptors nor a usage
-        // label. Use the normal wrapper transport when either needs to reach the
-        // chat thread — a label silently downgraded to `chat` is exactly the run
-        // the caller named it to be able to find. (Approval continuations never
-        // get here: they stay in the app's own chat, see keepsApprovalInAppChat.)
-        if (opts.attachments?.length || opts.usageLabel || actionScope) {
-            window.parent.postMessage(payload, getFramePostMessageTargetOrigin() || "*");
-            return tabId;
-        }
+    if (opts.submit !== false && !localChatTarget && mcpBridgeEnabled) {
         const directHostMessage = sendMcpAppHostMessage({
             message: opts.message,
             context: opts.context,

package/dist/client/error-format.js

@@ -21,7 +21,7 @@ export const BUILDER_SPACE_SETTINGS_URL = "https://builder.io/account/space?utm_
 export const NEW_CHAT_ACTION_HREF = "agent-native:new-chat";
 const OPEN_BUILDER_SPACE_SETTINGS_LABEL = "Open Builder space settings";
 const START_NEW_CHAT_LABEL = "Start new chat";
-const UPGRADE_AT_BUILDER_LABEL = "Upgrade at builder.io";
+const ADD_CREDITS_IN_BUILDER_LABEL = "Add credits in Builder";
 const BUILDER_AUTHENTICATION_ERROR = "Builder rejected the connected credentials. Reconnect Builder.io (free tier available) in Settings, then retry.";
 /**
  * A 401 says the credential this request carried was refused. It does NOT say
@@ -100,7 +100,7 @@ export function formatChatErrorText(errorMessage, upgradeUrl, errorCode) {
     const normalized = normalizeChatError(errorMessage, errorCode);
     if (normalized.message === CREDITS_LIMIT_REACHED_MESSAGE) {
         return upgradeUrl && isSafeUpgradeUrl(upgradeUrl)
-            ? `${normalized.message}\n\n[${UPGRADE_AT_BUILDER_LABEL}](${upgradeUrl})`
+            ? `${normalized.message}\n\n[${ADD_CREDITS_IN_BUILDER_LABEL}](${upgradeUrl})`
             : normalized.message;
     }
     if (!isServerChosenVisitorMessage(normalized.message) &&
@@ -118,7 +118,7 @@ export function formatChatErrorText(errorMessage, upgradeUrl, errorCode) {
     if (!upgradeUrl || !isSafeUpgradeUrl(upgradeUrl)) {
         return `Error: ${normalized.message}`;
     }
-    return `Error: ${normalized.message}\n\n[${UPGRADE_AT_BUILDER_LABEL}](${upgradeUrl})`;
+    return `Error: ${normalized.message}\n\n[${ADD_CREDITS_IN_BUILDER_LABEL}](${upgradeUrl})`;
 }
 /**
  * True when the server already decided what this reader may be told.
@@ -229,7 +229,7 @@ const KNOWN_CHAT_ERROR_ACTION_KEYS = new Map([
         "agentChat.errorMessages.openBuilderSpaceSettings",
     ],
     ["Start new chat", "agentChat.errorMessages.startNewChat"],
-    ["Upgrade at builder.io", "agentChat.errorMessages.upgradeAtBuilder"],
+    ["Add credits in Builder", "agentChat.errorMessages.addCreditsInBuilder"],
 ]);
 /** Localize only Core's own normalized error copy; preserve provider details. */
 export function localizeKnownChatErrorText(text, t) {

package/dist/client/observability/ObservabilityDashboard.js

@@ -1,13 +1,15 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { IconActivity, IconMessages, IconThumbUp, IconThumbDown, IconClock, IconCoin, IconTool, IconMoodSmile, IconChartBar, IconAB2, IconMessageReport, IconMessageCircle, IconPencil, IconChevronRight, IconArrowLeft, IconLoader2, IconAlertTriangle, } from "@tabler/icons-react";
+import { Skeleton } from "@agent-native/toolkit/ui/skeleton";
+import { IconActivity, IconMessages, IconThumbUp, IconThumbDown, IconClock, IconCoin, IconTool, IconMoodSmile, IconChartBar, IconAB2, IconMessageReport, IconMessageCircle, IconPencil, IconChevronRight, IconArrowsMaximize, IconExternalLink, IconArrowLeft, IconLoader2, IconAlertTriangle, } from "@tabler/icons-react";
 import { useQueryClient } from "@tanstack/react-query";
 import { useState } from "react";
+import { AGENT_SIDEBAR_QUERY_PARAM, AGENT_SIDEBAR_QUERY_VALUE_OPEN, } from "../../shared/agent-sidebar-url.js";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, } from "../components/ui/dialog.js";
 import { Popover, PopoverContent, PopoverTrigger, } from "../components/ui/popover.js";
 import { useT } from "../i18n.js";
 import { cn } from "../utils.js";
 import { OutputPreview } from "./OutputPreview.js";
-import { useObservabilityOverview, useTraces, useTraceDetail, useFeedbackList, useFeedbackStats, useSatisfaction, useEvalStats, useExperiments, useExperimentDetail, useExperimentResults, useOutputReviews, useOutputReviewApp, useSaveInstructionUpdate, useSubmitFeedback, } from "./useObservability.js";
+import { useObservabilityOverview, useTraces, useTraceDetail, useFeedbackList, useFeedbackStats, useSatisfaction, useEvalStats, useExperiments, useExperimentDetail, useExperimentResults, useOutputReviews, useOutputReviewDetail, useSaveInstructionUpdate, useSubmitFeedback, } from "./useObservability.js";
 // ─── Helpers ────────────────────────────────────────────────────────────
 function formatCost(centsX100) {
     const cents = centsX100 / 100;
@@ -47,6 +49,14 @@ function timeAgo(ts) {
         return `${Math.floor(diff / 3_600_000)}h ago`;
     return `${Math.floor(diff / 86_400_000)}d ago`;
 }
+function reviewThreadHref(threadId) {
+    const isBrowser = typeof window !== "undefined";
+    const url = new URL(isBrowser ? window.location.href : "/", "http://agent-native.invalid");
+    url.searchParams.delete("threadId");
+    url.searchParams.set("thread", threadId);
+    url.searchParams.set(AGENT_SIDEBAR_QUERY_PARAM, AGENT_SIDEBAR_QUERY_VALUE_OPEN);
+    return isBrowser ? url.toString() : `${url.pathname}${url.search}${url.hash}`;
+}
 const RANGES = [
     { value: 7, label: "7d" },
     { value: 30, label: "30d" },
@@ -150,11 +160,12 @@ function ReviewTab({ days }) {
     const instructionMutation = useSaveInstructionUpdate();
     const queryClient = useQueryClient();
     const [selectedRunId, setSelectedRunId] = useState(null);
+    const [previewExpanded, setPreviewExpanded] = useState(false);
     const [openPopover, setOpenPopover] = useState(null);
     const [feedbackNote, setFeedbackNote] = useState(null);
     const [instructionDraft, setInstructionDraft] = useState(null);
     const selectedReview = reviews?.find((review) => review.runId === selectedRunId);
-    const reviewAppQuery = useOutputReviewApp(selectedReview?.hasInlineApp ? selectedReview.runId : null);
+    const reviewDetailQuery = useOutputReviewDetail(selectedReview?.runId ?? null);
     if (isLoading)
         return _jsx(LoadingState, {});
     if (!reviews || reviews.length === 0) {
@@ -238,68 +249,87 @@ function ReviewTab({ days }) {
             value: "",
             target: "agent",
         };
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "divide-y divide-border", children: reviews.map((review) => (_jsxs("button", { type: "button", "data-review-run-id": review.runId, onClick: () => setSelectedRunId(review.runId), className: "group flex w-full min-w-0 items-center gap-3 py-3 text-left first:pt-0 hover:bg-muted/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: [_jsx("span", { className: "h-16 w-24 shrink-0 overflow-hidden rounded-md bg-muted/60 sm:h-20 sm:w-28", children: _jsx(OutputPreview, { answer: review.answer, inlineAppTitle: review.inlineAppTitle, previewLabel: t("observability.reviewPreview"), compact: true }) }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "line-clamp-2 break-words text-sm font-medium text-foreground", children: review.ask || "-" }), _jsxs("span", { className: "mt-1 block truncate text-xs text-muted-foreground", children: [review.model, " \u00B7 ", timeAgo(review.createdAt)] })] }), _jsx(IconChevronRight, { size: 16, className: "shrink-0 text-muted-foreground transition-transform group-hover:translate-x-0.5" })] }, review.runId))) }), _jsx(Dialog, { open: Boolean(selectedReview), onOpenChange: (open) => {
-                    if (open)
-                        return;
-                    const closingRunId = selectedRunId;
-                    setSelectedRunId(null);
-                    setOpenPopover((current) => current?.runId === closingRunId ? null : current);
-                    setInstructionDraft((current) => current?.runId === closingRunId ? null : current);
-                }, children: selectedReview && (_jsxs(DialogContent, { "aria-describedby": undefined, className: "flex max-h-[min(90dvh,900px)] w-[calc(100vw-2rem)] max-w-5xl flex-col gap-0 overflow-hidden p-0", children: [_jsx(DialogHeader, { className: "shrink-0 border-b border-border px-5 py-4", children: _jsx(DialogTitle, { className: "line-clamp-2 break-words text-left", children: selectedReview.ask || t("observability.reviewPreview") }) }), _jsxs("div", { className: "min-h-0 flex-1 overflow-y-auto overscroll-contain px-5 py-4", children: [_jsxs("div", { className: "mb-3 truncate text-xs text-muted-foreground", children: [selectedReview.model, " \u00B7 ", timeAgo(selectedReview.createdAt)] }), _jsx("div", { className: "min-w-0 max-w-full overflow-hidden", children: _jsx(OutputPreview, { answer: selectedReview.answer, inlineApp: reviewAppQuery.data ?? undefined, maxAppHeight: 420, previewLabel: t("observability.reviewPreview") }) }), selectedNote?.value && (_jsxs("p", { className: "mt-4 flex items-start gap-2 whitespace-pre-wrap break-words text-xs text-muted-foreground", children: [_jsx(IconMessageCircle, { size: 14, className: "mt-0.5 shrink-0" }), selectedNote.value] }))] }), _jsxs("div", { className: "flex shrink-0 items-center gap-1 border-t border-border px-4 py-3 sm:px-5", children: [_jsxs("div", { role: "group", "aria-label": t("observability.reviewFeedback"), className: "flex items-center gap-1", children: [_jsx("button", { type: "button", "aria-label": t("observability.thumbsUp"), "aria-pressed": selectedVote?.feedbackType === "thumbs_up", title: t("observability.thumbsUp"), disabled: feedbackMutation.isPending, onClick: () => saveFeedback(selectedReview.runId, selectedReview.threadId, "thumbs_up"), className: cn("rounded-md p-2 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:opacity-50", selectedVote?.feedbackType === "thumbs_up" &&
-                                                "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400"), children: _jsx(IconThumbUp, { size: 16 }) }), _jsx("button", { type: "button", "aria-label": t("observability.thumbsDown"), "aria-pressed": selectedVote?.feedbackType === "thumbs_down", title: t("observability.thumbsDown"), disabled: feedbackMutation.isPending, onClick: () => saveFeedback(selectedReview.runId, selectedReview.threadId, "thumbs_down"), className: cn("rounded-md p-2 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:opacity-50", selectedVote?.feedbackType === "thumbs_down" &&
-                                                "bg-rose-500/10 text-rose-600 dark:text-rose-400"), children: _jsx(IconThumbDown, { size: 16 }) })] }), _jsxs(Popover, { open: feedbackOpen, onOpenChange: (open) => {
-                                        if (open) {
-                                            setFeedbackNote((current) => current?.runId === selectedReview.runId
-                                                ? current
-                                                : { runId: selectedReview.runId, value: "" });
-                                        }
-                                        setOpenPopover((current) => {
-                                            if (open) {
-                                                return { runId: selectedReview.runId, kind: "feedback" };
-                                            }
-                                            return current?.runId === selectedReview.runId &&
-                                                current.kind === "feedback"
-                                                ? null
-                                                : current;
-                                        });
-                                    }, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": t("observability.addFeedback"), title: t("observability.addFeedback"), className: "rounded-md p-2 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground", children: _jsx(IconMessageCircle, { size: 16 }) }) }), _jsxs(PopoverContent, { align: "start", sideOffset: 8, className: "w-[min(22rem,calc(100vw-2rem))] p-3", children: [_jsxs("label", { className: "block", children: [_jsx("span", { className: "sr-only", children: t("observability.feedbackNote") }), _jsx("textarea", { value: feedbackNote?.runId === selectedReview.runId
-                                                                ? feedbackNote.value
-                                                                : "", onChange: (event) => setFeedbackNote({
-                                                                runId: selectedReview.runId,
-                                                                value: event.target.value,
-                                                            }), rows: 3, className: "w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground outline-none focus:ring-2 focus:ring-ring", placeholder: t("observability.feedbackPlaceholder") })] }), _jsx("button", { type: "button", onClick: () => saveNote(selectedReview.runId, selectedReview.threadId), disabled: !(feedbackNote?.runId === selectedReview.runId
-                                                        ? feedbackNote.value.trim()
-                                                        : "") || feedbackMutation.isPending, className: "mt-2 rounded-md bg-primary px-2.5 py-1.5 text-xs font-medium text-primary-foreground disabled:opacity-50", children: t("observability.saveFeedback") })] })] }), _jsxs(Popover, { open: instructionOpen, onOpenChange: (open) => {
-                                        if (open) {
-                                            setInstructionDraft((current) => current?.runId === selectedReview.runId
-                                                ? current
-                                                : {
-                                                    runId: selectedReview.runId,
-                                                    value: "",
-                                                    target: "agent",
-                                                });
-                                        }
-                                        setOpenPopover((current) => {
-                                            if (open) {
-                                                return {
-                                                    runId: selectedReview.runId,
-                                                    kind: "instruction",
-                                                };
-                                            }
-                                            return current?.runId === selectedReview.runId &&
-                                                current.kind === "instruction"
-                                                ? null
-                                                : current;
-                                        });
-                                    }, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": t("observability.draftInstruction"), title: t("observability.draftInstruction"), className: "rounded-md p-2 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground", children: _jsx(IconPencil, { size: 16 }) }) }), _jsxs(PopoverContent, { align: "start", sideOffset: 8, className: "w-[min(26rem,calc(100vw-2rem))] p-3", children: [_jsx("div", { className: "mb-2 text-xs font-medium text-foreground", children: t("observability.updateInstructions") }), _jsx("p", { className: "mb-2 text-[11px] text-muted-foreground", children: t("observability.draftNotice") }), _jsxs("select", { value: activeInstructionDraft.target, onChange: (event) => setInstructionDraft({
-                                                        ...activeInstructionDraft,
-                                                        target: event.target
-                                                            .value,
-                                                    }), className: "w-full rounded-md border border-border bg-background px-2 py-1.5 text-xs text-foreground", "aria-label": t("observability.instructionTarget"), children: [_jsx("option", { value: "agent", children: t("observability.agentTarget") }), _jsx("option", { value: "developer", children: t("observability.developerTarget") }), _jsx("option", { value: "skill", children: t("observability.skillTarget") })] }), _jsx("textarea", { value: activeInstructionDraft.value, onChange: (event) => setInstructionDraft({
-                                                        ...activeInstructionDraft,
-                                                        value: event.target.value,
-                                                    }), rows: 4, className: "mt-2 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground outline-none focus:ring-2 focus:ring-ring", placeholder: t("observability.instructionPlaceholder") }), _jsx("button", { type: "button", onClick: () => saveInstruction(selectedReview.runId, selectedReview.threadId), disabled: !activeInstructionDraft.value.trim() ||
-                                                        instructionMutation.isPending, className: "mt-2 rounded-md border border-border px-2.5 py-1.5 text-xs font-medium text-foreground hover:bg-muted disabled:opacity-50", children: t("observability.saveUpdate") })] })] })] })] })) })] }));
+    const reviewMessages = reviewDetailQuery.data?.messages.length
+        ? reviewDetailQuery.data.messages
+        : selectedReview
+            ? [
+                ...(selectedReview.ask
+                    ? [{ role: "user", text: selectedReview.ask }]
+                    : []),
+                ...(selectedReview.answer
+                    ? [{ role: "assistant", text: selectedReview.answer }]
+                    : []),
+            ]
+            : [];
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "divide-y divide-border", children: reviews.map((review) => {
+                    const expanded = selectedRunId === review.runId;
+                    const triggerId = `review-trigger-${encodeURIComponent(review.runId)}`;
+                    const detailId = `review-details-${encodeURIComponent(review.runId)}`;
+                    return (_jsxs("div", { className: "min-w-0", children: [_jsxs("button", { id: triggerId, type: "button", "data-review-run-id": review.runId, "aria-expanded": expanded, "aria-controls": detailId, onClick: () => {
+                                    setSelectedRunId((current) => current === review.runId ? null : review.runId);
+                                    setOpenPopover(null);
+                                    setPreviewExpanded(false);
+                                }, className: "group flex w-full min-w-0 items-center gap-3 py-3 text-left first:pt-0 hover:bg-muted/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: [_jsx("span", { className: "h-16 w-24 shrink-0 overflow-hidden rounded-md bg-muted/60 sm:h-20 sm:w-28", children: _jsx(OutputPreview, { answer: review.answer, inlineAppTitle: review.inlineAppTitle, previewLabel: t("observability.reviewPreview"), compact: true }) }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "line-clamp-2 break-words text-sm font-medium text-foreground", children: review.ask || "-" }), _jsxs("span", { className: "mt-1 block truncate text-xs text-muted-foreground", children: [review.model, " \u00B7 ", timeAgo(review.createdAt)] })] }), _jsx(IconChevronRight, { size: 16, className: cn("shrink-0 text-muted-foreground transition-transform", expanded ? "rotate-90" : "group-hover:translate-x-0.5") })] }), _jsx("div", { id: detailId, role: "region", "aria-labelledby": triggerId, "data-review-detail-for": review.runId, hidden: !expanded, children: expanded && selectedReview && (_jsxs("div", { className: "grid min-w-0 gap-0 border-t border-border lg:grid-cols-2", children: [_jsxs("section", { "data-review-preview": true, className: "min-w-0 p-3 sm:p-4", "aria-label": t("observability.reviewPreview"), children: [_jsxs("div", { className: "relative max-h-[min(38rem,65dvh)] min-h-64 overflow-auto rounded-md border border-border bg-background", children: [_jsx(OutputPreview, { answer: selectedReview.answer, inlineApp: reviewDetailQuery.data?.app ?? undefined, maxAppHeight: 420, previewLabel: t("observability.reviewPreview") }), _jsx("button", { type: "button", "data-review-lightbox-trigger": true, "aria-label": t("observability.reviewPreview"), title: t("observability.reviewPreview"), onClick: () => setPreviewExpanded(true), className: "absolute right-2 top-2 rounded-md border border-border bg-background/95 p-2 text-muted-foreground shadow-sm transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: _jsx(IconArrowsMaximize, { size: 16 }) })] }), selectedNote?.value && (_jsxs("p", { className: "mt-3 flex items-start gap-2 whitespace-pre-wrap break-words text-xs text-muted-foreground", children: [_jsx(IconMessageCircle, { size: 14, className: "mt-0.5 shrink-0" }), selectedNote.value] }))] }), _jsxs("section", { "data-review-transcript": true, className: "flex min-w-0 flex-col border-t border-border lg:border-l lg:border-t-0", children: [_jsx("div", { className: "flex max-h-[min(38rem,65dvh)] min-h-64 flex-1 flex-col gap-3 overflow-y-auto overscroll-contain p-3 sm:p-4", children: reviewDetailQuery.isLoading ? (_jsxs("div", { role: "status", "aria-label": t("agentChat.common.loading"), className: "space-y-4", children: [_jsx(Skeleton, { className: "ml-auto h-14 w-3/4 rounded-xl" }), _jsx(Skeleton, { className: "h-20 w-5/6 rounded-xl" }), _jsx(Skeleton, { className: "ml-auto h-12 w-2/3 rounded-xl" })] })) : reviewDetailQuery.isError ? (_jsx("p", { role: "alert", className: "text-sm text-muted-foreground", children: t("agentChat.common.chunkLoadFailed") })) : (reviewMessages.map((message, index) => (_jsxs("div", { className: cn("max-w-[92%] whitespace-pre-wrap break-words rounded-xl px-3 py-2 text-sm", message.role === "user"
+                                                            ? "ml-auto bg-primary/10 text-foreground"
+                                                            : "mr-auto bg-muted text-foreground"), children: [message.role === "assistant" && (_jsx("span", { className: "mb-1 block text-[10px] font-medium text-muted-foreground", children: t("agentChat.common.agent") })), message.text] }, `${message.role}-${index}`)))) }), selectedReview.threadId && (_jsxs("a", { href: reviewThreadHref(selectedReview.threadId), target: "_blank", rel: "noreferrer", className: "flex w-fit items-center gap-1.5 px-3 pb-3 text-xs text-muted-foreground hover:text-foreground sm:px-4", children: [t("agentTask.openThread"), _jsx(IconExternalLink, { size: 14 })] }))] }), _jsxs("div", { className: "col-span-full flex shrink-0 items-center gap-1 border-t border-border px-3 py-2 sm:px-4", children: [_jsxs("div", { role: "group", "aria-label": t("observability.reviewFeedback"), className: "flex items-center gap-1", children: [_jsx("button", { type: "button", "aria-label": t("observability.thumbsUp"), "aria-pressed": selectedVote?.feedbackType === "thumbs_up", title: t("observability.thumbsUp"), disabled: feedbackMutation.isPending, onClick: () => saveFeedback(selectedReview.runId, selectedReview.threadId, "thumbs_up"), className: cn("rounded-md p-2 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:opacity-50", selectedVote?.feedbackType === "thumbs_up" &&
+                                                                "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400"), children: _jsx(IconThumbUp, { size: 16 }) }), _jsx("button", { type: "button", "aria-label": t("observability.thumbsDown"), "aria-pressed": selectedVote?.feedbackType === "thumbs_down", title: t("observability.thumbsDown"), disabled: feedbackMutation.isPending, onClick: () => saveFeedback(selectedReview.runId, selectedReview.threadId, "thumbs_down"), className: cn("rounded-md p-2 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:opacity-50", selectedVote?.feedbackType === "thumbs_down" &&
+                                                                "bg-rose-500/10 text-rose-600 dark:text-rose-400"), children: _jsx(IconThumbDown, { size: 16 }) })] }), _jsxs(Popover, { open: feedbackOpen, onOpenChange: (open) => {
+                                                        if (open) {
+                                                            setFeedbackNote((current) => current?.runId === selectedReview.runId
+                                                                ? current
+                                                                : { runId: selectedReview.runId, value: "" });
+                                                        }
+                                                        setOpenPopover((current) => {
+                                                            if (open) {
+                                                                return {
+                                                                    runId: selectedReview.runId,
+                                                                    kind: "feedback",
+                                                                };
+                                                            }
+                                                            return current?.runId === selectedReview.runId &&
+                                                                current.kind === "feedback"
+                                                                ? null
+                                                                : current;
+                                                        });
+                                                    }, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": t("observability.addFeedback"), title: t("observability.addFeedback"), className: "rounded-md p-2 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground", children: _jsx(IconMessageCircle, { size: 16 }) }) }), _jsxs(PopoverContent, { align: "start", sideOffset: 8, className: "w-[min(22rem,calc(100vw-2rem))] p-3", children: [_jsxs("label", { className: "block", children: [_jsx("span", { className: "sr-only", children: t("observability.feedbackNote") }), _jsx("textarea", { value: feedbackNote?.runId === selectedReview.runId
+                                                                                ? feedbackNote.value
+                                                                                : "", onChange: (event) => setFeedbackNote({
+                                                                                runId: selectedReview.runId,
+                                                                                value: event.target.value,
+                                                                            }), rows: 3, className: "w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground outline-none focus:ring-2 focus:ring-ring", placeholder: t("observability.feedbackPlaceholder") })] }), _jsx("button", { type: "button", onClick: () => saveNote(selectedReview.runId, selectedReview.threadId), disabled: !(feedbackNote?.runId === selectedReview.runId
+                                                                        ? feedbackNote.value.trim()
+                                                                        : "") || feedbackMutation.isPending, className: "mt-2 rounded-md bg-primary px-2.5 py-1.5 text-xs font-medium text-primary-foreground disabled:opacity-50", children: t("observability.saveFeedback") })] })] }), _jsxs(Popover, { open: instructionOpen, onOpenChange: (open) => {
+                                                        if (open) {
+                                                            setInstructionDraft((current) => current?.runId === selectedReview.runId
+                                                                ? current
+                                                                : {
+                                                                    runId: selectedReview.runId,
+                                                                    value: "",
+                                                                    target: "agent",
+                                                                });
+                                                        }
+                                                        setOpenPopover((current) => {
+                                                            if (open) {
+                                                                return {
+                                                                    runId: selectedReview.runId,
+                                                                    kind: "instruction",
+                                                                };
+                                                            }
+                                                            return current?.runId === selectedReview.runId &&
+                                                                current.kind === "instruction"
+                                                                ? null
+                                                                : current;
+                                                        });
+                                                    }, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": t("observability.draftInstruction"), title: t("observability.draftInstruction"), className: "rounded-md p-2 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground", children: _jsx(IconPencil, { size: 16 }) }) }), _jsxs(PopoverContent, { align: "start", sideOffset: 8, className: "w-[min(26rem,calc(100vw-2rem))] p-3", children: [_jsx("div", { className: "mb-2 text-xs font-medium text-foreground", children: t("observability.updateInstructions") }), _jsx("p", { className: "mb-2 text-[11px] text-muted-foreground", children: t("observability.draftNotice") }), _jsxs("select", { value: activeInstructionDraft.target, onChange: (event) => setInstructionDraft({
+                                                                        ...activeInstructionDraft,
+                                                                        target: event.target
+                                                                            .value,
+                                                                    }), className: "w-full rounded-md border border-border bg-background px-2 py-1.5 text-xs text-foreground", "aria-label": t("observability.instructionTarget"), children: [_jsx("option", { value: "agent", children: t("observability.agentTarget") }), _jsx("option", { value: "developer", children: t("observability.developerTarget") }), _jsx("option", { value: "skill", children: t("observability.skillTarget") })] }), _jsx("textarea", { value: activeInstructionDraft.value, onChange: (event) => setInstructionDraft({
+                                                                        ...activeInstructionDraft,
+                                                                        value: event.target.value,
+                                                                    }), rows: 4, className: "mt-2 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground outline-none focus:ring-2 focus:ring-ring", placeholder: t("observability.instructionPlaceholder") }), _jsx("button", { type: "button", onClick: () => saveInstruction(selectedReview.runId, selectedReview.threadId), disabled: !activeInstructionDraft.value.trim() ||
+                                                                        instructionMutation.isPending, className: "mt-2 rounded-md border border-border px-2.5 py-1.5 text-xs font-medium text-foreground hover:bg-muted disabled:opacity-50", children: t("observability.saveUpdate") })] })] })] })] })) })] }, review.runId));
+                }) }), _jsx(Dialog, { open: Boolean(selectedReview && previewExpanded), onOpenChange: setPreviewExpanded, children: selectedReview && (_jsxs(DialogContent, { "aria-describedby": undefined, "data-review-lightbox": true, className: "flex max-h-[min(90dvh,900px)] w-[calc(100vw-2rem)] max-w-6xl flex-col gap-0 overflow-hidden p-0", children: [_jsx(DialogHeader, { className: "shrink-0 border-b border-border px-4 py-3", children: _jsx(DialogTitle, { className: "line-clamp-2 break-words text-left", children: selectedReview.ask || t("observability.reviewPreview") }) }), _jsx("div", { className: "min-h-0 flex-1 overflow-auto overscroll-contain p-4", children: _jsx(OutputPreview, { answer: selectedReview.answer, inlineApp: reviewDetailQuery.data?.app ?? undefined, maxAppHeight: 720, previewLabel: t("observability.reviewPreview") }) })] })) })] }));
 }
 // ─── Tab: Feedback ──────────────────────────────────────────────────────
 function FeedbackTab({ days }) {

package/dist/client/observability/OutputPreview.d.ts

@@ -28,9 +28,10 @@ export type OutputPreviewModel = {
     title?: string;
     summary?: string;
     imageUrl?: string;
+    previewUrl?: string;
     tokens: DesignToken[];
 };
-export declare function parseOutputPreview(answer: string): OutputPreviewModel;
+export declare function parseOutputPreview(answer: string, baseOrigin?: string | undefined): OutputPreviewModel;
 export declare function OutputPreview({ answer, previewLabel, inlineApp, inlineAppTitle, compact, maxAppHeight, }: {
     answer: string;
     previewLabel: string;