@codeyam/codeyam-cli 0.1.0-staging.483fdc2 → 0.1.0-staging.57cd50f

package/codeyam-cli/templates/editor-step-hook.py

@@ -0,0 +1,231 @@
+#!/usr/bin/env python3
+"""
+PostToolUse + Stop + UserPromptSubmit hook for editor mode step tracking.
+
+Reads .codeyam/editor-step.json and prints a reminder about the current step.
+Logs each firing to .codeyam/logs/editor-log.jsonl.
+If no state file exists, outputs nothing (not in editor mode or between features).
+"""
+
+import json
+import os
+import sys
+from datetime import datetime, timezone
+
+
+STEP_LABELS = {
+    1: "Plan",
+    2: "Prototype",
+    3: "Confirm",
+    4: "Deconstruct",
+    5: "Extract",
+    6: "Glossary",
+    7: "Analyze",
+    8: "App Scenarios",
+    9: "User Scenarios",
+    10: "Verify",
+    11: "Journal",
+    12: "Review",
+    13: "Present",
+}
+
+STEP_RESTRICTIONS = {
+    1: "Do NOT write any code. Plan and describe only. Wait for user confirmation.",
+    2: "Do NOT create scenarios or run codeyam analyze. Build fast — working prototype with real data.",
+    3: "Present a selection menu (AskUserQuestion) for confirmation. Do NOT refactor or create scenarios until approved.",
+    4: "Do NOT write any code. Read every file, identify all extractable pieces, write a numbered plan. Planning only.",
+    5: "Execute the extraction plan from step 4. Components first (no tests), then library functions via TDD. Page files must contain ZERO direct JSX.",
+    6: "Do NOT write application code or scenarios. Update the glossary only.",
+    7: "Create isolation routes for visual components, run tests for library functions. Register component scenarios via codeyam editor register.",
+    8: "Do NOT modify application code. Create and register app-level scenarios only.",
+    9: "Do NOT modify application code. Create user-persona scenarios only (or skip if no users).",
+    10: "Verify component isolation screenshots AND editor scenarios. After ANY code fix, re-register affected components. Fix only — do NOT add features.",
+    11: "Create or update the journal entry for this feature. Do NOT create a duplicate — check if one exists first.",
+    12: "Verify ALL screenshots exist and NO client-side errors (/api/editor-client-errors). Run codeyam editor audit. Do not proceed until all checks pass.",
+    13: "Show the results panel, present summary, then selection menu (AskUserQuestion): Save or make changes.",
+}
+
+
+def log_event(project_dir, event, data=None):
+    """Append a JSONL entry to .codeyam/logs/editor-log.jsonl."""
+    try:
+        logs_dir = os.path.join(project_dir, ".codeyam", "logs")
+        os.makedirs(logs_dir, exist_ok=True)
+        log_path = os.path.join(logs_dir, "editor-log.jsonl")
+        entry = {"ts": datetime.now(timezone.utc).isoformat(), "event": event}
+        if data:
+            entry.update(data)
+        with open(log_path, "a") as f:
+            f.write(json.dumps(entry) + "\n")
+    except Exception:
+        pass  # Logging is best-effort
+
+
+def detect_event():
+    """Detect whether this is a PostToolUse, Stop, or UserPromptSubmit hook from stdin."""
+    try:
+        raw = sys.stdin.read()
+        if not raw.strip():
+            return "unknown", {}
+        data = json.loads(raw)
+        # PostToolUse has tool_name; Stop has stop_hook_active; UserPromptSubmit has prompt
+        if "tool_name" in data:
+            return "post_tool_use", data
+        elif "stop_hook_active" in data:
+            return "stop", data
+        elif "prompt" in data:
+            return "user_prompt", data
+        return "unknown", data
+    except Exception:
+        return "unknown", {}
+
+
+def main():
+    project_dir = os.environ.get("CLAUDE_PROJECT_DIR", os.getcwd())
+    state_path = os.path.join(project_dir, ".codeyam", "editor-step.json")
+    prompt_path = os.path.join(project_dir, ".codeyam", "editor-user-prompt.txt")
+
+    # Detect event early so we can capture the user prompt even before state exists
+    event_type, event_data = detect_event()
+
+    # Capture the very first user prompt (before state file may exist).
+    # Save to a separate file so it persists across state transitions.
+    if event_type == "user_prompt" and not os.path.exists(prompt_path):
+        prompt_text = event_data.get("prompt", "").strip()
+        if prompt_text:
+            try:
+                os.makedirs(os.path.dirname(prompt_path), exist_ok=True)
+                with open(prompt_path, "w") as f:
+                    f.write(prompt_text)
+            except Exception:
+                pass  # Best-effort
+
+    if not os.path.exists(state_path):
+        return
+
+    try:
+        with open(state_path, "r") as f:
+            state = json.load(f)
+    except (json.JSONDecodeError, IOError):
+        return
+
+    step = state.get("step")
+    label = state.get("label", "Unknown")
+    feature = state.get("feature", "")
+
+    if not step:
+        return
+
+    # Log the hook firing
+    log_data = {"step": step, "label": label, "feature": feature, "hook": event_type}
+    if event_type == "post_tool_use":
+        log_data["tool"] = event_data.get("tool_name", "")
+    log_event(project_dir, "hook", log_data)
+
+    restriction = STEP_RESTRICTIONS.get(step, "")
+    next_cmd = f"codeyam editor {step + 1}" if step < 13 else "codeyam editor 1"
+
+    # UserPromptSubmit: concise workflow reminder injected before Claude processes the user's message
+    if event_type == "user_prompt":
+        lines = [
+            f'<user-prompt-submit-hook>',
+            f'Editor Mode — Step {step} ({label}): "{feature}"',
+        ]
+
+        # Include the active scenario so Claude knows what the user is looking at
+        active_scenario_path = os.path.join(project_dir, ".codeyam", "active-scenario.json")
+        try:
+            with open(active_scenario_path, "r") as f:
+                active = json.load(f)
+            scenario_name = (
+                active.get("scenarioName")
+                or active.get("scenarioSlug", "").replace("_", " ")
+            )
+            if scenario_name:
+                lines.append(
+                    f'The user is currently viewing scenario: "{scenario_name}". '
+                    "Assume any feedback refers to this scenario unless they say otherwise."
+                )
+        except (IOError, json.JSONDecodeError):
+            pass
+
+        if step == 13:
+            lines.append(
+                "If the user is requesting changes (even indirectly), "
+                "run `codeyam editor change` BEFORE making any modifications "
+                "(code, scenarios, data, styles — everything). "
+                "The change command gives you the post-change checklist. "
+                "The change workflow ensures Working Session Results are shown to the user. "
+                "If the user chose to commit, run `codeyam editor steps` after committing "
+                "to start the next feature."
+            )
+        else:
+            lines.append(
+                f"You are on step {step}. Follow the `codeyam editor` workflow. "
+                f"Do NOT skip ahead or make changes outside the current step."
+            )
+        if restriction:
+            lines.append(restriction)
+        lines.append('</user-prompt-submit-hook>')
+        print("\n".join(lines))
+        return
+
+    lines = [
+        f'Editor Mode \u2014 Step {step} ({label}): "{feature}"',
+    ]
+    if restriction:
+        lines.append(restriction)
+
+    if event_type == "stop":
+        # Build colored progress tracker using ANSI escape codes
+        GREEN = "\033[32m"
+        BOLD_CYAN = "\033[1;36m"
+        DIM = "\033[2m"
+        RESET = "\033[0m"
+        tracker = [f"{DIM}  \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510{RESET}"]
+        for i in range(1, 14):
+            lbl = STEP_LABELS[i].ljust(28)
+            num = f" {i}" if i < 10 else f"{i}"
+            content = f"{num}. {lbl}"
+            if i < step:
+                tracker.append(f"{DIM}  \u2502{RESET}{GREEN}  \u2713  {content}{RESET}{DIM}\u2502{RESET}")
+            elif i == step:
+                tracker.append(f"{DIM}  \u2502{RESET}{BOLD_CYAN}  \u2192  {content}{RESET}{DIM}\u2502{RESET}")
+            else:
+                tracker.append(f"{DIM}  \u2502  \u25cb  {content}\u2502{RESET}")
+        tracker.append(f"{DIM}  \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518{RESET}")
+        lines.append("Present this progress tracker to the user (copy verbatim):")
+        lines.extend(tracker)
+        lines.append(
+            "For the CURRENT step (\u2192), show each checklist item with "
+            "\u2713 (done) or \u2717 (skipped + reason)."
+        )
+
+    if event_type == "stop" and step == 13:
+        import subprocess as _sp
+        try:
+            _result = _sp.run(
+                ["git", "status", "--porcelain"],
+                cwd=project_dir,
+                capture_output=True, text=True, timeout=5
+            )
+            has_uncommitted = bool(_result.stdout.strip())
+        except Exception:
+            has_uncommitted = False
+
+        if has_uncommitted:
+            lines.append(
+                "\n\033[1;31m⚠️  You have uncommitted changes but haven't shown Working Session Results.\033[0m"
+            )
+            lines.append(
+                "\033[31mRun `codeyam editor change` if you haven't already, then complete the "
+                "checklist and run `codeyam editor 13` to show results to the user.\033[0m"
+            )
+
+    lines.append(f"When this step is complete, run: {next_cmd}")
+
+    print("\n".join(lines))
+
+
+if __name__ == "__main__":
+    main()

