@bamptee/aia-code 0.10.0 → 1.0.1

package/src/ui/public/components/config-view.js

@@ -0,0 +1,160 @@
+import React from 'react';
+import { api } from '/main.js';
+
+function YamlEditor({ title, loadFn, saveFn }) {
+  const [content, setContent] = React.useState('');
+  const [loading, setLoading] = React.useState(true);
+  const [saving, setSaving] = React.useState(false);
+  const [dirty, setDirty] = React.useState(false);
+  const [msg, setMsg] = React.useState(null);
+
+  React.useEffect(() => {
+    loadFn().then(c => setContent(c)).catch(() => setContent('')).finally(() => setLoading(false));
+  }, []);
+
+  async function save() {
+    setSaving(true);
+    setMsg(null);
+    try {
+      await saveFn(content);
+      setDirty(false);
+      setMsg({ type: 'ok', text: 'Saved.' });
+    } catch (e) {
+      setMsg({ type: 'err', text: e.message });
+    }
+    setSaving(false);
+  }
+
+  if (loading) return React.createElement('p', { className: 'text-slate-500 text-sm' }, 'Loading...');
+
+  return React.createElement('div', { className: 'space-y-2' },
+    React.createElement('div', { className: 'flex items-center justify-between' },
+      React.createElement('h3', { className: 'text-sm font-semibold text-slate-300' }, title),
+      React.createElement('div', { className: 'flex gap-2 items-center' },
+        dirty && React.createElement('span', { className: 'text-xs text-amber-400' }, 'unsaved'),
+        msg && React.createElement('span', { className: `text-xs ${msg.type === 'ok' ? 'text-emerald-400' : 'text-red-400'}` }, msg.text),
+        React.createElement('button', {
+          onClick: save,
+          disabled: saving || !dirty,
+          className: 'bg-aia-accent/20 text-aia-accent border border-aia-accent/30 rounded px-3 py-1 text-xs hover:bg-aia-accent/30 disabled:opacity-40',
+        }, saving ? '...' : 'Save'),
+      ),
+    ),
+    React.createElement('textarea', {
+      value: content,
+      onChange: e => { setContent(e.target.value); setDirty(true); },
+      spellCheck: false,
+      className: 'w-full h-72 bg-slate-900 border border-aia-border rounded p-3 text-sm text-slate-300 font-mono resize-y focus:border-aia-accent focus:outline-none',
+    })
+  );
+}
+
+function FileList({ title, files, selectedFile, onSelect }) {
+  if (!files.length) return null;
+  return React.createElement('div', { className: 'space-y-1' },
+    React.createElement('h4', { className: 'text-xs font-semibold text-slate-400 uppercase tracking-wider' }, title),
+    ...files.map(f =>
+      React.createElement('button', {
+        key: f,
+        onClick: () => onSelect(f),
+        className: `block w-full text-left px-2 py-1 text-sm rounded ${selectedFile === f ? 'bg-aia-accent/20 text-aia-accent' : 'text-slate-400 hover:text-slate-200 hover:bg-slate-800'}`,
+      }, f)
+    )
+  );
+}
+
+export function ConfigView() {
+  const [contextFiles, setContextFiles] = React.useState([]);
+  const [knowledgeCategories, setKnowledgeCategories] = React.useState([]);
+  const [selectedFile, setSelectedFile] = React.useState(null);
+  const [selectedType, setSelectedType] = React.useState(null); // 'context' | 'knowledge'
+  const [selectedCategory, setSelectedCategory] = React.useState(null);
+  const [logs, setLogs] = React.useState('');
+  const [showLogs, setShowLogs] = React.useState(false);
+
+  React.useEffect(() => {
+    api.get('/context').then(setContextFiles).catch(() => {});
+    api.get('/knowledge').then(setKnowledgeCategories).catch(() => {});
+  }, []);
+
+  function selectContext(f) {
+    setSelectedFile(f);
+    setSelectedType('context');
+    setSelectedCategory(null);
+  }
+
+  function selectKnowledge(cat, f) {
+    setSelectedFile(f);
+    setSelectedType('knowledge');
+    setSelectedCategory(cat);
+  }
+
+  async function loadLogs() {
+    try {
+      const data = await api.get('/logs');
+      setLogs(data.content || '(empty)');
+      setShowLogs(true);
+    } catch {}
+  }
+
+  return React.createElement('div', { className: 'space-y-6' },
+    React.createElement('h1', { className: 'text-xl font-bold text-slate-100' }, 'Configuration'),
+
+    // config.yaml
+    React.createElement(YamlEditor, {
+      title: 'config.yaml',
+      loadFn: async () => (await api.get('/config')).content,
+      saveFn: async (content) => api.put('/config', { content }),
+    }),
+
+    // Sidebar + editor for context/knowledge
+    React.createElement('div', { className: 'grid grid-cols-4 gap-4' },
+      // Sidebar
+      React.createElement('div', { className: 'col-span-1 space-y-4' },
+        React.createElement(FileList, {
+          title: 'Context',
+          files: contextFiles,
+          selectedFile: selectedType === 'context' ? selectedFile : null,
+          onSelect: selectContext,
+        }),
+        ...knowledgeCategories.map(cat =>
+          React.createElement(FileList, {
+            key: cat.name,
+            title: `Knowledge / ${cat.name}`,
+            files: cat.files,
+            selectedFile: selectedType === 'knowledge' && selectedCategory === cat.name ? selectedFile : null,
+            onSelect: f => selectKnowledge(cat.name, f),
+          })
+        ),
+        React.createElement('button', {
+          onClick: loadLogs,
+          className: 'text-xs text-slate-500 hover:text-slate-300 mt-4',
+        }, 'View execution logs'),
+      ),
+
+      // Editor
+      React.createElement('div', { className: 'col-span-3' },
+        selectedFile && selectedType === 'context' && React.createElement(YamlEditor, {
+          key: `ctx-${selectedFile}`,
+          title: `context/${selectedFile}`,
+          loadFn: async () => (await api.get(`/context/${selectedFile}`)).content,
+          saveFn: async (content) => api.put(`/context/${selectedFile}`, { content }),
+        }),
+        selectedFile && selectedType === 'knowledge' && React.createElement(YamlEditor, {
+          key: `kn-${selectedCategory}-${selectedFile}`,
+          title: `knowledge/${selectedCategory}/${selectedFile}`,
+          loadFn: async () => (await api.get(`/knowledge/${selectedCategory}/${selectedFile}`)).content,
+          saveFn: async (content) => api.put(`/knowledge/${selectedCategory}/${selectedFile}`, { content }),
+        }),
+        !selectedFile && !showLogs && React.createElement('p', { className: 'text-slate-500 text-sm' }, 'Select a file to edit.'),
+        showLogs && React.createElement('div', { className: 'space-y-2' },
+          React.createElement('div', { className: 'flex items-center justify-between' },
+            React.createElement('h3', { className: 'text-sm font-semibold text-slate-300' }, 'Execution Logs'),
+            React.createElement('button', { onClick: () => setShowLogs(false), className: 'text-xs text-slate-500 hover:text-slate-300' }, 'Close'),
+          ),
+          React.createElement('pre', { className: 'bg-slate-900 border border-aia-border rounded p-3 text-xs text-slate-400 overflow-auto max-h-96' }, logs),
+        ),
+      ),
+    ),
+  );
+}

