pre-claude 0.0.1-beta.3 → 0.0.1-beta.4

package/dist/cli.js

@@ -5,7 +5,7 @@ import { defineCommand as defineCommand3, runMain } from "citty";
 
 // package.json
 var name = "pre-claude";
-var version = "0.0.1-beta.3";
+var version = "0.0.1-beta.4";
 var description = "\u{1F40D} TUI for building structured prompts for Claude";
 
 // src/cli/commands/init.ts
@@ -237,11 +237,12 @@ var safeParseConfig = (data) => {
 };
 
 // src/tui/App.tsx
-import { Text as Text16, useApp } from "ink";
+import { Text as Text16, useApp as useApp2 } from "ink";
 import { useCallback as useCallback6, useState as useState8 } from "react";
 
 // src/tui/views/Preview/Preview.tsx
-import { Box as Box5, Text as Text4 } from "ink";
+import { spawn } from "node:child_process";
+import { Box as Box5, Text as Text4, useApp, useStdout as useStdout2 } from "ink";
 import { useCallback, useMemo, useState } from "react";
 
 // src/tui/features/document/services.ts
@@ -352,26 +353,6 @@ var HELP_COLOR = "blue";
 
 // src/tui/features/generation/services.ts
 import { query } from "@anthropic-ai/claude-agent-sdk";
