amc/dashboard/components/Sidebar.js

import { html } from '../lib/preact.js';
import { getStatusMeta, STATUS_PRIORITY } from '../utils/status.js';

export function Sidebar({ projectGroups, selectedProject, onSelectProject, totalSessions }) {
  // Calculate totals for "All Projects"
  const allStatusCounts = { needs_attention: 0, active: 0, starting: 0, done: 0 };
  for (const group of projectGroups) {
    for (const s of group.sessions) {
      allStatusCounts[s.status] = (allStatusCounts[s.status] || 0) + 1;
    }
  }

  // Worst status across all projects
  const allWorstStatus = totalSessions > 0
    ? Object.keys(allStatusCounts).reduce((worst, status) =>
        allStatusCounts[status] > 0 && (STATUS_PRIORITY[status] ?? 99) < (STATUS_PRIORITY[worst] ?? 99) ? status : worst
      , 'done')
    : 'done';
  const allWorstMeta = getStatusMeta(allWorstStatus);

  // Tiny inline status indicator
  const StatusPips = ({ counts }) => html`
    <div class="flex items-center gap-1 shrink-0">
      ${counts.needs_attention > 0 && html`<span class="rounded-full bg-attention/20 px-1.5 py-0.5 font-mono text-micro tabular-nums text-attention">${counts.needs_attention}</span>`}
      ${counts.active > 0 && html`<span class="rounded-full bg-active/20 px-1.5 py-0.5 font-mono text-micro tabular-nums text-active">${counts.active}</span>`}
      ${counts.starting > 0 && html`<span class="rounded-full bg-starting/20 px-1.5 py-0.5 font-mono text-micro tabular-nums text-starting">${counts.starting}</span>`}
      ${counts.done > 0 && html`<span class="rounded-full bg-done/15 px-1.5 py-0.5 font-mono text-micro tabular-nums text-done/70">${counts.done}</span>`}
    </div>
  `;

  return html`
    <aside class="fixed left-0 top-0 z-40 flex h-screen w-80 flex-col border-r border-selection/50 bg-surface/95 backdrop-blur-sm">
      <!-- Sidebar Header -->
      <div class="shrink-0 border-b border-selection/50 px-5 py-4">
        <div class="inline-flex items-center gap-2 rounded-full border border-starting/40 bg-starting/10 px-2.5 py-0.5 text-micro font-medium uppercase tracking-[0.2em] text-starting">
          <span class="h-1.5 w-1.5 rounded-full bg-starting animate-float"></span>
          Control Plane
        </div>
        <h1 class="mt-2 font-display text-lg font-semibold text-bright">
          Agent Mission Control
        </h1>
      </div>

      <!-- Project List -->
      <nav class="flex-1 overflow-y-auto px-3 py-3">
        <!-- All Projects -->
        <button
          onClick=${() => onSelectProject(null)}
          class="group flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-left transition-all ${
            selectedProject === null
              ? 'bg-selection/50'
              : 'hover:bg-selection/25'
          }"
        >
          <span class="h-2 w-2 shrink-0 rounded-full ${allWorstMeta.dot}"></span>
          <span class="flex-1 truncate font-medium text-bright">All Projects</span>
          <${StatusPips} counts=${allStatusCounts} />
        </button>

        <!-- Divider -->
        <div class="my-2 border-t border-selection/30"></div>

        <!-- Individual Projects -->
        ${projectGroups.map(group => {
          const statusCounts = { needs_attention: 0, active: 0, starting: 0, done: 0 };
          for (const s of group.sessions) {
            statusCounts[s.status] = (statusCounts[s.status] || 0) + 1;
          }

          const worstStatus = group.sessions.reduce((worst, s) =>
            (STATUS_PRIORITY[s.status] ?? 99) < (STATUS_PRIORITY[worst] ?? 99) ? s.status : worst
          , 'done');
          const worstMeta = getStatusMeta(worstStatus);
          const isSelected = selectedProject === group.projectDir;

          return html`
            <button
              key=${group.projectDir}
              onClick=${() => onSelectProject(group.projectDir)}
              class="group flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-left transition-all ${
                isSelected
                  ? 'bg-selection/50'
                  : 'hover:bg-selection/25'
              }"
            >
              <span class="h-2 w-2 shrink-0 rounded-full ${worstMeta.dot}"></span>
              <span class="flex-1 truncate text-fg">${group.projectName}</span>
              <${StatusPips} counts=${statusCounts} />
            </button>
          `;
        })}
      </nav>

      <!-- Sidebar Footer -->
      <div class="shrink-0 border-t border-selection/50 px-5 py-3">
        <div class="font-mono text-micro text-dim">
          ${totalSessions} session${totalSessions === 1 ? '' : 's'} total
        </div>
      </div>
    </aside>
  `;
}