package/codeyam-cli/templates/expo-react-native/MOBILE_SETUP.md

@@ -0,0 +1,89 @@
+# Expo + React Native Setup
+
+## Development
+
+This project uses **Expo** with **Expo Router** for file-based navigation and **NativeWind** (Tailwind CSS) for styling.
+
+### Web Development (used by CodeYam)
+
+```bash
+npm run dev
+```
+
+This starts the Expo web dev server. CodeYam uses this to preview your app and take screenshots.
+
+### Mobile Development
+
+```bash
+# iOS Simulator
+npm run ios
+
+# Android Emulator
+npm run android
+
+# Start Expo dev server (pick platform from menu)
+npm start
+```
+
+## Project Structure
+
+```
+app/                    # Expo Router file-based routes
+  _layout.tsx           # Root layout (status bar, navigation)
+  (tabs)/               # Tab-based navigation group
+    _layout.tsx         # Tab bar configuration
+    index.tsx           # Home tab
+    settings.tsx        # Settings tab
+components/             # Reusable components
+lib/
+  storage.ts            # AsyncStorage wrapper for persistent data
+```
+
+## Key Patterns
+
+### Navigation (Expo Router)
+
+Add new screens by creating files in `app/`:
+
+- `app/profile.tsx` — accessible at `/profile`
+- `app/items/[id].tsx` — dynamic route at `/items/123`
+
+### Data Fetching
+
+Use standard `fetch()` for API calls. CodeYam intercepts these to provide mock data during simulations:
+
+```tsx
+const response = await fetch('/api/items');
+const data = await response.json();
+```
+
+### Storage
+
+Use the typed storage helper for persistent data:
+
+```tsx
+import { storage } from '@/lib/storage';
+
+const items = await storage.get('items', []);
+await storage.set('items', [...items, newItem]);
+```
+
+### Styling (NativeWind)
+
+Use Tailwind classes on React Native components:
+
+```tsx
+<View className="flex-1 items-center justify-center bg-white p-4">
+  <Text className="text-lg font-bold text-gray-900">Hello</Text>
+</View>
+```
+
+## Building for Production
+
+```bash
+# Web
+npm run build:web
+
+# iOS/Android (requires EAS CLI)
+npx eas build
+```

