procedure-cli 0.1.0

package/src/lib/types.ts

@@ -0,0 +1,68 @@
+export type StepId =
+  | 'project-info'
+  | 'stack-style'
+  | 'build-test'
+  | 'architecture'
+  | 'product-context'
+  | 'generation'
+  | 'powerline';
+
+export interface UserStoryScenario {
+  name: string;
+  given: string;
+  when: string;
+  then: string;
+}
+
+export interface UserStory {
+  title: string;
+  asA: string;
+  iWant: string;
+  soThat: string;
+  feature: string;
+  scenarios: UserStoryScenario[];
+}
+
+export interface EnvVar {
+  key: string;
+  comment: string;
+}
+
+export interface WizardAnswers {
+  // Step 1: Project Info
+  projectName: string;
+  description: string;
+  packageManager: string;
+  license: string;
+
+  // Step 2: Stack & Style
+  codeStyle: string[];
+  framework: string;
+  language: string;
+
+  // Step 3: Build & Test
+  buildCommand: string;
+  testCommand: string;
+  typecheckCommand: string;
+  lintCommand: string;
+  prCommand: string;
+
+  // Step 4: Architecture
+  architecture: string;
+  architectureNotes: string;
+
+  // Step 5: Product Context
+  problem: string;
+  users: string;
+  coreFeatures: string[];
+  nonGoals: string[];
+  techStack: string;
+  userStories: UserStory[];
+  envVars: EnvVar[];
+
+  // Step 6: Generation
+  generationSkipped: boolean;
+
+  // Step 7: Powerline
+  setupPowerline: boolean;
+}

package/src/providers/openai.ts

@@ -0,0 +1,5 @@
+import { createOpenAI } from "@ai-sdk/openai";
+
+export const openai = createOpenAI({
+  apiKey: process.env.OPENAI_API_KEY,
+});

package/src/providers/zai.ts

@@ -0,0 +1,7 @@
+import { createOpenAICompatible } from "@ai-sdk/openai-compatible";
+
+export const zai = createOpenAICompatible({
+  name: "zai",
+  baseURL: "https://api.z.ai/v1",
+  apiKey: process.env.ZAI_API_KEY,
+});

package/src/steps/architecture.tsx

