procedure-cli 0.1.0

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "procedure-cli",
+  "version": "0.1.0",
+  "description": "CLI-based AI Agent powered by AI SDK 6, Z.ai, and OpenAI",
+  "type": "module",
+  "bin": {
+    "procedure": "./dist/cli.js"
+  },
+  "scripts": {
+    "dev": "tsx src/cli.tsx",
+    "build": "tsc",
+    "typecheck": "tsc --noEmit",
+    "lint": "tsc --noEmit"
+  },
+  "keywords": [
+    "cli",
+    "ai",
+    "agent",
+    "ink"
+  ],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@ai-sdk/openai": "^3.0.30",
+    "@ai-sdk/openai-compatible": "^2.0.30",
+    "@inkjs/ui": "^2.0.0",
+    "ai": "^6.0.94",
+    "handlebars": "^4.7.8",
+    "ink": "^6.8.0",
+    "react": "^19.2.4"
+  },
+  "devDependencies": {
+    "@types/node": "^25.3.0",
+    "@types/react": "^19.2.14",
+    "tsx": "^4.21.0",
+    "typescript": "^5.9.3"
+  }
+}

package/src/app.tsx

@@ -0,0 +1,201 @@
+import React, { useState } from "react";
+import { Box, Text, useInput } from "ink";
+import type { WizardAnswers } from "./lib/types.js";
+import type { TimelineStep } from "./components/timeline.js";
+
+import Banner from "./components/banner.js";
+import Timeline from "./components/timeline.js";
+
+import ProjectInfo from "./steps/project-info.js";
+import StackStyle from "./steps/stack-style.js";
+import BuildTest from "./steps/build-test.js";
+import Architecture from "./steps/architecture.js";
+import ProductContext from "./steps/product-context.js";
+import Generation from "./steps/generation.js";
+import Powerline from "./steps/powerline.js";
+
+const STEP_NAMES = [
+  "Project Info",
+  "Stack & Style",
+  "Build & Test",
+  "Architecture",
+  "Product Context",
+  "Generation",
+  "Powerline",
+] as const;
+
+const EMPTY_ANSWERS: WizardAnswers = {
+  projectName: "",
+  description: "",
+  packageManager: "npm",
+  license: "ISC",
+  codeStyle: [],
+  framework: "",
+  language: "",
+  buildCommand: "",
+  testCommand: "",
+  typecheckCommand: "",
+  lintCommand: "",
+  prCommand: "",
+  architecture: "",
+  architectureNotes: "",
+  problem: "",
+  users: "",
+  coreFeatures: [],
+  nonGoals: [],
+  techStack: "",
+  userStories: [],
+  envVars: [],
+  generationSkipped: false,
+  setupPowerline: false,
+};
+
+function getSummary(stepIndex: number, answers: WizardAnswers): string {
+  switch (stepIndex) {
+    case 0: {
+      const name = answers.projectName || "untitled";
+      const desc = answers.description || "no description";
+      return `${name} — ${desc}`;
+    }
+    case 1: {
+      const parts: string[] = [];
+      if (answers.language) parts.push(answers.language);
+      if (answers.framework) parts.push(answers.framework);
+      return parts.length > 0 ? parts.join(", ") : "configured";
+    }
+    case 2: {
+      const cmds: string[] = [];
+      if (answers.buildCommand) cmds.push(`build: ${answers.buildCommand}`);
+      if (answers.testCommand) cmds.push(`test: ${answers.testCommand}`);
+      return cmds.length > 0 ? cmds.join(", ") : "configured";
+    }
+    case 3: {
+      return answers.architecture || "configured";
+    }
+    case 4: {
+      const features = answers.coreFeatures.length;
+      const nonGoals = answers.nonGoals.length;
+      const parts: string[] = [];
+      if (features > 0) parts.push(`${features} feature${features !== 1 ? "s" : ""}`);
+      if (nonGoals > 0) parts.push(`${nonGoals} non-goal${nonGoals !== 1 ? "s" : ""}`);
+      return parts.length > 0 ? parts.join(", ") : "configured";
+    }
+    case 5:
+      return answers.generationSkipped ? "skipped" : "files generated";
+    case 6: {
+      return answers.setupPowerline ? "Powerline: yes" : "Powerline: no";
+    }
+    default:
+      return "done";
+  }
+}
+
+export default function App() {
+  const [currentStep, setCurrentStep] = useState(0);
+  const [answers, setAnswers] = useState<WizardAnswers>(EMPTY_ANSWERS);
+  const [finished, setFinished] = useState(false);
+
+  useInput((input, key) => {
+    if (key.escape) {
+      process.exit(0);
+    }
+  });
+
+  function handleStepComplete(partial: Partial<WizardAnswers>) {
+    const merged = { ...answers, ...partial };
+    setAnswers(merged);
+
+    if (currentStep < STEP_NAMES.length - 1) {
+      setCurrentStep(currentStep + 1);
+    } else {
+      setFinished(true);
+    }
+  }
+
+  if (finished) {
+    const steps: TimelineStep[] = STEP_NAMES.map((name, i) => ({
+      name,
+      status: "completed" as const,
+      summary: getSummary(i, answers),
+    }));
+
+    return (
+      <Box flexDirection="column" padding={1}>
+        <Banner />
+        <Timeline steps={steps}>
+          <Box />
+        </Timeline>
+        <Box marginTop={1} flexDirection="column">
+          <Text bold color="green">
+            {"✔"} Procedure CLI setup complete!
+          </Text>
+          <Text> </Text>
+          {answers.generationSkipped ? (
+            <Text dimColor>Generation was skipped — no files were written.</Text>
+          ) : (
+            <>
+              <Text>
+                Project <Text bold color="cyan">"{answers.projectName}"</Text> has been scaffolded.
+              </Text>
+              <Text dimColor>
+                Check the generated CLAUDE.md, PRD.md, and USER-STORIES.md.
+              </Text>
+            </>
+          )}
+        </Box>
+      </Box>
+    );
+  }
+
+  const steps: TimelineStep[] = STEP_NAMES.map((name, i) => {
+    if (i < currentStep) {
+      return { name, status: "completed" as const, summary: getSummary(i, answers) };
+    }
+    if (i === currentStep) {
+      return { name, status: "active" as const };
+    }
+    return { name, status: "pending" as const };
+  });
+
+  const activeContent = (
+    <>
+      {currentStep === 0 && (
+        <ProjectInfo onComplete={handleStepComplete} />
+      )}
+      {currentStep === 1 && (
+        <StackStyle onComplete={handleStepComplete} />
+      )}
+      {currentStep === 2 && (
+        <BuildTest
+          initialValues={answers}
+          onComplete={handleStepComplete}
+        />
+      )}
+      {currentStep === 3 && (
+        <Architecture onComplete={handleStepComplete} />
+      )}
+      {currentStep === 4 && (
+        <ProductContext
+          initialValues={answers}
+          onComplete={handleStepComplete}
+        />
+      )}
+      {currentStep === 5 && (
+        <Generation
+          answers={answers}
+          onComplete={handleStepComplete}
+        />
+      )}
+      {currentStep === 6 && (
+        <Powerline answers={answers} onComplete={handleStepComplete} />
+      )}
+    </>
+  );
+
+  return (
+    <Box flexDirection="column" padding={1}>
+      <Banner />
+      <Timeline steps={steps}>{activeContent}</Timeline>
+    </Box>
+  );
+}