package/codeyam-cli/templates/expo-react-native/app/(tabs)/_layout.tsx

@@ -0,0 +1,33 @@
+import { Tabs } from 'expo-router';
+import { Ionicons } from '@expo/vector-icons';
+
+export default function TabLayout() {
+  return (
+    <Tabs
+      screenOptions={{
+        tabBarActiveTintColor: '#005C75',
+        headerStyle: { backgroundColor: '#f8fafc' },
+        headerTitleStyle: { fontWeight: '600' },
+      }}
+    >
+      <Tabs.Screen
+        name="index"
+        options={{
+          title: 'Home',
+          tabBarIcon: ({ color, size }) => (
+            <Ionicons name="home-outline" size={size} color={color} />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="settings"
+        options={{
+          title: 'Settings',
+          tabBarIcon: ({ color, size }) => (
+            <Ionicons name="settings-outline" size={size} color={color} />
+          ),
+        }}
+      />
+    </Tabs>
+  );
+}

package/codeyam-cli/templates/expo-react-native/app/(tabs)/index.tsx

@@ -0,0 +1,12 @@
+import { View, Text } from 'react-native';
+
+export default function HomeScreen() {
+  return (
+    <View className="flex-1 items-center justify-center bg-white p-6">
+      <Text className="text-2xl font-bold text-gray-900 mb-2">Welcome</Text>
+      <Text className="text-base text-gray-500 text-center">
+        Your Expo app is ready. Start building!
+      </Text>
+    </View>
+  );
+}

package/codeyam-cli/templates/expo-react-native/app/(tabs)/settings.tsx

@@ -0,0 +1,12 @@
+import { View, Text } from 'react-native';
+
+export default function SettingsScreen() {
+  return (
+    <View className="flex-1 items-center justify-center bg-white p-6">
+      <Text className="text-2xl font-bold text-gray-900 mb-2">Settings</Text>
+      <Text className="text-base text-gray-500 text-center">
+        Configure your app preferences here.
+      </Text>
+    </View>
+  );
+}

package/codeyam-cli/templates/expo-react-native/app/_layout.tsx

@@ -0,0 +1,12 @@
+import '../global.css';
+import { Stack } from 'expo-router';
+import { StatusBar } from 'expo-status-bar';
+
+export default function RootLayout() {
+  return (
+    <>
+      <Stack screenOptions={{ headerShown: false }} />
+      <StatusBar style="auto" />
+    </>
+  );
+}

package/codeyam-cli/templates/expo-react-native/app.json

@@ -0,0 +1,18 @@
+{
+  "expo": {
+    "name": "CodeYam Expo App",
+    "slug": "codeyam-expo-app",
+    "version": "1.0.0",
+    "scheme": "codeyam-expo-app",
+    "platforms": ["ios", "android", "web"],
+    "web": {
+      "bundler": "metro",
+      "output": "single",
+      "favicon": "./assets/favicon.png"
+    },
+    "plugins": ["expo-router"],
+    "experiments": {
+      "typedRoutes": true
+    }
+  }
+}

package/codeyam-cli/templates/expo-react-native/babel.config.js

@@ -0,0 +1,9 @@
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: [
+      ['babel-preset-expo', { jsxImportSource: 'nativewind' }],
+      'nativewind/babel',
+    ],
+  };
+};

package/codeyam-cli/templates/expo-react-native/gitignore

@@ -0,0 +1,12 @@
+node_modules/
+.expo/
+dist/
+web-build/
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+.env
+.env.local

package/codeyam-cli/templates/expo-react-native/global.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/codeyam-cli/templates/expo-react-native/lib/storage.ts

@@ -0,0 +1,32 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+/**
+ * Type-safe storage abstraction over AsyncStorage.
+ * Works on iOS, Android, and Web.
+ */
+export const storage = {
+  async get<T>(key: string, defaultValue: T): Promise<T> {
+    try {
+      const raw = await AsyncStorage.getItem(key);
+      return raw !== null ? JSON.parse(raw) : defaultValue;
+    } catch {
+      return defaultValue;
+    }
+  },
+
+  async set<T>(key: string, value: T): Promise<void> {
+    try {
+      await AsyncStorage.setItem(key, JSON.stringify(value));
+    } catch {
+      // Storage write failed silently
+    }
+  },
+
+  async remove(key: string): Promise<void> {
+    try {
+      await AsyncStorage.removeItem(key);
+    } catch {
+      // Storage remove failed silently
+    }
+  },
+};

package/codeyam-cli/templates/expo-react-native/metro.config.js

@@ -0,0 +1,6 @@
+const { getDefaultConfig } = require('expo/metro-config');
+const { withNativeWind } = require('nativewind/metro');
+
+const config = getDefaultConfig(__dirname);
+
+module.exports = withNativeWind(config, { input: './global.css' });

package/codeyam-cli/templates/expo-react-native/nativewind-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="nativewind/types" />

package/codeyam-cli/templates/expo-react-native/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "codeyam-expo-app",
+  "version": "0.1.0",
+  "private": true,
+  "main": "expo-router/entry",
+  "scripts": {
+    "dev": "expo start --web",
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "build:web": "expo export --platform web"
+  },
+  "dependencies": {
+    "expo": "~55.0.5",
+    "expo-router": "~55.0.4",
+    "expo-status-bar": "~55.0.4",
+    "expo-linking": "~55.0.7",
+    "expo-constants": "~55.0.7",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
+    "react-native": "0.83.2",
+    "react-native-web": "^0.21.0",
+    "react-native-safe-area-context": "~5.6.2",
+    "react-native-screens": "~4.23.0",
+    "@react-navigation/native": "^7.1.33",
+    "@expo/vector-icons": "^15.0.2",
+    "@react-native-async-storage/async-storage": "2.2.0",
+    "nativewind": "^4.2.2",
+    "tailwindcss": "^3.4.19",
+    "react-native-reanimated": "4.2.1"
+  },
+  "devDependencies": {
+    "@types/react": "~19.2.2",
+    "babel-preset-expo": "^55.0.10",
+    "typescript": "~5.9.2"
+  }
+}

