create-harness-vibe-coding 0.8.19 → 0.9.3

package/src/ui/src/components/Header.tsx

@@ -1,175 +0,0 @@
-import { useEffect, useState } from 'react';
-import { Link, useLocation } from 'react-router-dom';
-import { Bot, CircleHelp, GitBranch, LayoutDashboard, Monitor, Settings, UsersRound } from 'lucide-react';
-import { apiJsonCached } from '../api';
-
-const NAV = [
-  { to: '/tasks', label: 'Tasks', icon: LayoutDashboard },
-  { to: '/workflow', label: 'Workflow', icon: GitBranch },
-  { to: '/agents', label: 'Agents', icon: Bot },
-  { to: '/roles', label: 'Roles', icon: UsersRound },
-  { to: '/settings', label: 'Settings', icon: Settings },
-];
-
-type ProjectInfo = { root?: string; taskCount?: number };
-type WorkflowInfo = { taskId?: string | null; phase?: string | null; gate?: string | null };
-
-function basename(value: string | undefined) {
-  if (!value) return 'project';
-  return value.split(/[\\/]/).filter(Boolean).pop() || value;
-}
-
-export default function Header() {
-  const location = useLocation();
-  const [project, setProject] = useState<ProjectInfo | null>(null);
-  const [workflow, setWorkflow] = useState<WorkflowInfo | null>(null);
-
-  useEffect(() => {
-    let cancelled = false;
-    Promise.allSettled([
-      apiJsonCached<ProjectInfo>('/api/project', { ttlMs: 30000 }),
-      apiJsonCached<WorkflowInfo>('/api/workflow', { ttlMs: 2000 }),
-    ]).then(([projectResult, workflowResult]) => {
-      if (cancelled) return;
-      if (projectResult.status === 'fulfilled') setProject(projectResult.value);
-      if (workflowResult.status === 'fulfilled') setWorkflow(workflowResult.value);
-    });
-    return () => { cancelled = true; };
-  }, []);
-
-  const activeMeta = [workflow?.taskId, workflow?.phase, workflow?.gate].filter(Boolean).join(' / ');
-
-  return (
-    <header
-      data-testid="header"
-      style={{
-        height: 'var(--header-h)',
-        display: 'flex',
-        alignItems: 'center',
-        padding: '0 16px',
-        borderBottom: '1px solid var(--border)',
-        background: 'var(--bg)',
-        gap: 18,
-        flexShrink: 0,
-        minWidth: 0,
-      }}
-    >
-      <Link
-        to="/"
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: 8,
-          fontWeight: 600,
-          fontSize: 14,
-          flexShrink: 0,
-        }}
-        title={project?.root || 'Harness'}
-      >
-        <div
-          data-testid="header-brand"
-          aria-hidden="true"
-          style={{
-            width: 22,
-            height: 22,
-            background: 'var(--fg)',
-            color: 'var(--bg)',
-            borderRadius: 4,
-            display: 'grid',
-            placeItems: 'center',
-            fontSize: 13,
-            lineHeight: 1,
-            fontWeight: 700,
-          }}
-        >
-          H
-        </div>
-        <span>Harness</span>
-        <span style={{ color: 'var(--muted)', fontSize: 11, fontWeight: 500 }}>
-          {basename(project?.root)}
-        </span>
-      </Link>
-
-      <nav data-testid="header-nav" style={{ display: 'flex', gap: 4, flexShrink: 0 }}>
-        {NAV.map(({ to, label, icon: Icon }) => {
-          const active = location.pathname === to || (to === '/tasks' && location.pathname === '/');
-          return (
-            <Link
-              key={to}
-              to={to}
-              data-testid={`nav-${label.toLowerCase()}`}
-              style={{
-                display: 'flex',
-                alignItems: 'center',
-                gap: 6,
-                padding: '4px 10px',
-                borderRadius: 'var(--radius)',
-                fontSize: 12,
-                fontWeight: active ? 600 : 400,
-                color: active ? 'var(--fg)' : 'var(--muted)',
-                background: active ? 'var(--surface)' : 'transparent',
-                transition: 'background 0.15s',
-                whiteSpace: 'nowrap',
-              }}
-            >
-              <Icon size={14} />
-              {label}
-            </Link>
-          );
-        })}
-      </nav>
-
-      <div style={{ flex: 1, minWidth: 12 }} />
-
-      <div
-        data-testid="header-active-task"
-        style={{
-          fontSize: 11,
-          color: 'var(--muted)',
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-          whiteSpace: 'nowrap',
-          maxWidth: 420,
-        }}
-        title={activeMeta || 'No active workflow'}
-      >
-        {activeMeta || `${project?.taskCount ?? 0} task(s)`}
-      </div>
-
-      <button
-        data-testid="theme-toggle"
-        title="System theme"
-        aria-label="System theme"
-        style={{
-          width: 28,
-          height: 28,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          borderRadius: 'var(--radius)',
-          border: '1px solid var(--border)',
-          color: 'var(--muted)',
-          flexShrink: 0,
-        }}
-      >
-        <Monitor size={14} />
-      </button>
-      <button
-        title="Harness help"
-        aria-label="Harness help"
-        style={{
-          width: 28,
-          height: 28,
-          display: 'grid',
-          placeItems: 'center',
-          borderRadius: 'var(--radius)',
-          border: '1px solid var(--border)',
-          color: 'var(--muted)',
-          flexShrink: 0,
-        }}
-      >
-        <CircleHelp size={14} />
-      </button>
-    </header>
-  );
-}

