{# 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 h-100">
            <div class="card-header">
              <h3 class="card-title text-truncate">{{ p.name }}</h3>
              <div class="card-actions">
                <span class="badge" :class="statusBadgeClass('{{ p.name }}')">
                  <span class="status-dot" :class="statusDotClass('{{ p.name }}')"></span>
                  <span x-text="statusLabel('{{ p.name }}')">Stopped</span>
                </span>
              </div>
            </div>
            <div class="card-body">
              <div class="mb-2">
                {% if p.is_git_repo %}<span class="badge bg-secondary-lt me-1">git</span>{% endif %}
                {% if p.has_claude_md %}<span class="badge bg-azure-lt me-1">CLAUDE.md</span>{% endif %}
                <span class="badge me-1" :class="trustState['{{ p.name }}'] === 'trusted' ? 'bg-green-lt' : 'bg-yellow-lt'"
                      x-text="trustState['{{ p.name }}']">{{ p.trust_state.value }}</span>
                <span class="badge bg-teal-lt me-1" x-show="usageLabel('{{ p.name }}')" x-cloak
                      :title="usageTitle('{{ p.name }}')" x-text="usageLabel('{{ p.name }}')"></span>
                <span class="badge bg-purple-lt me-1" x-show="resumeModeOf('{{ p.name }}') === 'pty'" x-cloak
                      title="Resume restores prior conversation context (single session).">↻ true-resume</span>
              </div>

              <!-- Trust (untrusted only; updates in place) -->
              <button class="btn btn-sm btn-outline-warning mb-2" @click="trust('{{ p.name }}')"
                      x-show="trustState['{{ p.name }}'] === 'untrusted' && !isRunning('{{ p.name }}') && !isBusy('{{ p.name }}') && !isStopping('{{ p.name }}')"
                      x-cloak :disabled="trusting['{{ p.name }}']">
                <span class="spinner-border spinner-border-sm me-1" x-show="trusting['{{ p.name }}']" x-cloak></span>
                <svg class="ico me-1" x-show="!trusting['{{ p.name }}']" x-cloak aria-hidden="true"><use href="#ic-trust"/></svg>Trust directory
              </button>

              <!-- Spawn controls -->
              <div class="row g-2 mb-2" x-show="!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 }}']">
                    <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 }}']">
                    <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 class="btn-list">
                <button class="btn btn-sm btn-success" @click="start('{{ p.name }}')"
                        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 class="btn btn-sm btn-success" @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 class="btn btn-sm btn-outline-secondary" @click="startNew('{{ p.name }}')"
                        x-show="!isRunning('{{ p.name }}') && !isBusy('{{ p.name }}') && !isStopping('{{ p.name }}') && isResumable('{{ p.name }}')" x-cloak
                        title="Start a new session instead of resuming the prior one."><svg class="ico me-1" aria-hidden="true"><use href="#ic-play"/></svg>Start new session</button>
                <button class="btn btn-sm btn-danger" @click="stop('{{ p.name }}')"
                        x-show="isRunning('{{ p.name }}') || isStopping('{{ p.name }}')" x-cloak
                        :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>
                <button class="btn btn-sm" @click="toggleClaudeMd('{{ p.name }}')">
                  <svg class="ico me-1" 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>

              <!-- 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 class="btn btn-danger" @click="confirmBypassStart('{{ p.name }}')">Start with bypass</button>
                  <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 class="btn btn-sm btn-warning" @click="confirmNewStart('{{ p.name }}')">Start new session</button>
                  <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 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 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>
                <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 }}')"><svg class="ico me-1" aria-hidden="true"><use href="#ic-open"/></svg>Open session in Claude</a>
                  <button class="btn btn-sm" @click="copy(sessionUrlOf('{{ p.name }}'))"><svg class="ico me-1" aria-hidden="true"><use href="#ic-copy"/></svg>copy</button>
                  <button class="btn btn-sm" @click="toggleQr('{{ p.name }}')"><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 }}')">New session</a>
                  <button class="btn btn-sm btn-ghost-secondary" @click="copy(envUrlOf('{{ p.name }}'))">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 class="btn btn-sm btn-ghost-secondary" @click="toggleLogs('{{ p.name }}')">
                  <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 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 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>