{% extends "base.html" %}
{% block page_title %}Delegated Jobs{% endblock %}

{% block content %}
<section class="px-6 py-4 max-w-7xl mx-auto"
         x-data="jobsBoard()"
         x-init="loadSummary(); loadJobs(); connectStream()"
         x-on:beforeunload.window="disconnectStream()">

  <header class="flex items-baseline justify-between mb-4 flex-wrap gap-3">
    <h2 class="text-lg font-semibold">Async delegated jobs</h2>
    <div class="flex items-baseline gap-3 text-xs text-foreground-muted">
      <span x-text="`${summary.queued} queued`"
            class="px-2 py-0.5 rounded bg-surface-2 border border-border"></span>
      <span x-text="`${summary.running} running`"
            class="px-2 py-0.5 rounded bg-surface-2 border border-border"></span>
      <span x-text="`${summary.completed_today} completed (24h)`"
            class="px-2 py-0.5 rounded bg-surface-2 border border-border"></span>
      <span x-text="`${summary.failed_today} failed (24h)`"
            class="px-2 py-0.5 rounded bg-surface-2 border border-border"></span>

      {# v24.0.0a3: max_turns budget guideline popover. The empirical
         table from v22.0.1 retro lives in `incident-playbook` Serena
         memory; this surface keeps it in the operator's eye when they
         delegate from the dashboard. #}
      <button type="button"
              @click="hintsOpen = !hintsOpen"
              :aria-expanded="hintsOpen ? 'true' : 'false'"
              aria-controls="max-turns-hints"
              class="ml-2 px-2 py-0.5 rounded border border-border hover:bg-surface-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent"
              aria-label="Show max_turns sizing guidance"
              title="max_turns sizing guidance">?</button>

      <button @click="loadSummary(); loadJobs()"
              class="ml-2 px-2 py-0.5 rounded border border-border hover:bg-surface-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent"
              aria-label="Reload jobs and summary"
              title="Reload">↻</button>
    </div>
  </header>

  {# v24.0.0a3: max_turns guidance panel. Collapses by default;
     header `?` button toggles. Empirical guideline from v22.0.1 retro
     after the collector3.0 d_855b3149d9d3 max_turns_reached incident. #}
  <div id="max-turns-hints"
       x-show="hintsOpen"
       x-cloak
       x-transition.opacity
       data-empty-state="jobs.max-turns-hints"
       class="mb-4 p-3 rounded-md border border-border bg-surface-2 text-xs">
    <p class="mb-2 text-foreground-muted">
      Empirical <code class="text-accent">max_turns</code> sizing for
      <code class="text-accent">delegate_task</code> (default
      <code>10</code> — fine for read-only Q&amp;A but tight for writes).
      The interacting cap is <code>[backends.claude] timeout_local</code>:
      ~10 s per turn, so <code>max_turns=80</code> wants
      <code>timeout_local ≥ 800</code>.
    </p>
    <ul class="grid gap-y-1 grid-cols-1 sm:grid-cols-2">
      <li>Read-only Q&amp;A — <code>5</code>–<code>10</code></li>
      <li>Single-file edit + commit — <code>15</code>–<code>25</code></li>
      <li>Multi-file feature with tests — <code>50</code>–<code>80</code></li>
      <li>Refactor across packages — <code>100</code>+</li>
    </ul>
    <p class="mt-2 text-foreground-muted">
      A run that hits the cap surfaces as
      <code>code=exit_nonzero: claude -p exit 1: (no stderr)</code> with
      duration much less than <code>timeout_local</code>. Diagnose by
      checking the session JSONL — see incident-playbook entry #1.
    </p>
  </div>

  {# Status filter chips. #}
  <nav class="flex gap-2 mb-3 flex-wrap" aria-label="Filter by status">
    <template x-for="opt in statusOptions" :key="opt.value">
      <button type="button"
              @click="statusFilter = opt.value; loadJobs()"
              :aria-label="`Filter: ${opt.label}`"
              :aria-pressed="statusFilter === opt.value"
              :class="['px-3 py-1 rounded-full text-xs border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent',
                       statusFilter === opt.value
                         ? 'bg-accent text-on-accent border-accent'
                         : 'bg-surface-2 border-border hover:bg-surface-3']"
              x-text="opt.label"></button>
    </template>
  </nav>

  {# Empty / loading states. #}
  <div x-show="loading && !jobs.length"
       class="text-sm text-foreground-muted py-8 text-center"
       data-empty-state="jobs.loading">Loading…</div>

  <div x-show="!loading && !jobs.length"
       class="text-sm text-foreground-muted py-12 text-center border border-dashed border-border rounded"
       data-empty-state="jobs.no-jobs">
    <p class="mb-1">No delegated jobs yet.</p>
    <p class="text-xs">
      Call <code class="text-accent">delegate_task(..., mode="async")</code>
      from an MCP-connected agent to enqueue work — it lands here
      while the worker processes it.
    </p>
  </div>

  {# Table. Multiple <tbody> per row-group is valid HTML and the only
     reliable way to wrap two sibling <tr>s inside an x-for template
     without a non-table custom element breaking the layout engine. #}
  <table x-show="jobs.length" class="w-full text-sm border-collapse">
    <thead class="text-xs uppercase text-foreground-muted">
      <tr class="border-b border-border">
        <th class="text-left py-2 pr-2 w-6"></th>
        <th class="text-left py-2 pr-2">Project</th>
        <th class="text-left py-2 pr-4 w-2/5">Task</th>
        <th class="text-left py-2 pr-2">Inbox</th>
        <th class="text-left py-2 pr-2">Status</th>
        <th class="text-right py-2 pr-2">Duration</th>
        <th class="text-right py-2">Age</th>
      </tr>
    </thead>
    <template x-for="job in jobs" :key="job.job_id">
      <tbody>
        <tr class="border-b border-border hover:bg-surface-2 cursor-pointer"
            @click="toggleExpand(job.job_id)">
          <td class="py-2 pr-2 align-top text-foreground-muted"
              x-text="expanded[job.job_id] ? '▾' : '▸'"></td>
          <td class="py-2 pr-2 align-top">
            <a :href="`/projects/${job.project}`"
               class="text-accent hover:underline"
               @click.stop
               x-text="job.project"></a>
            <template x-if="job.host">
              <span class="ml-1 text-xs text-foreground-muted"
                    x-text="`@${job.host}`"></span>
            </template>
          </td>
          <td class="py-2 pr-4 align-top" :title="job.task">
            <span class="text-xs leading-relaxed line-clamp-3 break-words"
                  x-text="job.task"></span>
          </td>
          <td class="py-2 pr-2 align-top text-xs text-foreground-muted"
              x-text="job.inbox_id"></td>
          <td class="py-2 pr-2 align-top whitespace-nowrap">
            <span :class="statusBadgeClasses(job.status)"
                  x-text="job.status"></span>
            <template x-if="job.allow_writes">
              <span class="ml-1 text-xs px-1 py-0.5 rounded bg-surface-3 border border-border"
                    title="allow_writes=true">writes</span>
            </template>
          </td>
          <td class="py-2 pr-2 align-top text-right text-xs text-foreground-muted whitespace-nowrap"
              x-text="job.duration_ms !== null ? `${(job.duration_ms / 1000).toFixed(1)}s` : '—'"></td>
          <td class="py-2 align-top text-right text-xs text-foreground-muted whitespace-nowrap"
              x-text="formatAge(job)"></td>
        </tr>
        <template x-if="expanded[job.job_id]">
          <tr class="bg-surface-2 border-b border-border">
            <td colspan="7" class="py-3 px-4">
              <div x-data="{ full: null, loadError: null, busy: true }"
                   x-init="loadFull(job.job_id, $data)">
                <template x-if="busy">
                  <div class="text-xs text-foreground-muted">Loading full payload…</div>
                </template>
                <template x-if="loadError">
                  <div class="text-xs text-error" x-text="`Failed to load: ${loadError}`"></div>
                </template>
                <template x-if="full && !busy">
                  <div class="space-y-2">
                    <div class="text-xs grid grid-cols-2 sm:grid-cols-4 gap-x-4 gap-y-1 text-foreground-muted">
                      <div><strong class="text-foreground">job_id:</strong>
                        <code x-text="full.job_id"></code></div>
                      <div><strong class="text-foreground">cid:</strong>
                        <code x-text="full.cid || '—'"></code></div>
                      <div><strong class="text-foreground">model:</strong>
                        <span x-text="full.model || '(default)'"></span></div>
                      <div><strong class="text-foreground">deliverable:</strong>
                        <span x-text="full.deliverable"></span></div>
                    </div>
                    <template x-if="full.output">
                      <details class="bg-surface-1 rounded border border-border" open>
                        <summary class="cursor-pointer text-xs px-2 py-1 text-foreground-muted">
                          output
                        </summary>
                        <pre class="px-3 py-2 text-xs whitespace-pre-wrap overflow-x-auto"
                             x-text="full.output"></pre>
                      </details>
                    </template>
                    <template x-if="full.error">
                      <details class="bg-error/10 rounded border border-error" open>
                        <summary class="cursor-pointer text-xs px-2 py-1 text-error">
                          error
                        </summary>
                        <pre class="px-3 py-2 text-xs whitespace-pre-wrap overflow-x-auto"
                             x-text="full.error"></pre>
                      </details>
                    </template>
                  </div>
                </template>
              </div>
            </td>
          </tr>
        </template>
      </tbody>
    </template>
  </table>
</section>

<script>
  function jobsBoard() {
    return {
      jobs: [],
      summary: {queued: 0, running: 0, completed_today: 0, failed_today: 0},
      statusFilter: 'all',
      loading: true,
      expanded: {},
      hintsOpen: false,
      _eventSource: null,
      statusOptions: [
        { value: 'all',       label: 'All' },
        { value: 'queued',    label: 'Queued' },
        { value: 'running',   label: 'Running' },
        { value: 'completed', label: 'Completed' },
        { value: 'failed',    label: 'Failed' },
      ],

      connectStream() {
        // v22.2.0: live-update via SSE. Each completion / failure
        // arrives as an `event: event` frame with the full Job dict.
        // Heartbeats are sent on `event: heartbeat` and ignored
        // client-side (the default `message` handler is never wired).
        if (this._eventSource) return;
        try {
          const es = new EventSource('/api/delegated-jobs/stream');
          es.addEventListener('event', (msg) => {
            try {
              this._applyJobUpdate(JSON.parse(msg.data));
            } catch (e) { /* ignore malformed */ }
          });
          this._eventSource = es;
        } catch (e) { /* SSE unsupported — operator can still reload */ }
      },

      disconnectStream() {
        if (this._eventSource) {
          this._eventSource.close();
          this._eventSource = null;
        }
      },

      _applyJobUpdate(job) {
        // Patch the row in place if visible; refresh the summary
        // strip on every event (cheap aggregate, keeps counters in
        // sync with reality).
        const idx = this.jobs.findIndex(j => j.job_id === job.job_id);
        const visible =
          this.statusFilter === 'all' || this.statusFilter === job.status;
        if (idx >= 0) {
          if (visible) {
            this.jobs.splice(idx, 1, job);
          } else {
            this.jobs.splice(idx, 1);
          }
        } else if (visible) {
          this.jobs.unshift(job);
        }
        this.loadSummary();
      },

      async loadJobs() {
        this.loading = true;
        const params = new URLSearchParams({limit: 200});
        if (this.statusFilter !== 'all') params.set('status', this.statusFilter);
        try {
          const r = await fetch(`/api/delegated-jobs?${params}`);
          if (!r.ok) throw new Error(`${r.status}`);
          const j = await r.json();
          this.jobs = j.jobs || [];
        } catch (e) {
          this.jobs = [];
        } finally {
          this.loading = false;
        }
      },

      async loadSummary() {
        try {
          const r = await fetch('/api/delegated-jobs/summary');
          if (r.ok) this.summary = await r.json();
        } catch (e) { /* keep previous values */ }
      },

      toggleExpand(jobId) {
        if (this.expanded[jobId]) {
          delete this.expanded[jobId];
        } else {
          this.expanded[jobId] = true;
        }
      },

      statusBadgeClasses(status) {
        const base = 'inline-block px-2 py-0.5 rounded text-xs font-medium border';
        return {
          queued:    `${base} bg-surface-2 border-border text-foreground-muted`,
          running:   `${base} bg-accent/10 border-accent text-accent`,
          completed: `${base} bg-success/10 border-success text-success`,
          failed:    `${base} bg-error/10 border-error text-error`,
        }[status] || base;
      },

      formatAge(job) {
        const t = job.completed_at || job.started_at || job.queued_at;
        if (!t) return '';
        const secs = Math.floor(Date.now() / 1000 - t);
        if (secs < 60) return `${secs}s ago`;
        if (secs < 3600) return `${Math.floor(secs / 60)}m ago`;
        if (secs < 86400) return `${Math.floor(secs / 3600)}h ago`;
        return `${Math.floor(secs / 86400)}d ago`;
      },
    };
  }

  async function loadFull(jobId, scope) {
    scope.busy = true;
    scope.loadError = null;
    try {
      const r = await fetch(`/api/delegated-jobs/${encodeURIComponent(jobId)}`);
      if (!r.ok) throw new Error(`HTTP ${r.status}`);
      scope.full = await r.json();
    } catch (e) {
      scope.loadError = String(e);
    } finally {
      scope.busy = false;
    }
  }
</script>
{% endblock %}