@theproductguy/create-mission-control 1.0.17 → 1.0.25

package/src/template/control-center/frontend/src/components/DesignOSOverlay.tsx

@@ -0,0 +1,38 @@
+import { Layers, X } from 'lucide-react';
+
+interface DesignOSOverlayProps {
+    onClose: () => void;
+}
+
+export const DesignOSOverlay = ({ onClose }: DesignOSOverlayProps) => {
+    return (
+        <div className="fixed inset-0 z-[100] bg-background flex flex-col animate-fade-in w-screen h-screen">
+            <div className="h-14 border-b border-border flex items-center justify-between px-6 bg-card shrink-0 shadow-sm z-50">
+                <div className="flex items-center gap-3">
+                    <div className="p-1.5 bg-sidebar-primary/10 text-sidebar-primary rounded-md">
+                        <Layers size={20} />
+                    </div>
+                    <h2 className="font-semibold text-lg text-foreground">Design OS</h2>
+                    <span className="text-muted-foreground text-sm border-l border-border pl-3">Design System & Handoff</span>
+                </div>
+                <div className="flex items-center gap-3">
+                    <button
+                        onClick={onClose}
+                        className="p-2 text-muted-foreground hover:text-foreground hover:bg-secondary rounded-md transition-colors"
+                        title="Close Design OS"
+                    >
+                        <X size={20} />
+                    </button>
+                </div>
+            </div>
+            <div className="flex-1 bg-background relative">
+                <iframe
+                    src={`http://localhost:5400?theme=${localStorage.getItem('theme') || 'system'}`}
+                    className="absolute inset-0 w-full h-full border-none"
+                    title="Design OS"
+                    allow="clipboard-read; clipboard-write text/html" // updated per chrome warnings usually
+                />
+            </div>
+        </div >
+    );
+};

package/src/template/control-center/frontend/src/components/Guidance.tsx

