{# v3.0.0a7: askForm() Alpine component extracted into its own partial
   so multiple pages (dashboard cards + project detail) share one
   implementation. Include this once per page that uses askForm().
#}
<script>
  function askForm(initial) {
    return {
      project: initial.project,
      host: initial.host,
      question: '', maxTurns: 5,
      streamText: '', chunks: 0, error: '',
      usage: null, // v9.0.0a5: typed `usage` event payload
      loading: false, hasResult: false, elapsedMs: 0,
      _abortController: null,

      // v11.0.0a4: `?q=<question>` URL pre-fill. Lets operators share
      // project URLs with a question pre-loaded — the cmd-K palette's
      // `Ask <project> <question>` action already builds these URLs;
      // this closes the loop on the receiving end.
      init() {
        try {
          const url = new URL(window.location.href);
          const q = url.searchParams.get('q');
          if (q) this.question = q;
        } catch (_) { /* SSR / non-browser context */ }
      },

      async ask() {
        if (this.question.trim().length < 3) return;
        this.streamText = ''; this.chunks = 0; this.error = '';
        this.usage = null;
        this.hasResult = false; this.loading = true;
        this.elapsedMs = 0;
        const t0 = performance.now();
        const controller = new AbortController();
        this._abortController = controller;
        try {
          const args = { name: this.project, question: this.question, max_turns: this.maxTurns };
          if (this.host && this.host !== 'local') args.host = this.host;
          const r = await hmFetch('/mcp/harbormaster', {
            method: 'POST',
            signal: controller.signal,
            headers: {
              'Content-Type': 'application/json',
              'Accept': 'text/event-stream',
            },
            body: JSON.stringify({
              method: 'tools/call',
              params: { name: 'ask_project', arguments: args },
            }),
          });
          if (!r.ok) throw new Error('HTTP ' + r.status);
          await this._consumeSseStream(r);
          this.hasResult = true;
          // v4.0.0a4: optimistic trajectory insert — dispatch a synthetic
          // Q&A entry so the trajectory section can prepend it
          // instantly, no /api/trajectories round-trip required.
          window.dispatchEvent(new CustomEvent('hm:trajectory:append', {
            detail: {
              project: this.project,
              host: this.host || 'local',
              entry: {
                // Synthetic id — server-assigned id appears on next reload
                // and the dirty event triggers reconciliation then.
                id: 'optimistic-' + Date.now(),
                project: this.project,
                host: this.host || 'local',
                tool: 'ask_project',
                question: this.question,
                answer: this.streamText,
                timestamp_s: Date.now() / 1000,
                _optimistic: true,
              },
            },
          }));
          // v3.0.0a8: dirty event still fires for background reconciliation —
          // server is source of truth on the next /api/trajectories load.
          window.dispatchEvent(new CustomEvent('hm:trajectory:dirty', {
            detail: { project: this.project, host: this.host || 'local' },
          }));
        } 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();
      },

      async _consumeSseStream(response) {
        const reader = response.body.getReader();
        const decoder = new TextDecoder();
        let buffer = '';
        // v10.0.0a2: legacy `chunk` event removed server-side. Only
        // typed `token` events are emitted per text delta. The
        // double-emit migration helper from v9.0.0a5 is gone.
        for (;;) {
          const { done, value } = await reader.read();
          if (done) break;
          buffer += decoder.decode(value, { stream: true });
          const events = buffer.split('\n\n');
          buffer = events.pop() || '';
          for (const block of events) {
            const ev = this._parseEvent(block);
            if (ev.event === 'token') {
              try {
                const parsed = JSON.parse(ev.data);
                this.streamText += (parsed.delta ?? '');
                this.chunks += 1;
              } catch (_) { /* drop malformed token */ }
            } else if (ev.event === 'tool') {
              // v9.0.0a5: tool-call notice. Render inline as a faint
              // badge so operators see when the model invoked a tool.
              try {
                const parsed = JSON.parse(ev.data);
                const phase = parsed.phase || 'start';
                const name = parsed.tool_name || 'tool';
                this.streamText += `\n[tool ${phase}: ${name}]\n`;
              } catch (_) { /* drop malformed tool event */ }
            } else if (ev.event === 'usage') {
              // v9.0.0a5: usage stats arrive just before `result`.
              // Surface the chunk count for the operator if no real
              // token counter is available yet.
              try {
                const parsed = JSON.parse(ev.data);
                if (parsed.output_chunks !== undefined) {
                  this.usage = parsed;
                }
              } catch (_) { /* ignore */ }
            } else if (ev.event === 'result') {
              try {
                const parsed = JSON.parse(ev.data);
                if (parsed.content && parsed.content[0] && parsed.content[0].text) {
                  // If we never received chunks, render the final result.
                  if (!this.chunks) this.streamText = parsed.content[0].text;
                }
              } catch (_) { /* drop malformed result */ }
            } else if (ev.event === 'error') {
              try {
                const parsed = JSON.parse(ev.data);
                this.error = parsed.detail || parsed.message || ev.data;
              } catch (_) { this.error = ev.data; }
            } else if (ev.event === 'heartbeat') {
              // No-op; just keeps the connection alive.
            }
          }
        }
      },

      _parseEvent(block) {
        let event = 'message';
        const dataParts = [];
        for (const line of block.split('\n')) {
          if (line.startsWith('event:')) event = line.slice(6).trim();
          else if (line.startsWith('data:')) dataParts.push(line.slice(5).trimStart());
        }
        return { event, data: dataParts.join('\n') };
      },
    };
  }
</script>