create-harness-vibe-coding 0.8.17 → 0.8.19

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

@@ -0,0 +1,175 @@
+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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,169 @@
+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

@@ -0,0 +1,166 @@
+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>
+  );
+}