package/src/cli.tsx

@@ -0,0 +1,6 @@
+#!/usr/bin/env node
+import React from "react";
+import { render } from "ink";
+import App from "./app.js";
+
+render(<App />);

package/src/components/banner.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { Box, Text } from "ink";
+
+const BANNER_LINES = [
+  "█▀█ █▀█ █▀█ █▀▀ █▀▀ █▀▄ █ █ █▀█ █▀▀",
+  "█▀▀ █▀▄ █ █ █   █▀▀ █ █ █ █ █▀▄ █▀▀",
+  "▀   ▀ ▀ ▀▀▀ ▀▀▀ ▀▀▀ ▀▀  ▀▀▀ ▀ ▀ ▀▀▀",
+];
+
+export default function Banner() {
+  return (
+    <Box flexDirection="column" marginBottom={0}>
+      {BANNER_LINES.map((line, i) => (
+        <Text key={i} color="cyan">
+          {line}
+        </Text>
+      ))}
+      <Text>Bootstrap any project with a battle-tested</Text>
+      <Text>CLAUDE.md, PRD, user stories, and powerline.</Text>
+      <Text dimColor>{"─".repeat(43)}</Text>
+    </Box>
+  );
+}

package/src/components/gutter-line.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { Text } from "ink";
+
+export function GutterLine({ children }: { children?: React.ReactNode }) {
+  return <Text><Text dimColor>{"│  "}</Text>{children}</Text>;
+}
+
+export function EmptyGutter() {
+  return <Text dimColor>{"│"}</Text>;
+}

