@jay-framework/aiditor 0.18.4 → 0.19.1

package/dist/index.client.js

@@ -8275,6 +8275,18 @@ async function seekVideoToTime(video, timeSec, options) {
   let dur = effectiveVideoDuration(video);
   if (!Number.isFinite(dur) || dur <= 0) dur = Number.POSITIVE_INFINITY;
   const t = Math.max(0, Math.min(timeSec, dur));
+  const skipSeek = Math.abs(video.currentTime - t) < 1e-4;
+  console.info("[aiditor:video-capture] seek start", {
+    t,
+    currentTime: video.currentTime,
+    skipSeek,
+    paused: video.paused
+  });
+  if (skipSeek) {
+    await flushLayout();
+    console.info("[aiditor:video-capture] seek done", { t, via: "skipSeek" });
+    return;
+  }
   await new Promise((resolve, reject) => {
     let settled = false;
     const timer = window.setTimeout(() => {
@@ -8287,25 +8299,22 @@ async function seekVideoToTime(video, timeSec, options) {
         )
       );
     }, timeoutMs);
-    const done = () => {
+    const onSeeked = () => {
       if (settled) return;
       settled = true;
       window.clearTimeout(timer);
       video.removeEventListener("seeked", onSeeked);
-      const rvfc = video.requestVideoFrameCallback;
-      if (typeof rvfc === "function") {
-        rvfc.call(video, () => resolve());
-      } else {
-        requestAnimationFrame(() => resolve());
-      }
+      console.info("[aiditor:video-capture] seeked", {
+        t,
+        currentTime: video.currentTime
+      });
+      void flushLayout().then(() => {
+        console.info("[aiditor:video-capture] seek done", { t, via: "seeked" });
+        resolve();
+      });
     };
-    const onSeeked = () => done();
     video.addEventListener("seeked", onSeeked);
-    if (Math.abs(video.currentTime - t) < 1e-4) {
-      queueMicrotask(() => onSeeked());
-    } else {
-      video.currentTime = t;
-    }
+    video.currentTime = t;
   });
 }
 async function capturePreviewForVideoFrame(rootEl, videoEl, mode = "full") {
@@ -8495,12 +8504,22 @@ function blobToImage(blob) {
   });
 }
 async function captureVideoInstantDual(rootEl, videoEl) {
+  console.info("[aiditor:video-capture] capture start", { mode: "clean" });
   const clean = await capturePreviewForVideoFrame(rootEl, videoEl, "clean");
+  console.info("[aiditor:video-capture] capture done", {
+    mode: "clean",
+    bytes: clean.size
+  });
+  console.info("[aiditor:video-capture] capture start", { mode: "markersOnly" });
   const markersOnly = await capturePreviewForVideoFrame(
     rootEl,
     videoEl,
     "markersOnly"
   );
+  console.info("[aiditor:video-capture] capture done", {
+    mode: "markersOnly",
+    bytes: markersOnly.size
+  });
   return { clean, markersOnly };
 }
 function getRestrictionTargetCtor() {
@@ -8787,19 +8806,54 @@ async function ensureAddPageRequestId(pageRoute, currentRequestId) {
   }
   return { requestId: result.requestId };
 }
