issue-flow 0.7.7 → 0.9.0

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,14 +34,43 @@
     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 = [
+    { status: 'backlog', title: 'Backlog' },
+    { status: 'in_progress', title: 'Em andamento' },
+    { status: 'in_review', title: 'Em revisão' },
+    { status: 'done', title: 'Concluído' },
+  ];
+
   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'),
@@ -56,6 +87,13 @@
     logFilter: document.getElementById('log-filter'),
     logs: document.getElementById('logs'),
     sessionMeta: document.getElementById('session-meta'),
+    tabs: Array.prototype.slice.call(document.querySelectorAll('[role="tab"]')),
+    kanban: document.getElementById('kanban'),
+    drawer: document.getElementById('drawer'),
+    drawerOverlay: document.getElementById('drawer-overlay'),
+    drawerClose: document.getElementById('drawer-close'),
+    drawerTitle: document.getElementById('drawer-title'),
+    drawerBody: document.getElementById('drawer-body'),
   };
 
   const state = {
@@ -66,6 +104,20 @@
     timer: null,
     polling: false,
     logFilter: 'all',
+    activeTab: 'tab-execution',
+    // 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 ----------------------------------------------------------
@@ -189,6 +241,66 @@
     return match ? match[1] : null;
   }
 
+  // ---- Camada de leitura das stories ----------------------------------------
+  // Único ponto de acesso a uma story individual: o Kanban e o drawer nunca
+  // varrem snapshot.stories por conta própria. Quando a escrita existir, é aqui
+  // que a leitura passa a conversar com ela, sem tocar na UI.
+
+  function text(value) {
+    return typeof value === 'string' ? value : '';
+  }
+
+  function list(value) {
+    return Array.isArray(value) ? value : [];
+  }
+
+  // Normaliza os campos que um session.json anterior pode não ter gravado, para
+  // 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),
+    };
+  }
+
+  function getStoryById(snapshot, id) {
+    if (!snapshot) return null;
+    const stories = list(snapshot.stories);
+    for (const story of stories) {
+      if (story.id === id) return normalizeStory(story);
+    }
+    return null;
+  }
+
+  function getStories(snapshot) {
+    if (!snapshot) return [];
+    return list(snapshot.stories).map(normalizeStory);
+  }
+
+  // ---- Abas -----------------------------------------------------------------
+  // 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) {
+    state.activeTab = tabId;
+    for (const tab of els.tabs) {
+      const active = tab.id === tabId;
+      tab.setAttribute('aria-selected', active ? 'true' : 'false');
+      tab.classList.toggle('is-active', active);
+      const panel = document.getElementById(tab.getAttribute('aria-controls'));
+      if (panel) panel.hidden = !active;
+    }
+  }
+
   // ---- Polling: intervalo configurável, aba oculta e backoff ----------------
 
   function readStoredRefresh() {
@@ -211,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() {
@@ -244,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) {
@@ -264,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();
     }
   }
 
@@ -282,6 +659,9 @@
     renderPhases(snapshot);
     renderNextSteps(snapshot);
     renderStories(snapshot);
+    // Incondicional: a aba inativa não pode ficar defasada até ser aberta.
+    renderKanban(snapshot);
+    renderDrawer(snapshot);
     renderGit(snapshot);
     renderLogs(snapshot);
     renderMeta(snapshot);
@@ -510,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');
@@ -534,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),
@@ -544,6 +932,157 @@
     }
   }
 