@@ -0,0 +1,71 @@
+import React, { useState } from "react";
+import { Text } from "ink";
+import { GutterLine } from "../components/gutter-line.js";
+import { GutteredSelect } from "../components/guttered-select.js";
+import type { WizardAnswers } from "../lib/types.js";
+
+interface Props {
+  onComplete: (answers: Partial<WizardAnswers>) => void;
+}
+
+const ARCHITECTURE_OPTIONS = [
+  { label: "Monorepo — Multiple packages in one repository", value: "Monorepo" },
+  { label: "MVC — Model-View-Controller separation", value: "MVC" },
+  { label: "Feature folders — Co-located components, hooks, utils per feature", value: "Feature folders" },
+  { label: "Layered — Presentation > Business > Data access layers", value: "Layered" },
+  { label: "Microservices — Independent deployable services", value: "Microservices" },
+  { label: "Serverless — Function-based, event-driven architecture", value: "Serverless" },
+  { label: "Modular monolith — Single deploy, strict module boundaries", value: "Modular monolith" },
+];
+
+const ARCHITECTURE_NOTES: Record<string, string> = {
+  Monorepo:
+    "Shared packages in packages/, apps in apps/. Use workspace protocol for cross-references.",
+  MVC:
+    "Controllers handle HTTP, models handle data, views handle presentation. Keep business logic in models.",
+  "Feature folders":
+    "Each feature owns its components, hooks, utils, and tests. Shared code in shared/ or lib/.",
+  Layered:
+    "Strict dependency direction: Presentation -> Business -> Data. No skipping layers.",
+  Microservices:
+    "Each service owns its data store. Communicate via APIs or message queues. Deploy independently.",
+  Serverless:
+    "One function per endpoint. Keep functions stateless. Use managed services for state and storage.",
+  "Modular monolith":
+    "Define explicit module boundaries with public APIs. No direct cross-module database access.",
+};
+
+export default function Architecture({ onComplete }: Props) {
+  const [selected, setSelected] = useState<string | null>(null);
+
+  function handleChange(value: string) {
+    const notes = ARCHITECTURE_NOTES[value] ?? "";
+    setSelected(value);
+    // Use setTimeout to allow React to render the selection before completing
+    setTimeout(() => {
+      onComplete({ architecture: value, architectureNotes: notes });
+    }, 100);
+  }
+
+  if (selected) {
+    return (
+      <>
+        <GutterLine>
+          <Text dimColor>Architecture: {selected}</Text>
+        </GutterLine>
+        <GutterLine>
+          <Text dimColor>Notes: {ARCHITECTURE_NOTES[selected]}</Text>
+        </GutterLine>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <GutterLine>
+        <Text bold>Architecture pattern:</Text>
+      </GutterLine>
+      <GutteredSelect options={ARCHITECTURE_OPTIONS} onChange={handleChange} />
+    </>
+  );
+}

package/src/steps/build-test.tsx

@@ -0,0 +1,78 @@
+import React, { useState } from "react";
+import { Text } from "ink";
+import { TextInput } from "@inkjs/ui";
+import { GutterLine } from "../components/gutter-line.js";
+import type { WizardAnswers } from "../lib/types.js";
+
+interface Props {
+  initialValues?: Partial<WizardAnswers>;
+  onComplete: (answers: Partial<WizardAnswers>) => void;
+}
+
+type Field =
+  | "buildCommand"
+  | "testCommand"
+  | "typecheckCommand"
+  | "lintCommand"
+  | "prCommand";
+
+const FIELDS: { key: Field; label: string; fallback: string; required: boolean }[] = [
+  { key: "buildCommand", label: "Build command", fallback: "npm run build", required: true },
+  { key: "testCommand", label: "Test command", fallback: "npm run test", required: true },
+  { key: "typecheckCommand", label: "Typecheck command", fallback: "tsc --noEmit", required: false },
+  { key: "lintCommand", label: "Lint command", fallback: "npm run lint", required: false },
+  { key: "prCommand", label: "Pre-PR command", fallback: "npm run lint && npm run test", required: false },
+];
+
+export default function BuildTest({ initialValues, onComplete }: Props) {
+  const [fieldIndex, setFieldIndex] = useState(0);
+  const [answers, setAnswers] = useState<Record<string, string>>({});
+  const [error, setError] = useState("");
+
+  const current = FIELDS[fieldIndex]!;
+  const preset = initialValues?.[current.key] as string | undefined;
+  const defaultVal = preset || current.fallback;
+
+  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 {
+      onComplete(next as unknown as Partial<WizardAnswers>);
+    }
+  }
+
+  return (
+    <>
+      {FIELDS.slice(0, fieldIndex).map((f) => (
+        <GutterLine key={f.key}>
+          <Text dimColor>
+            {f.label}: {answers[f.key]}
+          </Text>
+        </GutterLine>
+      ))}
+
+      <GutterLine>
+        <Text bold>{current.label}</Text>
+        <Text dimColor> ({defaultVal})</Text>
+        <Text bold>: </Text>
+        <TextInput placeholder={defaultVal} onSubmit={handleSubmit} />
+      </GutterLine>
+      {error && (
+        <GutterLine>
+          <Text color="red">{error}</Text>
+        </GutterLine>
+      )}
+    </>
+  );
+}

package/src/steps/generation.tsx