package/src/components/guttered-select.tsx

@@ -0,0 +1,137 @@
+import React, { useState } from "react";
+import { Box, Text, useInput } from "ink";
+// Note: Box flexDirection="column" kept here for multi-option rendering
+
+interface Option {
+  label: string;
+  value: string;
+  description?: string;
+}
+
+interface GutteredSelectProps {
+  options: Option[];
+  onChange: (value: string) => void;
+}
+
+/**
+ * A custom Select component that renders each option with the vertical
+ * gutter prefix (│) so the timeline line stays continuous.
+ */
+export function GutteredSelect({ options, onChange }: GutteredSelectProps) {
+  const [activeIndex, setActiveIndex] = useState(0);
+
+  useInput((input, key) => {
+    if (key.upArrow) {
+      setActiveIndex((prev) => (prev > 0 ? prev - 1 : prev));
+    } else if (key.downArrow) {
+      setActiveIndex((prev) =>
+        prev < options.length - 1 ? prev + 1 : prev
+      );
+    } else if (key.return) {
+      const selected = options[activeIndex];
+      if (selected) {
+        onChange(selected.value);
+      }
+    }
+  });
+
+  return (
+    <Box flexDirection="column">
+      {options.map((option, index) => {
+        const isActive = index === activeIndex;
+        return (
+          <Text key={option.value}>
+            <Text dimColor>{"│  "}</Text>
+            {isActive ? (
+              <Text color="cyan" bold>{"❯ "}</Text>
+            ) : (
+              <Text>{"  "}</Text>
+            )}
+            <Text bold={isActive}>{option.label}</Text>
+            {option.description && (
+              <Text dimColor>{" " + option.description}</Text>
+            )}
+          </Text>
+        );
+      })}
+    </Box>
+  );
+}
+
+interface GutteredMultiSelectProps {
+  options: Option[];
+  initialSelected?: string[];
+  onSubmit: (values: string[]) => void;
+}
+
+/**
+ * Multi-select with gutter. Space to toggle, Enter to confirm.
+ * Shows ● for selected, ○ for unselected. Hint at bottom.
+ */
+export function GutteredMultiSelect({ options, initialSelected, onSubmit }: GutteredMultiSelectProps) {
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [selected, setSelected] = useState<Set<string>>(
+    new Set(initialSelected ?? [])
+  );
+
+  useInput((input, key) => {
+    if (key.upArrow) {
+      setActiveIndex((prev) => (prev > 0 ? prev - 1 : prev));
+    } else if (key.downArrow) {
+      setActiveIndex((prev) =>
+        prev < options.length - 1 ? prev + 1 : prev
+      );
+    } else if (input === " ") {
+      const option = options[activeIndex];
+      if (option) {
+        setSelected((prev) => {
+          const next = new Set(prev);
+          if (next.has(option.value)) {
+            next.delete(option.value);
+          } else {
+            next.add(option.value);
+          }
+          return next;
+        });
+      }
+    } else if (key.return) {
+      onSubmit(Array.from(selected));
+    }
+  });
+
+  return (
+    <Box flexDirection="column">
+      {options.map((option, index) => {
+        const isActive = index === activeIndex;
+        const isSelected = selected.has(option.value);
+        return (
+          <Text key={option.value}>
+            <Text dimColor>{"│  "}</Text>
+            {isActive ? (
+              <Text color="cyan" bold>{"❯ "}</Text>
+            ) : (
+              <Text>{"  "}</Text>
+            )}
+            {isSelected ? (
+              <Text color="green">{"● "}</Text>
+            ) : (
+              <Text dimColor>{"○ "}</Text>
+            )}
+            <Text bold={isActive}>{option.label}</Text>
+            {option.description && (
+              <Text dimColor>{" — " + option.description}</Text>
+            )}
+          </Text>
+        );
+      })}
+      <Text dimColor>{"│  "}{"  ↑↓ move, space toggle, enter confirm"}</Text>
+      {selected.size > 0 && (
+        <Text>
+          <Text dimColor>{"│  "}</Text>
+          <Text color="green">{"Selected: "}</Text>
+          <Text>{Array.from(selected).join(", ")}</Text>
+        </Text>
+      )}
+    </Box>
+  );
+}