+  // As stories chegam já normalizadas por getStories(), então aqui nenhum campo
+  // precisa de checagem de ausência.
+  // <button> em vez de <div role="button">: acionamento por Enter/Espaço e foco
+  // saem de graça. Por isso todo o conteúdo é <span> — <p>/<div> não são
+  // conteúdo válido dentro de um botão.
+  function storyCard(story) {
+    const card = el('button', 'kanban-card');
+    card.type = 'button';
+    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(el('span', 'story-id', story.id));
+    card.appendChild(head);
+
+    card.appendChild(el('span', 'kanban-card-title', story.title));
+    if (story.description) card.appendChild(el('span', 'kanban-card-desc', story.description));
+    card.appendChild(
+      el('span', 'badge story-status-' + story.status, STORY_STATUS_LABELS[story.status]),
+    );
+    card.addEventListener('click', () => openDrawer(story.id));
+    return card;
+  }
+
+  function renderKanban(snapshot) {
+    clear(els.kanban);
+    const stories = getStories(snapshot);
+    for (const column of KANBAN_COLUMNS) {
+      const entries = stories.filter((story) => story.status === column.status);
+
+      const node = el('section', 'kanban-column');
+      const head = el('div', 'kanban-column-head');
+      head.appendChild(el('h3', 'kanban-column-title', column.title));
+      head.appendChild(el('span', 'kanban-column-count', String(entries.length)));
+      node.appendChild(head);
+
+      if (entries.length === 0) {
+        node.appendChild(el('p', 'empty kanban-empty', 'Nenhuma story.'));
+      } else {
+        for (const story of entries) node.appendChild(storyCard(story));
+      }
+      els.kanban.appendChild(node);
+    }
+  }
+
+  // ---- Drawer de detalhes da story ------------------------------------------
+
+  function onDrawerKeydown(event) {
+    if (event.key === 'Escape') closeDrawer();
+  }
+
+  // Reidrata a partir do id a cada render: o drawer aberto sobrevive ao poll.
+  function renderDrawer(snapshot) {
+    if (state.selectedStoryId === null) return;
+    const story = getStoryById(snapshot, state.selectedStoryId);
+    // A story saiu do plano: manter o drawer aberto exibiria dados obsoletos.
+    if (story === null) {
+      closeDrawer();
+      return;
+    }
+    els.drawerTitle.textContent = story.id + ' · ' + story.title;
+
+    clear(els.drawerBody);
+    els.drawerBody.appendChild(
+      el('span', 'badge story-status-' + story.status, STORY_STATUS_LABELS[story.status]),
+    );
+
+    const timing = itemSideText([
+      story.completedAt ? 'concluída ' + formatClock(story.completedAt) : '',
+      metric(story.durationSeconds) !== null ? formatDuration(story.durationSeconds) : '',
+    ]);
+    if (timing) els.drawerBody.appendChild(el('p', 'muted drawer-timing', timing));
+
+    drawerSection('Descrição', (body) => {
+      body.appendChild(
+        story.description
+          ? el('p', 'drawer-text', story.description)
+          : el('p', 'empty', 'Sem descrição.'),
+      );
+    });
+
+    drawerSection('Critérios de aceite', (body) => {
+      if (story.acceptanceCriteria.length === 0) {
+        body.appendChild(el('p', 'empty', 'Nenhum critério declarado.'));
+        return;
+      }
+      const items = el('ul', 'drawer-list');
+      for (const criterion of story.acceptanceCriteria) items.appendChild(el('li', null, criterion));
+      body.appendChild(items);
+    });
+
+    drawerSection('Dependências', (body) => {
+      if (story.dependencies.length === 0) {
+        body.appendChild(el('p', 'empty', 'Nenhuma dependência.'));
+        return;
+      }
+      const row = el('div', 'badge-row');
+      for (const dependency of story.dependencies) {
+        row.appendChild(el('span', 'badge label-badge', dependency));
+      }
+      body.appendChild(row);
+    });
+
+    // Nenhum campo de histórico existe no snapshot hoje; a seção só aparece se
+    // uma versão futura publicar um.
+    const history = list(story.history);
+    if (history.length > 0) {
+      drawerSection('Histórico', (body) => {
+        const entries = el('ol', 'drawer-list');
+        for (const entry of history) {
+          const item = el('li');
+          if (entry.at) item.appendChild(el('span', 'log-time', formatClock(entry.at)));
+          item.appendChild(document.createTextNode(text(entry.message)));
+          entries.appendChild(item);
+        }
+        body.appendChild(entries);
+      });
+    }
+  }
+
+  function drawerSection(title, fill) {
+    const section = el('section', 'drawer-section');
+    section.appendChild(el('h3', 'drawer-section-title', title));
+    fill(section);
+    els.drawerBody.appendChild(section);
+  }
+
+  function openDrawer(id) {
+    state.selectedStoryId = id;
+    els.drawer.hidden = false;
+    els.drawerOverlay.hidden = false;
+    document.addEventListener('keydown', onDrawerKeydown);
+    renderDrawer(state.snapshot);
+    els.drawer.focus();
+  }
+
+  function closeDrawer() {
+    const id = state.selectedStoryId;
+    state.selectedStoryId = null;
+    els.drawer.hidden = true;
+    els.drawerOverlay.hidden = true;
+    document.removeEventListener('keydown', onDrawerKeydown);
+    clear(els.drawerBody);
+    // O card é recriado a cada render, então o foco volta pelo id, não por uma
+    // referência guardada na abertura.
+    const card = id ? els.kanban.querySelector('[data-story-id="' + id + '"]') : null;
+    if (card) card.focus();
+  }
+
   function renderGit(snapshot) {
     const repo = repoUrl(snapshot);
 
@@ -633,13 +1172,30 @@
 
   // ---- Inicialização --------------------------------------------------------
 
+  function onRefreshChange(select) {
+    state.refreshSeconds = Number(select.value);
+    storeRefresh(state.refreshSeconds);
+    buildRefreshSelect();
+    clearTimer();
+    if (state.refreshSeconds !== PAUSED) poll();
+  }
+
   async function init() {
-    els.refreshSelect.addEventListener('change', () => {
-      state.refreshSeconds = Number(els.refreshSelect.value);
-      storeRefresh(state.refreshSeconds);
-      clearTimer();
-      if (state.refreshSeconds !== PAUSED) poll();
-    });
+    for (const tab of els.tabs) {
+      tab.addEventListener('click', () => setActiveTab(tab.id));
+    }
+    setActiveTab(state.activeTab);
+
+    els.drawerClose.addEventListener('click', closeDrawer);
+    els.drawerOverlay.addEventListener('click', closeDrawer);
+    els.backToDashboard.addEventListener('click', clearSessionSelection);
+
+    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;