{# Single project card. Rendered both by the dashboard grid loop and by
   GET /api/projects/{name}/card for reactive insertion (no full reload). #}
        <div class="col-md-6 col-xl-4" data-project="{{ p.name }}">
          <div class="card">
            <div class="card-header">
              <div class="d-flex align-items-center gap-2" style="min-width:0">
                <h3 class="card-title text-truncate fw-bold mb-0" style="font-size:1.05rem">{{ p.name }}</h3>
                <!-- Trusted confirmation: a green shield-check by the name once the dir is
                     trusted (so a bridge starts without the trust prompt). Untrusted shows
                     nothing here — that surfaces just-in-time on Start. -->
                <svg class="ico text-success" style="flex:none" x-cloak
                     x-show="trustState['{{ p.name }}'] === 'trusted'"
                     title="Directory trusted"><use href="#ic-trust"/></svg>
              </div>
              <div class="card-actions d-flex align-items-center gap-2">
                <span class="badge" :class="statusBadgeClass('{{ p.name }}')"
                      role="status" aria-live="polite" :title="statusTitle('{{ p.name }}')">
                  <span class="status-dot" :class="statusDotClass('{{ p.name }}')"></span>
                  <span x-text="statusLabel('{{ p.name }}')">Stopped</span>
                </span>
                <!-- Tier 4: secondary / rare actions tucked into a "···" overflow menu so
                     the body keeps a single primary action. Alpine toggles it (no Bootstrap JS). -->
                <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>
                    <button type="button" class="dropdown-item" @click="startNew('{{ p.name }}'); menu = false"
                            x-show="!isRunning('{{ p.name }}') && !isBusy('{{ p.name }}') && !isStopping('{{ p.name }}') && isResumable('{{ p.name }}')" x-cloak>
                      <svg class="ico me-2" aria-hidden="true"><use href="#ic-play"/></svg>Start new session
                    </button>
                  </div>
                </div>
              </div>
            </div>
            <div class="card-body">
              <div x-data="{ adv: false }">
                <!-- Tier 2 quiet meta-row (facts), with the Tier-3 "Options" toggle right-
                     aligned on the SAME line (shown only when a fresh Start is offered). -->
                <div class="d-flex align-items-center mb-2">
                  <div class="text-secondary small project-meta" data-meta="attributes">
                    {% 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 repo</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 %}
                    <!-- Trust is shown by the green shield-check next to the name (header). -->
                    <span x-show="usageLabel('{{ p.name }}')" x-cloak
                          :title="usageTitle('{{ p.name }}')" x-text="usageLabel('{{ p.name }}')"></span>
                    <span class="text-purple" x-show="resumeModeOf('{{ p.name }}') === 'pty'" x-cloak
                          title="Resume restores prior conversation context (single session).">↻ true-resume</span>
                  </div>
                  <button type="button" class="btn btn-sm btn-ghost-secondary px-1 ms-auto flex-shrink-0" @click="adv = !adv"
                          x-show="!isRunning('{{ p.name }}') && !isBusy('{{ p.name }}') && !isStopping('{{ p.name }}') && !isResumable('{{ p.name }}')" x-cloak
                          :aria-expanded="adv" title="Override the spawn / permission / mode defaults for this start."
                          x-text="adv ? 'Hide options ⌃' : 'Options ⌄'">Options ⌄</button>
                </div>

                <!-- recoverable, you-didn't-end-it states (interrupted / crashed): a one-line why + nudge -->
                <div class="text-warning small mb-2" x-show="statusNote('{{ p.name }}')" x-cloak
                     x-text="statusNote('{{ p.name }}')"></div>

                <!-- Spawn / permissions / mode — revealed by the Options toggle above. Start
                     uses the configured defaults; expand to override. -->
                <div class="row g-2 mb-2"
                     x-show="adv && !isRunning('{{ p.name }}') && !isBusy('{{ p.name }}') && !isStopping('{{ p.name }}') && !isResumable('{{ p.name }}')" x-cloak>
                  <div class="col-6">
                    <label class="form-label small mb-1">Spawn</label>
                    <select 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>
                  <div class="col-6">
                    <label class="form-label small mb-1">Permissions</label>
                    <select class="form-select form-select-sm" x-model="permMode['{{ p.name }}']"
                            title="How much the agent may do without asking: default prompts · plan = read-only planning · acceptEdits auto-accepts file edits · auto · dontAsk · bypassPermissions runs tools with no prompts (gated).">
                      <option value="default">default</option>
                      <option value="plan">plan</option>
                      <option value="acceptEdits">acceptEdits</option>
                      <option value="auto">auto</option>
                      <option value="dontAsk">dontAsk</option>
                      {% if p.allow_bypass_permissions %}<option value="bypassPermissions">bypassPermissions ⚠</option>{% endif %}
                    </select>
                  </div>
                  {% if pty_supported %}
                  <div class="col-6">
                    <label class="form-label small mb-1">Mode</label>
                    <select class="form-select form-select-sm" x-model="resumeMode['{{ p.name }}']"
                            title="standard = multi-session server. pty = single-session true-resume (restores prior conversation on Resume).">
                      <option value="standard">standard</option>
                      <option value="pty">pty (true-resume)</option>
                    </select>
                  </div>
                  {% endif %}
                </div>
              </div>

              <hr class="my-2">
              <!-- Tier 1: exactly one primary action per state, full-width at the card foot. -->
              <div class="btn-list">
                <button type="button" class="btn btn-success w-100" @click="start('{{ p.name }}')"
                        :disabled="confirmTrust['{{ p.name }}'] || confirmBypass['{{ p.name }}']"
                        title="Start a managed bridge for this project."
                        x-show="!isRunning('{{ p.name }}') && !isBusy('{{ p.name }}') && !isStopping('{{ p.name }}') && !isResumable('{{ p.name }}')" x-cloak><svg class="ico me-1" aria-hidden="true"><use href="#ic-play"/></svg>Start bridge</button>
                <button type="button" class="btn btn-success w-100" @click="resume('{{ p.name }}')"
                        x-show="!isRunning('{{ p.name }}') && !isBusy('{{ p.name }}') && !isStopping('{{ p.name }}') && isResumable('{{ p.name }}')" x-cloak
                        :title="'Resume the bridge — reconnects its prior session and keeps ' + resumeModeOf('{{ p.name }}') + ' mode.'"><svg class="ico me-1" aria-hidden="true"><use href="#ic-restart"/></svg>Resume</button>
                <button type="button" class="btn btn-danger w-100" @click="stop('{{ p.name }}')"
                        x-show="isRunning('{{ p.name }}') || isStopping('{{ p.name }}')" x-cloak
                        title="Signal the bridge to shut down gracefully (SIGINT)."
                        :disabled="isStopping('{{ p.name }}')">
                  <span class="spinner-border spinner-border-sm me-1" x-show="isStopping('{{ p.name }}')" x-cloak></span>
                  <svg class="ico me-1" x-show="!isStopping('{{ p.name }}')" x-cloak aria-hidden="true"><use href="#ic-stop"/></svg>
                  <span x-text="isStopping('{{ p.name }}') ? 'Stopping…' : 'Stop bridge'">Stop bridge</span>
                </button>
                <span class="text-secondary small" style="display:inline-flex; align-items:center" x-show="isBusy('{{ p.name }}')" x-cloak>
                  <span class="spinner-border spinner-border-sm me-1"></span>starting…</span>
              </div>

              <!-- trust-on-start confirm: an untrusted dir prompts on Start (like Claude
                   Code's "Do you trust the files in this folder?"), then trusts + spawns.
                   Wrapped in one div because Tabler's .alert is display:flex (else the text
                   and buttons split into two columns). The checkbox guards the action so an
                   accidental click can't trust the dir + run its code. -->
              <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>? Starting a bridge 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 justify-content-center">
                    <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 }}"
                         @keyup.enter="confirmBypassStart('{{ p.name }}')">
                  <button type="button" class="btn btn-danger" @click="confirmBypassStart('{{ p.name }}')">Start with bypass</button>
                  <button type="button" class="btn" @click="cancelBypass('{{ p.name }}')">Cancel</button>
                </div>
              </div>

              <!-- start-new-session warning (distinct from Resume) -->
              <div class="alert alert-warning mt-2" x-show="confirmNew['{{ p.name }}']" x-cloak>
                <p class="mb-2">⚠ Start a <strong>new session</strong> in <code>{{ p.name }}</code>? This launches a
                  fresh bridge — it won't restore the prior session, and <strong>Resume</strong> may no longer reach it
                  (a pty Resume continues the most-recent transcript, which a new session displaces).</p>
                <div class="btn-list">
                  <button type="button" class="btn btn-sm btn-warning" @click="confirmNewStart('{{ p.name }}')">Start new session</button>
                  <button type="button" class="btn btn-sm" @click="cancelNew('{{ 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>
              <!-- server-side startup failure detail (bridge stderr tail) -->
              <pre class="card-detail" x-show="statusOf('{{ p.name }}') === 'error' && detailOf('{{ p.name }}')"
                   x-cloak x-text="detailOf('{{ p.name }}')"></pre>

              <!-- CLAUDE.md editor -->
              <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 bridge 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"
                            :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 -->
              <div class="mt-2 text-secondary small" x-show="hasExternal('{{ p.name }}')" x-cloak
                   title="A claude session is running in this directory that Clauster didn't start — Start/Stop/Resume here don't control it.">
                <span class="status-dot status-dot-animated bg-yellow me-1"></span>
                <span x-text="externalCount('{{ p.name }}') > 1
                  ? externalCount('{{ p.name }}') + ' external sessions active'
                  : 'External session active'"></span>
                <span class="text-muted">— not managed by Clauster</span>
              </div>

              <!-- session URLs + QR -->
              <div class="mt-2" x-show="isRunning('{{ p.name }}') && sessionUrlOf('{{ p.name }}')" x-cloak>
                <div class="btn-list">
                  <a class="btn btn-sm btn-primary" target="_blank" rel="noopener" :href="sessionUrlOf('{{ p.name }}')" title="Open this session in the Claude web app."><svg class="ico me-1" aria-hidden="true"><use href="#ic-open"/></svg>Open session in Claude</a>
                  <button type="button" class="btn btn-sm" @click="copy(sessionUrlOf('{{ p.name }}'))" title="Copy the session link to the clipboard."><svg class="ico me-1" aria-hidden="true"><use href="#ic-copy"/></svg>copy</button>
                  <button type="button" class="btn btn-sm" @click="toggleQr('{{ p.name }}')" title="Show a QR code of the session link to open it on your phone."><svg class="ico me-1" aria-hidden="true"><use href="#ic-qr"/></svg><span x-text="qrOpen['{{ p.name }}'] ? 'hide QR' : 'QR'">QR</span></button>
                </div>
                <div class="btn-list mt-1" x-show="envUrlOf('{{ p.name }}')" x-cloak>
                  <a class="btn btn-sm btn-ghost-secondary" target="_blank" rel="noopener" :href="envUrlOf('{{ p.name }}')" title="Open a new session in this bridge's environment (a fresh conversation).">New session</a>
                  <button type="button" class="btn btn-sm btn-ghost-secondary" @click="copy(envUrlOf('{{ p.name }}'))" title="Copy the new-session link to the clipboard.">copy</button>
                </div>
                <template x-if="qrOpen['{{ p.name }}']">
                  <div class="qr-box mt-2">
                    <img :src="qrSrc('{{ p.name }}')" alt="QR code for the session deep link" width="160" height="160">
                  </div>
                </template>
              </div>

              <!-- bridge log tail -->
              <div class="mt-2" x-show="isRunning('{{ p.name }}')" x-cloak>
                <button type="button" class="btn btn-sm btn-ghost-secondary" @click="toggleLogs('{{ p.name }}')"
                        title="Stream the bridge's live log (ANSI stripped, secrets redacted).">
                  <svg class="ico me-1" aria-hidden="true"><use href="#ic-logs"/></svg><span
                    x-text="logs['{{ p.name }}'] && logs['{{ p.name }}'].open ? 'Hide logs' : 'Show logs'">Show logs</span></button>
                <template x-if="logs['{{ p.name }}'] && logs['{{ p.name }}'].open">
                  <div class="mt-2">
                    <div class="btn-list mb-1">
                      <button type="button" class="btn btn-sm" @click="logs['{{ p.name }}'].paused ? resumeLogs('{{ p.name }}') : pauseLogs('{{ p.name }}')"
                              x-text="logs['{{ p.name }}'].paused ? 'Resume' : 'Pause'"></button>
                      <button type="button" class="btn btn-sm" @click="jumpToLatest('{{ p.name }}')">Jump to latest</button>
                      <span class="text-secondary small" style="display:inline-flex; align-items:center" x-show="logs['{{ p.name }}'].paused" x-cloak>paused
                        (<span x-text="logs['{{ p.name }}'].pending.length"></span> buffered)</span>
                    </div>
                    <pre class="log-view bg-dark text-white rounded p-2" :id="'log-' + '{{ p.name }}'"
                         x-text="logs['{{ p.name }}'].lines.join('\n')"></pre>
                  </div>
                </template>
              </div>
            </div>
          </div>
        </div>