{# One project row. Rendered by the dashboard grid loop AND by
   GET /api/projects/{name}/row for reactive insertion (no full-page reload). `idx` is
   the row's position for the search/cap visibility gate (0 from the fragment route, so a
   freshly created project is always shown).

   The `:style` below reorders rows VISUALLY for a non-name sort via CSS `order` — it does
   NOT change DOM/tab order (focus + screen-reader order stay A–Z), the deliberate trade for
   an opt-in cosmetic sort. Don't turn this into a DOM reorder (the anti-pattern the Active
   zone avoids). WCAG 2.4.3 note: visual order diverges from DOM/tab order only on opt-in
   non-default sorts; all interactive controls are self-contained within each row so
   keyboard navigation is coherent regardless of visual position. #}
          <div class="list-group-item" data-project="{{ p.name }}"
               x-show="projectVisible('{{ p.name }}', {{ idx }})" x-cloak
               :style="projectSort !== 'name' ? { order: projectOrderRank('{{ p.name }}') } : {}"
               x-data="projectRow('{{ p.name }}')"
               @launch-pop-close.window="onLaunchPopClose($event)">
            <div class="d-flex align-items-center flex-wrap gap-2">
              <svg class="ico text-success" role="img" aria-label="Directory trusted" x-cloak
                   x-show="trustState['{{ p.name }}'] === 'trusted'" title="Directory trusted"><use href="#ic-trust"/></svg>
              <svg class="ico text-secondary" role="img" aria-label="Directory not yet trusted" x-cloak
                   x-show="trustState['{{ p.name }}'] !== 'trusted'"
                   title="Not yet trusted — you'll confirm trust when you launch a session here"><use href="#ic-trust"/></svg>
              {# DES-07: responsive name cap — clamp scales the truncation width with the viewport
                 (narrow phone → ~10rem, wide desktop → 28rem) instead of a fixed 16rem; min-width:0
                 lets text-truncate shrink inside the flex row. #}
              <span class="fw-bold text-truncate project-name">{{ p.name }}</span>
              <!-- inline meta -->
              <span class="text-secondary small project-meta">
                {% if p.is_git_repo %}<span title="This directory is a git repository"><svg class="ico me-1" aria-hidden="true"><use href="#ic-git"/></svg>Git</span>{% endif %}
                {% if p.has_claude_md %}<span title="A CLAUDE.md file is present"><svg class="ico me-1" aria-hidden="true"><use href="#ic-page"/></svg>CLAUDE.md</span>{% endif %}
                <span data-test="usage-badge" x-show="usageLabel('{{ p.name }}')" x-cloak
                      :title="usageTitle('{{ p.name }}')" x-text="usageLabel('{{ p.name }}')"></span>
              </span>
              <!-- live-session rollup -->
              <span class="badge bg-green-lt" x-show="runningCountFor('{{ p.name }}') > 0" x-cloak
                    :title="runningCountFor('{{ p.name }}') + ' live session(s) — see Active sessions below'"
                    x-text="'● ' + runningCountFor('{{ p.name }}') + ' running'"></span>

              <!-- read-only transcript viewer trigger (#431): opens the session-history
                   modal for this project. A ghost chip next to the usage/readiness affordances
                   — not display:none-gated by a `d-*` !important class on an x-show element. -->
              <button type="button" class="btn btn-ghost-secondary btn-sm py-0 px-1" data-test="transcript-trigger"
                      @click="openTranscripts('{{ p.name }}')"
                      title="View this project's read-only session transcripts"
                      aria-label="View transcripts for {{ p.name }}">
                <svg class="ico me-1" aria-hidden="true"><use href="#ic-page"/></svg>Transcript
              </button>

              <!-- per-project readiness pill (FE-1b): an attention chip, shown only when a
                   per-project precondition warns (untrusted dir, non-git for worktree mode);
                   click to expand the specific checks. Silent when the project is launch-ready.
                   Backed by the preflight* API/state; "readiness" is the user-facing term, scoped
                   to this project vs the header's System readiness pill (UX-07). -->
              <button type="button" class="badge bg-yellow-lt border-0" x-cloak data-test="preflight-pill"
                      x-show="preflightWarnCount('{{ p.name }}') > 0"
                      @click="togglePreflight('{{ p.name }}')"
                      :aria-expanded="!!preflightOpen['{{ p.name }}']"
                      :title="preflightWarnCount('{{ p.name }}') + (preflightWarnCount('{{ p.name }}') === 1 ? ' readiness check' : ' readiness checks') + ' for this project before launch'">
                <svg class="ico me-1" aria-hidden="true"><use href="#ic-alert"/></svg><span x-text="preflightWarnCount('{{ p.name }}')"></span> <span x-text="preflightWarnCount('{{ p.name }}') === 1 ? 'check' : 'checks'"></span>
              </button>

              <!-- right cluster: Run Claude here + overflow -->
              <span class="ms-auto d-flex align-items-center gap-1">
                {# FE-578: surface a launch precondition INSIDE the popover; Run stays ENABLED
                   (disabling it would hide the spawn picker / trust confirm that resolve it).
                   On open we coerce a non-git+worktree default to a valid mode; the note below
                   the Spawn picker explains it. #}
                <span class="launch-anchor">
                  <button type="button" class="btn btn-primary" data-test="run-launch"
                          @click="toggleLaunchPop({{ p.is_git_repo | tojson }})"
                          :aria-expanded="lopen">
                    <svg class="ico me-1" aria-hidden="true"><use href="#ic-play"/></svg>Run Claude here
                    <svg class="ico ms-1" aria-hidden="true" x-show="lopen"><use href="#ic-caret-up"/></svg><svg class="ico ms-1" aria-hidden="true" x-show="!lopen"><use href="#ic-caret-down"/></svg>
                  </button>
                  {# Dismissing the popover (outside-click / Escape) also clears any pending
                     trust/bypass gate (#686) so a hidden gate never lingers — reopening starts
                     a fresh launch. mopen is reset too so More options collapses on reopen. #}
                  <div class="card launch-pop" x-show="lopen" x-cloak
                       @click.outside="dismissLaunchPop()"
                       @keydown.escape.window="dismissLaunchPop()">
                    <div class="card-body p-2">
                      <div class="form-label small mb-1">How do you want to drive it?</div>
                      <template x-for="m in launchModes()" :key="m.id">
                        <label class="launch-opt" :class="lmode === m.id ? 'is-sel' : ''">
                          <input type="radio" class="form-check-input mt-1 me-2" :name="'lm-{{ p.name }}'" :value="m.id" x-model="lmode"
                                 @change="clampPermForMode()" {{ NO_AUTOFILL }}>
                          <span>
                            <span class="fw-medium d-block">
                              <span x-text="m.label"></span>
                              <span class="badge bg-azure-lt ms-1" x-show="m.badge" x-cloak x-text="m.badge"></span>
                            </span>
                            <span class="text-secondary small" x-text="m.sub"></span>
                          </span>
                        </label>
                      </template>
                      <!-- cloud option folds into Background -->
                      <label class="form-check small mt-1 ms-1" x-show="lmode === 'detached'" x-cloak>
                        <input type="checkbox" class="form-check-input" data-test="launch-cloud-optin" x-model="lcloud" {{ NO_AUTOFILL }}>
                        <span class="form-check-label">also register on claude.ai</span>
                      </label>
                      <!-- With claude.ai on, a Background run is actually live and
                           conversational. Say what you can actually do with it. -->
                      <p class="form-hint text-secondary small mt-1 ms-1 mb-0" x-show="lmode === 'detached' && lcloud" x-cloak>
                        Connectable from claude.ai / Desktop — converse with it, and Stop it here when done.
                      </p>
                      <!-- First prompt for Background: REQUIRED unless the session is
                           cloud-registered (#1033) — an unregistered bg agent has no
                           composer, so launched blank it idles forever. -->
                      <div class="mt-2" x-show="lmode === 'detached'" x-cloak>
                        <label class="form-label small mb-1" for="lprompt-{{ p.name }}">First prompt <span class="text-secondary" x-text="lcloud ? '(optional)' : '(required)'">(required)</span></label>
                        {# A <textarea>, not an <input type="text"> — deliberately (#1114).
                           LastPass claimed this field and autofilled a saved USERNAME into it
                           despite the complete opt-out recipe below, which it ignores. Proven
                           in situ with an A/B/A on the real dashboard: the fill stops as a
                           textarea and returns on rollback to an input. A textarea is not in
                           the population a password manager scans for login fields, so this
                           holds even if the extension changes HOW it picks them — unlike a
                           fix that games its field-count heuristic.
                           `rows="1"` + `wrap="off"` + `.field-1line` keep it a single-line
                           control. Enter is suppressed because the <input> this replaced sat
                           in no <form> and did nothing on Enter; `@input` flattens pasted
                           newlines, which an <input> did for free.
                           Do NOT "simplify" this back to an <input>. #}
                        <textarea id="lprompt-{{ p.name }}" rows="1" wrap="off" enterkeyhint="done"
                                  class="form-control form-control-sm field-1line"
                                  x-model="lprompt" placeholder="Initial instruction…"
                                  @keydown.enter.prevent="" @input="sanitizePrompt()"
                                  {{ NO_AUTOFILL }}></textarea>
                        <p class="form-hint text-secondary small mt-1 mb-0" data-test="launch-bg-prompt-required"
                           id="bg-prompt-req-{{ p.name }}"
                           x-show="bgPromptMissing(lmode, lcloud, lprompt)" x-cloak>
                          Required — an unregistered Background session can't be given a prompt
                          later. Check "also register on claude.ai" to start without one.</p>
                      </div>
                      <!-- permissions — shown for EVERY mode; the key safety choice, and it
                           matters most for Background, which runs unattended. bypassPermissions
                           is offered only where the per-project config ceiling allows it. -->
                      <div class="mt-2">
                        <label class="form-label small mb-1" for="perm-{{ p.name }}">Permissions</label>
                        {# Option text + effect tooltip both come from the canonical
                           permission_labels map (#685) — never a hand-maintained copy.
                           bypassPermissions is offered only where the per-project ceiling
                           allows it and only for the Desktop/bridge launch (the typed-confirm
                           footgun guard); the "(Desktop only)" caveat is a contextual hint
                           appended here, not baked into the canonical label. #}
                        <select id="perm-{{ p.name }}" class="form-select form-select-sm" x-model="lperm"
                                aria-describedby="perm-effect-{{ p.name }}"
                                {# Lead each rendered item with the separator (not trailing it) so a
                                   filtered-out bypassPermissions tail never leaves a dangling " · ".
                                   Each effect string already ends with its own period — don't append
                                   another, or the tail renders a double period. #}
                                {% set ns = namespace(first=true) %}
                                title="What the agent may do without asking — {% for mode, lbl in permission_labels.items() %}{% if mode != 'bypassPermissions' or p.allow_bypass_permissions %}{% if not ns.first %} · {% endif %}{{ mode }} = {{ lbl.effect }}{% set ns.first = false %}{% endif %}{% endfor %}">
                          {% for mode, lbl in permission_labels.items() %}
                          {% if mode != 'bypassPermissions' %}
                          <option value="{{ mode }}">{{ lbl.long }}</option>
                          {% elif p.allow_bypass_permissions %}
                          <option value="bypassPermissions" :disabled="lmode !== 'desktop'">{{ lbl.long }} {{ bypass_desktop_hint }}</option>
                          {% endif %}
                          {% endfor %}
                        </select>
                        {# Plain-language effect of the SELECTED mode, inline (not just title=) so it's
                           visible on touch — the riskiest per-launch choice shouldn't hide in a tooltip. #}
                        <p id="perm-effect-{{ p.name }}" class="form-hint text-secondary small mt-1 mb-0"
                           x-text="permissionEffect(lperm)"></p>
                      </div>
                      {# "More options" — a single disclosure (#686) holding the ADVANCED choices
                         for the Desktop/bridge launch: the Mode selector (Server Mode / Interactive
                         Session) AND Spawn. Mode is an advanced choice, tucked away by default; the
                         safe Desktop default works with this closed. Only the Desktop launch exposes
                         these (browser/background ignore spawn + resume mode). #}
                      <div class="mt-2" x-show="lmode === 'desktop'" x-cloak>
                        <button type="button" class="btn btn-sm btn-ghost-secondary px-1" data-test="launch-more-options"
                                @click="mopen = !mopen" :aria-expanded="mopen" aria-controls="more-opts-{{ p.name }}"><span x-text="mopen ? 'Fewer options' : 'More options'">More options</span><svg class="ico ms-1" aria-hidden="true" x-show="mopen"><use href="#ic-caret-up"/></svg><svg class="ico ms-1" aria-hidden="true" x-show="!mopen"><use href="#ic-caret-down"/></svg></button>
                        <div id="more-opts-{{ p.name }}" class="row g-2 mt-1" x-show="mopen" x-cloak>
                          {% if pty_supported %}
                          {# Mode (Server Mode / Interactive Session) — the advanced launch-shape choice,
                             tucked inside More options. Drives whether Spawn applies (standard) or the
                             single-session note shows (pty). #}
                          <div class="col-12">
                            <label class="form-label small mb-1" for="resume-{{ p.name }}">Mode</label>
                            <select id="resume-{{ p.name }}" class="form-select form-select-sm" x-model="resumeMode['{{ p.name }}']"
                                    aria-describedby="resume-hint-{{ p.name }}" @change="coercePtySpawn('{{ p.name }}')"
                                    title="Server Mode (multi-session bridge) = the claude remote-control server; supports every Spawn option. Interactive Session (single-session, true-resume) = one interactive session that restores its prior conversation on Resume; several can run per project — in the project directory, or isolated in a git worktree (Spawn: worktree).">
                              <option value="standard">Server Mode (multi-session bridge)</option>
                              <option value="pty">Interactive Session (single-session, true-resume)</option>
                            </select>
                          </div>
                          {% endif %}
                          {# Custom bridge/session display name (#780) — Server Mode (standard)
                             only: it becomes `claude remote-control --name`. The Interactive
                             Session (pty) flag form has no equivalent flag, so this is hidden
                             there rather than silently ignored (avoids a name typed here from
                             looking like it applies when Mode is flipped to pty). Blank keeps
                             today's default (the project name); the server validates length +
                             control characters before any spawn side effect. #}
                          <div class="col-12"
                               {% if pty_supported %}x-show="(resumeMode['{{ p.name }}'] || defaultResumeMode) === 'standard'"{% endif %} x-cloak>
                            <label class="form-label small mb-1" for="name-{{ p.name }}">Session name <span class="text-secondary">(optional)</span></label>
                            {# <textarea> for the same reason as First prompt above (#1114) —
                               this is the field whose fill was actually observed, and the one
                               whose value becomes a bridge display name in claude.ai/code, so
                               an unnoticed fill leaks an identifier. `maxlength` applies to a
                               textarea too; `@input` matters more here than above because the
                               server rejects control characters in a display name, so a
                               pasted newline would turn a working paste into a 422. #}
                            <textarea id="name-{{ p.name }}" rows="1" wrap="off" enterkeyhint="done"
                                      class="form-control form-control-sm field-1line"
                                      x-model="customName['{{ p.name }}']"
                                      maxlength="128" placeholder="{{ p.name }}"
                                      aria-describedby="name-hint-{{ p.name }}"
                                      @keydown.enter.prevent="" @input="sanitizeName()"
                                      title="Custom display name for this bridge, shown in claude.ai/code in place of the project name. Leave blank to use the project name." {{ NO_AUTOFILL }}></textarea>
                            <p id="name-hint-{{ p.name }}" class="form-hint text-secondary small mt-1 mb-0">Leave blank to use the project name (<code>{{ p.name }}</code>).</p>
                          </div>
                          {# Sandbox toggle (#780) removed for 1.0 (#1037): `--sandbox` never
                             propagated to the server-mode session worker, so the control silently
                             did nothing. It returns behind dependency preflight + platform gating
                             in #1046. #}
                          {# Spawn applies to BOTH modes (#779): standard maps to
                             `claude remote-control --spawn`; an Interactive Session honors
                             same-dir/worktree (worktree = `claude --worktree`, its own isolated
                             git worktree that survives Resume). Only `session` is standard-only —
                             it stays visible but disabled in pty mode (coercePtySpawn resets it). #}
                          <div class="col-12">
                            <label class="form-label small mb-1" for="spawn-{{ p.name }}">Spawn</label>
                            <select id="spawn-{{ p.name }}" class="form-select form-select-sm" x-model="spawnMode['{{ p.name }}']"
                                    title="Where the session runs: same-dir = the project directory · worktree = an isolated git worktree (git repos only) · session = a fresh sandboxed session (Server Mode only).">
                              <option value="same-dir">same-dir</option>
                              {% if p.is_git_repo %}<option value="worktree">worktree</option>{% endif %}
                              <option value="session"
                                      {% if pty_supported %}:disabled="(resumeMode['{{ p.name }}'] || defaultResumeMode) === 'pty'"{% endif %}>session</option>
                            </select>
                            {# #578: surface (don't disable) — a non-git dir can't worktree, so
                               note it here and coerceSpawnMode() falls back to same-dir on open.
                               x-text (auto-escaped, never x-html); no d-* class on this x-show el. #}
                            <p class="form-hint text-warning small mt-1 mb-0" x-cloak
                               x-show="spawnModeNote({{ p.is_git_repo | tojson }})"
                               x-text="spawnModeNote({{ p.is_git_repo | tojson }})"></p>
                          </div>
                          {% if pty_supported %}
                          {# Resume picker (#303) — pty/Interactive Session only: fork a picked
                             past conversation into the NEW session (`--resume <uuid>
                             --fork-session`; the original conversation is never clobbered).
                             Options come from the transcripts API (non-live, non-empty), loaded
                             on popover open; labels are server-redacted first prompts rendered
                             via x-text (never x-html). "" = fresh conversation (the default,
                             re-coerced on every popover open). #}
                          <div class="col-12"
                               x-show="(resumeMode['{{ p.name }}'] || defaultResumeMode) === 'pty'" x-cloak>
                            <label class="form-label small mb-1" for="resumesess-{{ p.name }}">Conversation</label>
                            <select id="resumesess-{{ p.name }}" class="form-select form-select-sm"
                                    data-test="resume-session-picker" x-model="resumeSessionId['{{ p.name }}']"
                                    title="Start a fresh conversation, or fork a previous one from this project into the new session (the original conversation stays untouched).">
                              <option value="">New conversation</option>
                              <template x-for="s in (resumableSessions['{{ p.name }}'] || [])" :key="s.session">
                                <option :value="s.session" x-text="resumeSessionLabel(s)"></option>
                              </template>
                            </select>
                            <p class="form-hint text-secondary small mt-1 mb-0">Forking a previous
                              conversation resumes it in a new session — the original stays untouched.</p>
                          </div>
                          {# Keep d-flex OFF this x-show element — `.d-flex{display:flex!important}`
                             overrides x-show's inline display:none and would pin this hint visible
                             even in standard mode (same bug as the live-tail banners). Flex goes on
                             the inner wrapper. #}
                          <div class="col-12"
                               x-show="(resumeMode['{{ p.name }}'] || defaultResumeMode) === 'pty'" x-cloak>
                            <div class="d-flex align-items-end">
                              <p id="resume-hint-{{ p.name }}" class="form-hint text-secondary small mb-1">Runs as one interactive session — several can run per project.</p>
                            </div>
                            {% if p.is_git_repo %}
                            {# No-worktree collision warning (#779): warn, never block — the launch
                               proceeds; the server echoes the same advisory (warnings[], #778).
                               No d-* class on the x-show element (Tabler !important, cf. #538). #}
                            <p class="form-hint text-warning small mb-1" data-test="pty-collision-hint" x-cloak
                               x-show="spawnMode['{{ p.name }}'] !== 'worktree'">
                              Sessions sharing the project directory can make conflicting edits — choose
                              Spawn: worktree to isolate this one.</p>
                            {% endif %}
                          </div>
                          {% endif %}
                        </div>
                      </div>

                      {# Trust-on-start + bypassPermissions gates fold INSIDE the popover (#686) —
                         no separate below-the-row alerts. Both are hidden until the Run button routes
                         a Desktop launch into start(), which opens the matching gate; resolving or
                         cancelling either one dismisses the popover (via the launch-pop-close event). #}
                      {# When a gate opens INSIDE the popover the Run button hides, so move focus
                         into the gate's first control (WCAG 2.4.3 / 4.1.3) — else focus is orphaned
                         on <body> and a keyboard/SR user gets no signal a confirm now blocks launch.
                         x-effect re-runs when confirmTrust[name] flips; $nextTick waits for x-show. #}
                      <!-- trust-on-start confirm (bridge / Desktop launch path) -->
                      <div class="alert alert-warning mt-2 mb-0 trust-gate" data-test="trust-confirm" x-show="confirmTrust['{{ p.name }}']" x-cloak role="group" aria-labelledby="trust-head-{{ p.name }}"
                           x-effect="focusTrustCheck(confirmTrust['{{ p.name }}'], $refs)">
                        <p id="trust-head-{{ p.name }}" class="mb-2"><svg class="ico me-1 text-warning" aria-hidden="true"><use href="#ic-alert"/></svg>Trust the files in <code>{{ p.name }}</code>? Launching a session here
                          lets it run tools and execute any code in <code>CLAUDE.md</code> /
                          <code>.claude</code> in this directory.</p>
                        <label class="form-check mb-2">
                          <input class="form-check-input" type="checkbox" x-ref="trustCheck" x-model="trustConfirmed['{{ p.name }}']" {{ NO_AUTOFILL }}>
                          <span class="form-check-label">I trust the files in this directory</span>
                        </label>
                        <div class="btn-list">
                          <button type="button" class="btn btn-sm btn-warning" @click="confirmTrustStart('{{ p.name }}')"
                                  :disabled="!trustConfirmed['{{ p.name }}'] || trusting['{{ p.name }}']">
                            <span class="spinner-border spinner-border-sm me-1" x-show="trusting['{{ p.name }}']" x-cloak></span>
                            Trust &amp; start
                          </button>
                          <button type="button" class="btn btn-sm btn-ghost-secondary" @click="cancelTrust('{{ p.name }}')">Cancel</button>
                        </div>
                      </div>

                      <!-- bypassPermissions typed-confirm -->
                      <div class="alert alert-danger mt-2 mb-0" data-test="bypass-confirm" x-show="confirmBypass['{{ p.name }}']" x-cloak role="group" aria-labelledby="bypass-head-{{ p.name }}"
                           x-effect="focusBypassInput(confirmBypass['{{ p.name }}'], $refs)">
                        <p id="bypass-head-{{ p.name }}" class="mb-2"><svg class="ico me-1 text-warning" aria-hidden="true"><use href="#ic-alert"/></svg><strong>bypassPermissions</strong> lets sessions in <code>{{ p.name }}</code>
                          run tools without asking. Type the project name to confirm.</p>
                        <div class="input-group">
                          <input type="text" class="form-control" x-ref="bypassInput" x-model="bypassTyped['{{ p.name }}']" placeholder="{{ p.name }}"
                                 aria-label="Type the project name to confirm bypassPermissions"
                                 @keyup.enter="confirmBypassStart('{{ p.name }}')" {{ NO_AUTOFILL }}>
                          <button type="button" class="btn btn-danger" data-test="bypass-start-go" @click="confirmBypassStart('{{ p.name }}')"
                                  :disabled="(bypassTyped['{{ p.name }}'] || '') !== '{{ p.name }}'">Start with bypass</button>
                          <button type="button" class="btn" @click="cancelBypass('{{ p.name }}')">Cancel</button>
                        </div>
                      </div>

                      {# #851: interactive-launch MCP-approval SOFT-BLOCK. An Interactive Session
                         with unapproved committed .mcp.json servers deterministically hangs at
                         claude's enable prompt (the read-only terminal can't answer it), so block
                         by default with an error-styled confirm rather than the passive WARN. Two
                         actions: resolve (a real BUTTON, not a link — #851 feedback) or the explicit
                         "Launch anyway" override (guards the #850 false-positive case). #}
                      <div class="alert alert-danger mt-2 mb-0" data-test="mcp-approval-block" x-cloak
                           x-show="confirmMcp['{{ p.name }}']" role="group" aria-labelledby="mcp-block-head-{{ p.name }}"
                           x-effect="focusMcpBlock(confirmMcp['{{ p.name }}'], $refs)">
                        <p id="mcp-block-head-{{ p.name }}" class="mb-2"><svg class="ico me-1 text-danger" aria-hidden="true"><use href="#ic-alert"/></svg>This <strong>Interactive Session</strong> will hang at claude's MCP approval prompt and won't connect — the read-only terminal can't answer it. Resolve the unapproved server(s) first.</p>
                        <p class="text-secondary small mb-2" x-text="mcpApprovalMessage('{{ p.name }}')"></p>
                        <div class="btn-list">
                          <button type="button" class="btn btn-sm btn-primary" x-ref="mcpResolveBtn" data-test="mcp-resolve"
                                  @click="resolveMcpApprovals('{{ p.name }}')">Resolve in Server approvals</button>
                          <button type="button" class="btn btn-sm btn-ghost-danger" data-test="mcp-launch-anyway"
                                  :disabled="launching['{{ p.name }}']"
                                  @click="launchAnyway('{{ p.name }}', lmode, lperm, lcloud, lprompt)">Launch anyway</button>
                          <button type="button" class="btn btn-sm btn-ghost-secondary" @click="cancelMcpGate('{{ p.name }}', $refs)">Cancel</button>
                        </div>
                      </div>

                      {# Primary Run action. Hidden while a trust/bypass/MCP gate is showing INSIDE the
                         popover so the gate's own confirm button is the single next step (no competing
                         primary). On a clean launch (no gate pending) launchRun() returns true and the
                         popover closes; when it opens a gate it returns false and the popover stays. #}
                      <button type="button" class="btn btn-primary w-100 mt-2" data-test="launch-run-go" x-ref="launchGo"
                              x-show="!confirmTrust['{{ p.name }}'] && !confirmBypass['{{ p.name }}'] && !confirmMcp['{{ p.name }}']" x-cloak
                              :disabled="launching['{{ p.name }}'] || bgPromptMissing(lmode, lcloud, lprompt)"
                              aria-describedby="bg-prompt-req-{{ p.name }}"
                              @click="launchRunAndClose('{{ p.name }}', lmode, lperm, lcloud, lprompt)">
                        <svg class="ico me-1" aria-hidden="true"><use href="#ic-play"/></svg>Run · <span x-text="permLabel(lperm)"></span>
                      </button>
                      {# Semantic end-of-popover sentinel: a stable structural boundary for tests
                         (so they don't couple to template whitespace/nesting). Renders nothing. #}
                      <div data-test="launch-pop-end" hidden></div>
                    </div>
                  </div>
                </span>
                <div class="card-menu" x-data="{ menu: false }" @click.outside="menu = false"
                     @keydown.escape.window="menu = false">
                  <button type="button" class="btn btn-sm btn-ghost-secondary px-1" @click="menu = !menu"
                          :aria-expanded="menu" aria-haspopup="true" aria-label="More actions" title="More actions">
                    <svg class="ico" aria-hidden="true"><use href="#ic-more"/></svg>
                  </button>
                  <div class="dropdown-menu" x-show="menu" x-cloak>
                    <button type="button" class="dropdown-item" @click="pickClaudeMd()">
                      <svg class="ico me-2" aria-hidden="true"><use href="#ic-edit"/></svg><span
                        x-text="cmd['{{ p.name }}'] && cmd['{{ p.name }}'].open ? 'Close CLAUDE.md' : 'Edit CLAUDE.md'">Edit CLAUDE.md</span>
                    </button>
                  </div>
                </div>
              </span>
            </div>

            <!-- expandables (below the row, full width) -->
            <!-- per-project readiness detail (FE-1b) — the specific warning checks, on demand -->
            <div class="mt-2 ps-1 small" data-test="preflight-detail" role="group"
                 aria-labelledby="readiness-detail-head-{{ p.name }}"
                 x-show="preflightOpen['{{ p.name }}'] && preflightWarnCount('{{ p.name }}') > 0" x-cloak>
              <div id="readiness-detail-head-{{ p.name }}" class="text-secondary fw-medium mb-1">Readiness checks for <code>{{ p.name }}</code> before launch</div>
              <template x-for="c in preflightWarnings('{{ p.name }}')" :key="c.name">
                <div class="d-flex align-items-start gap-1 py-1">
                  <svg class="ico text-warning" aria-hidden="true"><use href="#ic-alert"/></svg>
                  <span><span class="fw-medium text-capitalize" x-text="c.name"></span><span class="text-secondary" x-text="': ' + c.detail"></span>
                    {# #837: an unapproved-server warning is actionable — link straight into
                       this project's Server-approvals panel (project scope, mcp surface)
                       rather than leaving the operator to hunt for it. WARN-only / read-only:
                       this button only navigates, it never approves/rejects/mutates config.
                       Gated on config-write being enabled (same invariant as the navbar
                       trigger in dashboard.html): when config-write is OFF the
                       Server-approvals panel + its /api/config-write/* routes 404, so the
                       link would lead to a dead panel — the WARNING still shows (it's
                       informative), only the dead action is suppressed. config_write_enabled
                       is threaded into BOTH render paths (full page + the api_project_row
                       fragment) so a dynamically-inserted row never wrongly loses the link. #}
                    {% if config_write_enabled %}
                    <button type="button" class="btn btn-link btn-sm p-0 ms-1 align-baseline"
                            x-show="c.name === 'mcp-approval'" x-cloak
                            data-test="mcp-approval-link"
                            @click="openMcpApprovalsFor('{{ p.name }}')">Resolve in Server approvals</button>
                    {% endif %}
                  </span>
                </div>
              </template>
            </div>
            {# The trust-on-start + bypassPermissions confirm gates moved INSIDE the launch
               popover (#686) — they no longer render as separate below-the-row alerts. The
               `data-test="inline-error"` hook is load-bearing: three `.alert-danger.mb-0`
               blocks now share this row (the in-popover bypass-confirm, this transient-action
               error, and the spawn-failure detail below), so a bare `.alert-danger.mb-0`
               selector is ambiguous — tests must target this stable hook. #}
            <div class="alert alert-danger mt-2 mb-0" data-test="inline-error" x-show="errorOf('{{ p.name }}')" x-cloak x-text="errorOf('{{ p.name }}')"></div>

            <!-- Spawn-failure reason (#313): a bridge that started then CRASHED/ERRORED has its
                 captured stderr tail in `error_detail` (None on success), so detailOf() being
                 truthy == a failure to surface. Without this the card went silently dead. Distinct
                 from errorOf above (a transient *action* error). x-text auto-escapes the tail. -->
            <div class="alert alert-danger mt-2 mb-0" x-show="detailOf('{{ p.name }}')" x-cloak role="alert">
              <h4 class="alert-title">Session failed to start</h4>
              <pre class="mb-0 mt-1 text-break detail-pre"
                   tabindex="0" aria-label="Failure detail" x-text="detailOf('{{ p.name }}')"></pre>
            </div>

            <!-- CLAUDE.md editor (overflow-menu action) -->
            <template x-if="cmd['{{ p.name }}'] && cmd['{{ p.name }}'].open">
              <div class="mt-2 border rounded p-2">
                <div class="d-flex align-items-center mb-1">
                  <strong class="me-2">CLAUDE.md</strong>
                  <span class="badge bg-blue-lt me-2" x-show="!cmd['{{ p.name }}'].loading && !cmd['{{ p.name }}'].exists" x-cloak>new file</span>
                  <span class="small ms-auto" :class="{ 'text-danger': cmdBytes('{{ p.name }}') > 65536 }"
                        x-text="cmdBytes('{{ p.name }}') + ' / 65536 bytes'"></span>
                </div>
                <div class="alert alert-warning py-1" x-show="cmd['{{ p.name }}'].bridge_running" x-cloak>
                  <svg class="ico me-1 text-warning" aria-hidden="true"><use href="#ic-alert"/></svg>A session is running — saved changes apply to <strong>new</strong> sessions, not the attached one.</div>
                <div class="alert alert-danger py-1" x-show="cmd['{{ p.name }}'].error" x-cloak x-text="cmd['{{ p.name }}'].error"></div>
                <textarea class="form-control cmd-text" x-model="cmd['{{ p.name }}'].content" rows="12"
                          spellcheck="false" {{ NO_AUTOFILL }} aria-label="CLAUDE.md contents for {{ p.name }}"
                          :disabled="cmd['{{ p.name }}'].loading || cmd['{{ p.name }}'].saving"></textarea>
                <div class="btn-list mt-2">
                  <button type="button" class="btn btn-sm btn-primary" data-test="cmd-save" @click="saveClaudeMd('{{ p.name }}')"
                          :disabled="cmd['{{ p.name }}'].loading || cmd['{{ p.name }}'].saving || cmdBytes('{{ p.name }}') > 65536"
                          x-text="cmd['{{ p.name }}'].saving ? 'Saving…' : 'Save'">Save</button>
                  <button type="button" class="btn btn-sm" data-test="cmd-cancel" @click="closeClaudeMd('{{ p.name }}')">Cancel</button>
                  <span class="text-green" x-show="cmd['{{ p.name }}'].savedAt && !cmd['{{ p.name }}'].error" x-cloak><svg class="ico me-1" aria-hidden="true"><use href="#ic-check"/></svg>saved</span>
                </div>
              </div>
            </template>

            <!-- external (unmanaged) session note — expandable per-session detail -->
            <div class="mt-2" data-test="external-indicator" x-show="hasExternal('{{ p.name }}')" x-cloak>
              <button type="button" data-test="external-toggle"
                      class="btn btn-link btn-sm p-0 text-secondary text-decoration-none d-inline-flex align-items-center"
                      @click="toggleExternalNote('{{ p.name }}')"
                      :aria-expanded="!!externalOpen['{{ p.name }}']"
                      aria-controls="ext-detail-{{ p.name }}"
                      title="A claude session is running in this directory that Clauster didn't start.">
                <span class="status-dot status-dot-animated bg-yellow me-1" aria-hidden="true"></span>
                <span x-text="externalCount('{{ p.name }}') > 1
                  ? externalCount('{{ p.name }}') + ' external sessions active'
                  : 'External session active'"></span>
                <span class="text-muted ms-1">— not managed by Clauster</span>
                <svg class="ico ms-1 text-muted" aria-hidden="true" x-show="externalOpen['{{ p.name }}']"><use href="#ic-caret-down"/></svg><svg class="ico ms-1 text-muted" aria-hidden="true" x-show="!externalOpen['{{ p.name }}']"><use href="#ic-caret-right"/></svg>
              </button>
              <!-- Adopt: take over a *standard* external bridge so Clauster manages it (#330).
                   Server-gated to standard sessions — a pty external session stays display-only. -->
              <button type="button" data-test="adopt-btn"
                      x-show="isAdoptable('{{ p.name }}')" x-cloak
                      class="btn btn-sm btn-outline-primary ms-2 py-0"
                      @click="adopt('{{ p.name }}')"
                      title="Take over this external session so Clauster can Stop and observe it. A later Resume starts a fresh session.">
                Manage
              </button>
              <div class="mt-1 ps-3" id="ext-detail-{{ p.name }}" data-test="external-detail" x-show="externalOpen['{{ p.name }}']" x-cloak>
                <template x-for="s in (externalSessions['{{ p.name }}'] || [])" :key="externalKey(s)">
                  <div class="d-flex align-items-center flex-wrap gap-1 small text-secondary py-1">
                    <span class="badge text-capitalize" :class="externalBadge(s.state)" x-text="s.state || 'active'"></span>
                    <span x-text="'pid ' + s.pid"></span>
                    <span x-show="externalWhen(s)" x-cloak x-text="'· up ' + externalWhen(s)"></span>
                    <code class="text-break" x-show="s.cwd" x-text="s.cwd"></code>
                  </div>
                </template>
              </div>
            </div>
          </div>