@@ -0,0 +1,146 @@
+import React, { useEffect, useState } from "react";
+import { Text } from "ink";
+import { ConfirmInput, Spinner } from "@inkjs/ui";
+import { GutterLine } from "../components/gutter-line.js";
+import { scaffoldAll, checkConflicts } from "../lib/template.js";
+import type { WizardAnswers } from "../lib/types.js";
+
+interface Props {
+  answers: WizardAnswers;
+  onComplete: (partial: Partial<WizardAnswers>) => void;
+}
+
+const FILES_TO_GENERATE = [
+  "CLAUDE.md",
+  "README.md",
+  "docs/PRD.md",
+  "docs/USER-STORIES.md",
+  ".env.example",
+  ".gitignore",
+];
+
+export default function Generation({ answers, onComplete }: Props) {
+  const [phase, setPhase] = useState<
+    "summary" | "running" | "done" | "error"
+  >("summary");
+  const [errorMsg, setErrorMsg] = useState("");
+
+  useEffect(() => {
+    if (phase !== "running") return;
+
+    try {
+      const targetDir = process.cwd();
+      scaffoldAll(targetDir, answers);
+      setPhase("done");
+      const timer = setTimeout(() => onComplete({ generationSkipped: false }), 1500);
+      return () => clearTimeout(timer);
+    } catch (err) {
+      setPhase("error");
+      setErrorMsg(err instanceof Error ? err.message : String(err));
+    }
+  }, [phase]);
+
+  function handleConfirm() {
+    setPhase("running");
+  }
+
+  function handleCancel() {
+    onComplete({ generationSkipped: true });
+  }
+
+  if (phase === "summary") {
+    const techParts: string[] = [];
+    if (answers.language) techParts.push(answers.language);
+    if (answers.framework) techParts.push(answers.framework);
+    const stack = techParts.length > 0 ? techParts.join(", ") : "N/A";
+
+    const pmAndLicense = [answers.packageManager, answers.license]
+      .filter(Boolean)
+      .join(", ");
+
+    const conflicts = checkConflicts(process.cwd());
+
+    return (
+      <>
+        <GutterLine>
+          <Text>
+            Project: <Text bold>{answers.projectName || "untitled"}</Text>
+            {" — "}
+            {answers.description || "no description"}
+          </Text>
+        </GutterLine>
+        <GutterLine>
+          <Text>
+            Stack: {stack}
+            {pmAndLicense ? ` (${pmAndLicense})` : ""}
+          </Text>
+        </GutterLine>
+        <GutterLine>
+          <Text>
+            Build: {answers.buildCommand || "N/A"} | Test:{" "}
+            {answers.testCommand || "N/A"}
+          </Text>
+        </GutterLine>
+        <GutterLine>
+          <Text>Architecture: {answers.architecture || "N/A"}</Text>
+        </GutterLine>
+        <GutterLine>
+          <Text>
+            Features: {answers.coreFeatures.length} | Non-goals:{" "}
+            {answers.nonGoals.length}
+          </Text>
+        </GutterLine>
+        <GutterLine>
+          <Text> </Text>
+        </GutterLine>
+        <GutterLine>
+          <Text>Files to generate:</Text>
+        </GutterLine>
+        <GutterLine>
+          <Text>  {FILES_TO_GENERATE.join(", ")}</Text>
+        </GutterLine>
+        {conflicts.length > 0 && (
+          <>
+            <GutterLine>
+              <Text> </Text>
+            </GutterLine>
+            <GutterLine>
+              <Text color="yellow">
+                {"⚠ Will overwrite: "}{conflicts.join(", ")}
+              </Text>
+            </GutterLine>
+          </>
+        )}
+        <GutterLine>
+          <Text> </Text>
+        </GutterLine>
+        <GutterLine>
+          <Text>Proceed? </Text>
+          <ConfirmInput onConfirm={handleConfirm} onCancel={handleCancel} />
+        </GutterLine>
+      </>
+    );
+  }
+
+  if (phase === "running") {
+    return (
+      <GutterLine>
+        <Spinner label="Generating project files..." />
+      </GutterLine>
+    );
+  }
+
+  if (phase === "error") {
+    return (
+      <GutterLine>
+        <Text color="red">Error generating files: {errorMsg}</Text>
+      </GutterLine>
+    );
+  }
+
+  return (
+    <GutterLine>
+      <Text color="green">All project files generated successfully.</Text>
+    </GutterLine>
+  );
+}

package/src/steps/powerline.tsx

