issue-flow 0.16.0 → 0.18.0

package/web/public/app.js

@@ -4,8 +4,6 @@
 // todo texto dinâmico entra via textContent (nunca innerHTML com dados
 // do snapshot).
 (() => {
-  'use strict';
-
   const REFRESH_OPTIONS = [3, 5, 10, 30];
   const PAUSED = 0;
   const STORAGE_KEY = 'issue-flow:refresh-seconds';
@@ -26,6 +24,16 @@
     failed: 'falhou',
   };
 
+  // O resumo do dashboard conta *execuções* (feminino), então não reaproveita
+  // STATUS_LABELS, que qualifica a execução no masculino usado pelo badge.
+  const SUMMARY_STATUS_ORDER = ['running', 'idle', 'completed', 'failed'];
+  const SUMMARY_STATUS_LABELS = {
+    running: ['em execução', 'em execução'],
+    idle: ['aguardando', 'aguardando'],
+    completed: ['concluída', 'concluídas'],
+    failed: ['com falha', 'com falha'],
+  };
+
   const PHASE_ICONS = {
     pending: '○',
     running: '●',
@@ -71,6 +79,7 @@
     dashboardMeta: document.getElementById('dashboard-meta'),
     backToDashboard: document.getElementById('back-to-dashboard'),
     issueLink: document.getElementById('issue-link'),
+    issueHeadline: document.getElementById('issue-headline'),
     branchLine: document.getElementById('branch-line'),
     statusBadge: document.getElementById('status-badge'),
     elapsed: document.getElementById('elapsed'),
@@ -91,6 +100,7 @@
     configuration: document.getElementById('configuration'),
     appVersion: document.getElementById('app-version'),
     appVersionDashboard: document.getElementById('app-version-dashboard'),
+    dashboardSummary: document.getElementById('dashboard-summary'),
     phases: document.getElementById('phases'),
     nextSteps: document.getElementById('next-steps'),
     stories: document.getElementById('stories'),
@@ -129,6 +139,7 @@
     // guardar o nó levaria a uma referência morta.
     selectedDetail: null,
     configWritable: false,
+    configData: null,
     // Identifica o processo que serviu os assets atuais. Uma troca significa
     // que --restart-web colocou código novo no mesmo origin e exige reload.
     serverInstanceId: null,
@@ -156,6 +167,21 @@
     return node;
   }
 
+  // Ponto pulsante único do painel — o mesmo componente em "Executando agora"
+  // e no card do dashboard. Sem texto: o rótulo adjacente carrega o significado.
+  function liveDot() {
+    const dot = el('span', 'live');
+    dot.setAttribute('aria-hidden', 'true');
+    return dot;
+  }
+
+  // Ícone textual (○ ● ✓ ✗): a cor e o rótulo ao lado já dizem o estado.
+  function statusIcon(status, symbol) {
+    const icon = el('span', 'item-icon icon-' + status, symbol || PHASE_ICONS[status] || '○');
+    icon.setAttribute('aria-hidden', 'true');
+    return icon;
+  }
+
   function link(href, text, className) {
     const node = el('a', className, text);
     node.href = href;
@@ -291,7 +317,8 @@
       ...story,
       status: STORY_STATUS_LABELS[status] !== undefined ? status : 'backlog',
       stage: STORY_STAGE_LABELS[stage] !== undefined ? stage : 'pending',
-      stageSince: story.stageSince !== null && story.stageSince !== undefined ? story.stageSince : null,
+      stageSince:
+        story.stageSince !== null && story.stageSince !== undefined ? story.stageSince : null,
       stageDetail:
         story.stageDetail !== null && story.stageDetail !== undefined ? story.stageDetail : null,
       dependencies: list(story.dependencies),
@@ -318,15 +345,34 @@
   // Troca apenas visibilidade e estado ARIA. Não toca no polling: render()
   // segue atualizando os dois painéis, então a aba inativa nunca fica defasada.
 
-  function setActiveTab(tabId) {
+  function setActiveTab(tabId, options) {
     state.activeTab = tabId;
+    let focused = null;
     for (const tab of els.tabs) {
       const active = tab.id === tabId;
       tab.setAttribute('aria-selected', active ? 'true' : 'false');
+      tab.tabIndex = active ? 0 : -1;
       tab.classList.toggle('is-active', active);
       const panel = document.getElementById(tab.getAttribute('aria-controls'));
       if (panel) panel.hidden = !active;
+      if (active) focused = tab;
     }
+    if (options && options.focus && focused) focused.focus();
+  }
+
+  // Padrão ARIA de tablist: setas movem entre as abas, Home/End vão às pontas.
+  // Só a aba ativa fica no fluxo do Tab (roving tabindex).
+  function onTabListKeydown(event) {
+    const current = els.tabs.indexOf(event.target);
+    if (current === -1) return;
+    let next = -1;
+    if (event.key === 'ArrowRight') next = (current + 1) % els.tabs.length;
+    else if (event.key === 'ArrowLeft') next = (current - 1 + els.tabs.length) % els.tabs.length;
+    else if (event.key === 'Home') next = 0;
+    else if (event.key === 'End') next = els.tabs.length - 1;
+    else return;
+    event.preventDefault();
+    setActiveTab(els.tabs[next].id, { focus: true });
   }
 
   // ---- Tema ------------------------------------------------------------------
@@ -613,9 +659,7 @@
       }
 
       const nextId =
-        resolved.session && resolved.session.sessionId != null
-          ? resolved.session.sessionId
-          : null;
+        resolved.session && resolved.session.sessionId != null ? resolved.session.sessionId : null;
       const sessionChanged = state.detailSessionId !== nextId;
       if (sessionChanged) {
         clearDetailState();
@@ -662,6 +706,12 @@
         state.snapshot = await res.json();
         render();
       }
+      const configUrl = 'api/config?session=' + encodeURIComponent(state.detailSessionId || '');
+      const configRes = await fetch(configUrl, { cache: 'no-store' });
+      if (configRes.ok) {
+        state.configData = await configRes.json();
+        if (state.snapshot) renderConfiguration(state.snapshot);
+      }
       if (state.eventsUrl) {
         const eventsRes = await fetch(state.eventsUrl, { cache: 'no-store' });
         if (!eventsRes.ok) throw new Error('HTTP ' + eventsRes.status);
@@ -697,6 +747,9 @@
   function renderEmptyDetail() {
     if (state.snapshot) return;
     document.title = 'issue-flow';
+    els.issueLink.hidden = true;
+    els.issueHeadline.textContent = 'Nenhuma execução ativa';
+    els.branchLine.textContent = '';
     els.statusBadge.textContent = STATUS_LABELS.idle;
     els.statusBadge.className = 'badge status-idle';
     els.elapsed.textContent = '—';
@@ -711,13 +764,29 @@
     return normalized.slice(0, max - 1).trimEnd() + '…';
   }
 
+  // Linha secundária do header do dashboard: quantas execuções e em que
+  // estado. Substitui a legenda estática que só repetia o h1.
+  function renderDashboardSummary(sessions) {
+    const counts = {};
+    for (const session of sessions) {
+      const status = session.status || 'idle';
+      counts[status] = (counts[status] || 0) + 1;
+    }
+    const parts = [];
+    for (const status of SUMMARY_STATUS_ORDER) {
+      const count = counts[status];
+      if (!count) continue;
+      const label = SUMMARY_STATUS_LABELS[status];
+      parts.push(count + ' ' + (count === 1 ? label[0] : label[1]));
+    }
+    const total = sessions.length + (sessions.length === 1 ? ' execução' : ' execuções');
+    els.dashboardSummary.textContent = parts.length > 0 ? total + ' · ' + parts.join(' · ') : total;
+  }
+
   function renderDashboard(sessions) {
     const active = document.activeElement;
     const focusedId =
-      active &&
-      active.dataset &&
-      els.dashboard.contains(active) &&
-      active.dataset.sessionId
+      active && active.dataset && els.dashboard.contains(active) && active.dataset.sessionId
         ? active.dataset.sessionId
         : null;
 
@@ -726,10 +795,13 @@
     if (sessions.length === 0) {
       els.dashboard.appendChild(el('p', 'empty', 'Nenhuma execução ativa.'));
       els.dashboardMeta.textContent = '0 execuções';
+      els.dashboardSummary.textContent = 'Nenhuma execução ativa';
       document.title = 'issue-flow';
       return;
     }
 
+    renderDashboardSummary(sessions);
+
     for (const session of sessions) {
       // <button> só aceita phrasing content — mesmos spans do Kanban.
       const card = el('button', 'dashboard-card');
@@ -753,20 +825,15 @@
       if (session.issueNumber !== null && session.issueNumber !== undefined) {
         titleRow.appendChild(el('span', 'dashboard-issue', '#' + session.issueNumber));
       }
-      titleRow.appendChild(
-        el('span', 'dashboard-title', session.issueTitle || 'Sem título'),
-      );
+      titleRow.appendChild(el('span', 'dashboard-title', session.issueTitle || 'Sem título'));
       card.appendChild(titleRow);
 
       const summary = truncateText(session.issueDescription, DESCRIPTION_PREVIEW);
       card.appendChild(el('span', 'dashboard-summary muted', summary || 'Sem descrição'));
 
       const meta = el('span', 'dashboard-meta-row');
-      meta.appendChild(
-        el('span', null, 'Fase: ' + (session.currentPhase || '—')),
-      );
-      const percent =
-        typeof session.progressPercent === 'number' ? session.progressPercent : 0;
+      meta.appendChild(el('span', null, 'Fase: ' + (session.currentPhase || '—')));
+      const percent = typeof session.progressPercent === 'number' ? session.progressPercent : 0;
       meta.appendChild(el('span', null, percent + '%'));
       const elapsed =
         typeof session.elapsedSeconds === 'number'
@@ -802,7 +869,10 @@
       card.appendChild(progress);
 
       if (session.status === 'running') {
-        card.appendChild(el('span', 'dashboard-live-dot', 'ao vivo'));
+        const live = el('span', 'live-label');
+        live.appendChild(liveDot());
+        live.appendChild(document.createTextNode('ao vivo'));
+        card.appendChild(live);
       }
 
       card.addEventListener('click', () => {
@@ -860,8 +930,11 @@
     document.title = (prefix + issue + ' · issue-flow').replace(/^ · /, '');
   }
 
+  // O h1 é a execução — número, título, e ao lado status, tempo decorrido e
+  // branch. A marca do produto vive só no <title> do documento.
   function renderHeader(snapshot) {
-    if (snapshot.issue.number !== null) {
+    const hasIssue = snapshot.issue.number !== null && snapshot.issue.number !== undefined;
+    if (hasIssue) {
       els.issueLink.hidden = false;
       els.issueLink.textContent = '#' + snapshot.issue.number;
       if (snapshot.issue.url) els.issueLink.href = snapshot.issue.url;
@@ -870,6 +943,10 @@
       els.issueLink.hidden = true;
     }
 
+    // session.json antigo pode não ter título; sem issue vinculada, nem número.
+    els.issueHeadline.textContent =
+      snapshot.issue.title || (hasIssue ? 'Sem título' : 'Execução sem issue vinculada');
+
     const branch = snapshot.git.branch;
     const base = snapshot.git.baseBranch;
     const branchMode =
@@ -929,18 +1006,13 @@
     clear(els.issueSummary);
     const issue = snapshot.issue || {};
 
-    const heading = el('p', 'issue-summary-title');
-    heading.appendChild(
-      el('span', 'mono', issue.number !== null && issue.number !== undefined ? '#' + issue.number : '—'),
-    );
-    heading.appendChild(document.createTextNode(' ' + (issue.title || 'Sem título')));
-    els.issueSummary.appendChild(heading);
-
+    // Número e título saem no h1 do header (renderHeader); aqui fica só o que
+    // o header não carrega — estado, labels e descrição.
     const meta = el('div', 'issue-summary-meta');
     const state = issue.state || null;
-    const stateClass = state === 'open' ? 'state-open' : state === 'closed' ? 'state-closed' : 'state-unknown';
+    const stateClass =
+      state === 'open' ? 'state-open' : state === 'closed' ? 'state-closed' : 'state-unknown';
     meta.appendChild(el('span', 'badge ' + stateClass, state || 'estado desconhecido'));
-    meta.appendChild(el('span', 'muted', 'Prioridade: Não definida'));
     els.issueSummary.appendChild(meta);
 
     const labels = issue.labels || [];
@@ -952,7 +1024,9 @@
       els.issueSummary.appendChild(labelRow);
     }
 
-    els.issueSummary.appendChild(el('p', 'issue-description', issue.description || 'Sem descrição.'));
+    els.issueSummary.appendChild(
+      el('p', 'issue-description', issue.description || 'Sem descrição.'),
+    );
   }
 
   function metaRow(grid, label, value, className) {
@@ -1005,16 +1079,16 @@
       const messages = {
         idle: 'Nenhuma execução em andamento.',
         completed: 'Execução concluída.',
-        failed: 'Execução falhou — veja os erros acima.',
+        failed: 'Execução falhou. Veja os erros acima.',
       };
       els.now.appendChild(el('p', 'empty', messages[snapshot.status] || '—'));
       return;
     }
 
     const grid = el('dl', 'now-grid');
-    const phase = el('dd');
+    const phase = el('dd', 'now-phase');
     if (snapshot.currentPhase) {
-      phase.appendChild(el('span', 'pulse'));
+      phase.appendChild(liveDot());
       phase.appendChild(document.createTextNode(snapshot.currentPhase));
     } else {
       phase.textContent = '—';
@@ -1024,7 +1098,7 @@
 
     const activity = snapshot.currentActivity;
     if (activity) {
-      if (activity.story) nowRow(grid, 'Story', activity.story);
+      if (activity.story) nowRow(grid, 'User story', activity.story);
       if (activity.tool) nowRow(grid, 'Ferramenta', activity.tool);
       if (activity.detail) nowRow(grid, 'Detalhe', activity.detail);
       const since = el('dd', null, formatAgo(activity.since));
@@ -1063,6 +1137,7 @@
       env: 'variável de ambiente',
       cli: 'override da execução',
       fallback: 'fallback',
+      recommended: 'política recomendada',
     };
     return labels[source] || source || 'não informado';
   }
@@ -1107,7 +1182,9 @@
     nowRow(
       summary,
       'Harness padrão',
-      (config.defaultProvider.value || '—') + ' · ' + configSourceLabel(config.defaultProvider.source),
+      (config.defaultProvider.value || '—') +
+        ' · ' +
+        configSourceLabel(config.defaultProvider.source),
     );
     nowRow(
       summary,
@@ -1120,21 +1197,126 @@
     nowRow(summary, 'Precedência', list(config.precedence).join(' → '));
     els.configuration.appendChild(summary);
 
+    const liveRouting = state.configData && state.configData.routing;
+    if (liveRouting) {
+      const routingSummary = el('dl', 'now-grid config-routing-summary');
+      nowRow(routingSummary, 'Routing', liveRouting.mode + ' · perfil ' + liveRouting.profile);
+      nowRow(
+        routingSummary,
+        'Política',
+        liveRouting.policy === 'recommended' ? 'recomendada (opt-in)' : 'score adaptativo',
+      );
+      els.configuration.appendChild(routingSummary);
+
+      if (state.configWritable) {
+        const routingForm = el('form', 'config-form config-routing-form');
+        const mode = el('select');
+        mode.setAttribute('aria-label', 'Modo de routing');
+        for (const value of ['off', 'shadow', 'recommend', 'active']) {
+          const option = el('option', null, value);
+          option.value = value;
+          mode.appendChild(option);
+        }
+        mode.value = liveRouting.mode;
+        const profile = el('select');
+        profile.setAttribute('aria-label', 'Perfil de routing');
+        for (const value of ['economy', 'balanced', 'quality', 'speed']) {
+          const option = el('option', null, value);
+          option.value = value;
+          profile.appendChild(option);
+        }
+        profile.value = liveRouting.profile;
+        const saveRouting = el('button', 'config-save', 'Salvar routing');
+        saveRouting.type = 'submit';
+        const applyPolicy = el(
+          'button',
+          'config-save config-policy',
+          'Aplicar política recomendada',
+        );
+        applyPolicy.type = 'button';
+        const routingFeedback = el('span', 'muted');
+        routingForm.appendChild(mode);
+        routingForm.appendChild(profile);
+        routingForm.appendChild(saveRouting);
+        routingForm.appendChild(applyPolicy);
+        routingForm.appendChild(routingFeedback);
+        routingForm.addEventListener('submit', async (event) => {
+          event.preventDefault();
+          await saveRoutingConfig(
+            { mode: mode.value, profile: profile.value },
+            saveRouting,
+            routingFeedback,
+          );
+        });
+        applyPolicy.addEventListener('click', async () => {
+          await saveRoutingConfig({ policy: 'recommended' }, applyPolicy, routingFeedback);
+        });
+        els.configuration.appendChild(routingForm);
+      }
+    }
+
     const phases = el('div', 'config-phase-grid');
     for (const phase of list(config.phases)) {
-      const row = el('button', 'config-phase-row');
-      row.type = 'button';
-      row.appendChild(el('span', 'mono', phase.phase));
-      row.appendChild(el('span', null, phase.provider.value || '—'));
-      row.appendChild(el('span', null, phase.model.value || 'default do provider'));
-      row.appendChild(
-        el(
-          'span',
-          'muted',
-          configSourceLabel(phase.provider.source) + ' / ' + configSourceLabel(phase.model.source),
-        ),
-      );
-      row.addEventListener('click', () => openDrawer('phase', phase.phase));
+      const row = el(state.configWritable ? 'form' : 'button', 'config-phase-row');
+      if (!state.configWritable) row.type = 'button';
+      if (state.configWritable) {
+        row.classList.add('is-editable');
+        const phaseButton = el('button', 'config-phase-open mono', phase.phase);
+        phaseButton.type = 'button';
+        phaseButton.addEventListener('click', () => openDrawer('phase', phase.phase));
+        row.appendChild(phaseButton);
+        const provider = el('select');
+        provider.setAttribute('aria-label', 'Harness para ' + phase.phase);
+        fillProviderSelect(provider, phase.provider.value || 'claude');
+        const model = el('select');
+        model.setAttribute('aria-label', 'Tier e modelo para ' + phase.phase);
+        fillModelSelect(model, provider.value, phase.model.value || '');
+        provider.addEventListener('change', () => fillModelSelect(model, provider.value, ''));
+        const save = el('button', 'config-save', 'Salvar');
+        save.type = 'submit';
+        const feedback = el('span', 'muted config-phase-feedback');
+        row.appendChild(provider);
+        row.appendChild(model);
+        row.appendChild(save);
+        row.appendChild(feedback);
+        row.addEventListener('submit', async (event) => {
+          event.preventDefault();
+          save.disabled = true;
+          feedback.textContent = 'salvando…';
+          try {
+            const response = await fetch('api/config/agent', {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({
+                provider: provider.value,
+                model: model.value,
+                phase: phase.phase,
+              }),
+            });
+            const result = await response.json();
+            if (!response.ok) throw new Error(result.error || 'falha ao salvar');
+            feedback.textContent = 'salvo para a próxima execução';
+          } catch (error) {
+            feedback.textContent = error.message || 'falha ao salvar';
+          } finally {
+            save.disabled = false;
+          }
+        });
+      } else {
+        row.appendChild(el('span', 'mono', phase.phase));
+        row.appendChild(el('span', null, phase.provider.value || '—'));
+        row.appendChild(el('span', null, phase.model.value || 'default do provider'));
+        row.appendChild(
+          el(
+            'span',
+            'muted',
+            configSourceLabel(phase.provider.source) +
+              ' / ' +
+              configSourceLabel(phase.model.source),
+          ),
+        );
+        row.addEventListener('click', () => openDrawer('phase', phase.phase));
+      }
       phases.appendChild(row);
     }
     els.configuration.appendChild(phases);
@@ -1182,6 +1364,75 @@
     els.configuration.appendChild(form);
   }
 
+  function catalog() {
+    return list(state.configData && state.configData.catalog);
+  }
+
+  function fillProviderSelect(select, selected) {
+    clear(select);
+    const entries = catalog().filter((entry) => {
+      if (!entry.installed) return false;
+      if (entry.state === 'unavailable') return false;
+      if (entry.authentication === 'failed') return false;
+      return (
+        entry.authenticated !== false || entry.state === 'conditional' || entry.state === 'ready'
+      );
+    });
+    const providers = entries.length
+      ? entries.map((entry) => entry.provider)
+      : ['claude', 'codex', 'cursor', 'antigravity'];
+    if (!providers.includes(selected)) providers.push(selected);
+    for (const provider of providers) {
+      const option = el('option', null, provider);
+      option.value = provider;
+      select.appendChild(option);
+    }
+    select.value = selected;
+  }
+
+  function fillModelSelect(select, provider, selected) {
+    clear(select);
+    const defaultOption = el('option', null, 'default do provider');
+    defaultOption.value = '';
+    select.appendChild(defaultOption);
+    const entry = catalog().find((candidate) => candidate.provider === provider);
+    for (const model of list(entry && entry.models)) {
+      if (!model.id) continue;
+      const option = el('option', null, model.tier + ' · ' + model.id);
+      option.value = model.id;
+      select.appendChild(option);
+    }
+    if (
+      selected &&
+      !Array.prototype.some.call(select.options, (option) => option.value === selected)
+    ) {
+      const current = el('option', null, 'configurado · ' + selected);
+      current.value = selected;
+      select.appendChild(current);
+    }
+    select.value = selected || '';
+  }
+
+  async function saveRoutingConfig(values, button, feedback) {
+    button.disabled = true;
+    feedback.textContent = 'salvando…';
+    try {
+      const response = await fetch('api/config/routing', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(values),
+      });
+      const result = await response.json();
+      if (!response.ok) throw new Error(result.error || 'falha ao salvar');
+      state.configData.routing = Object.assign({}, state.configData.routing, values);
+      feedback.textContent = 'salvo para execuções futuras';
+    } catch (error) {
+      feedback.textContent = error.message || 'falha ao salvar';
+    } finally {
+      button.disabled = false;
+    }
+  }
+
   function renderPhases(snapshot) {
     clear(els.phases);
     if (snapshot.phases.length === 0) {
@@ -1191,7 +1442,7 @@
     for (const phase of snapshot.phases) {
       const item = el('li');
       item.className = 'detail-row';
-      item.appendChild(el('span', 'item-icon icon-' + phase.status, PHASE_ICONS[phase.status] || '○'));
+      item.appendChild(statusIcon(phase.status));
       const main = el('div', 'item-main');
       main.appendChild(el('div', 'item-title', phase.name));
       if (phase.error) main.appendChild(el('div', 'item-error', phase.error));
@@ -1212,19 +1463,17 @@
     }
   }
 
+  // Uma linha dentro do bloco de estado, não uma lista num cartão próprio: os
+  // passos são poucos e curtos, e o rótulo já vem do HTML (.next-steps-label).
   function renderNextSteps(snapshot) {
     clear(els.nextSteps);
     if (snapshot.nextSteps.length === 0) {
       const message =
         snapshot.status === 'completed' ? 'Pipeline concluído.' : 'Nenhum passo pendente.';
-      els.nextSteps.appendChild(el('p', 'empty', message));
+      els.nextSteps.appendChild(el('span', 'empty', message));
       return;
     }
-    const list = el('ol');
-    for (const step of snapshot.nextSteps) {
-      list.appendChild(el('li', null, step));
-    }
-    els.nextSteps.appendChild(list);
+    els.nextSteps.appendChild(el('span', null, snapshot.nextSteps.join(' · ')));
   }
 
   function renderStories(snapshot) {
@@ -1236,11 +1485,12 @@
     for (const story of snapshot.stories) {
       // stage vem com default no schema ('pending'), mas session.json gravado
       // antes da issue 38 pode chegar sem ele.
-      const storyStage = story.stage !== null && story.stage !== undefined ? story.stage : 'pending';
+      const storyStage =
+        story.stage !== null && story.stage !== undefined ? story.stage : 'pending';
       const item = el('li', storyStage === 'executing' ? 'story-executing' : null);
       item.classList.add('detail-row');
       const status = story.passes ? 'completed' : 'pending';
-      item.appendChild(el('span', 'item-icon icon-' + status, story.passes ? '✓' : '○'));
+      item.appendChild(statusIcon(status, story.passes ? '✓' : '○'));
       const main = el('div', 'item-main');
       const title = el('div', 'item-title');
       title.appendChild(el('span', 'story-id', story.id));
@@ -1249,10 +1499,15 @@
 
       // status/dependencies vêm com default no schema (backlog/[]), mas
       // session.json gravado antes de #29 pode chegar sem eles.
-      const storyStatus = story.status !== null && story.status !== undefined ? story.status : 'backlog';
+      const storyStatus =
+        story.status !== null && story.status !== undefined ? story.status : 'backlog';
       const meta = el('div', 'story-meta');
       meta.appendChild(
-        el('span', 'badge story-status-' + storyStatus, STORY_STATUS_LABELS[storyStatus] || storyStatus),
+        el(
+          'span',
+          'badge story-status-' + storyStatus,
+          STORY_STATUS_LABELS[storyStatus] || storyStatus,
+        ),
       );
       const dependencies = story.dependencies || [];
       if (dependencies.length > 0) {
@@ -1294,9 +1549,7 @@
     card.dataset.storyId = story.id;
 
     const head = el('span', 'kanban-card-head');
-    head.appendChild(
-      el('span', 'item-icon icon-' + (story.passes ? 'completed' : 'pending'), story.passes ? '✓' : '○'),
-    );
+    head.appendChild(statusIcon(story.passes ? 'completed' : 'pending', story.passes ? '✓' : '○'));
     head.appendChild(el('span', 'story-id', story.id));
     card.appendChild(head);
 
@@ -1378,16 +1631,30 @@
         item.appendChild(title);
         const grid = el('dl', 'now-grid execution-grid');
         nowRow(grid, 'Harness', execution.agent?.harness || '—');
-        nowRow(grid, 'Modelo', execution.agent?.model?.resolved || execution.agent?.model?.requested || '—');
+        nowRow(
+          grid,
+          'Modelo',
+          execution.agent?.model?.resolved || execution.agent?.model?.requested || '—',
+        );
         nowRow(grid, 'Início', formatClock(execution.startedAt));
-        nowRow(grid, 'Fim', execution.finishedAt ? formatClock(execution.finishedAt) : 'em andamento');
-        nowRow(grid, 'Duração', metric(execution.durationMs) !== null ? formatDuration(execution.durationMs / 1000) : '—');
+        nowRow(
+          grid,
+          'Fim',
+          execution.finishedAt ? formatClock(execution.finishedAt) : 'em andamento',
+        );
+        nowRow(
+          grid,
+          'Duração',
+          metric(execution.durationMs) !== null ? formatDuration(execution.durationMs / 1000) : '—',
+        );
         nowRow(grid, 'Tokens', formatUsage(execution.usage || {}) || '—');
         nowRow(grid, 'Custo', executionCost(execution));
-        if (execution.correctionCycle) nowRow(grid, 'Correção', 'ciclo ' + execution.correctionCycle);
+        if (execution.correctionCycle)
+          nowRow(grid, 'Correção', 'ciclo ' + execution.correctionCycle);
         if (execution.verdict?.status) nowRow(grid, 'Veredito', execution.verdict.status);
         item.appendChild(grid);
-        if (execution.failure?.message) item.appendChild(el('p', 'item-error', execution.failure.message));
+        if (execution.failure?.message)
+          item.appendChild(el('p', 'item-error', execution.failure.message));
         timeline.appendChild(item);
       }
       body.appendChild(timeline);
@@ -1427,7 +1694,9 @@
     if (entries.length === 0) return;
     drawerSection('Diagnóstico global persistente', (body) => {
       const details = el('details', 'process-output');
-      details.appendChild(el('summary', null, entries.length + ' registro(s) em ~/.issue-flow/logs'));
+      details.appendChild(
+        el('summary', null, entries.length + ' registro(s) em ~/.issue-flow/logs'),
+      );
       const output = el('pre', 'process-output-body');
       output.textContent = entries
         .slice(0, 200)
@@ -1444,7 +1713,8 @@
     const kind = state.selectedDetail.kind;
     const id = state.selectedDetail.id;
     const story = kind === 'story' ? getStoryById(snapshot, id) : null;
-    const phase = kind === 'phase' ? list(snapshot.phases).find((entry) => entry.name === id) : null;
+    const phase =
+      kind === 'phase' ? list(snapshot.phases).find((entry) => entry.name === id) : null;
     if ((kind === 'story' && story === null) || (kind === 'phase' && !phase)) {
       closeDrawer();
       return;
@@ -1457,9 +1727,15 @@
       const grid = el('dl', 'now-grid drawer-summary-grid');
       nowRow(grid, 'Início', phase.startedAt ? formatClock(phase.startedAt) : '—');
       nowRow(grid, 'Fim', phase.endedAt ? formatClock(phase.endedAt) : '—');
-      nowRow(grid, 'Duração', metric(phase.durationSeconds) !== null ? formatDuration(phase.durationSeconds) : '—');
+      nowRow(
+        grid,
+        'Duração',
+        metric(phase.durationSeconds) !== null ? formatDuration(phase.durationSeconds) : '—',
+      );
       nowRow(grid, 'Uso total', formatUsage(phase) || '—');
-      const configured = list(snapshot.configuration?.phases).find((entry) => entry.phase === phase.name);
+      const configured = list(snapshot.configuration?.phases).find(
+        (entry) => entry.phase === phase.name,
+      );
       if (configured) {
         nowRow(grid, 'Harness efetivo', configured.provider.value || '—');
         nowRow(grid, 'Origem', configSourceLabel(configured.provider.source));
@@ -1499,7 +1775,8 @@
         return;
       }
       const items = el('ul', 'drawer-list');
-      for (const criterion of story.acceptanceCriteria) items.appendChild(el('li', null, criterion));
+      for (const criterion of story.acceptanceCriteria)
+        items.appendChild(el('li', null, criterion));
       body.appendChild(items);
     });
 
@@ -1613,9 +1890,7 @@
   function renderLogs(snapshot) {
     clear(els.logs);
     const filter = state.logFilter;
-    const entries = snapshot.logs.filter(
-      (entry) => filter === 'all' || entry.level === filter,
-    );
+    const entries = snapshot.logs.filter((entry) => filter === 'all' || entry.level === filter);
     if (entries.length === 0) {
       els.logs.appendChild(el('p', 'empty', 'Nenhum log para exibir.'));
       return;
@@ -1659,9 +1934,20 @@
       case 'agent:activity':
         return 'Atividade recebida de ' + event.provider;
       case 'agent:result':
-        return event.provider + (event.success ? ' concluiu a tentativa' : ' falhou: ' + (event.failureKind || 'desconhecida'));
+        return (
+          event.provider +
+          (event.success
+            ? ' concluiu a tentativa'
+            : ' falhou: ' + (event.failureKind || 'desconhecida'))
+        );
       case 'failover':
-        return 'Failover de ' + event.from + ' para ' + event.to + (event.reason ? ': ' + event.reason : '');
+        return (
+          'Failover de ' +
+          event.from +
+          ' para ' +
+          event.to +
+          (event.reason ? ': ' + event.reason : '')
+        );
       case 'correction:cycle':
         return 'Ciclo de correção ' + event.cycle + '/' + event.maxCycles;
       case 'log':
@@ -1696,7 +1982,7 @@
 
   function renderMeta(snapshot) {
     const parts = [];
-    if (snapshot.sessionId) parts.push('sessão ' + snapshot.sessionId);
+    if (snapshot.sessionId) parts.push('execução ' + snapshot.sessionId);
     if (snapshot.updatedAt) parts.push('atualizado ' + formatClock(snapshot.updatedAt));
     parts.push('somente leitura');
     els.sessionMeta.textContent = parts.join(' · ');
@@ -1745,6 +2031,8 @@
   }
 
   async function init() {
+    const tablist = document.querySelector('[role="tablist"]');
+    if (tablist) tablist.addEventListener('keydown', onTabListKeydown);
     for (const tab of els.tabs) {
       tab.addEventListener('click', () => setActiveTab(tab.id));
     }
@@ -1791,7 +2079,10 @@
       serverInstanceChanged(healthRes);
       const health = await healthRes.json();
       renderMonitorVersion(health.version);
-      state.configWritable = list(health.capabilities).includes('config:agent:write');
+      const capabilities = list(health.capabilities);
+      state.configWritable =
+        capabilities.includes('config:agent:write') &&
+        capabilities.includes('config:routing:write');
       const suggested = Number(health.refreshSeconds);
       if (stored === null && Number.isFinite(suggested) && suggested > 0) {
         state.refreshSeconds = suggested;