procedure-cli 0.1.11 → 0.1.13

package/src/steps/build-test.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 type { WizardAnswers } from "../lib/types.js";
@@ -29,23 +29,47 @@ export default function BuildTest({ initialValues, onComplete }: Props) {
   const [fieldIndex, setFieldIndex] = useState(0);
   const [answers, setAnswers] = useState<Record<string, string>>({});
   const [error, setError] = useState("");
+  const [liveInput, setLiveInput] = useState("");
 
   const current = FIELDS[fieldIndex]!;
   const preset = initialValues?.[current.key] as string | undefined;
   const defaultVal = preset || current.fallback;
 
+  // Reset live input when navigating to a different field
+  useEffect(() => {
+    setLiveInput("");
+  }, [fieldIndex]);
+
+  useInput((input, key) => {
+    if (key.shift && key.tab && fieldIndex > 0) {
+      setFieldIndex((f) => f - 1);
+      setError("");
+    } else if (key.tab && !key.shift) {
+      const val = liveInput.trim() || answers[current.key] || defaultVal;
+      if (current.required && !val.trim()) {
+        setError(`${current.label} is required`);
+        return;
+      }
+      setError("");
+      const next = { ...answers, [current.key]: val };
+      setAnswers(next);
+      if (fieldIndex < FIELDS.length - 1) {
+        setFieldIndex((f) => f + 1);
+      } else {
+        onComplete(next as unknown as Partial<WizardAnswers>);
+      }
+    }
+  });
+
   function handleSubmit(value: string) {
     const val = value.trim() || defaultVal;
-
     if (current.required && !val) {
       setError(`${current.label} is required`);
       return;
     }
-
     setError("");
     const next = { ...answers, [current.key]: val };
     setAnswers(next);
-
     if (fieldIndex < FIELDS.length - 1) {
       setFieldIndex(fieldIndex + 1);
     } else {
@@ -53,6 +77,9 @@ export default function BuildTest({ initialValues, onComplete }: Props) {
     }
   }
 
+  const isFirst = fieldIndex === 0;
+  const isLast = fieldIndex === FIELDS.length - 1;
+
   return (
     <>
       {FIELDS.slice(0, fieldIndex).map((f) => (
@@ -67,13 +94,21 @@ export default function BuildTest({ initialValues, onComplete }: Props) {
         <Text bold>{current.label}</Text>
         <Text color={C.overlay1}> ({defaultVal})</Text>
         <Text bold>: </Text>
-        <TextInput placeholder={defaultVal} onSubmit={handleSubmit} />
+        <TextInput placeholder={defaultVal} onChange={setLiveInput} onSubmit={handleSubmit} />
       </GutterLine>
+
       {error && (
         <GutterLine>
           <Text color={C.red}>{error}</Text>
         </GutterLine>
       )}
+
+      <GutterLine>
+        <Text color={C.overlay1}>
+          {!isFirst ? "Shift+Tab prev  " : ""}
+          {isLast ? "Tab / Enter confirm" : "Tab next  Enter confirm"}
+        </Text>
+      </GutterLine>
     </>
   );
 }

package/src/steps/powerline.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Text } from "ink";
+import { Text, useInput } from "ink";
 import { ConfirmInput, Spinner } from "@inkjs/ui";
 import { GutterLine } from "../components/gutter-line.js";
 import { setupPowerline } from "../lib/powerline.js";
@@ -38,6 +38,16 @@ export default function Powerline({ answers, onComplete }: Props) {
   const [errorMsg, setErrorMsg] = useState("");
   const [setupResult, setSetupResult] = useState<SetupResult>({});
 
+  useInput(
+    (input, key) => {
+      if (key.shift && key.tab) {
+        if (phase === "ask-git") setPhase("ask-powerline");
+        else if (phase === "ask-release") setPhase("ask-git");
+      }
+    },
+    { isActive: phase === "ask-git" || phase === "ask-release" }
+  );
+
   function runSetup(powerline: boolean, git: boolean, release: boolean) {
     setPhase("running");
     try {
@@ -129,6 +139,9 @@ export default function Powerline({ answers, onComplete }: Props) {
             onCancel={() => { setWantGit(false); setPhase("ask-release"); }}
           />
         </GutterLine>
+        <GutterLine>
+          <Text color={C.overlay1}>{"Shift+Tab prev  y/n answer"}</Text>
+        </GutterLine>
       </>
     );
   }
@@ -173,6 +186,9 @@ export default function Powerline({ answers, onComplete }: Props) {
             onCancel={() => { setWantRelease(false); runSetup(wantPowerline, wantGit, false); }}
           />
         </GutterLine>
+        <GutterLine>
+          <Text color={C.overlay1}>{"Shift+Tab prev  y/n answer"}</Text>
+        </GutterLine>
       </>
     );
   }

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>
         </>
       )}