{# 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: '', ladv: false }">
            <div class="d-flex align-items-center flex-wrap gap-2">
              <svg class="ico text-success" style="flex:none" 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" style="flex:none" 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" style="font-size:1.02rem; min-width:0; max-width:clamp(10rem, 40vw, 28rem)">{{ 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>

              <!-- 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'">
                <span aria-hidden="true">⚠</span> <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">
                <span class="launch-anchor">
                  <button type="button" class="btn btn-primary" @click="lopen = !lopen" :aria-expanded="lopen">
                    <svg class="ico me-1" aria-hidden="true"><use href="#ic-play"/></svg>Run Claude here
                    <span class="ms-1" x-text="lopen ? '▴' : '▾'">▾</span>
                  </button>
                  <div class="card launch-pop" x-show="lopen" x-cloak @click.outside="lopen = false"
                       @keydown.escape.window="lopen = 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 Fire-and-forget -->
                      <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, "fire-and-forget" undersells it: the session is 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 Fire-and-forget -->
                      <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 Fire-and-forget, 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>
                        <select id="perm-{{ p.name }}" class="form-select form-select-sm" x-model="lperm"
                                aria-describedby="perm-effect-{{ p.name }}"
                                title="What the agent may do without asking: default = prompts each time · plan = read-only planning · acceptEdits = auto-accepts file edits · auto = model auto-approves what it judges safe · dontAsk = never prompts, denies anything not pre-approved{% if p.allow_bypass_permissions %} · bypassPermissions = skips all checks (gated ⚠){% endif %}.">
                          <option value="default">Ask each time (default)</option>
                          <option value="plan">Plan only (read-only)</option>
                          <option value="acceptEdits">Auto-accept edits</option>
                          <option value="auto">Auto-approve safe</option>
                          <option value="dontAsk">Never prompt — deny unknowns</option>
                          {# bypassPermissions only for the Desktop/bridge launch, which carries the
                             typed-confirm footgun guard; reset away from it on other modes (above). #}
                          {% if p.allow_bypass_permissions %}<option value="bypassPermissions" :disabled="lmode !== 'desktop'">Skip all checks ⚠ (Desktop only)</option>{% endif %}
                        </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>
                      <!-- advanced (Desktop / bridge launch only): spawn dir + true-resume mode -->
                      <div class="mt-2" x-show="lmode === 'desktop'" x-cloak>
                        <button type="button" class="btn btn-sm btn-ghost-secondary px-1" @click="ladv = !ladv"
                                :aria-expanded="ladv" x-text="ladv ? 'Hide advanced ⌃' : 'Advanced ⌄'">Advanced ⌄</button>
                        <div class="row g-2 mt-1" x-show="ladv" x-cloak>
                          {# 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-6"
                               {% 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>
                          </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-6"
                               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>
                          <div class="col-6">
                            <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="standard (multi-session bridge) = the claude remote-control server; supports the Spawn options. pty (single-session, true-resume) = one interactive session that restores its prior conversation on Resume; always runs in the project directory.">
                              <option value="standard">standard (multi-session bridge)</option>
                              <option value="pty">pty (single-session, true-resume)</option>
                            </select>
                          </div>
                          {% endif %}
                        </div>
                      </div>
                      <button type="button" class="btn btn-primary w-100 mt-2"
                              :disabled="launching['{{ p.name }}']"
                              @click="launchRun('{{ p.name }}', lmode, lperm, lcloud, lprompt); lopen = false">
                        <svg class="ico me-1" aria-hidden="true"><use href="#ic-play"/></svg>Run · <span x-text="permLabel(lperm)"></span>
                      </button>
                    </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">
                  <span class="text-warning" aria-hidden="true">⚠</span>
                  <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>
            <!-- trust-on-start confirm (bridge / Desktop launch path) -->
            <div class="alert alert-warning mt-2" x-show="confirmTrust['{{ p.name }}']" x-cloak>
              <div>
                <p class="mb-2">⚠ 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-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>
            </div>

            <!-- bypassPermissions typed-confirm -->
            <div class="alert alert-danger mt-2" x-show="confirmBypass['{{ p.name }}']" x-cloak>
              <p class="mb-2">⚠ <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-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>

            <div class="alert alert-danger mt-2 mb-0" 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" style="white-space: pre-wrap; max-height: 12rem; overflow: auto;"
                   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>
                  ⚠ 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>✓ 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>
                <span class="text-muted ms-1" aria-hidden="true"
                      x-text="externalOpen['{{ p.name }}'] ? '▾' : '▸'"></span>
              </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>