procedure-cli 0.1.12 → 0.1.13

package/src/steps/product-context.tsx

@@ -1,5 +1,5 @@
-import React, { useState } from "react";
-import { Text } from "ink";
+import React, { useState, useEffect } from "react";
+import { Text, useInput } from "ink";
 import { TextInput } from "@inkjs/ui";
 import { GutterLine } from "../components/gutter-line.js";
 import { GutteredMultiSelect } from "../components/guttered-select.js";
@@ -57,6 +57,7 @@ export default function ProductContext({ initialValues, onComplete }: Props) {
   const [phaseIndex, setPhaseIndex] = useState(0);
   const [answers, setAnswers] = useState<Record<string, string>>({});
   const [error, setError] = useState("");
+  const [liveInput, setLiveInput] = useState("");
 
   // Prefill tech stack from Stack & Style selections (language + framework)
   const prefillTechStack: string[] = [];
@@ -74,6 +75,56 @@ export default function ProductContext({ initialValues, onComplete }: Props) {
   }
 
   const currentPhase = PHASE_ORDER[phaseIndex]!;
+  const isFirst = phaseIndex === 0;
+  const isLast = phaseIndex === PHASE_ORDER.length - 1;
+
+  // Reset live input when navigating to a different field
+  useEffect(() => {
+    setLiveInput("");
+  }, [phaseIndex]);
+
+  const isMultiSelectPhase = currentPhase === "techStack" || currentPhase === "coreFeatures";
+
+  useInput((input, key) => {
+    if (key.shift && key.tab && phaseIndex > 0) {
+      setPhaseIndex((i) => i - 1);
+      setError("");
+    } else if (key.tab && !key.shift && !isMultiSelectPhase) {
+      // Tab only advances text phases — multi-select phases use Enter to confirm
+      const required = currentPhase === "problem" || currentPhase === "users";
+      const val = liveInput.trim() || answers[currentPhase] || "";
+      if (required && !val) {
+        setError("This field is required");
+        return;
+      }
+      setError("");
+      const next = { ...answers, [currentPhase]: val };
+      setAnswers(next);
+      if (phaseIndex < PHASE_ORDER.length - 1) {
+        setPhaseIndex((i) => i + 1);
+      } else {
+        finalize(next);
+      }
+    }
+  });
+
+  function finalize(data: Record<string, string>) {
+    onComplete({
+      problem: data.problem,
+      users: data.users,
+      techStack: data.techStack,
+      coreFeatures: (data.coreFeatures || "")
+        .split(",")
+        .map((s) => s.trim())
+        .filter(Boolean),
+      nonGoals: (data.nonGoals || "")
+        .split(",")
+        .map((s) => s.trim())
+        .filter(Boolean),
+      userStories: [],
+      envVars: [],
+    });
+  }
 
   function advanceToNext(key: string, value: string) {
     const next = { ...answers, [key]: value };
@@ -83,21 +134,7 @@ export default function ProductContext({ initialValues, onComplete }: Props) {
     if (phaseIndex < PHASE_ORDER.length - 1) {
       setPhaseIndex(phaseIndex + 1);
     } else {
-      onComplete({
-        problem: next.problem,
-        users: next.users,
-        techStack: next.techStack,
-        coreFeatures: (next.coreFeatures || "")
-          .split(",")
-          .map((s) => s.trim())
-          .filter(Boolean),
-        nonGoals: (next.nonGoals || "")
-          .split(",")
-          .map((s) => s.trim())
-          .filter(Boolean),
-        userStories: [],
-        envVars: [],
-      });
+      finalize(next);
     }
   }
 
@@ -105,7 +142,7 @@ export default function ProductContext({ initialValues, onComplete }: Props) {
     return (value: string) => {
       const val = value.trim();
       if (required && !val) {
-        setError(`This field is required`);
+        setError("This field is required");
         return;
       }
       advanceToNext(key, val);
@@ -142,23 +179,35 @@ export default function ProductContext({ initialValues, onComplete }: Props) {
       {completedFields}
 
       {currentPhase === "problem" && (
-        <GutterLine>
-          <Text bold>What problem does this solve? </Text>
-          <TextInput
-            placeholder="Describe the core problem..."
-            onSubmit={handleTextSubmit("problem", true)}
-          />
-        </GutterLine>
+        <>
+          <GutterLine>
+            <Text bold>What problem does this solve? </Text>
+            <TextInput
+              placeholder="Describe the core problem..."
+              onChange={setLiveInput}
+              onSubmit={handleTextSubmit("problem", true)}
+            />
+          </GutterLine>
+          <GutterLine>
+            <Text color={C.overlay1}>{"Tab next  Enter confirm"}</Text>
+          </GutterLine>
+        </>
       )}
 
       {currentPhase === "users" && (
-        <GutterLine>
-          <Text bold>Who are the users? </Text>
-          <TextInput
-            placeholder={usersPlaceholder}
-            onSubmit={handleTextSubmit("users", true)}
-          />
-        </GutterLine>
+        <>
+          <GutterLine>
+            <Text bold>Who are the users? </Text>
+            <TextInput
+              placeholder={usersPlaceholder}
+              onChange={setLiveInput}
+              onSubmit={handleTextSubmit("users", true)}
+            />
+          </GutterLine>
+          <GutterLine>
+            <Text color={C.overlay1}>{"Shift+Tab prev  Tab next  Enter confirm"}</Text>
+          </GutterLine>
+        </>
       )}
 
       {currentPhase === "techStack" && (
@@ -171,6 +220,9 @@ export default function ProductContext({ initialValues, onComplete }: Props) {
             initialSelected={prefillTechStack}
             onSubmit={handleTechStackSubmit}
           />
+          <GutterLine>
+            <Text color={C.overlay1}>{"Shift+Tab prev  ↑↓ move  Space toggle  Enter confirm"}</Text>
+          </GutterLine>
         </>
       )}
 
@@ -185,17 +237,26 @@ export default function ProductContext({ initialValues, onComplete }: Props) {
             allowCustom
             customPlaceholder="e.g. Export PDF, Onboarding flow..."
           />
+          <GutterLine>
+            <Text color={C.overlay1}>{"Shift+Tab prev  ↑↓ move  Space toggle  Enter confirm"}</Text>
+          </GutterLine>
         </>
       )}
 
       {currentPhase === "nonGoals" && (
-        <GutterLine>
-          <Text bold>Non-goals (comma-separated): </Text>
-          <TextInput
-            placeholder="e.g. Mobile app, Real-time sync..."
-            onSubmit={handleTextSubmit("nonGoals", false)}
-          />
-        </GutterLine>
+        <>
+          <GutterLine>
+            <Text bold>Non-goals (comma-separated): </Text>
+            <TextInput
+              placeholder="e.g. Mobile app, Real-time sync..."
+              onChange={setLiveInput}
+              onSubmit={handleTextSubmit("nonGoals", false)}
+            />
+          </GutterLine>
+          <GutterLine>
+            <Text color={C.overlay1}>{"Shift+Tab prev  Tab / Enter confirm"}</Text>
+          </GutterLine>
+        </>
       )}
 
       {error && (

package/src/steps/project-info.tsx

@@ -1,5 +1,5 @@
-import React, { useState } from "react";
-import { Text } from "ink";
+import React, { useState, useEffect } from "react";
+import { Text, useInput } from "ink";
 import { TextInput } from "@inkjs/ui";
 import { GutterLine } from "../components/gutter-line.js";
 import { GutteredSelect } from "../components/guttered-select.js";
@@ -38,8 +38,39 @@ export default function ProjectInfo({ onComplete }: Props) {
   const [stepIndex, setStepIndex] = useState(0);
   const [answers, setAnswers] = useState<Record<string, string>>({});
   const [error, setError] = useState("");
+  const [liveInput, setLiveInput] = useState("");
 
   const currentStep = STEP_ORDER[stepIndex]!;
+  const isFirst = stepIndex === 0;
+
+  // Reset live input when navigating to a different field
+  useEffect(() => {
+    setLiveInput("");
+  }, [stepIndex]);
+
+  const isSelectStep = currentStep === "packageManager" || currentStep === "license";
+
+  useInput((input, key) => {
+    if (key.shift && key.tab && stepIndex > 0) {
+      setStepIndex((i) => i - 1);
+      setError("");
+    } else if (key.tab && !key.shift && !isSelectStep) {
+      // Tab only advances text steps — select steps require an explicit Enter selection
+      const val = liveInput.trim() || answers[currentStep] || "";
+      if (!val) {
+        setError(
+          currentStep === "projectName"
+            ? "Project name is required"
+            : "Description is required"
+        );
+        return;
+      }
+      setError("");
+      const next = { ...answers, [currentStep]: val };
+      setAnswers(next);
+      setStepIndex((i) => i + 1);
+    }
+  });
 
   function advance(key: string, value: string) {
     const next = { ...answers, [key]: value };
@@ -89,17 +120,27 @@ export default function ProjectInfo({ onComplete }: Props) {
       {completed}
 
       {currentStep === "projectName" && (
-        <GutterLine>
-          <Text bold>Project name: </Text>
-          <TextInput placeholder="..." onSubmit={handleTextSubmit} />
-        </GutterLine>
+        <>
+          <GutterLine>
+            <Text bold>Project name: </Text>
+            <TextInput placeholder="..." onChange={setLiveInput} onSubmit={handleTextSubmit} />
+          </GutterLine>
+          <GutterLine>
+            <Text color={C.overlay1}>{"Tab next  Enter confirm"}</Text>
+          </GutterLine>
+        </>
       )}
 
       {currentStep === "description" && (
-        <GutterLine>
-          <Text bold>One-line description: </Text>
-          <TextInput placeholder="..." onSubmit={handleTextSubmit} />
-        </GutterLine>
+        <>
+          <GutterLine>
+            <Text bold>One-line description: </Text>
+            <TextInput placeholder="..." onChange={setLiveInput} onSubmit={handleTextSubmit} />
+          </GutterLine>
+          <GutterLine>
+            <Text color={C.overlay1}>{"Shift+Tab prev  Tab next  Enter confirm"}</Text>
+          </GutterLine>
+        </>
       )}
 
       {currentStep === "packageManager" && (
@@ -111,6 +152,9 @@ export default function ProjectInfo({ onComplete }: Props) {
             options={PACKAGE_MANAGER_OPTIONS}
             onChange={handleSelectChange("packageManager")}
           />
+          <GutterLine>
+            <Text color={C.overlay1}>{"Shift+Tab prev  ↑↓ move  Enter select"}</Text>
+          </GutterLine>
         </>
       )}
 
@@ -123,6 +167,9 @@ export default function ProjectInfo({ onComplete }: Props) {
             options={LICENSE_OPTIONS}
             onChange={handleSelectChange("license")}
           />
+          <GutterLine>
+            <Text color={C.overlay1}>{"Shift+Tab prev  ↑↓ move  Enter select"}</Text>
+          </GutterLine>
         </>
       )}