@@ -0,0 +1,56 @@
+import { ArrowRight, Copy } from 'lucide-react';
+import { useToast } from '../components/ui/ToastContext';
+
+interface GuidanceProps {
+    phase: string;
+    title: string;
+    description: string;
+    prompt?: string;
+    actionLabel?: string;
+    onAction?: () => void;
+    className?: string;
+}
+
+export const Guidance = ({ phase, title, description, prompt, actionLabel, onAction, className }: GuidanceProps) => {
+    const { toast } = useToast();
+
+    return (
+        <div className={`bg-card border border-border rounded-xl p-6 shadow-sm ${className}`}>
+            <div className="text-xs font-semibold tracking-wider text-muted-foreground uppercase mb-2">
+                {phase}
+            </div>
+            <div className="flex flex-col md:flex-row gap-6 items-start justify-between">
+                <div className="max-w-xl">
+                    <h2 className="text-2xl font-bold text-foreground mb-2">{title}</h2>
+                    <p className="text-muted-foreground leading-relaxed">
+                        {description}
+                    </p>
+                </div>
+                {(prompt || actionLabel) && (
+                    <div className="flex items-center gap-3 shrink-0">
+                        {prompt && (
+                            <button
+                                onClick={() => {
+                                    navigator.clipboard.writeText(prompt);
+                                    toast({ title: "Prompt Copied!", type: 'success' });
+                                }}
+                                className="flex items-center gap-2 px-4 py-2.5 bg-secondary hover:bg-secondary/80 text-secondary-foreground font-medium rounded-lg border border-border transition-all shadow-sm hover:shadow"
+                            >
+                                <Copy size={16} />
+                                Copy Prompt
+                            </button>
+                        )}
+                        {actionLabel && (
+                            <button
+                                onClick={onAction}
+                                className="flex items-center gap-2 px-4 py-2.5 bg-primary hover:bg-primary/90 text-primary-foreground font-medium rounded-lg shadow-sm hover:shadow-md transition-all"
+                            >
+                                {actionLabel} <ArrowRight size={16} />
+                            </button>
+                        )}
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};

package/src/template/control-center/frontend/src/components/NextStepCard.tsx

@@ -0,0 +1,115 @@
+import type { ProjectState } from '../types';
+import { Guidance } from './Guidance';
+
+interface NextStepCardProps {
+    state: ProjectState;
+    onOpenDesign: () => void;
+}
+
+export const NextStepCard = ({ state, onOpenDesign }: NextStepCardProps) => {
+    let step = { phase: "", title: "", description: "", prompt: "", link: "", actionLabel: "", action: () => { } };
+
+    const isProductComplete =
+        state?.product?.mission?.exists && !state?.product?.mission?.isBoilerplate &&
+        state?.product?.techStack?.exists && !state?.product?.techStack?.isBoilerplate &&
+        state?.product?.roadmap?.exists && !state?.product?.roadmap?.isBoilerplate;
+
+    if (!isProductComplete) {
+        step = {
+            phase: "Phase 1: Product Strategy",
+            title: "Plan Your Product",
+            description: "Define your Mission, Roadmap, and Tech Stack to build a solid foundation.",
+            prompt: "Antigravity, let's start Phase 1: Product Planning. Please read 'agent-os/commands/plan-product/plan-product.md' and guide me.",
+            link: "",
+            actionLabel: "",
+            action: () => { }
+        }
+    } else if (!state?.design?.initialized) {
+        step = {
+            phase: "Phase 2: Design System",
+            title: "Sync Product to Design OS",
+            description: "Transfer your Product Mission and Roadmap to Design OS to automate the setup.",
+            prompt: "Antigravity, please sync my product plan to Design OS. Read 'agent-os/commands/initialize-design/initialize-design.md'.",
+            link: "",
+            actionLabel: "",
+            action: () => { }
+        }
+    } else if (!state?.design?.exported) {
+        step = {
+            phase: "Phase 2: Design System",
+            title: "Define Your Visuals",
+            description: "Defining the visuals now prevents generic UI later. Export your system when ready.",
+            prompt: "",
+            link: "",
+            actionLabel: "Open Design OS",
+            action: onOpenDesign
+        };
+    } else if (!state?.implementation?.scaffolded) {
+        step = {
+            phase: "Phase 3: Implementation",
+            title: "Scaffold Application",
+            description: "Your design is exported. Now, scaffold the production app with the design system.",
+            prompt: "Antigravity, scaffold the implementation. Read 'agent-os/commands/scaffold-implementation/scaffold-implementation.md'.",
+            link: "",
+            actionLabel: "",
+            action: () => { }
+        };
+    } else if (state?.specs?.length === 0) {
+        step = {
+            phase: "Phase 4: Feature Specs",
+            title: "Shape Your First Spec",
+            description: "Your app is ready! Create a spec for the first feature in your roadmap.",
+            prompt: "Antigravity, let's shape the spec for a new feature. Please read 'agent-os/commands/shape-spec/shape-spec.md'.",
+            link: "",
+            actionLabel: "",
+            action: () => { }
+        };
+    } else {
+        const incompleteSpec = state?.specs?.find(s => s.tasks.completed < s.tasks.total || !s.tasks.exists);
+        if (incompleteSpec) {
+            step = {
+                phase: "Phase 4: Feature Specs",
+                title: `Implement '${incompleteSpec.name}'`,
+                description: `Active spec detected. Write the code!`,
+                prompt: `Antigravity, implement the tasks for '${incompleteSpec.name}'. Read commands/implement-tasks/implement-tasks.md.`,
+                link: "",
+                actionLabel: "",
+                action: () => { }
+            };
+        } else if (state?.product?.roadmap?.nextItem && !state?.product?.roadmap?.isBoilerplate) {
+            const rawName = state?.product?.roadmap?.nextItem;
+            const cleanName = rawName.replace(/\*\*/g, '').replace(/^\d+\.\s*/, '').split('\n')[0].trim();
+            step = {
+                phase: "Phase 4: Feature Specs",
+                title: `Shape '${cleanName}'`,
+                description: `Ready to start the next feature? Shape the spec now.`,
+                prompt: `Antigravity, let's shape the spec for '${cleanName}'. Please read 'agent-os/commands/shape-spec/shape-spec.md'.`,
+                link: "",
+                actionLabel: "",
+                action: () => { }
+            };
+        } else {
+            step = {
+                phase: "Phase 4: Feature Specs",
+                title: "Verify or Plan Next",
+                description: "Verify implementation or start a new feature.",
+                prompt: "Antigravity, let's verify the implementation. Read 'agent-os/commands/implement-tasks/3-verify-implementation.md'.",
+                link: "",
+                actionLabel: "",
+                action: () => { }
+            }
+        }
+    }
+
+    return (
+        <Guidance
+            phase={step.phase}
+            title={step.title}
+            description={step.description}
+            prompt={step.prompt}
+            actionLabel={step.actionLabel}
+            onAction={step.action}
+            className="mb-8"
+        />
+    );
+};

package/src/template/control-center/frontend/src/components/PromptButton.tsx

@@ -0,0 +1,43 @@
+import { Copy, Play } from 'lucide-react';
+import { useContext } from 'react';
+import { IdeContext } from '../contexts/IdeContext';
+
+interface PromptButtonProps {
+    label: string;
+    prompt: string;
+    onClick: (text: string) => void;
+    small?: boolean;
+    primary?: boolean;
+}
+
+export function PromptButton({ label, prompt, onClick, small, primary }: PromptButtonProps) {
+    const { scheme } = useContext(IdeContext);
+    const deepLink = `${scheme}://vscode.executeCommand/workbench.action.chat.open?query=${encodeURIComponent(prompt)}`;
+
+    return (
+        <div className={`flex gap-1 items-center ${!small ? 'w-full' : 'flex-1'}`}>
+            <button
+                onClick={() => onClick(prompt)}
+                className={`flex items-center justify-center gap-2 rounded-lg font-medium transition cursor-pointer flex-1
+              ${small ? 'px-3 py-1.5 text-xs' : 'px-4 py-2 text-sm'}
+              ${primary
+                        ? 'bg-primary hover:bg-primary/90 text-primary-foreground shadow-sm'
+                        : 'bg-background hover:bg-secondary border border-border text-foreground hover:text-foreground'}
+            `}
+            >
+                <Copy size={small ? 12 : 14} />
+                {label}
+            </button>
+
+            <a
+                href={deepLink}
+                className={`flex items-center justify-center rounded-lg border border-border bg-secondary hover:bg-secondary/80 text-foreground transition
+          ${small ? 'w-8 h-[30px]' : 'w-10 h-[38px]'}
+        `}
+                title={`Run in IDE (${scheme}://)`}
+            >
+                <Play size={small ? 12 : 14} fill="currentColor" className="opacity-70" />
+            </a>
+        </div>
+    )
+}

package/src/template/control-center/frontend/src/components/StatusItem.tsx

@@ -0,0 +1,38 @@
+import type { Status } from '../types';
+
+interface StatusItemProps {
+    label: string;
+    status?: Status;
+    icon: React.ReactNode;
+    small?: boolean;
+    onClick?: () => void;
+}
+
+export function StatusItem({ label, status, icon, small, onClick }: StatusItemProps) {
+    if (!status) return null;
+    const isComplete = status.exists && (status.total > 0 ? status.completed === status.total : true);
+
+    return (
+        <div
+            onClick={onClick}
+            className={`flex items-center justify-between ${small ? 'text-xs' : 'text-sm'} ${onClick ? 'cursor-pointer hover:bg-secondary/50 p-1.5 -mx-1.5 rounded-md transition-colors group' : ''}`}
+        >
+            <div className="flex items-center gap-2 text-muted-foreground group-hover:text-foreground transition-colors">
+                {icon}
+                <span>{label}</span>
+            </div>
+            <div>
+                {status.exists && !status.isBoilerplate ? (
+                    <span className={`px-2 py-0.5 rounded-full text-xs font-medium border ${isComplete
+                        ? 'bg-emerald-50 dark:bg-emerald-900/20 text-emerald-600 border-emerald-200 dark:border-emerald-800'
+                        : 'bg-secondary text-muted-foreground border-border'
+                        }`}>
+                        {isComplete ? 'Done' : 'Pending'}
+                    </span>
+                ) : (
+                    <span className="text-muted-foreground bg-secondary px-2 py-0.5 rounded text-xs font-medium border border-border">Pending</span>
+                )}
+            </div>
+        </div>
+    );
+}

package/src/template/control-center/frontend/src/components/modals/CreateSpecModal.tsx

@@ -0,0 +1,73 @@
+import axios from 'axios';
+import { useState } from 'react';
+import { useToast } from '../../components/ui/ToastContext';
+
+interface CreateSpecModalProps {
+    runtimeConfig: any;
+    onClose: () => void;
+    onSuccess: () => void;
+    openFile: (path: string, title: string) => void;
+}
+
+export const CreateSpecModal = ({ runtimeConfig, onClose, onSuccess, openFile }: CreateSpecModalProps) => {
+    const [newSpecName, setNewSpecName] = useState("");
+    const { toast } = useToast();
+
+    const handleCreate = async () => {
+        if (newSpecName.trim()) {
+            const name = newSpecName.trim();
+            if (runtimeConfig?.api) {
+                await axios.post(`${runtimeConfig.api}/api/scaffold/spec`, { name });
+                const prompt = `Antigravity, let's shape the spec for '${name}'. Read commands/shape-spec/shape-spec.md.`;
+                navigator.clipboard.writeText(prompt);
+                setNewSpecName("");
+                onSuccess();
+                openFile(`specs/${name}/spec.md`, `${name} Spec`);
+                toast({ title: "Spec created & Prompt copied!", type: 'success' });
+                onClose();
+            }
+        }
+    };
+
+    return (
+        <div className="fixed inset-0 z-[200] bg-black/50 backdrop-blur-sm flex items-center justify-center p-6 animate-in fade-in">
+            <div className="bg-card border border-border w-full max-w-md rounded-xl shadow-2xl flex flex-col overflow-hidden animate-in zoom-in-95 duration-200">
+                <div className="px-6 py-4 border-b border-border bg-muted/30">
+                    <h3 className="font-semibold text-lg">New Feature Spec</h3>
+                    <p className="text-sm text-muted-foreground">Shape a new feature for your project.</p>
+                </div>
+                <div className="p-6">
+                    <div className="space-y-4">
+                        <div>
+                            <label className="text-sm font-medium mb-1.5 block">Feature Name</label>
+                            <input
+                                autoFocus
+                                type="text"
+                                className="w-full px-3 py-2 rounded-md border border-input bg-secondary text-secondary-foreground text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                                placeholder="e.g. user-profile"
+                                value={newSpecName}
+                                onChange={(e) => setNewSpecName(e.target.value)}
+                                onKeyDown={(e) => {
+                                    if (e.key === 'Enter') handleCreate();
+                                }}
+                            />
+                            <p className="text-xs text-muted-foreground mt-1.5">
+                                This will create a new directory in <code>specs/</code> and copy the prompt to your clipboard.
+                            </p>
+                        </div>
+                        <div className="flex justify-end gap-2 pt-2">
+                            <button onClick={onClose} className="px-4 py-2 text-sm font-medium rounded-md hover:bg-secondary transition-colors">Cancel</button>
+                            <button
+                                disabled={!newSpecName.trim()}
+                                onClick={handleCreate}
+                                className="px-4 py-2 text-sm font-medium rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                            >
+                                Create Spec
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};

package/src/template/control-center/frontend/src/components/modals/DeleteSpecModal.tsx

@@ -0,0 +1,42 @@
+import { Trash2 } from 'lucide-react';
+import axios from 'axios';
+
+interface DeleteSpecModalProps {
+    specName: string;
+    runtimeConfig: any;
+    onClose: () => void;
+    onSuccess: () => void;
+}
+
+export const DeleteSpecModal = ({ specName, runtimeConfig, onClose, onSuccess }: DeleteSpecModalProps) => {
+    return (
+        <div className="fixed inset-0 z-[200] bg-black/50 backdrop-blur-sm flex items-center justify-center p-6 animate-in fade-in">
+            <div className="bg-card border border-border w-full max-w-sm rounded-xl shadow-2xl flex flex-col overflow-hidden animate-in zoom-in-95 duration-200">
+                <div className="p-6">
+                    <div className="flex items-center gap-3 mb-4 text-red-500">
+                        <div className="p-2 bg-red-100 dark:bg-red-900/20 rounded-full">
+                            <Trash2 size={24} />
+                        </div>
+                        <h3 className="font-semibold text-lg text-foreground">Delete Spec?</h3>
+                    </div>
+                    <p className="text-muted-foreground mb-6">
+                        Are you sure you want to delete <strong>{specName}</strong>? This action cannot be undone and will permanently delete the spec files.
+                    </p>
+                    <div className="flex justify-end gap-2">
+                        <button onClick={onClose} className="px-4 py-2 text-sm font-medium rounded-md hover:bg-secondary transition-colors">Cancel</button>
+                        <button
+                            onClick={async () => {
+                                await axios.delete(`${runtimeConfig.api}/api/specs/${specName}`);
+                                onSuccess();
+                                onClose();
+                            }}
+                            className="px-4 py-2 text-sm font-medium rounded-md bg-red-500 hover:bg-red-600 text-white transition-colors"
+                        >
+                            Delete Spec
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};

package/src/template/control-center/frontend/src/components/modals/FileEditorModal.tsx

@@ -0,0 +1,87 @@
+import { FileText, X } from 'lucide-react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import remarkBreaks from 'remark-breaks';
+import { useState, useEffect } from 'react';
+
+interface FileEditorModalProps {
+    viewingFile: { path: string, title: string };
+    content: string | null;
+    onClose: () => void;
+    onSave: (content: string) => Promise<void>;
+}
+
+export const FileEditorModal = ({ viewingFile, content, onClose, onSave }: FileEditorModalProps) => {
+    const [isEditing, setIsEditing] = useState(false);
+    const [editContent, setEditContent] = useState("");
+
+    useEffect(() => {
+        if (content) setEditContent(content);
+    }, [content]);
+
+    return (
+        <div className="fixed inset-0 z-[200] bg-black/50 backdrop-blur-sm flex items-center justify-center p-6 animate-in fade-in">
+            <div className="bg-card border border-border w-full max-w-4xl max-h-[90vh] rounded-xl shadow-2xl flex flex-col overflow-hidden animate-in zoom-in-95 duration-200">
+                <div className="flex items-center justify-between px-6 py-4 border-b border-border bg-muted/30">
+                    <div className="flex items-center gap-3">
+                        <div className="p-2 bg-primary/10 text-primary rounded-md">
+                            <FileText size={18} />
+                        </div>
+                        <div>
+                            <h3 className="font-semibold text-lg">{viewingFile.title}</h3>
+                            <code className="text-xs text-muted-foreground font-mono">{viewingFile.path}</code>
+                        </div>
+                    </div>
+                    <div className="flex items-center gap-2">
+                        {!isEditing ? (
+                            <button
+                                onClick={() => setIsEditing(true)}
+                                className="px-3 py-1.5 text-sm font-medium bg-secondary hover:bg-secondary/80 rounded-md transition-colors"
+                            >
+                                Edit
+                            </button>
+                        ) : (
+                            <>
+                                <button
+                                    onClick={() => setIsEditing(false)}
+                                    className="px-3 py-1.5 text-sm font-medium hover:bg-secondary rounded-md transition-colors"
+                                >
+                                    Cancel
+                                </button>
+                                <button
+                                    onClick={async () => {
+                                        await onSave(editContent);
+                                        setIsEditing(false);
+                                    }}
+                                    className="px-3 py-1.5 text-sm font-medium bg-primary text-primary-foreground hover:bg-primary/90 rounded-md transition-colors"
+                                >
+                                    Save Changes
+                                </button>
+                            </>
+                        )}
+                        <button onClick={onClose} className="p-2 hover:bg-secondary rounded-full transition-colors ml-2">
+                            <X size={20} />
+                        </button>
+                    </div>
+                </div>
+                <div className="flex-1 overflow-y-auto p-6 bg-background">
+                    {content === "Loading..." || content === "Error loading file." ? (
+                        <div className="font-mono text-sm">{content}</div>
+                    ) : isEditing ? (
+                        <textarea
+                            value={editContent}
+                            onChange={(e) => setEditContent(e.target.value)}
+                            className="w-full h-full min-h-[500px] p-4 font-mono text-sm bg-secondary text-secondary-foreground border border-border rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-primary/20"
+                        />
+                    ) : (
+                        <article className="prose dark:prose-invert max-w-none prose-headings:font-serif prose-headings:font-semibold prose-a:text-primary prose-code:text-primary prose-pre:bg-secondary/50 prose-pre:border prose-pre:border-border prose-p:leading-relaxed prose-p:mb-4">
+                            <ReactMarkdown remarkPlugins={[remarkGfm, remarkBreaks]}>
+                                {content || ''}
+                            </ReactMarkdown>
+                        </article>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+};

package/src/template/control-center/frontend/src/components/modals/SettingsModal.tsx

@@ -0,0 +1,46 @@
+import { X, Settings } from 'lucide-react';
+import { useContext } from 'react';
+import { IdeContext } from '../../contexts/IdeContext';
+
+interface SettingsModalProps {
+    onClose: () => void;
+}
+
+export const SettingsModal = ({ onClose }: SettingsModalProps) => {
+    const { scheme, setScheme } = useContext(IdeContext);
+
+    return (
+        <div className="fixed inset-0 z-[200] bg-black/50 backdrop-blur-sm flex items-center justify-center p-6 animate-in fade-in">
+            <div className="bg-card border border-border w-full max-w-sm rounded-xl shadow-2xl flex flex-col overflow-hidden animate-in zoom-in-95 duration-200">
+                <div className="p-6 border-b border-border bg-muted/30 flex items-center justify-between">
+                    <h3 className="font-semibold text-lg flex items-center gap-2"><Settings size={18} /> Settings</h3>
+                    <button onClick={onClose} className="hover:bg-secondary p-1 rounded"><X size={18} /></button>
+                </div>
+                <div className="p-6 space-y-4">
+                    <div>
+                        <label className="text-sm font-medium mb-2 block">IDE / Editor</label>
+                        <div className="space-y-2">
+                            {['vscode', 'cursor', 'windsurf', 'antigravity'].map((s) => (
+                                <button
+                                    key={s}
+                                    onClick={() => setScheme(s)}
+                                    className={`w-full flex items-center justify-between px-4 py-3 rounded-lg border transition-all ${scheme === s
+                                        ? 'bg-primary/10 border-primary text-primary'
+                                        : 'bg-secondary/20 border-border hover:border-foreground/20'
+                                        }`}
+                                >
+                                    <span className="capitalize font-medium">{s}</span>
+                                    {scheme === s && <div className="w-2 h-2 rounded-full bg-primary" />}
+                                </button>
+                            ))}
+                        </div>
+                        <p className="text-xs text-muted-foreground mt-3">
+                            Select the editor to open when clicking "Play".
+                            <br />Currently using: <code>{scheme}://</code>
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};

package/src/template/control-center/frontend/src/components/ui/ToastContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useState, useCallback, ReactNode } from 'react';
+import { createContext, useContext, useState, useCallback, type ReactNode } from 'react';
 import { X, CheckCircle, Info, AlertTriangle } from 'lucide-react';
 
 type ToastType = 'success' | 'error' | 'info' | 'warning';

package/src/template/control-center/frontend/src/contexts/IdeContext.tsx

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+
+export const IdeContext = createContext({
+    scheme: 'vscode',
+    setScheme: (_s: string) => { }
+});

package/src/template/control-center/frontend/src/hooks/useFileEditor.ts

@@ -0,0 +1,42 @@
+import { useState } from 'react';
+import axios from 'axios';
+import { useToast } from '../components/ui/ToastContext';
+
+export const useFileEditor = (runtimeConfig: any, fetchStatus: () => void) => {
+    const [viewingFile, setViewingFile] = useState<{ path: string, title: string } | null>(null);
+    const [fileContent, setFileContent] = useState<string | null>(null);
+    const { toast } = useToast();
+
+    const openFile = async (path: string, title: string) => {
+        setViewingFile({ path, title });
+        setFileContent("Loading...");
+        try {
+            const res = await axios.get(`${runtimeConfig.api}/api/files?path=${encodeURIComponent(path)}`);
+            setFileContent(res.data.content);
+        } catch (error) {
+            setFileContent("Error loading file.");
+        }
+    };
+
+    const saveFile = async (content: string) => {
+        if (!viewingFile || !runtimeConfig) return;
+        try {
+            await axios.post(`${runtimeConfig.api}/api/files`, {
+                path: viewingFile.path,
+                content: content
+            });
+            setFileContent(content);
+            toast({ title: "File Saved!", type: "success" });
+            fetchStatus();
+        } catch (error) {
+            toast({ title: "Failed to save file", type: "error" });
+        }
+    };
+
+    const closeFile = () => {
+        setViewingFile(null);
+        setFileContent(null);
+    };
+
+    return { viewingFile, fileContent, openFile, saveFile, closeFile };
+};

package/src/template/control-center/frontend/src/hooks/useProjectState.ts

@@ -0,0 +1,45 @@
+import { useState, useEffect } from 'react';
+import axios from 'axios';
+import type { ProjectState } from '../types';
+
+export const useProjectState = () => {
+    const [state, setState] = useState<ProjectState | null>(null);
+    const [loading, setLoading] = useState(true);
+    const [runtimeConfig, setRuntimeConfig] = useState<any>(null);
+
+    useEffect(() => {
+        fetch('/runtime-config.json')
+            .then(res => res.json())
+            .then(config => { setRuntimeConfig(config); })
+            .catch(() => {
+                setRuntimeConfig({
+                    api: 'http://localhost:5403',
+                    app: 'http://localhost:5402',
+                    design: 'http://localhost:5400',
+                    ports: { api: 5403, app: 5402, design: 5400 }
+                });
+            });
+    }, []);
+
+    const fetchStatus = async () => {
+        if (!runtimeConfig) return;
+        try {
+            const res = await axios.get(`${runtimeConfig.api}/api/status`);
+            setState(res.data);
+        } catch (error) {
+            console.error(error);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    useEffect(() => {
+        if (runtimeConfig) {
+            fetchStatus();
+            const interval = setInterval(fetchStatus, 2000);
+            return () => clearInterval(interval);
+        }
+    }, [runtimeConfig]);
+
+    return { state, loading, runtimeConfig, fetchStatus };
+};