package/src/ui/src/components/LoadingView.tsx

@@ -1,22 +0,0 @@
-type Props = {
-  label?: string;
-  fullCanvas?: boolean;
-};
-
-export default function LoadingView({ label = 'Loading', fullCanvas = false }: Props) {
-  return (
-    <div className={`loading-view${fullCanvas ? ' loading-view-full' : ''}`} role="status" aria-live="polite">
-      <div className="loading-card">
-        <span className="loading-spinner" aria-hidden="true" />
-        <div>
-          <div className="loading-label">{label}</div>
-          <div className="loading-lines" aria-hidden="true">
-            <span />
-            <span />
-            <span />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/ui/src/components/RolesRoute.tsx

@@ -1,169 +0,0 @@
-import { useEffect, useMemo, useState } from 'react';
-import { Bot, GitBranch, RefreshCw, ShieldCheck, Terminal } from 'lucide-react';
-import { apiJsonCached, invalidateApiCache } from '../api';
-import LoadingView from './LoadingView';
-
-type RoleNode = {
-  agentId: string;
-  role: string;
-  level: number;
-  kind: string;
-  skills?: string[];
-  permissions?: string[];
-};
-
-type RoleEdge = { from: string; to: string; relation: string };
-type RoleGraph = { rootAgentId: string; agents: RoleNode[]; edges: RoleEdge[] };
-
-function kindColor(kind: string) {
-  if (kind === 'controller') return '#111111';
-  if (kind === 'runtime') return '#1e40af';
-  if (kind === 'review' || kind === 'validation') return '#166534';
-  if (kind === 'implementer') return '#7c2d12';
-  return '#6b7280';
-}
-
-function NodeIcon({ kind }: { kind: string }) {
-  if (kind === 'runtime') return <Terminal size={14} />;
-  if (kind === 'validation' || kind === 'review') return <ShieldCheck size={14} />;
-  return <Bot size={14} />;
-}
-
-export default function RolesRoute() {
-  const [graph, setGraph] = useState<RoleGraph | null>(null);
-  const [selectedId, setSelectedId] = useState('ceo');
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  const loadRoles = async () => {
-    try {
-      const data = await apiJsonCached<RoleGraph>('/api/roles', { ttlMs: 30000 });
-      setGraph(data);
-      setSelectedId(current => current && data.agents.some(agent => agent.agentId === current) ? current : data.rootAgentId);
-      setError(null);
-    } catch (e: any) {
-      setError(e?.message || 'Failed to load roles');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    loadRoles();
-  }, []);
-
-  const lanes = useMemo(() => {
-    const grouped = new Map<number, RoleNode[]>();
-    for (const node of graph?.agents || []) {
-      const lane = grouped.get(node.level) || [];
-      lane.push(node);
-      grouped.set(node.level, lane);
-    }
-    return [...grouped.entries()].sort(([a], [b]) => a - b);
-  }, [graph]);
-
-  const selected = graph?.agents.find(node => node.agentId === selectedId) || null;
-  const inbound = graph?.edges.filter(edge => edge.to === selectedId) || [];
-  const outbound = graph?.edges.filter(edge => edge.from === selectedId) || [];
-
-  if (loading) return <LoadingView label="Loading roles" />;
-  if (!graph) return <div style={{ padding: 20, color: '#991b1b', fontSize: 11 }}>{error || 'No role graph available.'}</div>;
-
-  return (
-    <div style={{ display: 'grid', gap: 12 }}>
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10 }}>
-        <h2 style={{ fontSize: 12, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.05em', color: 'var(--muted)', margin: 0, display: 'flex', alignItems: 'center', gap: 5 }}>
-          <GitBranch size={14} /> Roles
-        </h2>
-        <button onClick={() => { invalidateApiCache('/api/roles'); loadRoles(); }} style={{ fontSize: 10, color: 'var(--muted)', display: 'flex', alignItems: 'center', gap: 4, border: '1px solid var(--border)', borderRadius: 'var(--radius)', padding: '4px 8px' }}>
-          <RefreshCw size={11} /> Refresh
-        </button>
-      </div>
-
-      {error && <div style={{ fontSize: 11, color: '#991b1b' }}>{error}</div>}
-
-      <section style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(240px, 320px)', gap: 12, alignItems: 'start' }}>
-        <div style={{ display: 'grid', gap: 10 }}>
-          {lanes.map(([level, nodes]) => (
-            <div key={level} style={{ display: 'grid', gap: 6 }}>
-              <div style={{ fontSize: 10, color: 'var(--muted)', textTransform: 'uppercase', fontWeight: 700 }}>
-                {level === 0 ? 'Leader' : 'Role Layer'}
-              </div>
-              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(190px, 1fr))', gap: 6 }}>
-                {nodes.map(node => {
-                  const active = selectedId === node.agentId;
-                  const color = kindColor(node.kind);
-                  return (
-                    <button
-                      key={node.agentId}
-                      onClick={() => setSelectedId(node.agentId)}
-                      style={{
-                        border: `1px solid ${active ? color : 'var(--border)'}`,
-                        borderLeft: `3px solid ${color}`,
-                        borderRadius: 'var(--radius)',
-                        padding: 9,
-                        background: active ? 'var(--surface)' : 'var(--bg)',
-                        textAlign: 'left',
-                        minHeight: 82,
-                        display: 'grid',
-                        alignContent: 'start',
-                        gap: 4,
-                      }}
-                    >
-                      <div style={{ display: 'flex', alignItems: 'center', gap: 6, minWidth: 0 }}>
-                        <NodeIcon kind={node.kind} />
-                        <span style={{ fontSize: 12, fontWeight: 700, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{node.role}</span>
-                      </div>
-                      <div style={{ fontSize: 10, color }}>{node.kind}</div>
-                      <div style={{ fontSize: 10, color: 'var(--muted)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-                        {(node.skills || []).slice(0, 3).join(' / ') || node.agentId}
-                      </div>
-                    </button>
-                  );
-                })}
-              </div>
-            </div>
-          ))}
-        </div>
-
-        <aside style={{ border: '1px solid var(--border)', borderRadius: 'var(--radius)', padding: 12, background: 'var(--bg)' }}>
-          {selected ? (
-            <>
-              <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 8 }}>
-                <NodeIcon kind={selected.kind} />
-                <div style={{ minWidth: 0 }}>
-                  <div style={{ fontSize: 12, fontWeight: 700, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{selected.role}</div>
-                  <div style={{ fontSize: 10, color: 'var(--muted)' }}>{selected.agentId}</div>
-                </div>
-              </div>
-
-              <div style={{ fontSize: 10, fontWeight: 700, color: 'var(--muted)', textTransform: 'uppercase', marginBottom: 5 }}>Edges</div>
-              <div style={{ display: 'grid', gap: 3, fontSize: 10, marginBottom: 10 }}>
-                {[...inbound.map(edge => `${edge.from} -> ${edge.relation}`), ...outbound.map(edge => `${edge.relation} -> ${edge.to}`)].map((line, index) => (
-                  <div key={`${line}-${index}`} style={{ color: 'var(--muted)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{line}</div>
-                ))}
-                {inbound.length + outbound.length === 0 && <div style={{ color: 'var(--muted)' }}>no edges</div>}
-              </div>
-
-              <div style={{ fontSize: 10, fontWeight: 700, color: 'var(--muted)', textTransform: 'uppercase', marginBottom: 5 }}>Skills</div>
-              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 3, marginBottom: 10 }}>
-                {(selected.skills || []).map(skill => (
-                  <span key={skill} style={{ fontSize: 9, padding: '1px 5px', border: '1px solid var(--border)', borderRadius: 99, color: 'var(--muted)' }}>{skill}</span>
-                ))}
-              </div>
-
-              <div style={{ fontSize: 10, fontWeight: 700, color: 'var(--muted)', textTransform: 'uppercase', marginBottom: 5 }}>Permissions</div>
-              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 3 }}>
-                {(selected.permissions || []).map(permission => (
-                  <span key={permission} style={{ fontSize: 9, padding: '1px 5px', border: '1px solid var(--border)', borderRadius: 99, color: 'var(--muted)' }}>{permission}</span>
-                ))}
-              </div>
-            </>
-          ) : (
-            <div style={{ color: 'var(--muted)', fontSize: 11 }}>Select a role.</div>
-          )}
-        </aside>
-      </section>
-    </div>
-  );
-}

package/src/ui/src/components/SettingsRoute.tsx

@@ -1,166 +0,0 @@
-import { useEffect, useState } from 'react';
-import type { ReactNode } from 'react';
-import { RotateCcw, Save, Settings } from 'lucide-react';
-import { apiJson, apiJsonCached, invalidateApiCache } from '../api';
-import LoadingView from './LoadingView';
-
-type SettingsData = {
-  server: { host: string; port: number };
-  terminal: { enabled: boolean; attachMode: boolean; defaultRuntime: string };
-  peers: { allowlist: string[] };
-  ui: { theme: string; language: string; reducedMotion: boolean };
-};
-
-const DEFAULTS: SettingsData = {
-  server: { host: '127.0.0.1', port: 0 },
-  terminal: { enabled: false, attachMode: false, defaultRuntime: 'codex' },
-  peers: {
-    allowlist: [
-      'claude',
-      'cc',
-      'codex',
-      'opencode',
-      'gemini',
-      'qwen',
-      'deepseek',
-      'pi',
-      'aider',
-      'goose',
-      'amp',
-      'crush',
-      'cline',
-      'plandex',
-      'openclaw',
-      'chatgpt',
-      'openai',
-    ],
-  },
-  ui: { theme: 'auto', language: 'en', reducedMotion: false },
-};
-
-function mergeSettings(value: Partial<SettingsData>): SettingsData {
-  return {
-    ...DEFAULTS,
-    ...value,
-    server: { ...DEFAULTS.server, ...value.server },
-    terminal: { ...DEFAULTS.terminal, ...value.terminal },
-    peers: { ...DEFAULTS.peers, ...value.peers },
-    ui: { ...DEFAULTS.ui, ...value.ui },
-  };
-}
-
-export default function SettingsRoute() {
-  const [settings, setSettings] = useState<SettingsData>(DEFAULTS);
-  const [loading, setLoading] = useState(true);
-  const [saved, setSaved] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const loadSettings = async () => {
-    try {
-      const data = await apiJsonCached<Partial<SettingsData>>('/api/settings', { ttlMs: 10000 });
-      setSettings(mergeSettings(data));
-      setError(null);
-    } catch {
-      setError('Failed to load settings');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    loadSettings();
-  }, []);
-
-  const save = async () => {
-    setError(null);
-    setSaved(false);
-    try {
-      await apiJson('/api/settings', {
-        method: 'POST',
-        body: JSON.stringify(settings),
-      });
-      invalidateApiCache('/api/settings');
-      setSaved(true);
-      setTimeout(() => setSaved(false), 2000);
-    } catch (e: any) {
-      setError(e?.message || 'Save failed');
-    }
-  };
-
-  const field = (label: string, child: ReactNode) => (
-    <div style={{ marginBottom: 12 }}>
-      <div style={{ fontSize: 10, fontWeight: 600, color: 'var(--muted)', marginBottom: 4, textTransform: 'uppercase' }}>{label}</div>
-      {child}
-    </div>
-  );
-
-  if (loading) return <LoadingView label="Loading settings" />;
-
-  return (
-    <div style={{ maxWidth: 560 }}>
-      <h2 style={{ fontSize: 12, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.05em', color: 'var(--muted)', marginBottom: 12, display: 'flex', alignItems: 'center', gap: 4 }}>
-        <Settings size={14} /> Settings
-      </h2>
-
-      <div style={{ padding: 14, border: '1px solid var(--border)', borderRadius: 'var(--radius)', background: 'var(--bg)' }}>
-        {field('Server Host', <input type="text" value={settings.server.host} onChange={e => setSettings(s => ({ ...s, server: { ...s.server, host: e.target.value } }))} style={{ width: '100%', padding: '4px 8px', fontSize: 11, border: '1px solid var(--border)', borderRadius: 'var(--radius)' }} />)}
-
-        {field('Server Port', <input type="number" value={settings.server.port} onChange={e => setSettings(s => ({ ...s, server: { ...s.server, port: parseInt(e.target.value) || 0 } }))} style={{ width: 100, padding: '4px 8px', fontSize: 11, border: '1px solid var(--border)', borderRadius: 'var(--radius)' }} />)}
-
-        {field('UI Theme', (
-          <select value={settings.ui.theme} onChange={e => setSettings(s => ({ ...s, ui: { ...s.ui, theme: e.target.value } }))} style={{ padding: '4px 8px', fontSize: 11, border: '1px solid var(--border)', borderRadius: 'var(--radius)', background: 'var(--bg)' }}>
-            <option value="auto">auto</option>
-            <option value="light">light</option>
-            <option value="dark">dark</option>
-          </select>
-        ))}
-
-        {field('Language', (
-          <select value={settings.ui.language} onChange={e => setSettings(s => ({ ...s, ui: { ...s.ui, language: e.target.value } }))} style={{ padding: '4px 8px', fontSize: 11, border: '1px solid var(--border)', borderRadius: 'var(--radius)', background: 'var(--bg)' }}>
-            <option value="en">English</option>
-            <option value="zh">Chinese</option>
-            <option value="ja">Japanese</option>
-          </select>
-        ))}
-
-        {field('Terminal', (
-          <label style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11 }}>
-            <input type="checkbox" checked={settings.terminal.enabled} onChange={e => setSettings(s => ({ ...s, terminal: { ...s.terminal, enabled: e.target.checked } }))} />
-            Enable PTY terminal
-          </label>
-        ))}
-
-        {field('Default Task Agent', (
-          <select value={settings.terminal.defaultRuntime} onChange={e => setSettings(s => ({ ...s, terminal: { ...s.terminal, defaultRuntime: e.target.value } }))} style={{ padding: '4px 8px', fontSize: 11, border: '1px solid var(--border)', borderRadius: 'var(--radius)', background: 'var(--bg)' }}>
-            {settings.peers.allowlist.map(runtime => <option key={runtime} value={runtime}>{runtime}</option>)}
-          </select>
-        ))}
-
-        {field('Reduced Motion', (
-          <label style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11 }}>
-            <input type="checkbox" checked={settings.ui.reducedMotion} onChange={e => setSettings(s => ({ ...s, ui: { ...s.ui, reducedMotion: e.target.checked } }))} />
-            Disable animations
-          </label>
-        ))}
-
-        {field('Peer Runtimes', (
-          <input type="text" value={settings.peers.allowlist.join(', ')}
-            onChange={e => setSettings(s => ({ ...s, peers: { allowlist: e.target.value.split(',').map(x => x.trim()).filter(Boolean) } }))}
-            style={{ width: '100%', padding: '4px 8px', fontSize: 11, border: '1px solid var(--border)', borderRadius: 'var(--radius)' }} />
-        ))}
-      </div>
-
-      {error && <div style={{ marginTop: 8, fontSize: 11, color: '#991b1b', padding: '6px 8px', background: '#fef2f2', borderRadius: 'var(--radius)' }}>{error}</div>}
-      {saved && <div style={{ marginTop: 8, fontSize: 11, color: '#166534', padding: '6px 8px', background: '#dcfce7', borderRadius: 'var(--radius)' }}>Settings saved.</div>}
-
-      <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
-        <button onClick={save} style={{ padding: '6px 16px', fontSize: 11, fontWeight: 500, border: '1px solid #166534', borderRadius: 'var(--radius)', background: '#166534', color: '#fff', display: 'flex', alignItems: 'center', gap: 4 }}>
-          <Save size={12} /> Save
-        </button>
-        <button onClick={loadSettings} style={{ padding: '6px 16px', fontSize: 11, border: '1px solid var(--border)', borderRadius: 'var(--radius)', background: 'var(--bg)', display: 'flex', alignItems: 'center', gap: 4 }}>
-          <RotateCcw size={12} /> Reload
-        </button>
-      </div>
-    </div>
-  );
-}