package/src/ui/public/components/dashboard.js

@@ -0,0 +1,201 @@
+import React from 'react';
+import { api, streamPost } from '/main.js';
+
+const STATUS_CLASSES = {
+  done: 'step-done',
+  pending: 'step-pending',
+  'in-progress': 'step-in-progress',
+  error: 'step-error',
+};
+
+function StepBadge({ step, status }) {
+  return React.createElement('span', {
+    className: `inline-block px-2 py-0.5 text-xs rounded border ${STATUS_CLASSES[status] || 'step-pending'}`,
+  }, step);
+}
+
+function FeatureCard({ feature }) {
+  const steps = feature.steps || {};
+  const doneCount = Object.values(steps).filter(s => s === 'done').length;
+  const totalCount = Object.keys(steps).length;
+
+  return React.createElement('a', {
+    href: `#/features/${feature.name}`,
+    className: 'block bg-aia-card border border-aia-border rounded-lg p-4 hover:border-aia-accent/50 transition-colors',
+  },
+    React.createElement('div', { className: 'flex items-center justify-between mb-3' },
+      React.createElement('h3', { className: 'text-slate-100 font-semibold' }, feature.name),
+      React.createElement('span', { className: 'text-xs text-slate-500' },
+        `${doneCount}/${totalCount} steps`
+      ),
+    ),
+    feature.current_step && React.createElement('p', { className: 'text-xs text-slate-400 mb-3' },
+      'Current: ', React.createElement('span', { className: 'text-aia-accent' }, feature.current_step)
+    ),
+    React.createElement('div', { className: 'flex flex-wrap gap-1.5' },
+      ...Object.entries(steps).map(([step, status]) =>
+        React.createElement(StepBadge, { key: step, step, status })
+      )
+    )
+  );
+}
+
+function NewFeatureForm({ onCreated }) {
+  const [name, setName] = React.useState('');
+  const [err, setErr] = React.useState('');
+  const [loading, setLoading] = React.useState(false);
+
+  async function handleSubmit(e) {
+    e.preventDefault();
+    setErr('');
+    setLoading(true);
+    try {
+      await api.post('/features', { name });
+      setName('');
+      onCreated();
+    } catch (e) {
+      setErr(e.message);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return React.createElement('form', { onSubmit: handleSubmit, className: 'flex gap-2 items-start' },
+    React.createElement('div', null,
+      React.createElement('input', {
+        type: 'text',
+        value: name,
+        onChange: e => setName(e.target.value),
+        placeholder: 'feature-name',
+        className: 'bg-aia-card border border-aia-border rounded px-3 py-1.5 text-sm text-slate-200 placeholder-slate-500 focus:border-aia-accent focus:outline-none',
+      }),
+      err && React.createElement('p', { className: 'text-red-400 text-xs mt-1' }, err),
+    ),
+    React.createElement('button', {
+      type: 'submit',
+      disabled: loading || !name,
+      className: 'bg-aia-accent/20 text-aia-accent border border-aia-accent/30 rounded px-3 py-1.5 text-sm hover:bg-aia-accent/30 disabled:opacity-40',
+    }, loading ? '...' : '+ New Feature')
+  );
+}
+
+function LogViewer({ logs }) {
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    if (ref.current) ref.current.scrollTop = ref.current.scrollHeight;
+  }, [logs]);
+
+  if (!logs.length) return null;
+  return React.createElement('pre', {
+    ref,
+    className: 'bg-black/50 border border-aia-border rounded p-3 text-xs text-slate-400 overflow-auto max-h-48 whitespace-pre-wrap',
+  }, logs.join(''));
+}
+
+function QuickTicketForm({ onDone }) {
+  const [name, setName] = React.useState('');
+  const [description, setDescription] = React.useState('');
+  const [apply, setApply] = React.useState(false);
+  const [running, setRunning] = React.useState(false);
+  const [err, setErr] = React.useState('');
+  const [logs, setLogs] = React.useState([]);
+
+  async function handleSubmit(e) {
+    e.preventDefault();
+    setErr('');
+    setRunning(true);
+    setLogs([]);
+
+    const res = await streamPost('/quick', { name, description, apply }, {
+      onLog: (text) => setLogs(prev => [...prev, text]),
+      onStatus: (data) => setLogs(prev => [...prev, `[${data.status}] ${data.name || ''}\n`]),
+    });
+
+    if (res.ok) {
+      setName('');
+      setDescription('');
+      setLogs([]);
+      onDone();
+    } else {
+      setErr(res.error);
+    }
+    setRunning(false);
+  }
+
+  return React.createElement('form', {
+    onSubmit: handleSubmit,
+    className: 'bg-aia-card border border-amber-500/30 rounded-lg p-4 space-y-3',
+  },
+    React.createElement('h3', { className: 'text-sm font-semibold text-amber-400' }, 'Quick Ticket'),
+    React.createElement('p', { className: 'text-xs text-slate-500' }, 'dev-plan \u2192 implement \u2192 review'),
+    React.createElement('div', { className: 'flex gap-2' },
+      React.createElement('input', {
+        type: 'text',
+        value: name,
+        onChange: e => setName(e.target.value),
+        placeholder: 'ticket-name',
+        disabled: running,
+        className: 'bg-slate-900 border border-aia-border rounded px-3 py-1.5 text-sm text-slate-200 placeholder-slate-500 focus:border-amber-400 focus:outline-none flex-shrink-0',
+      }),
+      React.createElement('input', {
+        type: 'text',
+        value: description,
+        onChange: e => setDescription(e.target.value),
+        placeholder: 'Short description (optional)',
+        disabled: running,
+        className: 'bg-slate-900 border border-aia-border rounded px-3 py-1.5 text-sm text-slate-200 placeholder-slate-500 focus:border-amber-400 focus:outline-none flex-1',
+      }),
+    ),
+    React.createElement('div', { className: 'flex items-center gap-4' },
+      React.createElement('label', { className: 'flex items-center gap-2 text-xs text-slate-400 cursor-pointer' },
+        React.createElement('input', {
+          type: 'checkbox',
+          checked: apply,
+          onChange: e => setApply(e.target.checked),
+          disabled: running,
+        }),
+        'Agent mode (--apply)'
+      ),
+      React.createElement('button', {
+        type: 'submit',
+        disabled: running || !name,
+        className: 'bg-amber-500/20 text-amber-400 border border-amber-500/30 rounded px-4 py-1.5 text-sm hover:bg-amber-500/30 disabled:opacity-40',
+      }, running ? 'Running...' : 'Run Quick Ticket'),
+    ),
+    React.createElement(LogViewer, { logs }),
+    err && React.createElement('p', { className: 'text-red-400 text-xs' }, err),
+  );
+}
+
+export function Dashboard() {
+  const [features, setFeatures] = React.useState([]);
+  const [loading, setLoading] = React.useState(true);
+
+  async function load() {
+    try {
+      const data = await api.get('/features');
+      setFeatures(data);
+    } catch {}
+    setLoading(false);
+  }
+
+  React.useEffect(() => { load(); }, []);
+
+  return React.createElement('div', { className: 'space-y-6' },
+    React.createElement('div', { className: 'flex items-center justify-between' },
+      React.createElement('h1', { className: 'text-xl font-bold text-slate-100' }, 'Features'),
+      React.createElement(NewFeatureForm, { onCreated: load }),
+    ),
+
+    // Quick ticket
+    React.createElement(QuickTicketForm, { onDone: load }),
+
+    loading
+      ? React.createElement('p', { className: 'text-slate-500' }, 'Loading...')
+      : features.length === 0
+        ? React.createElement('p', { className: 'text-slate-500' }, 'No features yet. Create one to get started.')
+        : React.createElement('div', { className: 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4' },
+            ...features.map(f => React.createElement(FeatureCard, { key: f.name, feature: f }))
+          )
+  );
+}

package/src/ui/public/components/feature-detail.js

@@ -0,0 +1,278 @@
+import React from 'react';
+import { api, streamPost } from '/main.js';
+
+const STATUS_CLASSES = {
+  done: 'step-done',
+  pending: 'step-pending',
+  'in-progress': 'step-in-progress',
+  error: 'step-error',
+};
+
+const STATUS_ICONS = { done: '\u2713', pending: '\u00b7', 'in-progress': '\u25b6', error: '\u2717' };
+
+function StepPill({ step, status, active, onClick }) {
+  return React.createElement('button', {
+    onClick,
+    className: `px-3 py-1.5 text-xs rounded border transition-all ${STATUS_CLASSES[status] || 'step-pending'} ${active ? 'ring-2 ring-aia-accent ring-offset-1 ring-offset-aia-bg' : 'hover:brightness-125'}`,
+  }, `${STATUS_ICONS[status] || ''} ${step}`);
+}
+
+function FileEditor({ name, filename, onSaved }) {
+  const [content, setContent] = React.useState('');
+  const [loading, setLoading] = React.useState(true);
+  const [saving, setSaving] = React.useState(false);
+  const [dirty, setDirty] = React.useState(false);
+
+  React.useEffect(() => {
+    setLoading(true);
+    setDirty(false);
+    api.get(`/features/${name}/files/${filename}`)
+      .then(data => setContent(data.content))
+      .catch(() => setContent(''))
+      .finally(() => setLoading(false));
+  }, [name, filename]);
+
+  async function save() {
+    setSaving(true);
+    try {
+      await api.put(`/features/${name}/files/${filename}`, { content });
+      setDirty(false);
+      if (onSaved) onSaved();
+    } catch {}
+    setSaving(false);
+  }
+
+  if (loading) return React.createElement('p', { className: 'text-slate-500 text-sm' }, 'Loading...');
+
+  return React.createElement('div', { className: 'flex flex-col gap-2' },
+    React.createElement('div', { className: 'flex items-center justify-between' },
+      React.createElement('span', { className: 'text-sm text-slate-400' }, filename),
+      React.createElement('div', { className: 'flex gap-2' },
+        dirty && React.createElement('span', { className: 'text-xs text-amber-400' }, 'unsaved'),
+        React.createElement('button', {
+          onClick: save,
+          disabled: saving || !dirty,
+          className: 'bg-aia-accent/20 text-aia-accent border border-aia-accent/30 rounded px-3 py-1 text-xs hover:bg-aia-accent/30 disabled:opacity-40',
+        }, saving ? 'Saving...' : 'Save'),
+      ),
+    ),
+    React.createElement('textarea', {
+      value: content,
+      onChange: e => { setContent(e.target.value); setDirty(true); },
+      spellCheck: false,
+      className: 'w-full h-96 bg-slate-900 border border-aia-border rounded p-3 text-sm text-slate-300 font-mono resize-y focus:border-aia-accent focus:outline-none',
+    })
+  );
+}
+
+function QuickRunButton({ name, onDone }) {
+  const [running, setRunning] = React.useState(false);
+  const [description, setDescription] = React.useState('');
+  const [expanded, setExpanded] = React.useState(false);
+  const [err, setErr] = React.useState(null);
+  const [logs, setLogs] = React.useState([]);
+
+  async function run() {
+    setRunning(true);
+    setErr(null);
+    setLogs([]);
+
+    const res = await streamPost(`/features/${name}/quick`, { description }, {
+      onLog: (text) => setLogs(prev => [...prev, text]),
+      onStatus: (data) => setLogs(prev => [...prev, `[${data.status}] ${data.mode || ''}\n`]),
+    });
+
+    if (res.ok) {
+      if (onDone) onDone();
+    } else {
+      setErr(res.error);
+    }
+    setRunning(false);
+  }
+
+  if (!expanded) {
+    return React.createElement('button', {
+      onClick: () => setExpanded(true),
+      className: 'bg-amber-500/20 text-amber-400 border border-amber-500/30 rounded px-3 py-1.5 text-xs hover:bg-amber-500/30',
+    }, 'Quick Ticket (dev-plan \u2192 implement \u2192 review)');
+  }
+
+  return React.createElement('div', { className: 'bg-slate-900 border border-amber-500/30 rounded p-4 space-y-3' },
+    React.createElement('h4', { className: 'text-sm font-semibold text-amber-400' }, 'Quick Ticket'),
+    React.createElement('p', { className: 'text-xs text-slate-500' }, 'Skips early steps, runs dev-plan \u2192 implement \u2192 review'),
+    React.createElement('input', {
+      type: 'text',
+      value: description,
+      onChange: e => setDescription(e.target.value),
+      placeholder: 'Optional description...',
+      disabled: running,
+      className: 'w-full bg-aia-card border border-aia-border rounded px-3 py-1.5 text-sm text-slate-200 placeholder-slate-500 focus:border-amber-400 focus:outline-none',
+    }),
+    React.createElement('div', { className: 'flex gap-2' },
+      React.createElement('button', {
+        onClick: run,
+        disabled: running,
+        className: 'bg-amber-500/20 text-amber-400 border border-amber-500/30 rounded px-4 py-1.5 text-sm hover:bg-amber-500/30 disabled:opacity-40',
+      }, running ? 'Running...' : 'Run Quick'),
+      React.createElement('button', {
+        onClick: () => setExpanded(false),
+        disabled: running,
+        className: 'text-slate-500 hover:text-slate-300 text-xs',
+      }, 'Cancel'),
+    ),
+    React.createElement(LogViewer, { logs }),
+    err && React.createElement('p', { className: 'text-red-400 text-xs' }, err),
+  );
+}
+
+function LogViewer({ logs }) {
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    if (ref.current) ref.current.scrollTop = ref.current.scrollHeight;
+  }, [logs]);
+
+  if (!logs.length) return null;
+  return React.createElement('pre', {
+    ref,
+    className: 'bg-black/50 border border-aia-border rounded p-3 text-xs text-slate-400 overflow-auto max-h-64 whitespace-pre-wrap',
+  }, logs.join(''));
+}
+
+function RunPanel({ name, step, onDone }) {
+  const [description, setDescription] = React.useState('');
+  const [apply, setApply] = React.useState(false);
+  const [running, setRunning] = React.useState(false);
+  const [result, setResult] = React.useState(null);
+  const [err, setErr] = React.useState(null);
+  const [logs, setLogs] = React.useState([]);
+
+  async function run() {
+    setRunning(true);
+    setResult(null);
+    setErr(null);
+    setLogs([]);
+
+    const res = await streamPost(`/features/${name}/run/${step}`, { description, apply }, {
+      onLog: (text) => setLogs(prev => [...prev, text]),
+      onStatus: (data) => setLogs(prev => [...prev, `[${data.status}] ${data.step || ''}\n`]),
+    });
+
+    if (res.ok) {
+      setResult('Step completed.');
+      if (onDone) onDone();
+    } else {
+      setErr(res.error);
+    }
+    setRunning(false);
+  }
+
+  async function reset() {
+    try {
+      await api.post(`/features/${name}/reset/${step}`);
+      if (onDone) onDone();
+    } catch (e) {
+      setErr(e.message);
+    }
+  }
+
+  return React.createElement('div', { className: 'bg-slate-900 border border-aia-border rounded p-4 space-y-3' },
+    React.createElement('h4', { className: 'text-sm font-semibold text-slate-300' }, `Run: ${step}`),
+    React.createElement('input', {
+      type: 'text',
+      value: description,
+      onChange: e => setDescription(e.target.value),
+      placeholder: 'Optional description...',
+      disabled: running,
+      className: 'w-full bg-aia-card border border-aia-border rounded px-3 py-1.5 text-sm text-slate-200 placeholder-slate-500 focus:border-aia-accent focus:outline-none',
+    }),
+    React.createElement('div', { className: 'flex items-center gap-4' },
+      React.createElement('label', { className: 'flex items-center gap-2 text-xs text-slate-400 cursor-pointer' },
+        React.createElement('input', {
+          type: 'checkbox',
+          checked: apply,
+          onChange: e => setApply(e.target.checked),
+          disabled: running,
+          className: 'rounded',
+        }),
+        'Agent mode (--apply)'
+      ),
+      React.createElement('button', {
+        onClick: run,
+        disabled: running,
+        className: 'bg-emerald-500/20 text-emerald-400 border border-emerald-500/30 rounded px-4 py-1.5 text-sm hover:bg-emerald-500/30 disabled:opacity-40',
+      }, running ? 'Running...' : 'Run Step'),
+      React.createElement('button', {
+        onClick: reset,
+        disabled: running,
+        className: 'text-slate-500 hover:text-slate-300 text-xs',
+      }, 'Reset'),
+    ),
+    React.createElement(LogViewer, { logs }),
+    result && React.createElement('p', { className: 'text-emerald-400 text-xs' }, result),
+    err && React.createElement('p', { className: 'text-red-400 text-xs' }, err),
+  );
+}
+
+export function FeatureDetail({ name }) {
+  const [feature, setFeature] = React.useState(null);
+  const [loading, setLoading] = React.useState(true);
+  const [activeFile, setActiveFile] = React.useState('init.md');
+  const [activeStep, setActiveStep] = React.useState(null);
+
+  async function load() {
+    try {
+      const data = await api.get(`/features/${name}`);
+      setFeature(data);
+    } catch {}
+    setLoading(false);
+  }
+
+  React.useEffect(() => { load(); }, [name]);
+
+  if (loading) return React.createElement('p', { className: 'text-slate-500' }, 'Loading...');
+  if (!feature) return React.createElement('p', { className: 'text-red-400' }, `Feature "${name}" not found.`);
+
+  const steps = feature.steps || {};
+
+  return React.createElement('div', { className: 'space-y-6' },
+    // Header
+    React.createElement('div', { className: 'flex items-center gap-3' },
+      React.createElement('a', { href: '#/', className: 'text-slate-500 hover:text-slate-300' }, '\u2190'),
+      React.createElement('h1', { className: 'text-xl font-bold text-slate-100' }, name),
+      feature.current_step && React.createElement('span', { className: 'text-xs bg-aia-accent/20 text-aia-accent px-2 py-0.5 rounded' }, feature.current_step),
+    ),
+
+    // Quick run
+    React.createElement(QuickRunButton, { name, onDone: load }),
+
+    // Pipeline
+    React.createElement('div', { className: 'flex flex-wrap gap-2' },
+      ...Object.entries(steps).map(([step, status]) =>
+        React.createElement(StepPill, {
+          key: step,
+          step,
+          status,
+          active: activeStep === step,
+          onClick: () => { setActiveStep(step); setActiveFile(`${step}.md`); },
+        })
+      )
+    ),
+
+    // Run panel
+    activeStep && React.createElement(RunPanel, { name, step: activeStep, onDone: load }),
+
+    // File tabs
+    React.createElement('div', { className: 'flex gap-1 border-b border-aia-border' },
+      ...(feature.files || []).filter(f => f.endsWith('.md') || f.endsWith('.yaml')).map(f =>
+        React.createElement('button', {
+          key: f,
+          onClick: () => setActiveFile(f),
+          className: `px-3 py-1.5 text-xs border-b-2 transition-colors ${activeFile === f ? 'border-aia-accent text-aia-accent' : 'border-transparent text-slate-500 hover:text-slate-300'}`,
+        }, f)
+      )
+    ),
+
+    // Editor
+    activeFile && React.createElement(FileEditor, { key: `${name}-${activeFile}`, name, filename: activeFile, onSaved: load }),
+  );
+}