package/src/components/step-indicator.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { Text } from "ink";
+
+export type StepStatus = "completed" | "active" | "pending";
+
+interface Props {
+  status: StepStatus;
+  label: string;
+}
+
+export default function StepIndicator({ status, label }: Props) {
+  if (status === "completed") {
+    return <Text><Text color="green">{"◇"}</Text>{"  "}<Text color="green">{label}</Text></Text>;
+  }
+  if (status === "active") {
+    return <Text><Text color="green" bold>{"◆"}</Text>{"  "}<Text bold color="green">{label}</Text></Text>;
+  }
+  return <Text><Text dimColor>{"○"}</Text>{"  "}<Text dimColor>{label}</Text></Text>;
+}

package/src/components/timeline.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import { Box, Text } from "ink";
+import StepIndicator from "./step-indicator.js";
+import type { StepStatus } from "./step-indicator.js";
+
+export interface TimelineStep {
+  name: string;
+  status: StepStatus;
+  summary?: string;
+}
+
+interface Props {
+  steps: TimelineStep[];
+  children: React.ReactNode;
+}
+
+export default function Timeline({ steps, children }: Props) {
+  const elements: React.ReactNode[] = [];
+
+  steps.forEach((step, i) => {
+    const isLast = i === steps.length - 1;
+
+    // Step indicator line
+    elements.push(
+      <StepIndicator key={`ind-${i}`} status={step.status} label={step.name} />
+    );
+
+    // Completed step: show summary on SEPARATE line with gutter
+    if (step.status === "completed" && step.summary) {
+      elements.push(
+        <Text key={`sum-${i}`} dimColor>{"│  "}{step.summary}</Text>
+      );
+    }
+
+    // Active step: render children (they handle their own GutterLine)
+    if (step.status === "active") {
+      elements.push(
+        <React.Fragment key={`content-${i}`}>{children}</React.Fragment>
+      );
+    }
+
+    // Gutter spacer between steps
+    if (!isLast) {
+      elements.push(<Text key={`bar-${i}`} dimColor>{"│"}</Text>);
+    }
+  });
+
+  return <Box flexDirection="column">{elements}</Box>;
+}

package/src/lib/fs.ts

