<!-- ═══ Projects View ═══ -->
<div
  x-show="activeView === 'projects'"
  x-cloak
  style="height: calc(100vh - 3.5rem); overflow-y: auto"
  x-data="{
    projectSearch: '',
    confirmArchivePath: null,
    showArchived: false,
    /**
     * Choose the badge style shown beside a saved project in the Projects view.
     * Use when a user scans the project list and needs the recommended next step to read visually.
     *
     * @param projectRow - saved dashboard project; missing or empty `action` means the UI has no specific next step yet
     * @returns CSS badge class for the project action, or a muted badge for an action with no badge of its own
     */
    projectActionBadgeClass(projectRow) {
      // Set up and current; the audit is only the deeper per-agent check.
      if (projectRow.action === 'audit') return 'gf-badge-pass';

      // Installed, but behind the current release.
      if (projectRow.action === 'upgrade') return 'gf-badge-warn';

      // Pre-1.0 layout with retired skill names; a plain setup run would leave them in place.
      if (projectRow.action === 'migration') return 'gf-badge-high';

      // A half-finished install, or another agent's instructions with no goat-flow beside them.
      if (projectRow.action === 'setup') return 'gf-badge-ap';

      // Not repair work: the manifest probe threw, so the real state is unknown rather than bad.
      // Shares the setup badge - both mean act on the row before trusting what it says.
      if (projectRow.action === 'fix') return 'gf-badge-ap';

      // Also where 'incomplete' lands - a current project missing pieces, with no badge of its own.
      return 'gf-badge-muted';
    },
    /**
     * Return the Projects table rows matching the user's search text.
     * Use while the user types in the filter box above a longer saved-project list.
     *
     * @returns matching project rows, or every sorted row when the search box is empty
     */
    get filteredProjects() {
      const searchText = this.projectSearch.toLowerCase().trim();
      const visibleProjects = this.activeProjects;

      // Empty search means the user wants the normal sorted Projects table.
      if (!searchText) return visibleProjects;

      // Each row is checked against the same visible fields the user can scan in the table.
      return visibleProjects.filter(projectRow => {
        const visibleName = this.displayNameFor(projectRow.path);
        return visibleName.toLowerCase().includes(searchText) || (projectRow.state || '').toLowerCase().includes(searchText) || (projectRow.action || '').toLowerCase().includes(searchText);
      });
    },
    /**
     * Return active sorted projects while archived records remain recoverable below the table.
     */
    get activeProjects() {
      return this.sortedProjectsList.filter(projectRow => !projectRow.archivedAt);
    },
    /** Return retained archived projects for the collapsible recovery section. */
    get archivedProjects() {
      return this.sortedProjectsList.filter(projectRow => Boolean(projectRow.archivedAt));
    },
    /**
     * Count active projects by the state shown in the summary bar.
     * Use when the user scans the Projects header before opening individual rows.
     *
     * @returns state counts for visible summary chips, with `unknown` for rows not refreshed yet
     */
    projectStateCounts() {
      const counts = {};
      // Each saved row contributes to the summary the user sees above the table.
      for (const projectRow of this.activeProjects) {
        const key = projectRow.state || 'unknown';
        counts[key] = (counts[key] || 0) + 1;
      }
      return counts;
    },
    /** Return truthful user-facing copy for an internal recommended action. */
    projectActionLabel(projectRow) {
      if (projectRow.action === 'audit') return 'Open audit';
      if (projectRow.action === 'setup') return 'Open setup';
      if (projectRow.action === 'migration') return 'Migrate';
      if (projectRow.action === 'upgrade') return 'Upgrade';
      if (projectRow.action === 'fix') return 'Fix';
      return projectRow.action || 'Open';
    },
    /**
     * Open the dashboard flow that matches a project's recommended action.
     * Use when the user clicks the action button in a Projects table row.
     *
     * @param projectRow - saved dashboard project; missing action falls back to the audit flow
     * @returns nothing; navigation and audit/setup state update the visible dashboard view
     */
    openProjectRecommendedAction(projectRow) {
      // Audit-ready projects open Home and start an audit for that workspace.
      if (projectRow.action === 'audit') {
        this.projectPath = projectRow.path; this.activeView = 'home'; this.runAudit();
      } else if (projectRow.action === 'setup') {
        // Setup gaps open the Setup view so the user can install missing harness pieces.
        this.projectPath = projectRow.path; this.activeView = 'setup'; this.detectStack();
      } else if (projectRow.action === 'migration' || projectRow.action === 'upgrade') {
        // Migration and upgrade actions also start in Setup because the user needs environment detection first.
        this.projectPath = projectRow.path; this.activeView = 'setup'; this.detectStack();
      } else {
        // Unknown actions fall back to audit so the user gets fresh project guidance.
        this.projectPath = projectRow.path; this.activeView = 'home'; this.runAudit();
      }
    }
  }"
