ai-maestro 1.0.0

package/src/ui/public/app.js

@@ -0,0 +1,600 @@
+const FILTERS = [
+  { id: 'all', label: 'Todos' },
+  { id: 'maestro', label: 'Maestro' },
+  { id: 'codex', label: 'Codex' },
+  { id: 'memory', label: 'Memory' },
+  { id: 'safety', label: 'Safety' },
+  { id: 'engine', label: 'Engine' },
+  { id: 'ui', label: 'UI' },
+  { id: 'issues', label: 'Erros/Bloqueios' }
+];
+
+const COMMANDS = [
+  { id: 'doctor', label: 'Doctor' },
+  { id: 'codex-home', label: 'Codex Home' },
+  { id: 'codex-test', label: 'Codex Test' },
+  { id: 'task-list', label: 'Task List' },
+  { id: 'task-next', label: 'Task Next' },
+  { id: 'run-one', label: 'Run One' },
+  { id: 'run-all-limit-3', label: 'Run 3' },
+  { id: 'checkpoint', label: 'Checkpoint' },
+  { id: 'handoff', label: 'Handoff' },
+  { id: 'stats', label: 'Stats' },
+  { id: 'release-check', label: 'Release Check' },
+  { id: 'schema-check', label: 'Schema Check' }
+];
+
+const STATUS_META = {
+  idle: { key: 'idle', label: 'parado', icon: '⏸', tone: 'idle' },
+  running: { key: 'running', label: 'executando', icon: '▶', tone: 'running' },
+  thinking: { key: 'thinking', label: 'pensando', icon: '☁', tone: 'thinking' },
+  completed: { key: 'completed', label: 'finalizado', icon: '✓', tone: 'success' },
+  done: { key: 'completed', label: 'finalizado', icon: '✓', tone: 'success' },
+  completed_with_warnings: { key: 'completed_with_warnings', label: 'finalizado com alertas', icon: '⚠', tone: 'warning' },
+  blocked: { key: 'blocked', label: 'bloqueado', icon: '⛔', tone: 'blocked' },
+  needs_human: { key: 'needs_human', label: 'precisa de decisão humana', icon: '❔', tone: 'blocked' },
+  failed: { key: 'failed', label: 'erro', icon: '⚠', tone: 'error' },
+  error: { key: 'failed', label: 'erro', icon: '⚠', tone: 'error' },
+  success: { key: 'completed', label: 'finalizado', icon: '✓', tone: 'success' },
+  stopped: { key: 'idle', label: 'parado', icon: '⏸', tone: 'idle' },
+  warning: { key: 'warning', label: 'atenção', icon: '!', tone: 'warning' }
+};
+
+const el = {
+  projectName: document.querySelector('#projectName'),
+  connectionStatus: document.querySelector('#connectionStatus'),
+  commandStatus: document.querySelector('#commandStatus'),
+  cards: document.querySelector('#cards'),
+  taskCounts: document.querySelector('#taskCounts'),
+  taskFilters: document.querySelector('#taskFilters'),
+  taskList: document.querySelector('#taskList'),
+  operationStatus: document.querySelector('#operationStatus'),
+  commandButtons: document.querySelector('#commandButtons'),
+  commandSummary: document.querySelector('#commandSummary'),
+  commandLog: document.querySelector('#commandLog'),
+  toggleCommandLogButton: document.querySelector('#toggleCommandLogButton'),
+  copyCommandLogButton: document.querySelector('#copyCommandLogButton'),
+  orchestraMeta: document.querySelector('#orchestraMeta'),
+  orchestraEngines: document.querySelector('#orchestraEngines'),
+  orchestraBudget: document.querySelector('#orchestraBudget'),
+  orchestraFallback: document.querySelector('#orchestraFallback'),
+  timelineCounts: document.querySelector('#timelineCounts'),
+  timelineFilters: document.querySelector('#timelineFilters'),
+  timelineList: document.querySelector('#timelineList'),
+  copyHandoffButton: document.querySelector('#copyHandoffButton'),
+  clearVisualButton: document.querySelector('#clearVisualButton'),
+  toast: document.querySelector('#toast')
+};
+
+const app = {
+  state: null,
+  filter: 'all',
+  commandBusy: false,
+  connection: 'connecting',
+  commandLogExpanded: false,
+  commandResult: null,
+  commandRawText: '',
+  expandedRawKeys: new Set(),
+  toastTimer: null
+};
+
+function text(value) {
+  return value == null ? '' : String(value);
+}
+
+function normalizeStatus(raw) {
+  return app.state?.statusMap?.[String(raw || 'idle')] || STATUS_META[String(raw || 'idle')] || STATUS_META.idle;
+}
+
+function normalizeGroup(raw) {
+  return app.state?.groupMap?.[String(raw || 'maestro')] || { key: String(raw || 'maestro'), label: String(raw || 'Maestro'), icon: '▣' };
+}
+
+function formatRelativeTime(value) {
+  if (!value) return 'agora';
+  const time = new Date(value).getTime();
+  if (Number.isNaN(time)) return 'agora';
+  const delta = Math.max(0, Date.now() - time);
+  const minutes = Math.floor(delta / 60000);
+  if (minutes < 1) return 'agora';
+  if (minutes < 60) return `${minutes}m`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h`;
+  const days = Math.floor(hours / 24);
+  return `${days}d`;
+}
+
+function isIssue(entry) {
+  return entry.issue || entry.status === 'blocked' || entry.status === 'failed';
+}
+
+function matchesFilter(entry) {
+  if (app.filter === 'all') return true;
+  if (app.filter === 'issues') return isIssue(entry);
+  return entry.group === app.filter;
+}
+
+function setToast(message, sticky = false) {
+  el.toast.textContent = message;
+  el.toast.classList.add('toast--visible');
+  if (app.toastTimer) clearTimeout(app.toastTimer);
+  if (!sticky) {
+    app.toastTimer = setTimeout(() => {
+      el.toast.classList.remove('toast--visible');
+      el.toast.textContent = '';
+    }, 2200);
+  }
+}
+
+function setConnection(status) {
+  app.connection = status;
+  const meta = {
+    connecting: { label: 'conectando', tone: 'warning' },
+    connected: { label: 'conectado', tone: 'success' },
+    reconnecting: { label: 'reconectando', tone: 'warning' },
+    disconnected: { label: 'desconectado', tone: 'error' }
+  }[status] || { label: status, tone: 'warning' };
+  el.connectionStatus.textContent = meta.label;
+  el.connectionStatus.className = `chip chip--${meta.tone}`;
+}
+
+function setCommandBusy(busy) {
+  app.commandBusy = busy;
+  const meta = busy ? { label: 'executando', tone: 'running' } : { label: 'parado', tone: 'idle' };
+  el.commandStatus.textContent = meta.label;
+  el.commandStatus.className = `chip chip--${meta.tone}`;
+  render();
+}
+
+function setCommandLogExpanded(expanded) {
+  app.commandLogExpanded = expanded;
+  renderCommandPanel();
+}
+
+function logRawKey(key) {
+  return app.expandedRawKeys.has(key);
+}
+
+function toggleRawKey(key) {
+  if (app.expandedRawKeys.has(key)) {
+    app.expandedRawKeys.delete(key);
+  } else {
+    app.expandedRawKeys.add(key);
+  }
+  render();
+}
+
+function escapeClipboardText(textValue) {
+  return textValue || '';
+}
+
+async function copyText(value, successMessage) {
+  const clipboardValue = escapeClipboardText(value);
+  try {
+    await navigator.clipboard.writeText(clipboardValue);
+    setToast(successMessage);
+  } catch (error) {
+    const fallback = document.createElement('textarea');
+    fallback.value = clipboardValue;
+    fallback.setAttribute('readonly', 'true');
+    fallback.style.position = 'fixed';
+    fallback.style.opacity = '0';
+    document.body.appendChild(fallback);
+    fallback.select();
+    document.execCommand('copy');
+    document.body.removeChild(fallback);
+    setToast(successMessage);
+  }
+}
+
+function clearVisualState() {
+  app.expandedRawKeys.clear();
+  app.commandLogExpanded = false;
+  app.commandRawText = '';
+  el.commandSummary.textContent = 'Nenhum comando executado.';
+  el.commandLog.textContent = '';
+  el.commandLog.classList.add('terminal--hidden');
+  render();
+  setToast('Visual limpo');
+}
+
+function createChip(meta, extraClass = '') {
+  const chip = document.createElement('span');
+  chip.className = `chip chip--${meta.tone || 'neutral'}${extraClass ? ' ' + extraClass : ''}`;
+  chip.textContent = `${meta.icon} ${meta.label}`;
+  return chip;
+}
+
+function createButton(label, handler, options = {}) {
+  const button = document.createElement('button');
+  button.type = 'button';
+  button.textContent = label;
+  if (options.disabled) button.disabled = true;
+  if (options.className) button.className = options.className;
+  if (options.localAction) button.dataset.localAction = 'true';
+  if (options.serverAction) button.dataset.serverAction = 'true';
+  button.addEventListener('click', handler);
+  return button;
+}
+
+function renderFilterBar(container) {
+  container.innerHTML = '';
+  for (const filter of FILTERS) {
+    const button = createButton(filter.label, () => {
+      app.filter = filter.id;
+      render();
+    }, { className: app.filter === filter.id ? 'filter filter--active' : 'filter', localAction: true });
+    container.appendChild(button);
+  }
+}
+
+function renderCards() {
+  el.cards.innerHTML = '';
+  const cards = app.state?.cards || [];
+  for (const card of cards) {
+    const meta = normalizeStatus(card.status);
+    const cardEl = document.createElement('article');
+    cardEl.className = 'card';
+
+    const header = document.createElement('div');
+    header.className = 'card-head';
+    const title = document.createElement('h3');
+    title.textContent = card.title;
+    header.appendChild(title);
+    header.appendChild(createChip(meta));
+
+    const detail = document.createElement('p');
+    detail.className = 'card-detail';
+    detail.textContent = text(card.detail);
+
+    const eventLine = document.createElement('div');
+    eventLine.className = 'card-event';
+    const lastEvent = card.lastEvent;
+    if (lastEvent) {
+      eventLine.appendChild(document.createTextNode(`${lastEvent.icon} ${lastEvent.summary} · ${formatRelativeTime(lastEvent.timestamp)}`));
+    } else {
+      eventLine.textContent = card.lastEventLabel || 'Sem evento recente';
+    }
+
+    const actions = document.createElement('div');
+    actions.className = 'inline-actions';
+    const rawKey = `card:${card.id}`;
+    const rawVisible = logRawKey(rawKey);
+    actions.appendChild(createButton(rawVisible ? 'Ocultar log bruto' : 'Ver log bruto', () => toggleRawKey(rawKey), { localAction: true }));
+    actions.appendChild(createButton('Copiar log', () => copyText(lastEvent ? lastEvent.rawText : text(card.lastEventLabel), 'Log copiado'), { localAction: true }));
+
+    const raw = document.createElement('pre');
+    raw.className = rawVisible ? 'terminal terminal--card' : 'terminal terminal--card terminal--hidden';
+    raw.textContent = lastEvent ? lastEvent.rawText : text(card.lastEventLabel);
+
+    cardEl.append(header, detail, eventLine, actions, raw);
+    el.cards.appendChild(cardEl);
+  }
+}
+
+function renderCommandButtons() {
+  el.commandButtons.innerHTML = '';
+  for (const command of COMMANDS) {
+    el.commandButtons.appendChild(createButton(
+      command.label,
+      () => runCommand(command.id),
+      { disabled: app.commandBusy, serverAction: true, className: 'action-button action-button--primary' }
+    ));
+  }
+}
+
+function renderTasks() {
+  const tasks = app.state?.tasks || [];
+  el.taskCounts.textContent = tasks.length + ' tarefas · ' + Object.entries(app.state?.taskCounts || {}).map(([key, value]) => `${key}: ${value}`).join('  ');
+  el.taskList.innerHTML = '';
+  el.taskFilters.innerHTML = '';
+  const taskFilterLabel = document.createElement('span');
+  taskFilterLabel.className = 'meta';
+  taskFilterLabel.textContent = `Filtro ativo: ${FILTERS.find(filter => filter.id === app.filter)?.label || 'Todos'}`;
+  el.taskFilters.appendChild(taskFilterLabel);
+
+  for (const task of tasks) {
+    const item = document.createElement('article');
+    item.className = 'task-row';
+
+    const head = document.createElement('div');
+    head.className = 'task-row__head';
+    const statusMeta = task.statusView || normalizeStatus(task.status);
+    head.appendChild(createChip(statusMeta));
+
+    const title = document.createElement('div');
+    title.className = 'task-row__title';
+    title.textContent = `#${task.id} ${task.title || task.description || ''}`;
+
+    const meta = document.createElement('div');
+    meta.className = 'task-row__meta';
+    meta.textContent = `${task.priority || 'medium'} · ${task.engine || 'codex9'} · ${task.lastUpdatedAgo || 'agora'}`;
+
+    const actions = document.createElement('div');
+    actions.className = 'inline-actions';
+    for (const action of task.actions || []) {
+      actions.appendChild(createButton(
+        action.label,
+        () => runCommand(action.command, { taskId: action.taskId }),
+        { disabled: app.commandBusy, serverAction: true, className: 'action-button action-button--' + (action.tone || 'primary') }
+      ));
+    }
+
+    item.append(head, title, meta, actions);
+    el.taskList.appendChild(item);
+  }
+}
+
+function kvRow(container, label, value) {
+  const row = document.createElement('div');
+  row.className = 'orchestra-kv-row';
+  const labelEl = document.createElement('span');
+  labelEl.className = 'orchestra-kv-label';
+  labelEl.textContent = label;
+  const valueEl = document.createElement('span');
+  valueEl.className = 'orchestra-kv-value';
+  valueEl.textContent = String(value);
+  row.append(labelEl, valueEl);
+  container.appendChild(row);
+}
+
+function renderOrchestra() {
+  const orchestra = app.state?.orchestra;
+  el.orchestraEngines.innerHTML = '';
+  el.orchestraBudget.innerHTML = '';
+  el.orchestraFallback.innerHTML = '';
+  if (!orchestra) {
+    el.orchestraMeta.textContent = 'Sem dados de orquestra (.maestro/engines.json ausente)';
+    return;
+  }
+  el.orchestraMeta.textContent = `${orchestra.enabledEngineCount} de ${orchestra.engines.length} engines habilitadas`;
+
+  for (const engine of orchestra.engines) {
+    const card = document.createElement('div');
+    card.className = 'orchestra-engine';
+    const head = document.createElement('div');
+    head.className = 'orchestra-engine__head';
+    const name = document.createElement('span');
+    name.className = 'orchestra-engine__name';
+    name.textContent = engine.id;
+    head.appendChild(name);
+    head.appendChild(createChip({
+      icon: engine.enabled ? '✓' : '⏸',
+      label: engine.enabled ? 'enabled' : 'disabled',
+      tone: engine.enabled ? 'success' : 'idle'
+    }));
+    head.appendChild(createChip({
+      icon: engine.validated ? '✓' : '?',
+      label: engine.validated ? 'validated' : 'unvalidated',
+      tone: engine.validated ? 'success' : 'warning'
+    }));
+    const detail = document.createElement('p');
+    detail.className = 'orchestra-engine__detail';
+    detail.textContent = `${engine.provider} · custo: ${engine.costClass} · papéis: ${engine.roles.length ? engine.roles.join(', ') : 'nenhum'}`;
+    card.append(head, detail);
+    el.orchestraEngines.appendChild(card);
+  }
+
+  if (orchestra.budget) {
+    kvRow(el.orchestraBudget, 'preferFree', orchestra.budget.preferFree);
+    kvRow(el.orchestraBudget, 'allowPaid', orchestra.budget.allowPaid);
+    kvRow(el.orchestraBudget, 'allowClaudeReview', orchestra.budget.allowClaudeReview);
+    kvRow(el.orchestraBudget, 'allowDirectOpenAI', orchestra.budget.allowDirectOpenAI);
+    kvRow(el.orchestraBudget, 'estimatedTokenBudget', orchestra.budget.estimatedTokenBudget);
+    kvRow(el.orchestraBudget, 'maxRunsPerTask', orchestra.budget.maxRunsPerTask);
+  } else {
+    kvRow(el.orchestraBudget, 'status', 'sem .maestro/budget.json');
+  }
+
+  kvRow(el.orchestraFallback, 'regras de fallback', orchestra.fallbackRuleCount);
+  kvRow(el.orchestraFallback, 'profundidade máxima', orchestra.delegationLimits.maxDepth);
+  kvRow(el.orchestraFallback, 'subagentes por gerente', orchestra.delegationLimits.maxSubagentsPerManager);
+  kvRow(el.orchestraFallback, 'engines tentadas por task', orchestra.delegationLimits.maxEnginesTriedPerTask);
+  kvRow(el.orchestraFallback, 'gerentes de setor', orchestra.sectorManagers.length);
+}
+
+function renderTimeline() {
+  const timeline = (app.state?.timeline || []).filter(matchesFilter);
+  el.timelineCounts.textContent = `${timeline.length} de ${(app.state?.timeline || []).length} eventos`;
+  el.timelineList.innerHTML = '';
+  renderFilterBar(el.timelineFilters);
+
+  for (const entry of timeline) {
+    const item = document.createElement('article');
+    item.className = 'timeline-row';
+
+    const head = document.createElement('div');
+    head.className = 'timeline-row__head';
+    const groupMeta = normalizeGroup(entry.group);
+    const groupTone = {
+      maestro: 'running',
+      codex: 'thinking',
+      memory: 'success',
+      safety: 'blocked',
+      engine: 'warning',
+      ui: 'idle',
+      issue: 'error'
+    }[groupMeta.key] || 'idle';
+    head.appendChild(createChip({ ...groupMeta, tone: isIssue(entry) ? 'error' : groupTone }));
+    head.appendChild(createChip(normalizeStatus(entry.status)));
+    const time = document.createElement('span');
+    time.className = 'meta';
+    time.textContent = formatRelativeTime(entry.timestamp);
+    head.appendChild(time);
+
+    const summary = document.createElement('p');
+    summary.className = 'timeline-row__summary';
+    summary.textContent = `${entry.icon} ${entry.summary}`;
+
+    const detail = document.createElement('div');
+    detail.className = 'timeline-row__detail';
+    detail.textContent = `${entry.agent} · ${entry.kind} · ${entry.source}`;
+
+    const actions = document.createElement('div');
+    actions.className = 'inline-actions';
+    const rawKey = `timeline:${entry.source}:${entry.timestamp}:${entry.commandId || entry.taskId || entry.kind}`;
+    const rawVisible = logRawKey(rawKey);
+    actions.appendChild(createButton(rawVisible ? 'Ocultar log bruto' : 'Ver log bruto', () => toggleRawKey(rawKey), { localAction: true }));
+    actions.appendChild(createButton('Copiar log', () => copyText(entry.rawText, 'Log copiado'), { localAction: true }));
+
+    const raw = document.createElement('pre');
+    raw.className = rawVisible ? 'terminal terminal--timeline' : 'terminal terminal--timeline terminal--hidden';
+    raw.textContent = entry.rawText;
+
+    item.append(head, summary, detail, actions, raw);
+    el.timelineList.appendChild(item);
+  }
+}
+
+function renderCommandPanel() {
+  const result = app.commandResult;
+  const summary = result
+    ? `${result.commandId}${result.taskId ? ' #' + result.taskId : ''} · ${normalizeStatus(result.status).label} · exit ${result.exitCode} · ${result.durationMs}ms`
+    : 'Nenhum comando executado.';
+  el.commandSummary.textContent = summary;
+  el.commandLog.textContent = result ? (result.stdout || result.stderr || result.summary || '') : '';
+  el.commandLog.className = app.commandLogExpanded ? 'terminal' : 'terminal terminal--hidden';
+  el.toggleCommandLogButton.textContent = app.commandLogExpanded ? 'Ocultar log bruto' : 'Ver log bruto';
+  el.copyCommandLogButton.disabled = !result;
+  el.operationStatus.textContent = result ? `${formatRelativeTime(result.timestamp)}` : '';
+}
+
+function renderTopStatus() {
+  const projectName = app.state?.projectRoot ? app.state.projectRoot.split(/[\\/]/).pop() : 'Maestro Console';
+  el.projectName.textContent = projectName || 'Maestro Console';
+  if (!app.state) {
+    el.commandStatus.textContent = 'parado';
+    el.commandStatus.className = 'chip chip--idle';
+  }
+}
+
+function render() {
+  if (!app.state) return;
+  renderTopStatus();
+  renderCards();
+  renderCommandButtons();
+  renderTasks();
+  renderOrchestra();
+  renderTimeline();
+  renderCommandPanel();
+}
+
+async function fetchState() {
+  const response = await fetch('/api/state');
+  if (!response.ok) throw new Error('Falha ao carregar estado');
+  return response.json();
+}
+
+async function refreshState() {
+  app.state = await fetchState();
+  render();
+}
+
+async function runCommand(command, payload = {}) {
+  if (app.commandBusy) return;
+  setCommandBusy(true);
+  app.commandLogExpanded = false;
+  try {
+    const response = await fetch('/api/command', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ command, ...payload })
+    });
+    const result = await response.json();
+    if (!response.ok) {
+      throw new Error(result.error || 'Command failed');
+    }
+    app.commandResult = result;
+    app.commandRawText = result.stdout || result.stderr || result.summary || '';
+    el.commandLog.textContent = app.commandRawText;
+    el.commandLog.className = app.commandLogExpanded ? 'terminal' : 'terminal terminal--hidden';
+    setToast(`${command} executado`);
+    await refreshState();
+  } catch (error) {
+    app.commandResult = {
+      commandId: command,
+      status: 'failed',
+      exitCode: 1,
+      timestamp: new Date().toISOString(),
+      summary: error.message,
+      stdout: '',
+      stderr: error.message,
+      durationMs: 0
+    };
+    app.commandRawText = error.message;
+    el.commandLog.textContent = error.message;
+    el.commandLog.className = app.commandLogExpanded ? 'terminal' : 'terminal terminal--hidden';
+    setToast(error.message, true);
+  } finally {
+    setCommandBusy(false);
+  }
+}
+
+async function copyHandoff() {
+  try {
+    const response = await fetch('/api/handoff');
+    const result = await response.json();
+    if (!response.ok) throw new Error(result.error || 'Falha ao ler handoff');
+    await copyText(result.content || '', 'Handoff copiado');
+  } catch (error) {
+    setToast(error.message, true);
+  }
+}
+
+function clearVisual() {
+  app.expandedRawKeys.clear();
+  app.commandLogExpanded = false;
+  app.commandRawText = '';
+  app.commandResult = null;
+  render();
+  setToast('Visual limpo');
+}
+
+function wireControls() {
+  el.toggleCommandLogButton.addEventListener('click', () => {
+    app.commandLogExpanded = !app.commandLogExpanded;
+    renderCommandPanel();
+  });
+  el.copyCommandLogButton.addEventListener('click', () => {
+    copyText(app.commandRawText || el.commandSummary.textContent || '', 'Log copiado');
+  });
+  el.copyHandoffButton.addEventListener('click', copyHandoff);
+  el.clearVisualButton.addEventListener('click', clearVisual);
+  setConnection('connecting');
+}
+
+function bindSocket() {
+  const source = new EventSource('/api/events');
+  source.addEventListener('state', event => {
+    app.state = JSON.parse(event.data);
+    render();
+    setConnection('connected');
+  });
+  source.addEventListener('heartbeat', () => {
+    if (app.connection !== 'connected') setConnection('connected');
+  });
+  source.onerror = () => {
+    if (source.readyState === EventSource.CLOSED) {
+      setConnection('disconnected');
+    } else {
+      setConnection('reconnecting');
+    }
+  };
+  source.onopen = () => {
+    setConnection('connected');
+    if (!app.state) {
+      refreshState().catch(error => setToast(error.message, true));
+    }
+  };
+}
+
+async function bootstrap() {
+  wireControls();
+  await refreshState().catch(error => {
+    setConnection('disconnected');
+    setToast(error.message, true);
+  });
+  bindSocket();
+}
+
+bootstrap();

