{% extends "base.html" %}
{% block title %}Activity – {{ project.name }}{% endblock %}

{% block content %}
<link rel="stylesheet" href="/static/css/project-workbench.css?v=7">

{% include "_project_subnav.html" %}

<div class="d-flex align-items-center gap-3 mb-4">
  <div>
    <h2 style="margin:0;font-size:1.4rem;font-weight:800;">{{ project.name }} — Activity</h2>
    <p class="text-secondary" style="margin:0.25rem 0 0;font-size:0.85rem;">Sessions, approvals, decisions, and durable launch recovery</p>
  </div>
  {% if project.path %}<code style="font-size:0.8rem;color:var(--text-muted);">{{ project.path }}</code>{% endif %}
</div>

<div class="wb-tabs" role="tablist" aria-label="Activity views">
  <button class="wb-tab active" data-tab="sessions" onclick="switchWbTab('sessions')">Sessions</button>
  <button class="wb-tab" data-tab="approvals" onclick="switchWbTab('approvals')">
    Approvals <span class="tab-badge" id="wb-approvals-badge" style="display:none;">0</span>
  </button>
  <button class="wb-tab" data-tab="decisions" onclick="switchWbTab('decisions')">Decisions</button>
  <button class="wb-tab" data-tab="queue" onclick="switchWbTab('queue')">Launch queue <span class="tab-badge" id="wb-queue-badge" style="display:none;">0</span></button>
</div>

<!-- SESSIONS TAB -->
<div class="wb-pane active" id="wb-pane-sessions">
  <div class="live-summary">
    <div class="live-chip">Agents working: <strong id="wb-working-count">0</strong></div>
    <div class="live-chip">Active sessions: <strong id="wb-sessions-count">0</strong></div>
    <div class="live-chip">Pending approvals: <strong id="wb-pending-count" style="color:#f59e0b;">0</strong></div>
  </div>
  <div class="agent-grid" id="wb-agent-grid">
    <div style="font-size:0.82rem;color:var(--text-muted);">Loading agents…</div>
  </div>
  <div class="section-hdr">
    <h5>Recorded sessions</h5>
    <button class="btn-icon-sm" onclick="loadLive()" title="Refresh sessions">&#8635;</button>
  </div>
  <div style="overflow-x:auto;margin-bottom:1rem;">
    <table class="sessions-table">
      <thead><tr><th>Agent</th><th>Task</th><th>Status</th><th>Workspace</th><th>Started</th><th>Last seen</th></tr></thead>
      <tbody id="wb-sessions-body"><tr><td colspan="6" style="text-align:center;color:var(--text-muted);font-size:0.8rem;padding:1.5rem;">Loading…</td></tr></tbody>
    </table>
  </div>
  <div class="terminal-layout session-workspace">
    <div class="terminal-sidebar">
      <div class="terminal-filter">
        <label for="wb-task-filter" class="sr-only">Filter sessions by task or session ID</label>
        <input type="text" id="wb-task-filter" placeholder="Filter by task or session ID…" oninput="filterTerminalSessions()">
      </div>
      <div class="terminal-session-list" id="wb-terminal-session-list">
        <div style="padding:1rem;font-size:0.8rem;color:var(--text-muted);">No sessions loaded yet.</div>
      </div>
    </div>
    <div class="session-detail-stack">
      <section class="terminal-viewer" aria-labelledby="wb-terminal-info">
        <div class="terminal-viewer-header">
          <span id="wb-terminal-info">Select a session from the left</span>
          <div class="terminal-viewer-tools" role="group" aria-label="Terminal output view">
            <button class="terminal-mode-btn" id="wb-terminal-focused" type="button" aria-pressed="true" onclick="setWbTerminalMode('focused')">Focused</button>
            <button class="terminal-mode-btn" id="wb-terminal-raw" type="button" aria-pressed="false" onclick="setWbTerminalMode('raw')">Raw output</button>
            <button class="terminal-mode-btn" type="button" aria-label="Refresh output" onclick="refreshWbTerminal()">Refresh</button>
          </div>
        </div>
        <div class="terminal-viewer-hint" id="wb-terminal-hint">Focused shows recent useful output and key events. Raw output shows recent captured entries.</div>
        <pre class="wb-terminal-pre" id="wb-terminal-pre">Select a session to view output.</pre>
      </section>
      <section class="session-handoff-panel" aria-label="Recorded handoff">
        <div class="section-hdr"><h5>Recorded handoff</h5></div>
        <div class="handoff-summary" id="wb-handoff-view">
          <div class="handoff-empty">Select a session to view its recorded handoff.</div>
        </div>
      </section>
    </div>
  </div>
</div>

<!-- APPROVALS TAB -->
<div class="wb-pane" id="wb-pane-approvals">
  <div class="section-hdr">
    <h5>Pending Approvals</h5>
    <button class="btn-icon-sm" onclick="loadApprovals()" title="Refresh">&#8635;</button>
  </div>
  <div id="wb-pending-list">
    <p style="color:var(--text-muted);font-size:0.82rem;">No pending approvals.</p>
  </div>
  <details class="resolved-section" id="wb-resolved-details">
    <summary>Resolved (last 20)</summary>
    <div id="wb-resolved-list" style="margin-top:0.75rem;"></div>
  </details>
</div>

<!-- LAUNCH QUEUE TAB -->
<div class="wb-pane" id="wb-pane-queue">
  <div class="queue-toolbar">
    <div>
      <h5 style="margin:0;">Durable launch requests</h5>
      <div style="font-size:0.75rem;color:var(--text-muted);">Queued, blocked, failed, and completed attempts for this project.</div>
    </div>
    <div class="queue-actions">
      <button class="btn btn-outline-secondary btn-sm" onclick="cleanupLaunchQueue()">Archive old</button>
      <button class="btn btn-primary btn-sm" onclick="loadLaunchQueue()">Refresh</button>
    </div>
  </div>
  <div style="overflow-x:auto;">
    <table class="queue-table">
      <thead><tr><th>Request</th><th>Task / role</th><th>Status</th><th>Attempts</th><th>Next try</th><th>Result</th><th>Actions</th></tr></thead>
      <tbody id="wb-queue-body"><tr><td colspan="7" style="text-align:center;color:var(--text-muted);">Loading...</td></tr></tbody>
    </table>
  </div>
</div>

<!-- DECISIONS TAB -->
<div class="wb-pane" id="wb-pane-decisions">
  <div class="section-hdr">
    <h5>Orchestration Decisions</h5>
    <button class="btn-icon-sm" onclick="loadDecisions()" title="Refresh">&#8635;</button>
  </div>
  <div id="wb-decisions-list">
    <p style="color:var(--text-muted);font-size:0.82rem;">Loading…</p>
  </div>
</div>

<div id="wb-toast"></div>

<script src="/static/js/terminal-feed.js?v=7"></script>
<script>
window.PROJECT_ID = {{ project.id }};
window.CURRENT_ENTITY_ID = {{ current_entity.id if current_entity else 'null' }};
</script>
<script src="/static/js/project-workbench.js?v=7"></script>
{% endblock %}