@algolia/wizard 0.86.0 → 0.87.0

package/dist/main.js

@@ -4,7 +4,7 @@
 import { render } from "ink";
 
 // src/ui/App.tsx
-import { Box as Box22, Text as Text23, useApp as useApp2, useInput as useInput9, useWindowSize as useWindowSize8 } from "ink";
+import { Box as Box23, Text as Text24, useApp as useApp2, useInput as useInput10, useWindowSize as useWindowSize8 } from "ink";
 import Spinner3 from "ink-spinner";
 
 // src/lib/terminalSize.ts
@@ -98,8 +98,8 @@ function runAlgoliaCli(args, { onOutput, redact } = {}) {
     let stdout = "";
     let stderr = "";
     const splitters = {
-      stdout: lineSplitter((line) => onOutput?.("stdout", line)),
-      stderr: lineSplitter((line) => onOutput?.("stderr", line))
+      stdout: lineSplitter((line) => onOutput?.("stdout", mask(line, redact))),
+      stderr: lineSplitter((line) => onOutput?.("stderr", mask(line, redact)))
     };
     child.stdout.on("data", (chunk) => {
       const text = String(chunk);
@@ -287,6 +287,16 @@ var CLI_OUTPUT_LIMIT = 200;
 function commandApprovalKey(command, cwd) {
   return `${cwd}\0${command}`;
 }
+function appendOutputLog(logs, outputCount, entry) {
+  if (outputCount < CLI_OUTPUT_LIMIT) {
+    return { logs: [...logs, entry], _outputLogCount: outputCount + 1 };
+  }
+  const oldest = logs.findIndex((e) => e.kind === "output");
+  return {
+    logs: [...logs.filter((_, i) => i !== oldest), entry],
+    _outputLogCount: outputCount
+  };
+}
 var useWizard = create((set, get) => ({
   phase: "idle",
   homeScreen: "home",
@@ -304,6 +314,7 @@ var useWizard = create((set, get) => ({
   writtenFiles: [],
   approvedCommands: /* @__PURE__ */ new Set(),
   logs: [],
+  _outputLogCount: 0,
   error: null,
   inputReq: null,
   _resolve: null,
@@ -396,11 +407,23 @@ var useWizard = create((set, get) => ({
     get()._clearNoticeQueue();
     set({ notices: [] });
   },
-  pushCliOutput: (stream, text) => set((s) => ({
-    cliOutput: [...s.cliOutput, { id: nanoid(), stream, text }].slice(
-      -CLI_OUTPUT_LIMIT
-    )
-  })),
+  // Logged too, so a line cut off on the main screen can be read in the log view.
+  pushCliOutput: (stream, text) => {
+    const id = nanoid();
+    set((s) => ({
+      cliOutput: [...s.cliOutput, { id, stream, text }].slice(
+        -CLI_OUTPUT_LIMIT
+      ),
+      ...appendOutputLog(s.logs, s._outputLogCount, {
+        id,
+        kind: "output",
+        name: text,
+        stream,
+        status: "success",
+        startedAt: Date.now()
+      })
+    }));
+  },
   clearCliOutput: () => set({ cliOutput: [] }),
   setReview: (review2) => set({ review: review2 }),
   setTargetIndex: (index) => set({ targetIndex: index }),
@@ -474,6 +497,7 @@ var useWizard = create((set, get) => ({
       writtenFiles: [],
       approvedCommands: /* @__PURE__ */ new Set(),
       logs: [],
+      _outputLogCount: 0,
       error: null,
       inputReq: null,
       _resolve: null,
@@ -713,6 +737,32 @@ import { useState as useState9 } from "react";
 import { Box as Box8, Text as Text8, useInput as useInput3 } from "ink";
 import { useLayoutEffect as useLayoutEffect3, useState as useState6 } from "react";
 
+// src/lib/wrapExact.ts
+function wrapExactLine(line, width) {
+  if (line.length === 0) return [" "];
+  const lines = [];
+  let i = 0;
+  while (i < line.length) {
+    if (line.length - i <= width) {
+      lines.push(line.slice(i));
+      break;
+    }
+    let end = i + width;
+    if (line.charAt(end) !== " ") {
+      const lastSpace = line.lastIndexOf(" ", end - 1);
+      if (lastSpace >= i) end = lastSpace + 1;
+    }
+    if (end <= i) end = i + width;
+    lines.push(line.slice(i, end));
+    i = end;
+  }
+  return lines;
+}
+function wrapExact(text, width) {
+  if (width <= 0) return [text || " "];
+  return text.split(/\r\n|\n|\r/).flatMap((line) => wrapExactLine(line, width));
+}
+
 // src/ui/DecisionSelect.tsx
 import { Box as Box5, Text as Text5, useInput } from "ink";
 import { useState as useState3 } from "react";
@@ -1028,30 +1078,6 @@ function Review() {
 import { jsx as jsx6, jsxs as jsxs7 } from "react/jsx-runtime";
 var BLANK2 = { prefix: "", text: " ", color: COLORS.dim };
 var COMMAND_PREFIX = "$ ";
-function wrapExactLine(line, width) {
-  if (line.length === 0) return [" "];
-  const lines = [];
-  let i = 0;
-  while (i < line.length) {
-    if (line.length - i <= width) {
-      lines.push(line.slice(i));
-      break;
-    }
-    let end = i + width;
-    if (line.charAt(end) !== " ") {
-      const lastSpace = line.lastIndexOf(" ", end - 1);
-      if (lastSpace >= i) end = lastSpace + 1;
-    }
-    if (end <= i) end = i + width;
-    lines.push(line.slice(i, end));
-    i = end;
-  }
-  return lines;
-}
-function wrapExact(text, width) {
-  if (width <= 0) return [text || " "];
-  return text.split(/\r\n|\n|\r/).flatMap((line) => wrapExactLine(line, width));
-}
 function fieldLines(prefix, value, color, width) {
   return wrapText(value, Math.max(width - prefix.length, 1)).map((text, i) => ({
     prefix: i === 0 ? prefix : " ".repeat(prefix.length),
@@ -2332,7 +2358,7 @@ async function ensureApplication(resumeAppId) {
 // package.json
 var package_default = {
   name: "@algolia/wizard",
-  version: "0.86.0",
+  version: "0.87.0",
   description: "Magically implement Algolia functionality in your codebase",
   type: "module",
   engines: {
@@ -8564,10 +8590,15 @@ var sidebarCommands = [
   { keyHint: "tab", description: "toggle logs" },
   { keyHint: "esc", description: "exit wizard" }
 ];
+var logsSidebarCommands = [
+  { keyHint: "tab", description: "toggle logs" },
+  { keyHint: "esc", description: "back" }
+];
 
 // src/ui/Sidebar.tsx
 import { jsx as jsx16, jsxs as jsxs16 } from "react/jsx-runtime";
-function Sidebar() {
+function Sidebar({ inLogs = false }) {
+  const commands = inLogs ? logsSidebarCommands : sidebarCommands;
   return /* @__PURE__ */ jsxs16(
     Box17,
     {
@@ -8584,7 +8615,7 @@ function Sidebar() {
         ] }),
         /* @__PURE__ */ jsxs16(Box17, { flexDirection: "column", gap: 1, children: [
           /* @__PURE__ */ jsx16(Progress, {}),
-          /* @__PURE__ */ jsx16(Box17, { flexDirection: "column", children: sidebarCommands.map((c) => {
+          /* @__PURE__ */ jsx16(Box17, { flexDirection: "column", children: commands.map((c) => {
             return /* @__PURE__ */ jsxs16(Box17, { flexDirection: "row", gap: 1, children: [
               /* @__PURE__ */ jsx16(Text18, { color: COLORS.primary, children: `[${c.keyHint}]` }),
               /* @__PURE__ */ jsx16(Text18, { color: COLORS.muted, children: c.description })
@@ -8622,23 +8653,130 @@ function Ribbon() {
 }
 
 // src/ui/App.tsx
-import { useState as useState12 } from "react";
+import { useState as useState14 } from "react";
 
 // src/ui/Logs.tsx
+import { Box as Box20, Text as Text21, useInput as useInput9 } from "ink";
+import { useLayoutEffect as useLayoutEffect6, useState as useState12 } from "react";
+
+// src/ui/LogDetails.tsx
 import { Box as Box19, Text as Text20, useInput as useInput8 } from "ink";
-import { jsx as jsx18, jsxs as jsxs18 } from "react/jsx-runtime";
+import { useLayoutEffect as useLayoutEffect5, useMemo, useState as useState11 } from "react";
+
+// src/ui/logFormat.ts
 var KIND_COLOR = {
   tool: COLORS.primary,
-  prompt: COLORS.badge
+  prompt: COLORS.badge,
+  output: COLORS.muted
+};
+var STREAM_COLOR = {
+  stderr: COLORS.muted,
+  stdout: COLORS.dim
 };
 var STATUS_COLOR = {
   running: COLORS.status.running,
   error: COLORS.danger
 };
 function logNameColor(entry) {
-  return STATUS_COLOR[entry.status] ?? KIND_COLOR[entry.kind];
+  const base = entry.stream ? STREAM_COLOR[entry.stream] : KIND_COLOR[entry.kind];
+  return STATUS_COLOR[entry.status] ?? base;
+}
+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 durationText(entry) {
+  return entry.kind === "tool" && entry.durationMs !== void 0 ? `${entry.durationMs}ms` : "";
+}
+
+// src/ui/LogDetails.tsx
+import { jsx as jsx18, jsxs as jsxs18 } from "react/jsx-runtime";
+var BLANK4 = { text: " ", color: COLORS.dim };
+var VALUE_INDENT = "  ";
+var TAB = "  ";
+function wrapLines(text, width, line, indent = "") {
+  return wrapExact(
+    text.replaceAll("	", TAB),
+    Math.max(width - indent.length, 1)
+  ).map((part) => ({ ...line, text: indent + part }));
+}
+function formatValue(value) {
+  return typeof value === "string" ? value : JSON.stringify(value, null, 2);
+}
+function inputFields(input) {
+  if (input === void 0) return [];
+  if (input !== null && typeof input === "object" && !Array.isArray(input)) {
+    return Object.entries(input).filter(([, value]) => value !== void 0).map(([label, value]) => [label, formatValue(value)]);
+  }
+  return [["input", formatValue(input)]];
+}
+function metaText(entry) {
+  const parts = [`[${formatTimestamp(entry.startedAt)}]`];
+  if (entry.kind === "tool") parts.push(entry.status, durationText(entry));
+  return parts.filter(Boolean).join(" ");
+}
+function buildDetailLines(entry, width) {
+  const lines = wrapLines(entry.name, width, {
+    color: logNameColor(entry),
+    bold: true
+  });
+  lines.push({ text: metaText(entry), color: COLORS.dim });
+  for (const [label, value] of inputFields(entry.input)) {
+    lines.push(BLANK4, { text: label, color: COLORS.muted });
+    lines.push(
+      ...wrapLines(value, width, { color: COLORS.primary }, VALUE_INDENT)
+    );
+  }
+  return lines;
 }
+function LogDetails({
+  entry,
+  onClose
+}) {
+  const [width, setWidth] = useState11(0);
+  const lines = useMemo(
+    () => width > 0 ? buildDetailLines(entry, width) : [],
+    [entry, width]
+  );
+  const scroll = useScrollWindow({ itemCount: lines.length });
+  useLayoutEffect5(() => {
+    if (scroll.measured) setWidth(scroll.width);
+  }, [scroll.measured, scroll.width]);
+  useInput8((input, key) => {
+    if (input === "k" || key.upArrow) scroll.scrollBy(-1);
+    else if (input === "j" || key.downArrow) scroll.scrollBy(1);
+    else if (key.escape) onClose();
+  });
+  const visible = lines.slice(scroll.offset, scroll.offset + scroll.capacity);
+  return /* @__PURE__ */ jsxs18(Box19, { flexDirection: "column", flexGrow: 1, children: [
+    /* @__PURE__ */ jsx18(ScrollView, { scroll, children: visible.map((line, i) => /* @__PURE__ */ jsx18(
+      Text20,
+      {
+        color: line.color,
+        bold: line.bold,
+        wrap: "truncate",
+        children: line.text
+      },
+      `detail-${scroll.offset + i}`
+    )) }),
+    /* @__PURE__ */ jsxs18(Box19, { gap: 2, children: [
+      scroll.maxOffset > 0 && /* @__PURE__ */ jsxs18(Text20, { children: [
+        /* @__PURE__ */ jsx18(Text20, { color: COLORS.primary, children: "[j] [k]" }),
+        /* @__PURE__ */ jsx18(Text20, { color: COLORS.dim, children: " scroll" })
+      ] }),
+      /* @__PURE__ */ jsxs18(Text20, { children: [
+        /* @__PURE__ */ jsx18(Text20, { color: COLORS.primary, children: "[esc]" }),
+        /* @__PURE__ */ jsx18(Text20, { color: COLORS.dim, children: " back" })
+      ] })
+    ] })
+  ] });
+}
+
+// src/ui/Logs.tsx
+import { Fragment, jsx as jsx19, jsxs as jsxs19 } from "react/jsx-runtime";
 var ROW_GAP = 1;
+var SELECTED_MARKER = "\u276F";
 function truncate3(str, maxWidth) {
   if (maxWidth <= 0) return "";
   return str.length > maxWidth ? `${str.slice(0, maxWidth - 1)}\u2026` : str;
@@ -8649,53 +8787,84 @@ function rawInputText(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() {
+function Logs({ onBack }) {
   const logs = useWizard((s) => s.logs);
-  const scroll = useScrollWindow({ itemCount: logs.length, followBottom: true });
-  useInput8((input, key) => {
-    if (input === "k" || key.upArrow) scroll.scrollBy(-1);
-    else if (input === "j" || key.downArrow) scroll.scrollBy(1);
+  const [openLogId, setOpenLogId] = useState12(null);
+  const [selectedId, setSelectedId] = useState12(null);
+  const found = selectedId === null ? -1 : logs.findIndex((e) => e.id === selectedId);
+  if (selectedId !== null && found < 0) setSelectedId(null);
+  const scroll = useScrollWindow({
+    itemCount: logs.length,
+    followBottom: selectedId === null
   });
+  const selectedIndex = found >= 0 ? found : logs.length - 1;
+  const openEntry = logs.find((e) => e.id === openLogId);
+  const { revealIndex } = scroll;
+  useLayoutEffect6(() => {
+    if (selectedIndex >= 0) revealIndex(selectedIndex);
+  }, [selectedIndex, revealIndex]);
+  const moveSelection = (delta) => {
+    if (logs.length === 0) return;
+    const next = Math.min(Math.max(selectedIndex + delta, 0), logs.length - 1);
+    setSelectedId(next === logs.length - 1 ? null : logs[next].id);
+  };
+  useInput9(
+    (input, key) => {
+      if (input === "k" || key.upArrow) moveSelection(-1);
+      else if (input === "j" || key.downArrow) moveSelection(1);
+      else if (key.return && logs[selectedIndex]) {
+        setOpenLogId(logs[selectedIndex].id);
+      } else if (key.escape) onBack();
+    },
+    { isActive: !openEntry }
+  );
   const visible = logs.slice(scroll.offset, scroll.offset + scroll.capacity);
-  return /* @__PURE__ */ jsxs18(Box19, { flexDirection: "column", paddingX: 4, paddingY: 2, flexGrow: 1, children: [
-    logs.length === 0 && /* @__PURE__ */ jsx18(Text20, { color: COLORS.dim, children: "No logs yet." }),
-    /* @__PURE__ */ jsx18(ScrollView, { scroll, children: visible.map((entry) => {
+  return /* @__PURE__ */ jsx19(Box20, { flexDirection: "column", paddingX: 4, paddingY: 2, flexGrow: 1, children: openEntry ? /* @__PURE__ */ jsx19(LogDetails, { entry: openEntry, onClose: () => setOpenLogId(null) }) : /* @__PURE__ */ jsxs19(Fragment, { children: [
+    logs.length === 0 && /* @__PURE__ */ jsx19(Text21, { color: COLORS.dim, children: "No logs yet." }),
+    /* @__PURE__ */ jsx19(ScrollView, { scroll, children: visible.map((entry, i) => {
+      const selected = scroll.offset + i === selectedIndex;
       const timestamp = `[${formatTimestamp(entry.startedAt)}]`;
-      const durationText = entry.kind === "tool" && entry.durationMs !== void 0 ? `${entry.durationMs}ms` : "";
+      const duration = durationText(entry);
       const rawPreview = rawInputText(entry.input);
-      const partCount = 2 + (rawPreview ? 1 : 0) + (durationText ? 1 : 0);
+      const partCount = 3 + (rawPreview ? 1 : 0) + (duration ? 1 : 0);
       const gaps = (partCount - 1) * ROW_GAP;
-      let budget = scroll.width - timestamp.length - durationText.length - gaps;
+      let budget = scroll.width - SELECTED_MARKER.length - timestamp.length - duration.length - gaps;
       const name = truncate3(entry.name, budget);
       budget -= name.length;
       const preview = rawPreview ? truncate3(rawPreview, budget) : "";
-      return /* @__PURE__ */ jsxs18(Box19, { flexDirection: "row", gap: ROW_GAP, children: [
-        /* @__PURE__ */ jsx18(Text20, { color: COLORS.dim, children: timestamp }),
-        /* @__PURE__ */ jsx18(Text20, { color: logNameColor(entry), wrap: "truncate", children: name }),
-        preview && /* @__PURE__ */ jsx18(Text20, { color: COLORS.dim, wrap: "truncate", children: preview }),
-        durationText && /* @__PURE__ */ jsx18(Text20, { color: COLORS.dim, children: durationText })
+      return /* @__PURE__ */ jsxs19(Box20, { flexDirection: "row", gap: ROW_GAP, children: [
+        /* @__PURE__ */ jsx19(Text21, { color: COLORS.success, children: selected ? SELECTED_MARKER : " " }),
+        /* @__PURE__ */ jsx19(Text21, { color: COLORS.dim, children: timestamp }),
+        /* @__PURE__ */ jsx19(Text21, { color: logNameColor(entry), wrap: "truncate", children: name }),
+        preview && /* @__PURE__ */ jsx19(Text21, { color: COLORS.dim, wrap: "truncate", children: preview }),
+        duration && /* @__PURE__ */ jsx19(Text21, { color: COLORS.dim, children: duration })
       ] }, entry.id);
     }) }),
-    /* @__PURE__ */ jsxs18(Text20, { children: [
-      /* @__PURE__ */ jsx18(Text20, { color: COLORS.primary, children: "[j] [k]" }),
-      /* @__PURE__ */ jsx18(Text20, { color: COLORS.dim, children: " scroll" })
+    /* @__PURE__ */ jsxs19(Box20, { gap: 2, children: [
+      /* @__PURE__ */ jsxs19(Text21, { children: [
+        /* @__PURE__ */ jsx19(Text21, { color: COLORS.primary, children: "[j] [k]" }),
+        /* @__PURE__ */ jsx19(Text21, { color: COLORS.dim, children: " select" })
+      ] }),
+      /* @__PURE__ */ jsxs19(Text21, { children: [
+        /* @__PURE__ */ jsx19(Text21, { color: COLORS.primary, children: "[enter]" }),
+        /* @__PURE__ */ jsx19(Text21, { color: COLORS.dim, children: " details" })
+      ] }),
+      /* @__PURE__ */ jsxs19(Text21, { children: [
+        /* @__PURE__ */ jsx19(Text21, { color: COLORS.primary, children: "[esc]" }),
+        /* @__PURE__ */ jsx19(Text21, { color: COLORS.dim, children: " back" })
+      ] })
     ] })
-  ] });
+  ] }) });
 }
 
 // src/ui/Tips.tsx
-import { useEffect as useEffect3, useRef as useRef4, useState as useState11 } from "react";
-import { Box as Box21, Text as Text22 } from "ink";
+import { useEffect as useEffect3, useRef as useRef4, useState as useState13 } from "react";
+import { Box as Box22, Text as Text23 } from "ink";
 import terminalLink from "terminal-link";
 
 // src/ui/Code.tsx
-import { Box as Box20, Text as Text21 } from "ink";
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { Box as Box21, Text as Text22 } from "ink";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var TOKEN_RE = /("(?:\\.|[^"\\])*"|\btrue\b|\bfalse\b|\bnull\b|-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?|[{}[\]:,])/g;
 function highlightJson(json) {
   const parts = json.split(TOKEN_RE);
@@ -8704,22 +8873,22 @@ function highlightJson(json) {
     if (part[0] === '"') {
       const next = parts.slice(i + 1).find((p) => p.trim());
       const isKey = next?.trimStart().startsWith(":");
-      return /* @__PURE__ */ jsx19(Text21, { color: isKey ? "cyan" : "green", children: part }, i);
+      return /* @__PURE__ */ jsx20(Text22, { color: isKey ? "cyan" : "green", children: part }, i);
     }
     if (part === "true" || part === "false" || part === "null") {
-      return /* @__PURE__ */ jsx19(Text21, { color: "magenta", children: part }, i);
+      return /* @__PURE__ */ jsx20(Text22, { color: "magenta", children: part }, i);
     }
     if (/^-?\d/.test(part)) {
-      return /* @__PURE__ */ jsx19(Text21, { color: "yellow", children: part }, i);
+      return /* @__PURE__ */ jsx20(Text22, { color: "yellow", children: part }, i);
     }
     if (/^[{}[\]:,]$/.test(part)) {
-      return /* @__PURE__ */ jsx19(Text21, { color: COLORS.dim, children: part }, i);
+      return /* @__PURE__ */ jsx20(Text22, { color: COLORS.dim, children: part }, i);
     }
-    return /* @__PURE__ */ jsx19(Text21, { children: part }, i);
+    return /* @__PURE__ */ jsx20(Text22, { children: part }, i);
   });
 }
 function Code({ children }) {
-  return /* @__PURE__ */ jsx19(Box20, { children: /* @__PURE__ */ jsx19(Text21, { children: highlightJson(children) }) });
+  return /* @__PURE__ */ jsx20(Box21, { children: /* @__PURE__ */ jsx20(Text22, { children: highlightJson(children) }) });
 }
 
 // src/ui/copy/tips.ts
@@ -8915,26 +9084,26 @@ var tips = [
 ];
 
 // src/ui/Tips.tsx
-import { jsx as jsx20, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs20 } from "react/jsx-runtime";
 var TICK_MS = 16;
 var CHUNK_HOLD_MS = 2e3;
 var TIP_DURATION_MS = 25e3;
 function TipTitle({ children }) {
-  return /* @__PURE__ */ jsxs19(Box21, { gap: 1, children: [
-    /* @__PURE__ */ jsx20(Text22, { color: "cyan", children: "\u2726" }),
-    /* @__PURE__ */ jsx20(Text22, { color: "white", bold: true, children })
+  return /* @__PURE__ */ jsxs20(Box22, { gap: 1, children: [
+    /* @__PURE__ */ jsx21(Text23, { color: "cyan", children: "\u2726" }),
+    /* @__PURE__ */ jsx21(Text23, { color: "white", bold: true, children })
   ] });
 }
 function InlineSegment({ segment }) {
   switch (segment.type) {
     case "highlight":
-      return /* @__PURE__ */ jsx20(Text22, { color: COLORS.success, children: segment.value });
+      return /* @__PURE__ */ jsx21(Text23, { color: COLORS.success, children: segment.value });
     case "link":
-      return /* @__PURE__ */ jsx20(Text22, { color: "cyan", underline: true, children: segment.href ? terminalLink(segment.value, segment.href) : segment.value });
+      return /* @__PURE__ */ jsx21(Text23, { color: "cyan", underline: true, children: segment.href ? terminalLink(segment.value, segment.href) : segment.value });
     case "codeword":
-      return /* @__PURE__ */ jsx20(Text22, { color: COLORS.highlight.fg, backgroundColor: COLORS.highlight.bg, children: segment.value });
+      return /* @__PURE__ */ jsx21(Text23, { color: COLORS.highlight.fg, backgroundColor: COLORS.highlight.bg, children: segment.value });
     default:
-      return /* @__PURE__ */ jsx20(Text22, { color: COLORS.muted, children: segment.value });
+      return /* @__PURE__ */ jsx21(Text23, { color: COLORS.muted, children: segment.value });
   }
 }
 function TipContent({
@@ -8968,10 +9137,10 @@ function TipContent({
       blocks.push({ type: "inline", segments: [segment] });
     }
   }
-  return /* @__PURE__ */ jsx20(Box21, { flexDirection: "column", marginLeft: 2, gap: 1, children: blocks.map(
-    (block, i) => block.type === "code" ? /* @__PURE__ */ jsx20(Code, { children: block.segment.value }, i) : /* @__PURE__ */ jsx20(Text22, { children: block.segments.map((segment, j) => /* @__PURE__ */ jsxs19(Text22, { children: [
+  return /* @__PURE__ */ jsx21(Box22, { flexDirection: "column", marginLeft: 2, gap: 1, children: blocks.map(
+    (block, i) => block.type === "code" ? /* @__PURE__ */ jsx21(Code, { children: block.segment.value }, i) : /* @__PURE__ */ jsx21(Text23, { children: block.segments.map((segment, j) => /* @__PURE__ */ jsxs20(Text23, { children: [
       j > 0 && " ",
-      /* @__PURE__ */ jsx20(InlineSegment, { segment })
+      /* @__PURE__ */ jsx21(InlineSegment, { segment })
     ] }, j)) }, i)
   ) });
 }
@@ -9001,7 +9170,7 @@ function Tips({
   onRevealStateChange,
   onComplete
 }) {
-  const [position, setPosition] = useState11(() => {
+  const [position, setPosition] = useState13(() => {
     const now = Date.now();
     return {
       tipIndex: clock.tipIndex,
@@ -9061,9 +9230,9 @@ function Tips({
   if (position.complete) return null;
   const titleRevealed = tip.title.slice(0, revealed);
   const contentRevealed = Math.max(0, revealed - tip.title.length);
-  return /* @__PURE__ */ jsxs19(Box21, { flexDirection: "column", marginBottom: 1, gap: 1, children: [
-    /* @__PURE__ */ jsx20(TipTitle, { children: titleRevealed }),
-    /* @__PURE__ */ jsx20(TipContent, { chunks: tip.chunks, revealed: contentRevealed })
+  return /* @__PURE__ */ jsxs20(Box22, { flexDirection: "column", marginBottom: 1, gap: 1, children: [
+    /* @__PURE__ */ jsx21(TipTitle, { children: titleRevealed }),
+    /* @__PURE__ */ jsx21(TipContent, { chunks: tip.chunks, revealed: contentRevealed })
   ] });
 }
 
@@ -9105,7 +9274,7 @@ function useRepaintOnResize(debounceMs = 100) {
 }
 
 // src/ui/App.tsx
-import { jsx as jsx21, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs21 } from "react/jsx-runtime";
 function App() {
   const {
     phase,
@@ -9124,9 +9293,9 @@ function App() {
   const { columns, rows } = useWindowSize8();
   useRepaintOnResize();
   const compactRun = isCompactTerminal(columns, rows);
-  const [showLogs, setShowLogs] = useState12(false);
-  const [tipState, setTipState] = useState12("idle");
-  const [tipsComplete, setTipsComplete] = useState12(false);
+  const [showLogs, setShowLogs] = useState14(false);
+  const [tipState, setTipState] = useState14("idle");
+  const [tipsComplete, setTipsComplete] = useState14(false);
   const finished = phase === "done" || phase === "error";
   const currentStep = steps[currentStepIndex];
   const workflowDef = workflow ? getWorkflow(workflow.id) : void 0;
@@ -9137,15 +9306,15 @@ function App() {
   const showTips = !compactRun && tipsActive && (phase === "running" && currentStep?.status === "running" && !loadingMessage && !settingUpAppId || holdForTip);
   const showNoticesInMain = !tipsActive;
   const showNotices = !compactRun && (!isAwaitingUserInput || holdForTip) && !review2;
-  useInput9(
+  useInput10(
     (_input, key) => {
       if (key.return) {
         exit();
       }
     },
-    { isActive: finished }
+    { isActive: finished && !showLogs }
   );
-  useInput9((_input, key) => {
+  useInput10((_input, key) => {
     if (phase === "idle" || phase === "authenticating") return;
     if (key.tab) {
       setShowLogs(!showLogs);
@@ -9156,8 +9325,9 @@ function App() {
       });
     }
   });
-  const escOwnedElsewhere = phase === "idle" || phase === "authenticating" || phase === "awaitingInput" && !holdForTip && (inputReq?.promptType === "enterToContinue" || inputReq?.promptType === "commandApproval");
-  useInput9((_input, key) => {
+  const escOwnedElsewhere = phase === "idle" || phase === "authenticating" || // The log view owns esc: it closes the details, then leaves the list.
+  showLogs || phase === "awaitingInput" && !holdForTip && (inputReq?.promptType === "enterToContinue" || inputReq?.promptType === "commandApproval");
+  useInput10((_input, key) => {
     if (escOwnedElsewhere) return;
     if (key.escape) {
       track("AI Wizard Interaction", {
@@ -9175,8 +9345,8 @@ function App() {
     /* Clamped to exactly the viewport: a taller frame makes Ink clear and repaint
        the whole screen, and the scrolling throws off its cursor arithmetic.
        Flicker and leftover rows. */
-    /* @__PURE__ */ jsxs20(
-      Box22,
+    /* @__PURE__ */ jsxs21(
+      Box23,
       {
         backgroundColor: COLORS.bg.main,
         flexDirection: "row",
@@ -9184,16 +9354,16 @@ function App() {
         height: rows,
         overflow: "hidden",
         children: [
-          mainWindowVisible && /* @__PURE__ */ jsxs20(
-            Box22,
+          mainWindowVisible && /* @__PURE__ */ jsxs21(
+            Box23,
             {
               flexDirection,
               width: "100%",
               maxHeight: rows,
               justifyContent: "space-between",
               children: [
-                showLogs ? /* @__PURE__ */ jsx21(Logs, {}) : /* @__PURE__ */ jsxs20(
-                  Box22,
+                showLogs ? /* @__PURE__ */ jsx22(Logs, { onBack: () => setShowLogs(false) }) : /* @__PURE__ */ jsxs21(
+                  Box23,
                   {
                     flexDirection: "column",
                     paddingX: 4,
@@ -9202,58 +9372,58 @@ function App() {
                     flexGrow: 1,
                     gap: 1,
                     children: [
-                      /* @__PURE__ */ jsxs20(Box22, { flexGrow: 2, flexDirection: "column", children: [
-                        phase === "preflight" && !user && /* @__PURE__ */ jsx21(Box22, { flexDirection: "column", marginBottom: 1, children: /* @__PURE__ */ jsxs20(Text23, { color: COLORS.strong, bold: true, children: [
-                          /* @__PURE__ */ jsx21(Spinner3, { type: "dots" }),
+                      /* @__PURE__ */ jsxs21(Box23, { flexGrow: 2, flexDirection: "column", children: [
+                        phase === "preflight" && !user && /* @__PURE__ */ jsx22(Box23, { flexDirection: "column", marginBottom: 1, children: /* @__PURE__ */ jsxs21(Text24, { color: COLORS.strong, bold: true, children: [
+                          /* @__PURE__ */ jsx22(Spinner3, { type: "dots" }),
                           " Signing in to Algolia"
                         ] }) }),
-                        phase === "preflight" && user && /* @__PURE__ */ jsx21(Box22, { flexDirection: "column", marginBottom: 1, children: /* @__PURE__ */ jsxs20(Text23, { color: COLORS.strong, bold: true, children: [
-                          /* @__PURE__ */ jsx21(Spinner3, { type: "dots" }),
+                        phase === "preflight" && user && /* @__PURE__ */ jsx22(Box23, { flexDirection: "column", marginBottom: 1, children: /* @__PURE__ */ jsxs21(Text24, { color: COLORS.strong, bold: true, children: [
+                          /* @__PURE__ */ jsx22(Spinner3, { type: "dots" }),
                           " Getting things ready"
                         ] }) }),
-                        phase === "authenticating" && /* @__PURE__ */ jsxs20(Box22, { flexDirection: "column", marginBottom: 1, children: [
-                          /* @__PURE__ */ jsxs20(Text23, { color: COLORS.strong, bold: true, children: [
-                            /* @__PURE__ */ jsx21(Spinner3, { type: "dots" }),
+                        phase === "authenticating" && /* @__PURE__ */ jsxs21(Box23, { flexDirection: "column", marginBottom: 1, children: [
+                          /* @__PURE__ */ jsxs21(Text24, { color: COLORS.strong, bold: true, children: [
+                            /* @__PURE__ */ jsx22(Spinner3, { type: "dots" }),
                             " Signing in to Algolia"
                           ] }),
-                          /* @__PURE__ */ jsx21(Text23, { color: COLORS.muted, children: "A browser window will open \u2014 complete sign-in there." })
+                          /* @__PURE__ */ jsx22(Text24, { color: COLORS.muted, children: "A browser window will open \u2014 complete sign-in there." })
                         ] }),
-                        settingUpAppId && /* @__PURE__ */ jsx21(Box22, { flexDirection: "column", marginBottom: 1, children: /* @__PURE__ */ jsxs20(Text23, { color: COLORS.strong, bold: true, children: [
-                          /* @__PURE__ */ jsx21(Spinner3, { type: "dots" }),
+                        settingUpAppId && /* @__PURE__ */ jsx22(Box23, { flexDirection: "column", marginBottom: 1, children: /* @__PURE__ */ jsxs21(Text24, { color: COLORS.strong, bold: true, children: [
+                          /* @__PURE__ */ jsx22(Spinner3, { type: "dots" }),
                           " Setting up Wizard using app",
                           " ",
                           settingUpAppId
                         ] }) }),
-                        phase === "running" && !settingUpAppId && loadingMessage && /* @__PURE__ */ jsx21(Box22, { flexDirection: "column", marginBottom: 1, children: /* @__PURE__ */ jsxs20(Text23, { color: COLORS.strong, bold: true, children: [
-                          /* @__PURE__ */ jsx21(Spinner3, { type: "dots" }),
+                        phase === "running" && !settingUpAppId && loadingMessage && /* @__PURE__ */ jsx22(Box23, { flexDirection: "column", marginBottom: 1, children: /* @__PURE__ */ jsxs21(Text24, { color: COLORS.strong, bold: true, children: [
+                          /* @__PURE__ */ jsx22(Spinner3, { type: "dots" }),
                           " ",
                           loadingMessage
                         ] }) }),
-                        /* @__PURE__ */ jsx21(CliOutput, {}),
-                        showTips && /* @__PURE__ */ jsx21(
+                        /* @__PURE__ */ jsx22(CliOutput, {}),
+                        showTips && /* @__PURE__ */ jsx22(
                           Tips,
                           {
                             onRevealStateChange: setTipState,
                             onComplete: () => setTipsComplete(true)
                           }
                         ),
-                        showNoticesInMain && showNotices && /* @__PURE__ */ jsx21(Notices, { border: false }),
-                        /* @__PURE__ */ jsx21(Review, {}),
-                        !showTips && /* @__PURE__ */ jsx21(PromptInput, {}),
-                        phase === "error" && error && /* @__PURE__ */ jsx21(Box22, { marginTop: 1, children: /* @__PURE__ */ jsxs20(Text23, { color: COLORS.status.error, children: [
+                        showNoticesInMain && showNotices && /* @__PURE__ */ jsx22(Notices, { border: false }),
+                        /* @__PURE__ */ jsx22(Review, {}),
+                        !showTips && /* @__PURE__ */ jsx22(PromptInput, {}),
+                        phase === "error" && error && /* @__PURE__ */ jsx22(Box23, { marginTop: 1, children: /* @__PURE__ */ jsxs21(Text24, { color: COLORS.status.error, children: [
                           "\u2716 ",
                           error
                         ] }) })
                       ] }),
-                      !showNoticesInMain && showNotices && /* @__PURE__ */ jsx21(Notices, {})
+                      !showNoticesInMain && showNotices && /* @__PURE__ */ jsx22(Notices, {})
                     ]
                   }
                 ),
-                showSidebar ? /* @__PURE__ */ jsx21(Sidebar, {}) : /* @__PURE__ */ jsx21(Ribbon, {})
+                showSidebar ? /* @__PURE__ */ jsx22(Sidebar, { inLogs: showLogs }) : /* @__PURE__ */ jsx22(Ribbon, {})
               ]
             }
           ),
-          phase === "idle" && (homeScreen === "learnMore" ? /* @__PURE__ */ jsx21(LearnMore, {}) : /* @__PURE__ */ jsx21(Welcome, {}))
+          phase === "idle" && (homeScreen === "learnMore" ? /* @__PURE__ */ jsx22(LearnMore, {}) : /* @__PURE__ */ jsx22(Welcome, {}))
         ]
       }
     )
@@ -9492,7 +9662,7 @@ async function resetProjectState() {
 // package.json with { type: 'json' }
 var package_default2 = {
   name: "@algolia/wizard",
-  version: "0.86.0",
+  version: "0.87.0",
   description: "Magically implement Algolia functionality in your codebase",
   type: "module",
   engines: {
@@ -9598,7 +9768,7 @@ async function checkVersion() {
 }
 
 // src/main.tsx
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 var FAILURE_EXIT_CODE = 1;
 async function exitProcessWithError(store, instance, message) {
   store.setError(message);
@@ -9661,7 +9831,7 @@ ${formatStepList(workflow)}`);
 async function run(opts) {
   const { workflow, skipResumePrompt } = opts;
   const store = useWizard.getState();
-  const instance = render(/* @__PURE__ */ jsx22(App, {}), { incrementalRendering: true });
+  const instance = render(/* @__PURE__ */ jsx23(App, {}), { incrementalRendering: true });
   await store.waitForStart();
   store.syncSteps(
     workflow.steps.map((s) => ({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@algolia/wizard",
-  "version": "0.86.0",
+  "version": "0.87.0",
   "description": "Magically implement Algolia functionality in your codebase",
   "type": "module",
   "engines": {