procedure-cli 0.1.13 → 0.1.14

package/src/app.tsx

@@ -1,213 +0,0 @@
-import React, { useState } from "react";
-import { Box, Text, useInput } from "ink";
-import { C } from "./theme.js";
-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",
-  "Setup",
-] 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,
-  setupGit: false,
-  setupRelease: 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: {
-      const parts: string[] = [];
-      if (answers.setupPowerline) parts.push("Powerline");
-      if (answers.setupGit) parts.push("Git");
-      if (answers.setupRelease) parts.push("Release scripts");
-      return parts.length > 0 ? parts.join(", ") : "skipped";
-    }
-    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);
-    }
-    if (finished && key.return) {
-      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={C.green}>
-            {"✔"} Procedure CLI setup complete!
-          </Text>
-          <Text> </Text>
-          {answers.generationSkipped ? (
-            <Text color={C.overlay1}>Generation was skipped — no files were written.</Text>
-          ) : (
-            <>
-              <Text>
-                Project <Text bold color={C.sapphire}>"{answers.projectName}"</Text> has been scaffolded.
-              </Text>
-              <Text color={C.overlay1}>
-                Check the generated CLAUDE.md, PRD.md, and USER-STORIES.md.
-              </Text>
-            </>
-          )}
-          <Text> </Text>
-          <Text color={C.overlay1}>Press Enter to exit.</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

@@ -1,19 +0,0 @@
-#!/usr/bin/env node
-import React from "react";
-import { render } from "ink";
-import { readdirSync } from "node:fs";
-import App from "./app.js";
-
-const entries = readdirSync(process.cwd()).filter((e) => e !== ".DS_Store");
-if (entries.length > 0) {
-  const sample = entries.slice(0, 3).join(", ");
-  const extra = entries.length > 3 ? `, +${entries.length - 3} more` : "";
-  console.error(`\nWarning: current directory is not empty.`);
-  console.error(`  Found: ${sample}${extra}`);
-  console.error(`  Existing files can be overwritten during Step 6 (Generation).`);
-  console.error(`  Recommended for a fresh project:`);
-  console.error(`    mkdir my-project && cd my-project`);
-  console.error(`    npx procedure-cli   (or: npx @b3awesome/procedure)\n`);
-}
-
-render(<App />);

package/src/components/banner.tsx

@@ -1,23 +0,0 @@
-import React from "react";
-import { Box, Text } from "ink";
-import { C } from "../theme.js";
-
-const BANNER_LINES = [
-  "█▀█ █▀█ █▀█ █▀▀ █▀▀ █▀▄ █ █ █▀█ █▀▀",
-  "█▀▀ █▀▄ █ █ █   █▀▀ █ █ █ █ █▀▄ █▀▀",
-  "▀   ▀ ▀ ▀▀▀ ▀▀▀ ▀▀▀ ▀▀  ▀▀▀ ▀ ▀ ▀▀▀",
-];
-
-export default function Banner() {
-  return (
-    <Box flexDirection="column" marginBottom={0}>
-      {BANNER_LINES.map((line, i) => (
-        <Text key={i} color={C.mauve}>
-          {line}
-        </Text>
-      ))}
-      <Text>Bootsrap any project with a battle-tested Claude.md</Text>
-      <Text color={C.overlay1}>{"─".repeat(43)}</Text>
-    </Box>
-  );
-}

package/src/components/gutter-line.tsx

@@ -1,16 +0,0 @@
-import React from "react";
-import { Box, Text } from "ink";
-import { C } from "../theme.js";
-
-export function GutterLine({ children }: { children?: React.ReactNode }) {
-  return (
-    <Box flexDirection="row">
-      <Text color={C.overlay1}>{"│  "}</Text>
-      {children}
-    </Box>
-  );
-}
-
-export function EmptyGutter() {
-  return <Text color={C.overlay1}>{"│"}</Text>;
-}

package/src/components/guttered-select.tsx

@@ -1,231 +0,0 @@
-import React, { useState } from "react";
-import { Box, Text, useInput } from "ink";
-import { TextInput } from "@inkjs/ui";
-import { C } from "../theme.js";
-// 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;
-  maxVisible?: number;
-}
-
-/**
- * A custom Select component that renders each option with the vertical
- * gutter prefix (│) so the timeline line stays continuous.
- * Shows at most `maxVisible` options at a time with scroll indicators.
- */
-export function GutteredSelect({ options, onChange, maxVisible = 5 }: 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);
-      }
-    }
-  });
-
-  // Sliding window: keep active item visible
-  const windowSize = Math.min(maxVisible, options.length);
-  const scrollOffset = Math.min(
-    Math.max(0, activeIndex - Math.floor(windowSize / 2)),
-    Math.max(0, options.length - windowSize)
-  );
-  const visibleOptions = options.slice(scrollOffset, scrollOffset + windowSize);
-  const showScrollUp = scrollOffset > 0;
-  const showScrollDown = scrollOffset + windowSize < options.length;
-
-  return (
-    <Box flexDirection="column">
-      {showScrollUp && (
-        <Text>
-          <Text color={C.overlay1}>{"│  "}</Text>
-          <Text color={C.overlay1}>{"↑ more"}</Text>
-        </Text>
-      )}
-      {visibleOptions.map((option, visIndex) => {
-        const index = scrollOffset + visIndex;
-        const isActive = index === activeIndex;
-        return (
-          <Text key={option.value}>
-            <Text color={C.overlay1}>{"│  "}</Text>
-            {isActive ? (
-              <Text color={C.mauve} bold>{"❯ "}</Text>
-            ) : (
-              <Text>{"  "}</Text>
-            )}
-            <Text bold={isActive}>{option.label}</Text>
-            {option.description && (
-              <Text color={C.overlay1}>{" — " + option.description}</Text>
-            )}
-          </Text>
-        );
-      })}
-      {showScrollDown && (
-        <Text>
-          <Text color={C.overlay1}>{"│  "}</Text>
-          <Text color={C.overlay1}>{"↓ more"}</Text>
-        </Text>
-      )}
-      <Text color={C.overlay1}>{"│  "}{"  ↑↓ move, enter select"}</Text>
-    </Box>
-  );
-}
-
-interface GutteredMultiSelectProps {
-  options: Option[];
-  initialSelected?: string[];
-  onSubmit: (values: string[]) => void;
-  /** When true, adds a "✎ Other" option that opens a free text input */
-  allowCustom?: boolean;
-  /** Placeholder shown in the custom text input */
-  customPlaceholder?: string;
-}
-
-const CUSTOM_SENTINEL = "__custom__";
-
-/**
- * Multi-select with gutter. Space to toggle, Enter to confirm.
- * Shows ● for selected, ○ for unselected. Hint at bottom.
- * When allowCustom is true, an "Other" option lets users type custom values.
- */
-export function GutteredMultiSelect({
-  options,
-  initialSelected,
-  onSubmit,
-  allowCustom,
-  customPlaceholder,
-}: GutteredMultiSelectProps) {
-  const allOptions = allowCustom
-    ? [...options, { label: "Other (type custom)", value: CUSTOM_SENTINEL, description: "Add your own" }]
-    : options;
-
-  const [activeIndex, setActiveIndex] = useState(0);
-  const [selected, setSelected] = useState<Set<string>>(
-    new Set(initialSelected ?? [])
-  );
-  const [phase, setPhase] = useState<"selecting" | "custom">("selecting");
-
-  useInput((input, key) => {
-    if (key.upArrow) {
-      setActiveIndex((prev) => (prev > 0 ? prev - 1 : prev));
-    } else if (key.downArrow) {
-      setActiveIndex((prev) =>
-        prev < allOptions.length - 1 ? prev + 1 : prev
-      );
-    } else if (input === " ") {
-      const option = allOptions[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) {
-      if (selected.has(CUSTOM_SENTINEL)) {
-        setSelected((prev) => {
-          const next = new Set(prev);
-          next.delete(CUSTOM_SENTINEL);
-          return next;
-        });
-        setPhase("custom");
-      } else {
-        onSubmit(Array.from(selected));
-      }
-    }
-  }, { isActive: phase === "selecting" });
-
-  if (phase === "custom") {
-    const currentSelections = Array.from(selected);
-    return (
-      <Box flexDirection="column">
-        {currentSelections.length > 0 && (
-          <Box flexDirection="row">
-            <Text color={C.overlay1}>{"│  "}</Text>
-            <Text color={C.green}>{"Selected: "}</Text>
-            <Text>{currentSelections.join(", ")}</Text>
-          </Box>
-        )}
-        <Box flexDirection="row">
-          <Text color={C.overlay1}>{"│  "}</Text>
-          <Text bold>{"Add custom (comma-separated):"}</Text>
-        </Box>
-        <Box flexDirection="row">
-          <Text color={C.overlay1}>{"│  "}</Text>
-          <TextInput
-            placeholder={customPlaceholder ?? "Type here, press enter to confirm"}
-            onSubmit={(value) => {
-              const custom = value.split(",").map((s) => s.trim()).filter(Boolean);
-              onSubmit([...currentSelections, ...custom]);
-            }}
-          />
-        </Box>
-      </Box>
-    );
-  }
-
-  return (
-    <Box flexDirection="column">
-      {allOptions.map((option, index) => {
-        const isActive = index === activeIndex;
-        const isSelected = selected.has(option.value);
-        const isCustomOption = option.value === CUSTOM_SENTINEL;
-        return (
-          <Text key={option.value}>
-            <Text color={C.overlay1}>{"│  "}</Text>
-            {isActive ? (
-              <Text color={C.mauve} bold>{"❯ "}</Text>
-            ) : (
-              <Text>{"  "}</Text>
-            )}
-            {isSelected ? (
-              <Text color={isCustomOption ? C.teal : C.green}>{"● "}</Text>
-            ) : (
-              <Text color={C.overlay0}>{"○ "}</Text>
-            )}
-            <Text bold={isActive}>{isCustomOption ? `✎ ${option.label}` : option.label}</Text>
-            {option.description && (
-              <Text color={C.overlay1}>{" — " + option.description}</Text>
-            )}
-          </Text>
-        );
-      })}
-      <Text color={C.overlay1}>{"│  "}{"  ↑↓ move, space toggle, enter confirm"}</Text>
-      {selected.size > 0 && !selected.has(CUSTOM_SENTINEL) && (
-        <Text>
-          <Text color={C.overlay1}>{"│  "}</Text>
-          <Text color={C.green}>{"Selected: "}</Text>
-          <Text>{Array.from(selected).join(", ")}</Text>
-        </Text>
-      )}
-      {selected.size > 0 && selected.has(CUSTOM_SENTINEL) && (
-        <Text>
-          <Text color={C.overlay1}>{"│  "}</Text>
-          <Text color={C.green}>{"Selected: "}</Text>
-          <Text>{Array.from(selected).filter((v) => v !== CUSTOM_SENTINEL).join(", ")}</Text>
-          {selected.size > 1 && <Text color={C.overlay1}>{" + custom"}</Text>}
-          {selected.size === 1 && <Text color={C.overlay1}>{"custom (on confirm)"}</Text>}
-        </Text>
-      )}
-    </Box>
-  );
-}

package/src/components/step-indicator.tsx

@@ -1,32 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { Text } from "ink";
-import { C } from "../theme.js";
-
-export type StepStatus = "completed" | "active" | "pending";
-
-interface Props {
-  status: StepStatus;
-  label: string;
-}
-
-const ACTIVE_FRAMES = ["◆", "◈", "◇", "◈"] as const;
-
-export default function StepIndicator({ status, label }: Props) {
-  const [frame, setFrame] = useState(0);
-
-  useEffect(() => {
-    if (status !== "active") return;
-    const id = setTimeout(() => {
-      setFrame((f) => (f + 1) % ACTIVE_FRAMES.length);
-    }, 350);
-    return () => clearTimeout(id);
-  }, [status, frame]);
-
-  if (status === "completed") {
-    return <Text><Text color={C.green}>{"◇"}</Text>{"  "}<Text color={C.green}>{label}</Text></Text>;
-  }
-  if (status === "active") {
-    return <Text><Text color={C.mauve} bold>{ACTIVE_FRAMES[frame]}</Text>{"  "}<Text bold color={C.mauve}>{label}</Text></Text>;
-  }
-  return <Text><Text color={C.overlay0}>{"○"}</Text>{"  "}<Text color={C.overlay0}>{label}</Text></Text>;
-}

package/src/components/timeline.tsx

@@ -1,57 +0,0 @@
-import React from "react";
-import { Box, Text } from "ink";
-import StepIndicator from "./step-indicator.js";
-import type { StepStatus } from "./step-indicator.js";
-import { C } from "../theme.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[] = [];
-
-  // Opening corner
-  elements.push(<Text key="top" color={C.overlay1}>{"┌"}</Text>);
-
-  steps.forEach((step, i) => {
-    const isLast = i === steps.length - 1;
-    const isActive = step.status === "active";
-
-    // 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}`} color={C.overlay1}>{"│  "}{step.summary}</Text>
-      );
-    }
-
-    // Active step: render children (they handle their own GutterLine)
-    if (isActive) {
-      elements.push(
-        <React.Fragment key={`content-${i}`}>{children}</React.Fragment>
-      );
-    }
-
-    // Gutter spacer between steps
-    if (!isLast) {
-      elements.push(<Text key={`bar-${i}`} color={C.overlay1}>{"│"}</Text>);
-    }
-  });
-
-  // Closing corner
-  elements.push(<Text key="bottom" color={C.overlay1}>{"└"}</Text>);
-
-  return <Box flexDirection="column">{elements}</Box>;
-}

package/src/lib/fs.ts

@@ -1,23 +0,0 @@
-import { mkdirSync, existsSync } from 'node:fs';
-import { resolve, dirname } from 'node:path';
-import { homedir } from 'node:os';
-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);
-}
-
-export function homeBinPath(filename: string): string {
-  return resolve(homedir(), 'bin', filename);
-}

package/src/lib/git.ts

@@ -1,41 +0,0 @@
-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 };
-}