-function insertTextAtCursor(textarea, text, currentValue) {
-  const start = textarea.selectionStart ?? currentValue.length;
-  const end = textarea.selectionEnd ?? start;
+function formatRouteParamToken(paramName) {
+  return `[${paramName}]`;
+}
+function insertRouteParamInField(input, currentRoute, paramName) {
+  const token = formatRouteParamToken(paramName);
+  const route = currentRoute.trim() || "/";
+  if (route.includes(token)) return route;
+  const insertWithSlash = (before) => {
+    if (before.length === 0) return token;
+    const last = before[before.length - 1];
+    if (last === "/" || last === "]") return token;
+    return `/${token}`;
+  };
+  if (input && document.activeElement === input) {
+    const start = input.selectionStart ?? route.length;
+    const end = input.selectionEnd ?? start;
+    const before = route.slice(0, start);
+    const after = route.slice(end);
+    const insert2 = insertWithSlash(before);
+    const next = before + insert2 + after;
+    queueMicrotask(() => {
+      const pos = before.length + insert2.length;
+      input.setSelectionRange(pos, pos);
+      input.focus();
+    });
+    return next;
+  }
+  const insert = insertWithSlash(route);
+  return route.endsWith("/") ? `${route}${token}` : `${route}${insert}`;
+}
+function insertTextAtRange(currentValue, text, selectionStart, selectionEnd = selectionStart) {
+  const start = Math.max(0, Math.min(selectionStart, currentValue.length));
+  const end = Math.max(start, Math.min(selectionEnd, currentValue.length));
   const before = currentValue.slice(0, start);
   const after = currentValue.slice(end);
   const prefix = before.length > 0 && !before.endsWith("\n") ? "\n" : "";
   const insertion = `${prefix}${text}
 `;
   const next = before + insertion + after;
-  const newPos = before.length + insertion.length;
+  return { next, cursor: before.length + insertion.length };
+}
+function insertTextAtCursor(textarea, text, currentValue, selection) {
+  const start = textarea.selectionStart ?? currentValue.length;
+  const end = textarea.selectionEnd ?? start;
+  const { next, cursor } = insertTextAtRange(currentValue, text, start, end);
   queueMicrotask(() => {
-    textarea.selectionStart = newPos;
-    textarea.selectionEnd = newPos;
+    textarea.selectionStart = cursor;
+    textarea.selectionEnd = cursor;
     textarea.focus();
   });
   return next;
@@ -9223,383 +9277,459 @@ ${md}`);
     briefFillGenerating: generating
   };
 }
-const CATALOG = [
-  {
-    pluginName: "wix-server-client",
-    packageName: "@jay-framework/wix-server-client",
-    description: "Wix API client and authentication",
-    kind: "service-only",
-    requires: [],
-    showInAddPagePicker: false,
-    configFiles: ["config/.wix.yaml"]
-  },
-  {
-    pluginName: "wix-cart",
-    packageName: "@jay-framework/wix-cart",
-    description: "Shopping cart headless components",
-    kind: "headless",
-    requires: ["wix-server-client"],
-    showInAddPagePicker: true
-  },
-  {
-    pluginName: "wix-stores",
-    packageName: "@jay-framework/wix-stores",
-    description: "Wix Stores product search, product page, categories",
-    kind: "headless",
-    requires: ["wix-server-client", "wix-cart"],
-    showInAddPagePicker: true,
-    configFiles: ["config/.wix-stores.yaml"]
-  },
-  {
-    pluginName: "wix-stores-v1",
-    packageName: "@jay-framework/wix-stores-v1",
-    description: "Wix Stores v1 catalog API",
-    kind: "headless",
-    requires: ["wix-server-client", "wix-cart"],
-    showInAddPagePicker: true
-  },
-  {
-    pluginName: "wix-data",
-    packageName: "@jay-framework/wix-data",
-    description: "Wix Data collections CMS",
-    kind: "headless",
-    requires: ["wix-server-client"],
-    showInAddPagePicker: true,
-    configFiles: ["config/.wix-data.yaml"]
-  },
-  {
-    pluginName: "wix-media",
-    packageName: "@jay-framework/wix-media",
-    description: "Wix media service (no page components)",
-    kind: "service-only",
-    requires: ["wix-server-client"],
-    showInAddPagePicker: true
-  },
-  {
-    pluginName: "ui-kit",
-    packageName: "@jay-framework/ui-kit",
-    description: "Jay UI kit headless components",
-    kind: "headless",
-    requires: [],
-    showInAddPagePicker: true
-  },
-  {
-    pluginName: "gemini-agent",
-    packageName: "@jay-framework/gemini-agent",
-    description: "Gemini AI agent plugin",
-    kind: "headless",
-    requires: [],
-    showInAddPagePicker: true,
-    configFiles: ["config/.gemini-agent.yaml"]
-  },
-  {
-    pluginName: "webmcp",
-    packageName: "@jay-framework/webmcp",
-    description: "Web MCP tooling",
-    kind: "tooling",
-    requires: [],
-    showInAddPagePicker: false
-  },
-  {
-    pluginName: "aiditor",
-    packageName: "@jay-framework/aiditor",
-    description: "AIditor self plugin",
-    kind: "tooling",
-    requires: [],
-    showInAddPagePicker: false
+function detectRequiredParamCollisions(resolved) {
+  const byContract = /* @__PURE__ */ new Map();
+  for (const r of resolved) {
+    byContract.set(r.contractName, r);
+  }
+  const contracts = [...byContract.values()];
+  if (contracts.length < 2) return [];
+  const warnings = [];
+  for (let i = 0; i < contracts.length; i++) {
+    for (let j = i + 1; j < contracts.length; j++) {
+      const a2 = contracts[i];
+      const b = contracts[j];
+      if (a2.contractName === b.contractName) continue;
+      const overlap = a2.requiredParams.filter(
+        (p) => b.requiredParams.includes(p)
+      );
+      for (const param of overlap) {
+        warnings.push({
+          overlappingParam: param,
+          contractNames: [a2.contractName, b.contractName],
+          message: `${a2.contractName} and ${b.contractName} both require [${param}] for different data. One URL segment cannot serve both. Use separate pages, distinct param names in the route, or instance mode for one component.`
+        });
+      }
+    }
   }
-];
-function getCatalogEntry(pluginName) {
-  return CATALOG.find((e2) => e2.pluginName === pluginName);
+  return warnings;
 }
-const DEFAULT_COMPONENT_KEYS = {
-  "product-page": "p",
-  "product-search": "search",
-  "cart-indicator": "cart",
-  "cart-page": "cartPage",
-  "category-list": "categories"
-};
-function getDefaultComponentKey(contractName) {
-  if (contractName in DEFAULT_COMPONENT_KEYS) {
-    return DEFAULT_COMPONENT_KEYS[contractName];
+function collectRouteSegmentNames(resolved) {
+  const names = /* @__PURE__ */ new Set();
+  for (const r of resolved) {
+    for (const p of r.allParams) names.add(p);
   }
-  return contractName.charAt(0) || "c";
+  return [...names].sort((a2, b) => a2.localeCompare(b));
 }
-const listJayPluginsAction = createActionCaller("aiditor.listJayPlugins", "GET");
-createActionCaller("aiditor.listPluginContracts", "GET");
-const checkPluginUpdateAction = createActionCaller("aiditor.checkPluginUpdate", "GET");
-const ensureProjectPluginAction = createStreamCaller("aiditor.ensureProjectPlugin");
-createActionCaller("aiditor.getPluginSetupStatus", "GET");
-const rerunPluginSetupAction = createActionCaller("aiditor.rerunPluginSetup", "GET");
-const syncAddPagePluginManifestAction = createActionCaller("aiditor.syncAddPagePluginManifest", "GET");
-const writePluginSourceAction = createActionCaller("aiditor.writePluginSource", "GET");
-async function listJayPlugins(refreshSetupStatus = false) {
-  return listJayPluginsAction({ refreshSetupStatus });
+function routeHasDynamicSegment(route, paramName) {
+  return route.includes(`[${paramName}]`);
 }
-async function checkPluginUpdate(pluginName) {
-  return checkPluginUpdateAction({ pluginName });
+function routeHasAnyDynamicSegment(route) {
+  return /\[[^\]]+\]/.test(route);
 }
-function ensureProjectPluginStream(input, callbacks) {
-  let aborted = false;
-  const abort = () => {
-    aborted = true;
+function suggestMissingRouteSegments(route, segmentNames) {
+  const trimmed = route.replace(/\/+$/, "") || "/";
+  const missing = segmentNames.filter(
+    (name) => !routeHasDynamicSegment(trimmed, name)
+  );
+  if (missing.length === 0) return null;
+  const suffix = missing.map((n) => `[${n}]`).join("/");
+  if (trimmed === "/") return `/${suffix}`;
+  return `${trimmed}/${suffix}`;
+}
+function stripNavRowCore(row) {
+  const { item: _item, ...viewRow } = row;
+  return viewRow;
+}
+function stripNavRowForView(row) {
+  return stripNavRowCore(row);
+}
+function stripMarkerAddMenuNavRowForPage(row) {
+  return stripNavRowCore(row);
+}
+function stripMarkerPickerNavRowForVisual(row) {
+  return stripNavRowCore(row);
+}
+function stripMarkerPickerNavRowForVideo(row) {
+  return stripNavRowCore(row);
+}
+function stripMarkerPickerNavRowForSnapshot(row) {
+  return stripNavRowCore(row);
+}
+function buildAddMenuNavRows(categories, panelOpen, selectedCategory, selectedSubCategory) {
+  if (!panelOpen) return [];
+  const cat = selectedCategory;
+  if (!cat) {
+    return categories.map((c) => ({
+      rowKey: `cat:${c.category}`,
+      label: c.category,
+      value: c.category,
+      kind: 0
+      /* category */
+    }));
+  }
+  const group = categories.find((c) => c.category === cat);
+  if (!group) return [];
+  const sub = selectedSubCategory;
+  if (sub === null && group.subCategories.length > 1) {
+    return group.subCategories.map((s) => ({
+      rowKey: `sub:${cat}:${s.subCategory ?? ""}`,
+      label: s.subCategory ?? "General",
+      value: s.subCategory ?? "",
+      kind: 1
+      /* subCategory */
+    }));
+  }
+  const subKey = sub ?? group.subCategories[0]?.subCategory ?? null;
+  const items = group.subCategories.find((s) => s.subCategory === subKey)?.items ?? group.subCategories[0]?.items ?? [];
+  return items.map((item) => ({
+    rowKey: `item:${item.id}`,
+    label: item.title,
+    value: item.id,
+    kind: 2,
+    item
+  }));
+}
+const listAddMenuItemsAction = createActionCaller("aiditor.listAddMenuItems", "GET");
+const resolveAddMenuContractParamsAction = createActionCaller("aiditor.resolveAddMenuContractParams", "GET");
+const syncAddMenuAttachmentsAction = createActionCaller("aiditor.syncAddMenuAttachments", "GET");
+async function listAddMenuItems() {
+  return listAddMenuItemsAction({});
+}
+async function resolveContractParamsForItem(_projectDir, item) {
+  const result = await resolveAddMenuContractParamsAction({
+    itemId: item.id,
+    pluginName: item.pluginName
+  });
+  if (!result.contractName || !result.pluginName) return null;
+  return {
+    contractName: result.contractName,
+    pluginName: result.pluginName,
+    requiredParams: result.requiredParams ?? [],
+    allParams: result.allParams ?? []
   };
-  void (async () => {
-    try {
-      for await (const chunk of ensureProjectPluginAction(input)) {
-        if (aborted) break;
-        callbacks.onChunk(chunk);
-        if (chunk.type === "done" || chunk.type === "error") {
-          callbacks.onEnd();
-          return;
-        }
-      }
-      if (!aborted) callbacks.onEnd();
-    } catch (err) {
-      if (!aborted) {
-        callbacks.onError(err instanceof Error ? err : new Error(String(err)));
-      }
-    }
-  })();
-  return abort;
 }
-async function syncAddPagePluginManifest(input) {
-  return syncAddPagePluginManifestAction(input);
+async function syncAddMenuAttachments(input) {
+  return syncAddMenuAttachmentsAction(input);
 }
-async function rerunPluginSetup(pluginName, force) {
-  return rerunPluginSetupAction({ pluginName, force });
+function attachmentScopeKey(a2) {
+  return a2.annotationId ?? "";
 }
-async function writePluginSource(input) {
-  return writePluginSourceAction(input);
+function dedupeAddMenuAttachment(prev, next) {
+  const scope = attachmentScopeKey(next);
+  const exists = prev.some(
+    (a2) => a2.itemId === next.itemId && attachmentScopeKey(a2) === scope
+  );
+  if (exists) return prev;
+  return [...prev, next];
 }
-const ADD_PAGE_MANAGE_PLUGINS_VALUE = "__manage_plugins__";
-function upsertPagePluginContract(prev, pluginName, packageName, contractName, componentKey) {
-  const next = [...prev];
-  let plugin = next.find((p) => p.pluginName === pluginName);
-  if (!plugin) {
-    plugin = {
-      pluginName,
-      packageName,
-      contracts: [],
-      installStatus: "not_needed"
-    };
-    next.push(plugin);
-  }
-  const exists = plugin.contracts.some((c) => c.contractName === contractName);
-  const contracts = exists ? plugin.contracts.map(
-    (c) => c.contractName === contractName ? { ...c, componentKey } : c
-  ) : [...plugin.contracts, { contractName, componentKey }];
-  return next.map(
-    (p) => p.pluginName === pluginName ? { ...p, packageName, contracts } : p
+function removeAddMenuAttachment(prev, itemId, annotationId) {
+  const scope = annotationId ?? "";
+  return prev.filter(
+    (a2) => !(a2.itemId === itemId && attachmentScopeKey(a2) === scope)
   );
 }
-function removePagePluginContract(prev, pluginName, contractName) {
-  return prev.map(
-    (p) => p.pluginName === pluginName ? {
-      ...p,
-      contracts: p.contracts.filter(
-        (c) => c.contractName !== contractName
-      )
-    } : p
-  ).filter((p) => p.contracts.length > 0);
-}
-function initAddPagePluginsPanel(deps) {
-  const { projectPlugins, openProjectSettings } = deps;
-  const [selectedPlugins, setSelectedPlugins] = createSignal([]);
-  const [pickerPlugin, setPickerPlugin] = createSignal("");
-  const [pickerValue, setPickerValue] = createSignal("");
+function initAddMenuPanel(deps) {
+  const [attachments, setAttachments] = createSignal([]);
+  const [catalogItems, setCatalogItems] = createSignal([]);
+  const [catalogCategories, setCatalogCategories] = createSignal([]);
+  const [catalogWarnings, setCatalogWarnings] = createSignal([]);
+  const [panelOpen, setPanelOpen] = createSignal(false);
+  const [selectedCategory, setSelectedCategory] = createSignal("");
+  const [selectedSubCategory, setSelectedSubCategory] = createSignal(null);
+  const [routeMigration, setRouteMigration] = createSignal(null);
+  const [paramCollisionWarning, setParamCollisionWarning] = createSignal("");
+  const [routeParamHint, setRouteParamHint] = createSignal("");
+  const [pendingRouteParamItem, setPendingRouteParamItem] = createSignal(null);
+  const [showRouteParamConfirm, setShowRouteParamConfirm] = createSignal(false);
+  const [catalogLoading, setCatalogLoading] = createSignal(false);
+  const [catalogLoaded, setCatalogLoaded] = createSignal(false);
   let syncTimer;
-  const installedHeadlessPlugins = createMemo(
-    () => projectPlugins.pluginsList().filter(
-      (p) => p.installed && p.kind === "headless" && p.contracts.length > 0
-    )
+  const itemById = createMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const item of catalogItems()) map.set(item.id, item);
+    return map;
+  });
+  const chipRows = createMemo(
+    () => attachments().map((a2) => {
+      const item = itemById().get(a2.itemId);
+      return {
+        rowKey: `${a2.itemId}:${a2.annotationId ?? "request"}`,
+        itemId: a2.itemId,
+        title: item?.title ?? a2.itemId,
+        subtitle: item?.pluginName ?? item?.id.split(":")[0] ?? "",
+        annotationId: a2.annotationId
+      };
+    })
   );
-  const addPagePluginPickerOptions = createMemo(
-    () => {
-      const options = installedHeadlessPlugins().map((p) => ({
-        rowKey: p.pluginName,
-        value: p.pluginName,
-        label: p.pluginName
-      }));
-      options.push({
-        rowKey: ADD_PAGE_MANAGE_PLUGINS_VALUE,
-        value: ADD_PAGE_MANAGE_PLUGINS_VALUE,
-        label: "Manage plugins…"
-      });
-      return options;
-    }
+  const showAddMenuPanel = createMemo(() => true);
+  const showAddMenuEmptyHint = createMemo(
+    () => catalogItems().length === 0 && !catalogLoading()
   );
-  const addPageContractPickerRows = createMemo(
-    () => {
-      const pluginName = pickerPlugin();
-      if (!pluginName) return [];
-      const entry = projectPlugins.pluginsList().find((p) => p.pluginName === pluginName);
-      if (!entry?.installed || entry.kind !== "headless") return [];
-      const sel = selectedPlugins().find((s) => s.pluginName === pluginName);
-      return entry.contracts.map((c) => ({
-        rowKey: `${pluginName}:${c.contractName}`,
-        pluginName,
-        packageName: entry.packageName,
-        contractName: c.contractName,
-        description: c.description ?? "",
-        onPage: !!sel?.contracts.some((x) => x.contractName === c.contractName),
-        componentKey: sel?.contracts.find((x) => x.contractName === c.contractName)?.componentKey ?? getDefaultComponentKey(c.contractName)
-      }));
-    }
+  const showAddMenuChips = createMemo(() => chipRows().length > 0);
+  const menuNavRows = createMemo(
+    () => buildAddMenuNavRows(
+      catalogCategories(),
+      panelOpen(),
+      selectedCategory(),
+      selectedSubCategory()
+    )
   );
-  const pagePluginChipRows = createMemo(() => {
-    const chips = [];
-    for (const plugin of selectedPlugins()) {
-      for (const contract of plugin.contracts) {
-        chips.push({
-          rowKey: `${plugin.pluginName}:${contract.contractName}`,
-          label: `${plugin.pluginName} · ${contract.contractName}`,
-          pluginName: plugin.pluginName,
-          packageName: plugin.packageName,
-          contractName: contract.contractName,
-          componentKey: contract.componentKey ?? getDefaultComponentKey(contract.contractName)
-        });
-      }
-    }
-    return chips;
-  });
-  const showContractPicker = createMemo(() => pickerPlugin().length > 0);
-  const showPagePluginsZone = createMemo(() => true);
-  const showPluginsPanel = createMemo(
-    () => projectPlugins.pluginsLoaded() && projectPlugins.pluginsList().length > 0
+  const menuNavRowsForView = createMemo(
+    () => menuNavRows().map(stripNavRowForView)
   );
-  const showPagePluginsEmptyHint = createMemo(
-    () => showPluginsPanel() && pagePluginChipRows().length === 0
+  const [routeSegmentNames, setRouteSegmentNames] = createSignal([]);
+  const routeParamRows = createMemo(
+    () => routeSegmentNames().map((name) => ({
+      rowKey: name,
+      name
+    }))
   );
-  const pluginsBlockCreatePage = createMemo(() => {
-    if (projectPlugins.installInProgress()) return true;
-    return selectedPlugins().some(
-      (p) => p.installStatus === "installing" || p.installStatus === "pending" || p.installStatus === "failed"
+  async function refreshCatalog() {
+    setCatalogLoading(true);
+    try {
+      const result = await listAddMenuItems();
+      setCatalogItems(result.items);
+      setCatalogCategories(result.categories);
+      setCatalogWarnings(result.warnings);
+      if (result.warnings.length > 0) {
+        console.warn("[aiditor] Add Menu catalog warnings:", result.warnings);
+      }
+    } catch (err) {
+      console.error("[aiditor] listAddMenuItems failed:", err);
+      setCatalogItems([]);
+      setCatalogCategories([]);
+      setCatalogWarnings([]);
+    } finally {
+      setCatalogLoaded(true);
+      setCatalogLoading(false);
+    }
+  }
+  async function ensureCatalogLoaded() {
+    if (catalogLoaded() || catalogLoading()) return;
+    await refreshCatalog();
+  }
+  async function updateRouteHelpers() {
+    const resolved = [];
+    for (const a2 of attachments()) {
+      const item = itemById().get(a2.itemId);
+      if (!item) continue;
+      const params = await resolveContractParamsForItem(
+        deps.projectDir(),
+        item
+      );
+      if (params) resolved.push(params);
+    }
+    const collisions = detectRequiredParamCollisions(resolved);
+    setParamCollisionWarning(collisions[0]?.message ?? "");
+    const segments = collectRouteSegmentNames(resolved);
+    if (segments.length === 0) {
+      setRouteParamHint("");
+      return segments;
+    }
+    const route = deps.getPageRoute();
+    const suggested = suggestMissingRouteSegments(route, segments);
+    setRouteParamHint(
+      suggested && suggested !== route ? `Suggested route segments: ${suggested}` : ""
     );
-  });
+    setRouteSegmentNames(segments);
+    return segments;
+  }
   function scheduleManifestSync() {
     const requestId = deps.getRequestId();
     if (!requestId) return;
     if (syncTimer) clearTimeout(syncTimer);
     syncTimer = setTimeout(() => {
-      void syncAddPagePluginManifest({
+      void syncAddMenuAttachments({
         requestId,
-        selectedPlugins: selectedPlugins()
-      }).then((res) => {
-        if (res.ok && res.contentMd) {
-          deps.setContentMd(res.contentMd);
-        }
+        addMenuAttachments: attachments(),
+        routeMigration: routeMigration() ?? void 0
       });
     }, 300);
   }
-  function addContractToPage(pluginName, packageName, contractName, componentKey) {
-    setSelectedPlugins(
-      (prev) => upsertPagePluginContract(
-        prev,
-        pluginName,
-        packageName,
-        contractName,
-        componentKey
-      )
-    );
-    scheduleManifestSync();
-  }
-  function removeFromPage(pluginName, packageName, contractName) {
-    setSelectedPlugins(
-      (prev) => removePagePluginContract(prev, pluginName, contractName)
+  async function commitAttachment(item, annotationId) {
+    deps.preserveEditorContent();
+    setAttachments(
+      (prev) => dedupeAddMenuAttachment(prev, { itemId: item.id, annotationId })
     );
+    await updateRouteHelpers();
     scheduleManifestSync();
-  }
-  function handlePickerChange(value) {
-    setPickerValue("");
-    if (value === ADD_PAGE_MANAGE_PLUGINS_VALUE) {
-      openProjectSettings();
-      setPickerPlugin("");
+    setPanelOpen(false);
+    setSelectedCategory("");
+    setSelectedSubCategory(null);
+  }
+  async function tryAddItem(item, annotationId) {
+    const params = await resolveContractParamsForItem(deps.projectDir(), item);
+    const hasRouteParams = !!params && params.allParams.length > 0;
+    if (deps.changeRequestMode?.() && hasRouteParams && deps.getCurrentRoute && !routeHasAnyDynamicSegment(deps.getCurrentRoute() ?? "")) {
+      setPendingRouteParamItem(item);
+      setShowRouteParamConfirm(true);
       return;
     }
-    if (!value) {
-      setPickerPlugin("");
-      return;
-    }
-    setPickerPlugin(value);
+    await commitAttachment(item, annotationId);
+  }
+  async function confirmRouteParamAttach(annotationId) {
+    const item = pendingRouteParamItem();
+    if (!item) return;
+    const current = deps.getCurrentRoute?.() ?? "/";
+    const params = await resolveContractParamsForItem(deps.projectDir(), item);
+    const segments = params ? collectRouteSegmentNames([params]) : [];
+    const planned = suggestMissingRouteSegments(current, segments) ?? `${current}/[slug]`;
+    deps.setPlannedRoute?.(planned);
+    setRouteMigration({
+      currentRoute: current,
+      plannedRoute: planned,
+      reason: "add-menu-route-param-component",
+      triggeringItemIds: [item.id]
+    });
+    setShowRouteParamConfirm(false);
+    setPendingRouteParamItem(null);
+    await commitAttachment(item, annotationId);
+  }
+  function cancelRouteParamAttach() {
+    setShowRouteParamConfirm(false);
+    setPendingRouteParamItem(null);
+  }
+  function removeChip(itemId, annotationId) {
+    deps.preserveEditorContent();
+    setAttachments(
+      (prev) => removeAddMenuAttachment(prev, itemId, annotationId)
+    );
+    void updateRouteHelpers();
+    scheduleManifestSync();
   }
-  function resetPluginsPanel() {
-    setSelectedPlugins([]);
-    setPickerPlugin("");
-    setPickerValue("");
+  function openPanel() {
+    void ensureCatalogLoaded();
+    setPanelOpen(true);
+    setSelectedCategory("");
+    setSelectedSubCategory(null);
+  }
+  function closePanel() {
+    setPanelOpen(false);
+  }
+  function resetAddMenuPanel() {
+    setAttachments([]);
+    setRouteMigration(null);
+    setParamCollisionWarning("");
+    setRouteParamHint("");
+    setPanelOpen(false);
     if (syncTimer) clearTimeout(syncTimer);
   }
-  function bindPluginsPanelRefs(refs) {
-    refs.addPagePluginPicker?.onchange(
-      ({ event }) => {
-        const value = event.target.value;
-        handlePickerChange(value);
+  function bindRouteParamButtons(el) {
+    el?.onclick(({ event }) => {
+      const paramBtn = event.target.closest(
+        "[data-add-menu-param]"
+      );
+      if (paramBtn?.dataset.param) {
+        deps.insertRouteParam(paramBtn.dataset.param);
       }
-    );
-    refs.addPagePluginsPanel.onclick(
-      ({ event }) => {
-        const target = event.target;
-        const manageLink = target.closest("[data-add-page-manage-plugins]");
-        if (manageLink) {
-          openProjectSettings();
-          return;
-        }
-        const addBtn = target.closest(
-          "[data-add-page-add-contract]"
-        );
-        if (addBtn?.dataset.plugin && addBtn.dataset.contract && addBtn.dataset.package) {
-          addContractToPage(
-            addBtn.dataset.plugin,
-            addBtn.dataset.package,
-            addBtn.dataset.contract,
-            addBtn.dataset.key ?? getDefaultComponentKey(addBtn.dataset.contract)
-          );
-          return;
-        }
-        const removeChip = target.closest(
-          "[data-add-page-remove-chip]"
-        );
-        if (removeChip?.dataset.plugin && removeChip.dataset.contract && removeChip.dataset.package) {
-          removeFromPage(
-            removeChip.dataset.plugin,
-            removeChip.dataset.package,
-            removeChip.dataset.contract
-          );
-        }
+    });
+  }
+  function bindAddMenuPanelRefs(refs) {
+    bindRouteParamButtons(refs.addPageRouteParamsPanel);
+    refs.addMenuPanel?.onclick(({ event }) => {
+      const target = event.target;
+      const openBtn = target.closest("[data-add-menu-open]");
+      if (openBtn) {
+        openPanel();
+        return;
       }
-    );
+      const closeBtn = target.closest("[data-add-menu-close]");
+      if (closeBtn) {
+        closePanel();
+        return;
+      }
+      const manage = target.closest("[data-add-menu-manage-plugins]");
+      if (manage) {
+        deps.openProjectSettings();
+        return;
+      }
+      const catBtn = target.closest(
+        "[data-add-menu-category]"
+      );
+      if (catBtn?.dataset.category) {
+        setSelectedCategory(catBtn.dataset.category);
+        setSelectedSubCategory(null);
+        return;
+      }
+      const subBtn = target.closest(
+        "[data-add-menu-subcategory]"
+      );
+      if (subBtn?.dataset.subcategory !== void 0) {
+        setSelectedSubCategory(subBtn.dataset.subcategory || null);
+        return;
+      }
+      const pickBtn = target.closest(
+        "[data-add-menu-pick]"
+      );
+      if (pickBtn?.dataset.itemId) {
+        const item = itemById().get(pickBtn.dataset.itemId);
+        if (item) void tryAddItem(item);
+        return;
+      }
+      const removeBtn = target.closest(
+        "[data-add-menu-remove-chip]"
+      );
+      if (removeBtn?.dataset.itemId) {
+        removeChip(removeBtn.dataset.itemId, removeBtn.dataset.annotationId);
+        return;
+      }
+      const paramBtn = target.closest(
+        "[data-add-menu-param]"
+      );
+      if (paramBtn?.dataset.param) {
+        deps.insertRouteParam(paramBtn.dataset.param);
+        return;
+      }
+      const atBtn = target.closest(
+        "[data-add-menu-at-title]"
+      );
+      if (atBtn?.dataset.title) {
+        deps.insertAtCursor(`@${atBtn.dataset.title}`);
+        return;
+      }
+      const confirmBtn = target.closest("[data-add-menu-route-confirm]");
+      if (confirmBtn) {
+        void confirmRouteParamAttach();
+        return;
+      }
+      const cancelBtn = target.closest("[data-add-menu-route-cancel]");
+      if (cancelBtn) cancelRouteParamAttach();
+    });
   }
   return {
-    selectedPlugins,
-    setSelectedPlugins,
+    attachments,
+    setAttachments,
+    catalogItems,
+    refreshCatalog,
+    ensureCatalogLoaded,
+    panelOpen,
+    openPanel,
+    closePanel,
+    chipRows,
+    menuNavRows: menuNavRowsForView,
+    selectedCategory,
+    showAddMenuPanel,
+    showAddMenuEmptyHint,
+    showAddMenuChips,
+    showAddMenuPopover: panelOpen,
+    catalogLoading,
+    catalogWarnings,
+    paramCollisionWarning,
+    routeParamHint,
+    routeSegmentButtons: routeSegmentNames,
+    routeParamRows,
+    showRouteParamConfirm,
+    pendingRouteParamTitle: createMemo(
+      () => pendingRouteParamItem()?.title ?? ""
+    ),
     scheduleManifestSync,
     syncManifestNow: async () => {
       const requestId = deps.getRequestId();
       if (!requestId) return;
-      const res = await syncAddPagePluginManifest({
+      await syncAddMenuAttachments({
         requestId,
-        selectedPlugins: selectedPlugins()
+        addMenuAttachments: attachments(),
+        routeMigration: routeMigration() ?? void 0
       });
-      if (res.ok && res.contentMd) deps.setContentMd(res.contentMd);
     },
-    bindPluginsPanelRefs,
-    addPagePluginPickerOptions,
-    addPagePluginPickerValue: pickerValue,
-    addPagePickerPluginLabel: createMemo(() => {
-      const name = pickerPlugin();
-      return name ? `Components from ${name}` : "";
-    }),
-    addPageContractPickerRows,
-    pagePluginChipRows,
-    showContractPicker,
-    showPagePluginsZone,
-    showPluginsPanel,
-    showPagePluginsEmptyHint,
-    pluginsBlockCreatePage,
-    pickerPlugin,
-    setPickerPlugin,
-    handlePickerChange,
-    resetPluginsPanel
+    tryAddItem,
+    removeChip,
+    bindAddMenuPanelRefs,
+    resetAddMenuPanel,
+    updateRouteHelpers,
+    routeMigration,
+    setRouteMigration
   };
 }
 function tryJayRefExec(refObj, fn) {
@@ -9627,11 +9757,44 @@ function initAddPageComposer(deps) {
   const [addPageShowDesignHint, setAddPageShowDesignHint] = createSignal(false);
   const [addPageIsDynamicRoute, setAddPageIsDynamicRoute] = createSignal(false);
   const [addPageSubmitting, setAddPageSubmitting] = createSignal(false);
-  const pluginsPanel = initAddPagePluginsPanel({
+  const addMenuPanel = initAddMenuPanel({
     projectPlugins: deps.projectPlugins,
+    projectDir: deps.projectDir,
     getRequestId: () => addPageRequestId(),
-    getContentMd: () => addPageContentMd(),
-    setContentMd: setAddPageContentMd,
+    preserveEditorContent: () => {
+      const el = contentTextareaEl;
+      if (el) setAddPageContentMd(el.value);
+    },
+    getPageRoute: () => addPageRoute(),
+    setPageRoute: setAddPageRoute,
+    insertAtCursor: (text) => {
+      const current = contentTextareaEl?.value ?? addPageContentMd();
+      const { next, cursor } = insertTextAtRange(
+        current,
+        text,
+        contentTextareaEl?.selectionStart ?? contentSelectionStart,
+        contentTextareaEl?.selectionEnd ?? contentSelectionEnd
+      );
+      setAddPageContentMd(next);
+      contentSelectionStart = contentSelectionEnd = cursor;
+      const el = contentTextareaEl;
+      if (el) {
+        queueMicrotask(() => {
+          el.selectionStart = cursor;
+          el.selectionEnd = cursor;
+          el.focus();
+        });
+      }
+    },
+    insertRouteParam: (paramName) => {
+      const next = insertRouteParamInField(
+        routeInputEl,
+        addPageRoute(),
+        paramName
+      );
+      setAddPageRoute(next);
+      scheduleRouteCheck(next);
+    },
     openProjectSettings: deps.openProjectSettings
   });
   const briefFillPanel = initAddPageBriefFillPanel({
@@ -9653,8 +9816,20 @@ function initAddPageComposer(deps) {
     setComposerError: setAddPageComposerError
   });
   let routeCheckTimer;
+  let routeInputEl = null;
   let contentTextareaEl = null;
+  let contentSelectionStart = 0;
+  let contentSelectionEnd = 0;
   let designTextareaEl = null;
+  let designSelectionStart = 0;
+  function trackTextareaSelection(el) {
+    contentSelectionStart = el.selectionStart ?? 0;
+    contentSelectionEnd = el.selectionEnd ?? contentSelectionStart;
+  }
+  function trackDesignTextareaSelection(el) {
+    designSelectionStart = el.selectionStart ?? 0;
+    el.selectionEnd ?? designSelectionStart;
+  }
   const showAddPageRouteError = createMemo(
     () => addPageRouteError().length > 0
   );
@@ -9683,7 +9858,7 @@ function initAddPageComposer(deps) {
     if (deps.isRunning() || addPageSubmitting() || briefFillPanel.briefFillGenerating()) {
       return false;
     }
-    if (pluginsPanel.pluginsBlockCreatePage()) return false;
+    if (deps.projectPlugins.installInProgress()) return false;
     const route = addPageRoute().trim();
     if (!route || addPageRouteError()) return false;
     const hasMd = addPageContentMd().trim().length > 0 || addPageDesignMd().trim().length > 0;
@@ -9704,13 +9879,14 @@ function initAddPageComposer(deps) {
     setAddPageAttachments([]);
     setAddPageShowDesignHint(false);
     setAddPageIsDynamicRoute(false);
-    pluginsPanel.resetPluginsPanel();
+    addMenuPanel.resetAddMenuPanel();
     briefFillPanel.resetBriefFill();
   }
   function openAddPageComposer() {
     resetAddPageComposer();
     setShowAddPageComposer(true);
     void deps.projectPlugins.refreshPluginsList();
+    void addMenuPanel.ensureCatalogLoaded();
   }
   async function refreshCurrentPageBriefAvailability() {
     const filePath = deps.selectedPageFilePath().trim();
@@ -9985,7 +10161,7 @@ function initAddPageComposer(deps) {
       deps.setIsRunning(true);
       deps.setBottomPanelCollapsed(false);
       deps.setAddPageResultBanner(null);
-      await pluginsPanel.syncManifestNow();
+      await addMenuPanel.syncManifestNow();
       deps.getStopStream()?.();
       const abort = submitAddPageStream(
         {
@@ -10075,17 +10251,37 @@ function initAddPageComposer(deps) {
     });
     refs.addPageCreateBtn.onclick(() => submitAddPage(false));
     refs.addPageRouteInput.oninput(({ event }) => {
-      const v = event.target.value;
+      routeInputEl = event.target;
+      const v = routeInputEl.value;
       setAddPageRoute(v);
       scheduleRouteCheck(v);
     });
+    refs.addPageRouteInput.onfocus(({ event }) => {
+      routeInputEl = event.target;
+    });
+    refs.addPageContentMd.onfocus(({ event }) => {
+      contentTextareaEl = event.target;
+      trackTextareaSelection(contentTextareaEl);
+    });
     refs.addPageContentMd.oninput(({ event }) => {
       contentTextareaEl = event.target;
+      trackTextareaSelection(contentTextareaEl);
       setAddPageContentMd(contentTextareaEl.value);
       updateDesignHint();
     });
+    refs.addPageContentMd.addEventListener(
+      "select",
+      (ev) => {
+        trackTextareaSelection(ev.event.target);
+      }
+    );
+    refs.addPageDesignMd.onfocus(({ event }) => {
+      designTextareaEl = event.target;
+      trackDesignTextareaSelection(designTextareaEl);
+    });
     refs.addPageDesignMd.oninput(({ event }) => {
       designTextareaEl = event.target;
+      trackDesignTextareaSelection(designTextareaEl);
       setAddPageDesignMd(designTextareaEl.value);
       updateDesignHint();
     });
@@ -10146,7 +10342,7 @@ function initAddPageComposer(deps) {
         el.click();
       });
     });
-    pluginsPanel.bindPluginsPanelRefs(refs);
+    addMenuPanel.bindAddMenuPanelRefs(refs);
     briefFillPanel.bindBriefFillRefs(refs);
     refs.addPageAttachmentsList.onchange(
       ({ event }) => {
@@ -10199,18 +10395,21 @@ function initAddPageComposer(deps) {
     addPageUploadHint,
     addPageAttachmentRows: addPageAttachmentDisplayRows,
     addPageShowDesignHint,
-    showAddPagePluginsPanel: pluginsPanel.showPluginsPanel,
-    showAddPagePagePluginsZone: pluginsPanel.showPagePluginsZone,
-    addPagePluginPickerOptions: pluginsPanel.addPagePluginPickerOptions,
-    addPagePluginPickerValue: pluginsPanel.addPagePluginPickerValue,
-    showAddPageContractPicker: pluginsPanel.showContractPicker,
-    addPagePickerPluginLabel: pluginsPanel.addPagePickerPluginLabel,
-    addPageContractPickerRows: pluginsPanel.addPageContractPickerRows,
-    addPagePagePluginChips: pluginsPanel.pagePluginChipRows,
-    showAddPageHasPagePluginChips: createMemo(
-      () => pluginsPanel.pagePluginChipRows().length > 0
+    showAddMenuPanel: addMenuPanel.showAddMenuPanel,
+    showAddMenuChips: addMenuPanel.showAddMenuChips,
+    addMenuChipRows: addMenuPanel.chipRows,
+    showAddMenuEmptyHint: addMenuPanel.showAddMenuEmptyHint,
+    showAddMenuPopover: addMenuPanel.showAddMenuPopover,
+    addMenuNavRows: addMenuPanel.menuNavRows,
+    addMenuSelectedCategory: addMenuPanel.selectedCategory,
+    addMenuParamCollisionWarning: addMenuPanel.paramCollisionWarning,
+    addMenuRouteParamHint: addMenuPanel.routeParamHint,
+    addMenuRouteParamRows: addMenuPanel.routeParamRows,
+    showAddMenuRouteParams: createMemo(
+      () => addMenuPanel.routeParamRows().length > 0
     ),
-    showAddPagePagePluginsEmptyHint: pluginsPanel.showPagePluginsEmptyHint,
+    showAddMenuRouteParamConfirm: addMenuPanel.showRouteParamConfirm,
+    addMenuPendingRouteParamTitle: addMenuPanel.pendingRouteParamTitle,
     addPageIsDynamicRoute,
     addPageCreateDisabled,
     showAddPageRouteError,
@@ -10240,102 +10439,558 @@ function initAddPageComposer(deps) {
     submitAddPage,
     retryAddPage,
     openPreviewForRoute,
-    bindAddPageRefs
+    bindAddPageRefs,
+    refreshAddMenuCatalog: () => addMenuPanel.refreshCatalog()
   };
 }
-function annotationPluginBindings(annotation) {
-  if (annotation.pluginBindings?.length) return [...annotation.pluginBindings];
-  if (annotation.pluginBinding) return [annotation.pluginBinding];
-  return [];
+function markerAddMenuAttachments(annotation) {
+  return (annotation.addMenuAttachments ?? []).filter(
+    (a2) => a2.annotationId === annotation.id || a2.annotationId === void 0
+  );
 }
-function buildBindingChipLabel(binding, annotationId) {
-  const where = binding.scope === "page" ? "anywhere on page" : `marker #${annotationId}`;
-  return `${binding.pluginName} · ${binding.contractName} · ${where}`;
+function enrichAnnotationAddMenuUi(annotation, itemById, pickerOpenForAnnotation, selectedCategory) {
+  const attachments = markerAddMenuAttachments(annotation);
+  const open = !!annotation.addMenuSectionOpen;
+  const pickerOpen = pickerOpenForAnnotation && open;
+  return {
+    addMenuSectionOpen: open,
+    showAddMenuControls: open,
+    showMarkerAddMenuChips: attachments.length > 0,
+    showMarkerAddMenuEmptyHint: attachments.length === 0,
+    markerAddMenuChips: attachments.map((a2) => {
+      const item = itemById.get(a2.itemId);
+      return {
+        rowKey: `${a2.itemId}:${annotation.id}`,
+        itemId: a2.itemId,
+        title: item?.title ?? a2.itemId,
+        subtitle: item?.pluginName ?? item?.id.split(":")[0] ?? ""
+      };
+    }),
+    addMenuSelectedCategory: selectedCategory,
+    showAddMenuItemPicker: pickerOpen,
+    markerPickerNavRows: [],
+    showMarkerPickerLoading: false,
+    showMarkerPickerCatalogEmpty: false,
+    crAddMenuParamCollisionWarning: "",
+    crAddMenuRouteParamHint: "",
+    showCrAddMenuRouteParams: false,
+    crAddMenuRouteParamRows: [],
+    showCrRouteParamConfirm: false,
+    crPendingRouteParamTitle: "",
+    showCrPlannedRoutePanel: false,
+    crPlannedRoute: ""
+  };
+}
+function addMenuItemToAnnotation(prev, annotationId, itemId) {
+  return dedupeAddMenuAttachment(prev ?? [], {
+    itemId,
+    annotationId
+  });
 }
-function markerHeadlessPluginOptions(plugins) {
-  const installed = plugins.filter(
-    (p) => p.kind === "headless" && p.installed && p.showInAddPagePicker !== false && p.contracts.length > 0
+function removeMenuItemFromAnnotation(prev, annotationId, itemId) {
+  return removeAddMenuAttachment(prev ?? [], itemId, annotationId);
+}
+function initVisualAddMenuController(deps) {
+  const [catalogItems, setCatalogItems] = createSignal([]);
+  const [catalogCategories, setCatalogCategories] = createSignal([]);
+  const [catalogLoading, setCatalogLoading] = createSignal(false);
+  const [catalogLoaded, setCatalogLoaded] = createSignal(false);
+  let catalogRefreshPromise = null;
+  const [pickerAnnotationId, setPickerAnnotationId] = createSignal(void 0);
+  const [pickerCategory, setPickerCategory] = createSignal("");
+  const [pickerSubCategory, setPickerSubCategory] = createSignal(
+    null
+  );
+  const [requestAttachments, setRequestAttachments] = createSignal([]);
+  const [routeMigration, setRouteMigration] = createSignal(null);
+  const [plannedRoute, setPlannedRoute] = createSignal("");
+  const [paramCollisionWarning, setParamCollisionWarning] = createSignal("");
+  const [routeParamHint, setRouteParamHint] = createSignal("");
+  const [routeSegmentNames, setRouteSegmentNames] = createSignal([]);
+  const [pendingRouteParamItem, setPendingRouteParamItem] = createSignal(null);
+  const [pendingRouteParamAnnotationId, setPendingRouteParamAnnotationId] = createSignal(null);
+  const [showRouteParamConfirm, setShowRouteParamConfirm] = createSignal(false);
+  const itemById = createMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const item of catalogItems()) map.set(item.id, item);
+    return map;
+  });
+  const pickerPanelOpen = createMemo(
+    () => pickerAnnotationId() !== void 0
+  );
+  const pickerNavRows = createMemo(
+    () => buildAddMenuNavRows(
+      catalogCategories(),
+      pickerPanelOpen(),
+      pickerCategory(),
+      pickerSubCategory()
+    )
+  );
+  const markerPickerNavRowsForView = createMemo(
+    () => pickerNavRows().map(stripMarkerAddMenuNavRowForPage)
+  );
+  const markerPickerNavRowsForVideo = markerPickerNavRowsForView;
+  const markerPickerNavRowsForSnapshot = markerPickerNavRowsForView;
+  const showMarkerPickerCatalogEmpty = createMemo(() => {
+    const id = pickerAnnotationId();
+    if (id === void 0 || id === null) return false;
+    return !catalogLoading() && catalogItems().length === 0;
+  });
+  const showMarkerPickerLoading = createMemo(() => {
+    const id = pickerAnnotationId();
+    if (id === void 0 || id === null) return false;
+    return catalogLoading();
+  });
+  const markerPickerSnapshot = createMemo(() => ({
+    pickerId: pickerAnnotationId(),
+    category: pickerCategory(),
+    subCategory: pickerSubCategory(),
+    navVisual: markerPickerNavRowsForView(),
+    navVideo: markerPickerNavRowsForVideo(),
+    navSnapshot: markerPickerNavRowsForSnapshot(),
+    loading: showMarkerPickerLoading(),
+    empty: showMarkerPickerCatalogEmpty()
+  }));
+  createMemo(
+    () => requestAttachments().map((a2) => {
+      const item = itemById().get(a2.itemId);
+      return {
+        rowKey: `req:${a2.itemId}`,
+        itemId: a2.itemId,
+        title: item?.title ?? a2.itemId,
+        subtitle: item?.pluginName ?? item?.id.split(":")[0] ?? ""
+      };
+    })
+  );
+  const routeParamRows = createMemo(
+    () => routeSegmentNames().map((name) => ({ rowKey: name, name }))
+  );
+  async function refreshCatalog() {
+    if (catalogRefreshPromise) return catalogRefreshPromise;
+    catalogRefreshPromise = (async () => {
+      setCatalogLoading(true);
+      try {
+        const result = await listAddMenuItems();
+        setCatalogItems(result.items);
+        setCatalogCategories(result.categories);
+        if (result.warnings.length > 0) {
+          console.warn("[aiditor] Add Menu catalog warnings:", result.warnings);
+        }
+      } catch (err) {
+        console.error("[aiditor] listAddMenuItems failed:", err);
+        setCatalogItems([]);
+        setCatalogCategories([]);
+      } finally {
+        setCatalogLoaded(true);
+        setCatalogLoading(false);
+        catalogRefreshPromise = null;
+      }
+    })();
+    return catalogRefreshPromise;
+  }
+  async function ensureCatalogLoaded() {
+    if (catalogLoading()) return;
+    if (catalogLoaded() && catalogCategories().length > 0) return;
+    await refreshCatalog();
+  }
+  async function updateRouteHelpers(attachments) {
+    const resolved = [];
+    for (const a2 of attachments) {
+      const item = itemById().get(a2.itemId);
+      if (!item) continue;
+      const params = await resolveContractParamsForItem(
+        deps.projectDir(),
+        item
+      );
+      if (params) resolved.push(params);
+    }
+    const collisions = detectRequiredParamCollisions(resolved);
+    setParamCollisionWarning(collisions[0]?.message ?? "");
+    const segments = collectRouteSegmentNames(resolved);
+    setRouteSegmentNames(segments);
+    const route = plannedRoute() || deps.getCurrentRoute();
+    const suggested = suggestMissingRouteSegments(route, segments);
+    setRouteParamHint(
+      suggested && suggested !== route ? `Suggested route segments: ${suggested}` : ""
+    );
+  }
+  async function openPicker(annotationId) {
+    setPickerAnnotationId(annotationId);
+    setPickerCategory("");
+    setPickerSubCategory(null);
+    await ensureCatalogLoaded();
+    if (catalogCategories().length === 0 && !catalogLoading()) {
+      await refreshCatalog();
+    }
+  }
+  function closePicker() {
+    setPickerAnnotationId(void 0);
+    setPickerCategory("");
+    setPickerSubCategory(null);
+  }
+  async function commitItem(item, updateAnnotation, annotationId) {
+    if (annotationId) {
+      updateAnnotation(annotationId, (a2) => ({
+        ...a2,
+        addMenuSectionOpen: true,
+        pickerOpen: false,
+        addMenuAttachments: addMenuItemToAnnotation(
+          a2.addMenuAttachments,
+          annotationId,
+          item.id
+        )
+      }));
+    } else {
+      setRequestAttachments((prev) => {
+        const exists = prev.some(
+          (a2) => a2.itemId === item.id && !a2.annotationId
+        );
+        if (exists) return prev;
+        return [...prev, { itemId: item.id }];
+      });
+      closePicker();
+    }
+    const all = [
+      ...requestAttachments(),
+      ...annotationId ? [{ itemId: item.id, annotationId }] : [{ itemId: item.id }]
+    ];
+    await updateRouteHelpers(all);
+  }
+  async function tryPickItem(item, updateAnnotation, annotationId) {
+    const params = await resolveContractParamsForItem(deps.projectDir(), item);
+    const hasRouteParams = !!params && params.allParams.length > 0;
+    const current = deps.getCurrentRoute();
+    if (hasRouteParams && current && !routeHasAnyDynamicSegment(current)) {
+      setPendingRouteParamItem(item);
+      setPendingRouteParamAnnotationId(annotationId);
+      setShowRouteParamConfirm(true);
+      return;
+    }
+    await commitItem(item, updateAnnotation, annotationId);
+  }
+  async function confirmRouteParamPick(updateAnnotation) {
+    const item = pendingRouteParamItem();
+    if (!item) return;
+    const current = deps.getCurrentRoute() || "/";
+    const params = await resolveContractParamsForItem(deps.projectDir(), item);
+    const segments = params ? collectRouteSegmentNames([params]) : [];
+    const planned = suggestMissingRouteSegments(current, segments) ?? `${current}/[slug]`;
+    setPlannedRoute(planned);
+    setRouteMigration({
+      currentRoute: current,
+      plannedRoute: planned,
+      reason: "add-menu-route-param-component",
+      triggeringItemIds: [item.id]
+    });
+    setShowRouteParamConfirm(false);
+    setPendingRouteParamItem(null);
+    const aid = pendingRouteParamAnnotationId();
+    setPendingRouteParamAnnotationId(null);
+    await commitItem(item, updateAnnotation, aid);
+  }
+  function cancelRouteParamPick() {
+    setShowRouteParamConfirm(false);
+    setPendingRouteParamItem(null);
+    setPendingRouteParamAnnotationId(null);
+  }
+  function enrichUi(annotation, _stripMarkerRow) {
+    const pickerOpen = !!annotation.pickerOpen;
+    const cat = annotation.selectedCategory ?? "";
+    const sub = annotation.selectedSubCategory ?? null;
+    const base = enrichAnnotationAddMenuUi(
+      annotation,
+      itemById(),
+      pickerOpen,
+      cat
+    );
+    const navRows = buildAddMenuNavRows(
+      catalogCategories(),
+      pickerOpen,
+      cat,
+      sub
+    ).map(_stripMarkerRow);
+    const hasAttachments = !!annotation.addMenuAttachments && annotation.addMenuAttachments.length > 0;
+    const isPendingRoute = pendingRouteParamAnnotationId() === annotation.id;
+    const showRouteUi = isPendingRoute || hasAttachments && routeMigration() !== null;
+    const showParamsUi = isPendingRoute || hasAttachments && routeParamRows().length > 0;
+    const showConfirm = isPendingRoute && showRouteParamConfirm();
+    return {
+      ...base,
+      showAddMenuItemPicker: pickerOpen,
+      markerPickerNavRows: navRows,
+      showMarkerPickerLoading: pickerOpen && catalogLoading(),
+      showMarkerPickerCatalogEmpty: pickerOpen && !catalogLoading() && catalogItems().length === 0,
+      crAddMenuParamCollisionWarning: showParamsUi ? paramCollisionWarning() : "",
+      crAddMenuRouteParamHint: showParamsUi ? routeParamHint() : "",
+      showCrAddMenuRouteParams: showParamsUi && routeParamRows().length > 0,
+      crAddMenuRouteParamRows: showParamsUi ? routeParamRows() : [],
+      showCrRouteParamConfirm: showConfirm,
+      crPendingRouteParamTitle: isPendingRoute && pendingRouteParamItem() ? pendingRouteParamItem().title : "",
+      showCrPlannedRoutePanel: showRouteUi,
+      crPlannedRoute: showRouteUi ? plannedRoute() : ""
+    };
+  }
+  function handleMarkerAddMenuClick(target, annotationId, updateAnnotation) {
+    if (target.classList.contains("annotation-add-menu-toggle")) {
+      updateAnnotation(annotationId, (a2) => ({
+        ...a2,
+        addMenuSectionOpen: !a2.addMenuSectionOpen
+      }));
+      return true;
+    }
+    if (target.closest("[data-marker-add-menu-open]")) {
+      updateAnnotation(annotationId, (a2) => ({
+        ...a2,
+        addMenuSectionOpen: true,
+        pickerOpen: true,
+        selectedCategory: "",
+        selectedSubCategory: null
+      }));
+      void ensureCatalogLoaded();
+      return true;
+    }
+    if (target.closest("[data-marker-add-menu-close]")) {
+      updateAnnotation(annotationId, (a2) => ({
+        ...a2,
+        pickerOpen: false
+      }));
+      return true;
+    }
+    if (target.closest("[data-marker-add-menu-manage]")) {
+      deps.openProjectSettings();
+      return true;
+    }
+    const catBtn = target.closest(
+      "[data-marker-add-menu-category]"
+    );
+    if (catBtn?.dataset.category) {
+      updateAnnotation(annotationId, (a2) => ({
+        ...a2,
+        selectedCategory: catBtn.dataset.category,
+        selectedSubCategory: null
+      }));
+      return true;
+    }
+    const subBtn = target.closest(
+      "[data-marker-add-menu-subcategory]"
+    );
+    if (subBtn?.dataset.subcategory !== void 0) {
+      updateAnnotation(annotationId, (a2) => ({
+        ...a2,
+        selectedSubCategory: subBtn.dataset.subcategory || null
+      }));
+      return true;
+    }
+    const pickBtn = target.closest(
+      "[data-marker-add-menu-pick]"
+    );
+    if (pickBtn?.dataset.itemId) {
+      const item = itemById().get(pickBtn.dataset.itemId);
+      if (item) void tryPickItem(item, updateAnnotation, annotationId);
+      return true;
+    }
+    const removeBtn = target.closest(
+      "[data-marker-add-menu-remove]"
+    );
+    if (removeBtn?.dataset.itemId) {
+      updateAnnotation(annotationId, (a2) => ({
+        ...a2,
+        addMenuAttachments: removeMenuItemFromAnnotation(
+          a2.addMenuAttachments,
+          annotationId,
+          removeBtn.dataset.itemId
+        )
+      }));
+      return true;
+    }
+    return false;
+  }
+  function handleRequestAddMenuClick(target, updateAnnotation) {
+    if (target.closest("[data-cr-add-menu-open]")) {
+      void openPicker(null);
+      return;
+    }
+    if (target.closest("[data-cr-add-menu-close]")) {
+      closePicker();
+      return;
+    }
+    if (target.closest("[data-cr-add-menu-manage]")) {
+      deps.openProjectSettings();
+      return;
+    }
+    const catBtn = target.closest(
+      "[data-cr-add-menu-category]"
+    );
+    if (catBtn?.dataset.category) {
+      setPickerCategory(catBtn.dataset.category);
+      setPickerSubCategory(null);
+      return;
+    }
+    const subBtn = target.closest(
+      "[data-cr-add-menu-subcategory]"
+    );
+    if (subBtn?.dataset.subcategory !== void 0) {
+      setPickerSubCategory(subBtn.dataset.subcategory || null);
+      return;
+    }
+    const pickBtn = target.closest(
+      "[data-cr-add-menu-pick]"
+    );
+    if (pickBtn?.dataset.itemId) {
+      const item = itemById().get(pickBtn.dataset.itemId);
+      if (item) void tryPickItem(item, updateAnnotation, null);
+      return;
+    }
+    const removeBtn = target.closest(
+      "[data-cr-add-menu-remove]"
+    );
+    if (removeBtn?.dataset.itemId) {
+      setRequestAttachments(
+        (prev) => prev.filter((a2) => a2.itemId !== removeBtn.dataset.itemId)
+      );
+      return;
+    }
+    if (target.closest("[data-cr-route-param-confirm]")) {
+      void confirmRouteParamPick(updateAnnotation);
+      return;
+    }
+    if (target.closest("[data-cr-route-param-cancel]")) {
+      setShowRouteParamConfirm(false);
+      setPendingRouteParamItem(null);
+    }
+  }
+  const showRequestAddMenuPicker = createMemo(
+    () => pickerAnnotationId() === null
   );
-  const options = installed.map((p) => ({
-    rowKey: p.pluginName,
-    value: p.pluginName,
-    label: p.pluginName
-  }));
-  options.push({
-    rowKey: ADD_PAGE_MANAGE_PLUGINS_VALUE,
-    value: ADD_PAGE_MANAGE_PLUGINS_VALUE,
-    label: "Manage plugins…"
-  });
-  return options;
-}
-function markerContractPickerRows(plugins, pluginName, bindings) {
-  const entry = plugins.find((p) => p.pluginName === pluginName);
-  if (!entry?.installed) return [];
-  return entry.contracts.map((c) => ({
-    rowKey: `${pluginName}:${c.contractName}`,
-    pluginName,
-    packageName: entry.packageName,
-    contractName: c.contractName,
-    description: c.description ?? "",
-    onPage: bindings.some(
-      (b) => b.pluginName === pluginName && b.contractName === c.contractName
-    ),
-    componentKey: bindings.find(
-      (b) => b.pluginName === pluginName && b.contractName === c.contractName
-    )?.componentKey ?? getDefaultComponentKey(c.contractName)
-  }));
-}
-function upsertAnnotationBinding(prev, binding) {
-  const idx = prev.findIndex(
-    (b) => b.pluginName === binding.pluginName && b.contractName === binding.contractName
+  createMemo(
+    () => showRequestAddMenuPicker() && catalogLoading()
   );
-  if (idx === -1) return [...prev, binding];
-  const next = [...prev];
-  next[idx] = binding;
-  return next;
-}
-function removeAnnotationBinding(prev, pluginName, contractName) {
-  return prev.filter(
-    (b) => !(b.pluginName === pluginName && b.contractName === contractName)
+  createMemo(
+    () => showRequestAddMenuPicker() && !catalogLoading() && catalogItems().length === 0
   );
-}
-function enrichAnnotationBindingUi(annotation, plugins) {
-  const bindings = annotationPluginBindings(annotation);
-  const pickerPlugin = annotation.bindingPickerPlugin ?? "";
-  const open = !!annotation.bindingSectionOpen;
   return {
-    bindingSectionOpen: open,
-    showBindingControls: open,
-    showMarkerHasBindingChips: bindings.length > 0,
-    showMarkerBindingEmptyHint: bindings.length === 0,
-    markerBindingChips: bindings.map((b) => ({
-      rowKey: `${b.pluginName}:${b.contractName}`,
-      label: buildBindingChipLabel(b, annotation.id),
-      pluginName: b.pluginName,
-      packageName: b.packageName,
-      contractName: b.contractName,
-      scope: b.scope
-    })),
-    markerPluginOptions: markerHeadlessPluginOptions(plugins),
-    markerContractPickerRows: markerContractPickerRows(
-      plugins,
-      pickerPlugin,
-      bindings
+    refreshCatalog,
+    enrichUi,
+    markerPickerSnapshot,
+    handleMarkerAddMenuClick,
+    handleRequestAddMenuClick,
+    requestAttachments,
+    routeMigration,
+    plannedRoute,
+    setPlannedRoute,
+    catalogLoading,
+    markerPickerNavRowsForView,
+    markerPickerNavRowsForVideo,
+    markerPickerNavRowsForSnapshot,
+    markerPickerSelectedCategory: pickerCategory,
+    showMarkerPickerLoading,
+    showMarkerPickerCatalogEmpty,
+    paramCollisionWarning,
+    routeParamHint,
+    routeParamRows,
+    showRouteParams: createMemo(() => routeParamRows().length > 0),
+    showRouteParamConfirm,
+    pendingRouteParamTitle: createMemo(
+      () => pendingRouteParamItem()?.title ?? ""
     ),
-    showMarkerContractPicker: pickerPlugin.length > 0,
-    markerPickerPluginLabel: pickerPlugin ? `Components from ${pickerPlugin}` : ""
+    confirmRouteParamPick,
+    cancelRouteParamPick,
+    reset: () => {
+      setRequestAttachments([]);
+      setRouteMigration(null);
+      setPlannedRoute("");
+      closePicker();
+    }
   };
 }
-function bindingFromSelection(plugins, pluginName, contractName, scope) {
-  const entry = plugins.find((p) => p.pluginName === pluginName);
-  if (!entry?.installed || !contractName) return void 0;
-  return {
-    pluginName,
-    packageName: entry.packageName,
-    contractName,
-    componentKey: getDefaultComponentKey(contractName),
-    scope
-  };
+const CATALOG = [
+  {
+    pluginName: "wix-server-client",
+    packageName: "@jay-framework/wix-server-client",
+    description: "Wix API client and authentication",
+    kind: "service-only",
+    requires: [],
+    showInAddPagePicker: false,
+    configFiles: ["config/.wix.yaml"]
+  },
+  {
+    pluginName: "wix-cart",
+    packageName: "@jay-framework/wix-cart",
+    description: "Shopping cart headless components",
+    kind: "headless",
+    requires: ["wix-server-client"],
+    showInAddPagePicker: true
+  },
+  {
+    pluginName: "wix-stores",
+    packageName: "@jay-framework/wix-stores",
+    description: "Wix Stores product search, product page, categories",
+    kind: "headless",
+    requires: ["wix-server-client", "wix-cart"],
+    showInAddPagePicker: true,
+    configFiles: ["config/.wix-stores.yaml"]
+  },
+  {
+    pluginName: "wix-stores-v1",
+    packageName: "@jay-framework/wix-stores-v1",
+    description: "Wix Stores v1 catalog API",
+    kind: "headless",
+    requires: ["wix-server-client", "wix-cart"],
+    showInAddPagePicker: true
+  },
+  {
+    pluginName: "wix-data",
+    packageName: "@jay-framework/wix-data",
+    description: "Wix Data collections CMS",
+    kind: "headless",
+    requires: ["wix-server-client"],
+    showInAddPagePicker: true,
+    configFiles: ["config/.wix-data.yaml"]
+  },
+  {
+    pluginName: "wix-media",
+    packageName: "@jay-framework/wix-media",
+    description: "Wix media service (no page components)",
+    kind: "service-only",
+    requires: ["wix-server-client"],
+    showInAddPagePicker: true
+  },
+  {
+    pluginName: "ui-kit",
+    packageName: "@jay-framework/ui-kit",
+    description: "Jay UI kit headless components",
+    kind: "headless",
+    requires: [],
+    showInAddPagePicker: true
+  },
+  {
+    pluginName: "gemini-agent",
+    packageName: "@jay-framework/gemini-agent",
+    description: "Gemini AI agent plugin",
+    kind: "headless",
+    requires: [],
+    showInAddPagePicker: true,
+    configFiles: ["config/.gemini-agent.yaml"]
+  },
+  {
+    pluginName: "webmcp",
+    packageName: "@jay-framework/webmcp",
+    description: "Web MCP tooling",
+    kind: "tooling",
+    requires: [],
+    showInAddPagePicker: false
+  },
+  {
+    pluginName: "aiditor",
+    packageName: "@jay-framework/aiditor",
+    description: "AIditor self plugin",
+    kind: "tooling",
+    requires: [],
+    showInAddPagePicker: false
+  }
+];
+function getCatalogEntry(pluginName) {
+  return CATALOG.find((e2) => e2.pluginName === pluginName);
 }
 function buildPluginInstallAgentNotes(entry, installError, projectDirHint) {
   const requires = entry.requires.length > 0 ? entry.requires.join(", ") : "(none — install this plugin only)";
@@ -10367,6 +11022,7 @@ function buildPluginInstallAgentNotes(entry, installError, projectDirHint) {
     "## Local / monorepo alternative",
     wixPortal,
     "- Read `agent-kit/plugin/INSTRUCTIONS.md` for plugin setup conventions.",
+    "- To contribute Add Menu catalog items, read `agent-kit/plugin/aiditor-add-menu.md`.",
     "",
     "When finished, summarize what you installed and any config files the user must edit (e.g. config/.wix.yaml)."
   ].filter((line) => line !== "").join("\n");
@@ -10380,6 +11036,50 @@ const VALID_INSTALL_PREFIXES = ["portal:", "file:", "workspace:"];
 function isValidInstallSpec(spec) {
   return VALID_INSTALL_PREFIXES.some((p) => spec.startsWith(p));
 }
+const listJayPluginsAction = createActionCaller("aiditor.listJayPlugins", "GET");
+createActionCaller("aiditor.listPluginContracts", "GET");
+const checkPluginUpdateAction = createActionCaller("aiditor.checkPluginUpdate", "GET");
+const ensureProjectPluginAction = createStreamCaller("aiditor.ensureProjectPlugin");
+createActionCaller("aiditor.getPluginSetupStatus", "GET");
+const rerunPluginSetupAction = createActionCaller("aiditor.rerunPluginSetup", "GET");
+createActionCaller("aiditor.syncAddPagePluginManifest", "GET");
+const writePluginSourceAction = createActionCaller("aiditor.writePluginSource", "GET");
+async function listJayPlugins(refreshSetupStatus = false) {
+  return listJayPluginsAction({ refreshSetupStatus });
+}
+async function checkPluginUpdate(pluginName) {
+  return checkPluginUpdateAction({ pluginName });
+}
+function ensureProjectPluginStream(input, callbacks) {
+  let aborted = false;
+  const abort = () => {
+    aborted = true;
+  };
+  void (async () => {
+    try {
+      for await (const chunk of ensureProjectPluginAction(input)) {
+        if (aborted) break;
+        callbacks.onChunk(chunk);
+        if (chunk.type === "done" || chunk.type === "error") {
+          callbacks.onEnd();
+          return;
+        }
+      }
+      if (!aborted) callbacks.onEnd();
+    } catch (err) {
+      if (!aborted) {
+        callbacks.onError(err instanceof Error ? err : new Error(String(err)));
+      }
+    }
+  })();
+  return abort;
+}
+async function rerunPluginSetup(pluginName, force) {
+  return rerunPluginSetupAction({ pluginName, force });
+}
+async function writePluginSource(input) {
+  return writePluginSourceAction(input);
+}
 function initProjectPluginsManager(deps) {
   const [pluginsList, setPluginsList] = createSignal([]);
   const [pluginsLoaded, setPluginsLoaded] = createSignal(false);
@@ -10559,6 +11259,7 @@ function initProjectPluginsManager(deps) {
               updateAvailable: false
             });
             void refreshPluginsList(true).then(() => deps.loadProjectInfo());
+            deps.onInstallComplete?.(pluginName);
             setShowReloadPreviewBanner(true);
           }
         },
@@ -10759,20 +11460,31 @@ function serializeGeometry(a2) {
     return { kind: "area", x: a2.x, y: a2.y, w: a2.w, h: a2.h };
   return { kind: "arrow", x1: a2.x1, y1: a2.y1, x2: a2.x2, y2: a2.y2 };
 }
-function toNotesPayload(annotations, breakpoint) {
+function serializeAnnotationNotesFields(a2) {
+  if (a2.addMenuAttachments?.length) {
+    return { addMenuAttachments: a2.addMenuAttachments };
+  }
+  if (a2.pluginBindings?.length) {
+    return { pluginBindings: a2.pluginBindings };
+  }
+  return {};
+}
+function toNotesPayload(annotations, breakpoint, requestLevel) {
   return {
     version: AIDITOR_NOTES_VERSION,
     breakpoint,
+    ...requestLevel?.addMenuAttachments?.length ? { addMenuAttachments: requestLevel.addMenuAttachments } : {},
+    ...requestLevel?.routeMigration ? { routeMigration: requestLevel.routeMigration } : {},
     annotations: annotations.map((a2) => ({
       id: a2.id,
       mode: a2.kind,
       instruction: a2.instruction.trim(),
       geometry: serializeGeometry(a2),
-      ...a2.pluginBindings?.length ? { pluginBindings: a2.pluginBindings } : {}
+      ...serializeAnnotationNotesFields(a2)
     }))
   };
 }
-function toVideoNotesPayload(annotations, videoMeta, notesContext) {
+function toVideoNotesPayload(annotations, videoMeta, notesContext, requestLevel) {
   const baseOrigin = typeof window !== "undefined" ? window.location.origin : JAY_DEV_URL_DEFAULT;
   const fallback = fallbackPreviewContextFromBar(notesContext.fallbackRenderedUrl, notesContext.fallbackRoute, baseOrigin);
   const navLog = notesContext.previewNavLog.length > 0 ? notesContext.previewNavLog : void 0;
@@ -10782,6 +11494,8 @@ function toVideoNotesPayload(annotations, videoMeta, notesContext) {
     videoMeta,
     previewNavLog: navLog,
     breakpoint: notesContext.breakpoint,
+    ...requestLevel?.addMenuAttachments?.length ? { addMenuAttachments: requestLevel.addMenuAttachments } : {},
+    ...requestLevel?.routeMigration ? { routeMigration: requestLevel.routeMigration } : {},
     annotations: annotations.map((a2) => {
       const ctx = resolvePreviewContextAtTime(a2.timeSec, navLog, fallback);
       return {
@@ -10792,7 +11506,7 @@ function toVideoNotesPayload(annotations, videoMeta, notesContext) {
         timeSec: a2.timeSec,
         previewUrlAtTime: ctx.href,
         pagePathAtTime: ctx.locationPath,
-        ...a2.pluginBindings?.length ? { pluginBindings: a2.pluginBindings } : {}
+        ...serializeAnnotationNotesFields(a2)
       };
     })
   };
@@ -11020,12 +11734,22 @@ function aiditorConstructor(_props, refs) {
   const [visualSubmitError, setVisualSubmitError] = createSignal("");
   const [showProjectSettingsModal, setShowProjectSettingsModal] = createSignal(false);
   let runPluginInstallAgent;
+  let refreshAddMenuCatalog;
   const projectPlugins = initProjectPluginsManager({
     loadProjectInfo: () => loadProjectInfo(),
     fixInstallWithAgent: (pluginName, installError) => {
       runPluginInstallAgent?.(pluginName, installError);
+    },
+    onInstallComplete: () => {
+      void refreshAddMenuCatalog?.();
     }
   });
+  const visualAddMenu = initVisualAddMenuController({
+    projectDir: () => projectDir(),
+    projectPlugins,
+    openProjectSettings,
+    getCurrentRoute: () => selectedPageUrl() || "/"
+  });
   function openProjectSettings() {
     setShowProjectSettingsModal(true);
     void projectPlugins.refreshPluginsList();
@@ -11307,9 +12031,28 @@ function aiditorConstructor(_props, refs) {
       return true;
     return list.some((a2) => a2.instruction.trim().length === 0);
   });
+  createMemo(() => {
+    return {
+      show: false,
+      annotationId: "",
+      leftPct: 0,
+      topPct: 0,
+      navRows: [],
+      selectedCategory: "",
+      loading: false,
+      empty: false
+    };
+  });
+  const showMarkerAddMenuPopover = createMemo(() => false);
+  const markerAddMenuPopoverLeftPct = createMemo(() => 0);
+  const markerAddMenuPopoverTopPct = createMemo(() => 0);
+  const markerAddMenuPickerAnnotationId = createMemo(() => "");
+  const markerAddMenuNavRows = createMemo(() => []);
+  const markerAddMenuSelectedCategory = createMemo(() => "");
+  const showMarkerAddMenuPickerLoading = createMemo(() => false);
+  const showMarkerAddMenuPickerCatalogEmpty = createMemo(() => false);
   const visualAnnotationRows = createMemo(() => {
     const runDisabled = visualRunDisabled();
-    const plugins = projectPlugins.pluginsList();
     return visualAnnotations().map((a2) => {
       const { nx, ny } = bubbleAnchorNorm(a2);
       const leftPct = nx * 100;
@@ -11331,10 +12074,11 @@ function aiditorConstructor(_props, refs) {
         popoverFlipX: flipX,
         popoverFlipY: flipY,
         attachmentChips,
-        ...enrichAnnotationBindingUi(a2, plugins)
+        ...visualAddMenu.enrichUi(a2, stripMarkerPickerNavRowForVisual)
       };
     });
   });
+  const showCrPlannedRoutePanel = createMemo(() => visualAddMenu.routeMigration() !== null);
   const recordingDraftPopoverRow = createMemo(() => {
     const a2 = recordingDraftAnnotation();
     if (!a2)
@@ -11462,7 +12206,6 @@ function aiditorConstructor(_props, refs) {
     const t = videoReviewCurrentTimeSec();
     const list = fullList.filter((a2) => isVideoAnnotationAtPlayhead(t, a2.timeSec));
     const runDisabled = fullList.length > 0 && (isRunning() || fullList.some((a2) => a2.instruction.trim().length === 0));
-    const plugins = projectPlugins.pluginsList();
     return list.map((a2) => {
       const { nx, ny } = bubbleAnchorNorm(a2);
       const leftPct = nx * 100;
@@ -11485,7 +12228,7 @@ function aiditorConstructor(_props, refs) {
         popoverFlipX: flipX,
         popoverFlipY: flipY,
         attachmentChips,
-        ...enrichAnnotationBindingUi(a2, plugins)
+        ...visualAddMenu.enrichUi(a2, stripMarkerPickerNavRowForVideo)
       };
     });
   });
@@ -11611,7 +12354,6 @@ function aiditorConstructor(_props, refs) {
   const snapshotAreaDraftWidthPct = createMemo(() => (snapshotAreaDraftNorm()?.w ?? 0) * 100);
   const snapshotAreaDraftHeightPct = createMemo(() => (snapshotAreaDraftNorm()?.h ?? 0) * 100);
   const snapshotAnnotationItems = createMemo(() => {
-    const plugins = projectPlugins.pluginsList();
     return snapshotAnnotations().map((a2) => {
       const { nx, ny } = bubbleAnchorNorm(a2);
       const leftPct = nx * 100;
@@ -11634,7 +12376,7 @@ function aiditorConstructor(_props, refs) {
         popoverFlipX: flipX,
         popoverFlipY: flipY,
         attachmentChips,
-        ...enrichAnnotationBindingUi(a2, plugins)
+        ...visualAddMenu.enrichUi(a2, stripMarkerPickerNavRowForSnapshot)
       };
     });
   });
@@ -11714,6 +12456,7 @@ function aiditorConstructor(_props, refs) {
     setAreaDraft(null);
     setArrowPending(null);
     setVisualSubmitError("");
+    visualAddMenu.reset();
     cancelAreaDragListeners();
     setVisualTool("none");
   }
@@ -11901,68 +12644,27 @@ function aiditorConstructor(_props, refs) {
   function updateVideoAsVisual(id, updater) {
     updateVideoAnnotation(id, (a2) => updater(a2));
   }
-  function toggleBindingSection(update, id) {
-    update(id, (a2) => ({
-      ...a2,
-      bindingSectionOpen: !a2.bindingSectionOpen
-    }));
-  }
-  function setBindingPickerPlugin(update, id, pluginName) {
-    if (pluginName === ADD_PAGE_MANAGE_PLUGINS_VALUE || pluginName === "__install__") {
-      openProjectSettings();
-      return;
-    }
-    update(id, (a2) => ({
-      ...a2,
-      bindingSectionOpen: true,
-      bindingPickerPlugin: pluginName
-    }));
-  }
-  function addBindingToAnnotation(update, id, pluginName, _packageName, contractName, componentKey) {
-    const plugins = projectPlugins.pluginsList();
-    update(id, (a2) => {
-      const binding = bindingFromSelection(plugins, pluginName, contractName, "marker");
-      if (!binding)
-        return a2;
-      if (componentKey)
-        binding.componentKey = componentKey;
-      return {
-        ...a2,
-        bindingSectionOpen: true,
-        pluginBindings: upsertAnnotationBinding(a2.pluginBindings ?? [], binding)
-      };
-    });
-  }
-  function removeBindingFromAnnotation(update, id, pluginName, contractName) {
-    update(id, (a2) => ({
-      ...a2,
-      pluginBindings: removeAnnotationBinding(a2.pluginBindings ?? [], pluginName, contractName)
-    }));
-  }
-  function handleBindingUiEvent(target, id, update) {
-    if (target.classList.contains("annotation-binding-toggle")) {
-      toggleBindingSection(update, id);
-      return;
-    }
-    if (target.closest("[data-marker-manage-plugins]")) {
-      openProjectSettings();
-      return;
-    }
-    if (target.classList.contains("annotation-binding-plugin")) {
-      setBindingPickerPlugin(update, id, target.value);
+  function updateMarkerAddMenuAnnotation(id, updater) {
+    if (visualAnnotations().some((a2) => a2.id === id)) {
+      updateVisualAnnotation(id, (a2) => ({ ...a2, ...updater(a2) }));
       return;
     }
-    const addBtn = target.closest("[data-marker-add-contract]");
-    if (addBtn?.dataset.plugin && addBtn.dataset.contract && addBtn.dataset.package) {
-      addBindingToAnnotation(update, id, addBtn.dataset.plugin, addBtn.dataset.package, addBtn.dataset.contract, addBtn.dataset.key ?? "");
+    if (videoSessionAnnotations().some((a2) => a2.id === id)) {
+      updateVideoAsVisual(id, (a2) => ({ ...a2, ...updater(a2) }));
       return;
     }
-    const removeChip = target.closest("[data-marker-remove-binding]");
-    if (removeChip?.dataset.plugin && removeChip.dataset.contract) {
-      removeBindingFromAnnotation(update, id, removeChip.dataset.plugin, removeChip.dataset.contract);
-      return;
+    if (snapshotAnnotations().some((a2) => a2.id === id)) {
+      updateSnapshotAnnotation(id, (a2) => ({ ...a2, ...updater(a2) }));
     }
   }
+  function changeRequestAddMenuPayload() {
+    const attachments = visualAddMenu.requestAttachments();
+    const migration = visualAddMenu.routeMigration();
+    return {
+      ...attachments.length ? { addMenuAttachments: attachments } : {},
+      ...migration ? { routeMigration: migration } : {}
+    };
+  }
   function setRecordingDraftInstruction(instruction) {
     setRecordingDraftAnnotation((prev) => {
       if (!prev)
@@ -12117,6 +12819,7 @@ function aiditorConstructor(_props, refs) {
       setIsBootstrapping(false);
       paramsCache.clear();
       loadProjectInfo();
+      void refreshAddMenuCatalog?.();
     }).catch((err) => {
       console.error("[aiditor] bootstrap", err);
       setIsBootstrapping(false);
@@ -12296,6 +12999,10 @@ function aiditorConstructor(_props, refs) {
     selectedPageUrl,
     setCurrentPageHasBrief
   });
+  refreshAddMenuCatalog = () => {
+    void addPage.refreshAddMenuCatalog();
+    void visualAddMenu.refreshCatalog();
+  };
   refreshPageBriefRef.current = () => {
     void addPage.refreshCurrentPageBriefAvailability();
   };
@@ -12545,6 +13252,10 @@ function aiditorConstructor(_props, refs) {
   });
   refs.visualAnnotationRows.annotationRow.oninput(({ event }) => {
     const t = event.target;
+    if (t.classList.contains("cr-planned-route-input")) {
+      visualAddMenu.setPlannedRoute(t.value);
+      return;
+    }
     if (t.tagName !== "TEXTAREA" || !t.classList.contains("visual-annotation-instruction"))
       return;
     const id = t.dataset.annotationId;
@@ -12617,19 +13328,31 @@ function aiditorConstructor(_props, refs) {
       tryJayRefExec2(refs.visualAttachFileInput, (el) => el.click());
     }
   });
-  refs.visualAnnotationRows.annotationRow.onchange(({ event }) => {
-    const t = event.target;
-    const card = t.closest("[data-annotation-id]");
-    const id = card?.getAttribute("data-annotation-id");
-    if (!id)
-      return;
-    handleBindingUiEvent(t, id, updateVisualAnnotation);
-  });
   refs.visualAnnotationRows.annotationRow.onclick(({ event, viewState }) => {
     const raw = event.target;
-    if (raw.closest(".annotation-binding")) {
+    if (raw.closest(".annotation-add-menu")) {
       event.preventDefault();
-      handleBindingUiEvent(raw, viewState.id, updateVisualAnnotation);
+      const handled = visualAddMenu.handleMarkerAddMenuClick(raw, viewState.id, updateMarkerAddMenuAnnotation);
+      if (!handled) {
+        const paramBtn = raw.closest("[data-cr-route-param]");
+        if (paramBtn?.dataset.param) {
+          const name = paramBtn.dataset.param;
+          visualAddMenu.setPlannedRoute((route) => {
+            const base = route || selectedPageUrl() || "/";
+            if (base.includes(`[${name}]`))
+              return base;
+            return base.endsWith("/") ? `${base}[${name}]` : `${base}/[${name}]`;
+          });
+          return;
+        }
+        if (raw.closest("[data-cr-route-param-confirm]")) {
+          void visualAddMenu.confirmRouteParamPick(updateMarkerAddMenuAnnotation);
+          return;
+        }
+        if (raw.closest("[data-cr-route-param-cancel]")) {
+          visualAddMenu.cancelRouteParamPick();
+        }
+      }
       return;
     }
     const t = raw.closest("button");
@@ -12678,7 +13401,7 @@ function aiditorConstructor(_props, refs) {
       return;
     }
     const list = visualAnnotations();
-    const notesJson = serializeAiditorNotes(toNotesPayload(list, previewBreakpoint()));
+    const notesJson = serializeAiditorNotes(toNotesPayload(list, previewBreakpoint(), changeRequestAddMenuPayload()));
     try {
       setIsRunning(true);
       setVisualSubmitError("");
@@ -12722,7 +13445,7 @@ function aiditorConstructor(_props, refs) {
       setSnapshotSubmitError("Screenshot data is missing.");
       return;
     }
-    const notesJson = serializeAiditorNotes(toNotesPayload(list, previewBreakpoint()));
+    const notesJson = serializeAiditorNotes(toNotesPayload(list, previewBreakpoint(), changeRequestAddMenuPayload()));
     try {
       setIsRunning(true);
       setSnapshotSubmitError("");
@@ -13262,7 +13985,7 @@ function aiditorConstructor(_props, refs) {
       fallbackRenderedUrl: rendered,
       fallbackRoute: route,
       breakpoint: previewBreakpoint()
-    });
+    }, changeRequestAddMenuPayload());
     try {
       setIsRunning(true);
       setVideoSubmitError("");
@@ -13270,12 +13993,26 @@ function aiditorConstructor(_props, refs) {
       const frameDuals = [];
       const nFrames = distinctTimes.length;
       let frameIdx = 0;
+      videoEl.pause();
       for (const t of distinctTimes) {
         frameIdx += 1;
         setVideoSubmitProgress(`Capturing annotated frames (${frameIdx}/${nFrames})…`);
+        console.info("[aiditor:video-capture] frame start", {
+          frameIdx,
+          nFrames,
+          timeSec: t,
+          currentTime: videoEl.currentTime,
+          paused: videoEl.paused
+        });
         await seekVideoToTime(videoEl, t);
+        setVideoReviewCurrentTimeSec(t);
+        await flushLayout();
         const dual = await captureVideoInstantDual(captureRoot, videoEl);
         frameDuals.push({ timeSec: t, ...dual });
+        console.info("[aiditor:video-capture] frame done", {
+          frameIdx,
+          timeSec: t
+        });
       }
       const attachmentsByPin = /* @__PURE__ */ new Map();
       for (const a2 of list) {
@@ -13353,6 +14090,7 @@ function aiditorConstructor(_props, refs) {
   }
   function finishAgentStreamRun() {
     setIsRunning(false);
+    void refreshAddMenuCatalog?.();
     focusAgentChatInput();
   }
   function runAgentStream(notes2, options, streamOptions) {
@@ -13665,16 +14403,12 @@ function aiditorConstructor(_props, refs) {
       }
     }
   });
-  refs.videoAnnotationRows.videoAnnotationRow.onchange(({ event }) => {
-    const t = event.target;
-    const card = t.closest("[data-annotation-id]");
-    const id = card?.getAttribute("data-annotation-id");
-    if (!id)
-      return;
-    handleBindingUiEvent(t, id, updateVideoAsVisual);
-  });
   refs.videoAnnotationRows.videoAnnotationRow.oninput(({ event }) => {
     const t = event.target;
+    if (t.classList.contains("cr-planned-route-input")) {
+      visualAddMenu.setPlannedRoute(t.value);
+      return;
+    }
     if (t.tagName !== "TEXTAREA" || !t.classList.contains("visual-annotation-instruction"))
       return;
     const id = t.dataset.annotationId;
@@ -13684,9 +14418,29 @@ function aiditorConstructor(_props, refs) {
   });
   refs.videoAnnotationRows.videoAnnotationRow.onclick(({ event, viewState }) => {
     const raw = event.target;
-    if (raw.closest(".annotation-binding")) {
+    if (raw.closest(".annotation-add-menu")) {
       event.preventDefault();
-      handleBindingUiEvent(raw, viewState.id, updateVideoAsVisual);
+      const handled = visualAddMenu.handleMarkerAddMenuClick(raw, viewState.id, updateMarkerAddMenuAnnotation);
+      if (!handled) {
+        const paramBtn = raw.closest("[data-cr-route-param]");
+        if (paramBtn?.dataset.param) {
+          const name = paramBtn.dataset.param;
+          visualAddMenu.setPlannedRoute((route) => {
+            const base = route || selectedPageUrl() || "/";
+            if (base.includes(`[${name}]`))
+              return base;
+            return base.endsWith("/") ? `${base}[${name}]` : `${base}/[${name}]`;
+          });
+          return;
+        }
+        if (raw.closest("[data-cr-route-param-confirm]")) {
+          void visualAddMenu.confirmRouteParamPick(updateMarkerAddMenuAnnotation);
+          return;
+        }
+        if (raw.closest("[data-cr-route-param-cancel]")) {
+          visualAddMenu.cancelRouteParamPick();
+        }
+      }
       return;
     }
     const t = raw.closest("button");
@@ -13930,16 +14684,12 @@ function aiditorConstructor(_props, refs) {
       }
     }
   });
-  refs.snapshotAnnotationItems.snapshotAnnotationRow.onchange(({ event }) => {
-    const t = event.target;
-    const card = t.closest("[data-annotation-id]");
-    const id = card?.getAttribute("data-annotation-id");
-    if (!id)
-      return;
-    handleBindingUiEvent(t, id, updateSnapshotAnnotation);
-  });
   refs.snapshotAnnotationItems.snapshotAnnotationRow.oninput(({ event }) => {
     const t = event.target;
+    if (t.classList.contains("cr-planned-route-input")) {
+      visualAddMenu.setPlannedRoute(t.value);
+      return;
+    }
     if (t.tagName !== "TEXTAREA" || !t.classList.contains("visual-annotation-instruction"))
       return;
     const id = t.dataset.annotationId;
@@ -13964,12 +14714,33 @@ function aiditorConstructor(_props, refs) {
   });
   refs.snapshotAnnotationItems.snapshotAnnotationRow.onclick(({ event }) => {
     const raw = event.target;
-    if (raw.closest(".annotation-binding")) {
+    if (raw.closest(".annotation-add-menu")) {
       event.preventDefault();
       const card = raw.closest("[data-annotation-id]");
       const id = card?.getAttribute("data-annotation-id");
-      if (id)
-        handleBindingUiEvent(raw, id, updateSnapshotAnnotation);
+      if (id) {
+        const handled = visualAddMenu.handleMarkerAddMenuClick(raw, id, updateMarkerAddMenuAnnotation);
+        if (!handled) {
+          const paramBtn = raw.closest("[data-cr-route-param]");
+          if (paramBtn?.dataset.param) {
+            const name = paramBtn.dataset.param;
+            visualAddMenu.setPlannedRoute((route) => {
+              const base = route || selectedPageUrl() || "/";
+              if (base.includes(`[${name}]`))
+                return base;
+              return base.endsWith("/") ? `${base}[${name}]` : `${base}/[${name}]`;
+            });
+            return;
+          }
+          if (raw.closest("[data-cr-route-param-confirm]")) {
+            void visualAddMenu.confirmRouteParamPick(updateMarkerAddMenuAnnotation);
+            return;
+          }
+          if (raw.closest("[data-cr-route-param-cancel]")) {
+            visualAddMenu.cancelRouteParamPick();
+          }
+        }
+      }
       return;
     }
     const btn = raw.closest("button");
@@ -14189,6 +14960,14 @@ function aiditorConstructor(_props, refs) {
       recordingDraftUi,
       recordingDraftAttachmentChips,
       showRecordingDraftPopover,
+      showMarkerAddMenuPopover,
+      markerAddMenuPopoverLeftPct,
+      markerAddMenuPopoverTopPct,
+      markerAddMenuPickerAnnotationId,
+      markerAddMenuNavRows,
+      markerAddMenuSelectedCategory,
+      showMarkerAddMenuPickerLoading,
+      showMarkerAddMenuPickerCatalogEmpty,
       showVisualAnnotationsPanel,
       showVisualSubmitError,
       visualSubmitError,
@@ -14301,16 +15080,19 @@ function aiditorConstructor(_props, refs) {
       projectLocalPluginName: projectPlugins.addLocalPluginName,
       projectLocalPackageName: projectPlugins.addLocalPackageName,
       projectLocalPath: projectPlugins.addLocalPath,
-      showAddPagePluginsPanel: addPage.showAddPagePluginsPanel,
-      showAddPagePagePluginsZone: addPage.showAddPagePagePluginsZone,
-      addPagePluginPickerOptions: addPage.addPagePluginPickerOptions,
-      addPagePluginPickerValue: addPage.addPagePluginPickerValue,
-      showAddPageContractPicker: addPage.showAddPageContractPicker,
-      addPagePickerPluginLabel: addPage.addPagePickerPluginLabel,
-      addPageContractPickerRows: addPage.addPageContractPickerRows,
-      addPagePagePluginChips: addPage.addPagePagePluginChips,
-      showAddPageHasPagePluginChips: addPage.showAddPageHasPagePluginChips,
-      showAddPagePagePluginsEmptyHint: addPage.showAddPagePagePluginsEmptyHint,
+      showAddMenuPanel: addPage.showAddMenuPanel,
+      showAddMenuChips: addPage.showAddMenuChips,
+      addMenuChipRows: addPage.addMenuChipRows,
+      showAddMenuEmptyHint: addPage.showAddMenuEmptyHint,
+      showAddMenuPopover: addPage.showAddMenuPopover,
+      addMenuNavRows: addPage.addMenuNavRows,
+      addMenuSelectedCategory: addPage.addMenuSelectedCategory,
+      addMenuParamCollisionWarning: addPage.addMenuParamCollisionWarning,
+      addMenuRouteParamHint: addPage.addMenuRouteParamHint,
+      showAddMenuRouteParams: addPage.showAddMenuRouteParams,
+      addMenuRouteParamRows: addPage.addMenuRouteParamRows,
+      showAddMenuRouteParamConfirm: addPage.showAddMenuRouteParamConfirm,
+      addMenuPendingRouteParamTitle: addPage.addMenuPendingRouteParamTitle,
       showAddPageResultBanner,
       addPageResultBannerClass,
       addPageResultBannerMessage,
@@ -14330,7 +15112,15 @@ function aiditorConstructor(_props, refs) {
       showBriefFillThumbnails: addPage.showBriefFillThumbnails,
       addPageBriefFillThumbRows: addPage.addPageBriefFillThumbRows,
       showSuggestedRouteBanner: addPage.showSuggestedRouteBanner,
-      suggestedRouteLabel: addPage.suggestedRouteLabel
+      suggestedRouteLabel: addPage.suggestedRouteLabel,
+      crAddMenuParamCollisionWarning: visualAddMenu.paramCollisionWarning,
+      crAddMenuRouteParamHint: visualAddMenu.routeParamHint,
+      showCrAddMenuRouteParams: visualAddMenu.showRouteParams,
+      crAddMenuRouteParamRows: visualAddMenu.routeParamRows,
+      showCrRouteParamConfirm: visualAddMenu.showRouteParamConfirm,
+      crPendingRouteParamTitle: visualAddMenu.pendingRouteParamTitle,
+      showCrPlannedRoutePanel,
+      crPlannedRoute: visualAddMenu.plannedRoute
     })
   };
 }