@@ -0,0 +1,18 @@
+import { mkdirSync, existsSync } from 'node:fs';
+import { resolve, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+export function ensureDir(dirPath: string): void {
+  mkdirSync(dirPath, { recursive: true });
+}
+
+export function fileExists(filePath: string): boolean {
+  return existsSync(filePath);
+}
+
+export function resolveTemplatePath(templateName: string): string {
+  return resolve(__dirname, '..', '..', 'templates', templateName);
+}

package/src/lib/git.ts

@@ -0,0 +1,41 @@
+import { execSync } from 'node:child_process';
+
+function hasGitIdentity(): boolean {
+  try {
+    execSync('git config user.name', { stdio: 'ignore' });
+    execSync('git config user.email', { stdio: 'ignore' });
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+function hasStagedFiles(targetDir: string): boolean {
+  try {
+    const result = execSync('git status --porcelain', { cwd: targetDir, encoding: 'utf-8' });
+    return result.trim().length > 0;
+  } catch {
+    return false;
+  }
+}
+
+export function initGit(targetDir: string): { committed: boolean; reason?: string } {
+  const opts = { cwd: targetDir, stdio: 'ignore' as const };
+
+  execSync('git init', opts);
+  execSync('git add -A', opts);
+
+  if (!hasStagedFiles(targetDir)) {
+    return { committed: false, reason: 'Nothing to commit — directory is empty.' };
+  }
+
+  if (!hasGitIdentity()) {
+    return {
+      committed: false,
+      reason: 'Git user.name/user.email not configured. Run: git config --global user.name "Your Name" && git config --global user.email "you@example.com"',
+    };
+  }
+
+  execSync('git commit -m "Initial commit \u2014 scaffolded by Procedure CLI"', opts);
+  return { committed: true };
+}

package/src/lib/powerline.ts

@@ -0,0 +1,48 @@
+import { readFileSync, writeFileSync, copyFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+import { ensureDir, fileExists, resolveTemplatePath } from './fs.js';
+
+interface ClaudeSettings {
+  statusLine?: {
+    type: string;
+    command: string;
+    padding: number;
+  };
+  [key: string]: unknown;
+}
+
+export function setupPowerline(targetDir: string): void {
+  const claudeDir = resolve(targetDir, '.claude');
+  ensureDir(claudeDir);
+
+  const settingsPath = resolve(claudeDir, 'settings.json');
+
+  let settings: ClaudeSettings = {};
+  if (fileExists(settingsPath)) {
+    try {
+      const raw = readFileSync(settingsPath, 'utf-8');
+      settings = JSON.parse(raw) as ClaudeSettings;
+    } catch {
+      // Malformed settings.json — start fresh, original is not overwritten destructively
+      settings = {};
+    }
+  }
+
+  settings.statusLine = {
+    type: 'command',
+    command:
+      'npx -y @owloops/claude-powerline@latest --config=.claude/powerline-config.json',
+    padding: 0,
+  };
+
+  writeFileSync(settingsPath, JSON.stringify(settings, null, 2) + '\n', 'utf-8');
+
+  // Copy bundled powerline-config.json to target .claude/
+  const bundledConfig = resolve(
+    resolveTemplatePath('..'),
+    'config',
+    'powerline-config.json',
+  );
+  const destConfig = resolve(claudeDir, 'powerline-config.json');
+  copyFileSync(bundledConfig, destConfig);
+}

package/src/lib/template.ts

@@ -0,0 +1,59 @@
+import { readFileSync, writeFileSync, existsSync } from 'node:fs';
+import { resolve, dirname } from 'node:path';
+import Handlebars from 'handlebars';
+import { ensureDir, resolveTemplatePath } from './fs.js';
+import type { WizardAnswers } from './types.js';
+
+export function renderTemplate(
+  templatePath: string,
+  data: Record<string, unknown>,
+): string {
+  const source = readFileSync(templatePath, 'utf-8');
+  const template = Handlebars.compile(source);
+  return template(data);
+}
+
+export function writeTemplate(
+  templatePath: string,
+  outputPath: string,
+  data: Record<string, unknown>,
+): void {
+  const rendered = renderTemplate(templatePath, data);
+  ensureDir(dirname(outputPath));
+  writeFileSync(outputPath, rendered, 'utf-8');
+}
+
+const TEMPLATE_MAP: Array<{ template: string; output: string }> = [
+  { template: 'CLAUDE.md.hbs', output: 'CLAUDE.md' },
+  { template: 'README.md.hbs', output: 'README.md' },
+  { template: 'docs/PRD.md.hbs', output: 'docs/PRD.md' },
+  { template: 'docs/USER-STORIES.md.hbs', output: 'docs/USER-STORIES.md' },
+  { template: '.env.example.hbs', output: '.env.example' },
+];
+
+/**
+ * Check which output files already exist in the target directory.
+ * Returns a list of file paths that would be overwritten.
+ */
+export function checkConflicts(targetDir: string): string[] {
+  const allOutputs = [
+    ...TEMPLATE_MAP.map((t) => t.output),
+    '.gitignore',
+  ];
+  return allOutputs.filter((f) => existsSync(resolve(targetDir, f)));
+}
+
+export function scaffoldAll(targetDir: string, data: WizardAnswers): void {
+  for (const { template, output } of TEMPLATE_MAP) {
+    const templatePath = resolveTemplatePath(template);
+    const outputPath = resolve(targetDir, output);
+    writeTemplate(templatePath, outputPath, data as unknown as Record<string, unknown>);
+  }
+
+  // Copy static .gitignore (no templating needed)
+  const gitignoreSrc = resolveTemplatePath('.gitignore');
+  const gitignoreDest = resolve(targetDir, '.gitignore');
+  const content = readFileSync(gitignoreSrc, 'utf-8');
+  ensureDir(dirname(gitignoreDest));
+  writeFileSync(gitignoreDest, content, 'utf-8');
+}