{% extends "base.html" %}
{% block title %}Fan-out · Harbormaster{% endblock %}
{% block page_title %}Fan-out{% endblock %}
{% block content %}

<nav class="mb-4 text-sm text-foreground-muted">
  <a href="/" class="hover:text-accent">← Dashboard</a>
  <span class="mx-2 text-foreground-subtle">/</span>
  <span class="text-foreground-muted">Fan-out ask</span>
</nav>

<header class="mb-4">
  <h2 class="text-xl font-bold">Fan-out ask</h2>
  <p class="text-sm text-foreground-muted mt-1">
    Ask the same question across multiple projects in parallel.
    Returns one section per target. Powered by
    <code class="text-accent">fan_out_ask</code> (v1.0.0a13+).
  </p>
</header>

<section x-data='fanOutForm({
           projects: {{ project_names | tojson }},
           hosts: {{ host_labels | tojson }},
         })'
         x-init="restoreFromUrl()"
         class="border border-border rounded-md p-2.5 bg-surface-2/40">
  <form @submit.prevent="run()" class="space-y-3">
    <div>
      <label class="text-sm text-foreground-muted font-bold mb-1 block">Question</label>
      <textarea x-model="question" rows="3" required minlength="3"
                :disabled="loading"
                placeholder="e.g. what testing strategy is in use?"
                class="w-full bg-surface-1 border border-border rounded px-3 py-2 text-sm focus:border-accent-strong focus:outline-none resize-y"></textarea>
    </div>
    <div class="flex flex-wrap gap-2 text-xs text-foreground-muted">
      <label class="flex items-center gap-1.5">
        max_concurrency
        <input type="number" min="1" max="10" x-model.number="maxConcurrency"
               class="w-14 bg-surface-1 border border-border rounded px-2 py-1 text-center">
      </label>
      <label class="flex items-center gap-1.5">
        max_turns
        <input type="number" min="1" max="10" x-model.number="maxTurns"
               class="w-14 bg-surface-1 border border-border rounded px-2 py-1 text-center">
      </label>
      <label class="flex items-center gap-1.5">
        host
        <select x-model="host" class="bg-surface-1 border border-border rounded px-2 py-1">
          <template x-for="h in hosts"><option :value="h" x-text="h"></option></template>
        </select>
      </label>
      {# v21.0.0a10: model selection dropdown. Empty = backend default. #}
      <label class="flex items-center gap-1.5" data-fanout-form-model>
        model
        <select x-model="model"
                aria-label="Model selection"
                class="bg-surface-1 border border-border rounded px-2 py-1">
          <option value="">auto</option>
          <option value="haiku">⚡ haiku (fast)</option>
          <option value="sonnet">⚖ sonnet (default)</option>
          <option value="opus">🧠 opus (smart)</option>
        </select>
      </label>
    </div>
    <div>
      <div class="flex items-baseline justify-between mb-1">
        <label class="text-sm text-foreground-muted font-bold">Targets</label>
        <div class="text-xs text-foreground-muted flex gap-2">
          <button type="button" @click="selectAll()"
                  aria-label="Select all projects"
                  class="hover:text-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-surface-1">all</button>
          <button type="button" @click="selectNone()"
                  aria-label="Deselect all projects"
                  class="hover:text-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-surface-1">none</button>
          <span x-text="`${selected.length} of ${projects.length} selected`" aria-live="polite"></span>
        </div>
      </div>
      <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-1 max-h-48 overflow-y-auto border border-border rounded p-2">
        <template x-for="p in projects" :key="p">
          <label class="flex items-center gap-1.5 text-xs hover:bg-surface-3/50 px-1 py-0.5 rounded cursor-pointer">
            <input type="checkbox" :value="p" x-model="selected" class="accent-accent">
            <span class="truncate" x-text="p"></span>
          </label>
        </template>
      </div>
      <!-- v8.0.0a3: canonical 3-part empty state for fan-out no-selection. -->
      <div x-show="selected.length === 0"
           :aria-hidden="selected.length !== 0"
           role="status"
           data-empty-state="fanout.no-selection"
           class="mt-2 border border-border bg-surface-2/40 text-foreground-muted px-3 py-2 rounded text-center">
        <p class="text-xs font-bold text-foreground mb-1">Pick at least one project</p>
        <p class="text-[11px] text-foreground-muted mb-2">
          Click <span class="text-accent">all</span> above to select every visible project,
          or tick individual checkboxes.
        </p>
        <button type="button" @click="selectAll()"
                aria-label="Select all projects"
                class="text-[11px] px-2 py-0.5 rounded border border-accent-strong bg-accent-soft/30 hover:bg-accent-soft/50 text-accent transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-surface-1">
          Select all
        </button>
      </div>
    </div>
    <div class="flex items-center gap-2">
      <button type="submit"
              :disabled="loading || question.trim().length < 3 || selected.length === 0"
              :aria-busy="loading"
              class="bg-accent-strong hover:bg-accent disabled:bg-surface-3 disabled:text-foreground-muted text-white font-bold px-3 py-2 rounded transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-surface-1">
        <span x-show="!loading">Run fan-out</span>
        <span x-show="loading" aria-hidden="true">…</span>
      </button>
      <button type="button" x-show="loading" @click="abort()"
              aria-label="Stop fan-out"
              :aria-hidden="!loading"
              class="text-warning hover:text-warning underline text-xs focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-surface-1">stop</button>
      <!-- v4.0.0a2: copy share link. Persists URL first, then copies. -->
      <button type="button" @click="copyShareLink()"
              :disabled="question.trim().length < 3"
              aria-label="Copy shareable link to this fan-out configuration"
              class="text-xs px-2 py-1 rounded border border-border hover:border-accent-strong disabled:border-border-strong disabled:text-foreground-subtle transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-surface-1">
        <span x-show="!shareLinkCopied">copy link</span>
        <span x-show="shareLinkCopied" class="text-success">copied ✓</span>
      </button>
      <span class="text-xs text-foreground-muted ml-auto" x-show="hasResult"
            x-text="`${(elapsedMs/1000).toFixed(1)}s`"></span>
    </div>
  </form>
  <div x-show="error" :aria-hidden="!error" role="alert" aria-live="assertive" class="mt-2 text-xs text-danger" x-text="error"></div>
  <pre x-show="resultText"
       :aria-hidden="!resultText"
       aria-live="polite"
       aria-atomic="false"
       aria-label="Fan-out result"
       class="mt-4 text-sm whitespace-pre-wrap break-words border border-border rounded p-2 bg-surface-1/50 text-foreground leading-relaxed"
       x-text="resultText"></pre>
</section>

<script>
  function fanOutForm(initial) {
    return {
      projects: initial.projects, hosts: initial.hosts,
      selected: [], question: '', maxConcurrency: 5, maxTurns: 3,
      host: 'local',
      // v21.0.0a10: operator-selected model. '' = backend default.
      model: '',
      resultText: '', error: '', loading: false, hasResult: false, elapsedMs: 0,
      shareLinkCopied: false,
      _abortController: null,

      selectAll() { this.selected = [...this.projects]; this.persistToUrl(); },
      selectNone() { this.selected = []; this.persistToUrl(); },

      // v3.0.0a9: URL state encoding so an operator can copy/share a
      // pre-filled fan-out form. Read on mount; write on submit + on
      // selectAll/None. Avoids per-keystroke history pollution.
      restoreFromUrl() {
        const p = new URLSearchParams(window.location.search);
        const q = p.get('q'); if (q) this.question = q;
        const h = p.get('host'); if (h && this.hosts.includes(h)) this.host = h;
        const c = parseInt(p.get('concurrency') || '', 10);
        if (!isNaN(c) && c >= 1 && c <= 10) this.maxConcurrency = c;
        const t = parseInt(p.get('turns') || '', 10);
        if (!isNaN(t) && t >= 1 && t <= 10) this.maxTurns = t;
        // v21.0.0a10: optional ?model= prefill for shared links.
        const m = p.get('model'); if (m) this.model = m;
        const sel = p.get('targets');
        if (sel) {
          const want = new Set(sel.split(','));
          this.selected = this.projects.filter(x => want.has(x));
        }
      },

      persistToUrl() {
        const p = new URLSearchParams();
        if (this.question.trim()) p.set('q', this.question.trim());
        if (this.host && this.host !== 'local') p.set('host', this.host);
        if (this.maxConcurrency !== 5) p.set('concurrency', String(this.maxConcurrency));
        if (this.maxTurns !== 3) p.set('turns', String(this.maxTurns));
        if (this.model) p.set('model', this.model);
        if (this.selected.length > 0 && this.selected.length !== this.projects.length) {
          p.set('targets', this.selected.join(','));
        }
        const qs = p.toString();
        const url = qs ? `${window.location.pathname}?${qs}` : window.location.pathname;
        window.history.replaceState(null, '', url);
      },

      async run() {
        if (this.question.trim().length < 3 || this.selected.length === 0) return;
        this.persistToUrl();
        this.resultText = ''; this.error = ''; this.hasResult = false;
        this.loading = true; this.elapsedMs = 0;
        const t0 = performance.now();
        const controller = new AbortController();
        this._abortController = controller;
        try {
          const args = {
            question: this.question,
            project_filter: this.selected.join(','),
            max_concurrency: this.maxConcurrency,
            max_turns: this.maxTurns,
          };
          if (this.host && this.host !== 'local') args.host_filter = this.host;
          // v21.0.0a10: only forward non-empty model selection.
          if (this.model) args.model = this.model;
          const r = await hmFetch('/mcp/harbormaster', {
            method: 'POST', signal: controller.signal,
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
              method: 'tools/call',
              params: { name: 'fan_out_ask', arguments: args },
            }),
          });
          if (!r.ok) throw new Error('HTTP ' + r.status);
          const body = await r.json();
          // fan_out_ask returns aggregated text in result.content[0].text
          const text = body?.result?.content?.[0]?.text;
          this.resultText = text || JSON.stringify(body, null, 2);
          this.hasResult = true;
        } catch (e) {
          if (e.name !== 'AbortError') this.error = e.message;
        } finally {
          this.loading = false;
          this.elapsedMs = performance.now() - t0;
          this._abortController = null;
        }
      },

      abort() { if (this._abortController) this._abortController.abort(); },

      // v4.0.0a2: copy a shareable link to the operator's clipboard.
      // Persists the current form state to URL first, then copies.
      // Falls back to a console message if clipboard API is unavailable
      // (older browsers, file:// origins).
      async copyShareLink() {
        this.persistToUrl();
        const url = window.location.href;
        try {
          if (navigator.clipboard && navigator.clipboard.writeText) {
            await navigator.clipboard.writeText(url);
          } else {
            console.warn('clipboard API unavailable; URL: ' + url);
          }
          this.shareLinkCopied = true;
          setTimeout(() => { this.shareLinkCopied = false; }, 2000);
        } catch (e) {
          console.warn('copy failed: ' + e.message);
        }
      },
    };
  }
</script>

{% endblock %}

{# v19.0.0a3: fan-out inspector — minimal contextual help. The main
   column is dominated by the form itself; the inspector reminds the
   operator what fan-out does and links to related tools. #}
{% block inspector %}
<div class="p-2 text-xs" data-tour-step="inspector-content">
  <h3 class="text-xs uppercase tracking-wide text-foreground-subtle mb-2">About fan-out</h3>
  <p class="text-foreground-muted mb-2">
    Asks the same question across multiple projects in parallel. Each
    target replies independently; results stream in as they finish.
  </p>
  <h3 class="text-xs uppercase tracking-wide text-foreground-subtle mb-2 border-t border-border pt-3">Related</h3>
  <ul class="space-y-1">
    <li>
      <a href="/dispatcher" class="text-accent hover:underline">→ Dispatcher trace</a>
      <p class="text-foreground-subtle text-[10px]">watch spans as they fire</p>
    </li>
    <li>
      <a href="/network" class="text-accent hover:underline">→ Network view</a>
      <p class="text-foreground-subtle text-[10px]">see the cross-project call graph</p>
    </li>
  </ul>
</div>
{% endblock %}