package/src/ui/public/index.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>AIA - AI Architecture Assistant</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script>
+    tailwind.config = {
+      theme: {
+        extend: {
+          colors: {
+            'aia-bg': '#0f172a',
+            'aia-card': '#1e293b',
+            'aia-border': '#334155',
+            'aia-accent': '#38bdf8',
+          }
+        }
+      }
+    }
+  </script>
+  <script type="importmap">
+  {
+    "imports": {
+      "react": "https://esm.sh/react@19?dev",
+      "react-dom/client": "https://esm.sh/react-dom@19/client?dev",
+      "react/jsx-runtime": "https://esm.sh/react@19/jsx-runtime?dev"
+    }
+  }
+  </script>
+  <style>
+    body { font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; }
+    .step-done { @apply bg-emerald-500/20 text-emerald-400 border-emerald-500/30; }
+    .step-pending { @apply bg-slate-700/50 text-slate-400 border-slate-600; }
+    .step-in-progress { @apply bg-amber-500/20 text-amber-400 border-amber-500/30; }
+    .step-error { @apply bg-red-500/20 text-red-400 border-red-500/30; }
+    textarea { tab-size: 2; }
+  </style>
+</head>
+<body class="bg-aia-bg text-slate-200 min-h-screen">
+  <div id="root"></div>
+  <script type="module" src="/main.js"></script>
+</body>
+</html>