procedure-cli 0.1.1 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "procedure-cli",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "CLI-based AI Agent powered by AI SDK 6, Z.ai, and OpenAI",
   "type": "module",
   "bin": {
@@ -10,7 +10,10 @@
     "dev": "tsx src/cli.tsx",
     "build": "tsc",
     "typecheck": "tsc --noEmit",
-    "lint": "tsc --noEmit"
+    "lint": "tsc --noEmit",
+    "release:patch": "\"$HOME/bin/procedure-release\" patch",
+    "release:minor": "\"$HOME/bin/procedure-release\" minor",
+    "release:major": "\"$HOME/bin/procedure-release\" major"
   },
   "keywords": [
     "cli",

package/src/app.tsx

@@ -21,7 +21,7 @@ const STEP_NAMES = [
   "Architecture",
   "Product Context",
   "Generation",
-  "Powerline",
+  "Setup",
 ] as const;
 
 const EMPTY_ANSWERS: WizardAnswers = {
@@ -83,7 +83,10 @@ function getSummary(stepIndex: number, answers: WizardAnswers): string {
     case 5:
       return answers.generationSkipped ? "skipped" : "files generated";
     case 6: {
-      return answers.setupPowerline ? "Powerline: yes" : "Powerline: no";
+      const parts: string[] = [];
+      if (answers.setupPowerline) parts.push("Powerline");
+      parts.push("Git init");
+      return parts.join(", ");
     }
     default:
       return "done";

package/src/components/guttered-select.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import { Box, Text, useInput } from "ink";
+import { TextInput } from "@inkjs/ui";
 // Note: Box flexDirection="column" kept here for multi-option rendering
 
 interface Option {
@@ -62,27 +63,45 @@ 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 }: GutteredMultiSelectProps) {
+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 < options.length - 1 ? prev + 1 : prev
+        prev < allOptions.length - 1 ? prev + 1 : prev
       );
     } else if (input === " ") {
-      const option = options[activeIndex];
+      const option = allOptions[activeIndex];
       if (option) {
         setSelected((prev) => {
           const next = new Set(prev);
@@ -95,15 +114,54 @@ export function GutteredMultiSelect({ options, initialSelected, onSubmit }: Gutt
         });
       }
     } else if (key.return) {
-      onSubmit(Array.from(selected));
+      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 && (
+          <Text>
+            <Text dimColor>{"│  "}</Text>
+            <Text color="green">{"Selected: "}</Text>
+            <Text>{currentSelections.join(", ")}</Text>
+          </Text>
+        )}
+        <Text>
+          <Text dimColor>{"│  "}</Text>
+          <Text bold>{"Add custom (comma-separated):"}</Text>
+        </Text>
+        <Text>
+          <Text dimColor>{"│  "}</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]);
+            }}
+          />
+        </Text>
+      </Box>
+    );
+  }
 
   return (
     <Box flexDirection="column">
-      {options.map((option, index) => {
+      {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 dimColor>{"│  "}</Text>
@@ -113,11 +171,11 @@ export function GutteredMultiSelect({ options, initialSelected, onSubmit }: Gutt
               <Text>{"  "}</Text>
             )}
             {isSelected ? (
-              <Text color="green">{"● "}</Text>
+              <Text color={isCustomOption ? "yellow" : "green"}>{"● "}</Text>
             ) : (
               <Text dimColor>{"○ "}</Text>
             )}
-            <Text bold={isActive}>{option.label}</Text>
+            <Text bold={isActive}>{isCustomOption ? `✎ ${option.label}` : option.label}</Text>
             {option.description && (
               <Text dimColor>{" — " + option.description}</Text>
             )}
@@ -125,13 +183,22 @@ export function GutteredMultiSelect({ options, initialSelected, onSubmit }: Gutt
         );
       })}
       <Text dimColor>{"│  "}{"  ↑↓ move, space toggle, enter confirm"}</Text>
-      {selected.size > 0 && (
+      {selected.size > 0 && !selected.has(CUSTOM_SENTINEL) && (
         <Text>
           <Text dimColor>{"│  "}</Text>
           <Text color="green">{"Selected: "}</Text>
           <Text>{Array.from(selected).join(", ")}</Text>
         </Text>
       )}
+      {selected.size > 0 && selected.has(CUSTOM_SENTINEL) && (
+        <Text>
+          <Text dimColor>{"│  "}</Text>
+          <Text color="green">{"Selected: "}</Text>
+          <Text>{Array.from(selected).filter((v) => v !== CUSTOM_SENTINEL).join(", ")}</Text>
+          {selected.size > 1 && <Text dimColor>{" + custom"}</Text>}
+          {selected.size === 1 && <Text dimColor>{"custom (on confirm)"}</Text>}
+        </Text>
+      )}
     </Box>
   );
 }

package/src/lib/fs.ts

@@ -1,5 +1,6 @@
 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);
