refactor: restructure project to monorepo with apps directory

apps/app/src/components/views/spec-view.tsx

@@ -0,0 +1,942 @@
+"use client";
+
+import { useEffect, useState, useCallback, useRef } from "react";
+import { useAppStore } from "@/store/app-store";
+import { getElectronAPI } from "@/lib/electron";
+import { Button } from "@/components/ui/button";
+import { HotkeyButton } from "@/components/ui/hotkey-button";
+import { Card } from "@/components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Save, RefreshCw, FileText, Sparkles, Loader2, FilePlus2, AlertCircle, ListPlus } from "lucide-react";
+import { Checkbox } from "@/components/ui/checkbox";
+import { XmlSyntaxEditor } from "@/components/ui/xml-syntax-editor";
+import type { SpecRegenerationEvent } from "@/types/electron";
+
+// Delay before reloading spec file to ensure it's written to disk
+const SPEC_FILE_WRITE_DELAY = 500;
+
+// Interval for polling backend status during generation
+const STATUS_CHECK_INTERVAL_MS = 2000;
+
+export function SpecView() {
+  const { currentProject, appSpec, setAppSpec } = useAppStore();
+  const [isLoading, setIsLoading] = useState(true);
+  const [isSaving, setIsSaving] = useState(false);
+  const [hasChanges, setHasChanges] = useState(false);
+  const [specExists, setSpecExists] = useState(true);
+
+  // Regeneration state
+  const [showRegenerateDialog, setShowRegenerateDialog] = useState(false);
+  const [projectDefinition, setProjectDefinition] = useState("");
+  const [isRegenerating, setIsRegenerating] = useState(false);
+
+  // Create spec state
+  const [showCreateDialog, setShowCreateDialog] = useState(false);
+  const [projectOverview, setProjectOverview] = useState("");
+  const [isCreating, setIsCreating] = useState(false);
+  const [generateFeatures, setGenerateFeatures] = useState(true);
+  
+  // Generate features only state
+  const [isGeneratingFeatures, setIsGeneratingFeatures] = useState(false);
+  
+  // Logs state (kept for internal tracking, but UI removed)
+  const [logs, setLogs] = useState<string>("");
+  const logsRef = useRef<string>("");
+  
+  // Phase tracking and status
+  const [currentPhase, setCurrentPhase] = useState<string>("");
+  const [errorMessage, setErrorMessage] = useState<string>("");
+  const statusCheckRef = useRef<boolean>(false);
+  const stateRestoredRef = useRef<boolean>(false);
+
+  // Load spec from file
+  const loadSpec = useCallback(async () => {
+    if (!currentProject) return;
+
+    setIsLoading(true);
+    try {
+      const api = getElectronAPI();
+      const result = await api.readFile(
+        `${currentProject.path}/.automaker/app_spec.txt`
+      );
+
+      if (result.success && result.content) {
+        setAppSpec(result.content);
+        setSpecExists(true);
+        setHasChanges(false);
+      } else {
+        // File doesn't exist
+        setAppSpec("");
+        setSpecExists(false);
+      }
+    } catch (error) {
+      console.error("Failed to load spec:", error);
+      setSpecExists(false);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [currentProject, setAppSpec]);
+
+  useEffect(() => {
+    loadSpec();
+  }, [loadSpec]);
+
+  // Check if spec regeneration is running when component mounts or project changes
+  useEffect(() => {
+    const checkStatus = async () => {
+      if (!currentProject || statusCheckRef.current) return;
+      statusCheckRef.current = true;
+
+      try {
+        const api = getElectronAPI();
+        if (!api.specRegeneration) {
+          statusCheckRef.current = false;
+          return;
+        }
+
+        const status = await api.specRegeneration.status();
+        console.log("[SpecView] Status check on mount:", status);
+
+        if (status.success && status.isRunning) {
+          // Something is running - restore state using backend's authoritative phase
+          console.log("[SpecView] Spec generation is running - restoring state", { phase: status.currentPhase });
+          
+          if (!stateRestoredRef.current) {
+            setIsCreating(true);
+            setIsRegenerating(true);
+            stateRestoredRef.current = true;
+          }
+          
+          // Use the backend's currentPhase directly - single source of truth
+          if (status.currentPhase) {
+            setCurrentPhase(status.currentPhase);
+          } else {
+            setCurrentPhase("in progress");
+          }
+          
+          // Add resume message to logs if needed
+          if (!logsRef.current) {
+            const resumeMessage = "[Status] Resumed monitoring existing spec generation process...\n";
+            logsRef.current = resumeMessage;
+            setLogs(resumeMessage);
+          } else if (!logsRef.current.includes("Resumed monitoring")) {
+            const resumeMessage = "\n[Status] Resumed monitoring existing spec generation process...\n";
+            logsRef.current = logsRef.current + resumeMessage;
+            setLogs(logsRef.current);
+          }
+        } else if (status.success && !status.isRunning) {
+          // Not running - clear all state
+          setIsCreating(false);
+          setIsRegenerating(false);
+          setCurrentPhase("");
+          stateRestoredRef.current = false;
+        }
+      } catch (error) {
+        console.error("[SpecView] Failed to check status:", error);
+      } finally {
+        statusCheckRef.current = false;
+      }
+    };
+
+    // Reset restoration flag when project changes
+    stateRestoredRef.current = false;
+    checkStatus();
+  }, [currentProject]);
+
+  // Sync state when tab becomes visible (user returns to spec editor)
+  useEffect(() => {
+    const handleVisibilityChange = async () => {
+      if (!document.hidden && currentProject && (isCreating || isRegenerating || isGeneratingFeatures)) {
+        // Tab became visible and we think we're still generating - verify status from backend
+        try {
+          const api = getElectronAPI();
+          if (!api.specRegeneration) return;
+
+          const status = await api.specRegeneration.status();
+          console.log("[SpecView] Visibility change - status check:", status);
+          
+          if (!status.isRunning) {
+            // Backend says not running - clear state
+            console.log("[SpecView] Visibility change: Backend indicates generation complete - clearing state");
+            setIsCreating(false);
+            setIsRegenerating(false);
+            setIsGeneratingFeatures(false);
+            setCurrentPhase("");
+            stateRestoredRef.current = false;
+            loadSpec();
+          } else if (status.currentPhase) {
+            // Still running - update phase from backend
+            setCurrentPhase(status.currentPhase);
+          }
+        } catch (error) {
+          console.error("[SpecView] Failed to check status on visibility change:", error);
+        }
+      }
+    };
+
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+    return () => {
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+    };
+  }, [currentProject, isCreating, isRegenerating, isGeneratingFeatures, loadSpec]);
+
+  // Periodic status check to ensure state stays in sync (only when we think we're running)
+  useEffect(() => {
+    if (!currentProject || (!isCreating && !isRegenerating && !isGeneratingFeatures)) return;
+
+    const intervalId = setInterval(async () => {
+      try {
+        const api = getElectronAPI();
+        if (!api.specRegeneration) return;
+
+        const status = await api.specRegeneration.status();
+        
+        if (!status.isRunning) {
+          // Backend says not running - clear state
+          console.log("[SpecView] Periodic check: Backend indicates generation complete - clearing state");
+          setIsCreating(false);
+          setIsRegenerating(false);
+          setIsGeneratingFeatures(false);
+          setCurrentPhase("");
+          stateRestoredRef.current = false;
+          loadSpec();
+        } else if (status.currentPhase && status.currentPhase !== currentPhase) {
+          // Still running but phase changed - update from backend
+          console.log("[SpecView] Periodic check: Phase updated from backend", { 
+            old: currentPhase, 
+            new: status.currentPhase 
+          });
+          setCurrentPhase(status.currentPhase);
+        }
+      } catch (error) {
+        console.error("[SpecView] Periodic status check error:", error);
+      }
+    }, STATUS_CHECK_INTERVAL_MS);
+
+    return () => {
+      clearInterval(intervalId);
+    };
+  }, [currentProject, isCreating, isRegenerating, isGeneratingFeatures, currentPhase, loadSpec]);
+
+  // Subscribe to spec regeneration events
+  useEffect(() => {
+    const api = getElectronAPI();
+    if (!api.specRegeneration) return;
+
+    const unsubscribe = api.specRegeneration.onEvent((event: SpecRegenerationEvent) => {
+      console.log("[SpecView] Regeneration event:", event.type);
+
+      if (event.type === "spec_regeneration_progress") {
+        // Extract phase from content if present
+        const phaseMatch = event.content.match(/\[Phase:\s*([^\]]+)\]/);
+        if (phaseMatch) {
+          const phase = phaseMatch[1];
+          setCurrentPhase(phase);
+          console.log(`[SpecView] Phase updated: ${phase}`);
+          
+          // If phase is "complete", clear running state immediately
+          if (phase === "complete") {
+            console.log("[SpecView] Phase is complete - clearing state");
+            setIsCreating(false);
+            setIsRegenerating(false);
+            stateRestoredRef.current = false;
+            // Small delay to ensure spec file is written
+            setTimeout(() => {
+              loadSpec();
+            }, SPEC_FILE_WRITE_DELAY);
+          }
+        }
+
+        // Check for completion indicators in content
+        if (event.content.includes("All tasks completed") || 
+            event.content.includes("✓ All tasks completed")) {
+          // This indicates everything is done - clear state immediately
+          console.log("[SpecView] Detected completion in progress message - clearing state");
+          setIsCreating(false);
+          setIsRegenerating(false);
+          setCurrentPhase("");
+          stateRestoredRef.current = false;
+          setTimeout(() => {
+            loadSpec();
+          }, SPEC_FILE_WRITE_DELAY);
+        }
+
+        // Append progress to logs
+        const newLog = logsRef.current + event.content;
+        logsRef.current = newLog;
+        setLogs(newLog);
+        console.log("[SpecView] Progress:", event.content.substring(0, 100));
+        
+        // Clear error message when we get new progress
+        if (errorMessage) {
+          setErrorMessage("");
+        }
+      } else if (event.type === "spec_regeneration_tool") {
+        // Check if this is a feature creation tool
+        const isFeatureTool = event.tool === "mcp__automaker-tools__UpdateFeatureStatus" || 
+                             event.tool === "UpdateFeatureStatus" ||
+                             event.tool?.includes("Feature");
+        
+        if (isFeatureTool) {
+          // Ensure we're in feature generation phase
+          if (currentPhase !== "feature_generation") {
+            setCurrentPhase("feature_generation");
+            setIsCreating(true);
+            setIsRegenerating(true);
+            console.log("[SpecView] Detected feature creation tool - setting phase to feature_generation");
+          }
+        }
+        
+        // Log tool usage with details
+        const toolInput = event.input ? ` (${JSON.stringify(event.input).substring(0, 100)}...)` : "";
+        const toolLog = `\n[Tool] ${event.tool}${toolInput}\n`;
+        const newLog = logsRef.current + toolLog;
+        logsRef.current = newLog;
+        setLogs(newLog);
+        console.log("[SpecView] Tool:", event.tool, event.input);
+      } else if (event.type === "spec_regeneration_complete") {
+        // Add completion message to logs first
+        const completionLog = logsRef.current + `\n[Complete] ${event.message}\n`;
+        logsRef.current = completionLog;
+        setLogs(completionLog);
+        
+        // --- Completion Detection Logic ---
+        // The backend sends explicit signals for completion:
+        // 1. "All tasks completed" in the message
+        // 2. [Phase: complete] marker in logs
+        const isFinalCompletionMessage = event.message?.includes("All tasks completed") ||
+                                         event.message === "All tasks completed!" ||
+                                         event.message === "All tasks completed";
+        
+        const hasCompletePhase = logsRef.current.includes("[Phase: complete]");
+        
+        // Rely solely on explicit backend signals
+        const shouldComplete = isFinalCompletionMessage || hasCompletePhase;
+        
+        if (shouldComplete) {
+          // Fully complete - clear all states immediately
+          console.log("[SpecView] Final completion detected - clearing state", { 
+            isFinalCompletionMessage, 
+            hasCompletePhase, 
+            message: event.message 
+          });
+          setIsRegenerating(false);
+          setIsCreating(false);
+          setIsGeneratingFeatures(false);
+          setCurrentPhase("");
+          setShowRegenerateDialog(false);
+          setShowCreateDialog(false);
+          setProjectDefinition("");
+          setProjectOverview("");
+          setErrorMessage("");
+          stateRestoredRef.current = false;
+          // Reload the spec to show the new content
+          loadSpec();
+        } else {
+          // Intermediate completion - keep state active for feature generation
+          setIsCreating(true);
+          setIsRegenerating(true);
+          setCurrentPhase("feature_generation");
+          console.log("[SpecView] Intermediate completion, continuing with feature generation");
+        }
+        
+        console.log("[SpecView] Spec generation event:", event.message);
+      } else if (event.type === "spec_regeneration_error") {
+        setIsRegenerating(false);
+        setIsCreating(false);
+        setIsGeneratingFeatures(false);
+        setCurrentPhase("error");
+        setErrorMessage(event.error);
+        stateRestoredRef.current = false; // Reset restoration flag
+        // Add error to logs
+        const errorLog = logsRef.current + `\n\n[ERROR] ${event.error}\n`;
+        logsRef.current = errorLog;
+        setLogs(errorLog);
+        console.error("[SpecView] Regeneration error:", event.error);
+      }
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, [loadSpec]);
+
+  // Save spec to file
+  const saveSpec = async () => {
+    if (!currentProject) return;
+
+    setIsSaving(true);
+    try {
+      const api = getElectronAPI();
+      await api.writeFile(
+        `${currentProject.path}/.automaker/app_spec.txt`,
+        appSpec
+      );
+      setHasChanges(false);
+    } catch (error) {
+      console.error("Failed to save spec:", error);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleChange = (value: string) => {
+    setAppSpec(value);
+    setHasChanges(true);
+  };
+
+  const handleRegenerate = async () => {
+    if (!currentProject || !projectDefinition.trim()) return;
+
+    setIsRegenerating(true);
+    setCurrentPhase("initialization");
+    setErrorMessage("");
+    // Reset logs when starting new regeneration
+    logsRef.current = "";
+    setLogs("");
+    console.log("[SpecView] Starting spec regeneration");
+    try {
+      const api = getElectronAPI();
+      if (!api.specRegeneration) {
+        console.error("[SpecView] Spec regeneration not available");
+        setIsRegenerating(false);
+        return;
+      }
+      const result = await api.specRegeneration.generate(
+        currentProject.path,
+        projectDefinition.trim()
+      );
+
+      if (!result.success) {
+        const errorMsg = result.error || "Unknown error";
+        console.error("[SpecView] Failed to start regeneration:", errorMsg);
+        setIsRegenerating(false);
+        setCurrentPhase("error");
+        setErrorMessage(errorMsg);
+        const errorLog = `[Error] Failed to start regeneration: ${errorMsg}\n`;
+        logsRef.current = errorLog;
+        setLogs(errorLog);
+      }
+      // If successful, we'll wait for the events to update the state
+    } catch (error) {
+      const errorMsg = error instanceof Error ? error.message : String(error);
+      console.error("[SpecView] Failed to regenerate spec:", errorMsg);
+      setIsRegenerating(false);
+      setCurrentPhase("error");
+      setErrorMessage(errorMsg);
+      const errorLog = `[Error] Failed to regenerate spec: ${errorMsg}\n`;
+      logsRef.current = errorLog;
+      setLogs(errorLog);
+    }
+  };
+
+  const handleCreateSpec = async () => {
+    if (!currentProject || !projectOverview.trim()) return;
+
+    setIsCreating(true);
+    setShowCreateDialog(false);
+    setCurrentPhase("initialization");
+    setErrorMessage("");
+    // Reset logs when starting new generation
+    logsRef.current = "";
+    setLogs("");
+    console.log("[SpecView] Starting spec creation, generateFeatures:", generateFeatures);
+    try {
+      const api = getElectronAPI();
+      if (!api.specRegeneration) {
+        console.error("[SpecView] Spec regeneration not available");
+        setIsCreating(false);
+        return;
+      }
+      const result = await api.specRegeneration.create(
+        currentProject.path,
+        projectOverview.trim(),
+        generateFeatures
+      );
+
+      if (!result.success) {
+        const errorMsg = result.error || "Unknown error";
+        console.error("[SpecView] Failed to start spec creation:", errorMsg);
+        setIsCreating(false);
+        setCurrentPhase("error");
+        setErrorMessage(errorMsg);
+        const errorLog = `[Error] Failed to start spec creation: ${errorMsg}\n`;
+        logsRef.current = errorLog;
+        setLogs(errorLog);
+      }
+      // If successful, we'll wait for the events to update the state
+    } catch (error) {
+      const errorMsg = error instanceof Error ? error.message : String(error);
+      console.error("[SpecView] Failed to create spec:", errorMsg);
+      setIsCreating(false);
+      setCurrentPhase("error");
+      setErrorMessage(errorMsg);
+      const errorLog = `[Error] Failed to create spec: ${errorMsg}\n`;
+      logsRef.current = errorLog;
+      setLogs(errorLog);
+    }
+  };
+
+  const handleGenerateFeatures = async () => {
+    if (!currentProject) return;
+
+    setIsGeneratingFeatures(true);
+    setShowRegenerateDialog(false);
+    setCurrentPhase("initialization");
+    setErrorMessage("");
+    // Reset logs when starting feature generation
+    logsRef.current = "";
+    setLogs("");
+    console.log("[SpecView] Starting feature generation from existing spec");
+    try {
+      const api = getElectronAPI();
+      if (!api.specRegeneration) {
+        console.error("[SpecView] Spec regeneration not available");
+        setIsGeneratingFeatures(false);
+        return;
+      }
+      const result = await api.specRegeneration.generateFeatures(
+        currentProject.path
+      );
+
+      if (!result.success) {
+        const errorMsg = result.error || "Unknown error";
+        console.error("[SpecView] Failed to start feature generation:", errorMsg);
+        setIsGeneratingFeatures(false);
+        setCurrentPhase("error");
+        setErrorMessage(errorMsg);
+        const errorLog = `[Error] Failed to start feature generation: ${errorMsg}\n`;
+        logsRef.current = errorLog;
+        setLogs(errorLog);
+      }
+      // If successful, we'll wait for the events to update the state
+    } catch (error) {
+      const errorMsg = error instanceof Error ? error.message : String(error);
+      console.error("[SpecView] Failed to generate features:", errorMsg);
+      setIsGeneratingFeatures(false);
+      setCurrentPhase("error");
+      setErrorMessage(errorMsg);
+      const errorLog = `[Error] Failed to generate features: ${errorMsg}\n`;
+      logsRef.current = errorLog;
+      setLogs(errorLog);
+    }
+  };
+
+  if (!currentProject) {
+    return (
+      <div
+        className="flex-1 flex items-center justify-center"
+        data-testid="spec-view-no-project"
+      >
+        <p className="text-muted-foreground">No project selected</p>
+      </div>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <div
+        className="flex-1 flex items-center justify-center"
+        data-testid="spec-view-loading"
+      >
+        <RefreshCw className="w-6 h-6 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  // Show empty state when no spec exists (isCreating is handled by bottom-right indicator in sidebar)
+  if (!specExists) {
+    return (
+      <div
+        className="flex-1 flex flex-col overflow-hidden content-bg"
+        data-testid="spec-view-empty"
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between p-4 border-b border-border bg-glass backdrop-blur-md">
+          <div className="flex items-center gap-3">
+            <FileText className="w-5 h-5 text-muted-foreground" />
+            <div>
+              <h1 className="text-xl font-bold">App Specification</h1>
+              <p className="text-sm text-muted-foreground">
+                {currentProject.path}/.automaker/app_spec.txt
+              </p>
+            </div>
+          </div>
+          {(isCreating || isRegenerating) && (
+            <div className="flex items-center gap-3 px-6 py-3.5 rounded-xl bg-gradient-to-r from-primary/15 to-primary/5 border border-primary/30 shadow-lg backdrop-blur-md">
+              <div className="relative">
+                <Loader2 className="w-5 h-5 animate-spin text-primary flex-shrink-0" />
+                <div className="absolute inset-0 w-5 h-5 animate-ping text-primary/20" />
+              </div>
+              <div className="flex flex-col gap-1 min-w-0">
+                <span className="text-sm font-semibold text-primary leading-tight tracking-tight">
+                  {isCreating ? "Generating Specification" : "Regenerating Specification"}
+                </span>
+                {currentPhase && (
+                  <span className="text-xs text-muted-foreground/90 leading-tight font-medium">
+                    {currentPhase === "initialization" && "Initializing..."}
+                    {currentPhase === "setup" && "Setting up tools..."}
+                    {currentPhase === "analysis" && "Analyzing project structure..."}
+                    {currentPhase === "spec_complete" && "Spec created! Generating features..."}
+                    {currentPhase === "feature_generation" && "Creating features from roadmap..."}
+                    {currentPhase === "complete" && "Complete!"}
+                    {currentPhase === "error" && "Error occurred"}
+                    {!["initialization", "setup", "analysis", "spec_complete", "feature_generation", "complete", "error"].includes(currentPhase) && currentPhase}
+                  </span>
+                )}
+              </div>
+            </div>
+          )}
+          {errorMessage && (
+            <div className="flex items-center gap-2 text-destructive">
+              <span className="text-sm font-medium">Error: {errorMessage}</span>
+            </div>
+          )}
+        </div>
+
+        {/* Empty State */}
+        <div className="flex-1 flex items-center justify-center p-8">
+          <div className="text-center max-w-md">
+            <div className="mb-6 flex justify-center">
+              <div className="p-4 rounded-full bg-primary/10">
+                {isCreating ? (
+                  <Loader2 className="w-12 h-12 text-primary animate-spin" />
+                ) : (
+                  <FilePlus2 className="w-12 h-12 text-primary" />
+                )}
+              </div>
+            </div>
+            <h2 className="text-2xl font-semibold mb-4">
+              {isCreating ? (
+                <>
+                  <div className="mb-4">
+                    <span>Generating App Specification</span>
+                  </div>
+                  {currentPhase && (
+                    <div className="px-6 py-3.5 rounded-xl bg-gradient-to-r from-primary/15 to-primary/5 border border-primary/30 shadow-lg backdrop-blur-md inline-flex items-center justify-center">
+                      <span className="text-sm font-semibold text-primary text-center tracking-tight">
+                        {currentPhase === "initialization" && "Initializing..."}
+                        {currentPhase === "setup" && "Setting up tools..."}
+                        {currentPhase === "analysis" && "Analyzing project structure..."}
+                        {currentPhase === "spec_complete" && "Spec created! Generating features..."}
+                        {currentPhase === "feature_generation" && "Creating features from roadmap..."}
+                        {currentPhase === "complete" && "Complete!"}
+                        {currentPhase === "error" && "Error occurred"}
+                        {!["initialization", "setup", "analysis", "spec_complete", "feature_generation", "complete", "error"].includes(currentPhase) && currentPhase}
+                      </span>
+                    </div>
+                  )}
+                </>
+              ) : (
+                "No App Specification Found"
+              )}
+            </h2>
+            <p className="text-muted-foreground mb-6">
+              {isCreating
+                ? currentPhase === "feature_generation"
+                  ? "The app specification has been created! Now generating features from the implementation roadmap..."
+                  : "We're analyzing your project and generating a comprehensive specification. This may take a few moments..."
+                : "Create an app specification to help our system understand your project. We'll analyze your codebase and generate a comprehensive spec based on your description."}
+            </p>
+            {errorMessage && (
+              <div className="mb-4 p-3 rounded-md bg-destructive/10 border border-destructive/20">
+                <p className="text-sm text-destructive font-medium">Error:</p>
+                <p className="text-sm text-destructive">{errorMessage}</p>
+              </div>
+            )}
+            {!isCreating && (
+              <div className="flex gap-2 justify-center">
+                <Button
+                  size="lg"
+                  onClick={() => setShowCreateDialog(true)}
+                >
+                  <FilePlus2 className="w-5 h-5 mr-2" />
+                  Create app_spec
+                </Button>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Create Dialog */}
+        <Dialog 
+          open={showCreateDialog} 
+          onOpenChange={(open) => {
+            if (!open && !isCreating) {
+              setShowCreateDialog(false);
+            }
+          }}
+        >
+          <DialogContent className="max-w-2xl">
+            <DialogHeader>
+              <DialogTitle>Create App Specification</DialogTitle>
+              <DialogDescription className="text-muted-foreground">
+                We didn&apos;t find an app_spec.txt file. Let us help you generate your app_spec.txt
+                to help describe your project for our system. We&apos;ll analyze your project&apos;s
+                tech stack and create a comprehensive specification.
+              </DialogDescription>
+            </DialogHeader>
+
+            <div className="space-y-4 py-4">
+              <div className="space-y-2">
+                <label className="text-sm font-medium">
+                  Project Overview
+                </label>
+                <p className="text-xs text-muted-foreground">
+                  Describe what your project does and what features you want to build.
+                  Be as detailed as you want - this will help us create a better specification.
+                </p>
+                <textarea
+                  className="w-full h-48 p-3 rounded-md border border-border bg-background font-mono text-sm resize-none focus:outline-none focus:ring-2 focus:ring-ring"
+                  value={projectOverview}
+                  onChange={(e) => setProjectOverview(e.target.value)}
+                  placeholder="e.g., A project management tool that allows teams to track tasks, manage sprints, and visualize progress through kanban boards. It should support user authentication, real-time updates, and file attachments..."
+                  autoFocus
+                  disabled={isCreating}
+                />
+              </div>
+
+              <div className="flex items-start space-x-3 pt-2">
+                <Checkbox
+                  id="generate-features"
+                  checked={generateFeatures}
+                  onCheckedChange={(checked) => setGenerateFeatures(checked === true)}
+                  disabled={isCreating}
+                />
+                <div className="space-y-1">
+                  <label
+                    htmlFor="generate-features"
+                    className={`text-sm font-medium ${isCreating ? "" : "cursor-pointer"}`}
+                  >
+                    Generate feature list
+                  </label>
+                  <p className="text-xs text-muted-foreground">
+                    Automatically create features in the features folder from the
+                    implementation roadmap after the spec is generated.
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <DialogFooter>
+              <Button
+                variant="ghost"
+                onClick={() => setShowCreateDialog(false)}
+                disabled={isCreating}
+              >
+                Cancel
+              </Button>
+              <HotkeyButton
+                onClick={handleCreateSpec}
+                disabled={!projectOverview.trim() || isCreating}
+                hotkey={{ key: "Enter", cmdCtrl: true }}
+                hotkeyActive={showCreateDialog && !isCreating}
+              >
+                {isCreating ? (
+                  <>
+                    <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                    Generating...
+                  </>
+                ) : (
+                  <>
+                    <Sparkles className="w-4 h-4 mr-2" />
+                    Generate Spec
+                  </>
+                )}
+              </HotkeyButton>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="flex-1 flex flex-col overflow-hidden content-bg"
+      data-testid="spec-view"
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between p-4 border-b border-border bg-glass backdrop-blur-md">
+        <div className="flex items-center gap-3">
+          <FileText className="w-5 h-5 text-muted-foreground" />
+          <div>
+            <h1 className="text-xl font-bold">App Specification</h1>
+            <p className="text-sm text-muted-foreground">
+              {currentProject.path}/.automaker/app_spec.txt
+            </p>
+          </div>
+        </div>
+        <div className="flex items-center gap-3">
+          {(isRegenerating || isCreating || isGeneratingFeatures) && (
+            <div className="flex items-center gap-3 px-6 py-3.5 rounded-xl bg-gradient-to-r from-primary/15 to-primary/5 border border-primary/30 shadow-lg backdrop-blur-md">
+              <div className="relative">
+                <Loader2 className="w-5 h-5 animate-spin text-primary flex-shrink-0" />
+                <div className="absolute inset-0 w-5 h-5 animate-ping text-primary/20" />
+              </div>
+              <div className="flex flex-col gap-1 min-w-0">
+                <span className="text-sm font-semibold text-primary leading-tight tracking-tight">
+                  {isGeneratingFeatures ? "Generating Features" : isCreating ? "Generating Specification" : "Regenerating Specification"}
+                </span>
+                {currentPhase && (
+                  <span className="text-xs text-muted-foreground/90 leading-tight font-medium">
+                    {currentPhase === "initialization" && "Initializing..."}
+                    {currentPhase === "setup" && "Setting up tools..."}
+                    {currentPhase === "analysis" && "Analyzing project structure..."}
+                    {currentPhase === "spec_complete" && "Spec created! Generating features..."}
+                    {currentPhase === "feature_generation" && "Creating features from roadmap..."}
+                    {currentPhase === "complete" && "Complete!"}
+                    {currentPhase === "error" && "Error occurred"}
+                    {!["initialization", "setup", "analysis", "spec_complete", "feature_generation", "complete", "error"].includes(currentPhase) && currentPhase}
+                  </span>
+                )}
+              </div>
+            </div>
+          )}
+          {errorMessage && (
+            <div className="flex items-center gap-3 px-6 py-3.5 rounded-xl bg-gradient-to-r from-destructive/15 to-destructive/5 border border-destructive/30 shadow-lg backdrop-blur-md">
+              <AlertCircle className="w-5 h-5 text-destructive flex-shrink-0" />
+              <div className="flex flex-col gap-1 min-w-0">
+                <span className="text-sm font-semibold text-destructive leading-tight tracking-tight">Error</span>
+                <span className="text-xs text-destructive/90 leading-tight font-medium">{errorMessage}</span>
+              </div>
+            </div>
+          )}
+          <div className="flex gap-2">
+            <Button
+              size="sm"
+              variant="outline"
+              onClick={() => setShowRegenerateDialog(true)}
+              disabled={isRegenerating || isCreating || isGeneratingFeatures}
+              data-testid="regenerate-spec"
+            >
+              {isRegenerating ? (
+                <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+              ) : (
+                <Sparkles className="w-4 h-4 mr-2" />
+              )}
+              {isRegenerating ? "Regenerating..." : "Regenerate"}
+            </Button>
+            <Button
+              size="sm"
+              onClick={saveSpec}
+              disabled={!hasChanges || isSaving || isCreating || isRegenerating || isGeneratingFeatures}
+              data-testid="save-spec"
+            >
+              <Save className="w-4 h-4 mr-2" />
+              {isSaving ? "Saving..." : hasChanges ? "Save Changes" : "Saved"}
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* Editor */}
+      <div className="flex-1 p-4 overflow-hidden">
+        <Card className="h-full overflow-hidden">
+          <XmlSyntaxEditor
+            value={appSpec}
+            onChange={handleChange}
+            placeholder="Write your app specification here..."
+            data-testid="spec-editor"
+          />
+        </Card>
+      </div>
+
+      {/* Regenerate Dialog */}
+      <Dialog 
+        open={showRegenerateDialog} 
+        onOpenChange={(open) => {
+          if (!open && !isRegenerating) {
+            setShowRegenerateDialog(false);
+          }
+        }}
+      >
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>Regenerate App Specification</DialogTitle>
+            <DialogDescription className="text-muted-foreground">
+              We will regenerate your app spec based on a short project definition and the
+              current tech stack found in your project. The agent will analyze your codebase
+              to understand your existing technologies and create a comprehensive specification.
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-4 py-4">
+            <div className="space-y-2">
+              <label className="text-sm font-medium">
+                Describe your project
+              </label>
+              <p className="text-xs text-muted-foreground">
+                Provide a clear description of what your app should do. Be as detailed as you
+                want - the more context you provide, the more comprehensive the spec will be.
+              </p>
+              <textarea
+                className="w-full h-40 p-3 rounded-md border border-border bg-background font-mono text-sm resize-none focus:outline-none focus:ring-2 focus:ring-ring"
+                value={projectDefinition}
+                onChange={(e) => setProjectDefinition(e.target.value)}
+                placeholder="e.g., A task management app where users can create projects, add tasks with due dates, assign tasks to team members, track progress with a kanban board, and receive notifications for upcoming deadlines..."
+                disabled={isRegenerating}
+              />
+            </div>
+          </div>
+
+          <DialogFooter className="flex justify-between sm:justify-between">
+            <Button
+              variant="outline"
+              onClick={handleGenerateFeatures}
+              disabled={isRegenerating || isGeneratingFeatures}
+              title="Generate features from the existing app_spec.txt without regenerating the spec"
+            >
+              {isGeneratingFeatures ? (
+                <>
+                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                  Generating...
+                </>
+              ) : (
+                <>
+                  <ListPlus className="w-4 h-4 mr-2" />
+                  Generate Features
+                </>
+              )}
+            </Button>
+            <div className="flex gap-2">
+              <Button
+                variant="ghost"
+                onClick={() => setShowRegenerateDialog(false)}
+                disabled={isRegenerating || isGeneratingFeatures}
+              >
+                Cancel
+              </Button>
+              <HotkeyButton
+                onClick={handleRegenerate}
+                disabled={!projectDefinition.trim() || isRegenerating || isGeneratingFeatures}
+                hotkey={{ key: "Enter", cmdCtrl: true }}
+                hotkeyActive={showRegenerateDialog && !isRegenerating && !isGeneratingFeatures}
+              >
+                {isRegenerating ? (
+                  <>
+                    <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                    Regenerating...
+                  </>
+                ) : (
+                  <>
+                    <Sparkles className="w-4 h-4 mr-2" />
+                    Regenerate Spec
+                  </>
+                )}
+              </HotkeyButton>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+    </div>
+  );
+}