>
  <div style="max-width: 1100px; margin: 0 auto; padding: 20px 28px 24px">
    <!-- Header -->
    <div
      style="
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;
      "
    >
      <span class="gf-text-primary" style="font-size: 20px; font-weight: 500"
        >Projects</span
      >
      <div style="display: flex; gap: 8px">
        <button
          @click="refreshProjectStatuses()"
          :disabled="projectsRefreshing"
          class="gf-btn gf-btn-md gf-btn-secondary"
        >
          <span
            x-text="projectsRefreshing ? 'Refreshing...' : 'Refresh Status'"
          ></span>
        </button>
        <button
          @click="showAddProject = true; $nextTick(() => $refs.addProjectInput?.focus())"
          class="gf-btn gf-btn-md gf-btn-primary"
        >
          Add Project
        </button>
      </div>
    </div>

    <!-- Summary bar -->
    <div
      x-show="activeProjects.length > 0"
      class="gf-text-muted"
      style="
        font-size: 12px;
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
      "
    >
      <span
        x-text="`${activeProjects.length} project${activeProjects.length !== 1 ? 's' : ''}`"
        class="gf-text-secondary"
        style="font-weight: 500"
      ></span>
      <span style="opacity: 0.4">&#8212;</span>
      <template
        x-for="[state, count] in Object.entries(projectStateCounts())"
        :key="'sum-' + state"
      >
        <span>
          <span x-text="count" style="font-weight: 600"></span>
          <span x-text="state"></span>
          <span style="opacity: 0.3; margin: 0 2px">&#183;</span>
        </span>
      </template>
    </div>

    <!-- Search filter -->
    <div x-show="activeProjects.length > 3" style="margin-bottom: 12px">
      <input
        type="text"
        x-model="projectSearch"
        class="gf-input"
        style="
          width: 100%;
          font-size: 12px;
          padding: 7px 12px;
          border-radius: 6px;
          outline: none;
        "
        placeholder="Filter projects..."
      />
    </div>

    <!-- Add project panel -->
    <div
      x-show="showAddProject"
      x-cloak
      class="gf-card"
      style="padding: 14px 16px; margin-bottom: 16px"
    >
      <div
        class="gf-text-secondary"
        style="font-size: 12px; font-weight: 500; margin-bottom: 8px"
      >
        Add project path
      </div>
      <div style="display: flex; gap: 8px">
        <input
          type="text"
          x-model="newProjectPath"
          x-ref="addProjectInput"
          class="gf-input"
          style="
            flex: 1;
            font-family: var(--font-mono);
            font-size: 12px;
            padding: 6px 10px;
            border-radius: 6px;
            outline: none;
          "
          placeholder="/path/to/project"
          @keydown.enter="addProject()"
        />
        <button @click="addProject()" class="gf-btn gf-btn-md gf-btn-primary">
          Add
        </button>
        <button
          @click="showAddProject = false; openBrowser()"
          class="gf-btn gf-btn-md gf-btn-secondary"
        >
          Browse
        </button>
        <button
          @click="showAddProject = false; newProjectPath = ''"
          class="gf-btn gf-btn-md gf-btn-text"
          style="background: none; border: none; color: var(--text-muted)"
        >
          Cancel
        </button>
      </div>
    </div>

    <!-- Projects table -->
    <div
      x-show="activeProjects.length > 0"
      class="gf-card"
      style="border-radius: 8px; overflow: hidden; margin-bottom: 20px"
    >
      <table style="width: 100%; border-collapse: collapse">
        <thead>
          <tr>
            <template
              x-for="col in [{label: 'Project', key: 'name'}, {label: 'State', key: 'state'}, {label: 'Action', key: 'action'}, {label: 'Details', key: 'details'}, {label: '', key: null}]"
            >
              <th
                class="gf-th"
                :style="col.key ? 'cursor: pointer; user-select: none;' : ''"
                @click="col.key && sortProjects(col.key)"
              >
                <span x-text="col.label"></span>
                <span
                  x-show="col.key && projectsSortKey === col.key"
                  x-text="projectsSortAsc ? ' ▲' : ' ▼'"
                  style="font-size: 9px; opacity: 0.6"
                ></span>
              </th>
            </template>
          </tr>
        </thead>
        <tbody>
          <template
            x-for="project in filteredProjects"
            :key="project.identity || project.path"
          >
            <tr class="gf-tr">
              <!-- Project name (clickable → home view) -->
              <td class="gf-td">
                <button
                  @click="projectPath = project.path; activeView = 'home'; runAudit()"
                  style="
                    background: none;
                    border: none;
                    padding: 0;
                    cursor: pointer;
                    text-align: left;
                    color: var(--text-primary);
                    font-size: 12px;
                    font-family: var(--font-mono);
                  "
                  @mouseenter="$el.style.color = 'var(--accent)'"
                  @mouseleave="$el.style.color = 'var(--text-primary)'"
                >
                  <span x-text="displayNameFor(project.path)"></span>
                </button>
                <div
                  class="gf-text-muted"
                  style="
                    font-size: 10px;
                    margin-top: 1px;
                    max-width: 200px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                  "
                  x-text="project.path"
                  :title="project.path"
                ></div>
                <div
                  x-show="project.paths && project.paths.length > 1"
                  class="gf-text-muted"
                  style="
                    font-size: 10px;
                    margin-top: 1px;
                    max-width: 200px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                  "
                  x-text="'Aliases: ' + project.paths.length"
                  :title="project.paths.join('\n')"
                ></div>
              </td>
              <!-- State badge (color-coded) -->
              <td class="gf-td">
                <span
                  style="
                    padding: 1px 6px;
                    border-radius: 4px;
                    font-size: 11px;
                    font-weight: 600;
                  "
                  :class="projectActionBadgeClass(project)"
                  x-text="project.state"
                ></span>
              </td>
              <!-- Action (clickable button) -->
              <td class="gf-td">
                <button
                  @click="openProjectRecommendedAction(project)"
                  style="
                    background: none;
                    border: none;
                    padding: 0;
                    cursor: pointer;
                    font-size: 12px;
                    font-weight: 500;
                    color: var(--accent);
                  "
                  @mouseenter="$el.style.textDecoration = 'underline'"
                  @mouseleave="$el.style.textDecoration = 'none'"
                  x-text="projectActionLabel(project)"
                ></button>
              </td>
              <!-- Details (truncated, full text in tooltip) -->
              <td class="gf-td">
                <span
                  class="gf-text-muted"
                  style="
                    font-size: 11px;
                    display: block;
                    max-width: 220px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                  "
                  x-text="project.details"
                  :title="project.details"
                ></span>
              </td>
              <!-- Actions -->
              <td class="gf-td" style="text-align: right; white-space: nowrap">
                <button
                  @click="projectPath = project.path; activeView = 'workspace'"
                  x-show="terminalAvailable"
                  class="gf-btn gf-btn-sm gf-btn-ghost"
                  style="margin-right: 4px"
                >
                  Terminal
                </button>
                <!-- Archive with confirmation -->
                <button
                  x-show="confirmArchivePath !== project.path"
                  @click="confirmArchivePath = project.path"
                  class="gf-btn gf-btn-sm"
                  style="
                    background: none;
                    border: none;
                    color: var(--text-muted);
                    font-size: 11px;
                    padding: 2px 6px;
                  "
                  @mouseenter="$el.style.color = 'var(--accent)'"
                  @mouseleave="$el.style.color = 'var(--text-muted)'"
                >
                  Archive
                </button>
                <span
                  x-show="confirmArchivePath === project.path"
                  style="display: inline-flex; align-items: center; gap: 4px"
                >
                  <span class="gf-text-muted" style="font-size: 11px"
                    >Archive?</span
                  >
                  <button
                    @click="archiveProject(project.path); confirmArchivePath = null"
                    class="gf-btn gf-btn-sm gf-btn-secondary"
                    style="font-size: 11px; padding: 1px 6px"
                  >
                    Yes
                  </button>
                  <button
                    @click="confirmArchivePath = null"
                    class="gf-btn gf-btn-sm"
                    style="
                      background: none;
                      border: none;
                      color: var(--text-muted);
                      font-size: 11px;
                      padding: 1px 6px;
                    "
                  >
                    No
                  </button>
                </span>
              </td>
            </tr>
          </template>
        </tbody>
      </table>
      <!-- No search results -->
      <div
        x-show="projectSearch && filteredProjects.length === 0"
        class="gf-empty-state"
        style="padding: 24px 16px"
      >
        <span class="gf-empty-mark">⌕</span>
        <p>No projects match filter</p>
      </div>
    </div>

    <!-- Archived projects remain recoverable and hidden until the user expands them. -->
    <div x-show="archivedProjects.length > 0" style="margin-bottom: 20px">
      <button
        @click="showArchived = !showArchived"
        class="gf-btn gf-btn-md gf-btn-ghost"
        style="margin-bottom: 8px"
      >
        <span x-text="showArchived ? 'Hide archived' : 'Show archived'"></span>
        <span x-text="` (${archivedProjects.length})`"></span>
      </button>
      <div
        x-show="showArchived"
        class="gf-card"
        style="border-radius: 8px; overflow: hidden"
      >
        <template
          x-for="project in archivedProjects"
          :key="'archived-' + (project.identity || project.path)"
        >
          <div
            style="
              display: flex;
              align-items: center;
              justify-content: space-between;
              gap: 16px;
              padding: 10px 12px;
              border-bottom: 1px solid var(--border-subtle);
            "
          >
            <div style="min-width: 0">
              <div
                class="gf-text-secondary"
                style="font-family: var(--font-mono); font-size: 12px"
                x-text="displayNameFor(project.path)"
              ></div>
              <div
                class="gf-text-muted"
                style="
                  font-family: var(--font-mono);
                  font-size: 10px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                "
                x-text="project.path"
                :title="project.path"
              ></div>
            </div>
            <button
              @click="restoreProject(project.path)"
              class="gf-btn gf-btn-sm gf-btn-secondary"
            >
              Restore
            </button>
          </div>
        </template>
      </div>
    </div>

    <!-- Empty state -->
    <div
      x-show="activeProjects.length === 0"
      class="gf-surface gf-empty-state"
      style="border-radius: 8px; margin-bottom: 20px"
    >
      <span class="gf-empty-mark">PR</span>
      <p>No active projects. Add a project or restore one from the archive.</p>
    </div>

    <!-- Footer -->
    <div
      class="gf-footer"
      style="text-align: center; font-size: 11px; padding: 16px 0 8px"
    >
      Built by
      <a
        href="https://www.blundergoat.com"
        target="_blank"
        class="gf-footer-link"
        >BlunderGOAT</a
      >
      · <span x-text="dashboardVersion ? `v${dashboardVersion}` : ''"></span>
    </div>
  </div>
</div>