package/codeyam-cli/templates/expo-react-native/tailwind.config.js

@@ -0,0 +1,10 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: 'class',
+  content: ['./app/**/*.{js,jsx,ts,tsx}', './components/**/*.{js,jsx,ts,tsx}'],
+  presets: [require('nativewind/preset')],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

package/codeyam-cli/templates/expo-react-native/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true,
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["**/*.ts", "**/*.tsx", ".expo/types/**/*.ts", "expo-env.d.ts"]
+}

package/codeyam-cli/templates/hooks/staleness-check.sh

@@ -0,0 +1,43 @@
+#!/bin/bash
+# Staleness check hook - runs after file edits to check if related rules need review
+# Receives JSON input via stdin with tool info
+
+set -e
+
+# Read the input JSON
+INPUT=$(cat)
+
+# Extract the file path that was edited
+FILE_PATH=$(echo "$INPUT" | jq -r '.tool_input.file_path // .tool_input.path // empty' 2>/dev/null)
+
+if [ -z "$FILE_PATH" ]; then
+  exit 0  # No file path, nothing to check
+fi
+
+# Find rules that match this file path
+RULES_DIR="${CLAUDE_PROJECT_DIR}/.claude/rules"
+
+if [ ! -d "$RULES_DIR" ]; then
+  exit 0  # No rules directory
+fi
+
+# Search for rules whose paths might match the edited file
+MATCHING_RULES=""
+while IFS= read -r -d '' rule_file; do
+  # Extract paths from frontmatter
+  PATHS=$(sed -n '/^---$/,/^---$/p' "$rule_file" | grep -E "^\s*-\s*'" | sed "s/.*'\(.*\)'.*/\1/")
+
+  for pattern in $PATHS; do
+    # Simple check if the file might match the pattern
+    if [[ "$FILE_PATH" == *"${pattern%%\**}"* ]]; then
+      MATCHING_RULES="$MATCHING_RULES\n- $(basename "$rule_file")"
+      break
+    fi
+  done
+done < <(find "$RULES_DIR" -name "*.md" -print0 2>/dev/null)
+
+if [ -n "$MATCHING_RULES" ]; then
+  echo "📋 Modified file may have related rules that need review:$MATCHING_RULES"
+fi
+
+exit 0

