{% extends "base.html" %}
{% block title %}q-ai — Launcher{% endblock %}

{# ---- Reusable macro for target name field with collision check ---- #}
{% macro target_name_field(wf_id, placeholder="my-mcp-server") %}
<div class="form-control">
    <label class="label"><span class="label-text">Target name</span></label>
    <input type="text" name="target_name" required
           placeholder="{{ placeholder }}"
           class="input input-bordered input-sm w-full"
           oninput="checkTargetName(this, '{{ wf_id }}')" />
    <div id="target-warn-{{ wf_id }}" class="text-xs mt-1 hidden" style="color: #fbbf24;">
        A target with this name already exists. A new run will be created.
        <button type="button" class="ml-2 underline" style="color: #06b6d4;"
                onclick="autoSuffixTarget('{{ wf_id }}')">Add suffix</button>
    </div>
</div>
{% endmacro %}

{# ---- Reusable macro for transport + command/url fields ---- #}
{% macro transport_fields(wf_id) %}
<div class="form-control">
    <label class="label"><span class="label-text">Transport</span></label>
    <div class="flex gap-4">
        <label class="label cursor-pointer gap-2">
            <input type="radio" name="transport" value="stdio"
                   class="radio radio-sm radio-primary"
                   {% if defaults.audit_default_transport == 'stdio' %}checked{% endif %}
                   onchange="toggleTransport('{{ wf_id }}')" />
            <span class="label-text">stdio</span>
        </label>
        <label class="label cursor-pointer gap-2">
            <input type="radio" name="transport" value="sse"
                   class="radio radio-sm radio-primary"
                   {% if defaults.audit_default_transport == 'sse' %}checked{% endif %}
                   onchange="toggleTransport('{{ wf_id }}')" />
            <span class="label-text">sse</span>
        </label>
        <label class="label cursor-pointer gap-2">
            <input type="radio" name="transport" value="streamable-http"
                   class="radio radio-sm radio-primary"
                   {% if defaults.audit_default_transport == 'streamable-http' %}checked{% endif %}
                   onchange="toggleTransport('{{ wf_id }}')" />
            <span class="label-text">streamable-http</span>
        </label>
    </div>
</div>

<div id="cmd-{{ wf_id }}" class="form-control {% if defaults.audit_default_transport != 'stdio' %}hidden{% endif %}">
    <label class="label"><span class="label-text">Command</span></label>
    <input type="text" name="command"
           placeholder="npx @modelcontextprotocol/server-everything"
           class="input input-bordered input-sm w-full" />
</div>

<div id="url-{{ wf_id }}" class="form-control {% if defaults.audit_default_transport == 'stdio' %}hidden{% endif %}">
    <label class="label"><span class="label-text">URL</span></label>
    <input type="text" name="url"
           placeholder="{% if defaults.audit_default_transport == 'streamable-http' %}http://localhost:3000/mcp{% else %}http://localhost:3000/sse{% endif %}"
           class="input input-bordered input-sm w-full" />
</div>
{% endmacro %}

{# ---- Reusable macro for CLI preview block ---- #}
{% macro cli_preview(wf_id) %}
<div class="cli-preview-block" id="cli-preview-{{ wf_id }}">
    <span class="cli-preview-label">Equivalent CLI</span>
    <div class="cli-preview-code-wrap">
        <pre><code id="cli-preview-code-{{ wf_id }}"></code></pre>
        <button type="button" class="cli-preview-copy"
                id="cli-copy-btn-{{ wf_id }}"
                aria-label="Copy to clipboard"
                onclick="copyCliPreview('{{ wf_id }}')" title="Copy to clipboard">
            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
                 fill="none" stroke="currentColor" stroke-width="2"
                 stroke-linecap="round" stroke-linejoin="round">
                <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
                <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
            </svg>
        </button>
    </div>
    <span class="cli-preview-note">implicit defaults omitted</span>
</div>
{% endmacro %}

{# ---- Workflow color config — unified violet for all rows ---- #}
{% set wf_color_default = {'color': '#a78bfa', 'border': 'rgba(139,92,246,0.35)', 'bg': 'rgba(139,92,246,0.06)'} %}

{% block content %}

<div class="max-w-5xl mx-auto px-6 pt-12 lg:pt-16 pb-6 lg:pb-8">

    {# ---- Accordion Panel ---- #}
    <div class="wf-panel">
        {# Build a unified list: hero first, then the rest #}
        {% set all_workflows = [] %}
        {% if hero_workflow %}
            {% set _ = all_workflows.append(hero_workflow) %}
        {% endif %}
        {% for wf in workflows %}
            {% set _ = all_workflows.append(wf) %}
        {% endfor %}

        {% for wf in all_workflows %}
        {% set colors = wf_color_default %}

        {# Connector between rows #}
        {% if not loop.first %}
        <div class="wf-connector"></div>
        {% endif %}

        <div class="wf-row{% if not wf.implemented %} wf-unimplemented{% endif %}"
             id="wf-row-{{ wf.id }}"
             style="--wf-bg: {{ colors.bg }}; --wf-border: {{ colors.border }}; --wf-color: {{ colors.color }};">

            {# ---- Row header ---- #}
            <div class="wf-row-header"
                 {% if wf.implemented %}
                 onclick="toggleAccordion('{{ wf.id }}')"
                 onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleAccordion('{{ wf.id }}');}"
                 role="button" tabindex="0" aria-label="Toggle {{ wf.name }}"
                 {% else %}
                 aria-disabled="true"
                 {% endif %}>
                <div class="wf-row-top">
                    <div class="wf-row-left">
                        <div class="wf-row-bar" style="background: {{ colors.color }};"></div>
                        <span class="wf-row-name" style="color: {{ colors.color }};">{{ wf.name }}</span>
                    </div>
                    {% if wf.implemented %}
                    <span class="wf-row-chevron">&#9654;</span>
                    {% endif %}
                </div>
                <div class="wf-row-modules">
                    {% for mod in wf.modules %}
                    <span class="wf-module-pill-sm">{{ mod }}</span>
                    {% endfor %}
                </div>
            </div>

            {# ---- Row body (expanded content) ---- #}
            {% if wf.implemented %}
            <div class="wf-row-body">
                <p class="wf-row-desc">{{ wf.description }}</p>
                <div class="wf-row-pills">
                    {% for mod in wf.modules %}
                    <span class="wf-module-pill">{{ mod }}</span>
                    {% endfor %}
                </div>

                {# ---- Provider warning ---- #}
                {% if wf.requires_provider and providers|length == 0 %}
                <div style="background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.35); border-radius: 0.5rem; padding: 0.75rem 1rem; color: #fbbf24;">
                    <p class="text-sm">This workflow requires an LLM provider.</p>
                    <a href="/settings#providers" style="color: #06b6d4;" class="text-sm">Configure one now</a>
                </div>

                {% elif not wf.requires_provider or providers|length > 0 %}
                {# ---- Inline launch form ---- #}
                <div class="wf-row-form">
                <form id="form-{{ wf.id }}" class="space-y-4" onsubmit="return launchWorkflow(event, '{{ wf.id }}')">
                    <input type="hidden" name="workflow_id" value="{{ wf.id }}" />

                    {% if wf.id == 'assess' %}
                    {# ---- ASSESS FORM ---- #}
                    {{ target_name_field(wf.id, "my-mcp-server") }}
                    {{ transport_fields(wf.id) }}
                    {% set selector_id = "assess" %}
                    {% include "partials/model_selector.html" %}

                    <div class="form-control">
                        <label class="label"><span class="label-text">Rounds</span></label>
                        <input type="number" name="rounds" value="1" min="1" max="10"
                               class="input input-bordered input-sm w-24" />
                    </div>

                    {# ---- Inject: Technique Checkboxes ---- #}
                    <fieldset class="border border-base-300/30 rounded-lg p-3 mt-2">
                        <legend class="text-xs font-semibold text-base-content/60 px-1">Inject Techniques</legend>
                        <div id="technique-checks-assess" class="flex flex-wrap gap-3">
                            {% for tech in injection_techniques %}
                            <label class="label cursor-pointer gap-2">
                                <input type="checkbox" name="techniques" value="{{ tech.value }}"
                                       class="checkbox checkbox-xs checkbox-primary" checked
                                       onchange="onTechniqueChange('assess')" />
                                <span class="label-text text-xs">{{ tech.label }}</span>
                            </label>
                            {% endfor %}
                        </div>
                    </fieldset>

                    {# ---- Inject: Advanced Payload Library ---- #}
                    <div class="mt-2">
                        <span class="text-xs cursor-pointer select-none"
                              style="color: #a78bfa;"
                              onclick="togglePayloadLibrary('assess')"
                              id="payload-lib-toggle-assess">
                            Advanced: Payload Library <span class="mit-arrow" style="color: #fff;">&#x25BC;</span>
                        </span>
                        <div id="payload-library-assess" class="hidden mt-2">
                            <div class="text-xs text-base-content/40 mb-2">
                                Select individual payloads to override technique filtering.
                            </div>
                            <div id="payload-lib-content-assess" class="max-h-60 overflow-y-auto">
                                <p class="text-xs text-base-content/40">Loading...</p>
                            </div>
                        </div>
                    </div>

                    {# ---- Audit: Category Checkboxes ---- #}
                    <fieldset class="border border-base-300/30 rounded-lg p-3 mt-2">
                        <legend class="text-xs font-semibold text-base-content/60 px-1">Audit Categories</legend>
                        <div class="flex gap-3 mb-2">
                            <span class="text-xs cursor-pointer select-none" style="color: #a78bfa;"
                                  onclick="toggleAllChecks('checks', 'assess', true)">Select All</span>
                            <span class="text-xs cursor-pointer select-none" style="color: #a78bfa;"
                                  onclick="toggleAllChecks('checks', 'assess', false)">Clear All</span>
                        </div>
                        <div class="grid grid-cols-2 md:grid-cols-3 gap-2">
                            {% for cat in scanner_categories %}
                            <label class="label cursor-pointer gap-2">
                                <input type="checkbox" name="checks" value="{{ cat }}"
                                       class="checkbox checkbox-xs checkbox-primary" checked />
                                <span class="label-text text-xs">{{ cat }}</span>
                            </label>
                            {% endfor %}
                        </div>
                    </fieldset>

                    {% elif wf.id == 'test_docs' %}
                    {# ---- TEST DOCS FORM ---- #}
                    {{ target_name_field(wf.id, "doc-pipeline") }}

                    <div class="form-control">
                        <label class="label"><span class="label-text">Callback URL</span></label>
                        <input type="text" name="callback_url" required
                               value="{{ defaults.ipi_callback_url }}"
                               placeholder="http://your-ip:8080/callback"
                               class="input input-bordered input-sm w-full" />
                        <label class="label"><span class="label-text-alt text-base-content/40">Your IP address where <code>qai ipi listen</code> is running. Must be reachable by the target system. The payload phones home here when executed.</span></label>
                    </div>

                    <div class="form-control">
                        <label class="label"><span class="label-text">Format</span></label>
                        <select name="format" class="select select-bordered select-sm w-full">
                            <option value="pdf">pdf</option>
                            <option value="markdown">markdown</option>
                            <option value="html">html</option>
                            <option value="docx">docx</option>
                            <option value="ics">ics</option>
                            <option value="eml">eml</option>
                        </select>
                    </div>

                    <div class="form-control">
                        <label class="label"><span class="label-text">Payload style</span></label>
                        <select name="payload_style" class="select select-bordered select-sm w-full">
                            <option value="obvious">obvious</option>
                            <option value="subtle">subtle</option>
                            <option value="invisible">invisible</option>
                        </select>
                    </div>

                    <div class="form-control">
                        <label class="label"><span class="label-text">Payload type</span></label>
                        <select name="payload_type" class="select select-bordered select-sm w-full">
                            <option value="callback">callback</option>
                            <option value="exfil">exfil</option>
                        </select>
                    </div>

                    <div class="form-control">
                        <label class="label cursor-pointer">
                            <span class="label-text">Pre-validate retrieval rank with RXP</span>
                            <input type="checkbox" name="rxp_enabled" value="true"
                                   class="toggle toggle-sm"
                                   onchange="toggleRxpSection('{{ wf.id }}')" />
                        </label>
                    </div>

                    <div id="rxp-section-{{ wf.id }}" class="space-y-4 hidden">
                        <div class="form-control">
                            <label class="label"><span class="label-text">Embedding model</span></label>
                            <input type="text" name="rxp_model_id"
                                   placeholder="all-MiniLM-L6-v2"
                                   class="input input-bordered input-sm w-full" />
                        </div>
                        <div class="form-control">
                            <label class="label"><span class="label-text">Profile</span></label>
                            <input type="text" name="rxp_profile_id"
                                   placeholder="leave blank for custom"
                                   class="input input-bordered input-sm w-full" />
                        </div>
                    </div>

                    {% elif wf.id == 'test_assistant' %}
                    {# ---- TEST ASSISTANT FORM ---- #}
                    {{ target_name_field(wf.id, "coding-assistant") }}

                    <div class="form-control">
                        <label class="label"><span class="label-text">Format</span></label>
                        <select name="format_id" class="select select-bordered select-sm w-full">
                            {% for fmt in cxp_formats %}
                            <option value="{{ fmt.id }}">{{ fmt.assistant }} ({{ fmt.filename }})</option>
                            {% endfor %}
                        </select>
                    </div>

                    <div class="form-control">
                        <label class="label"><span class="label-text">Repo name (optional)</span></label>
                        <input type="text" name="repo_name"
                               placeholder="cxp-python"
                               class="input input-bordered input-sm w-full" />
                    </div>

                    {% elif wf.id == 'trace_path' %}
                    {# ---- TRACE PATH FORM ---- #}
                    {{ target_name_field(wf.id, "target-server") }}

                    <div class="form-control">
                        <label class="label"><span class="label-text">Chain template</span></label>
                        <select name="chain_template_id" class="select select-bordered select-sm w-full">
                            <option value="">Select a template...</option>
                        </select>
                    </div>

                    {{ transport_fields(wf.id) }}
                    {% set selector_id = "trace_path" %}
                    {% include "partials/model_selector.html" %}

                    {% elif wf.id == 'blast_radius' %}
                    {# ---- BLAST RADIUS FORM ---- #}
                    <div class="form-control">
                        <label class="label"><span class="label-text">Chain execution</span></label>
                        <select name="chain_execution_id" class="select select-bordered select-sm w-full">
                            <option value="">Select an execution...</option>
                        </select>
                    </div>
                    <div id="blast-radius-gate-{{ wf.id }}" style="background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.35); border-radius: 0.5rem; padding: 0.75rem 1rem; color: #fbbf24; display: none;" class="text-sm">
                        <span>No successful chain executions found. Run Trace an Attack Path first.</span>
                    </div>

                    {% endif %}

                    {% if wf.id == 'assess' %}
                    {# ---- Enumerate First ---- #}
                    <div class="flex items-center gap-3 mt-2">
                        <button type="button" class="btn btn-xs btn-outline"
                                style="border-color: #a78bfa; color: #a78bfa;"
                                onclick="enumerateFirst('assess')">
                            Enumerate first
                        </button>
                        <span id="enumerate-first-status-assess" class="text-xs text-base-content/40"></span>
                    </div>
                    <div id="enumerate-first-results-assess" class="hidden mt-2 p-3 bg-base-300/20 rounded-lg text-sm space-y-2 max-h-60 overflow-y-auto">
                    </div>
                    {% endif %}

                    {{ cli_preview(wf.id) }}

                    <div id="error-{{ wf.id }}" class="text-error text-sm hidden"></div>

                    <div class="mt-4">
                        <button type="submit" class="btn btn-sm btn-launch">{{ 'Generate' if wf.id == 'test_assistant' else 'Launch' }}</button>
                    </div>
                </form>
                </div>
                {% endif %}
            </div>
            {% endif %}
        </div>
        {% endfor %}

        {# ---- Quick Action accordion rows ---- #}

        <div class="wf-connector"></div>
        <div class="wf-row" id="wf-row-qa_scan"
             style="--wf-bg: {{ wf_color_default.bg }}; --wf-border: {{ wf_color_default.border }}; --wf-color: {{ wf_color_default.color }};">
            <div class="wf-row-header"
                 onclick="toggleAccordion('qa_scan')"
                 onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleAccordion('qa_scan');}"
                 role="button" tabindex="0" aria-label="Toggle Quick Scan">
                <div class="wf-row-top">
                    <div class="wf-row-left">
                        <div class="wf-row-bar" style="background: {{ wf_color_default.color }};"></div>
                        <span class="wf-row-name" style="color: {{ wf_color_default.color }};">Quick Audit Run</span>
                    </div>
                    <span class="wf-row-chevron">&#9654;</span>
                </div>
                <div class="wf-row-modules">
                    <span class="wf-module-pill-sm">audit</span>
                </div>
            </div>
            <div class="wf-row-body">
                <p class="wf-row-desc">Scan an MCP server for vulnerabilities without proxy or injection modules.</p>
                <div class="wf-row-pills">
                    <span class="wf-module-pill">audit</span>
                </div>
                <div class="wf-row-form">
                <form id="form-qa_scan" class="space-y-4" onsubmit="return launchQuickAction(event, 'qa_scan')">
                    <input type="hidden" name="action" value="scan" />
                    {{ target_name_field('qa_scan', "my-mcp-server") }}
                    {{ transport_fields('qa_scan') }}

                    {# ---- Audit: Category Checkboxes ---- #}
                    <fieldset class="border border-base-300/30 rounded-lg p-3 mt-2">
                        <legend class="text-xs font-semibold text-base-content/60 px-1">Categories</legend>
                        <div class="flex gap-3 mb-2">
                            <span class="text-xs cursor-pointer select-none" style="color: #a78bfa;"
                                  onclick="toggleAllChecks('checks', 'qa_scan', true)">Select All</span>
                            <span class="text-xs cursor-pointer select-none" style="color: #a78bfa;"
                                  onclick="toggleAllChecks('checks', 'qa_scan', false)">Clear All</span>
                        </div>
                        <div class="grid grid-cols-2 md:grid-cols-3 gap-2">
                            {% for cat in scanner_categories %}
                            <label class="label cursor-pointer gap-2">
                                <input type="checkbox" name="checks" value="{{ cat }}"
                                       class="checkbox checkbox-xs checkbox-primary" checked />
                                <span class="label-text text-xs">{{ cat }}</span>
                            </label>
                            {% endfor %}
                        </div>
                    </fieldset>

                    {{ cli_preview('qa_scan') }}
                    <div id="error-qa_scan" class="text-error text-sm hidden"></div>
                    <div class="mt-4">
                        <button type="submit" class="btn btn-sm btn-launch">Scan</button>
                    </div>
                </form>
                </div>
            </div>
        </div>

        <div class="wf-connector"></div>
        <div class="wf-row" id="wf-row-qa_intercept"
             style="--wf-bg: {{ wf_color_default.bg }}; --wf-border: {{ wf_color_default.border }}; --wf-color: {{ wf_color_default.color }};">
            <div class="wf-row-header"
                 onclick="toggleAccordion('qa_intercept')"
                 onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleAccordion('qa_intercept');}"
                 role="button" tabindex="0" aria-label="Toggle Quick Intercept">
                <div class="wf-row-top">
                    <div class="wf-row-left">
                        <div class="wf-row-bar" style="background: {{ wf_color_default.color }};"></div>
                        <span class="wf-row-name" style="color: {{ wf_color_default.color }};">Quick Proxy Run</span>
                    </div>
                    <span class="wf-row-chevron">&#9654;</span>
                </div>
                <div class="wf-row-modules">
                    <span class="wf-module-pill-sm">proxy</span>
                </div>
            </div>
            <div class="wf-row-body">
                <p class="wf-row-desc">Intercept MCP traffic without audit scanning or injection modules.</p>
                <div class="wf-row-pills">
                    <span class="wf-module-pill">proxy</span>
                </div>
                <div class="wf-row-form">
                <form id="form-qa_intercept" class="space-y-4" onsubmit="return launchQuickAction(event, 'qa_intercept')">
                    <input type="hidden" name="action" value="intercept" />
                    {{ target_name_field('qa_intercept', "my-mcp-server") }}
                    {{ transport_fields('qa_intercept') }}
                    {{ cli_preview('qa_intercept') }}
                    <div id="error-qa_intercept" class="text-error text-sm hidden"></div>
                    <div class="mt-4">
                        <button type="submit" class="btn btn-sm btn-launch">Intercept</button>
                    </div>
                </form>
                </div>
            </div>
        </div>

        <div class="wf-connector"></div>
        <div class="wf-row" id="wf-row-qa_campaign"
             style="--wf-bg: {{ wf_color_default.bg }}; --wf-border: {{ wf_color_default.border }}; --wf-color: {{ wf_color_default.color }};">
            <div class="wf-row-header"
                 onclick="toggleAccordion('qa_campaign')"
                 onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleAccordion('qa_campaign');}"
                 role="button" tabindex="0" aria-label="Toggle Quick Campaign">
                <div class="wf-row-top">
                    <div class="wf-row-left">
                        <div class="wf-row-bar" style="background: {{ wf_color_default.color }};"></div>
                        <span class="wf-row-name" style="color: {{ wf_color_default.color }};">Quick Inject Run</span>
                    </div>
                    <span class="wf-row-chevron">&#9654;</span>
                </div>
                <div class="wf-row-modules">
                    <span class="wf-module-pill-sm">inject</span>
                </div>
            </div>
            <div class="wf-row-body">
                <p class="wf-row-desc">Run tool-poisoning injection against an MCP server without audit or proxy.</p>
                <div class="wf-row-pills">
                    <span class="wf-module-pill">inject</span>
                </div>
                {% if providers|length == 0 %}
                <div style="background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.35); border-radius: 0.5rem; padding: 0.75rem 1rem; color: #fbbf24;">
                    <p class="text-sm">Campaigns require an LLM provider.</p>
                    <a href="/settings#providers" style="color: #06b6d4;" class="text-sm">Configure one now</a>
                </div>
                {% else %}
                <div class="wf-row-form">
                <form id="form-qa_campaign" class="space-y-4" onsubmit="return launchQuickAction(event, 'qa_campaign')">
                    <input type="hidden" name="action" value="campaign" />
                    {{ target_name_field('qa_campaign', "my-mcp-server") }}
                    {{ transport_fields('qa_campaign') }}
                    {% set selector_id = "campaign" %}
                    {% include "partials/model_selector.html" %}
                    <div class="form-control">
                        <label class="label"><span class="label-text">Rounds</span></label>
                        <input type="number" name="rounds" value="1" min="1" max="10"
                               class="input input-bordered input-sm w-24" />
                    </div>

                    {# ---- Inject: Technique Checkboxes ---- #}
                    <fieldset class="border border-base-300/30 rounded-lg p-3 mt-2">
                        <legend class="text-xs font-semibold text-base-content/60 px-1">Techniques</legend>
                        <div id="technique-checks-qa_campaign" class="flex flex-wrap gap-3">
                            {% for tech in injection_techniques %}
                            <label class="label cursor-pointer gap-2">
                                <input type="checkbox" name="techniques" value="{{ tech.value }}"
                                       class="checkbox checkbox-xs checkbox-primary" checked />
                                <span class="label-text text-xs">{{ tech.label }}</span>
                            </label>
                            {% endfor %}
                        </div>
                    </fieldset>

                    {{ cli_preview('qa_campaign') }}
                    <div id="error-qa_campaign" class="text-error text-sm hidden"></div>
                    <div class="mt-4">
                        <button type="submit" class="btn btn-sm btn-launch">Launch</button>
                    </div>
                </form>
                </div>
                {% endif %}
            </div>
        </div>

        <div class="wf-connector"></div>
        <div class="wf-row" id="wf-row-qa_enumerate"
             style="--wf-bg: {{ wf_color_default.bg }}; --wf-border: {{ wf_color_default.border }}; --wf-color: {{ wf_color_default.color }};">
            <div class="wf-row-header"
                 onclick="toggleAccordion('qa_enumerate')"
                 onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleAccordion('qa_enumerate');}"
                 role="button" tabindex="0" aria-label="Toggle Enumerate Server">
                <div class="wf-row-top">
                    <div class="wf-row-left">
                        <div class="wf-row-bar" style="background: {{ wf_color_default.color }};"></div>
                        <span class="wf-row-name" style="color: {{ wf_color_default.color }};">Enumerate Server</span>
                    </div>
                    <span class="wf-row-chevron">&#9654;</span>
                </div>
                <div class="wf-row-modules">
                    <span class="wf-module-pill-sm">audit</span>
                </div>
            </div>
            <div class="wf-row-body">
                <p class="wf-row-desc">Connect and list server capabilities (tools, resources, prompts) without scanning.</p>
                <div class="wf-row-pills">
                    <span class="wf-module-pill">audit</span>
                </div>
                <div class="wf-row-form">
                <form id="form-qa_enumerate" class="space-y-4" onsubmit="return launchEnumerate(event)">
                    {{ transport_fields('qa_enumerate') }}
                    {{ cli_preview('qa_enumerate') }}
                    <div id="error-qa_enumerate" class="text-error text-sm hidden"></div>
                    <div class="mt-4">
                        <button type="submit" class="btn btn-sm btn-launch">Enumerate</button>
                    </div>
                </form>
                <div id="enumerate-results" class="hidden mt-4 p-3 bg-base-300/20 rounded-lg text-sm space-y-3">
                </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.cli-preview-block { margin-top: 1rem; }
.cli-preview-label {
    display: block; font-size: 0.7rem; font-weight: 600;
    opacity: 0.5; margin-bottom: 0.25rem;
    text-transform: uppercase; letter-spacing: 0.05em;
}
.cli-preview-code-wrap {
    position: relative;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    overflow-x: auto;
}
.cli-preview-code-wrap pre { margin: 0; white-space: pre; }
.cli-preview-code-wrap code {
    font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
    font-size: 0.78rem; line-height: 1.5; color: #e2e8f0;
}
.cli-preview-comment { opacity: 0.45; }
.cli-preview-copy {
    position: absolute; top: 0.5rem; right: 0.5rem;
    background: transparent; border: none; color: #a78bfa;
    cursor: pointer; opacity: 0; transition: opacity 0.15s;
    padding: 0.25rem; border-radius: 0.25rem; font-size: 0.7rem;
}
.cli-preview-copy:hover { background: rgba(139, 92, 246, 0.15); }
.cli-preview-code-wrap:hover .cli-preview-copy,
.cli-preview-code-wrap:focus-within .cli-preview-copy { opacity: 1; }
.cli-preview-note {
    display: block; font-size: 0.65rem; opacity: 0.35;
    margin-top: 0.25rem; font-style: italic;
}
</style>

<script>
var _targetCheckTimers = {};
var _URL_PLACEHOLDERS = {
    'sse': 'http://localhost:3000/sse',
    'streamable-http': 'http://localhost:3000/mcp'
};

function toggleAccordion(wfId) {
    var rows = document.querySelectorAll('.wf-row');
    rows.forEach(function(row) {
        if (row.id === 'wf-row-' + wfId) {
            row.classList.toggle('expanded');
        } else {
            row.classList.remove('expanded');
        }
    });
    /* Lazy-load dynamic selects when a row expands */
    var row = document.getElementById('wf-row-' + wfId);
    if (row && row.classList.contains('expanded')) {
        if (wfId === 'trace_path') loadChainTemplates(wfId);
        if (wfId === 'blast_radius') loadChainExecutions(wfId);
    }
}

function toggleTransport(wfId) {
    var form = document.getElementById('form-' + wfId);
    var val = form.querySelector('input[name="transport"]:checked').value;
    var cmd = document.getElementById('cmd-' + wfId);
    var url = document.getElementById('url-' + wfId);
    cmd.classList.toggle('hidden', val !== 'stdio');
    url.classList.toggle('hidden', val === 'stdio');
    /* Update URL placeholder per transport type */
    var urlInput = url.querySelector('input[name="url"]');
    if (urlInput) {
        urlInput.placeholder = _URL_PLACEHOLDERS[val] || 'http://localhost:3000/sse';
    }
}

function toggleRxpSection(wfId) {
    var form = document.getElementById('form-' + wfId);
    var cb = form.querySelector('input[name="rxp_enabled"]');
    var section = document.getElementById('rxp-section-' + wfId);
    section.classList.toggle('hidden', !cb.checked);
}

function checkTargetName(input, wfId) {
    var warn = document.getElementById('target-warn-' + wfId);
    warn.classList.add('hidden');
    clearTimeout(_targetCheckTimers[wfId]);
    var name = input.value.trim();
    if (!name) return;
    _targetCheckTimers[wfId] = setTimeout(function() {
        fetch('/api/targets/check-name?name=' + encodeURIComponent(name))
            .then(function(r) { return r.json(); })
            .then(function(d) {
                if (d.exists) warn.classList.remove('hidden');
                else warn.classList.add('hidden');
            })
            .catch(function() {});
    }, 400);
}

function autoSuffixTarget(wfId) {
    var form = document.getElementById('form-' + wfId);
    var input = form.querySelector('input[name="target_name"]');
    var base = input.value.replace(/-\d+$/, '');
    input.value = base + '-' + Math.floor(Date.now() / 1000 % 100000);
    var warn = document.getElementById('target-warn-' + wfId);
    warn.classList.add('hidden');
    checkTargetName(input, wfId);
}

async function loadChainTemplates(wfId) {
    var sel = document.querySelector('#form-' + wfId + ' select[name="chain_template_id"]');
    if (!sel || sel.options.length > 1) return;
    try {
        var resp = await fetch('/api/chain/templates');
        var data = await resp.json();
        data.templates.forEach(function(t) {
            var opt = document.createElement('option');
            opt.value = t.id;
            opt.textContent = t.name + ' (' + t.category + ')';
            sel.appendChild(opt);
        });
    } catch (err) { /* silently fail */ }
}

async function loadChainExecutions(wfId) {
    var sel = document.querySelector('#form-' + wfId + ' select[name="chain_execution_id"]');
    if (!sel || sel.options.length > 1) return;
    try {
        var resp = await fetch('/api/chain/executions/recent');
        var data = await resp.json();
        data.executions.forEach(function(e) {
            var opt = document.createElement('option');
            opt.value = e.id;
            opt.textContent = e.chain_name + ' \u2014 ' + e.created_at;
            sel.appendChild(opt);
        });
        if (data.executions.length === 0) {
            var gate = document.getElementById('blast-radius-gate-' + wfId);
            if (gate) gate.style.display = 'block';
        }
    } catch (err) { /* silently fail */ }
}

function onTechniqueChange(wfId) {
    // Placeholder for technique checkbox change handling
}

function toggleAllChecks(name, wfId, checked) {
    var form = document.getElementById('form-' + wfId);
    if (!form) return;
    form.querySelectorAll('input[name="' + name + '"]').forEach(function(cb) {
        cb.checked = checked;
    });
    updateCliPreview(wfId);
}

var _payloadLibLoaded = {};

function togglePayloadLibrary(wfId) {
    var panel = document.getElementById('payload-library-' + wfId);
    var toggle = document.getElementById('payload-lib-toggle-' + wfId);
    var arrow = toggle.querySelector('.mit-arrow');
    panel.classList.toggle('hidden');
    arrow.textContent = panel.classList.contains('hidden') ? '\u25BC' : '\u25B2';
    if (!panel.classList.contains('hidden') && !_payloadLibLoaded[wfId]) {
        loadPayloadLibrary(wfId);
    }
}

async function loadPayloadLibrary(wfId) {
    _payloadLibLoaded[wfId] = true;
    var container = document.getElementById('payload-lib-content-' + wfId);
    try {
        var resp = await fetch('/api/inject/payloads');
        var payloads = await resp.json();
        var html = '<table class="table table-xs w-full"><thead><tr>' +
            '<th></th><th>Name</th><th>Technique</th><th>OWASP</th><th>Description</th>' +
            '</tr></thead><tbody>';
        payloads.forEach(function(p) {
            html += '<tr><td><input type="checkbox" name="payload_names" value="' +
                p.name + '" class="checkbox checkbox-xs" onchange="onPayloadSelect(\'' +
                wfId + '\')" /></td>' +
                '<td class="font-mono text-xs">' + p.name + '</td>' +
                '<td><span class="badge badge-ghost badge-xs">' + p.technique + '</span></td>' +
                '<td class="text-xs">' + (p.owasp_ids || []).join(', ') + '</td>' +
                '<td class="text-xs max-w-xs truncate">' + p.description + '</td></tr>';
        });
        html += '</tbody></table>';
        container.innerHTML = html;
    } catch (err) {
        container.innerHTML = '<p class="text-xs text-error">Failed to load payloads.</p>';
    }
}

function onPayloadSelect(wfId) {
    var form = document.getElementById('form-' + wfId);
    var selected = form.querySelectorAll('input[name="payload_names"]:checked');
    var techContainer = document.getElementById('technique-checks-' + wfId);
    if (techContainer) {
        techContainer.style.opacity = selected.length > 0 ? '0.4' : '1';
        techContainer.style.pointerEvents = selected.length > 0 ? 'none' : 'auto';
    }
}

var _launchInFlight = {};

async function _doLaunch(e, wfId, url) {
    e.preventDefault();
    if (_launchInFlight[wfId]) return false;
    var form = document.getElementById('form-' + wfId);
    var errEl = document.getElementById('error-' + wfId);
    var btn = form.querySelector('button[type="submit"]');
    errEl.classList.add('hidden');
    _launchInFlight[wfId] = true;
    if (btn) btn.disabled = true;
    try {
        var fd = new FormData(form);
        var data = {};
        // Pre-seed empty arrays for checkbox groups present in the form
        // so "all unchecked" sends [] rather than omitting the key
        ['techniques', 'checks', 'payload_names'].forEach(function(name) {
            if (form.querySelector('input[name="' + name + '"]')) data[name] = [];
        });
        for (var [key, val] of fd.entries()) {
            if (key === 'techniques' || key === 'checks' || key === 'payload_names') {
                if (!data[key]) data[key] = [];
                data[key].push(val);
            } else {
                data[key] = val;
            }
        }
        if (data.rounds) data.rounds = parseInt(data.rounds, 10);
        if (data.include_evidence_pack) data.include_evidence_pack = true;
        var resp = await fetch(url, {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify(data),
        });
        var result = await resp.json();
        if (resp.ok) { window.location.href = result.redirect; }
        else { errEl.textContent = result.detail || 'Launch failed'; errEl.classList.remove('hidden'); }
    } catch (err) { errEl.textContent = err.message; errEl.classList.remove('hidden'); }
    finally { _launchInFlight[wfId] = false; if (btn) btn.disabled = false; }
    return false;
}

function launchWorkflow(e, wfId) { return _doLaunch(e, wfId, '/api/workflows/launch'); }
function launchQuickAction(e, wfId) { return _doLaunch(e, wfId, '/api/quick-actions/launch'); }

async function launchEnumerate(e) {
    e.preventDefault();
    var form = document.getElementById('form-qa_enumerate');
    var errEl = document.getElementById('error-qa_enumerate');
    var btn = form.querySelector('button[type="submit"]');
    var resultsEl = document.getElementById('enumerate-results');
    errEl.classList.add('hidden');
    resultsEl.classList.add('hidden');
    btn.disabled = true;
    btn.textContent = 'Connecting...';
    try {
        var fd = new FormData(form);
        var data = Object.fromEntries(fd);
        var resp = await fetch('/api/audit/enumerate', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify(data),
        });
        var result = await resp.json();
        if (!resp.ok) {
            errEl.textContent = result.detail || 'Enumerate failed';
            errEl.classList.remove('hidden');
        } else {
            renderEnumerateResults(resultsEl, result);
            resultsEl.classList.remove('hidden');
        }
    } catch (err) {
        errEl.textContent = err.message;
        errEl.classList.remove('hidden');
    } finally {
        btn.disabled = false;
        btn.textContent = 'Enumerate';
    }
    return false;
}

async function enumerateFirst(wfId) {
    var form = document.getElementById('form-' + wfId);
    var statusEl = document.getElementById('enumerate-first-status-' + wfId);
    var resultsEl = document.getElementById('enumerate-first-results-' + wfId);
    statusEl.textContent = 'Connecting...';
    statusEl.style.color = '';
    resultsEl.classList.add('hidden');
    try {
        var fd = new FormData(form);
        var data = Object.fromEntries(fd);
        var resp = await fetch('/api/audit/enumerate', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify(data),
        });
        var result = await resp.json();
        if (!resp.ok) {
            statusEl.textContent = result.detail || 'Failed';
            statusEl.style.color = '#f87171';
        } else {
            statusEl.textContent = '';
            renderEnumerateResults(resultsEl, result);
            resultsEl.classList.remove('hidden');
        }
    } catch (err) {
        statusEl.textContent = err.message;
        statusEl.style.color = '#f87171';
    }
}

function renderEnumerateResults(container, data) {
    // Safe DOM construction — no innerHTML with untrusted MCP server data
    container.textContent = '';

    if (data.server_info && data.server_info.name) {
        var header = document.createElement('div');
        header.className = 'font-semibold';
        header.textContent = data.server_info.name;
        if (data.server_info.version) {
            var ver = document.createElement('span');
            ver.className = 'text-xs text-base-content/40';
            ver.textContent = ' v' + data.server_info.version;
            header.appendChild(ver);
        }
        container.appendChild(header);
    }

    var summary = document.createElement('div');
    summary.className = 'text-xs text-base-content/60';
    summary.textContent = (data.tools || []).length + ' tools, ' +
        (data.resources || []).length + ' resources, ' +
        (data.prompts || []).length + ' prompts';
    container.appendChild(summary);

    function buildList(items, label, textFn) {
        if (!items || items.length === 0) return;
        var wrap = document.createElement('div');
        var lbl = document.createElement('span');
        lbl.className = 'font-semibold text-xs';
        lbl.textContent = label;
        wrap.appendChild(lbl);
        var ul = document.createElement('ul');
        ul.className = 'list-disc list-inside text-xs text-base-content/70';
        items.forEach(function(item) {
            var li = document.createElement('li');
            var name = document.createElement('span');
            name.className = 'font-mono';
            name.textContent = textFn(item).name;
            li.appendChild(name);
            var desc = textFn(item).desc;
            if (desc) li.appendChild(document.createTextNode(' \u2014 ' + desc));
            ul.appendChild(li);
        });
        wrap.appendChild(ul);
        container.appendChild(wrap);
    }

    buildList(data.tools, 'Tools:', function(t) {
        return { name: t.name, desc: t.description ? t.description.substring(0, 80) : '' };
    });
    buildList(data.resources, 'Resources:', function(r) {
        return { name: r.uri || r.name, desc: '' };
    });
    buildList(data.prompts, 'Prompts:', function(p) {
        return { name: p.name, desc: p.description ? p.description.substring(0, 80) : '' };
    });
}

/* ---- CLI Preview ---- */

/**
 * Returns the selected transport value from a form, or a placeholder.
 * @param {HTMLFormElement} form - The form element
 * @returns {string} Transport value or '<transport>'
 */
function _cliTransport(form) {
    var r = form.querySelector('input[name="transport"]:checked');
    return r ? r.value : '<transport>';
}

/**
 * Returns the CLI connection flag and value string for a given transport.
 * @param {HTMLFormElement} form - The form element
 * @param {string} transport - Current transport value
 * @param {string} cmdFlag - Flag name for stdio (e.g. '--command')
 * @param {string} urlFlag - Flag name for network (e.g. '--url')
 * @returns {string} Flag and value string
 */
function _cliConnectionArg(form, transport, cmdFlag, urlFlag) {
    if (transport === 'stdio' || transport === '<transport>') {
        var cmdEl = form.querySelector('input[name="command"]');
        var cmdVal = cmdEl ? cmdEl.value.trim() : '';
        if (!cmdVal) return cmdFlag + ' <cmd>';
        if (cmdVal.indexOf(' ') !== -1) cmdVal = '"' + cmdVal + '"';
        return cmdFlag + ' ' + cmdVal;
    }
    var urlEl = form.querySelector('input[name="url"]');
    var urlVal = urlEl ? urlEl.value.trim() : '';
    return urlFlag + ' ' + (urlVal || '<url>');
}

/**
 * Returns the selected model value from a form, or a placeholder.
 * @param {HTMLFormElement} form - The form element
 * @returns {string} Model ID or '<model>'
 */
function _cliModel(form) {
    var el = form.querySelector('[name="model"]');
    if (!el) return '<model>';
    var val = el.value.trim();
    if (!val || val === '__custom__') return '<model>';
    return val;
}

/**
 * Returns inject campaign command string(s) based on technique/payload state.
 * @param {HTMLFormElement} form - The form element
 * @param {string} model - Model value or placeholder
 * @param {string} roundsVal - Rounds value from the form
 * @returns {string[]} Array of command strings (no comment lines)
 */
function _cliInjectCmds(form, model, roundsVal) {
    var roundsArg = (roundsVal && roundsVal !== '1') ? ' --rounds ' + roundsVal : '';
    var base = 'qai inject campaign --model ' + model;

    var payloads = [];
    form.querySelectorAll('input[name="payload_names"]:checked').forEach(function(cb) {
        payloads.push(cb.value);
    });
    if (payloads.length > 0) {
        return [base + ' --payloads ' + payloads.join(',') + roundsArg];
    }

    var allTechs = form.querySelectorAll('input[name="techniques"]');
    var checkedTechs = [];
    form.querySelectorAll('input[name="techniques"]:checked').forEach(function(cb) {
        checkedTechs.push(cb.value);
    });

    if (checkedTechs.length === 0 || checkedTechs.length === allTechs.length) {
        return [base + roundsArg];
    }
    return checkedTechs.map(function(t) {
        return base + ' --technique ' + t + roundsArg;
    });
}

/** Builds CLI preview lines for the Assess workflow. */
function _buildCliAssess(form) {
    var transport = _cliTransport(form);
    var auditConn = _cliConnectionArg(form, transport, '--command', '--url');
    var proxyConn = _cliConnectionArg(form, transport, '--target-command', '--target-url');
    var model = _cliModel(form);
    var roundsEl = form.querySelector('input[name="rounds"]');
    var roundsVal = roundsEl ? roundsEl.value : '1';

    var allChecks = form.querySelectorAll('input[name="checks"]');
    var checked = form.querySelectorAll('input[name="checks"]:checked');
    var checksArg = '';
    if (checked.length > 0 && checked.length < allChecks.length) {
        var vals = [];
        checked.forEach(function(cb) { vals.push(cb.value); });
        checksArg = ' --checks ' + vals.join(',');
    }

    var lines = [
        '# audit',
        'qai audit scan --transport ' + transport + ' ' + auditConn + checksArg,
        '# proxy',
        'qai proxy start --transport ' + transport + ' ' + proxyConn
    ];
    lines.push('# inject');
    _cliInjectCmds(form, model, roundsVal).forEach(function(cmd) {
        lines.push(cmd);
    });
    return lines;
}

/** Builds CLI preview lines for the Test Document Ingestion workflow. */
function _buildCliTestDocs(form) {
    var callbackEl = form.querySelector('input[name="callback_url"]');
    var callback = callbackEl ? callbackEl.value.trim() : '';
    var format = form.querySelector('select[name="format"]').value;
    var style = form.querySelector('select[name="payload_style"]').value;
    var ptype = form.querySelector('select[name="payload_type"]').value;

    var lines = [];

    var rxpCb = form.querySelector('input[name="rxp_enabled"]');
    if (rxpCb && rxpCb.checked) {
        var rxpModelEl = form.querySelector('input[name="rxp_model_id"]');
        var rxpModel = rxpModelEl ? rxpModelEl.value.trim() : '';
        var rxpProfileEl = form.querySelector('input[name="rxp_profile_id"]');
        var rxpProfile = rxpProfileEl ? rxpProfileEl.value.trim() : '';
        lines.push('# pre-validate retrieval rank');
        lines.push('qai rxp validate --model ' + (rxpModel || '<model>') +
            ' --profile-id ' + (rxpProfile || '<profile>'));
    }

    lines.push('# generate payloads');
    lines.push('qai ipi generate --callback ' + (callback || '<callback_url>') +
        ' --format ' + format +
        ' --payload-style ' + style +
        ' --payload-type ' + ptype);
    lines.push('# start listener (run in a separate terminal)');
    lines.push('qai ipi listen --port <port>');
    return lines;
}

/** Builds CLI preview lines for the Test Context Poisoning workflow. */
function _buildCliTestAssistant(form) {
    var format = form.querySelector('select[name="format_id"]').value;
    var repoEl = form.querySelector('input[name="repo_name"]');
    var repoVal = repoEl ? repoEl.value.trim() : '';
    var cmd = 'qai cxp generate --format ' + format;
    if (repoVal) cmd += ' --repo-name ' + repoVal;
    return [cmd];
}

/** Builds CLI preview lines for the Trace an Attack Path workflow. */
function _buildCliTracePath(form) {
    var sel = form.querySelector('select[name="chain_template_id"]');
    var templateName = '<template>';
    if (sel && sel.value) {
        templateName = sel.options[sel.selectedIndex].textContent.split(' (')[0].trim();
    }
    var model = _cliModel(form);
    var cmd = 'qai chain run --chain-file ' + templateName + '.yaml';
    if (model !== '<model>') cmd += ' --inject-model ' + model;
    return [cmd];
}

/** Builds CLI preview lines for the Measure Blast Radius workflow. */
function _buildCliBlastRadius(form) {
    var sel = form.querySelector('select[name="chain_execution_id"]');
    var execName = '<execution>';
    if (sel && sel.value) {
        execName = sel.options[sel.selectedIndex].textContent.split(' \u2014 ')[0].trim();
    }
    return ['qai chain blast-radius --results ' + execName + '.json'];
}

/** Builds CLI preview lines for Quick Audit Run. */
function _buildCliQaScan(form) {
    var transport = _cliTransport(form);
    var conn = _cliConnectionArg(form, transport, '--command', '--url');
    var allChecks = form.querySelectorAll('input[name="checks"]');
    var checked = form.querySelectorAll('input[name="checks"]:checked');
    var checksArg = '';
    if (checked.length > 0 && checked.length < allChecks.length) {
        var vals = [];
        checked.forEach(function(cb) { vals.push(cb.value); });
        checksArg = ' --checks ' + vals.join(',');
    }
    return ['qai audit scan --transport ' + transport + ' ' + conn + checksArg];
}

/** Builds CLI preview lines for Quick Proxy Run. */
function _buildCliQaIntercept(form) {
    var transport = _cliTransport(form);
    var conn = _cliConnectionArg(form, transport, '--target-command', '--target-url');
    return ['qai proxy start --transport ' + transport + ' ' + conn];
}

/** Builds CLI preview lines for Quick Inject Run. */
function _buildCliQaCampaign(form) {
    var model = _cliModel(form);
    var roundsEl = form.querySelector('input[name="rounds"]');
    var roundsVal = roundsEl ? roundsEl.value : '1';
    return _cliInjectCmds(form, model, roundsVal);
}

/** Builds CLI preview lines for Enumerate Server. */
function _buildCliQaEnumerate(form) {
    var transport = _cliTransport(form);
    var conn = _cliConnectionArg(form, transport, '--command', '--url');
    return ['qai audit enumerate --transport ' + transport + ' ' + conn];
}

/** @type {Object<string, function(HTMLFormElement): string[]>} */
var _CLI_BUILDERS = {
    'assess': _buildCliAssess,
    'test_docs': _buildCliTestDocs,
    'test_assistant': _buildCliTestAssistant,
    'trace_path': _buildCliTracePath,
    'blast_radius': _buildCliBlastRadius,
    'qa_scan': _buildCliQaScan,
    'qa_intercept': _buildCliQaIntercept,
    'qa_campaign': _buildCliQaCampaign,
    'qa_enumerate': _buildCliQaEnumerate
};

/**
 * Renders CLI preview lines into a code element using safe DOM construction.
 * @param {HTMLElement} codeEl - The <code> element to render into
 * @param {string[]} lines - Array of command/comment lines
 */
function _renderCliPreview(codeEl, lines) {
    codeEl.textContent = '';
    lines.forEach(function(line, i) {
        if (i > 0) codeEl.appendChild(document.createTextNode('\n'));
        if (line.startsWith('#')) {
            var span = document.createElement('span');
            span.className = 'cli-preview-comment';
            span.textContent = line;
            codeEl.appendChild(span);
        } else {
            codeEl.appendChild(document.createTextNode(line));
        }
    });
}

/**
 * Updates the CLI preview for a given form by calling its builder.
 * @param {string} formId - The form identifier (e.g. 'assess', 'qa_scan')
 */
function updateCliPreview(formId) {
    var form = document.getElementById('form-' + formId);
    var codeEl = document.getElementById('cli-preview-code-' + formId);
    if (!form || !codeEl) return;
    var builder = _CLI_BUILDERS[formId];
    if (!builder) return;
    _renderCliPreview(codeEl, builder(form));
}

/**
 * Copies the CLI preview text to the clipboard with brief feedback.
 * @param {string} formId - The form identifier
 */
function copyCliPreview(formId) {
    var codeEl = document.getElementById('cli-preview-code-' + formId);
    if (!codeEl) return;
    navigator.clipboard.writeText(codeEl.textContent).then(function() {
        var btn = document.getElementById('cli-copy-btn-' + formId);
        if (!btn) return;
        var original = btn.innerHTML;
        btn.textContent = 'Copied!';
        btn.style.opacity = '1';
        setTimeout(function() {
            btn.innerHTML = original;
            btn.style.opacity = '';
        }, 1500);
    });
}
</script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('[id$="-provider"]').forEach(function(sel) {
        if (sel.value && sel.value !== '') {
            var selectorId = sel.id.replace('-provider', '');
            htmx.ajax('GET',
                '/api/providers/' + sel.value + '/models?selector_id=' + selectorId,
                {target: '#' + selectorId + '-model-area'});
        }
    });

    /* Wire CLI preview updates via event delegation on all launcher forms */
    document.querySelectorAll('form[id^="form-"]').forEach(function(form) {
        var formId = form.id.replace('form-', '');
        if (!_CLI_BUILDERS[formId]) return;
        form.addEventListener('input', function() { updateCliPreview(formId); });
        form.addEventListener('change', function() { updateCliPreview(formId); });
        updateCliPreview(formId);
    });

    /* Update previews after HTMX swaps (e.g. model selector loaded) */
    document.addEventListener('htmx:afterSettle', function(e) {
        var form = e.target.closest('form[id^="form-"]');
        if (form) {
            var formId = form.id.replace('form-', '');
            updateCliPreview(formId);
        }
    });
});
</script>
{% endblock %}