issue-flow 0.17.0 → 0.18.0

package/web/public/app.js

@@ -24,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: '●',
@@ -69,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'),
@@ -89,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'),
@@ -155,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;
@@ -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 ------------------------------------------------------------------
@@ -701,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 = '—';
@@ -715,6 +764,25 @@
     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 =
@@ -727,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');
@@ -798,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', () => {
@@ -856,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;
@@ -866,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 =
@@ -925,23 +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';
     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 || [];
@@ -1008,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 = '—';
@@ -1027,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));
@@ -1299,7 +1370,14 @@
 
   function fillProviderSelect(select, selected) {
     clear(select);
-    const entries = catalog().filter((entry) => entry.installed && entry.authenticated);
+    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'];
@@ -1364,9 +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));
@@ -1387,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) {
@@ -1416,7 +1490,7 @@
       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));
@@ -1475,13 +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);
 
@@ -1914,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(' · ');
@@ -1963,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));
     }

package/web/public/index.html

@@ -30,18 +30,18 @@
 </head>
 <body>
   <div id="banner-disconnected" class="banner" role="alert" hidden>
-    Desconectado do servidor — tentando reconectar…
+    Desconectado do servidor. Tentando reconectar…
   </div>
 
   <main>
     <div id="view-dashboard" class="view" hidden>
       <header class="card header">
         <div class="header-main">
-          <h1>
-            <span class="brand">issue-flow</span>
+          <h1>Execuções ativas</h1>
+          <p class="header-meta">
+            <span id="dashboard-summary" class="muted"></span>
             <span id="app-version-dashboard" class="app-version" hidden></span>
-          </h1>
-          <p class="muted">Execuções ativas</p>
+          </p>
         </div>
         <div class="header-side">
           <label class="refresh-control">
@@ -70,12 +70,16 @@
         <button type="button" id="back-to-dashboard" class="back-link" hidden>
           ← Todas as execuções
         </button>
+        <!-- A linha mais visível da tela é a execução, não a marca: o produto
+             identifica-se pelo <title> do documento. Ver web/AGENTS.md. -->
         <h1>
-          <span class="brand">issue-flow</span>
-          <span id="app-version" class="app-version" hidden></span>
           <a id="issue-link" class="issue-link" target="_blank" rel="noopener" hidden>#—</a>
+          <span id="issue-headline">Nenhuma execução ativa</span>
         </h1>
-        <p id="branch-line" class="muted mono"></p>
+        <p class="header-meta">
+          <span id="branch-line" class="muted mono"></span>
+          <span id="app-version" class="app-version" hidden></span>
+        </p>
       </div>
       <div class="header-side">
         <span id="status-badge" class="badge status-idle">aguardando</span>
@@ -105,99 +109,124 @@
 
     <div class="tabs" role="tablist" aria-label="Visualizações do painel">
       <button type="button" class="tab" role="tab" id="tab-execution"
-              aria-controls="panel-execution" aria-selected="true">Execução</button>
+              aria-controls="panel-execution" aria-selected="true" tabindex="0">Execução</button>
       <button type="button" class="tab" role="tab" id="tab-kanban"
-              aria-controls="panel-kanban" aria-selected="false">Kanban</button>
+              aria-controls="panel-kanban" aria-selected="false" tabindex="-1">Kanban</button>
       <button type="button" class="tab" role="tab" id="tab-history"
-              aria-controls="panel-history" aria-selected="false">Histórico</button>
+              aria-controls="panel-history" aria-selected="false" tabindex="-1">Histórico</button>
     </div>
 
+    <!-- Aba Execução em quatro blocos, na ordem em que a pergunta aparece:
+         o que está acontecendo agora, sobre o quê, quanto já andou e o que
+         saiu disso. Cada bloco é UM cartão; o que antes era um cartão por
+         assunto virou uma sub-seção com <h3> e sem borda própria. -->
     <div class="tab-panel" id="panel-execution" role="tabpanel" aria-labelledby="tab-execution" tabindex="0">
-    <div class="columns">
-      <section class="card">
-        <h2>Resumo da issue</h2>
-        <div id="issue-summary"></div>
-      </section>
-      <section class="card">
-        <h2>Repositório</h2>
-        <div id="repository"></div>
-      </section>
-    </div>
 
-    <section class="card" aria-live="polite">
-      <h2>Progresso</h2>
-      <div class="progress-row">
-        <progress id="progress-bar" max="100" value="0"></progress>
-        <span id="progress-percent" class="progress-percent">0%</span>
+    <!-- Estado agora. Primeiro de propósito: é o único bloco que precisa ser
+         legível sem rolagem. Não acrescente conteúdo aqui sem checar isso. -->
+    <section class="card block block-now">
+      <h2>Estado agora</h2>
+
+      <div aria-live="polite">
+        <div class="progress-row">
+          <progress id="progress-bar" max="100" value="0"></progress>
+          <span id="progress-percent" class="progress-percent">0%</span>
+        </div>
+        <p id="progress-counters" class="muted"></p>
       </div>
-      <p id="progress-counters" class="muted"></p>
-    </section>
 