package/codeyam-cli/templates/isolation-route/next-app.tsx.template

@@ -0,0 +1,80 @@
+/**
+ * CodeYam Isolation Route — Next.js App Router
+ *
+ * Place this file at: app/__codeyam__/[component]/[scenario]/page.tsx
+ *
+ * This route dynamically imports a component and renders it with mock data
+ * from the specified scenario, enabling isolated component preview.
+ *
+ * Usage: http://localhost:3000/__codeyam__/TaskCard/Default
+ */
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useParams } from 'next/navigation';
+
+interface ScenarioData {
+  mockData: Record<string, unknown>;
+}
+
+export default function CodeYamIsolationPage() {
+  const params = useParams();
+  const componentName = params.component as string;
+  const scenarioSlug = params.scenario as string;
+
+  const [Component, setComponent] = useState<React.ComponentType<any> | null>(null);
+  const [mockData, setMockData] = useState<Record<string, unknown> | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    async function loadComponent() {
+      try {
+        // Fetch scenario data from CodeYam API
+        const res = await fetch(
+          `http://localhost:${process.env.NEXT_PUBLIC_CODEYAM_PORT || '3111'}/api/editor-scenario-data?component=${componentName}&scenario=${scenarioSlug}`
+        );
+        if (res.ok) {
+          const data: ScenarioData = await res.json();
+          setMockData(data.mockData);
+        }
+
+        // Try to dynamically import the component
+        // Claude should update this mapping when adding new components
+        const componentModules: Record<string, () => Promise<any>> = {
+          // Example: 'TaskCard': () => import('@/components/TaskCard'),
+        };
+
+        const loader = componentModules[componentName];
+        if (loader) {
+          const mod = await loader();
+          setComponent(() => mod.default || mod[componentName]);
+        } else {
+          setError(`Component "${componentName}" not registered in isolation route`);
+        }
+      } catch (err) {
+        setError(`Failed to load component: ${err}`);
+      }
+    }
+
+    void loadComponent();
+  }, [componentName, scenarioSlug]);
+
+  if (error) {
+    return (
+      <div style={{ padding: 24, fontFamily: 'monospace', color: '#e74c3c' }}>
+        <h2>CodeYam Isolation Error</h2>
+        <p>{error}</p>
+      </div>
+    );
+  }
+
+  if (!Component || !mockData) {
+    return (
+      <div style={{ padding: 24, fontFamily: 'monospace', color: '#666' }}>
+        Loading {componentName} / {scenarioSlug}...
+      </div>
+    );
+  }
+
+  return <Component {...mockData} />;
+}