@algolia/wizard 0.8.0-rc.58.44 → 0.8.0-rc.58.45

package/dist/main.js

@@ -4,7 +4,7 @@
 import { render } from "ink";
 
 // src/ui/App.tsx
-import { Box as Box13, Text as Text13, useApp, useInput as useInput6, useWindowSize as useWindowSize7 } from "ink";
+import { Box as Box14, Text as Text14, useApp, useInput as useInput6, useWindowSize as useWindowSize7 } from "ink";
 
 // src/core/store.ts
 import { create } from "zustand";
@@ -497,9 +497,9 @@ function Notices() {
 }
 
 // src/ui/PromptInput.tsx
-import { Box as Box5, Text as Text5, useInput as useInput2 } from "ink";
+import { Box as Box6, Text as Text6, useInput as useInput2 } from "ink";
 import TextInput from "ink-text-input";
-import { useState as useState4 } from "react";
+import { useState as useState5 } from "react";
 
 // src/ui/NextAction.tsx
 import { Box as Box3, Text as Text3 } from "ink";
@@ -525,14 +525,13 @@ function NextAction({
 }
 
 // src/ui/SelectPrompt.tsx
-import { Box as Box4, Text as Text4, measureElement as measureElement2, useInput, useWindowSize as useWindowSize3 } from "ink";
-import { useLayoutEffect, useRef as useRef2, useState as useState3 } from "react";
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-var CANCEL = "cancel";
-var ARROW_WIDTH = 4;
-var COLUMN_GAP = 2;
-var BAR_PADDING = 2;
-var ROW_HEIGHT = 3;
+import { Box as Box5, Text as Text5, useInput, useWindowSize as useWindowSize4 } from "ink";
+import { useLayoutEffect as useLayoutEffect2, useRef as useRef3, useState as useState4 } from "react";
+
+// src/ui/ScrollView.tsx
+import { Box as Box4, Text as Text4, measureElement as measureElement2, useWindowSize as useWindowSize3 } from "ink";
+import { useCallback, useLayoutEffect, useRef as useRef2, useState as useState3 } from "react";
+import { jsxs as jsxs3 } from "react/jsx-runtime";
 var INDICATOR_ROWS = 2;
 function fittedWidth(node, columns) {
   let left = 0;
@@ -541,6 +540,89 @@ function fittedWidth(node, columns) {
   }
   return Math.max(Math.min(measureElement2(node).width, columns - left), 0);
 }
+function useScrollWindow({
+  itemCount,
+  rowHeight = 1,
+  followBottom = false
+}) {
+  const viewportRef = useRef2(null);
+  const { columns } = useWindowSize3();
+  const [size, setSize] = useState3(
+    null
+  );
+  useLayoutEffect(() => {
+    if (!viewportRef.current) return;
+    const width = fittedWidth(viewportRef.current, columns);
+    const { height } = measureElement2(viewportRef.current);
+    setSize(
+      (prev) => prev?.width === width && prev.height === height ? prev : { width, height }
+    );
+  });
+  const capacity = size === null || itemCount * rowHeight <= size.height ? itemCount : Math.max(Math.floor((size.height - INDICATOR_ROWS) / rowHeight), 1);
+  const maxOffset = Math.max(itemCount - capacity, 0);
+  const [offset, setOffset] = useState3(0);
+  const prevMaxOffsetRef = useRef2(0);
+  useLayoutEffect(() => {
+    const wasAtBottom = offset >= prevMaxOffsetRef.current;
+    prevMaxOffsetRef.current = maxOffset;
+    setOffset(
+      (o) => followBottom && wasAtBottom ? maxOffset : Math.min(o, maxOffset)
+    );
+  }, [maxOffset, followBottom]);
+  const scrollBy = useCallback(
+    (delta) => {
+      setOffset((o) => Math.min(Math.max(o + delta, 0), maxOffset));
+    },
+    [maxOffset]
+  );
+  const revealIndex = useCallback(
+    (index) => {
+      setOffset((o) => {
+        if (index < o) return index;
+        if (index >= o + capacity) {
+          return Math.min(index - capacity + 1, maxOffset);
+        }
+        return o;
+      });
+    },
+    [capacity, maxOffset]
+  );
+  const visibleCount = Math.min(capacity, Math.max(itemCount - offset, 0));
+  return {
+    viewportRef,
+    width: size?.width ?? columns,
+    offset,
+    capacity,
+    maxOffset,
+    hiddenAbove: Math.min(offset, itemCount),
+    hiddenBelow: Math.max(itemCount - offset - visibleCount, 0),
+    scrollBy,
+    revealIndex
+  };
+}
+function ScrollView({ scroll, children }) {
+  return /* @__PURE__ */ jsxs3(Box4, { ref: scroll.viewportRef, flexDirection: "column", flexGrow: 1, children: [
+    scroll.hiddenAbove > 0 && /* @__PURE__ */ jsxs3(Text4, { color: COLORS.dim, children: [
+      "\u2191 ",
+      scroll.hiddenAbove,
+      " more"
+    ] }),
+    children,
+    scroll.hiddenBelow > 0 && /* @__PURE__ */ jsxs3(Text4, { color: COLORS.dim, children: [
+      "\u2193 ",
+      scroll.hiddenBelow,
+      " more"
+    ] })
+  ] });
+}
+
+// src/ui/SelectPrompt.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var CANCEL = "cancel";
+var ARROW_WIDTH = 4;
+var COLUMN_GAP = 2;
+var BAR_PADDING = 2;
+var ROW_HEIGHT = 3;
 function SelectPrompt({
   options,
   onSelect,
@@ -554,10 +636,10 @@ function SelectPrompt({
   secondary,
   defaultSelectedIndex = 0
 }) {
-  const [index, setIndex] = useState3(
+  const [index, setIndex] = useState4(
     () => defaultSelectedIndex > 0 && defaultSelectedIndex < options.length ? defaultSelectedIndex : 0
   );
-  const [checked, setChecked] = useState3(() => /* @__PURE__ */ new Set());
+  const [checked, setChecked] = useState4(() => /* @__PURE__ */ new Set());
   const hasCancel = Boolean(multi || cancelable);
   const rows = hasCancel ? [...options, "Cancel"] : options;
   const cancelIndex = hasCancel ? options.length : -1;
@@ -565,19 +647,14 @@ function SelectPrompt({
   if (rows.length > 1) hints.push({ key: "[\u2191] [\u2193]", label: "move" });
   if (multi) hints.push({ key: "[space]", label: "select" });
   hints.push({ key: "[enter]", label: "confirm" });
-  const containerRef = useRef2(null);
-  const viewportRef = useRef2(null);
-  const { columns, rows: windowRows } = useWindowSize3();
-  const [width, setWidth] = useState3(columns);
-  const [viewportHeight, setViewportHeight] = useState3(null);
-  useLayoutEffect(() => {
-    if (containerRef.current) {
-      setWidth(fittedWidth(containerRef.current, columns));
-    }
-    if (viewportRef.current) {
-      setViewportHeight(measureElement2(viewportRef.current).height);
-    }
-  }, [columns, windowRows, error, question, helpText, messages, table]);
+  const containerRef = useRef3(null);
+  const { columns } = useWindowSize4();
+  const [width, setWidth] = useState4(columns);
+  useLayoutEffect2(() => {
+    if (!containerRef.current) return;
+    const measured = fittedWidth(containerRef.current, columns);
+    setWidth((prev) => prev === measured ? prev : measured);
+  });
   const inner = Math.max(width - BAR_PADDING, 0);
   const labelWidth = Math.min(
     ARROW_WIDTH + (multi ? 2 : 0) + Math.max(0, ...rows.map((opt) => opt.length)) + COLUMN_GAP,
@@ -593,22 +670,15 @@ function SelectPrompt({
   const barWidth = Math.min(labelWidth + badgeWidth + BAR_PADDING, width);
   const barLabelWidth = Math.max(barWidth - BAR_PADDING - badgeWidth, 0);
   const textWidth = inner - labelWidth;
-  const capacity = viewportHeight === null || rows.length * ROW_HEIGHT <= viewportHeight ? rows.length : Math.max(Math.floor((viewportHeight - INDICATOR_ROWS) / ROW_HEIGHT), 1);
-  const maxOffset = Math.max(rows.length - capacity, 0);
-  const [offset, setOffset] = useState3(0);
-  useLayoutEffect(() => {
-    setOffset((o) => {
-      const clamped = Math.min(o, maxOffset);
-      if (index < clamped) return index;
-      if (index >= clamped + capacity) {
-        return Math.min(index - capacity + 1, maxOffset);
-      }
-      return clamped;
-    });
-  }, [index, capacity, maxOffset]);
-  const visible = rows.slice(offset, offset + capacity);
-  const hiddenAbove = offset;
-  const hiddenBelow = rows.length - offset - visible.length;
+  const scroll = useScrollWindow({
+    itemCount: rows.length,
+    rowHeight: ROW_HEIGHT
+  });
+  const { revealIndex } = scroll;
+  useLayoutEffect2(() => {
+    revealIndex(index);
+  }, [index, revealIndex]);
+  const visible = rows.slice(scroll.offset, scroll.offset + scroll.capacity);
   useInput((input, key) => {
     if (rows.length === 0) return;
     if (key.upArrow || input === "k") {
@@ -632,68 +702,56 @@ function SelectPrompt({
       }
     }
   });
-  return /* @__PURE__ */ jsx4(Box4, { ref: containerRef, flexGrow: 1, children: /* @__PURE__ */ jsxs3(Box4, { flexDirection: "column", gap: 1, width, children: [
-    /* @__PURE__ */ jsxs3(Box4, { flexDirection: "column", gap: 1, flexShrink: 0, children: [
-      error && /* @__PURE__ */ jsx4(Text4, { color: COLORS.danger, children: error }),
-      messages?.map((m, i) => /* @__PURE__ */ jsx4(Text4, { color: COLORS.muted, children: m }, `msg-${i}`)),
+  return /* @__PURE__ */ jsx4(Box5, { ref: containerRef, flexGrow: 1, children: /* @__PURE__ */ jsxs4(Box5, { flexDirection: "column", gap: 1, width, children: [
+    /* @__PURE__ */ jsxs4(Box5, { flexDirection: "column", gap: 1, flexShrink: 0, children: [
+      error && /* @__PURE__ */ jsx4(Text5, { color: COLORS.danger, children: error }),
+      messages?.map((m, i) => /* @__PURE__ */ jsx4(Text5, { color: COLORS.muted, children: m }, `msg-${i}`)),
       table && /* @__PURE__ */ jsx4(Table, { columns: table.columns, rows: table.rows }),
-      /* @__PURE__ */ jsxs3(Box4, { flexDirection: "column", children: [
-        question && /* @__PURE__ */ jsx4(Text4, { color: COLORS.muted, children: question }),
-        helpText && /* @__PURE__ */ jsx4(Text4, { color: COLORS.dim, children: helpText })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs3(Box4, { ref: viewportRef, flexDirection: "column", flexGrow: 1, children: [
-      hiddenAbove > 0 && /* @__PURE__ */ jsxs3(Text4, { color: COLORS.dim, children: [
-        "\u2191 ",
-        hiddenAbove,
-        " more"
-      ] }),
-      visible.map((option, visibleIndex) => {
-        const i = offset + visibleIndex;
-        const highlighted = i === index;
-        const isCancel = i === cancelIndex;
-        const bullet = multi && !isCancel ? checked.has(i) ? "\u25CF " : "\u25CB " : "";
-        const sec = isCancel ? void 0 : secondary?.[i];
-        const labelColor = highlighted ? COLORS.highlight.fg : void 0;
-        const label = /* @__PURE__ */ jsxs3(Text4, { color: labelColor, wrap: "truncate", children: [
-          highlighted ? "\u276F   " : "    ",
-          bullet,
-          option
-        ] });
-        const isText = sec?.kind === "text";
-        return /* @__PURE__ */ jsxs3(
-          Box4,
-          {
-            width: isText ? "100%" : barWidth,
-            paddingX: 1,
-            paddingY: 1,
-            backgroundColor: highlighted ? COLORS.highlight.bg : void 0,
-            children: [
-              /* @__PURE__ */ jsx4(Box4, { width: isText ? labelWidth : barLabelWidth, children: label }),
-              isText && textWidth > 0 && /* @__PURE__ */ jsx4(Box4, { width: textWidth, children: /* @__PURE__ */ jsx4(
-                Text4,
-                {
-                  wrap: "truncate",
-                  color: highlighted ? COLORS.primary : COLORS.muted,
-                  children: sec.value
-                }
-              ) }),
-              sec?.kind === "badge" && /* @__PURE__ */ jsx4(Box4, { width: badgeWidth, justifyContent: "flex-end", children: /* @__PURE__ */ jsx4(Text4, { color: COLORS.badge, wrap: "truncate", children: sec.value }) })
-            ]
-          },
-          `row-${i}`
-        );
-      }),
-      hiddenBelow > 0 && /* @__PURE__ */ jsxs3(Text4, { color: COLORS.dim, children: [
-        "\u2193 ",
-        hiddenBelow,
-        " more"
+      /* @__PURE__ */ jsxs4(Box5, { flexDirection: "column", children: [
+        question && /* @__PURE__ */ jsx4(Text5, { color: COLORS.muted, children: question }),
+        helpText && /* @__PURE__ */ jsx4(Text5, { color: COLORS.dim, children: helpText })
       ] })
     ] }),
-    /* @__PURE__ */ jsx4(Box4, { flexShrink: 0, children: /* @__PURE__ */ jsx4(Text4, { children: hints.map(({ key, label }, i) => /* @__PURE__ */ jsxs3(Text4, { children: [
+    /* @__PURE__ */ jsx4(ScrollView, { scroll, children: visible.map((option, visibleIndex) => {
+      const i = scroll.offset + visibleIndex;
+      const highlighted = i === index;
+      const isCancel = i === cancelIndex;
+      const bullet = multi && !isCancel ? checked.has(i) ? "\u25CF " : "\u25CB " : "";
+      const sec = isCancel ? void 0 : secondary?.[i];
+      const labelColor = highlighted ? COLORS.highlight.fg : void 0;
+      const label = /* @__PURE__ */ jsxs4(Text5, { color: labelColor, wrap: "truncate", children: [
+        highlighted ? "\u276F   " : "    ",
+        bullet,
+        option
+      ] });
+      const isText = sec?.kind === "text";
+      return /* @__PURE__ */ jsxs4(
+        Box5,
+        {
+          width: isText ? "100%" : barWidth,
+          paddingX: 1,
+          paddingY: 1,
+          backgroundColor: highlighted ? COLORS.highlight.bg : void 0,
+          children: [
+            /* @__PURE__ */ jsx4(Box5, { width: isText ? labelWidth : barLabelWidth, children: label }),
+            isText && textWidth > 0 && /* @__PURE__ */ jsx4(Box5, { width: textWidth, children: /* @__PURE__ */ jsx4(
+              Text5,
+              {
+                wrap: "truncate",
+                color: highlighted ? COLORS.primary : COLORS.muted,
+                children: sec.value
+              }
+            ) }),
+            sec?.kind === "badge" && /* @__PURE__ */ jsx4(Box5, { width: badgeWidth, justifyContent: "flex-end", children: /* @__PURE__ */ jsx4(Text5, { color: COLORS.badge, wrap: "truncate", children: sec.value }) })
+          ]
+        },
+        `row-${i}`
+      );
+    }) }),
+    /* @__PURE__ */ jsx4(Box5, { flexShrink: 0, children: /* @__PURE__ */ jsx4(Text5, { children: hints.map(({ key, label }, i) => /* @__PURE__ */ jsxs4(Text5, { children: [
       i > 0 ? "   " : "",
-      /* @__PURE__ */ jsx4(Text4, { color: COLORS.primary, children: key }),
-      /* @__PURE__ */ jsxs3(Text4, { color: COLORS.dim, children: [
+      /* @__PURE__ */ jsx4(Text5, { color: COLORS.primary, children: key }),
+      /* @__PURE__ */ jsxs4(Text5, { color: COLORS.dim, children: [
         " ",
         label
       ] })
@@ -702,7 +760,7 @@ function SelectPrompt({
 }
 
 // src/ui/PromptInput.tsx
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var ACCEPT_REJECT_OPTIONS = ["Accept", "Reject"];
 function EnterToContinuePrompt({
   question,
@@ -713,10 +771,10 @@ function EnterToContinuePrompt({
     if (key.return) onDecide(true);
     else if (key.escape) onDecide(false);
   });
-  return /* @__PURE__ */ jsxs4(Box5, { flexDirection: "column", gap: 1, children: [
-    messages?.map((m, i) => /* @__PURE__ */ jsx5(Text5, { color: COLORS.muted, children: m }, `msg-${i}`)),
-    question && /* @__PURE__ */ jsx5(Text5, { color: COLORS.primary, children: question }),
-    /* @__PURE__ */ jsxs4(Box5, { gap: 1, flexDirection: "column", children: [
+  return /* @__PURE__ */ jsxs5(Box6, { flexDirection: "column", gap: 1, children: [
+    messages?.map((m, i) => /* @__PURE__ */ jsx5(Text6, { color: COLORS.muted, children: m }, `msg-${i}`)),
+    question && /* @__PURE__ */ jsx5(Text6, { color: COLORS.primary, children: question }),
+    /* @__PURE__ */ jsxs5(Box6, { gap: 1, flexDirection: "column", children: [
       /* @__PURE__ */ jsx5(NextAction, { action: "continue", keyHint: "enter" }),
       /* @__PURE__ */ jsx5(NextAction, { action: "decline", keyHint: "esc", hierarchy: "secondary" })
     ] })
@@ -724,13 +782,13 @@ function EnterToContinuePrompt({
 }
 function PromptInput() {
   const { phase, inputReq, submitInput } = useWizard();
-  const [draft, setDraft] = useState4("");
+  const [draft, setDraft] = useState5("");
   if (phase === "done" || phase === "error") {
-    return /* @__PURE__ */ jsx5(Box5, { marginTop: 1, children: /* @__PURE__ */ jsx5(Text5, { color: "gray", dimColor: true, children: "Press Enter or Esc to exit" }) });
+    return /* @__PURE__ */ jsx5(Box6, { marginTop: 1, children: /* @__PURE__ */ jsx5(Text6, { color: "gray", dimColor: true, children: "Press Enter or Esc to exit" }) });
   }
   if (phase !== "awaitingInput" || !inputReq) return null;
   if (inputReq.promptType === "multipleChoice") {
-    return /* @__PURE__ */ jsx5(Box5, { flexGrow: 1, children: /* @__PURE__ */ jsx5(
+    return /* @__PURE__ */ jsx5(Box6, { flexGrow: 1, children: /* @__PURE__ */ jsx5(
       SelectPrompt,
       {
         question: inputReq.prompt,
@@ -747,7 +805,7 @@ function PromptInput() {
     ) });
   }
   if (inputReq.promptType === "multiSelect") {
-    return /* @__PURE__ */ jsx5(Box5, { flexGrow: 1, children: /* @__PURE__ */ jsx5(
+    return /* @__PURE__ */ jsx5(Box6, { flexGrow: 1, children: /* @__PURE__ */ jsx5(
       SelectPrompt,
       {
         multi: true,
@@ -762,7 +820,7 @@ function PromptInput() {
     ) });
   }
   if (inputReq.promptType === "notice") {
-    return /* @__PURE__ */ jsx5(Box5, { flexGrow: 1, children: /* @__PURE__ */ jsx5(
+    return /* @__PURE__ */ jsx5(Box6, { flexGrow: 1, children: /* @__PURE__ */ jsx5(
       SelectPrompt,
       {
         question: inputReq.prompt,
@@ -784,7 +842,7 @@ function PromptInput() {
   }
   if (inputReq.promptType === "acceptReject") {
     const labels = inputReq.options?.length ? inputReq.options : ACCEPT_REJECT_OPTIONS;
-    return /* @__PURE__ */ jsx5(Box5, { flexGrow: 1, children: /* @__PURE__ */ jsx5(
+    return /* @__PURE__ */ jsx5(Box6, { flexGrow: 1, children: /* @__PURE__ */ jsx5(
       SelectPrompt,
       {
         question: inputReq.prompt,
@@ -795,11 +853,11 @@ function PromptInput() {
       }
     ) });
   }
-  return /* @__PURE__ */ jsxs4(Box5, { flexDirection: "column", children: [
-    inputReq.error && /* @__PURE__ */ jsx5(Text5, { color: COLORS.danger, children: inputReq.error }),
-    inputReq.messages?.map((m, i) => /* @__PURE__ */ jsx5(Text5, { color: COLORS.muted, children: m }, `msg-${i}`)),
-    /* @__PURE__ */ jsxs4(Box5, { children: [
-      /* @__PURE__ */ jsxs4(Text5, { color: COLORS.primary, children: [
+  return /* @__PURE__ */ jsxs5(Box6, { flexDirection: "column", children: [
+    inputReq.error && /* @__PURE__ */ jsx5(Text6, { color: COLORS.danger, children: inputReq.error }),
+    inputReq.messages?.map((m, i) => /* @__PURE__ */ jsx5(Text6, { color: COLORS.muted, children: m }, `msg-${i}`)),
+    /* @__PURE__ */ jsxs5(Box6, { children: [
+      /* @__PURE__ */ jsxs5(Text6, { color: COLORS.primary, children: [
         inputReq.prompt,
         " "
       ] }),
@@ -821,7 +879,7 @@ function PromptInput() {
 // src/ui/Welcome.tsx
 import { dirname as dirname2, join as join3 } from "node:path";
 import { fileURLToPath } from "node:url";
-import { Box as Box6, Spacer, Text as Text6, useInput as useInput3, useWindowSize as useWindowSize4 } from "ink";
+import { Box as Box7, Spacer, Text as Text7, useInput as useInput3, useWindowSize as useWindowSize5 } from "ink";
 
 // src/ui/copy/welcome.ts
 var sidebarItems = [
@@ -849,27 +907,27 @@ var sidebarItems = [
 
 // src/ui/Welcome.tsx
 import Image, { InkPictureProvider } from "ink-picture";
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var IMAGE_PATH = join3(dirname2(fileURLToPath(import.meta.url)), "algolia.png");
 function SidebarItem({
   title,
   description
 }) {
-  return /* @__PURE__ */ jsxs5(Box6, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsxs5(Box6, { gap: 1, children: [
-      /* @__PURE__ */ jsx6(Text6, { color: COLORS.success, children: "\u2192" }),
-      /* @__PURE__ */ jsx6(Text6, { color: COLORS.strong, bold: true, children: title })
+  return /* @__PURE__ */ jsxs6(Box7, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsxs6(Box7, { gap: 1, children: [
+      /* @__PURE__ */ jsx6(Text7, { color: COLORS.success, children: "\u2192" }),
+      /* @__PURE__ */ jsx6(Text7, { color: COLORS.strong, bold: true, children: title })
     ] }),
-    /* @__PURE__ */ jsxs5(Box6, { flexDirection: "row", gap: 2, children: [
+    /* @__PURE__ */ jsxs6(Box7, { flexDirection: "row", gap: 2, children: [
       /* @__PURE__ */ jsx6(Spacer, {}),
-      /* @__PURE__ */ jsx6(Text6, { color: COLORS.muted, children: description })
+      /* @__PURE__ */ jsx6(Text7, { color: COLORS.muted, children: description })
     ] })
   ] });
 }
 function Welcome() {
   const confirmStart = useWizard((s) => s.confirmStart);
   const openLearnMore = useWizard((s) => s.openLearnMore);
-  const { rows } = useWindowSize4();
+  const { rows } = useWindowSize5();
   useInput3((input, key) => {
     if (key.return) confirmStart();
     else if (input === "i") openLearnMore();
@@ -888,15 +946,15 @@ function Welcome() {
   if (rows < 30) {
     layout = scales["small"];
   }
-  return /* @__PURE__ */ jsxs5(Box6, { flexDirection: "row", justifyContent: "space-between", width: "100%", children: [
+  return /* @__PURE__ */ jsxs6(Box7, { flexDirection: "row", justifyContent: "space-between", width: "100%", children: [
     /* @__PURE__ */ jsx6(
-      Box6,
+      Box7,
       {
         paddingY: layout.main.padding.y,
         paddingX: layout.main.padding.x,
         flexDirection: "column",
         justifyContent: "center",
-        children: /* @__PURE__ */ jsxs5(Box6, { flexDirection: "column", gap: 2, children: [
+        children: /* @__PURE__ */ jsxs6(Box7, { flexDirection: "column", gap: 2, children: [
           /* @__PURE__ */ jsx6(InkPictureProvider, { children: /* @__PURE__ */ jsx6(
             Image,
             {
@@ -908,16 +966,16 @@ function Welcome() {
               protocol: "halfBlock"
             }
           ) }),
-          /* @__PURE__ */ jsx6(Text6, { color: COLORS.muted, children: "\u2726 From zero \u2192 working search in ~10 minutes" }),
-          /* @__PURE__ */ jsxs5(Box6, { gap: 1, flexDirection: "column", children: [
+          /* @__PURE__ */ jsx6(Text7, { color: COLORS.muted, children: "\u2726 From zero \u2192 working search in ~10 minutes" }),
+          /* @__PURE__ */ jsxs6(Box7, { gap: 1, flexDirection: "column", children: [
             /* @__PURE__ */ jsx6(NextAction, { action: "start wizard", keyHint: "enter" }),
             /* @__PURE__ */ jsx6(NextAction, { action: "learn more", keyHint: "i", hierarchy: "secondary" })
           ] })
         ] })
       }
     ),
-    /* @__PURE__ */ jsxs5(
-      Box6,
+    /* @__PURE__ */ jsxs6(
+      Box7,
       {
         backgroundColor: COLORS.bg.sidebar,
         width: 40,
@@ -927,7 +985,7 @@ function Welcome() {
         flexDirection: "column",
         justifyContent: "center",
         children: [
-          /* @__PURE__ */ jsx6(Text6, { color: COLORS.muted, children: "WHAT THIS WIZARD WILL DO" }),
+          /* @__PURE__ */ jsx6(Text7, { color: COLORS.muted, children: "WHAT THIS WIZARD WILL DO" }),
           sidebarItems.map((i, idx) => /* @__PURE__ */ jsx6(SidebarItem, { title: i.title, description: i.description }, idx))
         ]
       }
@@ -937,7 +995,7 @@ function Welcome() {
 
 // src/ui/LearnMore.tsx
 import { Fragment as Fragment2 } from "react";
-import { Box as Box7, Text as Text7, useInput as useInput4, useWindowSize as useWindowSize5 } from "ink";
+import { Box as Box8, Text as Text8, useInput as useInput4, useWindowSize as useWindowSize6 } from "ink";
 
 // src/ui/copy/learn-more.ts
 var accessIntro = "Everything runs locally on your machine. Nothing is written or sent without an explicit yes from you.";
@@ -974,7 +1032,7 @@ var policyLinks = [
 ];
 
 // src/ui/LearnMore.tsx
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 var TAG_COLORS = {
   READ: COLORS.success,
   WRITE: COLORS.badge,
@@ -990,25 +1048,25 @@ function NeverLine({
 }) {
   const used = segments.reduce((n, s) => n + s.text.length, 0);
   const rightPad = Math.max(0, width - 2 - NEVER_BOX_PAD_X - used);
-  return /* @__PURE__ */ jsxs6(Text7, { children: [
-    /* @__PURE__ */ jsx7(Text7, { color: COLORS.danger, children: "\u2502" }),
+  return /* @__PURE__ */ jsxs7(Text8, { children: [
+    /* @__PURE__ */ jsx7(Text8, { color: COLORS.danger, children: "\u2502" }),
     " ".repeat(NEVER_BOX_PAD_X),
-    segments.map((s, i) => /* @__PURE__ */ jsx7(Text7, { color: s.color, bold: s.bold, children: s.text }, i)),
+    segments.map((s, i) => /* @__PURE__ */ jsx7(Text8, { color: s.color, bold: s.bold, children: s.text }, i)),
     " ".repeat(rightPad),
-    /* @__PURE__ */ jsx7(Text7, { color: COLORS.danger, children: "\u2502" })
+    /* @__PURE__ */ jsx7(Text8, { color: COLORS.danger, children: "\u2502" })
   ] });
 }
 function LearnMore() {
   const confirmStart = useWizard((s) => s.confirmStart);
   const backToHome = useWizard((s) => s.backToHome);
-  const { columns } = useWindowSize5();
+  const { columns } = useWindowSize6();
   const dividerWidth = Math.max(0, columns - PADDING_X * 2);
   useInput4((_input, key) => {
     if (key.escape) backToHome();
     else if (key.return) confirmStart();
   });
-  return /* @__PURE__ */ jsxs6(
-    Box7,
+  return /* @__PURE__ */ jsxs7(
+    Box8,
     {
       flexDirection: "column",
       paddingX: PADDING_X,
@@ -1016,20 +1074,20 @@ function LearnMore() {
       width: "100%",
       gap: 1,
       children: [
-        /* @__PURE__ */ jsx7(Text7, { color: COLORS.strong, bold: true, children: "What algolia wizard accesses" }),
-        /* @__PURE__ */ jsx7(Text7, { color: COLORS.muted, children: accessIntro }),
-        /* @__PURE__ */ jsx7(Box7, { flexDirection: "column", children: accessItems.map((item) => /* @__PURE__ */ jsxs6(Box7, { flexDirection: "column", marginTop: 1, children: [
-          /* @__PURE__ */ jsx7(Text7, { color: COLORS.border, children: "\u2500".repeat(dividerWidth) }),
-          /* @__PURE__ */ jsxs6(Box7, { flexDirection: "row", gap: 1, marginTop: 1, children: [
-            /* @__PURE__ */ jsx7(Box7, { width: TAG_COLUMN_WIDTH, flexShrink: 0, children: /* @__PURE__ */ jsx7(Text7, { color: TAG_COLORS[item.tag], bold: true, children: `[${item.tag}]` }) }),
-            /* @__PURE__ */ jsx7(Box7, { flexDirection: "column", children: /* @__PURE__ */ jsxs6(Text7, { children: [
-              /* @__PURE__ */ jsx7(Text7, { color: COLORS.strong, bold: true, children: item.title }),
-              /* @__PURE__ */ jsx7(Text7, { color: COLORS.muted, children: ` \u2014 ${item.description}` })
+        /* @__PURE__ */ jsx7(Text8, { color: COLORS.strong, bold: true, children: "What algolia wizard accesses" }),
+        /* @__PURE__ */ jsx7(Text8, { color: COLORS.muted, children: accessIntro }),
+        /* @__PURE__ */ jsx7(Box8, { flexDirection: "column", children: accessItems.map((item) => /* @__PURE__ */ jsxs7(Box8, { flexDirection: "column", marginTop: 1, children: [
+          /* @__PURE__ */ jsx7(Text8, { color: COLORS.border, children: "\u2500".repeat(dividerWidth) }),
+          /* @__PURE__ */ jsxs7(Box8, { flexDirection: "row", gap: 1, marginTop: 1, children: [
+            /* @__PURE__ */ jsx7(Box8, { width: TAG_COLUMN_WIDTH, flexShrink: 0, children: /* @__PURE__ */ jsx7(Text8, { color: TAG_COLORS[item.tag], bold: true, children: `[${item.tag}]` }) }),
+            /* @__PURE__ */ jsx7(Box8, { flexDirection: "column", children: /* @__PURE__ */ jsxs7(Text8, { children: [
+              /* @__PURE__ */ jsx7(Text8, { color: COLORS.strong, bold: true, children: item.title }),
+              /* @__PURE__ */ jsx7(Text8, { color: COLORS.muted, children: ` \u2014 ${item.description}` })
             ] }) })
           ] })
         ] }, item.tag)) }),
-        /* @__PURE__ */ jsxs6(Box7, { marginTop: 1, flexDirection: "column", children: [
-          /* @__PURE__ */ jsx7(Text7, { color: COLORS.danger, children: `\u256D${"\u2500".repeat(Math.max(0, dividerWidth - 2))}\u256E` }),
+        /* @__PURE__ */ jsxs7(Box8, { marginTop: 1, flexDirection: "column", children: [
+          /* @__PURE__ */ jsx7(Text8, { color: COLORS.danger, children: `\u256D${"\u2500".repeat(Math.max(0, dividerWidth - 2))}\u256E` }),
           /* @__PURE__ */ jsx7(NeverLine, { width: dividerWidth }),
           /* @__PURE__ */ jsx7(
             NeverLine,
@@ -1038,7 +1096,7 @@ function LearnMore() {
               segments: [{ text: "I NEVER", color: COLORS.danger, bold: true }]
             }
           ),
-          neverItems.map((item) => /* @__PURE__ */ jsxs6(Fragment2, { children: [
+          neverItems.map((item) => /* @__PURE__ */ jsxs7(Fragment2, { children: [
             /* @__PURE__ */ jsx7(NeverLine, { width: dividerWidth }),
             /* @__PURE__ */ jsx7(
               NeverLine,
@@ -1053,23 +1111,23 @@ function LearnMore() {
             )
           ] }, item)),
           /* @__PURE__ */ jsx7(NeverLine, { width: dividerWidth }),
-          /* @__PURE__ */ jsx7(Text7, { color: COLORS.danger, children: `\u2570${"\u2500".repeat(Math.max(0, dividerWidth - 2))}\u256F` })
+          /* @__PURE__ */ jsx7(Text8, { color: COLORS.danger, children: `\u2570${"\u2500".repeat(Math.max(0, dividerWidth - 2))}\u256F` })
         ] }),
-        /* @__PURE__ */ jsx7(Box7, { marginTop: 1, flexDirection: "column", children: policyLinks.map((link) => /* @__PURE__ */ jsxs6(Box7, { flexDirection: "row", gap: 1, children: [
-          /* @__PURE__ */ jsx7(Text7, { color: COLORS.strong, bold: true, children: `${link.label}:` }),
-          /* @__PURE__ */ jsx7(Text7, { color: COLORS.accent, children: link.url })
+        /* @__PURE__ */ jsx7(Box8, { marginTop: 1, flexDirection: "column", children: policyLinks.map((link) => /* @__PURE__ */ jsxs7(Box8, { flexDirection: "row", gap: 1, children: [
+          /* @__PURE__ */ jsx7(Text8, { color: COLORS.strong, bold: true, children: `${link.label}:` }),
+          /* @__PURE__ */ jsx7(Text8, { color: COLORS.accent, children: link.url })
         ] }, link.label)) }),
-        /* @__PURE__ */ jsxs6(Box7, { marginTop: 1, flexDirection: "row", gap: 3, children: [
-          /* @__PURE__ */ jsxs6(Box7, { flexDirection: "row", gap: 1, children: [
-            /* @__PURE__ */ jsx7(Text7, { color: COLORS.muted, children: "[" }),
-            /* @__PURE__ */ jsx7(Text7, { color: COLORS.primary, children: "esc" }),
-            /* @__PURE__ */ jsx7(Text7, { color: COLORS.muted, children: "] back" })
+        /* @__PURE__ */ jsxs7(Box8, { marginTop: 1, flexDirection: "row", gap: 3, children: [
+          /* @__PURE__ */ jsxs7(Box8, { flexDirection: "row", gap: 1, children: [
+            /* @__PURE__ */ jsx7(Text8, { color: COLORS.muted, children: "[" }),
+            /* @__PURE__ */ jsx7(Text8, { color: COLORS.primary, children: "esc" }),
+            /* @__PURE__ */ jsx7(Text8, { color: COLORS.muted, children: "] back" })
           ] }),
-          /* @__PURE__ */ jsxs6(Box7, { flexDirection: "row", gap: 1, children: [
-            /* @__PURE__ */ jsx7(Text7, { color: COLORS.muted, children: "[" }),
-            /* @__PURE__ */ jsx7(Text7, { color: COLORS.primary, children: "enter" }),
-            /* @__PURE__ */ jsx7(Text7, { color: COLORS.muted, children: "]" }),
-            /* @__PURE__ */ jsx7(Text7, { color: COLORS.success, bold: true, children: "start wizard" })
+          /* @__PURE__ */ jsxs7(Box8, { flexDirection: "row", gap: 1, children: [
+            /* @__PURE__ */ jsx7(Text8, { color: COLORS.muted, children: "[" }),
+            /* @__PURE__ */ jsx7(Text8, { color: COLORS.primary, children: "enter" }),
+            /* @__PURE__ */ jsx7(Text8, { color: COLORS.muted, children: "]" }),
+            /* @__PURE__ */ jsx7(Text8, { color: COLORS.success, bold: true, children: "start wizard" })
           ] })
         ] })
       ]
@@ -1078,10 +1136,10 @@ function LearnMore() {
 }
 
 // src/ui/Sidebar.tsx
-import { Box as Box10, Text as Text10 } from "ink";
+import { Box as Box11, Text as Text11 } from "ink";
 
 // src/ui/Steps.tsx
-import { Box as Box8, Text as Text8 } from "ink";
+import { Box as Box9, Text as Text9 } from "ink";
 import Spinner from "ink-spinner";
 
 // src/core/persistence.ts
@@ -1110,11 +1168,11 @@ async function clearWorkflowState(workflowId) {
 }
 
 // src/ui/Steps.tsx
-import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 function Steps() {
   const { steps } = useWizard();
   const visibleSteps = steps.filter(isStepVisible);
-  return /* @__PURE__ */ jsx8(Box8, { flexDirection: "column", gap: 1, children: visibleSteps.map((s) => /* @__PURE__ */ jsx8(Box8, { flexDirection: "column", children: /* @__PURE__ */ jsxs7(Text8, { color: COLORS.status[s.status], children: [
+  return /* @__PURE__ */ jsx8(Box9, { flexDirection: "column", gap: 1, children: visibleSteps.map((s) => /* @__PURE__ */ jsx8(Box9, { flexDirection: "column", children: /* @__PURE__ */ jsxs8(Text9, { color: COLORS.status[s.status], children: [
     s.status === "running" ? /* @__PURE__ */ jsx8(Spinner, { type: "dots" }) : MARKER[s.status],
     " ",
     s.title
@@ -1124,7 +1182,7 @@ function CurrentStep() {
   const { steps } = useWizard();
   const currentStep = steps.filter(isStepVisible).find((s) => s.status === "running");
   if (!currentStep) return null;
-  return /* @__PURE__ */ jsxs7(Text8, { color: COLORS.status.running, children: [
+  return /* @__PURE__ */ jsxs8(Text9, { color: COLORS.status.running, children: [
     /* @__PURE__ */ jsx8(Spinner, { type: "dots" }),
     " ",
     ` ${currentStep.title}`
@@ -1132,19 +1190,19 @@ function CurrentStep() {
 }
 
 // src/ui/Progress.tsx
-import { Box as Box9, Text as Text9 } from "ink";
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Box as Box10, Text as Text10 } from "ink";
+import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
 function Progress() {
   const { steps, currentStepIndex } = useWizard();
   const visibleSteps = steps.filter(isStepVisible);
   if (visibleSteps.length === 0) return null;
   const visibleCountThroughCurrent = steps.slice(0, currentStepIndex + 1).filter(isStepVisible).length;
   const activeStepNumber = Math.max(1, visibleCountThroughCurrent);
-  return /* @__PURE__ */ jsxs8(Box9, { flexDirection: "row", gap: 1, children: [
-    /* @__PURE__ */ jsx9(Text9, { color: COLORS.muted, children: "STEP" }),
-    /* @__PURE__ */ jsx9(Text9, { bold: true, children: activeStepNumber }),
-    /* @__PURE__ */ jsx9(Text9, { bold: true, children: "/" }),
-    /* @__PURE__ */ jsx9(Text9, { bold: true, children: visibleSteps.length })
+  return /* @__PURE__ */ jsxs9(Box10, { flexDirection: "row", gap: 1, children: [
+    /* @__PURE__ */ jsx9(Text10, { color: COLORS.muted, children: "STEP" }),
+    /* @__PURE__ */ jsx9(Text10, { bold: true, children: activeStepNumber }),
+    /* @__PURE__ */ jsx9(Text10, { bold: true, children: "/" }),
+    /* @__PURE__ */ jsx9(Text10, { bold: true, children: visibleSteps.length })
   ] });
 }
 
@@ -1155,10 +1213,10 @@ var sidebarCommands = [
 ];
 
 // src/ui/Sidebar.tsx
-import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
 function Sidebar() {
-  return /* @__PURE__ */ jsxs9(
-    Box10,
+  return /* @__PURE__ */ jsxs10(
+    Box11,
     {
       backgroundColor: "#14171E",
       width: 30,
@@ -1167,16 +1225,16 @@ function Sidebar() {
       flexDirection: "column",
       justifyContent: "space-between",
       children: [
-        /* @__PURE__ */ jsxs9(Box10, { flexDirection: "column", gap: 1, children: [
-          /* @__PURE__ */ jsx10(Text10, { color: COLORS.muted, children: "PROGRESS" }),
+        /* @__PURE__ */ jsxs10(Box11, { flexDirection: "column", gap: 1, children: [
+          /* @__PURE__ */ jsx10(Text11, { color: COLORS.muted, children: "PROGRESS" }),
           /* @__PURE__ */ jsx10(Steps, {})
         ] }),
-        /* @__PURE__ */ jsxs9(Box10, { flexDirection: "column", gap: 1, children: [
+        /* @__PURE__ */ jsxs10(Box11, { flexDirection: "column", gap: 1, children: [
           /* @__PURE__ */ jsx10(Progress, {}),
-          /* @__PURE__ */ jsx10(Box10, { flexDirection: "column", children: sidebarCommands.map((c) => {
-            return /* @__PURE__ */ jsxs9(Box10, { flexDirection: "row", gap: 1, children: [
-              /* @__PURE__ */ jsx10(Text10, { color: COLORS.primary, children: `[${c.keyHint}]` }),
-              /* @__PURE__ */ jsx10(Text10, { color: COLORS.muted, children: c.description })
+          /* @__PURE__ */ jsx10(Box11, { flexDirection: "column", children: sidebarCommands.map((c) => {
+            return /* @__PURE__ */ jsxs10(Box11, { flexDirection: "row", gap: 1, children: [
+              /* @__PURE__ */ jsx10(Text11, { color: COLORS.primary, children: `[${c.keyHint}]` }),
+              /* @__PURE__ */ jsx10(Text11, { color: COLORS.muted, children: c.description })
             ] });
           }) })
         ] })
@@ -1186,12 +1244,12 @@ function Sidebar() {
 }
 
 // src/ui/Ribbon.tsx
-import { Box as Box11, Text as Text11 } from "ink";
-import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Box as Box12, Text as Text12 } from "ink";
+import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
 function Ribbon() {
   const firstCommand = sidebarCommands[0];
-  return /* @__PURE__ */ jsxs10(
-    Box11,
+  return /* @__PURE__ */ jsxs11(
+    Box12,
     {
       backgroundColor: "#14171E",
       flexDirection: "row",
@@ -1201,9 +1259,9 @@ function Ribbon() {
       children: [
         /* @__PURE__ */ jsx11(Progress, {}),
         /* @__PURE__ */ jsx11(CurrentStep, {}),
-        /* @__PURE__ */ jsxs10(Box11, { flexDirection: "row", gap: 1, children: [
-          /* @__PURE__ */ jsx11(Text11, { color: COLORS.primary, children: `[${firstCommand.keyHint}]` }),
-          /* @__PURE__ */ jsx11(Text11, { color: COLORS.muted, children: firstCommand.description })
+        /* @__PURE__ */ jsxs11(Box12, { flexDirection: "row", gap: 1, children: [
+          /* @__PURE__ */ jsx11(Text12, { color: COLORS.primary, children: `[${firstCommand.keyHint}]` }),
+          /* @__PURE__ */ jsx11(Text12, { color: COLORS.muted, children: firstCommand.description })
         ] })
       ]
     }
@@ -1214,9 +1272,8 @@ function Ribbon() {
 import { useState as useState6 } from "react";
 
 // src/ui/Logs.tsx
-import { useLayoutEffect as useLayoutEffect2, useRef as useRef3, useState as useState5 } from "react";
-import { Box as Box12, Text as Text12, measureElement as measureElement3, useInput as useInput5, useWindowSize as useWindowSize6 } from "ink";
-import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Box as Box13, Text as Text13, useInput as useInput5 } from "ink";
+import { jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
 var KIND_COLOR = {
   tool: COLORS.primary,
   prompt: COLORS.badge
@@ -1246,75 +1303,32 @@ function formatTimestamp(ms) {
 }
 function Logs() {
   const logs = useWizard((s) => s.logs);
-  const { rows, columns } = useWindowSize6();
-  const viewportRef = useRef3(null);
-  const [viewportHeight, setViewportHeight] = useState5(0);
-  const [viewportWidth, setViewportWidth] = useState5(0);
-  const [scrollOffset, setScrollOffset] = useState5(0);
-  const prevMaxOffsetRef = useRef3(0);
-  useLayoutEffect2(() => {
-    if (!viewportRef.current) return;
-    const { width, height } = measureElement3(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);
-  useLayoutEffect2(() => {
-    const wasAtBottom = scrollOffset >= prevMaxOffsetRef.current;
-    prevMaxOffsetRef.current = maxOffset;
-    setScrollOffset((o) => wasAtBottom ? maxOffset : Math.min(o, maxOffset));
-  }, [maxOffset]);
+  const scroll = useScrollWindow({ itemCount: logs.length, followBottom: true });
   useInput5((_input, key) => {
-    if (!key.upArrow && !key.downArrow) return;
-    setScrollOffset(
-      (o) => key.upArrow ? Math.max(o - 1, 0) : Math.min(o + 1, maxOffset)
-    );
+    if (key.upArrow) scroll.scrollBy(-1);
+    else if (key.downArrow) scroll.scrollBy(1);
   });
-  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" })
+  const visible = logs.slice(scroll.offset, scroll.offset + scroll.capacity);
+  return /* @__PURE__ */ jsxs12(Box13, { flexDirection: "column", paddingX: 4, paddingY: 2, flexGrow: 1, children: [
+    logs.length === 0 && /* @__PURE__ */ jsx12(Text13, { color: COLORS.dim, children: "No logs yet." }),
+    /* @__PURE__ */ jsx12(ScrollView, { scroll, children: 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 = scroll.width - timestamp.length - durationText.length - gaps;
+      const name = truncate2(entry.name, budget);
+      budget -= name.length;
+      const preview = rawPreview ? truncate2(rawPreview, budget) : "";
+      return /* @__PURE__ */ jsxs12(Box13, { flexDirection: "row", gap: ROW_GAP, children: [
+        /* @__PURE__ */ jsx12(Text13, { color: COLORS.dim, children: timestamp }),
+        /* @__PURE__ */ jsx12(Text13, { color: logNameColor(entry), wrap: "truncate", children: name }),
+        preview && /* @__PURE__ */ jsx12(Text13, { color: COLORS.dim, wrap: "truncate", children: preview }),
+        durationText && /* @__PURE__ */ jsx12(Text13, { color: COLORS.dim, children: durationText })
+      ] }, entry.id);
+    }) }),
+    /* @__PURE__ */ jsx12(Text13, { color: COLORS.dim, children: "\u2191/\u2193 scroll" })
   ] });
 }
 
@@ -1506,7 +1520,7 @@ function track(event, payload) {
 }
 
 // src/ui/App.tsx
-import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
 function App() {
   const { phase, error, homeScreen, currentStepIndex, steps, inputReq } = useWizard();
   const { exit } = useApp();
@@ -1549,19 +1563,24 @@ function App() {
   const mainWindowVisible = phase === "running" || phase === "awaitingInput" || phase === "error" || phase === "done";
   const flexDirection = columns > 90 ? "row" : "column";
   const showSidebar = flexDirection === "row";
-  return /* @__PURE__ */ jsxs12(
-    Box13,
+  return /* @__PURE__ */ jsxs13(
+    Box14,
     {
       backgroundColor: COLORS.bg.main,
       flexDirection: "row",
       width: columns,
       minHeight: rows,
       children: [
-        mainWindowVisible && /* @__PURE__ */ jsxs12(
-          Box13,
+        mainWindowVisible && // Ink sizes the root by width only, so without a cap the scrolling
+        // lists in here grow to their content instead of windowing (see
+        // `useScrollWindow`). The home screens below stay uncapped: they are
+        // long static copy that would be clipped rather than windowed.
+        /* @__PURE__ */ jsxs13(
+          Box14,
           {
             flexDirection,
             width: "100%",
+            maxHeight: rows,
             justifyContent: "space-between",
             children: [
               showLogs ? /* @__PURE__ */ jsx13(Logs, {}) : (
@@ -1569,8 +1588,8 @@ function App() {
                    sidebar, height above the ribbon. The height matters even
                    stacked: it is what the prompt's scrolling list measures itself
                    against (see SelectPrompt). */
-                /* @__PURE__ */ jsxs12(
-                  Box13,
+                /* @__PURE__ */ jsxs13(
+                  Box14,
                   {
                     flexDirection: "column",
                     paddingX: 4,
@@ -1580,8 +1599,8 @@ function App() {
                     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: [
+                      phase === "running" && showSidebar && /* @__PURE__ */ jsx13(Box14, { marginTop: 1, children: /* @__PURE__ */ jsx13(CurrentStep, {}) }),
+                      phase === "error" && error && /* @__PURE__ */ jsx13(Box14, { marginTop: 1, children: /* @__PURE__ */ jsxs13(Text14, { color: COLORS.status.error, children: [
                         "\u2716 ",
                         error
                       ] }) })
@@ -2742,7 +2761,7 @@ async function runAnalysis(mode, extraInstructions = []) {
 // package.json
 var package_default = {
   name: "@algolia/wizard",
-  version: "0.8.0-rc.58.44",
+  version: "0.8.0-rc.58.45",
   description: "Magically implement Algolia functionality in your codebase",
   type: "module",
   engines: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@algolia/wizard",
-  "version": "0.8.0-rc.58.44",
+  "version": "0.8.0-rc.58.45",
   "description": "Magically implement Algolia functionality in your codebase",
   "type": "module",
   "engines": {