@vgai/editor 0.2.0

package/src/components/ProjectScreen.tsx

@@ -0,0 +1,1004 @@
+/**
+ * Project screen — shown before the editor when no project is specified.
+ *
+ * Displays recent projects, lets the user create new projects from templates,
+ * or open existing projects via native folder dialog or path input.
+ * No Three.js, no EditorStore — pure React + fetch.
+ */
+
+import { useCallback, useEffect, useReducer, useRef, useState } from 'react';
+import {
+  browseFolder,
+  createProject,
+  type ExampleInfo,
+  listExamples,
+  listRecentProjects,
+  openProjectOnServer,
+  type RecentProject,
+  revealInFinder,
+} from '../editor-api';
+import { getEditorMode } from '../editor-mode';
+import { type ActiveProject, type ProjectConfig, setActiveProject } from '../project-manager';
+import {
+  getHostCapabilities,
+  peekPersistedProjectRootName,
+  reopenPersistedProjectRoot,
+  type StorageBackend,
+} from '../storage';
+import { readProjectManifest, seedIfEmpty } from '../storage/seed';
+
+// ---------------------------------------------------------------------------
+// Injected stylesheet for interactive states
+// ---------------------------------------------------------------------------
+
+const STYLE_ID = 'vgai-project-screen';
+
+const CSS = `
+.ps-card {
+  position: relative;
+  background: #222;
+  border: 1px solid #333;
+  border-radius: 8px;
+  padding: 14px 14px 12px;
+  cursor: pointer;
+  text-align: left;
+  font: inherit;
+  color: inherit;
+  transition: border-color 0.15s, background 0.15s;
+  width: 100%;
+}
+.ps-card:hover { border-color: #555; background: #2a2a2a; }
+.ps-card:focus-visible { outline: 1px solid #579eff; outline-offset: 1px; }
+.ps-card:disabled { opacity: 0.5; cursor: default; }
+
+.ps-card-remove {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  background: #333;
+  border: none;
+  color: #888;
+  font-size: 14px;
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.15s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.ps-card:hover .ps-card-remove { opacity: 1; }
+.ps-card-remove:hover { background: #444; color: #ccc; }
+
+.ps-btn-primary {
+  background: #3a8eef;
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  padding: 10px 20px;
+  font-size: 14px;
+  font-weight: 600;
+  font-family: inherit;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+.ps-btn-primary:hover { background: #4a9eff; }
+.ps-btn-primary:focus-visible { outline: 1px solid #579eff; outline-offset: 1px; }
+.ps-btn-primary:disabled { opacity: 0.5; cursor: default; }
+
+.ps-btn-secondary {
+  background: #333;
+  color: #c5c8ce;
+  border: none;
+  border-radius: 6px;
+  padding: 10px 20px;
+  font-size: 14px;
+  font-family: inherit;
+  cursor: pointer;
+  transition: background 0.15s;
+  white-space: nowrap;
+}
+.ps-btn-secondary:hover { background: #444; }
+.ps-btn-secondary:focus-visible { outline: 1px solid #579eff; outline-offset: 1px; }
+.ps-btn-secondary:disabled { opacity: 0.5; cursor: default; }
+
+.ps-input {
+  flex: 1;
+  background: #2a2a2a;
+  border: 1px solid #333;
+  border-radius: 6px;
+  padding: 8px 12px;
+  font-size: 14px;
+  color: #e0e0e0;
+  outline: none;
+  font-family: inherit;
+}
+.ps-input:focus { border-color: #579eff; }
+
+.ps-template {
+  flex: 1;
+  background: #222;
+  border: 1px solid #333;
+  border-radius: 8px;
+  padding: 12px 14px;
+  cursor: pointer;
+  text-align: left;
+  font: inherit;
+  color: inherit;
+  transition: border-color 0.15s;
+}
+.ps-template:hover { border-color: #555; }
+.ps-template[data-selected="true"] { border-color: #3a8eef; }
+
+.ps-ctx-menu {
+  position: fixed;
+  background: #2a2a2a;
+  border: 1px solid #444;
+  border-radius: 6px;
+  padding: 4px 0;
+  min-width: 160px;
+  z-index: 100;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
+}
+.ps-ctx-item {
+  display: block;
+  width: 100%;
+  background: none;
+  border: none;
+  color: #c5c8ce;
+  font: inherit;
+  font-size: 13px;
+  padding: 6px 14px;
+  text-align: left;
+  cursor: pointer;
+}
+.ps-ctx-item:hover { background: #333; }
+.ps-ctx-sep {
+  height: 1px;
+  background: #444;
+  margin: 4px 0;
+}
+
+.ps-thumbnail {
+  width: 100%;
+  aspect-ratio: 16/9;
+  background: #1a1a1a;
+  border-radius: 4px;
+  margin-bottom: 8px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #333;
+  font-size: 24px;
+}
+.ps-thumbnail img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+`;
+
+function useStyleSheet(): void {
+  useEffect(() => {
+    if (document.getElementById(STYLE_ID)) return;
+    const el = document.createElement('style');
+    el.id = STYLE_ID;
+    el.textContent = CSS;
+    document.head.appendChild(el);
+    return () => el.remove();
+  }, []);
+}
+
+// ---------------------------------------------------------------------------
+// State reducer
+// ---------------------------------------------------------------------------
+
+interface ScreenState {
+  view: 'home' | 'new-project';
+  recentProjects: RecentProject[];
+  loaded: boolean;
+  error: string | null;
+  busy: boolean; // opening or creating
+  // New project form
+  projectName: string;
+  projectLocation: string;
+  template: 'starter' | 'empty' | 'example';
+  exampleId: string | null;
+  availableExamples: ExampleInfo[];
+}
+
+type ScreenAction =
+  | { type: 'LOADED'; projects: RecentProject[] }
+  | { type: 'SET_VIEW'; view: 'home' | 'new-project' }
+  | { type: 'SET_ERROR'; error: string | null }
+  | { type: 'SET_BUSY'; busy: boolean }
+  | { type: 'REMOVE_RECENT'; path: string }
+  | { type: 'SET_NAME'; name: string }
+  | { type: 'SET_LOCATION'; location: string }
+  | { type: 'SET_TEMPLATE'; template: 'starter' | 'empty' | 'example' }
+  | { type: 'SET_EXAMPLE_ID'; exampleId: string }
+  | { type: 'SET_AVAILABLE_EXAMPLES'; examples: ExampleInfo[] };
+
+const initialState: ScreenState = {
+  view: 'home',
+  recentProjects: [],
+  loaded: false,
+  error: null,
+  busy: false,
+  projectName: 'My Game',
+  projectLocation: '~/VGAI Projects',
+  template: 'starter',
+  exampleId: null,
+  availableExamples: [],
+};
+
+function reducer(state: ScreenState, action: ScreenAction): ScreenState {
+  switch (action.type) {
+    case 'LOADED':
+      return {
+        ...state,
+        recentProjects: action.projects,
+        loaded: true,
+        view: action.projects.length === 0 ? 'new-project' : 'home',
+      };
+    case 'SET_VIEW':
+      return { ...state, view: action.view, error: null };
+    case 'SET_ERROR':
+      return { ...state, error: action.error, busy: false };
+    case 'SET_BUSY':
+      return { ...state, busy: action.busy, error: null };
+    case 'REMOVE_RECENT':
+      return {
+        ...state,
+        recentProjects: state.recentProjects.filter((p) => p.path !== action.path),
+      };
+    case 'SET_NAME':
+      return { ...state, projectName: action.name };
+    case 'SET_LOCATION':
+      return { ...state, projectLocation: action.location };
+    case 'SET_TEMPLATE':
+      return { ...state, template: action.template };
+    case 'SET_EXAMPLE_ID':
+      return { ...state, exampleId: action.exampleId };
+    case 'SET_AVAILABLE_EXAMPLES':
+      return { ...state, availableExamples: action.examples };
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Main component
+// ---------------------------------------------------------------------------
+
+interface ProjectScreenProps {
+  onOpen: (project: ActiveProject) => void;
+}
+
+export function ProjectScreen({ onOpen }: ProjectScreenProps) {
+  useStyleSheet();
+  const [state, dispatch] = useReducer(reducer, initialState);
+  // Name of a previously-picked on-disk folder whose permission needs a fresh
+  // gesture to reopen (browser mode only). Drives the "Reopen …" affordance.
+  const [persistedRootName, setPersistedRootName] = useState<string | null>(null);
+
+  useEffect(() => {
+    listRecentProjects().then((projects) => {
+      dispatch({ type: 'LOADED', projects });
+    });
+    // Fire-and-forget, same as above — an empty list just hides the "From
+    // example" option's picker contents, it never blocks LOADED.
+    listExamples().then((examples) => {
+      dispatch({ type: 'SET_AVAILABLE_EXAMPLES', examples });
+    });
+    if (getEditorMode() === 'browser') {
+      peekPersistedProjectRootName().then(setPersistedRootName);
+    }
+  }, []);
+
+  // Phase A cleanup: `openProjectOnServer`/`createProject`/`browseFolder` now
+  // THROW a clear, honest error in browser mode (there is no Node server to
+  // scaffold-to-disk / native-dialog against) instead of doing a doomed
+  // fetch. Every handler below now wraps its call in try/catch and routes the
+  // message into the SAME `SET_ERROR` state the existing `ErrorBanner`
+  // already renders (which also resets `busy` — see the reducer) — previously
+  // these had NO try/catch at all, so an uncaught rejection left `busy` stuck
+  // `true` forever (a real hang, in BOTH modes, not just browser). The
+  // affordances stay visible rather than being hidden in browser mode:
+  // `ProjectScreen` is also reachable there with no persisted FSA root and no
+  // File System Access support at all (a plain-OPFS browser after "Close
+  // Project"), where hiding them would be a dead end with zero way back into
+  // a project — a clear thrown error is strictly better than either a silent
+  // no-op or removing the only visible action.
+  const openProject = useCallback(
+    async (path: string) => {
+      dispatch({ type: 'SET_BUSY', busy: true });
+      try {
+        const result = await openProjectOnServer(path);
+        if (result.ok && result.config) {
+          const project: ActiveProject = { rootPath: path, config: result.config as ProjectConfig };
+          setActiveProject(project);
+          onOpen(project);
+        } else {
+          dispatch({ type: 'SET_ERROR', error: `Failed to open project at ${path}` });
+        }
+      } catch (err) {
+        dispatch({ type: 'SET_ERROR', error: err instanceof Error ? err.message : String(err) });
+      }
+    },
+    [onOpen],
+  );
+
+  const handleCreate = useCallback(async () => {
+    dispatch({ type: 'SET_BUSY', busy: true });
+    try {
+      const result =
+        state.template === 'example' && state.exampleId
+          ? await createProject(
+              state.projectName,
+              state.projectLocation,
+              state.template,
+              state.exampleId,
+            )
+          : await createProject(state.projectName, state.projectLocation, state.template);
+      if (result.ok && result.path && result.config) {
+        const openResult = await openProjectOnServer(result.path);
+        if (openResult.ok) {
+          const project: ActiveProject = {
+            rootPath: result.path,
+            config: result.config as ProjectConfig,
+          };
+          setActiveProject(project);
+          onOpen(project);
+        } else {
+          dispatch({ type: 'SET_ERROR', error: 'Project created but failed to open.' });
+        }
+      } else {
+        dispatch({ type: 'SET_ERROR', error: result.error ?? 'Failed to create project.' });
+      }
+    } catch (err) {
+      dispatch({ type: 'SET_ERROR', error: err instanceof Error ? err.message : String(err) });
+    }
+  }, [state.projectName, state.projectLocation, state.template, state.exampleId, onOpen]);
+
+  const handleBrowseOpen = useCallback(async () => {
+    try {
+      const path = await browseFolder('Select a project folder');
+      if (path) openProject(path);
+    } catch (err) {
+      dispatch({ type: 'SET_ERROR', error: err instanceof Error ? err.message : String(err) });
+    }
+  }, [openProject]);
+
+  const handleBrowseLocation = useCallback(async () => {
+    try {
+      const path = await browseFolder('Choose project location');
+      if (path) dispatch({ type: 'SET_LOCATION', location: path });
+    } catch (err) {
+      dispatch({ type: 'SET_ERROR', error: err instanceof Error ? err.message : String(err) });
+    }
+  }, []);
+
+  // Seed a Starter if the folder is empty, read its manifest, and open it as
+  // the active project. Shared by the pick-a-folder and reopen-remembered paths.
+  const openFsaBackend = useCallback(
+    async (backend: StorageBackend) => {
+      await seedIfEmpty(backend);
+      const config = await readProjectManifest(backend);
+      const project: ActiveProject = { rootPath: 'fsa', config };
+      setActiveProject(project);
+      onOpen(project);
+    },
+    [onOpen],
+  );
+
+  // Browser-first mode: open a REAL on-disk folder via the File System Access
+  // API (Chromium). The picked folder is remembered so a reload reopens it.
+  const handleOpenFolderFsa = useCallback(async () => {
+    const pick = getHostCapabilities().pickProjectRoot;
+    if (!pick) return;
+    const backend = await pick();
+    if (backend) await openFsaBackend(backend);
+  }, [openFsaBackend]);
+
+  // Reopen the remembered on-disk folder — re-grants read/write permission
+  // (this click IS the required user gesture) and opens it.
+  const handleReopenFolder = useCallback(async () => {
+    const backend = await reopenPersistedProjectRoot();
+    if (backend) await openFsaBackend(backend);
+  }, [openFsaBackend]);
+
+  const slug = state.projectName
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-|-$/g, '');
+
+  return (
+    <div style={S.root} data-testid="project-screen">
+      <div style={S.inner}>
+        <header style={S.header}>
+          <div style={S.title}>VGAI ENGINE</div>
+          <div style={S.version}>v0.1.0</div>
+        </header>
+
+        {state.error && (
+          <ErrorBanner
+            message={state.error}
+            onDismiss={() => dispatch({ type: 'SET_ERROR', error: null })}
+          />
+        )}
+
+        {getEditorMode() === 'browser' && (
+          <div
+            style={{
+              display: 'flex',
+              gap: 10,
+              alignItems: 'center',
+              margin: '2px 0 14px',
+              color: '#8b919b',
+              fontSize: 13,
+            }}
+          >
+            <span>Projects are stored in your browser (OPFS) — nothing leaves this device.</span>
+            {typeof window !== 'undefined' && 'showDirectoryPicker' in window && (
+              <>
+                {persistedRootName && (
+                  <button
+                    type="button"
+                    className="ps-btn-primary"
+                    onClick={handleReopenFolder}
+                    data-testid="reopen-folder"
+                  >
+                    Reopen “{persistedRootName}”
+                  </button>
+                )}
+                <button type="button" className="ps-btn-secondary" onClick={handleOpenFolderFsa}>
+                  Open Folder…
+                </button>
+              </>
+            )}
+          </div>
+        )}
+
+        {state.view === 'home' && (
+          <HomeView
+            projects={state.recentProjects}
+            loaded={state.loaded}
+            busy={state.busy}
+            onOpen={openProject}
+            onBrowse={handleBrowseOpen}
+            onNewProject={() => dispatch({ type: 'SET_VIEW', view: 'new-project' })}
+            onRemove={(path) => dispatch({ type: 'REMOVE_RECENT', path })}
+          />
+        )}
+
+        {state.view === 'new-project' && (
+          <NewProjectForm
+            name={state.projectName}
+            location={state.projectLocation}
+            template={state.template}
+            exampleId={state.exampleId}
+            availableExamples={state.availableExamples}
+            slug={slug}
+            busy={state.busy}
+            onNameChange={(name) => dispatch({ type: 'SET_NAME', name })}
+            onLocationChange={(location) => dispatch({ type: 'SET_LOCATION', location })}
+            onTemplateChange={(template) => dispatch({ type: 'SET_TEMPLATE', template })}
+            onExampleIdChange={(exampleId) => dispatch({ type: 'SET_EXAMPLE_ID', exampleId })}
+            onBrowseLocation={handleBrowseLocation}
+            onCancel={() => dispatch({ type: 'SET_VIEW', view: 'home' })}
+            onCreate={handleCreate}
+          />
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// HomeView — recent projects + actions
+// ---------------------------------------------------------------------------
+
+interface HomeViewProps {
+  projects: RecentProject[];
+  loaded: boolean;
+  busy: boolean;
+  onOpen: (path: string) => void;
+  onBrowse: () => void;
+  onNewProject: () => void;
+  onRemove: (path: string) => void;
+}
+
+function HomeView({
+  projects,
+  loaded,
+  busy,
+  onOpen,
+  onBrowse,
+  onNewProject,
+  onRemove,
+}: HomeViewProps) {
+  return (
+    <>
+      <section style={S.section}>
+        <div style={S.sectionTitle}>Recent Projects</div>
+        {!loaded ? (
+          <div style={S.empty}>Loading...</div>
+        ) : projects.length === 0 ? (
+          <div style={S.empty}>No recent projects. Create one to get started.</div>
+        ) : (
+          <div style={S.grid}>
+            {projects.map((project) => (
+              <ProjectCard
+                key={project.path}
+                project={project}
+                disabled={busy}
+                onOpen={() => onOpen(project.path)}
+                onRemove={() => onRemove(project.path)}
+              />
+            ))}
+          </div>
+        )}
+      </section>
+
+      <div style={S.actions}>
+        <button type="button" className="ps-btn-primary" onClick={onNewProject}>
+          + New Project
+        </button>
+        <button type="button" className="ps-btn-secondary" onClick={onBrowse}>
+          Open Project...
+        </button>
+      </div>
+    </>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// ProjectCard — single recent project
+// ---------------------------------------------------------------------------
+
+interface ProjectCardProps {
+  project: RecentProject;
+  disabled: boolean;
+  onOpen: () => void;
+  onRemove: () => void;
+}
+
+function ProjectCard({ project, disabled, onOpen, onRemove }: ProjectCardProps) {
+  const [ctxMenu, setCtxMenu] = useState<{ x: number; y: number } | null>(null);
+
+  const handleContextMenu = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    setCtxMenu({ x: e.clientX, y: e.clientY });
+  }, []);
+
+  return (
+    <>
+      <button
+        type="button"
+        className="ps-card"
+        onClick={onOpen}
+        onContextMenu={handleContextMenu}
+        disabled={disabled}
+      >
+        <div className="ps-thumbnail">
+          {project.thumbnail ? <img src={project.thumbnail} alt={project.name} /> : '\u25a6'}
+        </div>
+        <div style={S.cardName}>{project.name}</div>
+        <div style={S.cardMeta} title={project.path}>
+          {shortenPath(project.path)}
+        </div>
+        <div style={S.cardMeta}>{formatRelativeTime(project.lastOpened)}</div>
+        <button
+          type="button"
+          className="ps-card-remove"
+          title="Remove from list"
+          onClick={(e) => {
+            e.stopPropagation();
+            onRemove();
+          }}
+        >
+          ×
+        </button>
+      </button>
+
+      {ctxMenu && (
+        <ContextMenu
+          x={ctxMenu.x}
+          y={ctxMenu.y}
+          onClose={() => setCtxMenu(null)}
+          items={[
+            { label: 'Open', action: onOpen },
+            // Phase A cleanup: no OS path to reveal in browser mode (this
+            // list is always empty there anyway — `listRecentProjects`
+            // returns `[]` — but filtered explicitly for clarity).
+            ...(getEditorMode() === 'server'
+              ? [{ label: 'Show in Finder', action: () => revealInFinder(project.path) }]
+              : []),
+            { separator: true },
+            { label: 'Remove from List', action: onRemove },
+          ]}
+        />
+      )}
+    </>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// ContextMenu
+// ---------------------------------------------------------------------------
+
+type ContextMenuItem =
+  | { label: string; action: () => void; separator?: undefined }
+  | { separator: true; label?: undefined; action?: undefined };
+
+interface ContextMenuProps {
+  x: number;
+  y: number;
+  onClose: () => void;
+  items: ContextMenuItem[];
+}
+
+function ContextMenu({ x, y, onClose, items }: ContextMenuProps) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClick = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) onClose();
+    };
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    document.addEventListener('mousedown', handleClick);
+    document.addEventListener('keydown', handleKey);
+    return () => {
+      document.removeEventListener('mousedown', handleClick);
+      document.removeEventListener('keydown', handleKey);
+    };
+  }, [onClose]);
+
+  return (
+    <div ref={ref} className="ps-ctx-menu" style={{ left: x, top: y }}>
+      {items.map((item, i) =>
+        item.separator ? (
+          <div key={`sep-${i}`} className="ps-ctx-sep" />
+        ) : (
+          <button
+            key={item.label}
+            type="button"
+            className="ps-ctx-item"
+            onClick={() => {
+              item.action();
+              onClose();
+            }}
+          >
+            {item.label}
+          </button>
+        ),
+      )}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// NewProjectForm
+// ---------------------------------------------------------------------------
+
+interface NewProjectFormProps {
+  name: string;
+  location: string;
+  template: 'starter' | 'empty' | 'example';
+  exampleId: string | null;
+  availableExamples: ExampleInfo[];
+  slug: string;
+  busy: boolean;
+  onNameChange: (name: string) => void;
+  onLocationChange: (location: string) => void;
+  onTemplateChange: (template: 'starter' | 'empty' | 'example') => void;
+  onExampleIdChange: (exampleId: string) => void;
+  onBrowseLocation: () => void;
+  onCancel: () => void;
+  onCreate: () => void;
+}
+
+function NewProjectForm({
+  name,
+  location,
+  template,
+  exampleId,
+  availableExamples,
+  slug,
+  busy,
+  onNameChange,
+  onLocationChange,
+  onTemplateChange,
+  onExampleIdChange,
+  onBrowseLocation,
+  onCancel,
+  onCreate,
+}: NewProjectFormProps) {
+  return (
+    <div style={S.form}>
+      <div style={S.sectionTitle}>New Project</div>
+
+      <label style={S.label}>
+        Name
+        <input className="ps-input" value={name} onChange={(e) => onNameChange(e.target.value)} />
+      </label>
+
+      <label style={S.label}>
+        Location
+        <div style={S.locationRow}>
+          <input
+            className="ps-input"
+            value={location}
+            onChange={(e) => onLocationChange(e.target.value)}
+          />
+          <button type="button" className="ps-btn-secondary" onClick={onBrowseLocation}>
+            Browse
+          </button>
+        </div>
+      </label>
+
+      <div style={S.label}>
+        Template
+        <div style={S.templateRow}>
+          <button
+            type="button"
+            className="ps-template"
+            data-selected={template === 'starter'}
+            onClick={() => onTemplateChange('starter')}
+          >
+            <div style={S.templateName}>Starter</div>
+            <div style={S.templateDesc}>
+              7 example scenes, prefabs, input maps, animation graphs
+            </div>
+          </button>
+          <button
+            type="button"
+            className="ps-template"
+            data-selected={template === 'empty'}
+            onClick={() => onTemplateChange('empty')}
+          >
+            <div style={S.templateName}>Empty</div>
+            <div style={S.templateDesc}>Blank project with a default scene</div>
+          </button>
+          <button
+            type="button"
+            className="ps-template"
+            data-selected={template === 'example'}
+            onClick={() => onTemplateChange('example')}
+          >
+            <div style={S.templateName}>From example</div>
+            <div style={S.templateDesc}>
+              Start from a real example project (e.g. the multiplayer arena)
+            </div>
+          </button>
+        </div>
+        {template === 'example' && (
+          <select
+            className="ps-input"
+            style={{ marginTop: 10 }}
+            value={exampleId ?? ''}
+            onChange={(e) => onExampleIdChange(e.target.value)}
+          >
+            <option value="" disabled>
+              {availableExamples.length === 0 ? 'Loading examples...' : 'Select an example...'}
+            </option>
+            {availableExamples.map((ex) => (
+              <option key={ex.id} value={ex.id}>
+                {ex.name}
+              </option>
+            ))}
+          </select>
+        )}
+      </div>
+
+      {slug && (
+        <div style={S.previewPath}>
+          Will create: {location}/{slug}/
+        </div>
+      )}
+
+      <div style={S.formActions}>
+        <button type="button" className="ps-btn-secondary" onClick={onCancel} disabled={busy}>
+          Cancel
+        </button>
+        <button
+          type="button"
+          className="ps-btn-primary"
+          onClick={onCreate}
+          disabled={
+            busy || !name.trim() || !location.trim() || (template === 'example' && !exampleId)
+          }
+        >
+          {busy ? 'Creating...' : 'Create Project'}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// ErrorBanner
+// ---------------------------------------------------------------------------
+
+function ErrorBanner({ message, onDismiss }: { message: string; onDismiss: () => void }) {
+  return (
+    <div style={S.error}>
+      <span>{message}</span>
+      <button type="button" style={S.errorClose} onClick={onDismiss}>
+        ×
+      </button>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function shortenPath(p: string): string {
+  if (p.startsWith('/Users/')) return `~${p.slice(p.indexOf('/', 7))}`;
+  if (p.startsWith('/home/')) return `~${p.slice(p.indexOf('/', 6))}`;
+  return p;
+}
+
+function formatRelativeTime(iso: string): string {
+  const diff = Date.now() - new Date(iso).getTime();
+  const minutes = Math.floor(diff / 60000);
+  if (minutes < 1) return 'just now';
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  if (days < 7) return `${days}d ago`;
+  const weeks = Math.floor(days / 7);
+  return `${weeks}w ago`;
+}
+
+// ---------------------------------------------------------------------------
+// Layout styles (structural only — interactive states handled by CSS above)
+// ---------------------------------------------------------------------------
+
+const S = {
+  root: {
+    position: 'absolute' as const,
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    background: '#1a1a1a',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    color: '#c5c8ce',
+    pointerEvents: 'auto' as const,
+  },
+  inner: {
+    width: '100%',
+    maxWidth: 640,
+    padding: '40px 32px',
+  },
+  header: {
+    textAlign: 'center' as const,
+    marginBottom: 32,
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: 700,
+    color: '#e0e0e0',
+    letterSpacing: 2,
+  },
+  version: {
+    fontSize: 13,
+    color: '#666',
+    marginTop: 4,
+  },
+  error: {
+    background: '#3a1c1c',
+    border: '1px solid #6b2c2c',
+    borderRadius: 6,
+    padding: '10px 16px',
+    marginBottom: 16,
+    fontSize: 13,
+    color: '#e8a0a0',
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  errorClose: {
+    background: 'none',
+    border: 'none',
+    color: '#e8a0a0',
+    fontSize: 18,
+    cursor: 'pointer',
+    padding: '0 4px',
+  },
+  section: {
+    marginBottom: 24,
+  },
+  sectionTitle: {
+    fontSize: 13,
+    color: '#888',
+    textTransform: 'uppercase' as const,
+    letterSpacing: 1,
+    marginBottom: 12,
+  },
+  empty: {
+    color: '#555',
+    fontSize: 13,
+    padding: '24px 0',
+    textAlign: 'center' as const,
+  },
+  grid: {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(auto-fill, minmax(170px, 1fr))',
+    gap: 10,
+  },
+  cardName: {
+    fontSize: 14,
+    fontWeight: 600,
+    color: '#e0e0e0',
+    marginBottom: 2,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap' as const,
+  },
+  cardMeta: {
+    fontSize: 11,
+    color: '#666',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap' as const,
+  },
+  actions: {
+    display: 'flex',
+    gap: 10,
+  },
+  form: {
+    display: 'flex',
+    flexDirection: 'column' as const,
+    gap: 16,
+  },
+  label: {
+    display: 'flex',
+    flexDirection: 'column' as const,
+    gap: 6,
+    fontSize: 13,
+    color: '#888',
+  },
+  locationRow: {
+    display: 'flex',
+    gap: 8,
+  },
+  templateRow: {
+    display: 'flex',
+    gap: 10,
+    marginTop: 4,
+  },
+  templateName: {
+    fontSize: 14,
+    fontWeight: 600,
+    color: '#e0e0e0',
+    marginBottom: 4,
+  },
+  templateDesc: {
+    fontSize: 11,
+    color: '#666',
+    lineHeight: 1.4,
+  },
+  previewPath: {
+    fontSize: 12,
+    color: '#555',
+    fontFamily: 'monospace',
+  },
+  formActions: {
+    display: 'flex',
+    justifyContent: 'flex-end',
+    gap: 10,
+    marginTop: 8,
+  },
+};