package/src/ui/public/index.html

@@ -0,0 +1,88 @@
+<!doctype html>
+<html lang="pt-BR">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Maestro Console</title>
+    <link rel="stylesheet" href="/style.css">
+  </head>
+  <body>
+    <header class="topbar">
+      <div class="brand">
+        <div class="eyebrow">AI-MAESTRO</div>
+        <h1 id="projectName">Maestro Console</h1>
+      </div>
+      <div class="topbar-actions">
+        <span id="connectionStatus" class="chip chip--neutral">conectando</span>
+        <span id="commandStatus" class="chip chip--neutral">parado</span>
+        <button id="copyHandoffButton" type="button">Copiar Handoff</button>
+        <button id="clearVisualButton" type="button">Limpar visual</button>
+      </div>
+    </header>
+
+    <main class="shell">
+      <section id="cards" class="cards"></section>
+
+      <section class="workspace">
+        <section class="panel tasks-panel">
+          <div class="panel-head">
+            <h2>Tarefas</h2>
+            <span id="taskCounts" class="meta"></span>
+          </div>
+          <div id="taskFilters" class="filters"></div>
+          <div id="taskList" class="task-list"></div>
+        </section>
+
+        <section class="panel operations-panel">
+          <div class="panel-head">
+            <h2>Operações</h2>
+            <span id="operationStatus" class="meta"></span>
+          </div>
+          <div id="commandButtons" class="command-buttons"></div>
+          <div class="microterminal">
+            <div class="microterminal-head">
+              <span>Saída</span>
+              <div class="microterminal-actions">
+                <button id="toggleCommandLogButton" type="button">Ver log bruto</button>
+                <button id="copyCommandLogButton" type="button">Copiar log</button>
+              </div>
+            </div>
+            <div id="commandSummary" class="terminal-summary">Nenhum comando executado.</div>
+            <pre id="commandLog" class="terminal terminal--hidden"></pre>
+          </div>
+        </section>
+      </section>
+
+      <section class="panel orchestra-panel">
+        <div class="panel-head">
+          <h2>Orquestra</h2>
+          <span id="orchestraMeta" class="meta"></span>
+        </div>
+        <div id="orchestraEngines" class="orchestra-engines"></div>
+        <div class="orchestra-grid">
+          <div class="orchestra-block">
+            <h3>Budget</h3>
+            <div id="orchestraBudget" class="orchestra-kv"></div>
+          </div>
+          <div class="orchestra-block">
+            <h3>Fallback &amp; Delegação</h3>
+            <div id="orchestraFallback" class="orchestra-kv"></div>
+          </div>
+        </div>
+        <p class="orchestra-note">Somente leitura nesta versão. Edite <code>.maestro/engines.json</code>, <code>.maestro/budget.json</code> e <code>.maestro/fallback-graph.json</code> diretamente para alterar a política.</p>
+      </section>
+
+      <section class="panel timeline-panel">
+        <div class="panel-head">
+          <h2>Timeline</h2>
+          <span id="timelineCounts" class="meta"></span>
+        </div>
+        <div id="timelineFilters" class="filters"></div>
+        <div id="timelineList" class="timeline-list"></div>
+      </section>
+    </main>
+
+    <div id="toast" class="toast" aria-live="polite"></div>
+    <script src="/app.js" type="module"></script>
+  </body>
+</html>