@agent-native/core 0.84.18 → 0.84.21

package/corpus/core/src/cli/recap.ts

@@ -8,9 +8,9 @@
  * thin, deterministic glue around that:
  *
  *   gate          The security boundary: decide whether the recap runs at all
- *                 (skipping drafts, forks, bots, missing secrets, an invalid
- *                 agent/model, and PRs that touch recap-control files) and which
- *                 normalized backend agent to use.
+ *                 (skipping drafts, forks without secret access, bots, missing
+ *                 secrets, an invalid agent/model, and untrusted PRs that touch
+ *                 recap-control files) and which normalized backend agent to use.
  *   collect-diff  Collect the bounded base...head diff (excluding lockfiles,
  *                 build output, snapshots), cap it at ~600KB, and classify the
  *                 huge/tiny flags.
@@ -2846,7 +2846,14 @@ export async function runShot(
       });
     }
     const page = await context.newPage();
-    await page.goto(captureUrl, { waitUntil: "networkidle", timeout: 45_000 });
+    await page.goto(captureUrl, {
+      waitUntil: "domcontentloaded",
+      timeout: 45_000,
+    });
+    await page.waitForLoadState("load", { timeout: 15_000 }).catch(() => {
+      // The selectors below are the real readiness signal for screenshots.
+      // Some recap pages keep long-lived/background requests open.
+    });
     const selectors = [
       "[data-plan-document]",
       "[data-plan-block]",
@@ -3104,11 +3111,11 @@ export interface RecapGateInput {
 }
 
 /**
- * Files that, if a PR touches them, would let that PR rewrite repo-pinned skill
- * instructions or agent config the trusted recap job loads. The workflow runs
- * the recap CLI from trusted base-branch source (or an installed package), so
- * normal package code such as `packages/core/**` and recap workflow YAML can be
- * recapped without executing PR-modified CLI code.
+ * Files that, if an untrusted PR touches them, would let that PR rewrite
+ * repo-pinned skill instructions or root agent config the trusted recap job
+ * loads. The workflow runs the recap CLI from trusted base-branch source (or an
+ * installed package), so normal package code, template-local AGENTS.md files,
+ * and recap workflow YAML can be recapped without executing PR-modified CLI code.
  */
 function normalizeRecapSkillSourceMode(value: string | undefined): string {
   return (value || "auto").toLowerCase();
@@ -3124,10 +3131,10 @@ export function isRecapSensitivePath(
 ): boolean {
   const skillSource = options.skillSource;
   if (
-    /(^|\/)\.claude\//.test(p) ||
-    /(^|\/)CLAUDE\.md$/.test(p) ||
-    /(^|\/)AGENTS\.md$/.test(p) ||
-    /(^|\/)\.mcp\.json$/.test(p)
+    p.startsWith(".claude/") ||
+    p === "CLAUDE.md" ||
+    p === "AGENTS.md" ||
+    p === ".mcp.json"
   ) {
     return true;
   }
@@ -3227,16 +3234,18 @@ export function evaluateRecapGate(input: RecapGateInput): {
     );
   }
 
-  // Self-modifying guard: if this PR changes the visual-recap/visual-plan skill
-  // when CI is explicitly pinned to repo-local skill instructions, or any agent
-  // config the runner would load (.claude/**, CLAUDE.md, AGENTS.md, .mcp.json),
-  // skip the ENTIRE job — not just the agent — so a PR can never rewrite what
-  // the agent loads (skill, hooks, settings) and exfiltrate the publish/API
-  // secrets. In the default auto/latest modes the recap prompt comes from the
-  // trusted bundled skill, so visual skill and recap workflow files are ordinary
-  // reviewed content and may be recapped.
+  // Self-modifying guard: if an untrusted PR changes the visual-recap/visual-plan
+  // skill when CI is explicitly pinned to repo-local skill instructions, or root
+  // agent config the runner would load (.claude/**, CLAUDE.md, AGENTS.md,
+  // .mcp.json), skip the ENTIRE job — not just the agent — so a PR can never
+  // rewrite what the agent loads (skill, hooks, settings) and exfiltrate the
+  // publish/API secrets. In the default auto/latest modes the recap prompt comes
+  // from the trusted bundled skill, so visual skill and recap workflow files are
+  // ordinary reviewed content and may be recapped. Trusted write actors may edit
+  // recap-control files as reviewable content; running the recap is useful signal
+  // for those changes.
   const shouldApplySensitivePathGuard =
-    Boolean(pr) && (isFork || (!isPrivate && !isTrustedAuthor));
+    Boolean(pr) && !isTrustedAuthor && (isFork || !isPrivate);
   const hits = shouldApplySensitivePathGuard
     ? input.changedFiles.filter((p) => isRecapSensitivePath(p, { skillSource }))
     : [];
@@ -3458,13 +3467,13 @@ export function appendGateSkipLine(
   existingBody: string,
   skipLine: string,
 ): string {
-  // Remove any previous gate-skip line (pattern: `_Recap skipped for ...._`)
-  const withoutPrev = existingBody
-    .split("\n")
-    .filter((l) => !/_Recap skipped for .+_$/.test(l.trim()))
-    .join("\n")
-    .trimEnd();
-  return `${withoutPrev}\n\n${skipLine}`;
+  const planIdMatch = existingBody.match(
+    /<!--\s*plan-id:\s*([A-Za-z0-9_-]{1,64})\s*-->/,
+  );
+  const planIdMarker = planIdMatch
+    ? `\n\n<!-- plan-id: ${planIdMatch[1]} -->`
+    : "";
+  return `${buildGateSkipCommentBody()}${planIdMarker}\n\n${skipLine}`;
 }
 
 /* -------------------------------------------------------------------------- */
@@ -4095,11 +4104,11 @@ Usage:
     environment (HAS_PLAN / HAS_ANTHROPIC / HAS_OPENAI === 'true', AGENT,
     VISUAL_RECAP_MODEL), the repo from $GITHUB_REPOSITORY, and the PR's changed
     files from the GitHub REST API (paged, with GH_TOKEN/GITHUB_TOKEN). Skips
-    drafts, forks, bot authors, the missing-secret case, an invalid agent/model,
-    and any PR that touches recap-control files (repo-pinned skill instructions,
-    .claude/**, CLAUDE.md, AGENTS.md, .mcp.json) — failing CLOSED on any
-    file-list error. Writes run=<true|false> and agent=<claude|codex> to
-    $GITHUB_OUTPUT.
+    drafts, forks without secret access, bot authors, the missing-secret case, an
+    invalid agent/model, and any untrusted PR that touches recap-control files
+    (repo-pinned skill instructions, .claude/**, root CLAUDE.md, root AGENTS.md,
+    root .mcp.json) — failing CLOSED on any file-list error. Writes
+    run=<true|false> and agent=<claude|codex> to $GITHUB_OUTPUT.
   npx @agent-native/core@latest recap agent-summary
     Read the captured Claude/Codex result file and write a sanitized one-line
     summary to stdout and $GITHUB_OUTPUT (summary). Used only when no plan URL

package/corpus/core/src/client/AssistantChat.tsx

@@ -37,9 +37,11 @@ import React, {
 import { LLM_MISSING_CREDENTIALS_MESSAGE } from "../agent/engine/credential-errors.js";
 import type { ReasoningEffort } from "../shared/reasoning-effort.js";
 import {
+  getActiveRunActivityTool,
   getActiveRun,
   resolveReconnectAfterSeq,
   setActiveRun,
+  updateActiveRunActivity,
   updateActiveRunSeq,
 } from "./active-run-state.js";
 import {
@@ -553,6 +555,23 @@ function reconnectContentFollowKey(content: ContentPart[]): string {
   return content.map(contentPartFollowKey).join("|");
 }
 
+export function reconnectActivityFallbackContent(
+  toolName: string | null | undefined,
+): ContentPart[] {
+  const tool = toolName?.trim();
+  if (!tool) return [];
+  return [
+    {
+      type: "tool-call",
+      toolCallId: `reconnect-activity:${tool}`,
+      toolName: tool,
+      argsText: "",
+      args: {},
+      activity: true,
+    },
+  ];
+}
+
 const RECOVERY_USER_MESSAGE_PREFIXES = [
   "Continue from where you left off",
   "Continue from where you stopped",
@@ -1395,6 +1414,9 @@ const AssistantChatInner = forwardRef<
   const [runningActivityLabel, setRunningActivityLabel] = useState<
     string | null
   >(null);
+  const [runningActivityTool, setRunningActivityTool] = useState<string | null>(
+    null,
+  );
   // Delayed-reveal state for the activity label (see ACTIVITY_LABEL_REVEAL_DELAY_MS).
   // `latest` holds the most recent activity label; `surfaced` flips true once the
   // reveal timer fires; `timer` is the pending one-shot reveal.
@@ -1409,6 +1431,8 @@ const AssistantChatInner = forwardRef<
     latestActivityLabelRef.current = null;
     activityLabelSurfacedRef.current = false;
     setRunningActivityLabel(null);
+    setRunningActivityTool(null);
+    updateActiveRunActivity(null);
   }, []);
   const [reconnectContent, setReconnectContent] = useState<ContentPart[]>([]);
   // When stop is clicked during reconnect, keep content visible (don't wipe it)
@@ -1445,6 +1469,18 @@ const AssistantChatInner = forwardRef<
       : isReconnecting && reconnectContent.length > 0
         ? "Reconnecting"
         : "Thinking";
+  const reconnectActivityContent = useMemo(
+    () =>
+      (isReconnecting || reconnectFrozen) && reconnectContent.length === 0
+        ? reconnectActivityFallbackContent(runningActivityTool)
+        : [],
+    [
+      isReconnecting,
+      reconnectFrozen,
+      reconnectContent.length,
+      runningActivityTool,
+    ],
+  );
   const lastBroadcastRunningRef = useRef(isRunning);
   const tiptapRef = useRef<TiptapComposerHandle>(null);
   // Stable ref to the "stop active run" action so addToQueue can abort
@@ -1700,11 +1736,14 @@ const AssistantChatInner = forwardRef<
 
       reconnectRunIdRef.current = runId;
       const afterSeq = resolveReconnectAfterSeq(threadId, runId);
+      const storedActivityTool = getActiveRunActivityTool(threadId, runId);
+      setRunningActivityTool(storedActivityTool);
       setReconnectAfterSeq(afterSeq);
       setActiveRun({
         threadId,
         runId,
         lastSeq: afterSeq > 0 ? afterSeq - 1 : -1,
+        ...(storedActivityTool ? { activityTool: storedActivityTool } : {}),
       });
       setIsReconnecting(true);
       setReconnectFrozen(false);
@@ -2407,7 +2446,10 @@ const AssistantChatInner = forwardRef<
       const label =
         typeof detail?.label === "string" ? detail.label.trim() : "";
       if (!label) return;
+      const tool = typeof detail?.tool === "string" ? detail.tool.trim() : "";
       setIsAutoResuming(false);
+      setRunningActivityTool(tool || null);
+      updateActiveRunActivity(tool || null);
       latestActivityLabelRef.current = label;
       // Already past the delay → keep the visible label current.
       if (activityLabelSurfacedRef.current) {
@@ -3549,6 +3591,13 @@ const AssistantChatInner = forwardRef<
                         reconnectContent.length > 0 && (
                           <ReconnectStreamMessage content={reconnectContent} />
                         )}
+                      {(isReconnecting || reconnectFrozen) &&
+                        reconnectAfterSeq > 0 &&
+                        reconnectActivityContent.length > 0 && (
+                          <ReconnectStreamMessage
+                            content={reconnectActivityContent}
+                          />
+                        )}
                       {showRunningInUI && (
                         <RunningActivityStatus label={runningStatusLabel} />
                       )}

package/corpus/core/src/client/PoweredByBadge.tsx

@@ -2,13 +2,20 @@ import { IconBrandGithub } from "@tabler/icons-react";
 import type { CSSProperties } from "react";
 
 import { appPath } from "./api-path.js";
+import { cn } from "./utils.js";
 
 export interface PoweredByBadgeProps {
   position?: "bottom-right" | "bottom-left";
+  /** Plain shows the logo only with no surrounding badge chrome. */
+  variant?: "badge" | "plain";
+  /** When true, positioning is handled by the parent container. */
+  embedded?: boolean;
 }
 
 export interface OpenSourceBadgeProps {
   position?: "bottom-left" | "bottom-right";
+  /** When true, positioning is handled by the parent container. */
+  embedded?: boolean;
 }
 
 const containerStyle = (
@@ -51,6 +58,8 @@ const darkQuery = "(prefers-color-scheme: dark)";
  */
 export function PoweredByBadge({
   position = "bottom-right",
+  variant = "badge",
+  embedded = false,
 }: PoweredByBadgeProps) {
   // Allow hiding via env var
   const hidden =
@@ -61,13 +70,14 @@ export function PoweredByBadge({
 
   const logoOnLight = appPath("/agent-native-logo-light.svg");
   const logoOnDark = appPath("/agent-native-logo-dark.svg");
+  const isPlain = variant === "plain";
 
   return (
     <>
       <style>{`
         .an-powered-logo {
           display: block;
-          height: 14px;
+          height: ${isPlain ? "16.2px" : "14px"};
           width: auto;
           flex: none;
         }
@@ -75,14 +85,25 @@ export function PoweredByBadge({
           display: none;
         }
         @media (max-width: 640px) {
-          .an-powered-badge {
+          .an-powered-badge:not(.an-powered-badge-embedded) {
             position: static !important;
             margin: 0.75rem auto 0 !important;
             width: max-content;
             max-width: calc(100vw - 2rem);
           }
         }
-        .dark .an-powered-badge {
+        .an-powered-badge-plain {
+          background: transparent !important;
+          border-color: transparent !important;
+          backdrop-filter: none !important;
+          -webkit-backdrop-filter: none !important;
+          padding: 0 !important;
+          opacity: 1 !important;
+        }
+        .an-powered-badge-plain:hover {
+          opacity: 0.82 !important;
+        }
+        .dark .an-powered-badge:not(.an-powered-badge-plain) {
           background: rgba(255, 255, 255, 0.06) !important;
           border-color: rgba(255, 255, 255, 0.08) !important;
           color: rgba(215, 215, 215, 0.94) !important;
@@ -94,7 +115,7 @@ export function PoweredByBadge({
           display: block;
         }
         @media ${darkQuery} {
-          .an-powered-badge {
+          .an-powered-badge:not(.an-powered-badge-plain) {
             background: rgba(255, 255, 255, 0.06) !important;
             border-color: rgba(255, 255, 255, 0.08) !important;
             color: rgba(215, 215, 215, 0.94) !important;
@@ -106,7 +127,7 @@ export function PoweredByBadge({
             display: block;
           }
         }
-        .light .an-powered-badge {
+        .light .an-powered-badge:not(.an-powered-badge-plain) {
           background: rgba(0, 0, 0, 0.05) !important;
           border-color: rgba(0, 0, 0, 0.06) !important;
           color: rgba(95, 95, 95, 0.95) !important;
@@ -117,19 +138,19 @@ export function PoweredByBadge({
         .light .an-powered-logo-dark {
           display: none;
         }
-        .an-powered-badge:hover {
+        .an-powered-badge:not(.an-powered-badge-plain):hover {
           opacity: 1 !important;
           color: rgba(70, 70, 70, 1) !important;
         }
         @media ${darkQuery} {
-          .an-powered-badge:hover {
+          .an-powered-badge:not(.an-powered-badge-plain):hover {
             color: rgba(238, 238, 238, 1) !important;
           }
         }
-        .dark .an-powered-badge:hover {
+        .dark .an-powered-badge:not(.an-powered-badge-plain):hover {
           color: rgba(238, 238, 238, 1) !important;
         }
-        .light .an-powered-badge:hover {
+        .light .an-powered-badge:not(.an-powered-badge-plain):hover {
           color: rgba(70, 70, 70, 1) !important;
         }
       `}</style>
@@ -137,11 +158,24 @@ export function PoweredByBadge({
         href="https://agent-native.com"
         target="_blank"
         rel="noopener noreferrer"
-        className="an-powered-badge"
-        style={containerStyle(position)}
+        className={cn(
+          "an-powered-badge",
+          isPlain && "an-powered-badge-plain",
+          embedded && "an-powered-badge-embedded",
+        )}
+        style={
+          embedded
+            ? {
+                display: "inline-flex",
+                alignItems: "center",
+                textDecoration: "none",
+                transition: "opacity 0.2s",
+              }
+            : containerStyle(position)
+        }
         aria-label="Built with Agent Native"
       >
-        <span>Built with</span>
+        {!isPlain && <span>Built with</span>}
         <img
           src={logoOnLight}
           alt="Agent Native"
@@ -158,12 +192,13 @@ export function PoweredByBadge({
 }
 
 /**
- * Small GitHub badge: "100% free and open source"
+ * Small GitHub badge: "Free and open source"
  *
  * Intended to pair with PoweredByBadge on public pages.
  */
 export function OpenSourceBadge({
   position = "bottom-left",
+  embedded = false,
 }: OpenSourceBadgeProps) {
   const hidden =
     (import.meta.env as Record<string, string | undefined>)
@@ -189,7 +224,7 @@ export function OpenSourceBadge({
           opacity: 0.95 !important;
         }
         @media (max-width: 640px) {
-          .an-open-source-badge {
+          .an-open-source-badge:not(.an-open-source-badge-embedded) {
             position: static !important;
             margin: 1rem auto 0 !important;
             width: max-content;
@@ -227,11 +262,29 @@ export function OpenSourceBadge({
         href="https://github.com/BuilderIO/agent-native"
         target="_blank"
         rel="noopener noreferrer"
-        className="an-open-source-badge"
-        style={containerStyle(position)}
+        className={cn(
+          "an-open-source-badge",
+          embedded && "an-open-source-badge-embedded",
+        )}
+        style={
+          embedded
+            ? {
+                display: "flex",
+                alignItems: "center",
+                gap: 6,
+                fontSize: 12,
+                fontFamily:
+                  '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+                fontWeight: 600,
+                lineHeight: 1,
+                textDecoration: "none",
+                transition: "opacity 0.2s, color 0.2s",
+              }
+            : containerStyle(position)
+        }
       >
         <IconBrandGithub aria-hidden="true" stroke={1.8} />
-        <span>100% free and open source</span>
+        <span>Free and open source</span>
       </a>
     </>
   );

package/corpus/core/src/client/active-run-state.ts

@@ -4,6 +4,13 @@ export interface ActiveRunState {
   threadId: string;
   runId: string;
   lastSeq: number;
+  activityTool?: string | null;
+}
+
+function normalizeActivityTool(toolName: unknown): string | null {
+  if (typeof toolName !== "string") return null;
+  const tool = toolName.trim();
+  return tool || null;
 }
 
 export function setActiveRun(state: ActiveRunState): void {
@@ -30,6 +37,29 @@ export function updateActiveRunSeq(seq: number): void {
   }
 }
 
+export function updateActiveRunActivity(
+  toolName: string | null | undefined,
+): void {
+  const state = getActiveRun();
+  if (!state) return;
+  const activityTool = normalizeActivityTool(toolName);
+  if (activityTool) {
+    setActiveRun({ ...state, activityTool });
+    return;
+  }
+  const { activityTool: _activityTool, ...nextState } = state;
+  setActiveRun(nextState);
+}
+
+export function getActiveRunActivityTool(
+  threadId: string,
+  runId: string,
+): string | null {
+  const stored = getActiveRun();
+  if (stored?.threadId !== threadId || stored.runId !== runId) return null;
+  return normalizeActivityTool(stored.activityTool);
+}
+
 export function clearActiveRun(): void {
   try {
     sessionStorage.removeItem(STORAGE_KEY);

package/corpus/core/src/client/agent-chat-adapter.ts

@@ -944,6 +944,8 @@ function incrementalActionGuidance(tool: string): string | undefined {
     case "generate-design":
     case "update-design":
       return 'if an existing design file or snapshot is already in history, especially after a Design variant pick, stop retrying `generate-design`: call `get-design-snapshot` for the selected file, then call `edit-design` once on that same `fileId` (`mode: "replace-file"` for a compact full-file replacement, or search/replace for smaller edits). Use `generate-design` only for a brand-new compact first file when no target file exists yet';
+    case "edit-design":
+      return "retry with a smaller `edit-design` payload: prefer a handful of exact search/replace edits against the already-snapshotted file, and avoid `replacementContent` for a huge full-file rewrite. If a selected variant needs expansion, upgrade the highest-value visible sections first, save once, and summarize any remaining refinements";
     case "present-design-variants":
       return 'call `present-design-variants` with concise labels, descriptions, accent colors, and feature bullets; omit large `content` HTML when needed so the action can render compact representative screens. After the user picks a direction, delete unchosen screens, snapshot the selected `fileId`, and refine that same file with `edit-design` (`mode: "replace-file"` for placeholder expansion). Do not call `generate-design` after the variant pick';
     case "create-visual-plan":
@@ -980,7 +982,9 @@ function autoContinueMessage(signal: AgentAutoContinueSignal): string {
   // toward a compact first version it can actually finish in a single run, then
   // incremental refinements — never re-streaming the same oversized payload.
   const cutoffPreparingAction =
-    signal.reason === "run_timeout" || signal.reason === "stream_ended";
+    signal.reason === "run_timeout" ||
+    signal.reason === "stream_ended" ||
+    signal.reason === "no_progress";
   let actionInputNote = "";
   if (cutoffPreparingAction && tool) {
     const guidance = incrementalActionGuidance(tool);

package/corpus/core/src/client/extensions/EmbeddedExtension.tsx

@@ -9,8 +9,10 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import { useNavigate } from "react-router";
 
 import { extensionPath } from "../../extensions/path.js";
+import { THEME_VAR_NAMES } from "../../extensions/theme.js";
 import { sendToAgentChat } from "../agent-chat.js";
 import { agentNativePath } from "../api-path.js";
+import { useAppearance } from "../appearance.js";
 import {
   Popover,
   PopoverContent,
@@ -53,6 +55,22 @@ interface Extension {
   };
 }
 
+// Read the host app's *actual* computed theme values for the shared token set
+// (THEME_VAR_NAMES). The iframe ships with a generic baked palette
+// (getThemeVars); syncing the live values keeps embedded extensions visually
+// identical to the surrounding app even when a template overrides the default
+// palette (e.g. analytics uses a neutral-gray dark theme, not near-black).
+function readHostThemeVars(): Record<string, string> {
+  if (typeof document === "undefined") return {};
+  const computed = getComputedStyle(document.documentElement);
+  const vars: Record<string, string> = {};
+  for (const name of THEME_VAR_NAMES) {
+    const value = computed.getPropertyValue(name).trim();
+    if (value) vars[name] = value;
+  }
+  return vars;
+}
+
 function serializeChatValue(value: unknown): string | undefined {
   if (value === undefined || value === null) return undefined;
   if (typeof value === "string") return value;
@@ -112,7 +130,11 @@ export function EmbeddedExtension({
     onReadyRef.current?.();
   };
   const [height, setHeight] = useState<number>(initialHeight);
-  const [isDark, setIsDark] = useState(false);
+  const [isDark, setIsDark] = useState(
+    () =>
+      typeof document !== "undefined" &&
+      document.documentElement.classList.contains("dark"),
+  );
   // (audit H4) Mirror ExtensionViewer's role-aware gating; deny-by-default until
   // the iframe's render binding announcement arrives.
   const bridgeContextRef = useRef<BridgePolicyContext>({
@@ -200,11 +222,16 @@ export function EmbeddedExtension({
     readyFiredRef.current = false;
   }, [extensionId, extension?.updatedAt]);
 
+  const appearance = useAppearance();
+
   useEffect(() => {
     const win = iframeRef.current?.contentWindow;
     if (!win) return;
-    win.postMessage({ type: "agent-native-theme-update", isDark }, "*");
-  }, [isDark]);
+    win.postMessage(
+      { type: "agent-native-theme-update", isDark, vars: readHostThemeVars() },
+      "*",
+    );
+  }, [isDark, appearance]);
 
   // Forward slot context whenever it changes. The iframe's own load handler
   // posts the initial value once it's ready; this effect handles updates.
@@ -372,6 +399,17 @@ export function EmbeddedExtension({
             { type: "agent-native-slot-context", context: context ?? {} },
             "*",
           );
+          // Re-assert theme once the iframe document is live. The src bakes in
+          // the initial dark state, but this covers the race where isDark
+          // settled before the iframe's message listener existed.
+          iframeRef.current?.contentWindow?.postMessage(
+            {
+              type: "agent-native-theme-update",
+              isDark,
+              vars: readHostThemeVars(),
+            },
+            "*",
+          );
           // Fallback readiness signal in case the extension never reports a
           // height (e.g. fixed-height content that skips auto-resize).
           fireReady();