@algolia/wizard 0.3.0-rc.47.9 → 0.4.0-rc.48.12

package/dist/main.js

@@ -4,10 +4,11 @@
 import { render } from "ink";
 
 // src/ui/App.tsx
-import { Box as Box12, Text as Text12, useApp, useInput as useInput5, useWindowSize as useWindowSize5 } from "ink";
+import { Box as Box13, Text as Text13, useApp, useInput as useInput6, useWindowSize as useWindowSize6 } from "ink";
 
 // src/core/store.ts
 import { create } from "zustand";
+import { nanoid } from "nanoid";
 
 // src/lib/algoliaCli.ts
 import { spawn } from "node:child_process";
@@ -165,6 +166,10 @@ async function markInteraction() {
 function toUserInfo({ user_id, ...rest }) {
   return { userId: user_id, ...rest };
 }
+function describeInputValue(value) {
+  if (typeof value === "boolean") return value ? "Yes" : "No";
+  return Array.isArray(value) ? value.join(", ") : value;
+}
 var NOTICE_INTERVAL_MS = 2e3;
 var useWizard = create((set, get) => ({
   phase: "idle",
@@ -177,6 +182,7 @@ var useWizard = create((set, get) => ({
   notices: [],
   _noticeQueue: [],
   _noticeTimer: null,
+  logs: [],
   error: null,
   inputReq: null,
   _resolve: null,
@@ -255,6 +261,21 @@ var useWizard = create((set, get) => ({
     get()._clearNoticeQueue();
     set({ notices: [] });
   },
+  logStart: (kind, name, input) => {
+    const id = nanoid();
+    set((s) => ({
+      logs: [
+        ...s.logs,
+        { id, kind, name, input, status: "running", startedAt: Date.now() }
+      ]
+    }));
+    return id;
+  },
+  logEnd: (id, status) => set((s) => ({
+    logs: s.logs.map(
+      (t) => t.id === id ? { ...t, status, durationMs: Date.now() - t.startedAt } : t
+    )
+  })),
   requestUserInput: (req) => new Promise((resolve4) => {
     set({
       phase: "awaitingInput",
@@ -262,10 +283,15 @@ var useWizard = create((set, get) => ({
       _resolve: resolve4
     });
   }),
+  // Logs what the user picked — not the prompt text that was shown, which
+  // may repeat or duplicate on-screen content and isn't the useful signal
+  // here.
   submitInput: async (value) => {
     await markInteraction();
     get()._resolve?.(value);
     set({ inputReq: null, _resolve: null, phase: "running" });
+    const id = get().logStart("prompt", `User input: ${describeInputValue(value)}`);
+    get().logEnd(id, "success");
   },
   setDone: () => set({ phase: "done" }),
   setError: (message) => set({ phase: "error", error: message }),
@@ -279,6 +305,7 @@ var useWizard = create((set, get) => ({
       currentStepIndex: 0,
       output: "",
       notices: [],
+      logs: [],
       error: null,
       inputReq: null,
       _resolve: null
@@ -1112,53 +1139,205 @@ function Ribbon() {
 }
 
 // src/ui/App.tsx
+import { useState as useState6 } from "react";
+
+// src/ui/Logs.tsx
+import { useLayoutEffect, useRef as useRef2, useState as useState5 } from "react";
+import { Box as Box12, Text as Text12, measureElement as measureElement2, useInput as useInput5, useWindowSize as useWindowSize5 } from "ink";
 import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+var KIND_COLOR = {
+  tool: COLORS.primary,
+  prompt: COLORS.badge
+};
+var STATUS_COLOR = {
+  running: COLORS.status.running,
+  error: COLORS.danger
+};
+function logNameColor(entry) {
+  return STATUS_COLOR[entry.status] ?? KIND_COLOR[entry.kind];
+}
+var ROW_GAP = 1;
+function truncate2(str, maxWidth) {
+  if (maxWidth <= 0) return "";
+  return str.length > maxWidth ? `${str.slice(0, maxWidth - 1)}\u2026` : str;
+}
+function rawInputText(input) {
+  if (input === void 0) return "";
+  const str = typeof input === "string" ? input : JSON.stringify(input);
+  if (!str || str === "{}") return "";
+  return str.replace(/\s+/g, " ").trim();
+}
+function formatTimestamp(ms) {
+  const d = new Date(ms);
+  const pad = (n) => String(n).padStart(2, "0");
+  return `${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
+}
+function Logs() {
+  const logs = useWizard((s) => s.logs);
+  const { rows, columns } = useWindowSize5();
+  const viewportRef = useRef2(null);
+  const [viewportHeight, setViewportHeight] = useState5(0);
+  const [viewportWidth, setViewportWidth] = useState5(0);
+  const [scrollOffset, setScrollOffset] = useState5(0);
+  const prevMaxOffsetRef = useRef2(0);
+  useLayoutEffect(() => {
+    if (!viewportRef.current) return;
+    const { width, height } = measureElement2(viewportRef.current);
+    setViewportHeight(height);
+    setViewportWidth(width);
+  }, [rows, columns, logs.length === 0]);
+  let capacity = viewportHeight;
+  for (let i = 0; i < 2; i++) {
+    const hasAbove = scrollOffset > 0;
+    const hasBelow = scrollOffset + capacity < logs.length;
+    capacity = Math.max(
+      viewportHeight - (hasAbove ? 1 : 0) - (hasBelow ? 1 : 0),
+      0
+    );
+  }
+  const capacityAtBottom = logs.length > viewportHeight ? Math.max(viewportHeight - 1, 0) : viewportHeight;
+  const maxOffset = Math.max(logs.length - capacityAtBottom, 0);
+  useLayoutEffect(() => {
+    const wasAtBottom = scrollOffset >= prevMaxOffsetRef.current;
+    prevMaxOffsetRef.current = maxOffset;
+    setScrollOffset((o) => wasAtBottom ? maxOffset : Math.min(o, maxOffset));
+  }, [maxOffset]);
+  useInput5((_input, key) => {
+    if (!key.upArrow && !key.downArrow) return;
+    setScrollOffset(
+      (o) => key.upArrow ? Math.max(o - 1, 0) : Math.min(o + 1, maxOffset)
+    );
+  });
+  const visible = logs.slice(scrollOffset, scrollOffset + capacity);
+  const hiddenAbove = scrollOffset;
+  const hiddenBelow = logs.length - scrollOffset - visible.length;
+  return /* @__PURE__ */ jsxs11(Box12, { flexDirection: "column", paddingX: 4, paddingY: 2, flexGrow: 1, children: [
+    logs.length === 0 && /* @__PURE__ */ jsx12(Text12, { color: COLORS.dim, children: "No logs yet." }),
+    /* @__PURE__ */ jsxs11(Box12, { ref: viewportRef, flexDirection: "column", flexGrow: 1, children: [
+      hiddenAbove > 0 && /* @__PURE__ */ jsxs11(Text12, { color: COLORS.dim, children: [
+        "\u2191 ",
+        hiddenAbove,
+        " more"
+      ] }),
+      visible.map((entry) => {
+        const timestamp = `[${formatTimestamp(entry.startedAt)}]`;
+        const durationText = entry.kind === "tool" && entry.durationMs !== void 0 ? `${entry.durationMs}ms` : "";
+        const rawPreview = rawInputText(entry.input);
+        const partCount = 2 + (rawPreview ? 1 : 0) + (durationText ? 1 : 0);
+        const gaps = (partCount - 1) * ROW_GAP;
+        let budget = viewportWidth - timestamp.length - durationText.length - gaps;
+        const name = truncate2(entry.name, budget);
+        budget -= name.length;
+        const preview = rawPreview ? truncate2(rawPreview, budget) : "";
+        return /* @__PURE__ */ jsxs11(Box12, { flexDirection: "row", gap: ROW_GAP, children: [
+          /* @__PURE__ */ jsx12(Text12, { color: COLORS.dim, children: timestamp }),
+          /* @__PURE__ */ jsx12(Text12, { color: logNameColor(entry), wrap: "truncate", children: name }),
+          preview && /* @__PURE__ */ jsx12(Text12, { color: COLORS.dim, wrap: "truncate", children: preview }),
+          durationText && /* @__PURE__ */ jsx12(Text12, { color: COLORS.dim, children: durationText })
+        ] }, entry.id);
+      }),
+      hiddenBelow > 0 && /* @__PURE__ */ jsxs11(Text12, { color: COLORS.dim, children: [
+        "\u2193 ",
+        hiddenBelow,
+        " more"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx12(Text12, { color: COLORS.dim, children: "\u2191/\u2193 scroll" })
+  ] });
+}
+
+// src/lib/events.ts
+import "zod";
+function track(event, payload) {
+  const token = getAuthToken();
+  if (!token) return;
+  const userId = useWizard.getState().user?.userId;
+  if (!userId) return;
+  void proxyFetch(`${PROXY_BASE_URL}/events`, {
+    method: "POST",
+    headers: {
+      "content-type": "application/json",
+      authorization: `Bearer ${token}`
+    },
+    body: JSON.stringify({ userId, event, properties: payload })
+  }).catch((err) => {
+    logger.warn({ err, event }, "failed to send analytics event");
+  });
+}
+
+// src/ui/App.tsx
+import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
 function App() {
-  const { phase, error, homeScreen } = useWizard();
+  const { phase, error, homeScreen, currentStepIndex, steps, inputReq } = useWizard();
   const { exit } = useApp();
-  const { columns, rows } = useWindowSize5();
+  const { columns, rows } = useWindowSize6();
+  const [showLogs, setShowLogs] = useState6(false);
   const finished = phase === "done" || phase === "error";
-  useInput5(
+  const currentStep = steps[currentStepIndex];
+  useInput6(
     (_input, key) => {
-      if (key.return || key.escape) {
+      if (key.return) {
         exit();
       }
     },
     { isActive: finished }
   );
+  useInput6((_input, key) => {
+    if (phase === "idle" || phase === "preflight") return;
+    if (key.tab) {
+      setShowLogs(!showLogs);
+      track("AI Wizard Interaction", {
+        context: "global",
+        key: "tab",
+        currentStep: currentStep?.id
+      });
+    }
+  });
+  const escOwnedElsewhere = phase === "idle" || phase === "awaitingInput" && inputReq?.promptType === "spaceToContinue";
+  useInput6((_input, key) => {
+    if (escOwnedElsewhere) return;
+    if (key.escape) {
+      track("AI Wizard Interaction", {
+        context: "global",
+        key: "esc",
+        // No step is active until `startWorkflow` — report the phase instead.
+        currentStep: currentStep?.id ?? phase
+      });
+      exit();
+    }
+  });
   const mainWindowVisible = phase === "running" || phase === "awaitingInput" || phase === "error" || phase === "done";
   const flexDirection = columns > 90 ? "row" : "column";
   const showSidebar = flexDirection === "row";
-  return /* @__PURE__ */ jsxs11(
-    Box12,
+  return /* @__PURE__ */ jsxs12(
+    Box13,
     {
       backgroundColor: COLORS.bg.main,
       flexDirection: "row",
       width: columns,
       minHeight: rows,
       children: [
-        mainWindowVisible && /* @__PURE__ */ jsxs11(
-          Box12,
+        mainWindowVisible && /* @__PURE__ */ jsxs12(
+          Box13,
           {
             flexDirection,
             width: "100%",
             justifyContent: "space-between",
             children: [
-              /* @__PURE__ */ jsxs11(Box12, { flexDirection: "column", paddingX: 4, paddingY: 2, width: 70, children: [
-                /* @__PURE__ */ jsx12(Notices, {}),
-                /* @__PURE__ */ jsx12(PromptInput, {}),
-                phase === "running" && showSidebar && /* @__PURE__ */ jsx12(Box12, { marginTop: 1, children: /* @__PURE__ */ jsx12(CurrentStep, {}) }),
-                phase === "error" && error && /* @__PURE__ */ jsx12(Box12, { marginTop: 1, children: /* @__PURE__ */ jsxs11(Text12, { color: COLORS.status.error, children: [
+              showLogs ? /* @__PURE__ */ jsx13(Logs, {}) : /* @__PURE__ */ jsxs12(Box13, { flexDirection: "column", paddingX: 4, paddingY: 2, width: 70, children: [
+                /* @__PURE__ */ jsx13(Notices, {}),
+                /* @__PURE__ */ jsx13(PromptInput, {}),
+                phase === "running" && showSidebar && /* @__PURE__ */ jsx13(Box13, { marginTop: 1, children: /* @__PURE__ */ jsx13(CurrentStep, {}) }),
+                phase === "error" && error && /* @__PURE__ */ jsx13(Box13, { marginTop: 1, children: /* @__PURE__ */ jsxs12(Text13, { color: COLORS.status.error, children: [
                   "\u2716 ",
                   error
                 ] }) })
               ] }),
-              /* @__PURE__ */ jsx12(Text12, { color: "white", backgroundColor: "#14171E" }),
-              showSidebar ? /* @__PURE__ */ jsx12(Sidebar, {}) : /* @__PURE__ */ jsx12(Ribbon, {})
+              showSidebar ? /* @__PURE__ */ jsx13(Sidebar, {}) : /* @__PURE__ */ jsx13(Ribbon, {})
             ]
           }
         ),
-        (phase === "idle" || phase === "preflight") && (homeScreen === "learnMore" ? /* @__PURE__ */ jsx12(LearnMore, {}) : /* @__PURE__ */ jsx12(Welcome, {}))
+        (phase === "idle" || phase === "preflight") && (homeScreen === "learnMore" ? /* @__PURE__ */ jsx13(LearnMore, {}) : /* @__PURE__ */ jsx13(Welcome, {}))
       ]
     }
   );
@@ -1356,25 +1535,6 @@ function trackWorkflowError(ctx) {
   );
 }
 
-// src/lib/events.ts
-import "zod";
-function track(event, payload) {
-  const token = getAuthToken();
-  if (!token) return;
-  const userId = useWizard.getState().user?.userId;
-  if (!userId) return;
-  void proxyFetch(`${PROXY_BASE_URL}/events`, {
-    method: "POST",
-    headers: {
-      "content-type": "application/json",
-      authorization: `Bearer ${token}`
-    },
-    body: JSON.stringify({ userId, event, properties: payload })
-  }).catch((err) => {
-    logger.warn({ err, event }, "failed to send analytics event");
-  });
-}
-
 // src/core/orchestrator.ts
 function defineStep(step) {
   return { visible: true, ...step };
@@ -1448,6 +1608,8 @@ async function makeContext(state) {
     requestUserInput: (prompt) => useWizard.getState().requestUserInput(prompt),
     notify: (notice) => useWizard.getState().pushNotice(notice),
     clearNotices: () => useWizard.getState().clearNotices(),
+    logStart: (name, input) => useWizard.getState().logStart("tool", name, input),
+    logEnd: (id, status) => useWizard.getState().logEnd(id, status),
     updateAlgoliaState: (key, value) => {
       state.algoliaState[key] = value;
     },
@@ -2100,7 +2262,7 @@ function verifyImplementationTool() {
 // src/lib/tools/generateRecord.ts
 import { tool as tool9, generateText, Output, NoObjectGeneratedError } from "ai";
 import { createAnthropic } from "@ai-sdk/anthropic";
-import { nanoid } from "nanoid";
+import { nanoid as nanoid2 } from "nanoid";
 import { mkdir as mkdir5, writeFile as writeFile5 } from "node:fs/promises";
 import { dirname as dirname6 } from "node:path";
 import z12 from "zod";
@@ -2146,7 +2308,7 @@ function generateRecordTool(ctx) {
                   // would otherwise drift to the same high-probability values and
                   // collide across batches. This per-batch seed pushes each call
                   // into a different region of the output space.
-                  `Variety seed: ${nanoid()}. Use it to diversify values.`
+                  `Variety seed: ${nanoid2()}. Use it to diversify values.`
                 ].filter(Boolean).join("\n")
               });
               return output.records;
@@ -2168,7 +2330,7 @@ function generateRecordTool(ctx) {
         const batches = await Promise.all(batchSizes.map(generateBatch));
         const records = batches.flat().map((record) => ({
           ...record,
-          objectID: nanoid()
+          objectID: nanoid2()
         }));
         const slug = entityName.toLowerCase().replace(/[^a-z0-9]+/g, "-");
         const relPath = `${DATA_DIR}/${slug}.json`;
@@ -2228,18 +2390,42 @@ function createToolContext(limits = DEFAULT_TOOL_LIMITS, cwd = process.cwd()) {
 }
 
 // src/lib/tools/index.ts
+function withLogging(name, def) {
+  const execute = def.execute;
+  if (!execute) return def;
+  return {
+    ...def,
+    execute: async (input, options) => {
+      const id = useWizard.getState().logStart("tool", name, input);
+      try {
+        const output = await execute(input, options);
+        useWizard.getState().logEnd(id, "success");
+        return output;
+      } catch (err) {
+        useWizard.getState().logEnd(id, "error");
+        throw err;
+      }
+    }
+  };
+}
 function createTools(ctx, { output, tools }) {
   const all = {
-    listFiles: listFilesTool(ctx),
-    changeDirectory: changeDirectoryTool(ctx),
-    reportStatus: reportStatusTool(output),
-    readFile: readFileTool(ctx),
-    writeFile: writeFileTool(ctx),
-    writeCredentials: writeCredentialsTool(ctx),
-    searchFiles: searchFilesTool(ctx),
-    verifyImplementation: verifyImplementationTool(),
-    generateRecord: generateRecordTool(ctx),
-    notifyUser: notifyUserTool()
+    listFiles: withLogging("listFiles", listFilesTool(ctx)),
+    changeDirectory: withLogging("changeDirectory", changeDirectoryTool(ctx)),
+    reportStatus: withLogging("reportStatus", reportStatusTool(output)),
+    readFile: withLogging("readFile", readFileTool(ctx)),
+    writeFile: withLogging("writeFile", writeFileTool(ctx)),
+    writeCredentials: withLogging(
+      "writeCredentials",
+      writeCredentialsTool(ctx)
+    ),
+    searchFiles: withLogging("searchFiles", searchFilesTool(ctx)),
+    verifyImplementation: withLogging(
+      "verifyImplementation",
+      verifyImplementationTool()
+    ),
+    generateRecord: withLogging("generateRecord", generateRecordTool(ctx)),
+    notifyUser: withLogging("notifyUser", notifyUserTool())
   };
   if (!tools) return all;
   const selection = /* @__PURE__ */ new Set([...tools, "reportStatus", "notifyUser"]);
@@ -2462,7 +2648,7 @@ async function runAnalysis(mode, extraInstructions = []) {
 // package.json
 var package_default = {
   name: "@algolia/wizard",
-  version: "0.3.0-rc.47.9",
+  version: "0.4.0-rc.48.12",
   description: "Magically implement Algolia functionality in your codebase",
   type: "module",
   engines: {
@@ -3411,13 +3597,16 @@ function searchInstructions(input) {
     doc,
     `Add the search UI at ${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 SearchBox and Hits against the "${input.targetIndex}" index.`,
     "Read the App ID and a search-only API key from public env vars; never hardcode them. A search-only key is safe to expose client-side.",
-    `Values: App ID ${input.appId ? `"${input.appId}"` : "(placeholder for the developer to fill in)"}, search-only key ${input.searchKey ? `"${input.searchKey}"` : "(placeholder for the developer to fill in)"}.`,
+    // appId always resolves (loadActiveProfile throws otherwise); only the
+    // search-only key is best-effort and can fall back to a placeholder.
+    `Values: App ID "${input.appId}", search-only key ${input.searchKey ? `"${input.searchKey}"` : "(placeholder for the developer to fill in)"}.`,
     // Names are fixed, not the agent's to rename: the wizard writes the
     // resolved app id / search-only key into ".env" under these exact names
     // right after this step, so a renamed prefix here would leave the code
     // reading a var the wizard never wrote.
     `Use exactly these public env var names in the code: ${input.searchEnvVars.map(({ name }) => name).join(", ")}.`,
-    'Add any Algolia/InstantSearch packages you import to package.json "dependencies" with a valid version range; the wizard installs them in the worktree after you finish.'
+    'Add any Algolia/InstantSearch packages you import to package.json "dependencies" with a valid version range; the wizard installs them in the worktree after you finish.',
+    "The summary should be extremely concise; do not mention env var setup or manual testing steps \u2014 the wizard writes the resolved credentials to .env and reports that separately."
   ];
 }
 function verificationInstructions(input) {
@@ -3638,7 +3827,14 @@ async function implement(ctx, useCases = DEFAULT_IMPLEMENT_USE_CASES, existingWo
         tools: toolsForUseCase(currentUseCase, input.ingestionSource),
         outputSchema: implementationOutputSchema
       });
+      ctx.notify({
+        messages: [`Installing dependencies for ${currentUseCase}\u2026`]
+      });
+      const installLogId = ctx.logStart("installWorktreeDeps", {
+        useCase: currentUseCase
+      });
       const install = await installWorktreeDeps(worktree);
+      ctx.logEnd(installLogId, install.ok ? "success" : "error");
       if (!install.ok) {
         installFailed = true;
         logger.warn(
@@ -3672,6 +3868,11 @@ async function implement(ctx, useCases = DEFAULT_IMPLEMENT_USE_CASES, existingWo
         }) === true;
         if (runNow) {
           const profile2 = await loadActiveProfile();
+          ctx.notify({ messages: [`Writing records to "${targetIndex}"\u2026`] });
+          const scriptLogId = ctx.logStart("runIngestScript", {
+            runtime: ingestRuntime,
+            entrypoint: ingestEntrypoint
+          });
           const startedAt = Date.now();
           const run = await runIngestScript(
             worktree,
@@ -3682,6 +3883,7 @@ async function implement(ctx, useCases = DEFAULT_IMPLEMENT_USE_CASES, existingWo
               [API_KEY_VAR]: profile2.apiKey
             }
           );
+          ctx.logEnd(scriptLogId, run.ok ? "success" : "error");
           ingestScriptRan = run.ran && run.ok;
           if (ingestScriptRan) {
             ingestDurationMs = Date.now() - startedAt;
@@ -3959,7 +4161,7 @@ function getWorkflow(id) {
 }
 
 // src/main.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var requestedId = process.argv[2] ?? defaultWorkflow.id;
 var workflow = getWorkflow(requestedId);
 if (!workflow) {
@@ -3968,7 +4170,7 @@ if (!workflow) {
   process.exit(1);
 }
 var store = useWizard.getState();
-var instance = render(/* @__PURE__ */ jsx13(App, {}), { incrementalRendering: true });
+var instance = render(/* @__PURE__ */ jsx14(App, {}), { incrementalRendering: true });
 var user = await getUser();
 if (!user) {
   await instance.waitUntilRenderFlush();
@@ -3979,7 +4181,7 @@ if (!user) {
     console.error(err instanceof Error ? err.message : String(err));
     process.exit(1);
   }
-  instance = render(/* @__PURE__ */ jsx13(App, {}), { incrementalRendering: true });
+  instance = render(/* @__PURE__ */ jsx14(App, {}), { incrementalRendering: true });
   user = await getUser();
   if (!user) {
     store.setError(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@algolia/wizard",
-  "version": "0.3.0-rc.47.9",
+  "version": "0.4.0-rc.48.12",
   "description": "Magically implement Algolia functionality in your codebase",
   "type": "module",
   "engines": {