issue-flow 0.8.0 → 0.9.0

package/web/public/app.css

@@ -465,6 +465,16 @@ progress {
   font-weight: 700;
 }
 
+/* Story cuja stage é 'executing' (issue 38) — destaque visual na lista de
+   "User stories". A borda esquerda usa box-shadow (não border) para não
+   deslocar o conteúdo do item ao ganhar/perder a classe. */
+.story-executing {
+  background: var(--run-bg);
+  border-radius: 6px;
+  box-shadow: inset 3px 0 0 0 var(--run);
+  padding-left: 9px;
+}
+
 .icon-completed {
   color: var(--ok);
 }
@@ -836,4 +846,172 @@ progress {
   .header-side {
     align-items: flex-start;
   }
+
+  .dashboard-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* ---- Views: dashboard multi-sessão vs detalhe (#35) ---- */
+
+.view {
+  display: grid;
+  gap: 16px;
+  min-width: 0;
+}
+
+.view[hidden] {
+  display: none;
+}
+
+.view > * {
+  min-width: 0;
+}
+
+.back-link {
+  appearance: none;
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0 0 6px;
+  font: inherit;
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: var(--accent);
+  cursor: pointer;
+  display: inline-block;
+}
+
+.back-link:hover {
+  text-decoration: underline;
+}
+
+.dashboard-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 16px;
+}
+
+.dashboard-card {
+  appearance: none;
+  text-align: left;
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 16px;
+  box-shadow: var(--shadow);
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+  display: grid;
+  gap: 10px;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.dashboard-card:hover,
+.dashboard-card:focus-visible {
+  border-color: var(--accent);
+  outline: none;
+}
+
+.dashboard-card.is-live {
+  border-color: var(--run);
+}
+
+.dashboard-card-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+}
+
+.dashboard-project {
+  font-size: 0.82rem;
+  font-weight: 600;
+  color: var(--muted);
+  overflow-wrap: anywhere;
+}
+
+.dashboard-title-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 8px;
+}
+
+.dashboard-issue {
+  font-weight: 700;
+  color: var(--accent);
+  font-variant-numeric: tabular-nums;
+}
+
+.dashboard-title {
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}
+
+.dashboard-summary {
+  margin: 0;
+  font-size: 0.9rem;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  line-clamp: 3;
+  overflow-wrap: anywhere;
+}
+
+.dashboard-meta-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  font-size: 0.82rem;
+  color: var(--muted);
+  font-variant-numeric: tabular-nums;
+}
+
+.dashboard-progress {
+  display: block;
+  height: 6px;
+  background: var(--idle-bg);
+  border-radius: 999px;
+  overflow: hidden;
+}
+
+.dashboard-progress-bar {
+  display: block;
+  height: 100%;
+  background: var(--run);
+  border-radius: 999px;
+  transition: width 0.3s ease;
+}
+
+.dashboard-live-dot {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--run);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.dashboard-live-dot::before {
+  content: '';
+  display: inline-block;
+  width: 7px;
+  height: 7px;
+  margin-right: 6px;
+  border-radius: 50%;
+  background: var(--run);
+  vertical-align: middle;
+  animation: dashboard-pulse 1.4s ease-in-out infinite;
+}
+
+@keyframes dashboard-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.35;
+  }
 }

package/web/public/app.js

@@ -1,7 +1,8 @@
 // Interface do monitoramento web do issue-flow.
 // JS puro, sem framework e sem recursos externos — funciona offline.