-    <section class="card" aria-live="polite">
-      <h2>Executando agora</h2>
-      <div id="now"></div>
-    </section>
+      <div class="columns">
+        <div class="block-part">
+          <h3>Executando agora</h3>
+          <div id="now" aria-live="polite"></div>
+        </div>
+        <div class="block-part">
+          <h3>Resiliência</h3>
+          <div id="resilience" aria-live="polite"></div>
+        </div>
+      </div>
 
-    <section class="card" aria-live="polite">
-      <h2>Resiliência</h2>
-      <div id="resilience"></div>
+      <p class="next-steps-line">
+        <span class="next-steps-label">Próximos passos:</span>
+        <span id="next-steps"></span>
+      </p>
     </section>
 
-    <section class="card">
-      <div class="section-head">
-        <h2>Harnesses e configuração efetiva</h2>
-        <span class="muted">versões, preferências futuras e overrides desta execução</span>
+    <!-- Contexto. Estável durante a execução, então densidade menor: é
+         referência para quando o estado acima não bastar. -->
+    <section class="card block block-context">
+      <h2>Contexto</h2>
+
+      <div class="columns">
+        <div class="block-part">
+          <h3>Issue</h3>
+          <div id="issue-summary"></div>
+        </div>
+        <div class="block-part">
+          <h3>Repositório</h3>
+          <div id="repository"></div>
+        </div>
+      </div>
+
+      <div class="block-part">
+        <h3>
+          Harnesses e configuração efetiva
+          <span class="muted block-hint">versões, preferências futuras e overrides desta execução</span>
+        </h3>
+        <div id="configuration"></div>
       </div>
-      <div id="configuration"></div>
     </section>
 
-    <div class="columns">
-      <section class="card">
-        <h2>Fases</h2>
+    <!-- Andamento: o caminho já percorrido, fase a fase e story a story. -->
+    <section class="card block block-progress">
+      <h2>Andamento</h2>
+
+      <div class="block-part">
+        <h3>Fases</h3>
         <ol id="phases" class="plain-list"></ol>
-      </section>
-      <section class="card">
-        <h2>Próximos passos</h2>
-        <div id="next-steps"></div>
-      </section>
-    </div>
+      </div>
 
-    <section class="card">
-      <h2>User stories</h2>
-      <ol id="stories" class="plain-list"></ol>
+      <div class="block-part">
+        <h3>User stories</h3>
+        <ol id="stories" class="plain-list"></ol>
+      </div>
     </section>
 
-    <div class="columns">
-      <section class="card">
-        <h2>Commits</h2>
-        <ul id="commits" class="plain-list"></ul>
-      </section>
-      <section class="card">
-        <h2>Pull requests</h2>
-        <ul id="pull-requests" class="plain-list"></ul>
-      </section>
-    </div>
+    <!-- Saída: o que a execução produziu no repositório e no log. -->
+    <section class="card block block-output">
+      <h2>Saída</h2>
 
-    <section class="card">
-      <div class="section-head">
-        <h2>Logs recentes</h2>
-        <label class="log-filter-control">
-          Nível
-          <select id="log-filter" aria-label="Filtro por nível de log">
-            <option value="all">todos</option>
-            <option value="info">info</option>
-            <option value="warn">avisos</option>
-            <option value="error">erros</option>
-          </select>
-        </label>
+      <div class="columns">
+        <div class="block-part">
+          <h3>Commits</h3>
+          <ul id="commits" class="plain-list"></ul>
+        </div>
+        <div class="block-part">
+          <h3>Pull requests</h3>
+          <ul id="pull-requests" class="plain-list"></ul>
+        </div>
+      </div>
+
+      <div class="block-part">
+        <div class="section-head">
+          <h3>Logs recentes</h3>
+          <label class="log-filter-control">
+            Nível
+            <select id="log-filter" aria-label="Filtro por nível de log">
+              <option value="all">todos</option>
+              <option value="info">info</option>
+              <option value="warn">avisos</option>
+              <option value="error">erros</option>
+            </select>
+          </label>
+        </div>
+        <ol id="logs" class="plain-list logs"></ol>
       </div>
-      <ol id="logs" class="plain-list logs"></ol>
     </section>
     </div>
 
     <div class="tab-panel" id="panel-kanban" role="tabpanel" aria-labelledby="tab-kanban" tabindex="0" hidden>
       <section class="card">
-        <h2>Kanban de user stories</h2>
         <div id="kanban" class="kanban"></div>
       </section>
     </div>
@@ -205,7 +234,6 @@
     <div class="tab-panel" id="panel-history" role="tabpanel" aria-labelledby="tab-history" tabindex="0" hidden>
       <section class="card">
         <div class="section-head">
-          <h2>Histórico da execução</h2>
           <label class="log-filter-control">
             Evento
             <select id="history-filter" aria-label="Filtro do histórico">
@@ -229,7 +257,7 @@
   <aside id="drawer" class="drawer" role="dialog" aria-modal="true"
          aria-labelledby="drawer-title" tabindex="-1" hidden>
     <div class="drawer-head">
-      <h2 id="drawer-title">Detalhes da user story</h2>
+      <h2 id="drawer-title"></h2>
       <button type="button" id="drawer-close" class="drawer-close" aria-label="Fechar detalhes">✕</button>
     </div>
     <div id="drawer-body" class="drawer-body"></div>