@@ -16,3 +17,7 @@ export function fileExists(filePath: string): boolean {
 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/template.ts

@@ -1,9 +1,11 @@
-import { readFileSync, writeFileSync, existsSync } from 'node:fs';
+import { readFileSync, writeFileSync, existsSync, chmodSync } from 'node:fs';
 import { resolve, dirname } from 'node:path';
 import Handlebars from 'handlebars';
-import { ensureDir, resolveTemplatePath } from './fs.js';
+import { ensureDir, resolveTemplatePath, homeBinPath } from './fs.js';
 import type { WizardAnswers } from './types.js';
 
+Handlebars.registerHelper('eq', (a: unknown, b: unknown) => a === b);
+
 export function renderTemplate(
   templatePath: string,
   data: Record<string, unknown>,
@@ -57,3 +59,103 @@ export function scaffoldAll(targetDir: string, data: WizardAnswers): void {
   ensureDir(dirname(gitignoreDest));
   writeFileSync(gitignoreDest, content, 'utf-8');
 }
+
+export interface ReleaseConflicts {
+  releaseScriptExists: boolean;
+  packageJsonHasRelease: boolean;
+  packageJsonExists: boolean;
+}
+
+export function checkReleaseConflicts(
+  projectName: string,
+  targetDir: string,
+): ReleaseConflicts {
+  const scriptPath = homeBinPath(`${projectName}-release`);
+  const pkgPath = resolve(targetDir, 'package.json');
+
+  let packageJsonExists = false;
+  let packageJsonHasRelease = false;
+
+  if (existsSync(pkgPath)) {
+    packageJsonExists = true;
+    try {
+      const pkg = JSON.parse(readFileSync(pkgPath, 'utf-8'));
+      packageJsonHasRelease = !!pkg.scripts?.['release:patch'];
+    } catch {
+      // malformed package.json — treat as no release scripts
+    }
+  }
+
+  return {
+    releaseScriptExists: existsSync(scriptPath),
+    packageJsonHasRelease,
+    packageJsonExists,
+  };
+}
+
+export interface ScaffoldReleaseResult {
+  scriptPath: string;
+  skipped: boolean;
+  reason?: string;
+}
+
+export function scaffoldRelease(
+  projectName: string,
+  data: WizardAnswers,
+): ScaffoldReleaseResult {
+  const scriptPath = homeBinPath(`${projectName}-release`);
+
+  if (existsSync(scriptPath)) {
+    return { scriptPath, skipped: true, reason: 'already exists' };
+  }
+
+  const templatePath = resolveTemplatePath('bin/release.sh.hbs');
+  const rendered = renderTemplate(templatePath, data as unknown as Record<string, unknown>);
+  ensureDir(dirname(scriptPath));
+  writeFileSync(scriptPath, rendered, 'utf-8');
+  chmodSync(scriptPath, 0o755);
+
+  return { scriptPath, skipped: false };
+}
+
+export interface PackageJsonReleaseResult {
+  created: boolean;
+  modified: boolean;
+  skipped: boolean;
+}
+
+export function ensurePackageJsonReleaseScripts(
+  targetDir: string,
+  projectName: string,
+): PackageJsonReleaseResult {
+  const pkgPath = resolve(targetDir, 'package.json');
+  const releaseScripts = {
+    'release:patch': `"$HOME/bin/${projectName}-release" patch`,
+    'release:minor': `"$HOME/bin/${projectName}-release" minor`,
+    'release:major': `"$HOME/bin/${projectName}-release" major`,
+  };
+
+  if (existsSync(pkgPath)) {
+    try {
+      const pkg = JSON.parse(readFileSync(pkgPath, 'utf-8'));
+      if (pkg.scripts?.['release:patch']) {
+        return { created: false, modified: false, skipped: true };
+      }
+      pkg.scripts = { ...pkg.scripts, ...releaseScripts };
+      writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + '\n', 'utf-8');
+      return { created: false, modified: true, skipped: false };
+    } catch {
+      // malformed — skip
+      return { created: false, modified: false, skipped: true };
+    }
+  }
+
+  const pkg = {
+    name: projectName,
+    version: '0.1.0',
+    scripts: releaseScripts,
+  };
+  ensureDir(dirname(pkgPath));
+  writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + '\n', 'utf-8');
+  return { created: true, modified: false, skipped: false };
+}