-// Consome apenas GET api/status (ETag/304) e GET api/health; todo texto
-// dinâmico entra via textContent (nunca innerHTML com dados do snapshot).
+// Consome GET api/sessions, GET api/status (ETag/304) e GET api/health;
+// todo texto dinâmico entra via textContent (nunca innerHTML com dados
+// do snapshot).
 (() => {
   'use strict';
 
@@ -10,6 +11,7 @@
   const STORAGE_KEY = 'issue-flow:refresh-seconds';
   const MAX_BACKOFF_MS = 60000;
   const ALERT_PREVIEW = 3;
+  const DESCRIPTION_PREVIEW = 140;
 
   const STATUS_LABELS = {
     idle: 'aguardando',
@@ -32,6 +34,20 @@
     done: 'concluída',
   };
 
+  // Rótulos do `stage` granular (issue 38) — mais fino que STORY_STATUS_LABELS,
+  // deriva de eventos reais do pipeline (iteration:start, stories:update,
+  // phase:start/phase:end da review, correction:cycle). Ver README, seção
+  // "Story stage".
+  const STORY_STAGE_LABELS = {
+    pending: 'aguardando',
+    executing: 'em execução',
+    awaiting_review: 'aguardando revisão',
+    in_review: 'em revisão',
+    in_correction: 'em correção',
+    done: 'concluída',
+    failed: 'falhou',
+  };
+
   // Colunas do Kanban, na ordem em que a execução avança. Os títulos são os das
   // colunas, não os rótulos dos badges (STORY_STATUS_LABELS), que seguem em minúsculas.
   const KANBAN_COLUMNS = [
@@ -43,12 +59,18 @@
 
   const els = {
     banner: document.getElementById('banner-disconnected'),
+    viewDashboard: document.getElementById('view-dashboard'),
+    viewDetail: document.getElementById('view-detail'),
+    dashboard: document.getElementById('dashboard'),
+    dashboardMeta: document.getElementById('dashboard-meta'),
+    backToDashboard: document.getElementById('back-to-dashboard'),
     issueLink: document.getElementById('issue-link'),
     branchLine: document.getElementById('branch-line'),
     statusBadge: document.getElementById('status-badge'),
     elapsed: document.getElementById('elapsed'),
     estimate: document.getElementById('estimate'),
     refreshSelect: document.getElementById('refresh-select'),
+    refreshSelectDashboard: document.getElementById('refresh-select-dashboard'),
     alerts: document.getElementById('alerts'),
     alertsBody: document.getElementById('alerts-body'),
     issueSummary: document.getElementById('issue-summary'),
@@ -86,6 +108,16 @@
     // Só o id: o card que abriu o drawer é destruído no próximo render, então
     // guardar o nó levaria a uma referência morta.
     selectedStoryId: null,
+    // Multi-sessão (#35): lista de /api/sessions e seleção explícita do usuário.
+    // selectedSessionId null = modo automático (1 sessão → detalhe; 2+ → dashboard).
+    sessions: [],
+    selectedSessionId: null,
+    // sessionId cujo snapshot/detalhe está na tela (evita flash ao trocar).
+    detailSessionId: null,
+    viewMode: 'detail', // 'detail' | 'dashboard'
+    statusUrl: 'api/status',
+    // Se selectSession/clearSessionSelection chega durante um poll, reexecuta.
+    pollAgain: false,
   };
 
   // ---- Utilitários ----------------------------------------------------------
@@ -226,9 +258,14 @@
   // que nenhum consumidor precise repetir a checagem de ausência.
   function normalizeStory(story) {
     const status = story.status !== null && story.status !== undefined ? story.status : 'backlog';
+    const stage = story.stage !== null && story.stage !== undefined ? story.stage : 'pending';
     return {
       ...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,
+      stageDetail:
+        story.stageDetail !== null && story.stageDetail !== undefined ? story.stageDetail : null,
       dependencies: list(story.dependencies),
       description: text(story.description),
       acceptanceCriteria: list(story.acceptanceCriteria),
@@ -286,22 +323,28 @@
     }
   }
 
-  function buildRefreshSelect() {
+  function fillRefreshSelect(select) {
+    if (!select) return;
     const values = REFRESH_OPTIONS.slice();
     if (state.refreshSeconds !== PAUSED && values.indexOf(state.refreshSeconds) === -1) {
       values.push(state.refreshSeconds);
       values.sort((a, b) => a - b);
     }
-    clear(els.refreshSelect);
+    clear(select);
     for (const value of values) {
       const option = el('option', null, value + 's');
       option.value = String(value);
-      els.refreshSelect.appendChild(option);
+      select.appendChild(option);
     }
     const pause = el('option', null, 'pausar');
     pause.value = String(PAUSED);
-    els.refreshSelect.appendChild(pause);
-    els.refreshSelect.value = String(state.refreshSeconds);
+    select.appendChild(pause);
+    select.value = String(state.refreshSeconds);
+  }
+
+  function buildRefreshSelect() {
+    fillRefreshSelect(els.refreshSelect);
+    fillRefreshSelect(els.refreshSelectDashboard);
   }
 
   function clearTimer() {
@@ -319,19 +362,161 @@
     state.timer = window.setTimeout(poll, Math.min(backoff, MAX_BACKOFF_MS));
   }
 
+  // Decide dashboard vs detalhe a partir de /api/sessions. selectedSessionId
+  // null = automático; string = escolha explícita do usuário (card).
+  function resolveView(sessions) {
+    state.sessions = sessions;
+
+    if (state.selectedSessionId !== null) {
+      const stillThere = sessions.some((s) => s.sessionId === state.selectedSessionId);
+      if (!stillThere) {
+        state.selectedSessionId = null;
+        state.etag = null;
+      } else if (sessions.length === 1) {
+        // Seleção explícita deixa de fazer sentido com uma única sessão.
+        state.selectedSessionId = null;
+      }
+    }
+
+    if (state.selectedSessionId !== null) {
+      const selected = sessions.find((s) => s.sessionId === state.selectedSessionId);
+      return { mode: 'detail', session: selected || null };
+    }
+
+    if (sessions.length === 0) {
+      return { mode: 'detail', session: null };
+    }
+
+    if (sessions.length === 1) {
+      return { mode: 'detail', session: sessions[0] };
+    }
+
+    return { mode: 'dashboard', session: null };
+  }
+
+  function setViewMode(mode) {
+    state.viewMode = mode;
+    els.viewDashboard.hidden = mode !== 'dashboard';
+    els.viewDetail.hidden = mode !== 'detail';
+    // Back só quando o usuário escolheu um card e ainda há dashboard para voltar.
+    const showBack =
+      mode === 'detail' && state.selectedSessionId !== null && state.sessions.length >= 2;
+    els.backToDashboard.hidden = !showBack;
+    if (mode === 'dashboard' && state.selectedStoryId !== null) {
+      closeDrawer();
+    }
+  }
+
+  function statusUrlFor(session) {
+    if (!session || !session.statusUrl) return 'api/status';
+    // statusUrl vem com barra inicial (/api/status?session=…); o fetch relativo
+    // ao path do painel precisa da forma sem a barra absoluta do host.
+    return session.statusUrl.replace(/^\//, '');
+  }
+
+  function clearDetailState() {
+    state.etag = null;
+    state.snapshot = null;
+    state.detailSessionId = null;
+  }
+
+  function requestPoll() {
+    clearTimer();
+    if (state.polling) {
+      state.pollAgain = true;
+      return;
+    }
+    poll();
+  }
+
+  function selectSession(sessionId) {
+    if (state.selectedSessionId !== sessionId) {
+      clearDetailState();
+    }
+    state.selectedSessionId = sessionId;
+    requestPoll();
+  }
+
+  function clearSessionSelection() {
+    state.selectedSessionId = null;
+    clearDetailState();
+    requestPoll();
+  }
+
   async function poll() {
-    if (state.polling) return;
+    if (state.polling) {
+      state.pollAgain = true;
+      return;
+    }
     state.polling = true;
+    state.pollAgain = false;
     try {
+      const sessionsRes = await fetch('api/sessions', { cache: 'no-store' });
+      if (!sessionsRes.ok) throw new Error('HTTP ' + sessionsRes.status);
+      const sessions = await sessionsRes.json();
+      if (!Array.isArray(sessions)) throw new Error('sessions payload invalid');
+
+      const resolved = resolveView(sessions);
+
+      if (resolved.mode === 'dashboard') {
+        clearDetailState();
+        setViewMode('dashboard');
+        renderDashboard(sessions);
+        state.failures = 0;
+        els.banner.hidden = true;
+        return;
+      }
+
+      const nextId =
+        resolved.session && resolved.session.sessionId != null
+          ? resolved.session.sessionId
+          : null;
+      const sessionChanged = state.detailSessionId !== nextId;
+      if (sessionChanged) {
+        clearDetailState();
+        state.detailSessionId = nextId;
+      }
+
+      if (!resolved.session) {
+        setViewMode('detail');
+        // Zero sessões: mantém a última tela de detalhe se houver, sem explodir.
+        renderEmptyDetail();
+        state.failures = 0;
+        els.banner.hidden = true;
+        return;
+      }
+
+      const nextUrl = statusUrlFor(resolved.session);
+      if (nextUrl !== state.statusUrl) {
+        state.statusUrl = nextUrl;
+        state.etag = null;
+      }
+
+      // Evita flash da sessão anterior enquanto o status novo carrega.
+      if (sessionChanged || !state.snapshot) {
+        els.viewDashboard.hidden = true;
+        els.viewDetail.hidden = true;
+      } else {
+        setViewMode('detail');
+      }
+
       const headers = {};
       if (state.etag) headers['If-None-Match'] = state.etag;
-      const res = await fetch('api/status', { headers, cache: 'no-store' });
+      const res = await fetch(state.statusUrl, { headers, cache: 'no-store' });
+      // Se selectSession/clear pediu outro poll no meio do fetch, descarta este
+      // status — o ciclo seguinte aplica a seleção atual.
+      if (state.pollAgain) {
+        state.failures = 0;
+        els.banner.hidden = true;
+        return;
+      }
       if (res.status !== 304) {
         if (!res.ok) throw new Error('HTTP ' + res.status);
         state.etag = res.headers.get('ETag');
         state.snapshot = await res.json();
         render();
       }
+      setViewMode('detail');
       state.failures = 0;
       els.banner.hidden = true;
     } catch (err) {
@@ -339,7 +524,124 @@
       els.banner.hidden = false;
     } finally {
       state.polling = false;
-      schedule();
+      if (state.pollAgain) {
+        state.pollAgain = false;
+        poll();
+      } else {
+        schedule();
+      }
+    }
+  }
+
+  function renderEmptyDetail() {
+    if (state.snapshot) return;
+    document.title = 'issue-flow';
+    els.statusBadge.textContent = STATUS_LABELS.idle;
+    els.statusBadge.className = 'badge status-idle';
+    els.elapsed.textContent = '—';
+    els.estimate.hidden = true;
+    els.sessionMeta.textContent = 'nenhuma execução ativa';
+  }
+
+  function truncateText(text, max) {
+    if (!text) return '';
+    const normalized = String(text).replace(/\s+/g, ' ').trim();
+    if (normalized.length <= max) return normalized;
+    return normalized.slice(0, max - 1).trimEnd() + '…';
+  }
+
+  function renderDashboard(sessions) {
+    const active = document.activeElement;
+    const focusedId =
+      active &&
+      active.dataset &&
+      els.dashboard.contains(active) &&
+      active.dataset.sessionId
+        ? active.dataset.sessionId
+        : null;
+
+    clear(els.dashboard);
+
+    if (sessions.length === 0) {
+      els.dashboard.appendChild(el('p', 'empty', 'Nenhuma execução ativa.'));
+      els.dashboardMeta.textContent = '0 execuções';
+      document.title = 'issue-flow';
+      return;
+    }
+
+    for (const session of sessions) {
+      // <button> só aceita phrasing content — mesmos spans do Kanban.
+      const card = el('button', 'dashboard-card');
+      card.type = 'button';
+      if (session.sessionId) card.dataset.sessionId = session.sessionId;
+      if (session.status === 'running') card.classList.add('is-live');
+
+      const head = el('span', 'dashboard-card-head');
+      const project = el(
+        'span',
+        'dashboard-project',
+        session.repositoryName || 'Projeto desconhecido',
+      );
+      const badge = el('span', 'badge status-' + (session.status || 'idle'));
+      badge.textContent = STATUS_LABELS[session.status] || session.status || '—';
+      head.appendChild(project);
+      head.appendChild(badge);
+      card.appendChild(head);
+
+      const titleRow = el('span', 'dashboard-title-row');
+      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'),
+      );
+      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, percent + '%'));
+      const elapsed =
+        typeof session.elapsedSeconds === 'number'
+          ? formatDuration(session.elapsedSeconds)
+          : session.startedAt
+            ? formatAgo(session.startedAt)
+            : '—';
+      meta.appendChild(el('span', null, elapsed));
+      card.appendChild(meta);
+
+      const progress = el('span', 'dashboard-progress');
+      const bar = el('span', 'dashboard-progress-bar');
+      bar.style.width = Math.max(0, Math.min(100, percent)) + '%';
+      progress.appendChild(bar);
+      card.appendChild(progress);
+
+      if (session.status === 'running') {
+        card.appendChild(el('span', 'dashboard-live-dot', 'ao vivo'));
+      }
+
+      card.addEventListener('click', () => {
+        if (session.sessionId) selectSession(session.sessionId);
+      });
+
+      els.dashboard.appendChild(card);
+    }
+
+    els.dashboardMeta.textContent =
+      sessions.length + (sessions.length === 1 ? ' execução' : ' execuções');
+    document.title = sessions.length + ' execuções · issue-flow';
+
+    if (focusedId) {
+      const card = els.dashboard.querySelector(
+        '[data-session-id="' + focusedId.replace(/"/g, '') + '"]',
+      );
+      if (card) card.focus();
     }
   }
 
@@ -588,7 +890,10 @@
       return;
     }
     for (const story of snapshot.stories) {
-      const item = el('li');
+      // 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 item = el('li', storyStage === 'executing' ? 'story-executing' : null);
       const status = story.passes ? 'completed' : 'pending';
       item.appendChild(el('span', 'item-icon icon-' + status, story.passes ? '✓' : '○'));
       const main = el('div', 'item-main');
@@ -612,7 +917,12 @@
 
       item.appendChild(main);
       const duration = metric(story.durationSeconds);
+      const stageLabel = STORY_STAGE_LABELS[storyStage] || storyStage;
+      const stageText = story.stageSince
+        ? stageLabel + ' ' + formatAgo(story.stageSince)
+        : stageLabel;
       const side = itemSideText([
+        stageText,
         story.completedAt ? 'concluída ' + formatClock(story.completedAt) : '',
         duration !== null ? formatDuration(duration) : '',
         formatUsage(story),
@@ -862,6 +1172,14 @@
 
   // ---- Inicialização --------------------------------------------------------
 
+  function onRefreshChange(select) {
+    state.refreshSeconds = Number(select.value);
+    storeRefresh(state.refreshSeconds);
+    buildRefreshSelect();
+    clearTimer();
+    if (state.refreshSeconds !== PAUSED) poll();
+  }
+
   async function init() {
     for (const tab of els.tabs) {
       tab.addEventListener('click', () => setActiveTab(tab.id));
@@ -870,13 +1188,14 @@
 
     els.drawerClose.addEventListener('click', closeDrawer);
     els.drawerOverlay.addEventListener('click', closeDrawer);
+    els.backToDashboard.addEventListener('click', clearSessionSelection);
 
-    els.refreshSelect.addEventListener('change', () => {
-      state.refreshSeconds = Number(els.refreshSelect.value);
-      storeRefresh(state.refreshSeconds);
-      clearTimer();
-      if (state.refreshSeconds !== PAUSED) poll();
-    });
+    els.refreshSelect.addEventListener('change', () => onRefreshChange(els.refreshSelect));
+    if (els.refreshSelectDashboard) {
+      els.refreshSelectDashboard.addEventListener('change', () =>
+        onRefreshChange(els.refreshSelectDashboard),
+      );
+    }
 
     els.logFilter.addEventListener('change', () => {
       state.logFilter = els.logFilter.value;

package/web/public/index.html

@@ -15,8 +15,31 @@
   </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>
+          <p class="muted">Execuções ativas</p>
+        </div>
+        <div class="header-side">
+          <label class="refresh-control">
+            Atualizar
+            <select id="refresh-select-dashboard" aria-label="Intervalo de atualização"></select>
+          </label>
+        </div>
+      </header>
+      <div id="dashboard" class="dashboard-grid"></div>
+      <footer class="muted footer">
+        <span id="dashboard-meta" aria-live="polite"></span>
+      </footer>
+    </div>
+
+    <div id="view-detail" class="view">
     <header class="card header">
       <div class="header-main">
+        <button type="button" id="back-to-dashboard" class="back-link" hidden>
+          ← Todas as execuções
+        </button>
         <h1>
           <span class="brand">issue-flow</span>
           <a id="issue-link" class="issue-link" target="_blank" rel="noopener" hidden>#—</a>
@@ -128,6 +151,7 @@
     <footer class="muted footer">
       <span id="session-meta"></span>
     </footer>
+    </div>
   </main>
 
   <div id="drawer-overlay" class="drawer-overlay" hidden></div>