@algolia/wizard 0.45.0-rc.141.320 → 0.46.0-rc.136.345

package/dist/main.js

@@ -239,6 +239,9 @@ function describeInputValue(value) {
 }
 var NOTICE_INTERVAL_MS = 2e3;
 var CLI_OUTPUT_LIMIT = 200;
+function commandApprovalKey(command, cwd) {
+  return `${cwd}\0${command}`;
+}
 var useWizard = create((set, get) => ({
   phase: "idle",
   homeScreen: "home",
@@ -352,10 +355,17 @@ var useWizard = create((set, get) => ({
   setTargetIndex: (index) => set({ targetIndex: index }),
   recordWrittenFile: (path) => set((s) => ({ writtenFiles: [...s.writtenFiles, path] })),
   clearWrittenFiles: () => set({ writtenFiles: [] }),
-  isCommandApproved: (command, cwd) => get().approvedCommands.has(`${cwd}\0${command}`),
+  isCommandApproved: (command, cwd) => get().approvedCommands.has(commandApprovalKey(command, cwd)),
   approveCommand: (command, cwd) => set((s) => ({
-    approvedCommands: new Set(s.approvedCommands).add(`${cwd}\0${command}`)
+    approvedCommands: new Set(s.approvedCommands).add(
+      commandApprovalKey(command, cwd)
+    )
   })),
+  revokeCommand: (command, cwd) => set((s) => {
+    const approvedCommands = new Set(s.approvedCommands);
+    approvedCommands.delete(commandApprovalKey(command, cwd));
+    return { approvedCommands };
+  }),
   logStart: (kind, name, input) => {
     const id = nanoid();
     set((s) => ({
@@ -731,9 +741,11 @@ function DecisionSelect({
 import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function CommandApproval({
   command,
+  messages,
   onDecide
 }) {
   return /* @__PURE__ */ jsxs5(Box6, { flexDirection: "column", gap: 1, children: [
+    messages?.map((message, index) => /* @__PURE__ */ jsx5(Text6, { color: COLORS.muted, children: message }, `msg-${index}`)),
     /* @__PURE__ */ jsx5(Text6, { color: COLORS.primary, bold: true, children: "Run this command?" }),
     /* @__PURE__ */ jsxs5(
       Box6,
@@ -1074,7 +1086,6 @@ function PromptInput() {
     return /* @__PURE__ */ jsx7(Box9, { flexGrow: 1, children: /* @__PURE__ */ jsx7(
       SelectPrompt,
       {
-        question: inputReq.prompt,
         messages: inputReq.messages,
         options: ["Continue"],
         onSelect: submitInput
@@ -1093,7 +1104,14 @@ function PromptInput() {
     );
   }
   if (inputReq.promptType === "commandApproval" && inputReq.command) {
-    return /* @__PURE__ */ jsx7(CommandApproval, { command: inputReq.command, onDecide: submitInput });
+    return /* @__PURE__ */ jsx7(
+      CommandApproval,
+      {
+        command: inputReq.command,
+        messages: inputReq.messages,
+        onDecide: submitInput
+      }
+    );
   }
   if (inputReq.promptType === "acceptReject") {
     const labels = inputReq.options?.length ? inputReq.options : ACCEPT_REJECT_OPTIONS;
@@ -2556,9 +2574,16 @@ function searchFilesTool(ctx) {
 }
 
 // src/lib/tools/runShell.ts
-import { tool as tool8, generateText, Output } from "ai";
+import { tool as tool9, generateText, Output } from "ai";
 import { createAnthropic } from "@ai-sdk/anthropic";
+import z16 from "zod";
+import { relative as relative5 } from "node:path";
+
+// src/lib/tools/reviewScript.ts
+import { tool as tool8 } from "ai";
 import z15 from "zod";
+import { createHash } from "node:crypto";
+import { readFile as readFile7, stat as stat2 } from "node:fs/promises";
 import { relative as relative4 } from "node:path";
 
 // src/lib/tools/utils/prompt.ts
@@ -2570,6 +2595,116 @@ function serializePrompt(work) {
   return result;
 }
 
+// src/lib/tools/reviewScript.ts
+var reviewedCommandApprovals = /* @__PURE__ */ new WeakMap();
+async function fileDigest(filePath) {
+  const content = await readFile7(filePath);
+  return createHash("sha256").update(content).digest("hex");
+}
+function grantReviewedCommandApproval(ctx, approval) {
+  reviewedCommandApprovals.set(ctx, approval);
+}
+function getReviewedCommandApproval(ctx, command, cwd) {
+  const approval = reviewedCommandApprovals.get(ctx);
+  if (approval?.command !== command || approval.cwd !== cwd) return void 0;
+  return approval;
+}
+function clearReviewedCommandApproval(ctx) {
+  reviewedCommandApprovals.delete(ctx);
+}
+function revokeCommandApprovals(ctx, command, cwd) {
+  clearReviewedCommandApproval(ctx);
+  useWizard.getState().revokeCommand(command, cwd);
+}
+async function reviewedCommandApprovalIsCurrent(approval) {
+  const currentDigest = await fileDigest(approval.filePath).catch(() => null);
+  return currentDigest === approval.digest;
+}
+function reviewScriptTool(ctx) {
+  return tool8({
+    description: "Call this as soon as the ingestion script is finished and before you run it. It summarizes the records that will be written, then asks the user to review the script and approve the exact command that will run it, so a matching runShell call needs no second approval.",
+    inputSchema: z15.object({
+      filePath: z15.string().describe(
+        "Path to the script to review, relative to the project root."
+      ),
+      command: z15.string().min(1).describe("The exact command that runShell will use to run the script."),
+      cwd: z15.string().describe(
+        "The exact working directory that runShell will use, relative to the current tool working directory."
+      ),
+      entityName: z15.string().trim().min(1).max(100).regex(/^[^\r\n]+$/).describe("The exact entity name selected by the user."),
+      usesGeneratedRecords: z15.boolean().describe(
+        "Whether the script reads generated sample records instead of the selected real data source."
+      )
+    }),
+    execute: async ({
+      filePath,
+      command,
+      cwd,
+      entityName,
+      usesGeneratedRecords
+    }) => {
+      logger.info(
+        { filePath, command, cwd, entityName, usesGeneratedRecords },
+        "called reviewScript tool"
+      );
+      const resolved2 = resolveInRoot(ctx, filePath);
+      if (resolved2.ok === false) return resolved2.error;
+      const resolvedCwd = resolveInRoot(ctx, cwd);
+      if (resolvedCwd.ok === false) return resolvedCwd.error;
+      const displayCwd = relative4(ctx.root, resolvedCwd.target) || ".";
+      const displayFilePath = relative4(ctx.root, resolved2.target);
+      const ingestionSummary = usesGeneratedRecords ? `This will push ${entityName} records from generated sample data to Algolia. You can replace the sample dataset with your real data source in ${displayFilePath}.` : `This will push ${entityName} records from your selected source to Algolia.`;
+      return serializePrompt(async () => {
+        revokeCommandApprovals(ctx, command, resolvedCwd.target);
+        const isFile = await stat2(resolved2.target).then(
+          (s) => s.isFile(),
+          () => false
+        );
+        if (!isFile) {
+          return `Refused: ${filePath} is not a file. Write the script first, then review the path you wrote.`;
+        }
+        const reviewedDigest = await fileDigest(resolved2.target).catch(
+          () => null
+        );
+        if (reviewedDigest === null) {
+          return `Refused: ${filePath} could not be read. Write the script first, then review it again.`;
+        }
+        const answer = await useWizard.getState().requestUserInput({
+          prompt: "Run this command?",
+          promptType: "commandApproval",
+          options: [],
+          messages: [
+            `We have created your ingestion script. Please review it at ${displayFilePath} before approving.`
+          ],
+          command: {
+            command,
+            cwd: displayCwd,
+            explanation: ingestionSummary
+          }
+        });
+        if (answer !== "approve") {
+          revokeCommandApprovals(ctx, command, resolvedCwd.target);
+          return "The user declined to run this ingestion script. Do not run it.";
+        }
+        const approvedDigest = await fileDigest(resolved2.target).catch(
+          () => null
+        );
+        if (approvedDigest !== reviewedDigest) {
+          return "The ingestion script changed while it was being reviewed. Call reviewScript again before running it.";
+        }
+        ctx.reviewed.push(resolved2.target);
+        grantReviewedCommandApproval(ctx, {
+          command,
+          cwd: resolvedCwd.target,
+          filePath: resolved2.target,
+          digest: reviewedDigest
+        });
+        return "The user reviewed the script and approved this exact command. Run it now with the same cwd.";
+      });
+    }
+  });
+}
+
 // src/lib/tools/utils/runShell.ts
 import { spawn as spawn2 } from "node:child_process";
 
@@ -2668,7 +2803,7 @@ function storeApproval(root) {
   return async (req) => {
     const store = useWizard.getState();
     if (store.isCommandApproved(req.command, req.cwd)) return "approve";
-    const rel = relative4(root, req.cwd);
+    const rel = relative5(root, req.cwd);
     const answer = await store.requestUserInput({
       prompt: "Run this command?",
       promptType: "commandApproval",
@@ -2821,9 +2956,9 @@ function fastPathSafety(command) {
   return void 0;
 }
 var CLASSIFIER_MODEL = "claude-haiku-4-5";
-var commandSafetySchema = z15.object({
-  safe: z15.boolean(),
-  reason: z15.string().describe("One short sentence explaining the verdict.")
+var commandSafetySchema = z16.object({
+  safe: z16.boolean(),
+  reason: z16.string().describe("One short sentence explaining the verdict.")
 });
 function defaultCreateModel() {
   const token = getAuthToken();
@@ -2883,12 +3018,15 @@ async function classifyCommandSafety(createModel, command, cwd, explanation, app
     return false;
   }
 }
-async function runAndRecord(ctx, command, cwd) {
-  useWizard.getState().pushNotice({ messages: [`Running: ${command}`] });
-  const env = await ctx.shell.env().catch((err) => {
+async function resolveShellEnv(ctx, command) {
+  return ctx.shell.env().catch((err) => {
     logger.warn({ err, command }, "runShell: could not resolve command env");
     return {};
   });
+}
+async function runAndRecord(ctx, command, cwd, resolvedEnv) {
+  useWizard.getState().pushNotice({ messages: [`Running: ${command}`] });
+  const env = resolvedEnv ?? await resolveShellEnv(ctx, command);
   const run2 = await (ctx.shell.run ?? runShell)(command, {
     cwd,
     env,
@@ -2919,6 +3057,16 @@ async function runAndRecord(ctx, command, cwd) {
     output: run2.output
   };
 }
+async function runReviewedCommand(ctx, command, cwd) {
+  const approval = getReviewedCommandApproval(ctx, command, cwd);
+  if (!approval) return void 0;
+  const env = await resolveShellEnv(ctx, command);
+  if (!await reviewedCommandApprovalIsCurrent(approval)) {
+    return `Refused: ${relative5(ctx.root, approval.filePath)} changed after review. Call reviewScript again before running it.`;
+  }
+  clearReviewedCommandApproval(ctx);
+  return runAndRecord(ctx, command, cwd, env);
+}
 async function approveAndRun(ctx, command, cwd, explanation) {
   const decision = await ctx.shell.approve({ command, cwd, explanation });
   if (decision === "reject") {
@@ -2929,16 +3077,16 @@ async function approveAndRun(ctx, command, cwd, explanation) {
   return runAndRecord(ctx, command, cwd);
 }
 function runShellTool(ctx, createModel = defaultCreateModel) {
-  return tool8({
+  return tool9({
     description: "Run a shell command in the project. Use this for anything the project needs done in its own ecosystem: installing dependencies, running a script you wrote, running the project's lint/typecheck/test commands. Do not use this to find or read files \u2014 use listFiles, searchFiles, and readFile instead of shell file-listing, reading, or search commands (ls/find/tree/cat/head/tail/grep/rg and similar). This tool refuses all of those outright: the dedicated tools enforce the project-root boundary and secret redaction that a raw shell read would bypass, and they won't count against this tool's command budget. The user approves any command that could change the project before it runs, so write a clear `explanation`. A command judged read-only (inspection, or running tests/typecheck/lint without an autofix flag, in any language) runs immediately without approval. If the user rejects a command, do not retry it \u2014 propose a different approach.",
-    inputSchema: z15.object({
-      command: z15.string().describe(
+    inputSchema: z16.object({
+      command: z16.string().describe(
         "The command to run, exactly as it would be typed in a shell. Pipes, && and redirects are allowed."
       ),
-      cwd: z15.string().optional().describe(
+      cwd: z16.string().optional().describe(
         "Directory to run in, relative to the project root. Defaults to the project root."
       ),
-      explanation: z15.string().describe(
+      explanation: z16.string().describe(
         "One short line telling the user what this command does and why, including any side effect (e.g. writes records to Algolia). This is what they approve against."
       )
     }),
@@ -2947,16 +3095,22 @@ function runShellTool(ctx, createModel = defaultCreateModel) {
         return `Refused: command limit (${ctx.limits.shell}) reached. Stop running commands and report what you have.`;
       }
       const resolved2 = resolveInRoot(ctx, cwd ?? ".");
-      if (!resolved2.ok) return resolved2.error;
+      if (resolved2.ok === false) return resolved2.error;
       if (isFileIOCommand(command)) {
         return "Refused: use listFiles or searchFiles to find files, and readFile to read one, instead of a shell file-listing, reading, or search command (ls/find/fd/tree/dir/locate/cat/head/tail/less/more/tac/nl/grep/egrep/fgrep/rg/ack/ag/xxd/hexdump/od/strings).";
       }
       logger.info({ command, cwd: resolved2.target }, "called runShell tool");
+      const reviewed = await serializePrompt(
+        () => runReviewedCommand(ctx, command, resolved2.target)
+      );
+      if (reviewed !== void 0) return reviewed;
       const fast = fastPathSafety(command);
       let isSafe = fast;
+      let usedStoredApproval = false;
       if (isSafe === void 0) {
         const store = useWizard.getState();
-        isSafe = store.isCommandApproved(command, resolved2.target);
+        usedStoredApproval = store.isCommandApproved(command, resolved2.target);
+        isSafe = usedStoredApproval;
         if (!isSafe) {
           isSafe = await classifyCommandSafety(
             createModel,
@@ -2967,54 +3121,18 @@ function runShellTool(ctx, createModel = defaultCreateModel) {
           );
         }
       }
-      if (isSafe) {
-        return serializePrompt(
-          () => runAndRecord(ctx, command, resolved2.target)
-        );
-      }
-      return serializePrompt(
-        () => approveAndRun(ctx, command, resolved2.target, explanation)
-      );
-    }
-  });
-}
-
-// src/lib/tools/reviewScript.ts
-import { tool as tool9 } from "ai";
-import z16 from "zod";
-import { stat as stat2 } from "node:fs/promises";
-import { relative as relative5 } from "node:path";
-function reviewScriptTool(ctx) {
-  return tool9({
-    description: "Call this as soon as the ingestion script is finished and before you run it, so the user can review it.It shows the file path and returns once they have confirmed reviewing it.",
-    inputSchema: z16.object({
-      filePath: z16.string().describe(
-        "Path to the script to review, relative to the project root."
-      )
-    }),
-    execute: async ({ filePath }) => {
-      logger.info({ filePath }, "called reviewScript tool");
-      const resolved2 = resolveInRoot(ctx, filePath);
-      if (resolved2.ok === false) return resolved2.error;
-      const isFile = await stat2(resolved2.target).then(
-        (s) => s.isFile(),
-        () => false
-      );
-      if (!isFile) {
-        return `Refused: ${filePath} is not a file. Write the script first, then review the path you wrote.`;
-      }
       return serializePrompt(async () => {
-        await useWizard.getState().requestUserInput({
-          prompt: "",
-          promptType: "enterToContinue",
-          options: [],
-          messages: [
-            `Please review ${relative5(ctx.root, resolved2.target)} before it runs:`,
-            resolved2.target
-          ]
-        });
-        ctx.reviewed.push(resolved2.target);
-        return "The user has reviewed the script. You may run it now.";
+        const lateReview = await runReviewedCommand(
+          ctx,
+          command,
+          resolved2.target
+        );
+        if (lateReview !== void 0) return lateReview;
+        const storedApprovalIsCurrent = !usedStoredApproval || useWizard.getState().isCommandApproved(command, resolved2.target);
+        if (isSafe && storedApprovalIsCurrent) {
+          return runAndRecord(ctx, command, resolved2.target);
+        }
+        return approveAndRun(ctx, command, resolved2.target, explanation);
       });
     }
   });
@@ -3368,22 +3486,59 @@ var detectLanguageSchema = z21.object({
     `The prefix a bundler/framework requires for an env var to reach client-side code (e.g. "NEXT_PUBLIC_", "VITE_", "NUXT_PUBLIC_"), uppercase with a trailing underscore when non-empty. Prefer the project's own existing convention over a framework default. Empty string when the project has no client-side env var exposure (e.g. a backend-only project).`
   )
 });
-var detectLanguage = () => runAgent({
-  instructions: [
-    "Analyze the codebase and determine the programming languages and frameworks used",
-    "If a superset language is found, exclude the subset language (e.g. TypeScript over JavaScript).",
-    "If a meta-framework is used, exclude the framework it builds on (e.g. Next.js over React, Rails over Rack).",
-    "Return the exact version",
-    "Exclude things like CSS frameworks, build tools, or testing frameworks",
-    `Determine publicEnvVarPrefix: check the project's own env var usage first (e.g. names already referenced in code, .env/.env.example); if none exists, fall back to the detected framework's known convention for exposing env vars to client-side code; use "" when the project has no such convention (e.g. a backend-only project).`,
-    "A brand-new project has no existing env var usage to find \u2014 one or two targeted checks (e.g. .env/.env.example, or a grep for the bundler's public-prefix convention) are enough to confirm that. Do not keep searching once those turn up nothing; fall back to the framework convention immediately.",
-    'Use as few tools as possible, but do not guess. If you cant find the answer, say "unknown"',
-    "When done, call reportStatus"
-  ],
-  tools: ["listFiles", "changeDirectory", "readFile", "searchFiles"],
-  outputSchema: detectLanguageSchema,
-  modelSize: "small"
-});
+var FRONTEND_FRAMEWORKS = /* @__PURE__ */ new Set([
+  "angular",
+  "astro",
+  "ember",
+  "javascript",
+  "next",
+  "nextjs",
+  "nuxt",
+  "preact",
+  "qwik",
+  "react",
+  "remix",
+  "solid",
+  "solidjs",
+  "svelte",
+  "sveltekit",
+  "vanilla",
+  "vanillajs",
+  "vue",
+  "vuejs"
+]);
+var normalizeFramework = (name) => name.toLowerCase().replace(/[^a-z0-9]/g, "");
+function prioritizeFrontendFrameworks(result) {
+  const frontend = result.frameworks.filter(
+    (framework) => FRONTEND_FRAMEWORKS.has(normalizeFramework(framework.name))
+  );
+  if (frontend.length === 0) return result;
+  const remaining = result.frameworks.filter(
+    (framework) => !FRONTEND_FRAMEWORKS.has(normalizeFramework(framework.name))
+  );
+  return { ...result, frameworks: [...frontend, ...remaining] };
+}
+var detectLanguage = async () => {
+  const result = await runAgent({
+    instructions: [
+      "Analyze the codebase and determine the programming languages and frameworks used",
+      "If a superset language is found, exclude the subset language (e.g. TypeScript over JavaScript).",
+      "For frameworks, inspect the code that implements the UI and prioritize the frontend framework used by the primary UI.",
+      "When a separate frontend framework exists, omit backend frameworks (e.g. report React, not Rails, when Rails serves a React UI). If no separate frontend framework exists, report the server framework that renders the UI.",
+      "If a frontend meta-framework is used, exclude the framework it builds on (e.g. Next.js over React).",
+      "Return the exact version",
+      "Exclude things like CSS frameworks, build tools, or testing frameworks",
+      `Determine publicEnvVarPrefix: check the project's own env var usage first (e.g. names already referenced in code, .env/.env.example); if none exists, fall back to the detected framework's known convention for exposing env vars to client-side code; use "" when the project has no such convention (e.g. a backend-only project).`,
+      "A brand-new project has no existing env var usage to find \u2014 one or two targeted checks (e.g. .env/.env.example, or a grep for the bundler's public-prefix convention) are enough to confirm that. Do not keep searching once those turn up nothing; fall back to the framework convention immediately.",
+      'Use as few tools as possible, but do not guess. If you cant find the answer, say "unknown"',
+      "When done, call reportStatus"
+    ],
+    tools: ["listFiles", "changeDirectory", "readFile", "searchFiles"],
+    outputSchema: detectLanguageSchema,
+    modelSize: "small"
+  });
+  return prioritizeFrontendFrameworks(result);
+};
 
 // src/actions/analyzeCodebase.ts
 import z22 from "zod";
@@ -3472,7 +3627,7 @@ async function runAnalysis(mode, extraInstructions = []) {
 // package.json
 var package_default = {
   name: "@algolia/wizard",
-  version: "0.45.0-rc.141.320",
+  version: "0.46.0-rc.136.345",
   description: "Magically implement Algolia functionality in your codebase",
   type: "module",
   engines: {
@@ -3661,7 +3816,7 @@ function confirmed(name, version) {
   return { frameworks };
 }
 async function askOtherFramework(ctx) {
-  let prompt = "enter your framework";
+  let prompt = "enter the framework used for your frontend";
   for (; ; ) {
     const answer = await ctx.requestUserInput({
       prompt,
@@ -3673,7 +3828,7 @@ async function askOtherFramework(ctx) {
     }
     const name = parseEntries(answer)[0]?.name;
     if (name) return name;
-    prompt = "please enter a framework name:";
+    prompt = "please enter the framework used for your frontend:";
   }
 }
 async function confirmFramework(ctx) {
@@ -3688,9 +3843,12 @@ async function confirmFramework(ctx) {
   const primary = detectedFrameworks[0];
   if (primary) {
     const accepted = await ctx.requestUserInput({
-      prompt: `Use ${primary.name}?`,
+      prompt: `Use ${primary.name} for your frontend?`,
       promptType: "acceptReject",
-      options: [`Confirm ${primary.name}`, "Use a different framework"],
+      options: [
+        `Confirm ${primary.name}`,
+        "Use a different framework for your frontend"
+      ],
       secondary: [{ kind: "badge", value: "[DETECTED]" }, void 0]
     });
     if (accepted === true) return confirmed(primary.name, primary.version);
@@ -3703,7 +3861,7 @@ async function confirmFramework(ctx) {
     0
   );
   const selection = await ctx.requestUserInput({
-    prompt: "select a framework",
+    prompt: "select a framework for your frontend",
     promptType: "multipleChoice",
     options,
     secondary,
@@ -4172,8 +4330,8 @@ function ingestionInstructions(input) {
       ...algoliaClientDoc(input),
       "Install the Algolia client with the project's own package manager via runShell, declaring it in whatever manifest the project uses (e.g. package.json, requirements.txt, Gemfile, go.mod, composer.json) so the dependency is not just installed ad hoc.",
       `If the script loads its env vars from a file (e.g. via dotenv or an equivalent for its language) rather than the process environment directly, decide that up front and call writeCredentials on that file before you finish the script \u2014 do not wait to discover the need for it by having a writeFile call refused.`,
-      "When the script is finished, call reviewScript with its path and wait: running it writes records to a live index, so the developer reads it first. Do not run it before that call returns.",
-      'Then run the script yourself via runShell, and report the command you ran as "ingestCommand" so the developer can re-run it. Its explanation must say that running it writes records to Algolia.',
+      `When the script is finished, decide the exact command and cwd you will use to run it, then call reviewScript with that filePath, command, cwd, the exact selected entityName, and usesGeneratedRecords set to ${input.ingestionSource === "generated"}. Wait for the developer to review it because running it writes records to a live index. Do not run it before that call returns.`,
+      'Then, without changing directories, run the script yourself via runShell using the exact same command and cwd. Report the command you ran as "ingestCommand" so the developer can re-run it. Its explanation must say that running it writes records to Algolia.',
       "The summary should be extremely concise.",
       ...sourceSpecificInstructions(input)
     ] : []
@@ -4184,7 +4342,6 @@ function searchInstructions(input) {
   return [
     "Implement an in-app Algolia search experience.",
     `Build the search UI for ${input.searchUiTarget}.`,
-    "Search UI only \u2014 the index is already populated. Do not create or modify ingestion scripts, rake/manage/CLI tasks, migrations, seeders, or other data-loading code, even if the data looks incomplete.",
     ...doc ? [
       "Follow the Algolia SDK reference below for client setup, search UI wiring, and Insights instrumentation \u2014 Insights is required, not optional; prefer the reference over prior knowledge:",
       doc
@@ -4192,15 +4349,9 @@ function searchInstructions(input) {
       "No bundled Algolia SDK reference exists for this stack, so rely on the project's own conventions and Algolia's official client for its language. Do not invent APIs \u2014 keep to the documented search endpoint and its parameters."
     ],
     `Create the search experience as its own component in a new file, following the project's existing component conventions (location, naming, styling approach). Do not write it inline into an existing file.`,
-    `Import and render that new component from ${input.searchLocation ? `"${input.searchLocation}"` : "the best shared, always-rendered layout location (e.g. a header/nav component)"} so it is reachable across the app \u2014 at least a working search input and results panel against the target index.`,
+    `Import and render that new component from ${input.searchLocation ? `"${input.searchLocation}"` : "the best shared, always-rendered layout location (e.g. a header/nav component)"} so it is reachable across the app \u2014 at least a working search input and results list against the target index.`,
     "If a search box already exists, replace its usage with an import and render of your new component; remove the old implementation.",
     "When rendering results with an existing shared component (e.g. a card), import and reuse that component rather than inlining its markup \u2014 inlining silently drops the styles and behavior its own file provides.",
-    "Results go in a dropdown panel, not a permanently visible list. If the SDK reference above documents an Autocomplete widget for this stack, it already owns panel open/close, Escape, blur, outside click, arrow-key navigation, combobox ARIA, and Insights events \u2014 use it as-is and add no open/close logic, query gating, or ARIA roles of your own, even if it opens on focus before anything is typed. Build it by hand only where the reference has no such widget or calls it headless: then open the panel only while the input is focused with a non-empty query, close it on Escape, blur, and outside click, and move an active-result highlight with Up/Down, Enter to select.",
-    "Let the widget own selection: where hits have a detail page, pass its per-index URL option (getURL or the flavor's equivalent) so it navigates on click and on Enter with a result highlighted, and keep your item template or component to content only \u2014 no anchor, no href, no click handler of your own, no stopPropagation. The widget's result element sends the Insights click event, closes the panel, and clears the active option; your own link swallows all three while still navigating, so it looks correct and silently loses click analytics.",
-    "Render the zero-results state through the widget's own no-results template or component, so a query matching nothing shows a message rather than an empty panel.",
-    "Meet WCAG AA contrast (4.5:1 body text, 3:1 large text/icons) between the panel's text and its own background, and give the input and the active result a focus indicator visible against whatever sits behind it. Style the panel through the widget's class and CSS-variable overrides (or, when hand-built, the app's existing theme tokens) \u2014 never assume a light surface or reuse the surrounding page's colors unchanged inside the panel.",
-    "Vendor theme CSS, and any CSS you write against vendor class names, must be global: import the theme from the component's own script module or the app's global stylesheet, and put overrides in a global block (Astro <style is:global>, an unscoped Vue block, a plain global CSS file). Never a framework-scoped style block or a CSS Module \u2014 scoping rewrites the vendor selectors and the widget's runtime DOM carries no scope attribute, so not one rule matches: styling silently does nothing and the build still passes.",
-    "The panel takes its width from the input by default, so a small input makes it unreadably narrow: give it a min-width of 320px independent of the input, anchored to the input edge it opens from so widening does not push it off-screen.",
     `Define ${SEARCH_CONFIG_APP_ID}, ${SEARCH_CONFIG_SEARCH_KEY}, and ${SEARCH_CONFIG_INDEX_NAME} as exported constants in a module that fits this project's existing conventions for shared client-side config \u2014 reuse an existing one if it already holds config like this, or add a small new one otherwise. These are PUBLIC values, safe to commit and expose client-side: never read them from an environment variable or a .env* file, and never hardcode them anywhere except in that one module (import them wherever the search client needs them).`,
     `Set ${SEARCH_CONFIG_APP_ID} to "${input.appId}" and ${SEARCH_CONFIG_INDEX_NAME} to "${input.targetIndex}".`,
     input.searchKey ? `Set ${SEARCH_CONFIG_SEARCH_KEY} to "${input.searchKey}".` : `A real search-only key could not be provisioned${input.searchKeyError ? ` (${input.searchKeyError})` : ""} \u2014 set ${SEARCH_CONFIG_SEARCH_KEY} to the placeholder "${SEARCH_KEY_PLACEHOLDER}" and add a prominent TODO for the developer to fill in a real one.`,
@@ -4552,19 +4703,33 @@ ${detail}` : ""}`
         product_area: "AI Wizard"
       });
     }
-    const commandMessages = ingestCommand ? [`Ingestion command: ${ingestCommand}`] : [];
-    await ctx.requestUserInput({
-      prompt: "",
-      promptType: "enterToContinue",
-      options: [],
-      // One message per line: Notices.tsx counts a message as one wrapped
-      // line, so an embedded newline overflows the panel's height accounting.
-      messages: [
-        ingestOutcomeMessage,
-        ...ingestFailureDetail?.split("\n").filter((l) => l.trim()) ?? [],
-        ...commandMessages
-      ]
-    });
+    if (ingestScriptRan) {
+      await ctx.requestUserInput({
+        prompt: "Continue",
+        promptType: "notice",
+        options: [],
+        messages: [
+          ingestOutcomeMessage,
+          "View your ingested records in the Algolia dashboard:",
+          "https://dashboard.algolia.com/explorer/browse",
+          "When you're ready to continue, we'll move on to search implementation."
+        ]
+      });
+    } else {
+      const commandMessages = ingestCommand ? [`Ingestion command: ${ingestCommand}`] : [];
+      await ctx.requestUserInput({
+        prompt: "",
+        promptType: "enterToContinue",
+        options: [],
+        // One message per line: Notices.tsx counts a message as one wrapped
+        // line, so an embedded newline overflows the panel's height accounting.
+        messages: [
+          ingestOutcomeMessage,
+          ...ingestFailureDetail?.split("\n").filter((l) => l.trim()) ?? [],
+          ...commandMessages
+        ]
+      });
+    }
   }
   let searchConfigFile;
   if (useCases.includes("search")) {
@@ -5756,7 +5921,7 @@ function App() {
 }
 
 // src/lib/envAppId.ts
-import { readFile as readFile7 } from "node:fs/promises";
+import { readFile as readFile8 } from "node:fs/promises";
 import { join as join12 } from "node:path";
 var ENV_FILES = [".env", ".env.local"];
 var APP_ID_LINE = /^[ \t]*(?:export[ \t]+)?([A-Z0-9_]*ALGOLIA_APP(?:LICATION)?_ID)[ \t]*=[ \t]*(.*)$/gm;
@@ -5764,7 +5929,7 @@ async function findEnvApplicationId(root = process.cwd()) {
   for (const file of ENV_FILES) {
     let content;
     try {
-      content = await readFile7(join12(root, file), "utf8");
+      content = await readFile8(join12(root, file), "utf8");
     } catch (err) {
       if (err.code !== "ENOENT") {
         logger.warn(

package/docs/algolia-sdk/README.md

@@ -20,20 +20,14 @@ Always install the **latest stable** within the major (use a caret range like `^
 
 - Use a **search-only API key** in any browser/client code. It is safe to expose.
   NEVER ship an admin or any write-capable key to the client.
-- Import the Application ID and search-only key from the project's shared client-side
-  config module as plain exported constants. They are public, safe to commit — never read
-  them from an env var or `.env*` file, and never hardcode them elsewhere.
+- Read the Application ID and search-only key from **public env vars**, never hardcode
+  them inline.
 - Instantiate the search client **once, outside your components**, and pass a stable
   reference. Do not inline `algoliasearch(...)` as a prop value — it breaks the
   client cache and causes re-renders.
 - For InstantSearch, import the client from `algoliasearch/lite` (smaller bundle and
   correct types — see `instantsearch-setup.md`).
 - Always enable **Insights** on the InstantSearch root with `insights: true`. Without it there are no click/conversion events, so many Algolia features will not work as expected.
-- Vendor CSS must be **global**: import an InstantSearch theme from a JS/TS module or the
-  app's global stylesheet and keep `.ais-*` overrides in a global block. In a scoped style
-  block (Astro `<style>`, Vue `<style scoped>`, Svelte `<style>`) or a CSS Module, scoping
-  rewrites the selectors, the widget's runtime DOM carries no scope attribute, and the
-  styling silently does nothing while the build passes.
 
 ## Files
 

package/docs/algolia-sdk/instantsearch-setup-js.md

@@ -20,18 +20,10 @@ const searchClient = algoliasearch(ALGOLIA_APP_ID, ALGOLIA_SEARCH_API_KEY)
 
 ## Vanilla (`instantsearch.js` v4)
 
-Use the `autocomplete` widget for the results panel. It owns focus, blur, outside-click
-dismissal, Up/Down navigation with wrap-around, Enter/Escape/Tab, and the combobox ARIA
-(`combobox`, `aria-expanded`, `aria-activedescendant`) — add no open/close logic or ARIA
-roles of your own.
-
-Needs `instantsearch.js` **4.110.0+**. If an older 4.x is pinned, upgrade within `^4`
-rather than switching widgets.
-
 ```js
 import { liteClient as algoliasearch } from 'algoliasearch/lite'
 import instantsearch from 'instantsearch.js'
-import { autocomplete } from 'instantsearch.js/es/widgets'
+import { searchBox, hits } from 'instantsearch.js/es/widgets'
 import {
   ALGOLIA_APP_ID,
   ALGOLIA_SEARCH_API_KEY,
@@ -47,140 +39,24 @@ const search = instantsearch({
 })
 
 search.addWidgets([
-  autocomplete({
-    container: '#autocomplete',
-    placeholder: 'Search...',
-    indices: [
-      {
-        indexName: ALGOLIA_INDEX_NAME,
-        getURL: (item) => `/products/${item.handle}`,
-        templates: {
-          item({ item, onSelect }, { html, components }) {
-            return html`<div onClick=${onSelect}>
-              ${components.Highlight({ hit: item, attribute: 'name' })}
-            </div>`
-          },
-          noResults(_, { html }) {
-            return html`<span>No results</span>`
-          },
-        },
-      },
-    ],
-  }),
+  searchBox({ container: '#searchbox' }),
+  hits({ container: '#hits' }),
 ])
 
 search.start()
 ```
 
-### Navigation is `getURL`'s job, not the template's
-
-- `indices[].getURL` — `(item) => string`, a route that already exists; don't invent one.
-  It navigates on click **and** on Enter over a highlighted item, and records the click
-  event. Without it, Enter on a highlight does nothing.
-- The `item` template renders content only: **no `<a>`, no `href`, no click handler of
-  your own, never `stopPropagation`.** The widget's `<li>` owns the click — it sends the
-  Insights `click`, closes the panel, clears the active option. An anchor wrapper swallows
-  all three while still navigating: looks correct, click analytics never fire, panel stays
-  open behind the new page.
-- `templates.noResults` on every index, or a query matching nothing renders an empty box.
-- `getSearchPageURL` sends Enter with nothing highlighted to a full results page; pass it
-  only if the app has one. `.getQuery` is optional. Leave `showQuerySuggestions`,
-  `showPromptSuggestions`, `showRecent`, and `aiMode` unset — each needs an index or
-  feature (query suggestions, recent-search storage, AI chat) this project lacks.
-- TypeScript: type records through the generic, not casts inside templates —
-  `type ProductHit = Hit<{ title: string; handle: string }>` (`Hit` from
-  `instantsearch.js`), then `autocomplete<ProductHit>({ ... })` types `item`, `getURL`,
-  and the templates.
-
-### Styling the panel
-
-The widget ships no CSS. Install `instantsearch.css` and import a theme once, from the
-component's own JS/TS module or the app's global stylesheet:
-
-```js
-import 'instantsearch.css/themes/satellite.css'
-```
-
-The theme and your `.ais-*` overrides must be **global**: never a CSS `@import` inside a
-framework-scoped style block (Astro `<style>`, Vue `<style scoped>`, Svelte `<style>`) or
-a CSS Module. Scoping rewrites every selector
-(`.ais-AutocompleteInput[data-astro-cid-abc123]`) and the widget builds its DOM at runtime
-with no scope attribute, so not one rule matches — unstyled UI, no error, build passes.
-Use `<style is:global>` (Astro), an unscoped block or `:deep()` (Vue), or plain global CSS.
-
-The theme ships a dark palette behind `:root[data-theme=dark], .dark`: in a dark app set
-`data-theme="dark"` on `<html>` or render under a `.dark` ancestor, then adjust — don't
-redefine the light palette by hand.
-
-Palette lives in `--ais-*` custom properties on `:root` as **RGB triplets consumed through
-`rgba()`**, not CSS colors — override with triplets or every widget color breaks:
-
-```css
-:root {
-  --ais-background-color-rgb: 24, 24, 27; /* not #18181b */
-  --ais-text-color-rgb: 244, 244, 245;
-  --ais-primary-color-rgb: 129, 140, 248;
-}
-```
-
-Everything else is plain CSS against the widget's classes, or `cssClasses` /
-`indices[].cssClasses` to add your own names to the same elements. Who owns what:
-
-- `.ais-Autocomplete` — root. Its **container** sets the widget's width; don't size the
-  widget from the input.
-- `.ais-AutocompleteForm` — visible frame: background, border, radius, focus ring
-  (`:focus-within`). The input's pill goes here.
-- `.ais-AutocompleteInput` — text only; theme sets `border: 0`, `background: none`,
-  `width: 100%`. A border or width here leaves the form's frame drawn around it and
-  changes no widths.
-- `.ais-AutocompletePanel` (+ `--open`), `.ais-AutocompletePanelLayout` — dropdown surface
-  and its scroll container.
-- `.ais-AutocompleteIndex`, `-IndexHeader`, `-IndexList`, `-IndexItem`, `-IndexNoResults`
-  — one index's results; the active item carries `aria-selected="true"`.
-- `.ais-AutocompleteItemWrapper`, `-ItemContent`, `-ItemIcon` — inside one result.
-- `.ais-AutocompleteSubmitButton`, `-ClearButton`, `-LoadingIndicator`, `-Label` — form
-  controls.
-- `.ais-AutocompleteDetached*` — detached mode (below).
-
-Style nothing outside that list: `.ais-SearchBox-*` belongs to `searchBox` and does
-nothing here. Verify names against the installed version:
-`grep -o 'ais-Autocomplete[A-Za-z-]*' node_modules/instantsearch.css/themes/satellite.css | sort -u`.
-
-The theme's panel is `position: absolute; width: 100%`, so it inherits the input
-container's width — a small input yields an unreadably narrow panel. Give it a min-width
-and anchor it to the edge it opens from, or it grows off-screen:
-
-```css
-.ais-AutocompletePanel {
-  min-width: 320px;
-  left: 0; /* right: 0; left: auto for an input aligned to the right */
-}
-```
-
-Below `(max-width: 680px)` the widget goes detached (fullscreen): the inline form becomes
-a `.ais-AutocompleteDetachedSearchButton`, form and results move into an overlay
-(`.ais-AutocompleteDetachedOverlay`, `.ais-AutocompleteDetachedContainer`,
-`.ais-AutocompleteDetachedFormContainer`). So panel-width rules apply only above that
-breakpoint, and styling the inline form leaves the mobile trigger button on the theme's
-look unless you style it too. Change it with `detachedMediaQuery` or
-`--ais-autocomplete-detached-media-query`; pass `''` to disable detached mode entirely.
-
 ## Insights (click analytics) — always enable it
 
 The `insights` option turns on the Insights middleware (`instantsearch.js` v4.55+),
 which adds `clickAnalytics: true` to every query and keeps the `userToken` in sync
 between search and event calls. Never set `clickAnalytics` or `userToken` on the `configure` widget by hand.
 
-Use `insights: true` and nothing else. The middleware loads `search-insights` from the
-jsDelivr CDN itself; do not install the package, pass `insightsClient`, or declare
-`window.aa`.
+Use `insights: true`. The middleware loads `search-insights` from the jsDelivr CDN
+itself; do not install the package or pass `insightsClient`.
 
-Everything below is a **conditional fallback** — apply one only where its condition
-actually holds here (a CSP you can point at, a user id the app already has). Otherwise
-`insights: true` is the whole implementation.
-
-Only if the project has a Content-Security-Policy blocking jsDelivr (the CDN script then
-cannot load): install `search-insights` from npm and pass its default export as
+If a Content-Security-Policy blocks jsDelivr, the CDN script cannot load. In that
+case, install `search-insights` from npm and pass its default export as
 `insightsClient` in the `insights` option:
 
 ```js
@@ -214,16 +90,27 @@ insights: {
 
 ### Click and conversion events
 
-With `insights: true`, `autocomplete` sends `view` (on render) and `click` (from the
-result element's own handler) itself. Its item template gets `{ item, onSelect }` and
-**no `sendEvent`** — nothing to wire. Call `onSelect` for the widget's selection behavior
-(close the panel, record a recent search); the click event fires either way.
+The `hits` and `infiniteHits` widgets send `view` and `click` events on their own. A
+custom `item` template whose click target is your own element gets `sendEvent` as the
+second argument:
 
-`hits` and `infiniteHits` behave the same; only a custom `item` template whose click
-target is your own element needs wiring — it gets `sendEvent` as the second argument.
+```js
+hits({
+  container: '#hits',
+  templates: {
+    item(hit, { html, sendEvent }) {
+      return html`<a
+        href="${hit.url}"
+        onClick="${() => sendEvent('click', hit, 'Hit Clicked')}"
+        >${hit.name}</a
+      >`
+    },
+  },
+})
+```
 
-Conversions are business actions (add to cart, signup, booking) away from the results
-panel: wire them at the real action, in a component with its own `sendEvent`:
+Conversions are business actions (add to cart, signup, booking), so wire them at the
+real action, not at render:
 
 ```js
 sendEvent('conversion', hit, 'Product Added To Cart', {

package/docs/algolia-sdk/instantsearch-setup-react.md

@@ -20,17 +20,9 @@ const searchClient = algoliasearch(ALGOLIA_APP_ID, ALGOLIA_SEARCH_API_KEY)
 
 ## React (`react-instantsearch` v7)
 
-Use the `Autocomplete` widget for the results panel. It owns focus, blur, outside-click
-dismissal, Up/Down navigation with wrap-around, Enter/Escape/Tab, and the combobox ARIA
-(`combobox` on the input, `aria-expanded`, `aria-activedescendant`) — add no open/close
-logic or ARIA roles of your own.
-
-Needs `react-instantsearch` **7.18.0+**. If an older 7.x is pinned, upgrade within `^7`
-rather than switching widgets.
-
 ```tsx
 import { liteClient as algoliasearch } from 'algoliasearch/lite'
-import { InstantSearch, Autocomplete } from 'react-instantsearch'
+import { InstantSearch, SearchBox, Hits } from 'react-instantsearch'
 import {
   ALGOLIA_APP_ID,
   ALGOLIA_SEARCH_API_KEY,
@@ -46,117 +38,13 @@ export function Search() {
       indexName={ALGOLIA_INDEX_NAME}
       insights={true}
     >
-      <Autocomplete
-        placeholder="Search..."
-        indices={[
-          {
-            indexName: ALGOLIA_INDEX_NAME,
-            getURL: (item) => `/products/${item.handle}`,
-            itemComponent: ({ item, onSelect }) => (
-              <div onClick={onSelect}>{item.name}</div>
-            ),
-            noResultsComponent: () => <span>No results</span>,
-          },
-        ]}
-      />
+      <SearchBox />
+      <Hits />
     </InstantSearch>
   )
 }
 ```
 
-### Navigation is `getURL`'s job, not the item component's
-
-- `indices[].getURL` — `(item) => string`, a route that already exists; don't invent one.
-  It navigates on click **and** on Enter over a highlighted item, and records the click
-  event. Without it, Enter on a highlight does nothing.
-- `itemComponent` renders content only: **no `<a>`, no `href`, no `onClick` beyond the
-  `onSelect` it is handed, never `stopPropagation`.** The widget's `<li>` owns the click —
-  it sends the Insights `click`, closes the panel, clears the active option. Wrapping the
-  item in a link or a router `<Link>` swallows all three while still navigating: looks
-  correct, click analytics never fire, panel stays open behind the new page.
-- `noResultsComponent` on every index, or a query matching nothing renders an empty box.
-- `getSearchPageURL` sends Enter with nothing highlighted to a full results page; pass it
-  only if the app has one. `.getQuery` is optional. Leave `showQuerySuggestions`,
-  `showPromptSuggestions`, `showRecent`, and `aiMode` unset — each needs an index or
-  feature (query suggestions, recent-search storage, AI chat) this project lacks.
-- TypeScript: type records through the generic, not casts inside `itemComponent` —
-  `type ProductHit = Hit<{ title: string; handle: string }>` (`Hit` from
-  `instantsearch.js`), then `<Autocomplete<ProductHit> ... />` types `item`, `getURL`, and
-  `itemComponent`.
-
-### Styling the panel
-
-The widget ships no CSS. Install `instantsearch.css` and import a theme once, from the
-component module or the app's global stylesheet:
-
-```tsx
-import 'instantsearch.css/themes/satellite.css'
-```
-
-The theme and your `.ais-*` overrides must be **global**: never route either through a CSS
-Module, a scoped style block (Astro `<style>`, Vue `<style scoped>`, Svelte `<style>`), or
-any styled-components-style wrapper that rewrites selectors. Scoping renames every
-selector and the widget builds its DOM at runtime, so nothing matches — unstyled UI, no
-error, build passes. Keep them in a global stylesheet, or add your own class names via
-`classNames` and style those.
-
-The theme ships a dark palette behind `:root[data-theme=dark], .dark`: in a dark app set
-`data-theme="dark"` on `<html>` or render under a `.dark` ancestor, then adjust — don't
-redefine the light palette by hand.
-
-Palette lives in `--ais-*` custom properties on `:root` as **RGB triplets consumed through
-`rgba()`**, not CSS colors — override with triplets or every widget color breaks:
-
-```css
-:root {
-  --ais-background-color-rgb: 24, 24, 27; /* not #18181b */
-  --ais-text-color-rgb: 244, 244, 245;
-  --ais-primary-color-rgb: 129, 140, 248;
-}
-```
-
-Everything else is plain CSS against the widget's classes, or the `classNames` /
-`indices[].classNames` props to add your own names to the same elements. Who owns what:
-
-- `.ais-Autocomplete` — root. Its **container** sets the widget's width; don't size the
-  widget from the input.
-- `.ais-AutocompleteForm` — visible frame: background, border, radius, focus ring
-  (`:focus-within`). The input's pill goes here.
-- `.ais-AutocompleteInput` — text only; theme sets `border: 0`, `background: none`,
-  `width: 100%`. A border or width here leaves the form's frame drawn around it and
-  changes no widths.
-- `.ais-AutocompletePanel` (+ `--open`), `.ais-AutocompletePanelLayout` — dropdown surface
-  and its scroll container.
-- `.ais-AutocompleteIndex`, `-IndexHeader`, `-IndexList`, `-IndexItem`, `-IndexNoResults`
-  — one index's results; the active item carries `aria-selected="true"`.
-- `.ais-AutocompleteItemWrapper`, `-ItemContent`, `-ItemIcon` — inside one result.
-- `.ais-AutocompleteSubmitButton`, `-ClearButton`, `-LoadingIndicator`, `-Label` — form
-  controls.
-- `.ais-AutocompleteDetached*` — detached mode (below).
-
-Style nothing outside that list: `.ais-SearchBox-*` belongs to `SearchBox` and does
-nothing here. Verify names against the installed version:
-`grep -o 'ais-Autocomplete[A-Za-z-]*' node_modules/instantsearch.css/themes/satellite.css | sort -u`.
-
-The theme's panel is `position: absolute; width: 100%`, so it inherits the input
-container's width — a small input yields an unreadably narrow panel. Give it a min-width
-and anchor it to the edge it opens from, or it grows off-screen:
-
-```css
-.ais-AutocompletePanel {
-  min-width: 320px;
-  left: 0; /* right: 0; left: auto for an input aligned to the right */
-}
-```
-
-Below `(max-width: 680px)` the widget goes detached (fullscreen): the inline form becomes
-a `.ais-AutocompleteDetachedSearchButton`, form and results move into an overlay
-(`.ais-AutocompleteDetachedOverlay`, `.ais-AutocompleteDetachedContainer`,
-`.ais-AutocompleteDetachedFormContainer`). So panel-width rules apply only above that
-breakpoint, and styling the inline form leaves the mobile trigger button on the theme's
-look unless you style it too. Change it with `detachedMediaQuery` or
-`--ais-autocomplete-detached-media-query`; pass `''` to disable detached mode entirely.
-
 Do not inline `searchClient={algoliasearch(...)}` — keep the stable reference above.
 
 ## Insights (click analytics) — always enable it
@@ -165,28 +53,17 @@ The `insights` prop turns on the Insights middleware, which adds
 `clickAnalytics: true` to every query and keeps the `userToken` in sync between search
 and event calls. Never set `clickAnalytics` or `userToken` on `<Configure>` by hand.
 
-Use `insights={true}` and nothing else. The middleware loads `search-insights` from the
-jsDelivr CDN itself; do not install the package, pass `insightsClient`, or declare
-`window.aa`.
+Use `insights={true}`. The middleware loads `search-insights` from the jsDelivr CDN
+itself; do not install the package or pass `insightsClient`.
 
-Everything below is a **conditional fallback** — apply one only where its condition
-actually holds here (a CSP you can point at, a user id the app already has). Otherwise
-`insights={true}` is the whole implementation.
-
-Only if the project has a Content-Security-Policy blocking jsDelivr (the CDN script then
-cannot load): install `search-insights` from npm and pass its default export as
+If a Content-Security-Policy blocks jsDelivr, the CDN script cannot load. In that
+case, install `search-insights` from npm and pass its default export as
 `insightsClient`:
 
 ```tsx
 import aa from 'search-insights'
 
-export function Search() {
-  return (
-    <InstantSearch insights={{ insightsClient: aa }}>
-      {/* widgets */}
-    </InstantSearch>
-  )
-}
+<InstantSearch insights={{ insightsClient: aa }} />
 ```
 
 The middleware calls `aa('init', ...)` itself with the app ID and search key, so no
@@ -206,13 +83,8 @@ policy allows it:
 
 ### Click and conversion events
 
-With `insights={true}`, `<Autocomplete>` sends `view` (on render) and `click` (from the
-result element's own handler) itself. Its `itemComponent` receives
-`{ item, onSelect, onApply }` and **no `sendEvent`** — nothing to wire. Call `onSelect`
-for the widget's selection behavior (close the panel, record a recent search); the click
-event fires either way.
-
-`<Hits>` and `<InfiniteHits>` behave the same way. Two cases there need explicit wiring:
+`<Hits>` and `<InfiniteHits>` send `view` and `click` events on their own. Two cases
+need explicit wiring:
 
 - A custom `hitComponent` whose click target is your own element — it receives a
   `sendEvent` prop.

package/docs/algolia-sdk/instantsearch-setup-vue.md

@@ -20,68 +20,19 @@ const searchClient = algoliasearch(ALGOLIA_APP_ID, ALGOLIA_SEARCH_API_KEY)
 
 ## Vue (`vue-instantsearch` v4)
 
-Use `ais-autocomplete` for the query and results state. It is **headless**: its default
-slot provides only `currentRefinement`, `indices`, and `refine` — it renders nothing and
-handles no focus, blur, keyboard, or ARIA. Build all of it yourself: panel closed until
-the input is focused and has a query; close on Escape, blur, or outside click; active-option
-highlight on Up/Down with Enter to select; combobox ARIA on the input; click events via
-each index's `sendEvent`.
-
 ```vue
 <template>
-  <div ref="containerRef" class="search" @focusout="onFocusOut">
-    <ais-instant-search
-      :search-client="searchClient"
-      :index-name="ALGOLIA_INDEX_NAME"
-      :insights="true"
-    >
-      <ais-autocomplete>
-        <template v-slot="{ currentRefinement, indices, refine }">
-          <input
-            type="search"
-            role="combobox"
-            aria-autocomplete="list"
-            aria-controls="search-panel"
-            :aria-expanded="isOpen(currentRefinement)"
-            :aria-activedescendant="
-              active >= 0 ? `search-option-${active}` : undefined
-            "
-            :value="currentRefinement"
-            @focus="open = true"
-            @input="onInput(refine, $event)"
-            @keydown.down.prevent="move(1, indices)"
-            @keydown.up.prevent="move(-1, indices)"
-            @keydown.enter.prevent="select(indices, active)"
-            @keydown.esc="close"
-          />
-          <ul
-            v-show="isOpen(currentRefinement)"
-            id="search-panel"
-            class="search-panel"
-            role="listbox"
-            aria-label="Search results"
-          >
-            <li
-              v-for="(hit, i) in indices[0]?.hits ?? []"
-              :id="`search-option-${i}`"
-              :key="hit.objectID"
-              role="option"
-              :aria-selected="i === active"
-              :class="{ 'is-active': i === active }"
-              @mousedown.prevent="select(indices, i)"
-              @mousemove="active = i"
-            >
-              <ais-highlight attribute="name" :hit="hit" />
-            </li>
-          </ul>
-        </template>
-      </ais-autocomplete>
-    </ais-instant-search>
-  </div>
+  <ais-instant-search
+    :search-client="searchClient"
+    :index-name="ALGOLIA_INDEX_NAME"
+    :insights="true"
+  >
+    <ais-search-box />
+    <ais-hits />
+  </ais-instant-search>
 </template>
 
 <script setup>
-import { ref } from 'vue'
 import { liteClient as algoliasearch } from 'algoliasearch/lite'
 import {
   ALGOLIA_APP_ID,
@@ -90,71 +41,9 @@ import {
 } from '<the project's shared config module>'
 
 const searchClient = algoliasearch(ALGOLIA_APP_ID, ALGOLIA_SEARCH_API_KEY)
-const open = ref(false)
-const active = ref(-1)
-const containerRef = ref(null)
-
-function isOpen(currentRefinement) {
-  return open.value && Boolean(currentRefinement)
-}
-
-function onInput(refine, event) {
-  open.value = true
-  active.value = -1
-  refine(event.currentTarget.value)
-}
-
-function move(delta, indices) {
-  const hits = indices[0]?.hits ?? []
-  if (!hits.length) return
-  open.value = true
-  const next = active.value + delta
-  active.value = next < 0 ? hits.length - 1 : next % hits.length
-}
-
-function select(indices, index) {
-  const hit = indices[0]?.hits?.[index]
-  if (!hit) return
-  indices[0].sendEvent('click', hit, 'Hit Clicked')
-  close()
-  // TODO: navigate to this hit's page, where the app has one
-}
-
-function close() {
-  open.value = false
-  active.value = -1
-}
-
-function onFocusOut(event) {
-  if (!containerRef.value?.contains(event.relatedTarget)) close()
-}
 </script>
 ```
 
-Details that break accessibility if changed:
-
-- `role="combobox"` on the `input`, not a wrapper — with `aria-controls` at the popup's
-  `id` and `aria-activedescendant` at the active option's `id`. Focus stays on the input
-  while the arrows move the highlight.
-- The `role="listbox"` element must be the direct parent of the `role="option"` elements;
-  a `ul` inside a `listbox` div, or options one level deeper, breaks the a11y tree.
-- `v-show`, not `v-if`, so the `aria-activedescendant` target stays in the DOM.
-- `@mousedown.prevent` on an option, not `@click` — selection must land before `focusout`
-  closes the panel.
-- `focusout` on the wrapper is the outside-click dismissal (`event.relatedTarget` is
-  `null` for a click on non-focusable chrome). Don't add a `document` click listener on
-  top — it fights `@mousedown.prevent`.
-- `.is-active` needs a visible style, not just `aria-selected` — it is a keyboard user's
-  only focus feedback, since focus never leaves the input.
-
-The panel is your own markup with no widget theme to inherit: give `.search-panel` a
-background from the app's theme tokens (never transparent over page content), text
-clearing 4.5:1 against it, `position: absolute` with `min-width: 320px` anchored to the
-input edge it opens from, and a `max-height` with `overflow-y: auto`.
-
-`indices` supports federated search across indices; this project has one, so `indices[0]`
-is always the one to read.
-
 Register the widgets via the InstantSearch Vue plugin in your app entry:
 
 ```js
@@ -168,15 +57,12 @@ The `insights` prop turns on the Insights middleware, which adds
 `clickAnalytics: true` to every query and keeps the `userToken` in sync between search
 and event calls. Never set `clickAnalytics` or `userToken` on `ais-configure` by hand.
 
-Use `:insights="true"` and nothing else. The middleware loads `search-insights` from the
-jsDelivr CDN itself; do not install the package, pass `insightsClient`, or declare `window.aa`.
+Use `:insights="true"`. The middleware loads `search-insights` from the jsDelivr CDN itself; do not install
+the package or pass `insightsClient`.
 
-Everything below is a **conditional fallback** — apply one only where its condition actually holds
-here (a CSP you can point at, a user id the app already has). Otherwise `:insights="true"` is the
-whole implementation.
-
-Only if the project has a Content-Security-Policy blocking jsDelivr (the CDN script then cannot
-load): install `search-insights` from npm and pass its default export as `insightsClient`:
+If a Content-Security-Policy blocks jsDelivr, the CDN script cannot load. In that
+case, install `search-insights` from npm and pass its default export as
+`insightsClient`:
 
 ```js
 import aa from 'search-insights'
@@ -199,18 +85,19 @@ const insights = { insightsInitParams: { useCookie: true } } // then :insights="
 
 ### Click and conversion events
 
-`ais-autocomplete` wraps the same connector as the other flavors, so `view` fires on its
-own when results render. `click` does not — the option markup is yours: call the index's
-`sendEvent` from your own option handler, as in the setup example above.
+`ais-hits` sends `view` and `click` events on its own. A custom `item` slot whose
+click target is your own element needs the slot's `sendEvent`:
 
 ```vue
-<li @mousedown.prevent="indices[0].sendEvent('click', hit, 'Hit Clicked')">
+<ais-hits>
+  <template v-slot:item="{ item, sendEvent }">
+    <a :href="item.url" @click="sendEvent('click', item, 'Hit Clicked')">
+      {{ item.name }}
+    </a>
+  </template>
+</ais-hits>
 ```
 
-`ais-hits` (if the app also has a full results page) sends both itself; only a custom
-`item` slot whose click target is your own element needs wiring — that slot provides
-`sendEvent`.
-
 Conversions are business actions (add to cart, signup, booking), so wire them at the
 real action, not at render:
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@algolia/wizard",
-  "version": "0.45.0-rc.141.320",
+  "version": "0.46.0-rc.136.345",
   "description": "Magically implement Algolia functionality in your codebase",
   "type": "module",
   "engines": {