package/src/steps/generation.tsx

@@ -2,7 +2,14 @@ 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 {
+  scaffoldAll,
+  checkConflicts,
+  checkReleaseConflicts,
+  scaffoldRelease,
+  ensurePackageJsonReleaseScripts,
+} from "../lib/template.js";
+import { homeBinPath } from "../lib/fs.js";
 import type { WizardAnswers } from "../lib/types.js";
 
 interface Props {
@@ -24,13 +31,36 @@ export default function Generation({ answers, onComplete }: Props) {
     "summary" | "running" | "done" | "error"
   >("summary");
   const [errorMsg, setErrorMsg] = useState("");
+  const [releaseResult, setReleaseResult] = useState("");
 
   useEffect(() => {
     if (phase !== "running") return;
 
     try {
       const targetDir = process.cwd();
+      const projectName = answers.projectName || "untitled";
+
       scaffoldAll(targetDir, answers);
+
+      // Release script scaffolding
+      const releaseRes = scaffoldRelease(projectName, answers);
+      const pkgRes = ensurePackageJsonReleaseScripts(targetDir, projectName);
+
+      const parts: string[] = [];
+      if (releaseRes.skipped) {
+        parts.push(`~/bin/${projectName}-release (skipped, ${releaseRes.reason})`);
+      } else {
+        parts.push(`~/bin/${projectName}-release (created)`);
+      }
+      if (pkgRes.skipped) {
+        parts.push("package.json release scripts (skipped, already present)");
+      } else if (pkgRes.modified) {
+        parts.push("package.json release scripts (added)");
+      } else if (pkgRes.created) {
+        parts.push("package.json (created with release scripts)");
+      }
+      setReleaseResult(parts.join(", "));
+
       setPhase("done");
       const timer = setTimeout(() => onComplete({ generationSkipped: false }), 1500);
       return () => clearTimeout(timer);
@@ -59,6 +89,18 @@ export default function Generation({ answers, onComplete }: Props) {
       .join(", ");
 
     const conflicts = checkConflicts(process.cwd());
+    const projectName = answers.projectName || "untitled";
+    const releaseConflicts = checkReleaseConflicts(projectName, process.cwd());
+
+    const scriptDisplay = `~/bin/${projectName}-release`;
+    const scriptStatus = releaseConflicts.releaseScriptExists
+      ? "exists, will skip"
+      : "new";
+    const pkgStatus = releaseConflicts.packageJsonHasRelease
+      ? "has release scripts, will skip"
+      : releaseConflicts.packageJsonExists
+        ? "will add release scripts"
+        : "will create with release scripts";
 
     return (
       <>
@@ -114,6 +156,18 @@ export default function Generation({ answers, onComplete }: Props) {
         <GutterLine>
           <Text> </Text>
         </GutterLine>
+        <GutterLine>
+          <Text>Release setup:</Text>
+        </GutterLine>
+        <GutterLine>
+          <Text>  {scriptDisplay} → {scriptStatus}</Text>
+        </GutterLine>
+        <GutterLine>
+          <Text>  package.json → {pkgStatus}</Text>
+        </GutterLine>
+        <GutterLine>
+          <Text> </Text>
+        </GutterLine>
         <GutterLine>
           <Text>Proceed? </Text>
           <ConfirmInput onConfirm={handleConfirm} onCancel={handleCancel} />
@@ -139,8 +193,15 @@ export default function Generation({ answers, onComplete }: Props) {
   }
 
   return (
-    <GutterLine>
-      <Text color="green">All project files generated successfully.</Text>
-    </GutterLine>
+    <>
+      <GutterLine>
+        <Text color="green">All project files generated successfully.</Text>
+      </GutterLine>
+      {releaseResult && (
+        <GutterLine>
+          <Text color="green">Release: {releaseResult}</Text>
+        </GutterLine>
+      )}
+    </>
   );
 }

package/src/steps/product-context.tsx

@@ -12,6 +12,23 @@ interface Props {
 
 type Phase = "problem" | "users" | "techStack" | "coreFeatures" | "nonGoals";
 
+const CORE_FEATURE_OPTIONS = [
+  { label: "Authentication", value: "Authentication", description: "Login, signup, sessions" },
+  { label: "Authorization", value: "Authorization", description: "Roles, permissions, RBAC" },
+  { label: "API / REST", value: "API / REST", description: "RESTful endpoints" },
+  { label: "GraphQL API", value: "GraphQL API", description: "GraphQL schema & resolvers" },
+  { label: "Dashboard", value: "Dashboard", description: "Admin or user dashboard" },
+  { label: "CRUD Operations", value: "CRUD Operations", description: "Create, read, update, delete" },
+  { label: "File Upload", value: "File Upload", description: "Upload and manage files" },
+  { label: "Search", value: "Search", description: "Full-text or filtered search" },
+  { label: "Notifications", value: "Notifications", description: "Email, push, in-app" },
+  { label: "Payments", value: "Payments", description: "Billing, subscriptions, checkout" },
+  { label: "Real-time", value: "Real-time", description: "WebSockets, live updates" },
+  { label: "Analytics", value: "Analytics", description: "Usage tracking, metrics" },
+  { label: "CLI", value: "CLI", description: "Command-line interface" },
+  { label: "CI/CD", value: "CI/CD", description: "Continuous integration & deployment" },
+];
+
 const TECH_STACK_OPTIONS = [
   { label: "React", value: "React", description: "UI component library" },
   { label: "Next.js", value: "Next.js", description: "Full-stack React framework" },
@@ -98,6 +115,10 @@ export default function ProductContext({ initialValues, onComplete }: Props) {
     advanceToNext("techStack", values.join(", "));
   }
 
+  function handleCoreFeaturesSubmit(values: string[]) {
+    advanceToNext("coreFeatures", values.join(", "));
+  }
+
   // Build completed fields display
   const completedFields = PHASE_ORDER.slice(0, phaseIndex).map((key) => (
     <GutterLine key={key}>
@@ -153,13 +174,17 @@ export default function ProductContext({ initialValues, onComplete }: Props) {
       )}
 
       {currentPhase === "coreFeatures" && (
-        <GutterLine>
-          <Text bold>Core features (comma-separated): </Text>
-          <TextInput
-            placeholder="e.g. Auth, Dashboard, API..."
-            onSubmit={handleTextSubmit("coreFeatures", true)}
+        <>
+          <GutterLine>
+            <Text bold>Core features:</Text>
+          </GutterLine>
+          <GutteredMultiSelect
+            options={CORE_FEATURE_OPTIONS}
+            onSubmit={handleCoreFeaturesSubmit}
+            allowCustom
+            customPlaceholder="e.g. Export PDF, Onboarding flow..."
           />
-        </GutterLine>
+        </>
       )}
 
       {currentPhase === "nonGoals" && (

package/src/steps/stack-style.tsx

@@ -1,6 +1,5 @@
 import React, { useState } from "react";
 import { Text } from "ink";
-import { TextInput } from "@inkjs/ui";
 import { GutterLine } from "../components/gutter-line.js";
 import { GutteredSelect, GutteredMultiSelect } from "../components/guttered-select.js";
 import type { WizardAnswers } from "../lib/types.js";
@@ -42,6 +41,17 @@ const FRAMEWORK_OPTIONS = [
   { label: "Rails", value: "Rails", description: "Convention-over-config Ruby web" },
 ];
 
+const CODE_STYLE_OPTIONS = [
+  { label: "Strict mode", value: "Strict mode", description: "TypeScript strict, ESLint strict" },
+  { label: "camelCase / PascalCase", value: "camelCase for variables, PascalCase for types", description: "Standard JS/TS naming" },
+  { label: "ESM imports", value: "ESM imports, no CommonJS require", description: "Modern module syntax" },
+  { label: "Import ordering", value: "stdlib → external → internal import ordering", description: "Grouped imports" },
+  { label: "Return errors, don't throw", value: "Return errors, don't throw", description: "Explicit error handling" },
+  { label: "Functional style", value: "Prefer functional patterns", description: "Pure functions, immutability" },
+  { label: "No any type", value: "No any type, use unknown", description: "Strict type safety" },
+  { label: "JSDoc comments", value: "JSDoc for public APIs", description: "Documentation standard" },
+];
+
 /** Suggest frameworks based on selected languages */
 function getFrameworkPreselect(languages: string[]): string[] {
   const langSet = new Set(languages.map((l) => l.toLowerCase()));
@@ -128,6 +138,8 @@ export default function StackStyle({ onComplete }: Props) {
         </GutterLine>
         <GutteredMultiSelect
           options={LANGUAGE_OPTIONS}
+          allowCustom
+          customPlaceholder="e.g. Elixir, Zig, C++"
           onSubmit={(values) => {
             setSelectedLanguages(values);
             setAdvancedStep("framework");
@@ -149,6 +161,8 @@ export default function StackStyle({ onComplete }: Props) {
         <GutteredMultiSelect
           options={FRAMEWORK_OPTIONS}
           initialSelected={getFrameworkPreselect(selectedLanguages)}
+          allowCustom
+          customPlaceholder="e.g. Hono, Remix, Astro"
           onSubmit={(values) => {
             setSelectedFrameworks(values);
             setAdvancedStep("codeStyle");
@@ -168,21 +182,20 @@ export default function StackStyle({ onComplete }: Props) {
         <Text dimColor>Frameworks: {selectedFrameworks.join(", ")}</Text>
       </GutterLine>
       <GutterLine>
-        <Text bold>Code style conventions (comma-separated): </Text>
-        <TextInput
-          placeholder="e.g. strict mode, camelCase, ESM imports"
-          onSubmit={(value) => {
-            onComplete({
-              language: selectedLanguages.join(", "),
-              framework: selectedFrameworks.join(", "),
-              codeStyle: value
-                .split(",")
-                .map((s) => s.trim())
-                .filter(Boolean),
-            });
-          }}
-        />
+        <Text bold>Code style conventions:</Text>
       </GutterLine>
+      <GutteredMultiSelect
+        options={CODE_STYLE_OPTIONS}
+        allowCustom
+        customPlaceholder="e.g. tabs over spaces, max 80 chars"
+        onSubmit={(values) => {
+          onComplete({
+            language: selectedLanguages.join(", "),
+            framework: selectedFrameworks.join(", "),
+            codeStyle: values,
+          });
+        }}
+      />
     </>
   );
 }

package/templates/CLAUDE.md.hbs

@@ -94,6 +94,21 @@ Two tracking files live at the project root. Both are append-only logs — never
    - **Then**: Fix only unfixed findings → append a new `CF-` entry to CODE-FIXED.md (write to CODE-FIXED.md only, never modify CODE-REVIEW.md).
    - **Never** perform a code review during a fixing process.
 
+## Release
+
+```bash
+{{packageManager}} run release:patch   # Bump patch (0.1.0 → 0.1.1)
+{{packageManager}} run release:minor   # Bump minor (0.1.0 → 0.2.0)
+{{packageManager}} run release:major   # Bump major (0.1.0 → 1.0.0)
+```
+
+The release script (`~/bin/{{projectName}}-release`) will:
+1. Verify git working tree is clean
+2. Run build
+3. Bump version via `npm version`
+4. Push branch + tags to origin
+5. Publish to registry
+
 ## Core Principles
 
 - **Simplicity First**: Make every change as simple as possible. Minimal code impact.