@agent-native/core 0.69.0 → 0.70.1

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

@@ -590,12 +590,15 @@ no labels or copy. The renderer drops borders, sketch, and color into the
 skeleton register automatically. Never escape to a \`custom-html\` document block
 to fake a loader.
 
-**Editing an existing mockup.** To change one element, text, or color in an
-existing html mockup, call \`update-visual-plan\`
-with \`contentPatches: [{ op: "patch-wireframe-html", blockId, edits: [{ find,
+**Editing an existing mockup.** In hosted mode, to change one element, text, or
+color in an existing html mockup, do not regenerate the frame — call
+\`update-visual-plan\` with
+\`contentPatches: [{ op: "patch-wireframe-html", blockId, edits: [{ find,
 replace }] }]\`. Each \`find\` is a unique snippet of the current html (read it
 first with \`get-visual-plan\`); set \`all: true\` on an edit to replace every
-occurrence. The result is re-sanitized.
+occurrence. The result is re-sanitized. In local-files privacy mode, do not call
+hosted Plan tools; edit the local MDX source directly and rerun the local
+check/serve or verify command for \`<plan-dir>\`.
 
 **Treat the wireframe border as part of the visible design.** Always wrap HTML
 wireframe content in a root container with real inner padding before drawing
@@ -1239,13 +1242,14 @@ surface.
   approach and options in the plan. Ask a clarifying question only when an
   ambiguity would change the design and you cannot resolve it from the code; use
   the host agent's normal ask-user-question flow and batch 2-4 high-leverage
-  questions before finalizing. Do not call \`create-visual-questions\` from
-  \`/visual-plan\`. Otherwise state the assumption explicitly and proceed, and
-  keep anything unresolved in the plan's single bottom \`question-form\` Open
-  Questions block. For complex plans, do a final open-question pass before
-  handoff: if a decision would affect architecture, scope, UX, data shape, or
-  rollout, either decide it in the plan with rationale or put it in that bottom
-  form with a recommended default.
+  questions before finalizing. Do not call \`create-visual-questions\` for
+  ordinary clarification or preflight; reserve it for the visual-intake mode when
+  the user explicitly asks for a visual intake questionnaire. Otherwise state the
+  assumption explicitly and proceed, and keep anything unresolved in the plan's
+  single bottom \`question-form\` Open Questions block. For complex plans, do a
+  final open-question pass before handoff: if a decision would affect
+  architecture, scope, UX, data shape, or rollout, either decide it in the plan
+  with rationale or put it in that bottom form with a recommended default.
 - **The plan is the approval gate.** After surfacing it, ask the user to review
   and approve before you write code, and name which files/areas the work touches.
   Presenting the plan and requesting sign-off is the approval step — do not ask a
@@ -1290,6 +1294,11 @@ is reachable. Local-files privacy mode (after Tool Guidance) is the exception.
 
 ## Core Workflow
 
+This section describes the default hosted Plan MCP workflow. If
+\`AGENT_NATIVE_PLANS_MODE=local-files\` is set, or the user asks for fully local
+files/no hosted Plan writes, use **Local-Files Privacy Mode** instead; carry
+forward only the code-research and plan-composition guidance here.
+
 1. Follow the host agent's normal planning flow: inspect the codebase, delegate
    wide exploration when useful, gather the info needed, and ask native
    clarifying questions as needed before generating the plan. If a source plan
@@ -1336,11 +1345,13 @@ is reachable. Local-files privacy mode (after Tool Guidance) is the exception.
    backend, data, multi-file, or risky), also kick off the self-review pass in
    **Self-Review Before Handoff** while the user reads, instead of blocking the
    handoff on it.
-5. Call \`get-plan-feedback\` before editing, after review, after any long pause,
+5. For hosted plans, call \`get-plan-feedback\` before editing, after review,
+   after any long pause,
    and before the final response. Treat \`anchorDetails\`, resolver intent, recent
    review events, and any focused screenshots from browser handoff as the source
    of truth for exactly what changed and exactly what each comment points at.
-6. Apply changes with \`update-visual-plan\`, preferring targeted \`contentPatches\`.
+6. For hosted plans, apply changes with \`update-visual-plan\`, preferring
+   targeted \`contentPatches\`.
    Treat the top-level \`content\` payload as a full replacement, not a merge; do
    not send a partial \`content\` object to add a canvas or one block. If a full
    replacement is unavoidable, first read the complete plan source/content, carry
@@ -1348,8 +1359,8 @@ is reachable. Local-files privacy mode (after Tool Guidance) is the exception.
    afterward so the document body was not truncated. When the user wants
    source-control friendly edits, use \`patch-visual-plan-source\` against the MDX
    files instead of regenerating the plan.
-7. Export with \`export-visual-plan\` only when the user wants a shareable receipt
-   or repo-check-in artifacts.
+7. For hosted plans, export with \`export-visual-plan\` only when the user wants a
+   shareable receipt or repo-check-in artifacts.
 
 ## Self-Review Before Handoff
 
@@ -1545,11 +1556,12 @@ The local-files contract is:
   wants the artifact checked into the repo, or use a repo-ignored/temporary
   folder such as \`.agent-native/plans/<slug>/\` or \`/tmp/agent-native-plans/<slug>/\`
   when it should not be checked in. The folder contains \`plan.mdx\`, optional
-  \`canvas.mdx\`, optional \`prototype.mdx\`, and optional \`.plan-state.json\`.
-- Run \`npx @agent-native/core@latest plan local check --dir plans/<slug>\`
-  before serving, then run
-  \`npx @agent-native/core@latest plan local serve --dir plans/<slug> --kind plan --open\`.
-  Report the returned local bridge URL from stdout or \`plans/<slug>/.plan-url\`.
+  \`canvas.mdx\`, optional \`prototype.mdx\`, and optional \`.plan-state.json\`. Use
+  that exact chosen folder as \`<plan-dir>\` in every local CLI command below.
+- Run \`npx @agent-native/core@latest plan local check --dir <plan-dir>\` before
+  serving, then run
+  \`npx @agent-native/core@latest plan local serve --dir <plan-dir> --kind plan --open\`.
+  Report the returned local bridge URL from stdout or \`<plan-dir>/.plan-url\`.
   Treat \`.plan-url\` as a local token file and do not commit it. The URL opens
   the hosted Plan UI but reads from the localhost bridge on this machine, so it
   is not shareable across machines. On macOS, \`--open\` prefers Chromium browsers;
@@ -1558,7 +1570,7 @@ The local-files contract is:
   running locally with the same \`PLAN_LOCAL_DIR\`, the \`/local-plans/<slug>\` route
   is also valid.
 - For headless verification, run
-  \`npx @agent-native/core@latest plan local verify --dir plans/<slug> --kind plan\`.
+  \`npx @agent-native/core@latest plan local verify --dir <plan-dir> --kind plan\`.
   It starts the bridge, checks the private-network preflight and JSON payload,
   prints diagnostics, and exits. If the browser hangs on "Loading plan", fetch
   the \`bridgeUrl\` from the verify/serve JSON to read the concrete validation
@@ -1580,6 +1592,11 @@ otherwise approved by the user.
 
 ## Interpreting comment anchors
 
+This section applies to hosted plans with \`get-plan-feedback\` /
+\`update-visual-plan\`. In local-files mode, do not call hosted feedback or update
+tools; interpret file/chat feedback directly, edit the MDX files, rerun the
+local bridge check/serve/verify command, and report the new local URL.
+
 \`get-plan-feedback\` returns rich anchors — read them before acting on any comment.
 
 - **Coordinate frames.** \`targetX\`/\`targetY\` are percentages *within* the
@@ -1703,8 +1720,9 @@ In local-files mode:
   \`npx @agent-native/core@latest plan blocks --out plan-blocks.md\` when the Plan
   MCP connector is not registered; it calls the public no-auth
   \`get-plan-blocks\` route and sends no recap content. If network access is
-  unavailable, use the bundled references and validate with
-  \`plan local check\` / \`plan local serve\`. For \`checklist\` and \`question-form\`,
+  unavailable, use the bundled references and validate the MDX with
+  \`plan local check\`; do not run \`plan local serve\` unless the hosted Plan UI is
+  reachable or a local Plan app is already running. For \`checklist\` and \`question-form\`,
   copy the catalog examples verbatim: checklist items need \`id\` and \`label\`;
   question-form questions need \`id\`, \`title\`, and \`mode\`; and each option needs
   \`id\` and \`label\`. \`plan local check\` validates these required fields against
@@ -1714,21 +1732,24 @@ In local-files mode:
   folder such as \`.agent-native/plans/<slug>/\` or \`/tmp/agent-native-plans/<slug>/\`
   when it should not be checked in. The folder contains \`plan.mdx\`, optional
   \`canvas.mdx\`, optional \`prototype.mdx\`, and optional \`.plan-state.json\`. Set
-  \`kind: "recap"\` and \`localOnly: true\` in frontmatter/state when authoring
-  the source.
-- Run \`npx @agent-native/core@latest plan local check --dir plans/<slug>\`
-  before serving, then run
-  \`npx @agent-native/core@latest plan local serve --dir plans/<slug> --kind recap --open\`.
-  Report the returned local bridge URL from stdout or \`plans/<slug>/.plan-url\`.
+  \`kind: "recap"\` and \`localOnly: true\` in frontmatter/state when authoring the
+  source. Use that exact chosen folder as \`<plan-dir>\` in every local CLI command
+  below.
+- Run \`npx @agent-native/core@latest plan local check --dir <plan-dir>\` before
+  any preview. When the hosted Plan UI is reachable, run
+  \`npx @agent-native/core@latest plan local serve --dir <plan-dir> --kind recap --open\`.
+  Report the returned local bridge URL from stdout or \`<plan-dir>/.plan-url\`.
   Treat \`.plan-url\` as a local token file and do not commit it. The URL opens
   the hosted Plan UI but reads from the localhost bridge on this machine, so it
   is not shareable across machines. On macOS, \`--open\` prefers Chromium browsers;
   if Safari opens, switch to Chrome/Chromium because Safari can block the hosted
   HTTPS page from fetching the HTTP localhost bridge. If the Plan app itself is
   running locally with the same \`PLAN_LOCAL_DIR\`, the \`/local-plans/<slug>\` route
-  is also valid.
+  is also valid. In a truly offline environment, hand off the local \`<plan-dir>\`
+  path after \`plan local check\` and note that interactive preview requires either
+  network access to the hosted Plan UI or a running local Plan app.
 - For headless verification, run
-  \`npx @agent-native/core@latest plan local verify --dir plans/<slug> --kind recap\`.
+  \`npx @agent-native/core@latest plan local verify --dir <plan-dir> --kind recap\`.
   It starts the bridge, checks the private-network preflight and JSON payload,
   prints diagnostics, and exits. If the browser hangs on "Loading plan", fetch
   the \`bridgeUrl\` from the verify/serve JSON to read the concrete validation
@@ -1739,7 +1760,9 @@ In local-files mode:
   \`set-resource-visibility\`, or any hosted Plan tool for that recap except the
   schema-only block catalog lookup above.
 - Treat review feedback as file or chat feedback: update the MDX files directly,
-  rerun the local bridge command, and summarize the new local bridge URL.
+  rerun \`plan local check\`, and rerun \`serve\` or \`verify\` only when that preview
+  path is available. Summarize the new local URL when one exists; otherwise
+  summarize the checked local folder path.
   Hosted comments, sharing, screenshots, usage attachment, and PR sticky comment
   publishing are unavailable until the user explicitly opts into publishing.
 
@@ -1955,10 +1978,10 @@ and re-import before reporting the link. A text-match screenshot is not enough;
 visually inspect the captured image. When no browser is available (for example
 a headless CI agent), state that in the recap handoff instead.
 
-## Top Canvas Recaps — read \`../visual-plans/references/canvas.md\`
+## Top Canvas Recaps — read \`../visual-plan/references/canvas.md\`
 
 When a recap includes a top canvas, storyboard, or flow view, READ
-\`../visual-plans/references/canvas.md\` before authoring \`canvas.mdx\`. Recap
+\`../visual-plan/references/canvas.md\` before authoring \`canvas.mdx\`. Recap
 canvas artboards must use the same HTML wireframe path as good document-body
 wireframes: \`<Screen surface="..." html={...} />\` with a semantic HTML fragment.
 Do not author fresh kit-tree children such as \`<FrameScreen>\`, \`<Card>\`,
@@ -1972,8 +1995,8 @@ assume it used the legacy kit path and replace it with an HTML screen.
 
 In local-files privacy mode, run \`plan local check\` first, then report the local
 bridge URL from
-\`npx @agent-native/core@latest plan local serve --dir plans/<slug> --kind recap --open\`
-or from \`plans/<slug>/.plan-url\`. It opens the hosted Plan UI but reads from the
+\`npx @agent-native/core@latest plan local serve --dir <plan-dir> --kind recap --open\`
+or from \`<plan-dir>/.plan-url\`. It opens the hosted Plan UI but reads from the
 localhost bridge on this machine, so it is not shareable across machines. If the
 Plan app itself is running locally with the same \`PLAN_LOCAL_DIR\`, the
 \`/local-plans/<slug>\` route is also valid. Do not invent a hosted database URL
@@ -2138,7 +2161,8 @@ installed as plain text and no MCP tools are registered after discovery, run
 \`npx @agent-native/core@latest plan blocks --out plan-blocks.md\` and read that
 file first. The CLI command calls the public no-auth \`get-plan-blocks\` route and
 sends no plan/recap content. If network access is unavailable, use the bundled
-references and validate with \`plan local check\` / \`plan local serve\`.
+references and validate with \`plan local check\`; run \`plan local serve\` only
+when the hosted Plan UI is reachable or a local Plan app is already running.
 
 The catalog returns the authoritative, always-current block vocabulary generated
 live from the app's own block registry — the same config the renderer and MDX
@@ -2246,14 +2270,17 @@ inferred (not extracted) as inferred in prose.
 
 ## Bidirectional Loop
 
-Because a recap is a real, editable plan, the same review loop as forward plans
-applies: a reviewer can annotate any block, and the coding agent reads
-\`get-plan-feedback\` to drive fixes back into the code — annotation → agent →
-diff, the same close-the-loop flow forward plans use. After a reviewer annotates
-a block, call \`get-plan-feedback\` to read the structured feedback, then either
-update the recap with \`create-visual-recap\` (passing the existing \`planId\` to
-replace it in place) or apply targeted changes with \`update-visual-plan\`. The
-loop is live and wired. The one thing not yet automatic is PR-comment-triggered
+In hosted mode, because a recap is a real, editable plan, the same review loop
+as forward plans applies: a reviewer can annotate any block, and the coding
+agent reads \`get-plan-feedback\` to drive fixes back into the code — annotation →
+agent → diff, the same close-the-loop flow forward plans use. After a reviewer
+annotates a block, call \`get-plan-feedback\` to read the structured feedback,
+then either update the recap with \`create-visual-recap\` (passing the existing
+\`planId\` to replace it in place) or apply targeted changes with
+\`update-visual-plan\`. The loop is live and wired. In local-files privacy mode,
+do not call those hosted tools; read review notes from chat or local files, edit
+\`<plan-dir>/*.mdx\` directly, and rerun \`plan local check\`, \`serve\`, or \`verify\`
+for \`<plan-dir>\`. The one thing not yet automatic is PR-comment-triggered
 re-runs: the GitHub Action creates an initial recap per PR, but it does not yet
 re-run automatically when new review feedback is posted in GitHub — that
 auto-re-run is the remaining fast-follow.
@@ -4006,8 +4033,8 @@ async function promptForPlanMode(
     options: [
       {
         value: "hosted",
-        label: "Hosted plans, shareable links",
-        hint: "Recommended. 100% free and open source. Stores plans at plan.agent-native.com with sharing, comments, and browser editor. Requires one-time browser sign-in.",
+        label: "Hosted plans, shareable links (recommended)",
+        hint: "100% free and open source. Supports comments, browser editor, and sharing. Requires one-time browser sign-in.",
       },
       {
         value: "local-files",

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

@@ -147,9 +147,11 @@ const SetupButton = lazy(() =>
   })),
 );
 
-// Setup/onboarding widget appears above chat until required setup is complete,
-// and can be reopened from the header after dismissal.
-const SHOW_ONBOARDING = true;
+// The setup/onboarding checklist that used to appear above chat is disabled
+// for every app — setup (AI engine, image/video gen, asset storage, email,
+// GitHub, etc.) is surfaced in better places (the settings panel and the
+// per-feature setup affordances). Keep this off; do not re-enable globally.
+const SHOW_ONBOARDING = false;
 
 const CLI_STORAGE_KEY = "agent-native-cli-command";
 const CLI_DEFAULT = "claude";

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

@@ -86,6 +86,7 @@ import { agentNativePath } from "./api-path.js";
 import {
   TiptapComposer,
   type ComposerSubmitIntent,
+  type ComposerImageModelMenu,
   type TiptapComposerHandle,
 } from "./composer/TiptapComposer.js";
 import { AgentComposerFrame } from "./composer/AgentComposerFrame.js";
@@ -712,6 +713,11 @@ export interface AssistantChatProps {
   onModelChange?: (model: string, engine: string) => void;
   /** Callback when user picks a reasoning effort from the picker */
   onEffortChange?: (effort: ReasoningEffort) => void;
+  /**
+   * Optional secondary model menu (e.g. an image-generation model) shown inside
+   * the composer's model picker. Opt-in; chat-only apps omit it.
+   */
+  imageModelMenu?: ComposerImageModelMenu;
   /** Callback when user clicks "Fork Chat" in the message actions menu */
   onForkChat?: () => void | boolean | Promise<void | boolean>;
   /** Override Builder/provider connect routing for embedded hosts. */
@@ -977,6 +983,7 @@ const AssistantChatInner = forwardRef<
     availableModels,
     onModelChange,
     onEffortChange,
+    imageModelMenu,
     onForkChat,
     onConnectProvider,
     plusMenuMode = "full",
@@ -3392,6 +3399,7 @@ const AssistantChatInner = forwardRef<
                     availableModels={availableModels}
                     onModelChange={onModelChange}
                     onEffortChange={onEffortChange}
+                    imageModelMenu={imageModelMenu}
                     onConnectProvider={onConnectProvider}
                     toolbarSlot={composerToolbarSlot}
                     contextItems={composerContextItems}

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

@@ -20,6 +20,7 @@ import React, {
   useCallback,
   useContext,
   useEffect,
+  useMemo,
   useRef,
   useState,
   type ReactNode,
@@ -29,9 +30,12 @@ import {
   IconExternalLink,
   IconSearch,
   IconMessage,
+  IconHistory,
 } from "@tabler/icons-react";
 import { sendToAgentChat } from "./agent-chat.js";
 import { cn } from "./utils.js";
+import { ChangelogDialog, useChangelogSeen } from "./changelog/Changelog.js";
+import { parseChangelog } from "../changelog/parse.js";
 
 // ─── Context ────────────────────────────────────────────────────────────────
 
@@ -248,6 +252,22 @@ export interface CommandMenuProps {
   showAgentFallback?: boolean;
   /** Custom class for the dialog content */
   className?: string;
+  /**
+   * Raw CHANGELOG.md contents. When provided, the menu shows a built-in
+   * "What's new" entry that opens an in-app changelog dialog (with an unseen
+   * dot for new releases). Pass your app's own file:
+   *   import changelog from "../CHANGELOG.md?raw";
+   *   <CommandMenu ... changelog={changelog} />
+   */
+  changelog?: string;
+  /** Label for the built-in changelog entry. Default: "What's new". */
+  changelogLabel?: string;
+  /**
+   * Stable key used to remember which release a user has already seen (for the
+   * unseen dot). Defaults to the document title's host app; set explicitly when
+   * multiple apps share an origin.
+   */
+  changelogKey?: string;
 }
 
 export function CommandMenu({
@@ -258,12 +278,36 @@ export function CommandMenu({
   emptyText: _emptyText = "No commands found.",
   showAgentFallback = true,
   className,
+  changelog,
+  changelogLabel = "What's new",
+  changelogKey,
 }: CommandMenuProps) {
   const [search, setSearch] = useState("");
   const [selectedIndex, setSelectedIndex] = useState(0);
   const inputRef = useRef<HTMLInputElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
 
+  // Built-in "What's new" changelog surface (only active when `changelog` is
+  // passed). The dialog is rendered alongside the menu so it survives the menu
+  // closing; the unseen dot persists per browser via localStorage.
+  const [changelogOpen, setChangelogOpen] = useState(false);
+  const hasChangelog =
+    typeof changelog === "string" && changelog.trim().length > 0;
+  const changelogEntries = useMemo(
+    () => (hasChangelog ? parseChangelog(changelog as string) : []),
+    [hasChangelog, changelog],
+  );
+  const latestChangelogId = changelogEntries[0]?.id;
+  const { unseen: changelogUnseen, markSeen: markChangelogSeen } =
+    useChangelogSeen(changelogKey ?? "app", latestChangelogId);
+
+  const openChangelog = useCallback(() => {
+    onOpenChange(false);
+    markChangelogSeen();
+    // Let the menu close before the dialog opens (avoids overlay flicker).
+    setTimeout(() => setChangelogOpen(true), 50);
+  }, [onOpenChange, markChangelogSeen]);
+
   // Focus input when opening
   useEffect(() => {
     if (open) {
@@ -361,7 +405,22 @@ export function CommandMenu({
     }
   };
 
-  if (!open) return null;
+  // The built-in "What's new" row matches changelog-ish search terms.
+  const changelogRowMatches =
+    !search ||
+    [
+      changelogLabel,
+      "changelog",
+      "what's new",
+      "whats new",
+      "updates",
+      "release notes",
+      "changes",
+    ]
+      .join(" ")
+      .toLowerCase()
+      .includes(search.toLowerCase());
+  const showChangelogRow = hasChangelog && changelogRowMatches;
 
   // Filter children based on search
   const filterChildren = (nodes: ReactNode): ReactNode => {
@@ -423,82 +482,131 @@ export function CommandMenu({
   );
 
   return (
-    <div className="fixed inset-0 z-50 bg-black/50">
-      <div
-        ref={containerRef}
-        className={cn(
-          "fixed left-1/2 top-[15vh] -translate-x-1/2 w-full max-w-lg",
-          "rounded-lg border border-border bg-popover text-popover-foreground shadow-lg",
-          className,
-        )}
-      >
-        <CommandMenuContext.Provider
-          value={{ search, onOpenChange, containerRef, setSelectedIndex }}
-        >
-          {/* Search input */}
-          <div className="flex items-center border-b px-3">
-            <IconSearch className="mr-2 h-4 w-4 shrink-0 opacity-50" />
-            <input
-              ref={inputRef}
-              value={search}
-              onChange={(e) => setSearch(e.target.value)}
-              onKeyDown={handleKeyDown}
-              placeholder={placeholder}
-              className="flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
-            />
-          </div>
-
-          {/* Command list */}
-          <div className="max-h-[300px] overflow-y-auto overflow-x-hidden">
-            {hasResults && filteredChildren}
-
-            {/* Ask AI — always visible at the bottom */}
-            {showAgentFallback && (
-              <>
-                {hasResults && <CommandSeparator />}
-                <div className="p-1">
-                  <div
-                    className="relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-2 text-sm outline-none"
-                    onClick={handleSubmitToAgent}
-                    onMouseEnter={(e) => {
-                      const items =
-                        containerRef.current?.querySelectorAll(
-                          '[role="option"]',
-                        );
-                      if (!items) return;
-                      const index = Array.from(items).indexOf(e.currentTarget);
-                      if (index >= 0) setSelectedIndex(index);
-                    }}
-                    role="option"
-                  >
-                    <IconMessage className="h-4 w-4 text-muted-foreground" />
-                    <span>
-                      {search.trim() ? (
-                        <>
-                          Ask AI:{" "}
-                          <span className="text-muted-foreground">
-                            "{search}"
-                          </span>
-                        </>
-                      ) : (
-                        <span className="text-muted-foreground">
-                          Ask AI anything...
-                        </span>
-                      )}
-                    </span>
-                    {search.trim() && (
-                      <span className="ml-auto text-xs text-muted-foreground">
-                        ↵
-                      </span>
-                    )}
-                  </div>
-                </div>
-              </>
+    <>
+      {open && (
+        <div className="fixed inset-0 z-50 bg-black/50">
+          <div
+            ref={containerRef}
+            className={cn(
+              "fixed left-1/2 top-[15vh] -translate-x-1/2 w-full max-w-lg",
+              "rounded-lg border border-border bg-popover text-popover-foreground shadow-lg",
+              className,
             )}
+          >
+            <CommandMenuContext.Provider
+              value={{ search, onOpenChange, containerRef, setSelectedIndex }}
+            >
+              {/* Search input */}
+              <div className="flex items-center border-b px-3">
+                <IconSearch className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+                <input
+                  ref={inputRef}
+                  value={search}
+                  onChange={(e) => setSearch(e.target.value)}
+                  onKeyDown={handleKeyDown}
+                  placeholder={placeholder}
+                  className="flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
+                />
+              </div>
+
+              {/* Command list */}
+              <div className="max-h-[300px] overflow-y-auto overflow-x-hidden">
+                {hasResults && filteredChildren}
+
+                {/* What's new — built-in changelog entry */}
+                {showChangelogRow && (
+                  <>
+                    {hasResults && <CommandSeparator />}
+                    <div className="p-1">
+                      <div
+                        className="relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-2 text-sm outline-none"
+                        onClick={openChangelog}
+                        onMouseEnter={(e) => {
+                          const items =
+                            containerRef.current?.querySelectorAll(
+                              '[role="option"]',
+                            );
+                          if (!items) return;
+                          const index = Array.from(items).indexOf(
+                            e.currentTarget,
+                          );
+                          if (index >= 0) setSelectedIndex(index);
+                        }}
+                        role="option"
+                      >
+                        <IconHistory className="h-4 w-4 text-muted-foreground" />
+                        <span>{changelogLabel}</span>
+                        {changelogUnseen && (
+                          <span
+                            className="ml-auto h-2 w-2 rounded-full bg-primary"
+                            aria-label="New updates available"
+                          />
+                        )}
+                      </div>
+                    </div>
+                  </>
+                )}
+
+                {/* Ask AI — always visible at the bottom */}
+                {showAgentFallback && (
+                  <>
+                    {(hasResults || showChangelogRow) && <CommandSeparator />}
+                    <div className="p-1">
+                      <div
+                        className="relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-2 text-sm outline-none"
+                        onClick={handleSubmitToAgent}
+                        onMouseEnter={(e) => {
+                          const items =
+                            containerRef.current?.querySelectorAll(
+                              '[role="option"]',
+                            );
+                          if (!items) return;
+                          const index = Array.from(items).indexOf(
+                            e.currentTarget,
+                          );
+                          if (index >= 0) setSelectedIndex(index);
+                        }}
+                        role="option"
+                      >
+                        <IconMessage className="h-4 w-4 text-muted-foreground" />
+                        <span>
+                          {search.trim() ? (
+                            <>
+                              Ask AI:{" "}
+                              <span className="text-muted-foreground">
+                                "{search}"
+                              </span>
+                            </>
+                          ) : (
+                            <span className="text-muted-foreground">
+                              Ask AI anything...
+                            </span>
+                          )}
+                        </span>
+                        {search.trim() && (
+                          <span className="ml-auto text-xs text-muted-foreground">
+                            ↵
+                          </span>
+                        )}
+                      </div>
+                    </div>
+                  </>
+                )}
+              </div>
+            </CommandMenuContext.Provider>
           </div>
-        </CommandMenuContext.Provider>
-      </div>
-    </div>
+        </div>
+      )}
+
+      {hasChangelog && (
+        <ChangelogDialog
+          open={changelogOpen}
+          onOpenChange={setChangelogOpen}
+          markdown={changelog as string}
+          title={changelogLabel}
+        />
+      )}
+    </>
   );
 }