@@ -0,0 +1,149 @@
+import React, { useState } from "react";
+import { Text } from "ink";
+import { ConfirmInput, Spinner } from "@inkjs/ui";
+import { GutterLine } from "../components/gutter-line.js";
+import { setupPowerline } from "../lib/powerline.js";
+import { initGit } from "../lib/git.js";
+import type { WizardAnswers } from "../lib/types.js";
+
+interface Props {
+  answers: WizardAnswers;
+  onComplete: (answers: Partial<WizardAnswers>) => void;
+}
+
+type Phase =
+  | "ask-powerline"
+  | "ask-git"
+  | "running"
+  | "done"
+  | "error";
+
+interface SetupResult {
+  gitCommitted?: boolean;
+  gitWarning?: string;
+}
+
+export default function Powerline({ answers, onComplete }: Props) {
+  const [phase, setPhase] = useState<Phase>("ask-powerline");
+  const [wantPowerline, setWantPowerline] = useState(false);
+  const [wantGit, setWantGit] = useState(false);
+  const [errorMsg, setErrorMsg] = useState("");
+  const [setupResult, setSetupResult] = useState<SetupResult>({});
+
+  function runSetup(powerline: boolean, git: boolean) {
+    setPhase("running");
+    try {
+      const targetDir = process.cwd();
+      if (powerline) {
+        setupPowerline(targetDir);
+      }
+      if (git) {
+        const gitResult = initGit(targetDir);
+        setSetupResult({
+          gitCommitted: gitResult.committed,
+          gitWarning: gitResult.committed ? undefined : gitResult.reason,
+        });
+      }
+      setPhase("done");
+      setTimeout(() => onComplete({ setupPowerline: powerline }), 1000);
+    } catch (err) {
+      setPhase("error");
+      setErrorMsg(err instanceof Error ? err.message : String(err));
+    }
+  }
+
+  if (phase === "ask-powerline") {
+    return (
+      <>
+        <GutterLine>
+          <Text bold>Setup Claude Powerline status bar?</Text>
+        </GutterLine>
+        <GutterLine>
+          <ConfirmInput
+            onConfirm={() => {
+              setWantPowerline(true);
+              setPhase("ask-git");
+            }}
+            onCancel={() => {
+              setWantPowerline(false);
+              setPhase("ask-git");
+            }}
+          />
+        </GutterLine>
+      </>
+    );
+  }
+
+  if (phase === "ask-git") {
+    return (
+      <>
+        {wantPowerline && (
+          <GutterLine>
+            <Text dimColor>Powerline: yes</Text>
+          </GutterLine>
+        )}
+        <GutterLine>
+          <Text bold>Initialize git repository?</Text>
+        </GutterLine>
+        <GutterLine>
+          <ConfirmInput
+            onConfirm={() => {
+              setWantGit(true);
+              runSetup(wantPowerline, true);
+            }}
+            onCancel={() => {
+              setWantGit(false);
+              runSetup(wantPowerline, false);
+            }}
+          />
+        </GutterLine>
+      </>
+    );
+  }
+
+  if (phase === "running") {
+    return (
+      <GutterLine>
+        <Spinner label="Running setup tasks..." />
+      </GutterLine>
+    );
+  }
+
+  if (phase === "error") {
+    return (
+      <GutterLine>
+        <Text color="red">Setup error: {errorMsg}</Text>
+      </GutterLine>
+    );
+  }
+
+  return (
+    <>
+      {wantPowerline && (
+        <GutterLine>
+          <Text color="green">Powerline configured.</Text>
+        </GutterLine>
+      )}
+      {wantGit && setupResult.gitCommitted && (
+        <GutterLine>
+          <Text color="green">Git repository initialized.</Text>
+        </GutterLine>
+      )}
+      {wantGit && !setupResult.gitCommitted && setupResult.gitWarning && (
+        <GutterLine>
+          <Text color="yellow">{"⚠ Git: "}{setupResult.gitWarning}</Text>
+        </GutterLine>
+      )}
+      {!wantPowerline && !wantGit && (
+        <GutterLine>
+          <Text dimColor>No extras setup.</Text>
+        </GutterLine>
+      )}
+      <GutterLine>
+        <Text color="green" bold>
+          Setup complete!
+        </Text>
+      </GutterLine>
+    </>
+  );
+}