-async function* generateDesignDocStream({
-  scenario,
-  formData,
-  aiContext
-}) {
-  const prompt = scenario.prompt({ formData, aiContext });
-  for await (const msg of query({
-    prompt,
-    options: {
-      includePartialMessages: true
-    }
-  })) {
-    if (msg.type === "stream_event") {
-      const event = msg.event;
-      if (event.type === "content_block_delta" && event.delta?.type === "text_delta" && event.delta.text != null) {
-        yield { type: "text_delta", text: event.delta.text };
-      }
-    }
-  }
-}
 var generatePreview = async ({
   scenario,
   formData,
@@ -382,15 +363,26 @@ var generatePreview = async ({
 }) => {
   try {
     let content = "";
-    for await (const chunk of generateDesignDocStream({
-      scenario,
-      formData,
-      aiContext
+    let sessionId = null;
+    const prompt = scenario.prompt({ formData, aiContext });
+    for await (const msg of query({
+      prompt,
+      options: {
+        includePartialMessages: true
+      }
     })) {
-      content += chunk.text;
-      onChunk(chunk.text);
+      if (msg.type === "stream_event") {
+        const event = msg.event;
+        if (event.type === "content_block_delta" && event.delta?.type === "text_delta" && event.delta.text != null) {
+          content += event.delta.text;
+          onChunk(event.delta.text);
+        }
+      }
+      if ("session_id" in msg && msg.session_id && !sessionId) {
+        sessionId = msg.session_id;
+      }
     }
-    onComplete(content);
+    onComplete({ content, sessionId });
   } catch (error) {
     onError(error instanceof Error ? error : new Error(String(error)));
   }
@@ -414,6 +406,7 @@ var useControl = (options = {}) => {
     onPrev,
     onRegenerate,
     onInfo,
+    onContinue,
     onChar,
     isActive = true,
     viKeysEnabled = true
@@ -485,6 +478,9 @@ var useControl = (options = {}) => {
         case "i":
           onInfo?.();
           return;
+        case "c":
+          onContinue?.();
+          return;
       }
       onChar?.(input);
     },
@@ -522,28 +518,19 @@ var ControlBar = ({ items }) => {
 // src/tui/components/Header/Header.tsx
 import { Box as Box2, Text as Text2 } from "ink";
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-var ASCII_LOGO = `                          _                 _
- _ __  _ __ ___       ___| | __ _ _   _  __| | ___
-| '_ \\| '__/ _ \\_____/ __| |/ _\` | | | |/ _\` |/ _ \\
-| |_) | | |  __/_____| (__| | (_| | |_| | (_| |  __/
-| .__/|_|  \\___|      \\___|_|\\__,_|\\__,_|\\__,_|\\___|
-|_|`;
 var Header = ({
   description: description2 = "Structured Prompt Builder for Claude"
 }) => {
   return /* @__PURE__ */ jsxs(
     Box2,
     {
-      flexDirection: "column",
       borderStyle: "double",
       borderColor: ACCENT_COLOR,
       paddingX: 1,
+      justifyContent: "space-between",
       children: [
-        /* @__PURE__ */ jsx2(Text2, { color: ACCENT_COLOR, children: ASCII_LOGO }),
-        /* @__PURE__ */ jsx2(Box2, { marginTop: 1, justifyContent: "flex-end", children: /* @__PURE__ */ jsxs(Text2, { color: ACCENT_COLOR, children: [
-          "\u{1F40D} ",
-          description2
-        ] }) })
+        /* @__PURE__ */ jsx2(Text2, { color: ACCENT_COLOR, bold: true, children: "\u{1F40D} pre-claude" }),
+        /* @__PURE__ */ jsx2(Text2, { color: ACCENT_COLOR, children: description2 })
       ]
     }
   );
@@ -589,6 +576,16 @@ var StatusBar = ({ message, type = "info" }) => {
   ] }) : /* @__PURE__ */ jsx3(Text3, { color, children: message }) });
 };
 
+// src/tui/hooks/useTerminalHeight.ts
+import { useStdout } from "ink";
+var useTerminalHeight = () => {
+  const { stdout } = useStdout();
+  const rows = stdout?.rows ?? 24;
+  const fixedLayoutHeight = 7;
+  const availableHeight = Math.max(10, rows - fixedLayoutHeight);
+  return { rows, availableHeight };
+};
+
 // src/tui/layouts/CommonLayout/CommonLayout.tsx
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var CommonLayout = ({
@@ -596,9 +593,10 @@ var CommonLayout = ({
   status,
   controls = []
 }) => {
-  return /* @__PURE__ */ jsxs3(Box4, { flexDirection: "column", padding: 1, children: [
+  const { rows } = useTerminalHeight();
+  return /* @__PURE__ */ jsxs3(Box4, { flexDirection: "column", padding: 1, height: rows, children: [
     /* @__PURE__ */ jsx4(Header, {}),
-    children,
+    /* @__PURE__ */ jsx4(Box4, { flexDirection: "column", flexGrow: 1, children }),
     controls.length > 0 && /* @__PURE__ */ jsx4(ControlBar, { items: controls }),
     status?.message && /* @__PURE__ */ jsx4(StatusBar, { message: status.message, type: status.type })
   ] });
@@ -630,22 +628,30 @@ var Preview = ({
   const [error, setError] = useState(null);
   const [isSaving, setIsSaving] = useState(false);
   const [scrollOffset, setScrollOffset] = useState(0);
+  const [dataPreviewScrollOffset, setDataPreviewScrollOffset] = useState(0);
   const [savedFilename, setSavedFilename] = useState(null);
   const [showDataPreview, setShowDataPreview] = useState(false);
+  const [showContinueDialog, setShowContinueDialog] = useState(false);
+  const { stdout } = useStdout2();
+  const [sessionId, setSessionId] = useState(null);
+  const { exit } = useApp();
   const isEditing = editingFilename != null;
   const canSave = previewContent !== "" && !isGenerating;
   const lines = previewContent.split("\n");
-  const maxVisible = 15;
+  const fixedHeight = 8;
+  const maxVisible = Math.max(10, (stdout?.rows ?? 24) - fixedHeight);
   const visibleLines = lines.slice(scrollOffset, scrollOffset + maxVisible);
+  const canContinue = sessionId != null && !isGenerating;
   const controls = useMemo(
     () => [
       { key: "\u2191\u2193/jk", action: "scroll" },
       { key: "r", action: "regenerate" },
       ...canSave ? [{ key: "s", action: "save" }] : [],
+      ...canContinue ? [{ key: "c", action: "continue in Claude" }] : [],
       { key: "i", action: "info" },
       { key: "q/Esc", action: "back" }
     ],
-    [canSave]
+    [canSave, canContinue]
   );
   const status = useMemo(() => {
     if (error) {
@@ -666,6 +672,7 @@ var Preview = ({
     setIsGenerating(true);
     setError(null);
     setPreviewContent("");
+    setSessionId(null);
     let accumulatedContent = "";
     try {
       await generatePreview({
@@ -676,8 +683,9 @@ var Preview = ({
           accumulatedContent += chunk;
           setPreviewContent(accumulatedContent);
         },
-        onComplete: (content) => {
-          setPreviewContent(content);
+        onComplete: (result) => {
+          setPreviewContent(result.content);
+          setSessionId(result.sessionId);
           setIsGenerating(false);
         },
         onError: (err) => {
@@ -719,33 +727,128 @@ var Preview = ({
     editingFilename,
     isSaving
   ]);
+  const formDataLines = useMemo(
+    () => JSON.stringify(formValues, null, 2).split("\n"),
+    [formValues]
+  );
+  const aiContextLines = useMemo(
+    () => JSON.stringify(aiContext, null, 2).split("\n"),
+    [aiContext]
+  );
+  const maxDataLines = Math.max(formDataLines.length, aiContextLines.length);
+  const handleContinueInClaude = useCallback(
+    async (shouldSave) => {
+      if (!sessionId) return;
+      if (shouldSave && canSave) {
+        setIsSaving(true);
+        setError(null);
+        try {
+          await saveDocument({
+            config,
+            scenario,
+            formData: formValues,
+            aiContext,
+            content: previewContent,
+            existingFilename: editingFilename
+          });
+        } catch (err) {
+          setError(err instanceof Error ? err.message : "Failed to save");
+          setIsSaving(false);
+          setShowContinueDialog(false);
+          return;
+        }
+        setIsSaving(false);
+      }
+      exit();
+      setTimeout(() => {
+        const child = spawn("claude", ["--resume", sessionId], {
+          stdio: "inherit",
+          shell: true
+        });
+        child.on("close", (code) => {
+          process.exit(code ?? 0);
+        });
+      }, 100);
+    },
+    [
+      sessionId,
+      exit,
+      canSave,
+      config,
+      scenario,
+      formValues,
+      aiContext,
+      previewContent,
+      editingFilename
+    ]
+  );
   useControl({
     onEscape: () => {
-      if (showDataPreview) {
+      if (showContinueDialog) {
+        setShowContinueDialog(false);
+      } else if (showDataPreview) {
         setShowDataPreview(false);
       } else {
         onBack();
       }
     },
-    onQuit: onBack,
+    onQuit: showContinueDialog ? void 0 : onBack,
     onSave: () => {
-      if (!isGenerating && !isSaving) {
+      if (!isGenerating && !isSaving && !showContinueDialog) {
         handleSave();
       }
     },
     onRegenerate: () => {
-      if (!isGenerating) {
+      if (!isGenerating && !showContinueDialog) {
         handleGenerate();
       }
     },
     onUp: () => {
-      setScrollOffset((prev) => Math.max(0, prev - 1));
+      if (showContinueDialog) return;
+      if (showDataPreview) {
+        setDataPreviewScrollOffset((prev) => Math.max(0, prev - 1));
+      } else {
+        setScrollOffset((prev) => Math.max(0, prev - 1));
+      }
     },
     onDown: () => {
-      setScrollOffset((prev) => prev + 1);
+      if (showContinueDialog) return;
+      if (showDataPreview) {
+        const maxDataVisible = Math.max(5, maxVisible - 2);
+        setDataPreviewScrollOffset(
+          (prev) => Math.min(prev + 1, Math.max(0, maxDataLines - maxDataVisible))
+        );
+      } else {
+        setScrollOffset(
+          (prev) => Math.min(prev + 1, Math.max(0, lines.length - maxVisible))
+        );
+      }
+      setScrollOffset(
+        (prev) => Math.min(prev + 1, Math.max(0, lines.length - maxVisible))
+      );
     },
     onInfo: () => {
-      setShowDataPreview((prev) => !prev);
+      if (showContinueDialog) return;
+      setShowDataPreview((prev) => {
+        if (!prev) {
+          setDataPreviewScrollOffset(0);
+        }
+        return !prev;
+      });
+    },
+    onContinue: () => {
+      if (canContinue && !showContinueDialog) {
+        setShowContinueDialog(true);
+      }
+    },
+    onChar: (char) => {
+      if (showContinueDialog) {
+        if (char === "y" || char === "Y") {
+          handleContinueInClaude(true);
+        } else if (char === "n" || char === "N") {
+          handleContinueInClaude(false);
+        }
+      }
     }
   });
   useMount(() => {
@@ -754,10 +857,19 @@ var Preview = ({
     }
   });
   if (showDataPreview) {
-    const formDataJson = JSON.stringify(formValues, null, 2);
-    const aiContextJson = JSON.stringify(aiContext, null, 2);
+    const maxDataVisible = Math.max(5, maxVisible - 2);
+    const visibleFormDataLines = formDataLines.slice(
+      dataPreviewScrollOffset,
+      dataPreviewScrollOffset + maxDataVisible
+    );
+    const visibleAiContextLines = aiContextLines.slice(
+      dataPreviewScrollOffset,
+      dataPreviewScrollOffset + maxDataVisible
+    );
+    const hasMoreDataAbove = dataPreviewScrollOffset > 0;
+    const hasMoreDataBelow = dataPreviewScrollOffset + maxDataVisible < maxDataLines;
     return /* @__PURE__ */ jsxs4(ScenarioLayout, { controls, status, children: [
-      /* @__PURE__ */ jsxs4(Box5, { flexDirection: "row", gap: 1, children: [
+      /* @__PURE__ */ jsxs4(Box5, { flexDirection: "row", gap: 1, flexGrow: 1, children: [
         /* @__PURE__ */ jsxs4(
           Box5,
           {
@@ -773,7 +885,11 @@ var Preview = ({
                 "formData",
                 " "
               ] }) }),
-              formDataJson.split("\n").map((line, index) => /* @__PURE__ */ jsx6(Text4, { children: line || " " }, index))
+              /* @__PURE__ */ jsxs4(Box5, { flexDirection: "column", overflowY: "hidden", children: [
+                hasMoreDataAbove && /* @__PURE__ */ jsx6(Text4, { dimColor: true, children: "\u2191 more" }),
+                visibleFormDataLines.map((line, index) => /* @__PURE__ */ jsx6(Text4, { children: line || " " }, dataPreviewScrollOffset + index)),
+                hasMoreDataBelow && /* @__PURE__ */ jsx6(Text4, { dimColor: true, children: "\u2193 more" })
+              ] })
             ]
           }
         ),
@@ -792,12 +908,19 @@ var Preview = ({
                 "aiContext",
                 " "
               ] }) }),
-              aiContextJson.split("\n").map((line, index) => /* @__PURE__ */ jsx6(Text4, { children: line || " " }, index))
+              /* @__PURE__ */ jsxs4(Box5, { flexDirection: "column", overflowY: "hidden", children: [
+                hasMoreDataAbove && /* @__PURE__ */ jsx6(Text4, { dimColor: true, children: "\u2191 more" }),
+                visibleAiContextLines.map((line, index) => /* @__PURE__ */ jsx6(Text4, { children: line || " " }, dataPreviewScrollOffset + index)),
+                hasMoreDataBelow && /* @__PURE__ */ jsx6(Text4, { dimColor: true, children: "\u2193 more" })
+              ] })
             ]
           }
         )
       ] }),
-      /* @__PURE__ */ jsx6(Box5, { paddingX: 1, children: /* @__PURE__ */ jsx6(Text4, { dimColor: true, children: "Press i or Esc to close" }) })
+      /* @__PURE__ */ jsx6(Box5, { paddingX: 1, children: /* @__PURE__ */ jsxs4(Text4, { dimColor: true, children: [
+        "Press i or Esc to close",
+        maxDataLines > maxDataVisible && ` | Lines ${dataPreviewScrollOffset + 1}-${Math.min(dataPreviewScrollOffset + maxDataVisible, maxDataLines)} of ${maxDataLines}`
+      ] }) })
     ] });
   }
   return /* @__PURE__ */ jsxs4(ScenarioLayout, { controls, status, children: [
@@ -828,7 +951,39 @@ var Preview = ({
       " of",
       " ",
       lines.length
-    ] }) })
+    ] }) }),
+    showContinueDialog && /* @__PURE__ */ jsxs4(
+      Box5,
+      {
+        flexDirection: "column",
+        borderStyle: "round",
+        borderColor: "yellow",
+        paddingX: 1,
+        paddingY: 0,
+        marginTop: 1,
+        children: [
+          /* @__PURE__ */ jsx6(Box5, { marginTop: -1, marginLeft: 1, children: /* @__PURE__ */ jsxs4(Text4, { backgroundColor: "black", color: "yellow", bold: true, children: [
+            " ",
+            "Continue in Claude",
+            " "
+          ] }) }),
+          /* @__PURE__ */ jsx6(Text4, { children: "Save document before continuing?" }),
+          /* @__PURE__ */ jsx6(Box5, { marginTop: 1, children: /* @__PURE__ */ jsxs4(Text4, { children: [
+            /* @__PURE__ */ jsx6(Text4, { color: "green", bold: true, children: "[y]" }),
+            " ",
+            "Save and continue",
+            "  ",
+            /* @__PURE__ */ jsx6(Text4, { color: "blue", bold: true, children: "[n]" }),
+            " ",
+            "Continue without saving",
+            "  ",
+            /* @__PURE__ */ jsx6(Text4, { dimColor: true, bold: true, children: "[Esc]" }),
+            " ",
+            "Cancel"
+          ] }) })
+        ]
+      }
+    )
   ] });
 };
 
@@ -1760,6 +1915,19 @@ var FieldEditor = ({
 // src/tui/views/ScenarioForm/-internal/FieldSelector/FieldSelector.tsx
 import { Box as Box11, Text as Text12 } from "ink";
 import { useState as useState5 } from "react";
+
+// src/tui/utils/scroll.ts
+var adjustScrollOffset = (newIndex, currentOffset, maxVisible) => {
+  if (newIndex < currentOffset) {
+    return newIndex;
+  }
+  if (newIndex >= currentOffset + maxVisible) {
+    return newIndex - maxVisible + 1;
+  }
+  return currentOffset;
+};
+
+// src/tui/views/ScenarioForm/-internal/FieldSelector/FieldSelector.tsx
 import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
 var FieldSelector = ({
   flatItems,
@@ -1767,6 +1935,7 @@ var FieldSelector = ({
   isFocused,
   isFirstStep,
   isLastStep,
+  maxHeight,
   onFocusUp,
   onFocusToForm,
   onAddItem,
@@ -1777,18 +1946,34 @@ var FieldSelector = ({
   onBack
 }) => {
   const [selectedIndex, setSelectedIndex] = useState5(0);
+  const [scrollOffset, setScrollOffset] = useState5(0);
   const validIndex = Math.min(selectedIndex, Math.max(0, flatItems.length - 1));
   const currentItem = flatItems[validIndex];
+  const maxVisibleItems = Math.max(3, maxHeight - 3);
+  const visibleItems = flatItems.slice(
+    scrollOffset,
+    scrollOffset + maxVisibleItems
+  );
+  const hasMoreAbove = scrollOffset > 0;
+  const hasMoreBelow = scrollOffset + maxVisibleItems < flatItems.length;
   useControl({
     onUp: () => {
       if (selectedIndex === 0) {
         onFocusUp();
         return;
       }
-      setSelectedIndex((prev) => prev - 1);
+      const newIndex = selectedIndex - 1;
+      setSelectedIndex(newIndex);
+      setScrollOffset(
+        (prev) => adjustScrollOffset(newIndex, prev, maxVisibleItems)
+      );
     },
     onDown: () => {
-      setSelectedIndex((prev) => prev < flatItems.length - 1 ? prev + 1 : 0);
+      const newIndex = selectedIndex < flatItems.length - 1 ? selectedIndex + 1 : 0;
+      setSelectedIndex(newIndex);
+      setScrollOffset(
+        (prev) => adjustScrollOffset(newIndex, prev, maxVisibleItems)
+      );
     },
     onEnter: () => {
       if (!currentItem) return;
@@ -1840,58 +2025,63 @@ var FieldSelector = ({
             ]
           }
         ) }),
-        /* @__PURE__ */ jsx14(Box11, { flexDirection: "column", overflowY: "hidden", children: flatItems.map((item, index) => {
-          const isSelected = index === validIndex;
-          const valueDisplay = getValueDisplay(item, stepValues);
-          const typeIndicator = getFieldTypeIndicator(item);
-          const treePrefix = item.treePrefix || "";
-          if (item.type === "repeatable-add") {
-            return /* @__PURE__ */ jsxs9(Box11, { children: [
-              /* @__PURE__ */ jsx14(Text12, { color: "gray", children: treePrefix }),
-              /* @__PURE__ */ jsx14(
-                Text12,
-                {
-                  color: isSelected && isFocused ? "black" : "green",
-                  backgroundColor: isSelected && isFocused ? ACCENT_COLOR : void 0,
-                  children: item.label
-                }
-              )
-            ] }, `add-${item.path}`);
-          }
-          if (item.type === "repeatable-header") {
+        /* @__PURE__ */ jsxs9(Box11, { flexDirection: "column", overflowY: "hidden", children: [
+          hasMoreAbove && /* @__PURE__ */ jsx14(Text12, { dimColor: true, children: "\u2191 more" }),
+          visibleItems.map((item, visibleIndex) => {
+            const actualIndex = scrollOffset + visibleIndex;
+            const isSelected = actualIndex === validIndex;
+            const valueDisplay = getValueDisplay(item, stepValues);
+            const typeIndicator = getFieldTypeIndicator(item);
+            const treePrefix = item.treePrefix || "";
+            if (item.type === "repeatable-add") {
+              return /* @__PURE__ */ jsxs9(Box11, { children: [
+                /* @__PURE__ */ jsx14(Text12, { color: "gray", children: treePrefix }),
+                /* @__PURE__ */ jsx14(
+                  Text12,
+                  {
+                    color: isSelected && isFocused ? "black" : "green",
+                    backgroundColor: isSelected && isFocused ? ACCENT_COLOR : void 0,
+                    children: item.label
+                  }
+                )
+              ] }, `add-${item.path}`);
+            }
+            if (item.type === "repeatable-header") {
+              return /* @__PURE__ */ jsxs9(Box11, { children: [
+                /* @__PURE__ */ jsx14(Text12, { color: "gray", children: treePrefix }),
+                /* @__PURE__ */ jsx14(
+                  Text12,
+                  {
+                    color: isSelected && isFocused ? "black" : ACCENT_COLOR,
+                    backgroundColor: isSelected && isFocused ? ACCENT_COLOR : void 0,
+                    bold: true,
+                    children: item.label
+                  }
+                )
+              ] }, `header-${item.path}`);
+            }
             return /* @__PURE__ */ jsxs9(Box11, { children: [
               /* @__PURE__ */ jsx14(Text12, { color: "gray", children: treePrefix }),
-              /* @__PURE__ */ jsx14(
+              /* @__PURE__ */ jsxs9(
                 Text12,
                 {
-                  color: isSelected && isFocused ? "black" : ACCENT_COLOR,
+                  color: isSelected && isFocused ? "black" : void 0,
                   backgroundColor: isSelected && isFocused ? ACCENT_COLOR : void 0,
-                  bold: true,
-                  children: item.label
+                  children: [
+                    typeIndicator,
+                    " ",
+                    item.label
+                  ]
                 }
-              )
-            ] }, `header-${item.path}`);
-          }
-          return /* @__PURE__ */ jsxs9(Box11, { children: [
-            /* @__PURE__ */ jsx14(Text12, { color: "gray", children: treePrefix }),
-            /* @__PURE__ */ jsxs9(
-              Text12,
-              {
-                color: isSelected && isFocused ? "black" : void 0,
-                backgroundColor: isSelected && isFocused ? ACCENT_COLOR : void 0,
-                children: [
-                  typeIndicator,
-                  " ",
-                  item.label
-                ]
-              }
-            ),
-            valueDisplay && /* @__PURE__ */ jsxs9(Text12, { color: "gray", children: [
-              " : ",
-              valueDisplay
-            ] })
-          ] }, item.path);
-        }) })
+              ),
+              valueDisplay && /* @__PURE__ */ jsxs9(Text12, { color: "gray", children: [
+                " : ",
+                valueDisplay
+              ] })
+            ] }, item.path);
+          }),
+          hasMoreBelow && /* @__PURE__ */ jsx14(Text12, { dimColor: true, children: "\u2193 more" })
+        ] })
       ]
     }
   );
@@ -1982,6 +2172,8 @@ var ScenarioForm = ({
   const [focusPanel, setFocusPanel] = useState6("steps");
   const [currentItem, setCurrentItem] = useState6();
   const [validationError, setValidationError] = useState6(null);
+  const { availableHeight } = useTerminalHeight();
+  const fieldSelectorHeight = Math.max(8, availableHeight - 3);
   const currentStep = scenario.steps[stepIndex];
   if (currentStep == null) {
     return /* @__PURE__ */ jsx16(Text14, { color: "red", children: "Error: Step not found" });
@@ -2216,7 +2408,7 @@ var ScenarioForm = ({
         onBack
       }
     ),
-    /* @__PURE__ */ jsxs11(Box13, { height: 16, children: [
+    /* @__PURE__ */ jsxs11(Box13, { flexGrow: 1, children: [
       /* @__PURE__ */ jsx16(
         FieldSelector,
         {
@@ -2225,6 +2417,7 @@ var ScenarioForm = ({
           isFocused: focusPanel === "list",
           isFirstStep,
           isLastStep,
+          maxHeight: fieldSelectorHeight,
           onFocusUp: () => setFocusPanel("steps"),
           onFocusToForm: handleFocusToForm,
           onAddItem: handleAddItem,
@@ -2253,7 +2446,7 @@ var ScenarioForm = ({
 // src/tui/views/SelectScenario/SelectScenario.tsx
 import { Box as Box14, Text as Text15 } from "ink";
 import { useCallback as useCallback5, useMemo as useMemo4, useState as useState7 } from "react";
-import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
 var SelectScenario = ({
   scenarios,
   onSelectNew,
@@ -2265,6 +2458,10 @@ var SelectScenario = ({
   const [focusPanel, setFocusPanel] = useState7("scenarios");
   const [documents, setDocuments] = useState7([]);
   const [isLoading, setIsLoading] = useState7(false);
+  const [scenarioScrollOffset, setScenarioScrollOffset] = useState7(0);
+  const [actionScrollOffset, setActionScrollOffset] = useState7(0);
+  const { availableHeight } = useTerminalHeight();
+  const maxVisibleItems = Math.max(3, availableHeight - 3);
   const currentScenario = scenarios[scenarioIndex];
   const actionItems = useMemo4(
     () => [
@@ -2273,6 +2470,14 @@ var SelectScenario = ({
     ],
     [documents]
   );
+  const visibleScenarios = scenarios.slice(
+    scenarioScrollOffset,
+    scenarioScrollOffset + maxVisibleItems
+  );
+  const visibleActionItems = actionItems.slice(
+    actionScrollOffset,
+    actionScrollOffset + maxVisibleItems
+  );
   const controls = useMemo4(() => {
     if (focusPanel === "scenarios") {
       return [
@@ -2308,11 +2513,17 @@ var SelectScenario = ({
     onUp: () => {
       const newIndex = scenarioIndex > 0 ? scenarioIndex - 1 : scenarios.length - 1;
       setScenarioIndex(newIndex);
+      setScenarioScrollOffset(
+        (prev) => adjustScrollOffset(newIndex, prev, maxVisibleItems)
+      );
       loadDocuments(newIndex);
     },
     onDown: () => {
       const newIndex = scenarioIndex < scenarios.length - 1 ? scenarioIndex + 1 : 0;
       setScenarioIndex(newIndex);
+      setScenarioScrollOffset(
+        (prev) => adjustScrollOffset(newIndex, prev, maxVisibleItems)
+      );
       loadDocuments(newIndex);
     },
     onRight: () => {
@@ -2326,10 +2537,18 @@ var SelectScenario = ({
   });
   useControl({
     onUp: () => {
-      setActionIndex((prev) => prev > 0 ? prev - 1 : actionItems.length - 1);
+      const newIndex = actionIndex > 0 ? actionIndex - 1 : actionItems.length - 1;
+      setActionIndex(newIndex);
+      setActionScrollOffset(
+        (prev) => adjustScrollOffset(newIndex, prev, maxVisibleItems)
+      );
     },
     onDown: () => {
-      setActionIndex((prev) => prev < actionItems.length - 1 ? prev + 1 : 0);
+      const newIndex = actionIndex < actionItems.length - 1 ? actionIndex + 1 : 0;
+      setActionIndex(newIndex);
+      setActionScrollOffset(
+        (prev) => adjustScrollOffset(newIndex, prev, maxVisibleItems)
+      );
     },
     onEnter: () => {
       const item = actionItems[actionIndex];
@@ -2353,7 +2572,11 @@ var SelectScenario = ({
   useMount(() => {
     loadDocuments(0);
   });
-  return /* @__PURE__ */ jsx17(CommonLayout, { controls, children: /* @__PURE__ */ jsxs12(Box14, { children: [
+  const hasMoreScenariosAbove = scenarioScrollOffset > 0;
+  const hasMoreScenariosBelow = scenarioScrollOffset + maxVisibleItems < scenarios.length;
+  const hasMoreActionsAbove = actionScrollOffset > 0;
+  const hasMoreActionsBelow = actionScrollOffset + maxVisibleItems < actionItems.length;
+  return /* @__PURE__ */ jsx17(CommonLayout, { controls, children: /* @__PURE__ */ jsxs12(Box14, { flexGrow: 1, children: [
     /* @__PURE__ */ jsxs12(
       Box14,
       {
@@ -2376,22 +2599,27 @@ var SelectScenario = ({
               ]
             }
           ) }),
-          /* @__PURE__ */ jsx17(Box14, { flexDirection: "column", children: scenarios.map((scenario, index) => {
-            const isSelected = index === scenarioIndex;
-            const isFocused = focusPanel === "scenarios";
-            return /* @__PURE__ */ jsx17(Box14, { children: /* @__PURE__ */ jsxs12(
-              Text15,
-              {
-                color: isSelected && isFocused ? "black" : void 0,
-                backgroundColor: isSelected ? isFocused ? ACCENT_COLOR : "gray" : void 0,
-                children: [
-                  " ",
-                  scenario.name,
-                  " "
-                ]
-              }
-            ) }, scenario.id);
-          }) })
+          /* @__PURE__ */ jsxs12(Box14, { flexDirection: "column", overflowY: "hidden", children: [
+            hasMoreScenariosAbove && /* @__PURE__ */ jsx17(Text15, { dimColor: true, children: "\u2191 more" }),
+            visibleScenarios.map((scenario, visibleIndex) => {
+              const actualIndex = scenarioScrollOffset + visibleIndex;
+              const isSelected = actualIndex === scenarioIndex;
+              const isFocused = focusPanel === "scenarios";
+              return /* @__PURE__ */ jsx17(Box14, { children: /* @__PURE__ */ jsxs12(
+                Text15,
+                {
+                  color: isSelected && isFocused ? "black" : void 0,
+                  backgroundColor: isSelected ? isFocused ? ACCENT_COLOR : "gray" : void 0,
+                  children: [
+                    " ",
+                    scenario.name,
+                    " "
+                  ]
+                }
+              ) }, scenario.id);
+            }),
+            hasMoreScenariosBelow && /* @__PURE__ */ jsx17(Text15, { dimColor: true, children: "\u2193 more" })
+          ] })
         ]
       }
     ),
@@ -2418,23 +2646,28 @@ var SelectScenario = ({
               ]
             }
           ) }),
-          /* @__PURE__ */ jsx17(Box14, { flexDirection: "column", children: isLoading ? /* @__PURE__ */ jsx17(Text15, { dimColor: true, children: "Loading..." }) : actionItems.map((item, index) => {
-            const isSelected = index === actionIndex;
-            const isFocused = focusPanel === "actions";
-            const label = item.type === "new" ? item.label : item.doc.filename;
-            return /* @__PURE__ */ jsx17(Box14, { children: /* @__PURE__ */ jsxs12(
-              Text15,
-              {
-                color: isSelected && isFocused ? "black" : item.type === "new" ? "green" : void 0,
-                backgroundColor: isSelected && isFocused ? ACCENT_COLOR : void 0,
-                children: [
-                  " ",
-                  label,
-                  " "
-                ]
-              }
-            ) }, item.type === "new" ? "new" : item.doc.filename);
-          }) })
+          /* @__PURE__ */ jsx17(Box14, { flexDirection: "column", overflowY: "hidden", children: isLoading ? /* @__PURE__ */ jsx17(Text15, { dimColor: true, children: "Loading..." }) : /* @__PURE__ */ jsxs12(Fragment, { children: [
+            hasMoreActionsAbove && /* @__PURE__ */ jsx17(Text15, { dimColor: true, children: "\u2191 more" }),
+            visibleActionItems.map((item, visibleIndex) => {
+              const actualIndex = actionScrollOffset + visibleIndex;
+              const isSelected = actualIndex === actionIndex;
+              const isFocused = focusPanel === "actions";
+              const label = item.type === "new" ? item.label : item.doc.filename;
+              return /* @__PURE__ */ jsx17(Box14, { children: /* @__PURE__ */ jsxs12(
+                Text15,
+                {
+                  color: isSelected && isFocused ? "black" : item.type === "new" ? "green" : void 0,
+                  backgroundColor: isSelected && isFocused ? ACCENT_COLOR : void 0,
+                  children: [
+                    " ",
+                    label,
+                    " "
+                  ]
+                }
+              ) }, item.type === "new" ? "new" : item.doc.filename);
+            }),
+            hasMoreActionsBelow && /* @__PURE__ */ jsx17(Text15, { dimColor: true, children: "\u2193 more" })
+          ] }) })
         ]
       }
     )
@@ -2444,7 +2677,7 @@ var SelectScenario = ({
 // src/tui/App.tsx
 import { jsx as jsx18 } from "react/jsx-runtime";
 var App = ({ config, initialScenarioId }) => {
-  const { exit } = useApp();
+  const { exit } = useApp2();
   const [appState, setAppState] = useState8(() => {
     if (initialScenarioId != null) {
       const scenario2 = config.scenarios.find((s) => s.id === initialScenarioId);