{# 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). #}
          <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="{ lopen: false, lmode: DEFAULT_LAUNCH_MODE, lperm: DEFAULT_PERMISSION_MODE, lcloud: false, lprompt: '', mopen: false }"
               @launch-pop-close.window="if ($event.detail.name === '{{ p.name }}') { lopen = false; mopen = false }">
            <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 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="lopen = !lopen; if (lopen) coerceSpawnMode('{{ p.name }}', {{ 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="lopen = false; mopen = false; confirmTrust['{{ p.name }}'] = false; confirmBypass['{{ p.name }}'] = false"
                       @keydown.escape.window="lopen = false; mopen = false; confirmTrust['{{ p.name }}'] = false; confirmBypass['{{ p.name }}'] = false">
                    <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="if (lmode !== 'desktop' && lperm === 'bypassPermissions') lperm = DEFAULT_PERMISSION_MODE">
                          <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" x-model="lcloud">
                        <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>
                      <!-- optional first prompt for Background -->
                      <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">(optional)</span></label>
                        <input id="lprompt-{{ p.name }}" class="form-control form-control-sm" x-model="lprompt" placeholder="Initial instruction…">
                      </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 }}"
                                    title="Server Mode (multi-session bridge) = the claude remote-control server; supports the Spawn options. Interactive Session (single-session, true-resume) = one interactive session that restores its prior conversation on Resume; always runs in the project directory.">
                              <option value="standard">Server Mode (multi-session bridge)</option>
                              <option value="pty">Interactive Session (single-session, true-resume)</option>
                            </select>
                          </div>
                          {% endif %}
                          {# Spawn only applies to the standard (multi-session) bridge — it maps to
                             `claude remote-control --spawn`. pty is a single interactive session run
                             under the keeper with no `--spawn`, so it ignores these; hide them in pty
                             mode rather than offer no-op choices. #}
                          <div class="col-12"
                               {% if pty_supported %}x-show="(resumeMode['{{ p.name }}'] || DEFAULT_RESUME_MODE) !== 'pty'" x-cloak{% endif %}>
                            <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.">
                              <option value="same-dir">same-dir</option>
                              {% if p.is_git_repo %}<option value="worktree">worktree</option>{% endif %}
                              <option value="session">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 %}
                          {# 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 }}'] || DEFAULT_RESUME_MODE) === '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 session in the project directory.</p>
                            </div>
                          </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" data-test="trust-confirm" x-show="confirmTrust['{{ p.name }}']" x-cloak role="group" aria-labelledby="trust-head-{{ p.name }}"
                           x-effect="if (confirmTrust['{{ p.name }}']) $nextTick(() => $refs.trustCheck && $refs.trustCheck.focus())">
                        <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 }}']">
                          <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="if (confirmBypass['{{ p.name }}']) $nextTick(() => $refs.bypassInput && $refs.bypassInput.focus())">
                        <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 }}')">
                          <button type="button" class="btn btn-danger" @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>

                      {# Primary Run action. Hidden while a trust/bypass 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-show="!confirmTrust['{{ p.name }}'] && !confirmBypass['{{ p.name }}']" x-cloak
                              :disabled="launching['{{ p.name }}']"
                              @click="launchRun('{{ p.name }}', lmode, lperm, lcloud, lprompt).then(done => { if (done) lopen = false })">
                        <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="toggleClaudeMd('{{ p.name }}'); menu = false">
                      <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></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" autocomplete="off" 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" @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" @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" 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>