// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`screen snapshots > Activity feed 1`] = `
<div>
  <div
    class="animate-fade-in"
  >
    <div
      class="flex flex-wrap items-center justify-between gap-3 mb-6"
    >
      <div
        class="flex items-center gap-3"
      >
        <div
          class="w-9 h-9 rounded-xl bg-accent/15 flex items-center justify-center"
        >
          <svg
            class="lucide lucide-activity w-4.5 h-4.5 text-accent"
            fill="none"
            height="24"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"
            />
          </svg>
        </div>
        <div>
          <div
            class="flex items-center gap-2"
          >
            <h1
              class="text-lg font-semibold text-fg-primary"
            >
              Activity Feed
            </h1>
            <span
              class="flex items-center gap-1.5 text-[11px] text-status-success bg-status-success/10 border border-status-success/20 px-2 py-0.5 rounded-full"
            >
              <span
                class="w-1.5 h-1.5 rounded-full bg-status-success animate-pulse-dot"
              />
              Live
            </span>
          </div>
          <p
            class="text-xs text-fg-muted"
          >
            Real-time stream of all agent events
          </p>
        </div>
      </div>
      <div
        class="flex items-center gap-2 flex-shrink-0"
      >
        <button
          class="btn-ghost"
        >
          <svg
            class="lucide lucide-pause w-4 h-4"
            fill="none"
            height="24"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <rect
              height="16"
              rx="1"
              width="4"
              x="14"
              y="4"
            />
            <rect
              height="16"
              rx="1"
              width="4"
              x="6"
              y="4"
            />
          </svg>
           
          Pause
        </button>
        <button
          class="btn-ghost"
        >
          <svg
            class="lucide lucide-refresh-cw w-4 h-4"
            fill="none"
            height="24"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"
            />
            <path
              d="M21 3v5h-5"
            />
            <path
              d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"
            />
            <path
              d="M8 16H3v5"
            />
          </svg>
        </button>
      </div>
    </div>
    <div
      class="mb-3"
    >
      <details
        class="card bg-surface-2/40 border border-border rounded overflow-hidden"
      >
        <summary
          class="cursor-pointer select-none px-3 py-2 flex items-center text-[11px] text-fg-secondary hover:text-fg-primary hover:bg-surface-2/80"
        >
          <svg
            class="lucide lucide-info w-3.5 h-3.5 mr-2"
            fill="none"
            height="24"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <circle
              cx="12"
              cy="12"
              r="10"
            />
            <path
              d="M12 16v-4"
            />
            <path
              d="M12 8h.01"
            />
          </svg>
          <span
            class="font-semibold uppercase tracking-wide mr-1.5"
          >
            About events, filters, and grouping
          </span>
          <span
            class="text-fg-muted font-normal"
          >
            - 
            Unlock deeper insights: badges, lifecycles, and filter mechanics explained.
          </span>
        </summary>
        <div
          class="divide-y divide-border"
        >
          <details
            class="group"
            open=""
          >
            <summary
              class="cursor-pointer select-none px-3 py-1.5 text-[11px] text-fg-secondary hover:bg-surface-2/60 flex items-center gap-2"
            >
              <span
                class="text-fg-muted transition-transform group-open:rotate-90"
              >
                ▶
              </span>
              <span
                class="font-semibold uppercase tracking-wide text-fg-secondary"
              >
                Status badges
              </span>
            </summary>
            <div
              class="px-3 pb-3 pt-1"
            >
              <p
                class="text-[11px] text-fg-muted mb-2"
              >
                Status is derived from event_type. It's what you see on each row.
              </p>
              <dl
                class="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1.5 text-[11px]"
              >
                <dt>
                  <span
                    class="badge bg-emerald-500/10 border-emerald-500/20 text-emerald-400"
                  >
                    <span
                      class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse-dot"
                    />
                    Working
                  </span>
                </dt>
                <dd
                  class="self-center"
                >
                  Agent started a tool call (PreToolUse). The tool is about to run.
                </dd>
                <dt>
                  <span
                    class="badge bg-yellow-500/10 border-yellow-500/20 text-yellow-400"
                  >
                    <span
                      class="w-1.5 h-1.5 rounded-full bg-yellow-400 animate-pulse-dot"
                    />
                    Waiting
                  </span>
                </dt>
                <dd
                  class="self-center"
                >
                  eventFilters.help.statusWaitingDesc
                </dd>
                <dt>
                  <span
                    class="badge bg-violet-500/10 border-violet-500/20 text-violet-400"
                  >
                    <span
                      class="w-1.5 h-1.5 rounded-full bg-violet-400 "
                    />
                    Completed
                  </span>
                </dt>
                <dd
                  class="self-center"
                >
                  Turn or lifecycle boundary (Stop, SubagentStop, Compaction).
                </dd>
                <dt>
                  <span
                    class="badge bg-red-500/10 border-red-500/20 text-red-400"
                  >
                    <span
                      class="w-1.5 h-1.5 rounded-full bg-red-400 "
                    />
                    Error
                  </span>
                </dt>
                <dd
                  class="self-center"
                >
                  An error was recorded (error, APIError).
                </dd>
              </dl>
            </div>
          </details>
          <details
            class="group"
            open=""
          >
            <summary
              class="cursor-pointer select-none px-3 py-1.5 text-[11px] text-fg-secondary hover:bg-surface-2/60 flex items-center gap-2"
            >
              <span
                class="text-fg-muted transition-transform group-open:rotate-90"
              >
                ▶
              </span>
              <span
                class="font-semibold uppercase tracking-wide text-fg-secondary"
              >
                Event lifecycle
              </span>
            </summary>
            <div
              class="px-3 pb-3 pt-1"
            >
              <p
                class="text-[11px] text-fg-secondary mb-2"
              >
                A typical tool call emits two events sharing the same tool_use_id:
              </p>
              <code
                class="block bg-black/40 border border-border rounded p-2 text-[11px] font-mono text-fg-secondary whitespace-pre-wrap"
              >
                PreToolUse (Working) → PostToolUse (Connected) → ... → Stop (Completed)
              </code>
            </div>
          </details>
          <details
            class="group"
            open=""
          >
            <summary
              class="cursor-pointer select-none px-3 py-1.5 text-[11px] text-fg-secondary hover:bg-surface-2/60 flex items-center gap-2"
            >
              <span
                class="text-fg-muted transition-transform group-open:rotate-90"
              >
                ▶
              </span>
              <span
                class="font-semibold uppercase tracking-wide text-fg-secondary"
              >
                How filters work
              </span>
            </summary>
            <div
              class="px-3 pb-3 pt-1"
            >
              <ul
                class="list-disc pl-5 space-y-1 text-[11px] text-fg-secondary"
              >
                <li>
                  Filters compose with AND across categories. Within one category, multi-select is OR.
                </li>
                <li>
                  Status is a shortcut that expands to event_type values (Working → PreToolUse, Completed → Stop/SubagentStop/Compaction, ...). Status + Event type compose as OR on event_type.
                </li>
                <li
                  class="text-status-warning/90"
                >
                  Grouping tip: a grouped row needs both Pre and Post events. If you filter by Status, pick Working + Connected together to keep pairs intact - otherwise a group will only show half of the call.
                </li>
                <li>
                  Text search matches summary, tool_name, and the raw payload (data column).
                </li>
                <li>
                  Date range applies to each event's created_at.
                </li>
              </ul>
            </div>
          </details>
          <details
            class="group"
            open=""
          >
            <summary
              class="cursor-pointer select-none px-3 py-1.5 text-[11px] text-fg-secondary hover:bg-surface-2/60 flex items-center gap-2"
            >
              <span
                class="text-fg-muted transition-transform group-open:rotate-90"
              >
                ▶
              </span>
              <span
                class="font-semibold uppercase tracking-wide text-fg-secondary"
              >
                What each filter accepts
              </span>
            </summary>
            <div
              class="px-3 pb-3 pt-1"
            >
              <dl
                class="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1.5 text-[11px]"
              >
                <dt
                  class="font-semibold text-fg-secondary whitespace-nowrap"
                >
                  Status
                </dt>
                <dd
                  class="text-fg-secondary"
                >
                  Preset shortcut that expands to event_type values (Working → PreToolUse, Completed → Stop/SubagentStop/Compaction, ...).
                </dd>
                <dt
                  class="font-semibold text-fg-secondary whitespace-nowrap"
                >
                  Event type
                </dt>
                <dd
                  class="text-fg-secondary"
                >
                  Raw event_type strings from the DB. Pulled from /api/events/facets.
                </dd>
                <dt
                  class="font-semibold text-fg-secondary whitespace-nowrap"
                >
                  Tool
                </dt>
                <dd
                  class="text-fg-secondary"
                >
                  tool_name values currently in the DB (Bash, Edit, Read, Grep, mcp__... tools). Pulled from /api/events/facets.
                </dd>
                <dt
                  class="font-semibold text-fg-secondary whitespace-nowrap"
                >
                  Agent
                </dt>
                <dd
                  class="text-fg-secondary"
                >
                  Full agent UUIDs (main + subagents). Select one or more to scope to specific agents.
                </dd>
                <dt
                  class="font-semibold text-fg-secondary whitespace-nowrap"
                >
                  Session
                </dt>
                <dd
                  class="text-fg-secondary"
                >
                  Session UUIDs. Typically you'd navigate to /sessions/:id instead, but this lets you intersect multiple sessions.
                </dd>
                <dt
                  class="font-semibold text-fg-secondary whitespace-nowrap"
                >
                  Search summary, tool, payload...
                </dt>
                <dd
                  class="text-fg-secondary"
                >
                  Substring match on summary, tool_name, and the raw JSON payload. Debounced 300ms.
                </dd>
                <dt
                  class="font-semibold text-fg-secondary whitespace-nowrap"
                >
                  From / To
                </dt>
                <dd
                  class="text-fg-secondary"
                >
                  ISO datetime lower/upper bounds on the event's created_at.
                </dd>
              </dl>
            </div>
          </details>
        </div>
      </details>
    </div>
    <div
      class="mb-4"
    >
      <div
        class="card p-3 space-y-2"
      >
        <div
          class="flex flex-wrap items-center gap-2"
        >
          <svg
            class="lucide lucide-filter w-3.5 h-3.5 text-fg-muted flex-shrink-0"
            fill="none"
            height="24"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <polygon
              points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"
            />
          </svg>
          <div
            class="relative flex-1 min-w-[180px]"
          >
            <svg
              class="lucide lucide-search absolute left-2 top-1/2 -translate-y-1/2 w-3 h-3 text-fg-muted"
              fill="none"
              height="24"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <circle
                cx="11"
                cy="11"
                r="8"
              />
              <path
                d="m21 21-4.3-4.3"
              />
            </svg>
            <input
              aria-label="Search summary, tool, payload..."
              class="w-full bg-surface-2 border border-border rounded pl-7 pr-2 py-1.5 text-xs text-fg-secondary placeholder-fg-muted focus:outline-none focus:border-accent"
              placeholder="Search summary, tool, payload..."
              type="text"
              value=""
            />
          </div>
          <div
            class="relative "
          >
            <button
              aria-label="From"
              class="flex items-center gap-2 bg-surface-2 border border-border rounded px-2 py-1.5 min-w-[150px] text-xs focus:outline-none focus:border-accent transition-colors w-full text-left"
              title="From"
              type="button"
            >
              <svg
                class="lucide lucide-calendar w-3.5 h-3.5 text-fg-secondary shrink-0"
                fill="none"
                height="24"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                viewBox="0 0 24 24"
                width="24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M8 2v4"
                />
                <path
                  d="M16 2v4"
                />
                <rect
                  height="18"
                  rx="2"
                  width="18"
                  x="3"
                  y="4"
                />
                <path
                  d="M3 10h18"
                />
              </svg>
              <span
                class="flex-1 truncate text-fg-muted"
              >
                From
              </span>
            </button>
          </div>
          <span
            class="text-xs text-fg-muted"
          >
            →
          </span>
          <div
            class="relative "
          >
            <button
              aria-label="To"
              class="flex items-center gap-2 bg-surface-2 border border-border rounded px-2 py-1.5 min-w-[150px] text-xs focus:outline-none focus:border-accent transition-colors w-full text-left"
              title="To"
              type="button"
            >
              <svg
                class="lucide lucide-calendar w-3.5 h-3.5 text-fg-secondary shrink-0"
                fill="none"
                height="24"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                viewBox="0 0 24 24"
                width="24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M8 2v4"
                />
                <path
                  d="M16 2v4"
                />
                <rect
                  height="18"
                  rx="2"
                  width="18"
                  x="3"
                  y="4"
                />
                <path
                  d="M3 10h18"
                />
              </svg>
              <span
                class="flex-1 truncate text-fg-muted"
              >
                To
              </span>
            </button>
          </div>
        </div>
        <div
          class="flex flex-wrap gap-2"
        >
          <div
            class="relative"
          >
            <button
              aria-expanded="false"
              aria-haspopup="listbox"
              class="text-[11px] px-2 py-1 rounded border cursor-pointer flex items-center gap-1.5 border-border bg-surface-2 text-fg-secondary hover:text-fg-primary"
              type="button"
            >
              <span>
                Status
              </span>
            </button>
          </div>
          <div
            class="relative"
          >
            <button
              aria-expanded="false"
              aria-haspopup="listbox"
              class="text-[11px] px-2 py-1 rounded border cursor-pointer flex items-center gap-1.5 border-border bg-surface-2 text-fg-secondary hover:text-fg-primary"
              type="button"
            >
              <span>
                Event type
              </span>
            </button>
          </div>
          <div
            class="relative"
          >
            <button
              aria-expanded="false"
              aria-haspopup="listbox"
              class="text-[11px] px-2 py-1 rounded border cursor-pointer flex items-center gap-1.5 border-border bg-surface-2 text-fg-secondary hover:text-fg-primary"
              type="button"
            >
              <span>
                Tool
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div
      class="flex flex-col items-center justify-center py-20 text-center"
    >
      <div
        class="w-14 h-14 rounded-2xl bg-surface-4 flex items-center justify-center mb-5"
      >
        <svg
          class="lucide lucide-activity w-6 h-6 text-fg-muted"
          fill="none"
          height="24"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          viewBox="0 0 24 24"
          width="24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"
          />
        </svg>
      </div>
      <h3
        class="text-base font-medium text-fg-secondary mb-2"
      >
        No activity yet
      </h3>
      <p
        class="text-sm text-fg-muted max-w-md mb-6"
      >
        Events will stream here in real-time as Claude Code agents work.
      </p>
    </div>
  </div>
</div>
`;

exports[`screen snapshots > Analytics 1`] = `
<div>
  <div
    class="animate-fade-in space-y-8"
  >
    <div
      class="flex flex-wrap items-start justify-between gap-3"
    >
      <div
        class="min-w-0"
      >
        <div
          class="flex items-center gap-3 mb-1"
        >
          <div
            class="w-9 h-9 rounded-xl bg-accent/15 flex items-center justify-center flex-shrink-0"
          >
            <svg
              class="lucide lucide-chart-column w-4.5 h-4.5 text-accent"
              fill="none"
              height="24"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M3 3v16a2 2 0 0 0 2 2h16"
              />
              <path
                d="M18 17V9"
              />
              <path
                d="M13 17V5"
              />
              <path
                d="M8 17v-3"
              />
            </svg>
          </div>
          <div>
            <div
              class="flex items-center gap-2"
            >
              <h1
                class="text-lg font-semibold text-fg-primary"
              >
                Analytics
              </h1>
              <span
                class="flex items-center gap-1.5 text-[11px] text-status-success bg-status-success/10 border border-status-success/20 px-2 py-0.5 rounded-full"
              >
                <span
                  class="w-1.5 h-1.5 rounded-full bg-status-success animate-pulse-dot"
                />
                Live
              </span>
            </div>
            <p
              class="text-xs text-fg-muted flex items-center gap-2"
            >
              Real-time monitoring and analytics for Claude Code sessions
              <span
                class="inline-flex items-center gap-1.5 text-[11px] text-fg-muted bg-surface-2 border border-border px-2 py-0.5 rounded-md font-mono ml-2"
              >
                <svg
                  class="lucide lucide-clock w-3 h-3"
                  fill="none"
                  height="24"
                  stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  viewBox="0 0 24 24"
                  width="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <circle
                    cx="12"
                    cy="12"
                    r="10"
                  />
                  <polyline
                    points="12 6 12 12 16 14"
                  />
                </svg>
                1:00:00 PM
              </span>
            </p>
          </div>
        </div>
      </div>
      <div
        class="flex items-center gap-2 flex-shrink-0"
      >
        <button
          class="btn-ghost"
        >
          <svg
            class="lucide lucide-refresh-cw w-4 h-4"
            fill="none"
            height="24"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"
            />
            <path
              d="M21 3v5h-5"
            />
            <path
              d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"
            />
            <path
              d="M8 16H3v5"
            />
          </svg>
          Refresh
        </button>
        <button
          class="btn-ghost"
        >
          <svg
            class="lucide lucide-download w-4 h-4"
            fill="none"
            height="24"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"
            />
            <polyline
              points="7 10 12 15 17 10"
            />
            <line
              x1="12"
              x2="12"
              y1="15"
              y2="3"
            />
          </svg>
          Export
        </button>
      </div>
    </div>
    <div
      class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4"
    >
      <div
        class="card p-5 flex flex-col gap-2"
      >
        <div
          class="flex items-center justify-between"
        >
          <span
            class="text-xs text-fg-muted uppercase tracking-wider"
          >
            Total Sessions
          </span>
          <svg
            class="lucide lucide-folder-open w-4 h-4 text-blue-500"
            fill="none"
            height="24"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2"
            />
          </svg>
        </div>
        <p
          class="text-2xl font-bold text-blue-500"
        >
          <span
            class="relative inline-block cursor-default"
          >
            0
          </span>
        </p>
        <p
          class="text-[11px] text-fg-muted"
        >
          0 active
        </p>
      </div>
      <div
        class="card p-5 flex flex-col gap-2"
      >
        <div
          class="flex items-center justify-between"
        >
          <span
            class="text-xs text-fg-muted uppercase tracking-wider"
          >
            Total Agents
          </span>
          <svg
            class="lucide lucide-bot w-4 h-4 text-status-success"
            fill="none"
            height="24"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M12 8V4H8"
            />
            <rect
              height="12"
              rx="2"
              width="16"
              x="4"
              y="8"
            />
            <path
              d="M2 14h2"
            />
            <path
              d="M20 14h2"
            />
            <path
              d="M15 13v2"
            />
            <path
              d="M9 13v2"
            />
          </svg>
        </div>
        <p
          class="text-2xl font-bold text-status-success"
        >
          <span
            class="relative inline-block cursor-default"
          >
            0
          </span>
        </p>
        <p
          class="text-[11px] text-fg-muted"
        >
          0 active
        </p>
      </div>
      <div
        class="card p-5 flex flex-col gap-2"
      >
        <div
          class="flex items-center justify-between"
        >
          <span
            class="text-xs text-fg-muted uppercase tracking-wider"
          >
            Total Tokens
          </span>
          <svg
            class="lucide lucide-cpu w-4 h-4 text-violet-400"
            fill="none"
            height="24"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <rect
              height="16"
              rx="2"
              width="16"
              x="4"
              y="4"
            />
            <rect
              height="6"
              rx="1"
              width="6"
              x="9"
              y="9"
            />
            <path
              d="M15 2v2"
            />
            <path
              d="M15 20v2"
            />
            <path
              d="M2 15h2"
            />
            <path
              d="M2 9h2"
            />
            <path
              d="M20 15h2"
            />
            <path
              d="M20 9h2"
            />
            <path
              d="M9 2v2"
            />
            <path
              d="M9 20v2"
            />
          </svg>
        </div>
        <p
          class="text-2xl font-bold text-violet-400"
        >
          <span
            class="relative inline-block cursor-default"
          >
            0
          </span>
        </p>
        <p
          class="text-[11px] text-fg-muted"
        >
          0% cache hit rate
        </p>
      </div>
      <div
        class="card p-5 flex flex-col gap-2"
      >
        <div
          class="flex items-center justify-between"
        >
          <span
            class="text-xs text-fg-muted uppercase tracking-wider"
          >
            Total Cost
          </span>
          <svg
            class="lucide lucide-dollar-sign w-4 h-4 text-status-success"
            fill="none"
            height="24"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <line
              x1="12"
              x2="12"
              y1="2"
              y2="22"
            />
            <path
              d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"
            />
          </svg>
        </div>
        <p
          class="text-2xl font-bold text-status-success"
        >
          <span
            class="relative inline-block cursor-default"
          >
            $0.00
          </span>
        </p>
        <p
          class="text-[11px] text-fg-muted"
        >
          0 Model
        </p>
      </div>
      <div
        class="card p-5 flex flex-col gap-2"
      >
        <div
          class="flex items-center justify-between"
        >
          <span
            class="text-xs text-fg-muted uppercase tracking-wider"
          >
            Total Events
          </span>
          <svg
            class="lucide lucide-zap w-4 h-4 text-yellow-400"
            fill="none"
            height="24"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"
            />
          </svg>
        </div>
        <p
          class="text-2xl font-bold text-yellow-400"
        >
          <span
            class="relative inline-block cursor-default"
          >
            0
          </span>
        </p>
        <p
          class="text-[11px] text-fg-muted"
        >
          ~0 per session
        </p>
      </div>
    </div>
    <div
      class="grid grid-cols-1 lg:grid-cols-3 gap-6"
    >
      <div
        class="card p-5 lg:col-span-2"
      >
        <h3
          class="text-sm font-medium text-fg-secondary mb-4"
        >
          Event Activity - Last 52 Weeks
        </h3>
        <div
          class="overflow-x-auto"
        >
          <div
            class="w-fit min-w-max mx-auto"
          >
            <div
              class="relative"
            >
              <div
                class="flex mb-2 ml-[32px] relative h-4"
              >
                <div
                  class="absolute text-[10px] text-fg-muted font-medium whitespace-nowrap"
                  style="left: 0px;"
                >
                  Jun
                </div>
                <div
                  class="absolute text-[10px] text-fg-muted font-medium whitespace-nowrap"
                  style="left: 64px;"
                >
                  Jul
                </div>
                <div
                  class="absolute text-[10px] text-fg-muted font-medium whitespace-nowrap"
                  style="left: 128px;"
                >
                  Aug
                </div>
                <div
                  class="absolute text-[10px] text-fg-muted font-medium whitespace-nowrap"
                  style="left: 208px;"
                >
                  Sep
                </div>
                <div
                  class="absolute text-[10px] text-fg-muted font-medium whitespace-nowrap"
                  style="left: 272px;"
                >
                  Oct
                </div>
                <div
                  class="absolute text-[10px] text-fg-muted font-medium whitespace-nowrap"
                  style="left: 336px;"
                >
                  Nov
                </div>
                <div
                  class="absolute text-[10px] text-fg-muted font-medium whitespace-nowrap"
                  style="left: 416px;"
                >
                  Dec
                </div>
                <div
                  class="absolute text-[10px] text-fg-muted font-medium whitespace-nowrap"
                  style="left: 480px;"
                >
                  Jan
                </div>
                <div
                  class="absolute text-[10px] text-fg-muted font-medium whitespace-nowrap"
                  style="left: 544px;"
                >
                  Feb
                </div>
                <div
                  class="absolute text-[10px] text-fg-muted font-medium whitespace-nowrap"
                  style="left: 608px;"
                >
                  Mar
                </div>
                <div
                  class="absolute text-[10px] text-fg-muted font-medium whitespace-nowrap"
                  style="left: 688px;"
                >
                  Apr
                </div>
                <div
                  class="absolute text-[10px] text-fg-muted font-medium whitespace-nowrap"
                  style="left: 752px;"
                >
                  May
                </div>
                <div
                  class="absolute text-[10px] text-fg-muted font-medium whitespace-nowrap"
                  style="left: 832px;"
                >
                  Jun
                </div>
              </div>
              <div
                class="flex"
                style="gap: 3px;"
              >
                <div
                  class="flex flex-col mr-1 w-7"
                  style="gap: 3px;"
                >
                  <div
                    class="text-[9px] text-fg-muted flex items-center justify-end pr-1.5"
                    style="height: 13px;"
                  >
                    Sun
                  </div>
                  <div
                    class="text-[9px] text-fg-muted flex items-center justify-end pr-1.5"
                    style="height: 13px;"
                  />
                  <div
                    class="text-[9px] text-fg-muted flex items-center justify-end pr-1.5"
                    style="height: 13px;"
                  >
                    Tue
                  </div>
                  <div
                    class="text-[9px] text-fg-muted flex items-center justify-end pr-1.5"
                    style="height: 13px;"
                  />
                  <div
                    class="text-[9px] text-fg-muted flex items-center justify-end pr-1.5"
                    style="height: 13px;"
                  >
                    Thu
                  </div>
                  <div
                    class="text-[9px] text-fg-muted flex items-center justify-end pr-1.5"
                    style="height: 13px;"
                  />
                  <div
                    class="text-[9px] text-fg-muted flex items-center justify-end pr-1.5"
                    style="height: 13px;"
                  />
                </div>
                <div
                  class="flex flex-col"
                  style="gap: 3px;"
                >
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                </div>
                <div
                  class="flex flex-col"
                  style="gap: 3px;"
                >
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                </div>
                <div
                  class="flex flex-col"
                  style="gap: 3px;"
                >
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                </div>
                <div
                  class="flex flex-col"
                  style="gap: 3px;"
                >
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                </div>
                <div
                  class="flex flex-col"
                  style="gap: 3px;"
                >
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                </div>
                <div
                  class="flex flex-col"
                  style="gap: 3px;"
                >
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                </div>
                <div
                  class="flex flex-col"
                  style="gap: 3px;"
                >
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                </div>
                <div
                  class="flex flex-col"
                  style="gap: 3px;"
                >
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                </div>
                <div
                  class="flex flex-col"
                  style="gap: 3px;"
                >
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                </div>
                <div
                  class="flex flex-col"
                  style="gap: 3px;"
                >
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                </div>
                <div
                  class="flex flex-col"
                  style="gap: 3px;"
                >
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                </div>
                <div
                  class="flex flex-col"
                  style="gap: 3px;"
                >
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                </div>
                <div
                  class="flex flex-col"
                  style="gap: 3px;"
                >
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                </div>
                <div
                  class="flex flex-col"
                  style="gap: 3px;"
                >
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                </div>
                <div
                  class="flex flex-col"
                  style="gap: 3px;"
                >
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                </div>
                <div
                  class="flex flex-col"
                  style="gap: 3px;"
                >
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                </div>
                <div
                  class="flex flex-col"
                  style="gap: 3px;"
                >
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                </div>
                <div
                  class="flex flex-col"
                  style="gap: 3px;"
                >
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                </div>
                <div
                  class="flex flex-col"
                  style="gap: 3px;"
                >
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                </div>
                <div
                  class="flex flex-col"
                  style="gap: 3px;"
                >
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                </div>
                <div
                  class="flex flex-col"
                  style="gap: 3px;"
                >
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                </div>
                <div
                  class="flex flex-col"
                  style="gap: 3px;"
                >
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                </div>
                <div
                  class="flex flex-col"
                  style="gap: 3px;"
                >
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                </div>
                <div
                  class="flex flex-col"
                  style="gap: 3px;"
                >
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                </div>
                <div
                  class="flex flex-col"
                  style="gap: 3px;"
                >
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                </div>
                <div
                  class="flex flex-col"
                  style="gap: 3px;"
                >
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                </div>
                <div
                  class="flex flex-col"
                  style="gap: 3px;"
                >
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                </div>
                <div
                  class="flex flex-col"
                  style="gap: 3px;"
                >
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                </div>
                <div
                  class="flex flex-col"
                  style="gap: 3px;"
                >
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                </div>
                <div
                  class="flex flex-col"
                  style="gap: 3px;"
                >
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                </div>
                <div
                  class="flex flex-col"
                  style="gap: 3px;"
                >
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                </div>
                <div
                  class="flex flex-col"
                  style="gap: 3px;"
                >
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                </div>
                <div
                  class="flex flex-col"
                  style="gap: 3px;"
                >
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                </div>
                <div
                  class="flex flex-col"
                  style="gap: 3px;"
                >
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                </div>
                <div
                  class="flex flex-col"
                  style="gap: 3px;"
                >
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                </div>
                <div
                  class="flex flex-col"
                  style="gap: 3px;"
                >
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                </div>
                <div
                  class="flex flex-col"
                  style="gap: 3px;"
                >
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                </div>
                <div
                  class="flex flex-col"
                  style="gap: 3px;"
                >
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                </div>
                <div
                  class="flex flex-col"
                  style="gap: 3px;"
                >
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                </div>
                <div
                  class="flex flex-col"
                  style="gap: 3px;"
                >
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                </div>
                <div
                  class="flex flex-col"
                  style="gap: 3px;"
                >
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                </div>
                <div
                  class="flex flex-col"
                  style="gap: 3px;"
                >
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                </div>
                <div
                  class="flex flex-col"
                  style="gap: 3px;"
                >
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                </div>
                <div
                  class="flex flex-col"
                  style="gap: 3px;"
                >
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                </div>
                <div
                  class="flex flex-col"
                  style="gap: 3px;"
                >
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                </div>
                <div
                  class="flex flex-col"
                  style="gap: 3px;"
                >
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                </div>
                <div
                  class="flex flex-col"
                  style="gap: 3px;"
                >
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                </div>
                <div
                  class="flex flex-col"
                  style="gap: 3px;"
                >
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                </div>
                <div
                  class="flex flex-col"
                  style="gap: 3px;"
                >
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                </div>
                <div
                  class="flex flex-col"
                  style="gap: 3px;"
                >
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                </div>
                <div
                  class="flex flex-col"
                  style="gap: 3px;"
                >
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                </div>
                <div
                  class="flex flex-col"
                  style="gap: 3px;"
                >
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                </div>
                <div
                  class="flex flex-col"
                  style="gap: 3px;"
                >
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                  <div
                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
                  />
                </div>
              </div>
              <div
                class="flex items-center gap-2 mt-3 text-[11px] text-fg-muted"
              >
                <span>
                  Less
                </span>
                <div
                  style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.06);"
                />
                <div
                  style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.06);"
                />
                <div
                  style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(199, 210, 254); border: 1px solid rgba(255, 255, 255, 0.06);"
                />
                <div
                  style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(199, 210, 254); border: 1px solid rgba(255, 255, 255, 0.06);"
                />
                <div
                  style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(199, 210, 254); border: 1px solid rgba(255, 255, 255, 0.06);"
                />
                <span>
                  More
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        class="card p-5"
      >
        <h3
          class="text-sm font-medium text-fg-secondary mb-1"
        >
          Last 30 Days
        </h3>
        <p
          class="text-[11px] text-fg-muted mb-4"
        >
          Daily event count
        </p>
        <div
          class="relative flex items-end gap-px h-16"
        >
          <div
            class="flex-1 rounded-sm transition-all cursor-default"
            style="height: 4%; background-color: rgb(99, 102, 241); opacity: 0.15;"
          />
          <div
            class="flex-1 rounded-sm transition-all cursor-default"
            style="height: 4%; background-color: rgb(99, 102, 241); opacity: 0.15;"
          />
          <div
            class="flex-1 rounded-sm transition-all cursor-default"
            style="height: 4%; background-color: rgb(99, 102, 241); opacity: 0.15;"
          />
          <div
            class="flex-1 rounded-sm transition-all cursor-default"
            style="height: 4%; background-color: rgb(99, 102, 241); opacity: 0.15;"
          />
          <div
            class="flex-1 rounded-sm transition-all cursor-default"
            style="height: 4%; background-color: rgb(99, 102, 241); opacity: 0.15;"
          />
          <div
            class="flex-1 rounded-sm transition-all cursor-default"
            style="height: 4%; background-color: rgb(99, 102, 241); opacity: 0.15;"
          />
          <div
            class="flex-1 rounded-sm transition-all cursor-default"
            style="height: 4%; background-color: rgb(99, 102, 241); opacity: 0.15;"
          />
          <div
            class="flex-1 rounded-sm transition-all cursor-default"
            style="height: 4%; background-color: rgb(99, 102, 241); opacity: 0.15;"
          />
          <div
            class="flex-1 rounded-sm transition-all cursor-default"
            style="height: 4%; background-color: rgb(99, 102, 241); opacity: 0.15;"
          />
          <div
            class="flex-1 rounded-sm transition-all cursor-default"
            style="height: 4%; background-color: rgb(99, 102, 241); opacity: 0.15;"
          />
          <div
            class="flex-1 rounded-sm transition-all cursor-default"
            style="height: 4%; background-color: rgb(99, 102, 241); opacity: 0.15;"
          />
          <div
            class="flex-1 rounded-sm transition-all cursor-default"
            style="height: 4%; background-color: rgb(99, 102, 241); opacity: 0.15;"
          />
          <div
            class="flex-1 rounded-sm transition-all cursor-default"
            style="height: 4%; background-color: rgb(99, 102, 241); opacity: 0.15;"
          />
          <div
            class="flex-1 rounded-sm transition-all cursor-default"
            style="height: 4%; background-color: rgb(99, 102, 241); opacity: 0.15;"
          />
          <div
            class="flex-1 rounded-sm transition-all cursor-default"
            style="height: 4%; background-color: rgb(99, 102, 241); opacity: 0.15;"
          />
          <div
            class="flex-1 rounded-sm transition-all cursor-default"
            style="height: 4%; background-color: rgb(99, 102, 241); opacity: 0.15;"
          />
          <div
            class="flex-1 rounded-sm transition-all cursor-default"
            style="height: 4%; background-color: rgb(99, 102, 241); opacity: 0.15;"
          />
          <div
            class="flex-1 rounded-sm transition-all cursor-default"
            style="height: 4%; background-color: rgb(99, 102, 241); opacity: 0.15;"
          />
          <div
            class="flex-1 rounded-sm transition-all cursor-default"
            style="height: 4%; background-color: rgb(99, 102, 241); opacity: 0.15;"
          />
          <div
            class="flex-1 rounded-sm transition-all cursor-default"
            style="height: 4%; background-color: rgb(99, 102, 241); opacity: 0.15;"
          />
          <div
            class="flex-1 rounded-sm transition-all cursor-default"
            style="height: 4%; background-color: rgb(99, 102, 241); opacity: 0.15;"
          />
          <div
            class="flex-1 rounded-sm transition-all cursor-default"
            style="height: 4%; background-color: rgb(99, 102, 241); opacity: 0.15;"
          />
          <div
            class="flex-1 rounded-sm transition-all cursor-default"
            style="height: 4%; background-color: rgb(99, 102, 241); opacity: 0.15;"
          />
          <div
            class="flex-1 rounded-sm transition-all cursor-default"
            style="height: 4%; background-color: rgb(99, 102, 241); opacity: 0.15;"
          />
          <div
            class="flex-1 rounded-sm transition-all cursor-default"
            style="height: 4%; background-color: rgb(99, 102, 241); opacity: 0.15;"
          />
          <div
            class="flex-1 rounded-sm transition-all cursor-default"
            style="height: 4%; background-color: rgb(99, 102, 241); opacity: 0.15;"
          />
          <div
            class="flex-1 rounded-sm transition-all cursor-default"
            style="height: 4%; background-color: rgb(99, 102, 241); opacity: 0.15;"
          />
          <div
            class="flex-1 rounded-sm transition-all cursor-default"
            style="height: 4%; background-color: rgb(99, 102, 241); opacity: 0.15;"
          />
          <div
            class="flex-1 rounded-sm transition-all cursor-default"
            style="height: 4%; background-color: rgb(99, 102, 241); opacity: 0.15;"
          />
          <div
            class="flex-1 rounded-sm transition-all cursor-default"
            style="height: 4%; background-color: rgb(99, 102, 241); opacity: 0.15;"
          />
        </div>
        <div
          class="flex justify-between text-[11px] text-fg-muted mt-2"
        >
          <span>
            05-12
          </span>
          <span>
            06-10
          </span>
        </div>
        <div
          class="mt-4 pt-4 border-t border-border space-y-1"
        >
          <div
            class="flex justify-between text-xs"
          >
            <span
              class="text-fg-muted"
            >
              Peak day
            </span>
            <span
              class="text-fg-secondary font-mono"
            >
              <span
                class="relative inline-block cursor-default"
              >
                0
              </span>
               
              events
            </span>
          </div>
          <div
            class="flex justify-between text-xs"
          >
            <span
              class="text-fg-muted"
            >
              Total (30d)
            </span>
            <span
              class="text-fg-secondary font-mono"
            >
              <span
                class="relative inline-block cursor-default"
              >
                0
              </span>
               
              events
            </span>
          </div>
        </div>
      </div>
    </div>
    <div>
      <div
        class="flex gap-1 bg-surface-2 rounded-lg p-1 mb-6 w-fit"
      >
        <button
          class="px-4 py-1.5 text-xs font-medium rounded-md transition-colors bg-surface-4 text-fg-secondary"
        >
          Cost Analytics
        </button>
        <button
          class="px-4 py-1.5 text-xs font-medium rounded-md transition-colors text-fg-muted hover:text-fg-secondary"
        >
          Token Analytics
        </button>
        <button
          class="px-4 py-1.5 text-xs font-medium rounded-md transition-colors text-fg-muted hover:text-fg-secondary"
        >
          Productivity Analytics
        </button>
        <button
          class="px-4 py-1.5 text-xs font-medium rounded-md transition-colors text-fg-muted hover:text-fg-secondary"
        >
          Workflow Intelligence
        </button>
      </div>
      <div
        class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
      >
        <div
          class="card p-5"
        >
          <h3
            class="text-sm font-medium text-fg-secondary mb-1"
          >
            Daily Cost Trends
          </h3>
          <p
            class="text-sm text-fg-muted"
          >
            No daily cost data yet.
          </p>
        </div>
        <div
          class="card p-5"
        >
          <h3
            class="text-sm font-medium text-fg-secondary mb-5"
          >
            Cost by Model
          </h3>
          <p
            class="text-sm text-fg-muted"
          >
            No cost data yet.
          </p>
        </div>
        <div
          class="card p-5"
        >
          <h3
            class="text-sm font-medium text-fg-secondary mb-1"
          >
            Cost by Weekday
          </h3>
          <p
            class="text-sm text-fg-muted"
          >
            No daily cost data yet.
          </p>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`screen snapshots > Claude Config 1`] = `
<div>
  <div
    class="space-y-5"
  >
    <header
      class="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between"
    >
      <div
        class="flex items-start gap-3 min-w-0 flex-1"
      >
        <div
          class="w-9 h-9 rounded-xl bg-accent/15 flex items-center justify-center flex-shrink-0"
        >
          <svg
            class="lucide lucide-boxes w-4.5 h-4.5 text-accent"
            fill="none"
            height="24"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z"
            />
            <path
              d="m7 16.5-4.74-2.85"
            />
            <path
              d="m7 16.5 5-3"
            />
            <path
              d="M7 16.5v5.17"
            />
            <path
              d="M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z"
            />
            <path
              d="m17 16.5-5-3"
            />
            <path
              d="m17 16.5 4.74-2.85"
            />
            <path
              d="M17 16.5v5.17"
            />
            <path
              d="M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z"
            />
            <path
              d="M12 8 7.26 5.15"
            />
            <path
              d="m12 8 4.74-2.85"
            />
            <path
              d="M12 13.5V8"
            />
          </svg>
        </div>
        <div
          class="min-w-0"
        >
          <div
            class="flex items-center gap-2"
          >
            <h1
              class="text-lg font-semibold text-fg-primary"
            >
              Claude Config Explorer
            </h1>
            <span
              class="flex items-center gap-1.5 text-[11px] text-status-success bg-status-success/10 border border-status-success/20 px-2 py-0.5 rounded-full"
            >
              <span
                class="w-1.5 h-1.5 rounded-full bg-status-success animate-pulse-dot"
              />
              Live
            </span>
          </div>
          <p
            class="text-xs text-fg-muted max-w-2xl"
          >
            Your Claude Code setup at a glance - plugins, skills, subagents, MCP servers, hooks, and settings.
          </p>
        </div>
      </div>
      <div
        class="flex flex-col items-stretch lg:items-end gap-2 flex-shrink-0"
      >
        <div
          class="flex items-center gap-2 justify-end flex-wrap"
        >
          <div
            class="inline-flex rounded-lg border border-border bg-surface-2 p-0.5"
          >
            <button
              class="px-2.5 py-1 text-[11px] font-medium rounded-md transition-colors bg-accent/20 text-accent border border-accent/30"
            >
              All scopes
            </button>
            <button
              class="px-2.5 py-1 text-[11px] font-medium rounded-md transition-colors text-fg-secondary hover:text-fg-primary"
            >
              User
            </button>
            <button
              class="px-2.5 py-1 text-[11px] font-medium rounded-md transition-colors text-fg-secondary hover:text-fg-primary"
            >
              Project
            </button>
          </div>
          <button
            class="inline-flex items-center gap-2 rounded-lg border border-border bg-surface-2 px-3 py-1.5 text-xs font-medium text-fg-secondary hover:bg-surface-3 transition-colors"
          >
            <svg
              class="lucide lucide-history w-3.5 h-3.5"
              fill="none"
              height="24"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"
              />
              <path
                d="M3 3v5h5"
              />
              <path
                d="M12 7v5l4 2"
              />
            </svg>
            Backups
          </button>
          <button
            class="inline-flex items-center gap-2 rounded-lg border border-border bg-surface-2 px-3 py-1.5 text-xs font-medium text-fg-secondary hover:bg-surface-3 disabled:opacity-60 transition-colors"
          >
            <svg
              class="lucide lucide-refresh-cw w-3.5 h-3.5"
              fill="none"
              height="24"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"
              />
              <path
                d="M21 3v5h-5"
              />
              <path
                d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"
              />
              <path
                d="M8 16H3v5"
              />
            </svg>
            Refresh
          </button>
        </div>
        <span
          class="text-[11px] text-fg-muted self-end"
        >
          Last updated 01:00:00 PM
        </span>
      </div>
    </header>
    <div
      class="relative rounded-xl border border-border bg-surface-1"
    >
      <div
        class="pointer-events-none absolute left-0 top-0 bottom-0 w-12 rounded-l-xl bg-gradient-to-r from-surface-1 to-transparent transition-opacity z-10 opacity-0"
      />
      <div
        class="flex gap-1 p-1 overflow-x-auto scroll-smooth [&::-webkit-scrollbar]:hidden"
        style="scrollbar-width: none;"
      >
        <button
          class="flex items-center gap-2 rounded-lg px-3 py-1.5 text-xs font-medium transition-colors flex-shrink-0 whitespace-nowrap bg-accent/15 text-accent border border-accent/30"
          data-tab-active="true"
        >
          <svg
            class="lucide lucide-boxes w-3.5 h-3.5"
            fill="none"
            height="24"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z"
            />
            <path
              d="m7 16.5-4.74-2.85"
            />
            <path
              d="m7 16.5 5-3"
            />
            <path
              d="M7 16.5v5.17"
            />
            <path
              d="M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z"
            />
            <path
              d="m17 16.5-5-3"
            />
            <path
              d="m17 16.5 4.74-2.85"
            />
            <path
              d="M17 16.5v5.17"
            />
            <path
              d="M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z"
            />
            <path
              d="M12 8 7.26 5.15"
            />
            <path
              d="m12 8 4.74-2.85"
            />
            <path
              d="M12 13.5V8"
            />
          </svg>
          <span>
            Overview
          </span>
        </button>
        <button
          class="flex items-center gap-2 rounded-lg px-3 py-1.5 text-xs font-medium transition-colors flex-shrink-0 whitespace-nowrap text-fg-secondary hover:text-fg-primary hover:bg-surface-3 border border-transparent"
        >
          <svg
            class="lucide lucide-sparkles w-3.5 h-3.5"
            fill="none"
            height="24"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"
            />
            <path
              d="M20 3v4"
            />
            <path
              d="M22 5h-4"
            />
            <path
              d="M4 17v2"
            />
            <path
              d="M5 18H3"
            />
          </svg>
          <span>
            Skills
          </span>
          <span
            class="text-[10px] px-1.5 py-0.5 rounded-full font-semibold bg-surface-3 text-fg-secondary"
          >
            0
          </span>
        </button>
        <button
          class="flex items-center gap-2 rounded-lg px-3 py-1.5 text-xs font-medium transition-colors flex-shrink-0 whitespace-nowrap text-fg-secondary hover:text-fg-primary hover:bg-surface-3 border border-transparent"
        >
          <svg
            class="lucide lucide-user-round w-3.5 h-3.5"
            fill="none"
            height="24"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <circle
              cx="12"
              cy="8"
              r="5"
            />
            <path
              d="M20 21a8 8 0 0 0-16 0"
            />
          </svg>
          <span>
            Subagents
          </span>
          <span
            class="text-[10px] px-1.5 py-0.5 rounded-full font-semibold bg-surface-3 text-fg-secondary"
          >
            0
          </span>
        </button>
        <button
          class="flex items-center gap-2 rounded-lg px-3 py-1.5 text-xs font-medium transition-colors flex-shrink-0 whitespace-nowrap text-fg-secondary hover:text-fg-primary hover:bg-surface-3 border border-transparent"
        >
          <svg
            class="lucide lucide-slash w-3.5 h-3.5"
            fill="none"
            height="24"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M22 2 2 22"
            />
          </svg>
          <span>
            Slash commands
          </span>
          <span
            class="text-[10px] px-1.5 py-0.5 rounded-full font-semibold bg-surface-3 text-fg-secondary"
          >
            0
          </span>
        </button>
        <button
          class="flex items-center gap-2 rounded-lg px-3 py-1.5 text-xs font-medium transition-colors flex-shrink-0 whitespace-nowrap text-fg-secondary hover:text-fg-primary hover:bg-surface-3 border border-transparent"
        >
          <svg
            class="lucide lucide-book-open w-3.5 h-3.5"
            fill="none"
            height="24"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M12 7v14"
            />
            <path
              d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"
            />
          </svg>
          <span>
            Memory
          </span>
          <span
            class="text-[10px] px-1.5 py-0.5 rounded-full font-semibold bg-surface-3 text-fg-secondary"
          >
            0
          </span>
        </button>
        <button
          class="flex items-center gap-2 rounded-lg px-3 py-1.5 text-xs font-medium transition-colors flex-shrink-0 whitespace-nowrap text-fg-secondary hover:text-fg-primary hover:bg-surface-3 border border-transparent"
        >
          <svg
            class="lucide lucide-plug-zap w-3.5 h-3.5"
            fill="none"
            height="24"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M6.3 20.3a2.4 2.4 0 0 0 3.4 0L12 18l-6-6-2.3 2.3a2.4 2.4 0 0 0 0 3.4Z"
            />
            <path
              d="m2 22 3-3"
            />
            <path
              d="M7.5 13.5 10 11"
            />
            <path
              d="M10.5 16.5 13 14"
            />
            <path
              d="m18 3-4 4h6l-4 4"
            />
          </svg>
          <span>
            Plugins
          </span>
          <span
            class="text-[10px] px-1.5 py-0.5 rounded-full font-semibold bg-surface-3 text-fg-secondary"
          >
            0
          </span>
        </button>
        <button
          class="flex items-center gap-2 rounded-lg px-3 py-1.5 text-xs font-medium transition-colors flex-shrink-0 whitespace-nowrap text-fg-secondary hover:text-fg-primary hover:bg-surface-3 border border-transparent"
        >
          <svg
            class="lucide lucide-store w-3.5 h-3.5"
            fill="none"
            height="24"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7"
            />
            <path
              d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"
            />
            <path
              d="M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4"
            />
            <path
              d="M2 7h20"
            />
            <path
              d="M22 7v3a2 2 0 0 1-2 2a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12a2 2 0 0 1-2-2V7"
            />
          </svg>
          <span>
            Marketplaces
          </span>
          <span
            class="text-[10px] px-1.5 py-0.5 rounded-full font-semibold bg-surface-3 text-fg-secondary"
          >
            0
          </span>
        </button>
        <button
          class="flex items-center gap-2 rounded-lg px-3 py-1.5 text-xs font-medium transition-colors flex-shrink-0 whitespace-nowrap text-fg-secondary hover:text-fg-primary hover:bg-surface-3 border border-transparent"
        >
          <svg
            class="lucide lucide-server w-3.5 h-3.5"
            fill="none"
            height="24"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <rect
              height="8"
              rx="2"
              ry="2"
              width="20"
              x="2"
              y="2"
            />
            <rect
              height="8"
              rx="2"
              ry="2"
              width="20"
              x="2"
              y="14"
            />
            <line
              x1="6"
              x2="6.01"
              y1="6"
              y2="6"
            />
            <line
              x1="6"
              x2="6.01"
              y1="18"
              y2="18"
            />
          </svg>
          <span>
            MCP servers
          </span>
          <span
            class="text-[10px] px-1.5 py-0.5 rounded-full font-semibold bg-surface-3 text-fg-secondary"
          >
            0
          </span>
        </button>
        <button
          class="flex items-center gap-2 rounded-lg px-3 py-1.5 text-xs font-medium transition-colors flex-shrink-0 whitespace-nowrap text-fg-secondary hover:text-fg-primary hover:bg-surface-3 border border-transparent"
        >
          <svg
            class="lucide lucide-webhook w-3.5 h-3.5"
            fill="none"
            height="24"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M18 16.98h-5.99c-1.1 0-1.95.94-2.48 1.9A4 4 0 0 1 2 17c.01-.7.2-1.4.57-2"
            />
            <path
              d="m6 17 3.13-5.78c.53-.97.1-2.18-.5-3.1a4 4 0 1 1 6.89-4.06"
            />
            <path
              d="m12 6 3.13 5.73C15.66 12.7 16.9 13 18 13a4 4 0 0 1 0 8"
            />
          </svg>
          <span>
            Hooks
          </span>
          <span
            class="text-[10px] px-1.5 py-0.5 rounded-full font-semibold bg-surface-3 text-fg-secondary"
          >
            0
          </span>
        </button>
        <button
          class="flex items-center gap-2 rounded-lg px-3 py-1.5 text-xs font-medium transition-colors flex-shrink-0 whitespace-nowrap text-fg-secondary hover:text-fg-primary hover:bg-surface-3 border border-transparent"
        >
          <svg
            class="lucide lucide-keyboard w-3.5 h-3.5"
            fill="none"
            height="24"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M10 8h.01"
            />
            <path
              d="M12 12h.01"
            />
            <path
              d="M14 8h.01"
            />
            <path
              d="M16 12h.01"
            />
            <path
              d="M18 8h.01"
            />
            <path
              d="M6 8h.01"
            />
            <path
              d="M7 16h10"
            />
            <path
              d="M8 12h.01"
            />
            <rect
              height="16"
              rx="2"
              width="20"
              x="2"
              y="4"
            />
          </svg>
          <span>
            Keybindings
          </span>
          <span
            class="text-[10px] px-1.5 py-0.5 rounded-full font-semibold bg-surface-3 text-fg-secondary"
          >
            0
          </span>
        </button>
        <button
          class="flex items-center gap-2 rounded-lg px-3 py-1.5 text-xs font-medium transition-colors flex-shrink-0 whitespace-nowrap text-fg-secondary hover:text-fg-primary hover:bg-surface-3 border border-transparent"
        >
          <svg
            class="lucide lucide-settings w-3.5 h-3.5"
            fill="none"
            height="24"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"
            />
            <circle
              cx="12"
              cy="12"
              r="3"
            />
          </svg>
          <span>
            Settings
          </span>
          <span
            class="text-[10px] px-1.5 py-0.5 rounded-full font-semibold bg-surface-3 text-fg-secondary"
          >
            0
          </span>
        </button>
        <button
          class="flex items-center gap-2 rounded-lg px-3 py-1.5 text-xs font-medium transition-colors flex-shrink-0 whitespace-nowrap text-fg-secondary hover:text-fg-primary hover:bg-surface-3 border border-transparent"
        >
          <svg
            class="lucide lucide-palette w-3.5 h-3.5"
            fill="none"
            height="24"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <circle
              cx="13.5"
              cy="6.5"
              fill="currentColor"
              r=".5"
            />
            <circle
              cx="17.5"
              cy="10.5"
              fill="currentColor"
              r=".5"
            />
            <circle
              cx="8.5"
              cy="7.5"
              fill="currentColor"
              r=".5"
            />
            <circle
              cx="6.5"
              cy="12.5"
              fill="currentColor"
              r=".5"
            />
            <path
              d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"
            />
          </svg>
          <span>
            Output styles
          </span>
          <span
            class="text-[10px] px-1.5 py-0.5 rounded-full font-semibold bg-surface-3 text-fg-secondary"
          >
            0
          </span>
        </button>
      </div>
      <div
        class="pointer-events-none absolute right-0 top-0 bottom-0 w-12 rounded-r-xl bg-gradient-to-l from-surface-1 to-transparent transition-opacity z-10 opacity-0"
      />
    </div>
    <div
      class="rounded-xl border border-border bg-surface-1"
    >
      <div
        class="p-4"
      >
        <div
          class="space-y-5"
        >
          <section>
            <h2
              class="text-[11px] font-semibold uppercase tracking-wider text-fg-muted mb-2"
            >
              Roots
            </h2>
            <div
              class="grid grid-cols-1 md:grid-cols-2 gap-2"
            >
              <div
                class="relative flex items-center gap-2.5 rounded-lg border border-border bg-surface-2 px-3 py-2 min-w-0 overflow-hidden"
              >
                <div
                  aria-hidden="true"
                  class="absolute left-0 top-0 bottom-0 w-1 bg-sky-500/40"
                />
                <span
                  class="w-7 h-7 rounded-md bg-sky-500/10 flex items-center justify-center flex-shrink-0 ml-1.5"
                >
                  <svg
                    class="lucide lucide-folder-tree w-3.5 h-3.5 text-sky-300"
                    fill="none"
                    height="24"
                    stroke="currentColor"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M20 10a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-2.5a1 1 0 0 1-.8-.4l-.9-1.2A1 1 0 0 0 15 3h-2a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1Z"
                    />
                    <path
                      d="M20 21a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1h-2.9a1 1 0 0 1-.88-.55l-.42-.85a1 1 0 0 0-.92-.6H13a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1Z"
                    />
                    <path
                      d="M3 5a2 2 0 0 0 2 2h3"
                    />
                    <path
                      d="M3 3v13a2 2 0 0 0 2 2h3"
                    />
                  </svg>
                </span>
                <div
                  class="min-w-0 flex-1"
                >
                  <div
                    class="text-[10px] font-semibold uppercase tracking-wider text-fg-secondary"
                  >
                    Claude home
                  </div>
                  <div
                    class="font-mono text-[11px] text-fg-secondary truncate"
                  >
                    /home/test/.claude
                  </div>
                </div>
                <button
                  class="text-[10px] font-medium px-1.5 py-1 rounded border border-border bg-surface-1 hover:bg-surface-3 text-fg-secondary hover:text-fg-primary inline-flex items-center gap-1 flex-shrink-0"
                  title="Copy path"
                >
                  <svg
                    class="lucide lucide-copy w-3 h-3"
                    fill="none"
                    height="24"
                    stroke="currentColor"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <rect
                      height="14"
                      rx="2"
                      ry="2"
                      width="14"
                      x="8"
                      y="8"
                    />
                    <path
                      d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
                    />
                  </svg>
                </button>
              </div>
              <div
                class="relative flex items-center gap-2.5 rounded-lg border border-border bg-surface-2 px-3 py-2 min-w-0 overflow-hidden"
              >
                <div
                  aria-hidden="true"
                  class="absolute left-0 top-0 bottom-0 w-1 bg-status-success/40"
                />
                <span
                  class="w-7 h-7 rounded-md bg-status-success/10 flex items-center justify-center flex-shrink-0 ml-1.5"
                >
                  <svg
                    class="lucide lucide-folder-tree w-3.5 h-3.5 text-status-success"
                    fill="none"
                    height="24"
                    stroke="currentColor"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M20 10a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-2.5a1 1 0 0 1-.8-.4l-.9-1.2A1 1 0 0 0 15 3h-2a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1Z"
                    />
                    <path
                      d="M20 21a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1h-2.9a1 1 0 0 1-.88-.55l-.42-.85a1 1 0 0 0-.92-.6H13a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1Z"
                    />
                    <path
                      d="M3 5a2 2 0 0 0 2 2h3"
                    />
                    <path
                      d="M3 3v13a2 2 0 0 0 2 2h3"
                    />
                  </svg>
                </span>
                <div
                  class="min-w-0 flex-1"
                >
                  <div
                    class="text-[10px] font-semibold uppercase tracking-wider text-fg-secondary"
                  >
                    Project .claude
                  </div>
                  <div
                    class="font-mono text-[11px] text-fg-secondary truncate"
                  >
                    /test/.claude
                  </div>
                </div>
                <button
                  class="text-[10px] font-medium px-1.5 py-1 rounded border border-border bg-surface-1 hover:bg-surface-3 text-fg-secondary hover:text-fg-primary inline-flex items-center gap-1 flex-shrink-0"
                  title="Copy path"
                >
                  <svg
                    class="lucide lucide-copy w-3 h-3"
                    fill="none"
                    height="24"
                    stroke="currentColor"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <rect
                      height="14"
                      rx="2"
                      ry="2"
                      width="14"
                      x="8"
                      y="8"
                    />
                    <path
                      d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
                    />
                  </svg>
                </button>
              </div>
              <div
                class="relative flex items-center gap-2.5 rounded-lg border border-border bg-surface-2 px-3 py-2 min-w-0 overflow-hidden"
              >
                <div
                  aria-hidden="true"
                  class="absolute left-0 top-0 bottom-0 w-1 bg-violet-500/40"
                />
                <span
                  class="w-7 h-7 rounded-md bg-violet-500/10 flex items-center justify-center flex-shrink-0 ml-1.5"
                >
                  <svg
                    class="lucide lucide-folder-tree w-3.5 h-3.5 text-violet-300"
                    fill="none"
                    height="24"
                    stroke="currentColor"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M20 10a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-2.5a1 1 0 0 1-.8-.4l-.9-1.2A1 1 0 0 0 15 3h-2a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1Z"
                    />
                    <path
                      d="M20 21a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1h-2.9a1 1 0 0 1-.88-.55l-.42-.85a1 1 0 0 0-.92-.6H13a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1Z"
                    />
                    <path
                      d="M3 5a2 2 0 0 0 2 2h3"
                    />
                    <path
                      d="M3 3v13a2 2 0 0 0 2 2h3"
                    />
                  </svg>
                </span>
                <div
                  class="min-w-0 flex-1"
                >
                  <div
                    class="text-[10px] font-semibold uppercase tracking-wider text-fg-secondary"
                  >
                    Project root
                  </div>
                  <div
                    class="font-mono text-[11px] text-fg-secondary truncate"
                  >
                    /test
                  </div>
                </div>
                <button
                  class="text-[10px] font-medium px-1.5 py-1 rounded border border-border bg-surface-1 hover:bg-surface-3 text-fg-secondary hover:text-fg-primary inline-flex items-center gap-1 flex-shrink-0"
                  title="Copy path"
                >
                  <svg
                    class="lucide lucide-copy w-3 h-3"
                    fill="none"
                    height="24"
                    stroke="currentColor"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <rect
                      height="14"
                      rx="2"
                      ry="2"
                      width="14"
                      x="8"
                      y="8"
                    />
                    <path
                      d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
                    />
                  </svg>
                </button>
              </div>
              <div
                class="relative flex items-center gap-2.5 rounded-lg border border-border bg-surface-2 px-3 py-2 min-w-0 overflow-hidden"
              >
                <div
                  aria-hidden="true"
                  class="absolute left-0 top-0 bottom-0 w-1 bg-status-warning/40"
                />
                <span
                  class="w-7 h-7 rounded-md bg-status-warning/10 flex items-center justify-center flex-shrink-0 ml-1.5"
                >
                  <svg
                    class="lucide lucide-file-text w-3.5 h-3.5 text-status-warning"
                    fill="none"
                    height="24"
                    stroke="currentColor"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"
                    />
                    <path
                      d="M14 2v4a2 2 0 0 0 2 2h4"
                    />
                    <path
                      d="M10 9H8"
                    />
                    <path
                      d="M16 13H8"
                    />
                    <path
                      d="M16 17H8"
                    />
                  </svg>
                </span>
                <div
                  class="min-w-0 flex-1"
                >
                  <div
                    class="text-[10px] font-semibold uppercase tracking-wider text-fg-secondary"
                  >
                    claude.json
                  </div>
                  <div
                    class="font-mono text-[11px] text-fg-secondary truncate"
                  >
                    /home/test/.claude.json
                  </div>
                </div>
                <button
                  class="text-[10px] font-medium px-1.5 py-1 rounded border border-border bg-surface-1 hover:bg-surface-3 text-fg-secondary hover:text-fg-primary inline-flex items-center gap-1 flex-shrink-0"
                  title="Copy path"
                >
                  <svg
                    class="lucide lucide-copy w-3 h-3"
                    fill="none"
                    height="24"
                    stroke="currentColor"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <rect
                      height="14"
                      rx="2"
                      ry="2"
                      width="14"
                      x="8"
                      y="8"
                    />
                    <path
                      d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
                    />
                  </svg>
                </button>
              </div>
            </div>
          </section>
          <section>
            <h2
              class="text-[11px] font-semibold uppercase tracking-wider text-fg-muted mb-2"
            >
              Quick summary
            </h2>
            <div
              class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-2"
            >
              <div
                class="relative rounded-lg border border-border bg-surface-2 overflow-hidden"
              >
                <div
                  aria-hidden="true"
                  class="absolute left-0 top-0 bottom-0 w-1 bg-fuchsia-500/40"
                />
                <div
                  class="pl-3.5 pr-3 py-2.5"
                >
                  <div
                    class="flex items-center gap-2"
                  >
                    <span
                      class="w-6 h-6 rounded-md bg-fuchsia-500/10 flex items-center justify-center flex-shrink-0"
                    >
                      <svg
                        class="lucide lucide-sparkles w-3.5 h-3.5 text-fuchsia-300"
                        fill="none"
                        height="24"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"
                        />
                        <path
                          d="M20 3v4"
                        />
                        <path
                          d="M22 5h-4"
                        />
                        <path
                          d="M4 17v2"
                        />
                        <path
                          d="M5 18H3"
                        />
                      </svg>
                    </span>
                    <span
                      class="text-[10px] font-semibold uppercase tracking-wider text-fg-secondary truncate"
                    >
                      Skills
                    </span>
                  </div>
                  <div
                    class="mt-1.5 flex items-baseline gap-2"
                  >
                    <span
                      class="text-xl font-semibold text-fg-primary tabular-nums"
                    >
                      0
                    </span>
                    <span
                      class="text-[10px] text-fg-muted truncate"
                    >
                      0
                       
                      user
                       · 
                      0
                       
                      project
                    </span>
                  </div>
                </div>
              </div>
              <div
                class="relative rounded-lg border border-border bg-surface-2 overflow-hidden"
              >
                <div
                  aria-hidden="true"
                  class="absolute left-0 top-0 bottom-0 w-1 bg-sky-500/40"
                />
                <div
                  class="pl-3.5 pr-3 py-2.5"
                >
                  <div
                    class="flex items-center gap-2"
                  >
                    <span
                      class="w-6 h-6 rounded-md bg-sky-500/10 flex items-center justify-center flex-shrink-0"
                    >
                      <svg
                        class="lucide lucide-user-round w-3.5 h-3.5 text-sky-300"
                        fill="none"
                        height="24"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <circle
                          cx="12"
                          cy="8"
                          r="5"
                        />
                        <path
                          d="M20 21a8 8 0 0 0-16 0"
                        />
                      </svg>
                    </span>
                    <span
                      class="text-[10px] font-semibold uppercase tracking-wider text-fg-secondary truncate"
                    >
                      Subagents
                    </span>
                  </div>
                  <div
                    class="mt-1.5 flex items-baseline gap-2"
                  >
                    <span
                      class="text-xl font-semibold text-fg-primary tabular-nums"
                    >
                      0
                    </span>
                    <span
                      class="text-[10px] text-fg-muted truncate"
                    >
                      0
                       
                      user
                       · 
                      0
                       
                      project
                    </span>
                  </div>
                </div>
              </div>
              <div
                class="relative rounded-lg border border-border bg-surface-2 overflow-hidden"
              >
                <div
                  aria-hidden="true"
                  class="absolute left-0 top-0 bottom-0 w-1 bg-cyan-500/40"
                />
                <div
                  class="pl-3.5 pr-3 py-2.5"
                >
                  <div
                    class="flex items-center gap-2"
                  >
                    <span
                      class="w-6 h-6 rounded-md bg-cyan-500/10 flex items-center justify-center flex-shrink-0"
                    >
                      <svg
                        class="lucide lucide-slash w-3.5 h-3.5 text-cyan-300"
                        fill="none"
                        height="24"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M22 2 2 22"
                        />
                      </svg>
                    </span>
                    <span
                      class="text-[10px] font-semibold uppercase tracking-wider text-fg-secondary truncate"
                    >
                      Slash commands
                    </span>
                  </div>
                  <div
                    class="mt-1.5 flex items-baseline gap-2"
                  >
                    <span
                      class="text-xl font-semibold text-fg-primary tabular-nums"
                    >
                      0
                    </span>
                    <span
                      class="text-[10px] text-fg-muted truncate"
                    >
                      0
                       
                      user
                       · 
                      0
                       
                      project
                    </span>
                  </div>
                </div>
              </div>
              <div
                class="relative rounded-lg border border-border bg-surface-2 overflow-hidden"
              >
                <div
                  aria-hidden="true"
                  class="absolute left-0 top-0 bottom-0 w-1 bg-pink-500/40"
                />
                <div
                  class="pl-3.5 pr-3 py-2.5"
                >
                  <div
                    class="flex items-center gap-2"
                  >
                    <span
                      class="w-6 h-6 rounded-md bg-pink-500/10 flex items-center justify-center flex-shrink-0"
                    >
                      <svg
                        class="lucide lucide-palette w-3.5 h-3.5 text-pink-300"
                        fill="none"
                        height="24"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <circle
                          cx="13.5"
                          cy="6.5"
                          fill="currentColor"
                          r=".5"
                        />
                        <circle
                          cx="17.5"
                          cy="10.5"
                          fill="currentColor"
                          r=".5"
                        />
                        <circle
                          cx="8.5"
                          cy="7.5"
                          fill="currentColor"
                          r=".5"
                        />
                        <circle
                          cx="6.5"
                          cy="12.5"
                          fill="currentColor"
                          r=".5"
                        />
                        <path
                          d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"
                        />
                      </svg>
                    </span>
                    <span
                      class="text-[10px] font-semibold uppercase tracking-wider text-fg-secondary truncate"
                    >
                      Output styles
                    </span>
                  </div>
                  <div
                    class="mt-1.5 flex items-baseline gap-2"
                  >
                    <span
                      class="text-xl font-semibold text-fg-primary tabular-nums"
                    >
                      0
                    </span>
                    <span
                      class="text-[10px] text-fg-muted truncate"
                    >
                      0
                       
                      user
                       · 
                      0
                       
                      project
                    </span>
                  </div>
                </div>
              </div>
              <div
                class="relative rounded-lg border border-border bg-surface-2 overflow-hidden"
              >
                <div
                  aria-hidden="true"
                  class="absolute left-0 top-0 bottom-0 w-1 bg-indigo-500/40"
                />
                <div
                  class="pl-3.5 pr-3 py-2.5"
                >
                  <div
                    class="flex items-center gap-2"
                  >
                    <span
                      class="w-6 h-6 rounded-md bg-indigo-500/10 flex items-center justify-center flex-shrink-0"
                    >
                      <svg
                        class="lucide lucide-server w-3.5 h-3.5 text-indigo-300"
                        fill="none"
                        height="24"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <rect
                          height="8"
                          rx="2"
                          ry="2"
                          width="20"
                          x="2"
                          y="2"
                        />
                        <rect
                          height="8"
                          rx="2"
                          ry="2"
                          width="20"
                          x="2"
                          y="14"
                        />
                        <line
                          x1="6"
                          x2="6.01"
                          y1="6"
                          y2="6"
                        />
                        <line
                          x1="6"
                          x2="6.01"
                          y1="18"
                          y2="18"
                        />
                      </svg>
                    </span>
                    <span
                      class="text-[10px] font-semibold uppercase tracking-wider text-fg-secondary truncate"
                    >
                      MCP servers
                    </span>
                  </div>
                  <div
                    class="mt-1.5 flex items-baseline gap-2"
                  >
                    <span
                      class="text-xl font-semibold text-fg-primary tabular-nums"
                    >
                      0
                    </span>
                    <span
                      class="text-[10px] text-fg-muted truncate"
                    >
                      0
                       
                      user
                       · 
                      0
                       
                      project
                    </span>
                  </div>
                </div>
              </div>
              <div
                class="relative rounded-lg border border-border bg-surface-2 overflow-hidden"
              >
                <div
                  aria-hidden="true"
                  class="absolute left-0 top-0 bottom-0 w-1 bg-status-success/40"
                />
                <div
                  class="pl-3.5 pr-3 py-2.5"
                >
                  <div
                    class="flex items-center gap-2"
                  >
                    <span
                      class="w-6 h-6 rounded-md bg-status-success/10 flex items-center justify-center flex-shrink-0"
                    >
                      <svg
                        class="lucide lucide-plug-zap w-3.5 h-3.5 text-status-success"
                        fill="none"
                        height="24"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M6.3 20.3a2.4 2.4 0 0 0 3.4 0L12 18l-6-6-2.3 2.3a2.4 2.4 0 0 0 0 3.4Z"
                        />
                        <path
                          d="m2 22 3-3"
                        />
                        <path
                          d="M7.5 13.5 10 11"
                        />
                        <path
                          d="M10.5 16.5 13 14"
                        />
                        <path
                          d="m18 3-4 4h6l-4 4"
                        />
                      </svg>
                    </span>
                    <span
                      class="text-[10px] font-semibold uppercase tracking-wider text-fg-secondary truncate"
                    >
                      Plugins
                    </span>
                  </div>
                  <div
                    class="mt-1.5 flex items-baseline gap-2"
                  >
                    <span
                      class="text-xl font-semibold text-fg-primary tabular-nums"
                    >
                      0
                    </span>
                  </div>
                </div>
              </div>
              <div
                class="relative rounded-lg border border-border bg-surface-2 overflow-hidden"
              >
                <div
                  aria-hidden="true"
                  class="absolute left-0 top-0 bottom-0 w-1 bg-status-warning/40"
                />
                <div
                  class="pl-3.5 pr-3 py-2.5"
                >
                  <div
                    class="flex items-center gap-2"
                  >
                    <span
                      class="w-6 h-6 rounded-md bg-status-warning/10 flex items-center justify-center flex-shrink-0"
                    >
                      <svg
                        class="lucide lucide-store w-3.5 h-3.5 text-status-warning"
                        fill="none"
                        height="24"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7"
                        />
                        <path
                          d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"
                        />
                        <path
                          d="M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4"
                        />
                        <path
                          d="M2 7h20"
                        />
                        <path
                          d="M22 7v3a2 2 0 0 1-2 2a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12a2 2 0 0 1-2-2V7"
                        />
                      </svg>
                    </span>
                    <span
                      class="text-[10px] font-semibold uppercase tracking-wider text-fg-secondary truncate"
                    >
                      Marketplaces
                    </span>
                  </div>
                  <div
                    class="mt-1.5 flex items-baseline gap-2"
                  >
                    <span
                      class="text-xl font-semibold text-fg-primary tabular-nums"
                    >
                      0
                    </span>
                  </div>
                </div>
              </div>
              <div
                class="relative rounded-lg border border-border bg-surface-2 overflow-hidden"
              >
                <div
                  aria-hidden="true"
                  class="absolute left-0 top-0 bottom-0 w-1 bg-orange-500/40"
                />
                <div
                  class="pl-3.5 pr-3 py-2.5"
                >
                  <div
                    class="flex items-center gap-2"
                  >
                    <span
                      class="w-6 h-6 rounded-md bg-orange-500/10 flex items-center justify-center flex-shrink-0"
                    >
                      <svg
                        class="lucide lucide-webhook w-3.5 h-3.5 text-orange-300"
                        fill="none"
                        height="24"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M18 16.98h-5.99c-1.1 0-1.95.94-2.48 1.9A4 4 0 0 1 2 17c.01-.7.2-1.4.57-2"
                        />
                        <path
                          d="m6 17 3.13-5.78c.53-.97.1-2.18-.5-3.1a4 4 0 1 1 6.89-4.06"
                        />
                        <path
                          d="m12 6 3.13 5.73C15.66 12.7 16.9 13 18 13a4 4 0 0 1 0 8"
                        />
                      </svg>
                    </span>
                    <span
                      class="text-[10px] font-semibold uppercase tracking-wider text-fg-secondary truncate"
                    >
                      Hooks
                    </span>
                  </div>
                  <div
                    class="mt-1.5 flex items-baseline gap-2"
                  >
                    <span
                      class="text-xl font-semibold text-fg-primary tabular-nums"
                    >
                      0
                    </span>
                  </div>
                </div>
              </div>
              <div
                class="relative rounded-lg border border-border bg-surface-2 overflow-hidden"
              >
                <div
                  aria-hidden="true"
                  class="absolute left-0 top-0 bottom-0 w-1 bg-rose-500/40"
                />
                <div
                  class="pl-3.5 pr-3 py-2.5"
                >
                  <div
                    class="flex items-center gap-2"
                  >
                    <span
                      class="w-6 h-6 rounded-md bg-rose-500/10 flex items-center justify-center flex-shrink-0"
                    >
                      <svg
                        class="lucide lucide-keyboard w-3.5 h-3.5 text-rose-300"
                        fill="none"
                        height="24"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M10 8h.01"
                        />
                        <path
                          d="M12 12h.01"
                        />
                        <path
                          d="M14 8h.01"
                        />
                        <path
                          d="M16 12h.01"
                        />
                        <path
                          d="M18 8h.01"
                        />
                        <path
                          d="M6 8h.01"
                        />
                        <path
                          d="M7 16h10"
                        />
                        <path
                          d="M8 12h.01"
                        />
                        <rect
                          height="16"
                          rx="2"
                          width="20"
                          x="2"
                          y="4"
                        />
                      </svg>
                    </span>
                    <span
                      class="text-[10px] font-semibold uppercase tracking-wider text-fg-secondary truncate"
                    >
                      Keybindings
                    </span>
                  </div>
                  <div
                    class="mt-1.5 flex items-baseline gap-2"
                  >
                    <span
                      class="text-xl font-semibold text-fg-primary tabular-nums"
                    >
                      0
                    </span>
                  </div>
                </div>
              </div>
              <div
                class="relative rounded-lg border border-border bg-surface-2 overflow-hidden"
              >
                <div
                  aria-hidden="true"
                  class="absolute left-0 top-0 bottom-0 w-1 bg-surface-4/40"
                />
                <div
                  class="pl-3.5 pr-3 py-2.5"
                >
                  <div
                    class="flex items-center gap-2"
                  >
                    <span
                      class="w-6 h-6 rounded-md bg-surface-4/10 flex items-center justify-center flex-shrink-0"
                    >
                      <svg
                        class="lucide lucide-settings w-3.5 h-3.5 text-fg-secondary"
                        fill="none"
                        height="24"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"
                        />
                        <circle
                          cx="12"
                          cy="12"
                          r="3"
                        />
                      </svg>
                    </span>
                    <span
                      class="text-[10px] font-semibold uppercase tracking-wider text-fg-secondary truncate"
                    >
                      Settings
                    </span>
                  </div>
                  <div
                    class="mt-1.5 flex items-baseline gap-2"
                  >
                    <span
                      class="text-xl font-semibold text-fg-primary tabular-nums"
                    >
                      0
                    </span>
                  </div>
                </div>
              </div>
              <div
                class="relative rounded-lg border border-border bg-surface-2 overflow-hidden"
              >
                <div
                  aria-hidden="true"
                  class="absolute left-0 top-0 bottom-0 w-1 bg-teal-500/40"
                />
                <div
                  class="pl-3.5 pr-3 py-2.5"
                >
                  <div
                    class="flex items-center gap-2"
                  >
                    <span
                      class="w-6 h-6 rounded-md bg-teal-500/10 flex items-center justify-center flex-shrink-0"
                    >
                      <svg
                        class="lucide lucide-book-open w-3.5 h-3.5 text-teal-300"
                        fill="none"
                        height="24"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M12 7v14"
                        />
                        <path
                          d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"
                        />
                      </svg>
                    </span>
                    <span
                      class="text-[10px] font-semibold uppercase tracking-wider text-fg-secondary truncate"
                    >
                      Memory
                    </span>
                  </div>
                  <div
                    class="mt-1.5 flex items-baseline gap-2"
                  >
                    <span
                      class="text-xl font-semibold text-fg-primary tabular-nums"
                    >
                      0
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </section>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`screen snapshots > Dashboard 1`] = `
<div>
  <div
    class="flex flex-col gap-8 animate-fade-in min-h-[calc(100vh-4rem)]"
  >
    <div
      class="flex flex-wrap items-center justify-between gap-3"
    >
      <div
        class="flex items-center gap-3"
      >
        <div
          class="w-9 h-9 rounded-xl bg-accent/15 flex items-center justify-center"
        >
          <svg
            class="lucide lucide-layout-dashboard w-4.5 h-4.5 text-accent"
            fill="none"
            height="24"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <rect
              height="9"
              rx="1"
              width="7"
              x="3"
              y="3"
            />
            <rect
              height="5"
              rx="1"
              width="7"
              x="14"
              y="3"
            />
            <rect
              height="9"
              rx="1"
              width="7"
              x="14"
              y="12"
            />
            <rect
              height="5"
              rx="1"
              width="7"
              x="3"
              y="16"
            />
          </svg>
        </div>
        <div>
          <div
            class="flex items-center gap-2"
          >
            <h1
              class="text-lg font-semibold text-fg-primary"
            >
              Dashboard
            </h1>
            <span
              class="flex items-center gap-1.5 text-[11px] text-status-success bg-status-success/10 border border-status-success/20 px-2 py-0.5 rounded-full"
            >
              <span
                class="w-1.5 h-1.5 rounded-full bg-status-success animate-pulse-dot"
              />
              Live
            </span>
          </div>
          <p
            class="text-xs text-fg-muted"
          >
            Real-time overview of Claude Code agent activity
          </p>
        </div>
      </div>
      <div
        class="flex items-center gap-3"
      >
        <div
          class="flex bg-surface-2 rounded-lg p-0.5 border border-border"
        >
          <button
            class="px-2.5 py-1.5 rounded-md text-xs font-medium transition-all flex items-center gap-2 bg-accent/15 text-accent shadow-sm"
          >
            <svg
              class="lucide lucide-activity w-3.5 h-3.5"
              fill="none"
              height="24"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"
              />
            </svg>
             Monitor
          </button>
          <button
            class="px-2.5 py-1.5 rounded-md text-xs font-medium transition-all flex items-center gap-2 text-fg-muted hover:text-fg-secondary"
          >
            <svg
              class="lucide lucide-server w-3.5 h-3.5"
              fill="none"
              height="24"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <rect
                height="8"
                rx="2"
                ry="2"
                width="20"
                x="2"
                y="2"
              />
              <rect
                height="8"
                rx="2"
                ry="2"
                width="20"
                x="2"
                y="14"
              />
              <line
                x1="6"
                x2="6.01"
                y1="6"
                y2="6"
              />
              <line
                x1="6"
                x2="6.01"
                y1="18"
                y2="18"
              />
            </svg>
             Health
          </button>
        </div>
        <button
          class="btn-ghost flex-shrink-0"
        >
          <svg
            class="lucide lucide-refresh-cw w-4 h-4"
            fill="none"
            height="24"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"
            />
            <path
              d="M21 3v5h-5"
            />
            <path
              d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"
            />
            <path
              d="M8 16H3v5"
            />
          </svg>
           
          Refresh
        </button>
      </div>
    </div>
    <div
      class="flex-1 flex flex-col gap-8 min-h-0"
    >
      <div
        class="grid grid-cols-2 md:grid-cols-3 gap-4"
      >
        <div
          class="card p-5"
        >
          <div
            class="flex items-center justify-between gap-3 mb-3"
          >
            <span
              class="text-xs font-medium text-fg-muted uppercase tracking-wider truncate"
            >
              Total Sessions
            </span>
            <svg
              class="lucide lucide-folder-open w-5 h-5 flex-shrink-0 text-accent"
              fill="none"
              height="24"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2"
              />
            </svg>
          </div>
          <div
            class="flex items-end gap-2 min-w-0"
          >
            <span
              class="relative inline-block cursor-default"
            >
              <span
                class="text-2xl font-semibold text-fg-primary truncate"
              >
                0
              </span>
            </span>
            <span
              class="text-xs text-fg-muted mb-1 flex-shrink-0"
            >
              0 active
            </span>
          </div>
        </div>
        <div
          class="card p-5"
        >
          <div
            class="flex items-center justify-between gap-3 mb-3"
          >
            <span
              class="text-xs font-medium text-fg-muted uppercase tracking-wider truncate"
            >
              Active Agents
            </span>
            <svg
              class="lucide lucide-bot w-5 h-5 flex-shrink-0 text-status-success"
              fill="none"
              height="24"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M12 8V4H8"
              />
              <rect
                height="12"
                rx="2"
                width="16"
                x="4"
                y="8"
              />
              <path
                d="M2 14h2"
              />
              <path
                d="M20 14h2"
              />
              <path
                d="M15 13v2"
              />
              <path
                d="M9 13v2"
              />
            </svg>
          </div>
          <div
            class="flex items-end gap-2 min-w-0"
          >
            <span
              class="text-2xl font-semibold text-fg-primary truncate"
            >
              0
            </span>
          </div>
        </div>
        <div
          class="card p-5"
        >
          <div
            class="flex items-center justify-between gap-3 mb-3"
          >
            <span
              class="text-xs font-medium text-fg-muted uppercase tracking-wider truncate"
            >
              Active Subagents
            </span>
            <svg
              class="lucide lucide-git-branch w-5 h-5 flex-shrink-0 text-violet-400"
              fill="none"
              height="24"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <line
                x1="6"
                x2="6"
                y1="3"
                y2="15"
              />
              <circle
                cx="18"
                cy="6"
                r="3"
              />
              <circle
                cx="6"
                cy="18"
                r="3"
              />
              <path
                d="M18 9a9 9 0 0 1-9 9"
              />
            </svg>
          </div>
          <div
            class="flex items-end gap-2 min-w-0"
          >
            <span
              class="text-2xl font-semibold text-fg-primary truncate"
            >
              0
            </span>
            <span
              class="text-xs text-fg-muted mb-1 flex-shrink-0"
            >
              0 in active sessions
            </span>
          </div>
        </div>
        <div
          class="card p-5"
        >
          <div
            class="flex items-center justify-between gap-3 mb-3"
          >
            <span
              class="text-xs font-medium text-fg-muted uppercase tracking-wider truncate"
            >
              Events Today
            </span>
            <svg
              class="lucide lucide-zap w-5 h-5 flex-shrink-0 text-yellow-400"
              fill="none"
              height="24"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"
              />
            </svg>
          </div>
          <div
            class="flex items-end gap-2 min-w-0"
          >
            <span
              class="relative inline-block cursor-default"
            >
              <span
                class="text-2xl font-semibold text-fg-primary truncate"
              >
                0
              </span>
            </span>
          </div>
        </div>
        <div
          class="card p-5"
        >
          <div
            class="flex items-center justify-between gap-3 mb-3"
          >
            <span
              class="text-xs font-medium text-fg-muted uppercase tracking-wider truncate"
            >
              Total Events
            </span>
            <svg
              class="lucide lucide-activity w-5 h-5 flex-shrink-0 text-violet-400"
              fill="none"
              height="24"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"
              />
            </svg>
          </div>
          <div
            class="flex items-end gap-2 min-w-0"
          >
            <span
              class="relative inline-block cursor-default"
            >
              <span
                class="text-2xl font-semibold text-fg-primary truncate"
              >
                0
              </span>
            </span>
          </div>
        </div>
        <div
          class="card p-5"
        >
          <div
            class="flex items-center justify-between gap-3 mb-3"
          >
            <span
              class="text-xs font-medium text-fg-muted uppercase tracking-wider truncate"
            >
              Total Cost
            </span>
            <svg
              class="lucide lucide-dollar-sign w-5 h-5 flex-shrink-0 text-status-success"
              fill="none"
              height="24"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <line
                x1="12"
                x2="12"
                y1="2"
                y2="22"
              />
              <path
                d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"
              />
            </svg>
          </div>
          <div
            class="flex items-end gap-2 min-w-0"
          >
            <span
              class="relative inline-block cursor-default"
            >
              <span
                class="text-2xl font-semibold text-fg-primary truncate"
              >
                $0.00
              </span>
            </span>
          </div>
        </div>
      </div>
      <div
        class="grid grid-cols-1 lg:grid-cols-[1fr_auto_1fr] gap-0 min-w-0 flex-1 min-h-0"
      >
        <div
          class="min-w-0 overflow-y-auto pr-6"
        >
          <div
            class="flex items-center justify-between mb-4"
          >
            <h3
              class="text-sm font-medium text-fg-secondary"
            >
              Active Agents
            </h3>
            <button
              class="btn-ghost text-xs"
            >
              View Board
               
              <svg
                class="lucide lucide-arrow-right w-3 h-3"
                fill="none"
                height="24"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                viewBox="0 0 24 24"
                width="24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M5 12h14"
                />
                <path
                  d="m12 5 7 7-7 7"
                />
              </svg>
            </button>
          </div>
          <div
            class="flex flex-col items-center justify-center py-20 text-center"
          >
            <div
              class="w-14 h-14 rounded-2xl bg-surface-4 flex items-center justify-center mb-5"
            >
              <svg
                class="lucide lucide-bot w-6 h-6 text-fg-muted"
                fill="none"
                height="24"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                viewBox="0 0 24 24"
                width="24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M12 8V4H8"
                />
                <rect
                  height="12"
                  rx="2"
                  width="16"
                  x="4"
                  y="8"
                />
                <path
                  d="M2 14h2"
                />
                <path
                  d="M20 14h2"
                />
                <path
                  d="M15 13v2"
                />
                <path
                  d="M9 13v2"
                />
              </svg>
            </div>
            <h3
              class="text-base font-medium text-fg-secondary mb-2"
            >
              No active agents
            </h3>
            <p
              class="text-sm text-fg-muted max-w-md mb-6"
            >
              Agents will appear here when a Claude Code session is running.
            </p>
          </div>
        </div>
        <div
          class="hidden lg:block w-px bg-border self-stretch"
        />
        <div
          class="min-w-0 overflow-y-auto pl-6"
        >
          <div
            class="flex items-center justify-between mb-4"
          >
            <h3
              class="text-sm font-medium text-fg-secondary"
            >
              Recent Activity
            </h3>
            <button
              class="btn-ghost text-xs"
            >
              View All
               
              <svg
                class="lucide lucide-arrow-right w-3 h-3"
                fill="none"
                height="24"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                viewBox="0 0 24 24"
                width="24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M5 12h14"
                />
                <path
                  d="m12 5 7 7-7 7"
                />
              </svg>
            </button>
          </div>
          <div
            class="flex flex-col items-center justify-center py-20 text-center"
          >
            <div
              class="w-14 h-14 rounded-2xl bg-surface-4 flex items-center justify-center mb-5"
            >
              <svg
                class="lucide lucide-activity w-6 h-6 text-fg-muted"
                fill="none"
                height="24"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                viewBox="0 0 24 24"
                width="24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"
                />
              </svg>
            </div>
            <h3
              class="text-base font-medium text-fg-secondary mb-2"
            >
              No activity yet
            </h3>
            <p
              class="text-sm text-fg-muted max-w-md mb-6"
            >
              Events from Claude Code sessions will stream here in real-time.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`screen snapshots > Kanban board 1`] = `
<div>
  <div
    class="animate-fade-in flex flex-col min-h-[60vh]"
  >
    <div
      class="flex flex-wrap items-center justify-between gap-3 mb-8"
    >
      <div
        class="flex items-center gap-3 min-w-0"
      >
        <div
          class="w-9 h-9 rounded-xl bg-accent/15 flex items-center justify-center flex-shrink-0"
        >
          <svg
            class="lucide lucide-columns3 w-4.5 h-4.5 text-accent"
            fill="none"
            height="24"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <rect
              height="18"
              rx="2"
              width="18"
              x="3"
              y="3"
            />
            <path
              d="M9 3v18"
            />
            <path
              d="M15 3v18"
            />
          </svg>
        </div>
        <div
          class="min-w-0"
        >
          <div
            class="flex items-center gap-2"
          >
            <h1
              class="text-lg font-semibold text-fg-primary truncate"
            >
              Kanban Board
            </h1>
            <span
              class="flex items-center gap-1.5 text-[11px] text-status-success bg-status-success/10 border border-status-success/20 px-2 py-0.5 rounded-full"
            >
              <span
                class="w-1.5 h-1.5 rounded-full bg-status-success animate-pulse-dot"
              />
              Live
            </span>
          </div>
          <p
            class="text-xs text-fg-muted truncate"
          >
            0 agent tracked
          </p>
        </div>
      </div>
      <div
        class="flex items-center gap-2 flex-shrink-0"
      >
        <div
          aria-label="Agents / Sessions"
          class="inline-flex border border-border rounded-lg overflow-hidden bg-surface-2"
          role="tablist"
        >
          <button
            aria-selected="true"
            class="px-3 py-1.5 text-xs font-medium transition-colors first:rounded-l-lg last:rounded-r-lg bg-accent/15 text-accent"
            role="tab"
            type="button"
          >
            Agents
          </button>
          <button
            aria-selected="false"
            class="px-3 py-1.5 text-xs font-medium transition-colors first:rounded-l-lg last:rounded-r-lg border-l border-border text-fg-secondary hover:text-fg-primary hover:bg-surface-3"
            role="tab"
            type="button"
          >
            Sessions
          </button>
        </div>
        <button
          class="btn-ghost flex-shrink-0"
        >
          <svg
            class="lucide lucide-refresh-cw w-4 h-4"
            fill="none"
            height="24"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"
            />
            <path
              d="M21 3v5h-5"
            />
            <path
              d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"
            />
            <path
              d="M8 16H3v5"
            />
          </svg>
           
          Refresh
        </button>
      </div>
    </div>
    <div
      class="flex-1 flex items-center justify-center"
    >
      <div
        class="flex flex-col items-center justify-center py-20 text-center"
      >
        <div
          class="w-14 h-14 rounded-2xl bg-surface-4 flex items-center justify-center mb-5"
        >
          <svg
            class="lucide lucide-columns3 w-6 h-6 text-fg-muted"
            fill="none"
            height="24"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <rect
              height="18"
              rx="2"
              width="18"
              x="3"
              y="3"
            />
            <path
              d="M9 3v18"
            />
            <path
              d="M15 3v18"
            />
          </svg>
        </div>
        <h3
          class="text-base font-medium text-fg-secondary mb-2"
        >
          No agents tracked yet
        </h3>
        <p
          class="text-sm text-fg-muted max-w-md mb-6"
        >
          Start a Claude Code session with hooks installed to see agents appear here.
        </p>
        <button
          class="btn-primary"
        >
          <svg
            class="lucide lucide-refresh-cw w-4 h-4"
            fill="none"
            height="24"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"
            />
            <path
              d="M21 3v5h-5"
            />
            <path
              d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"
            />
            <path
              d="M8 16H3v5"
            />
          </svg>
           
          Refresh
        </button>
      </div>
    </div>
  </div>
</div>
`;

exports[`screen snapshots > Not found 1`] = `
<div>
  <div
    class="min-h-[calc(100vh-4rem)] flex items-center justify-center animate-fade-in"
  >
    <div
      class="card max-w-xl w-full p-8 md:p-10 text-center"
    >
      <div
        class="w-14 h-14 mx-auto mb-5 rounded-xl bg-accent/15 border border-accent/25 flex items-center justify-center"
      >
        <svg
          class="lucide lucide-triangle-alert w-7 h-7 text-accent"
          fill="none"
          height="24"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          viewBox="0 0 24 24"
          width="24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"
          />
          <path
            d="M12 9v4"
          />
          <path
            d="M12 17h.01"
          />
        </svg>
      </div>
      <p
        class="text-xs uppercase tracking-[0.18em] text-fg-muted mb-2"
      >
        404
      </p>
      <h2
        class="text-2xl font-semibold text-fg-primary mb-2"
      >
        Page not found
      </h2>
      <p
        class="text-sm text-fg-secondary mb-8"
      >
        The route you requested does not exist. Use navigation to return to a valid page.
      </p>
      <div
        class="flex flex-col sm:flex-row gap-3 justify-center"
      >
        <button
          class="btn-primary"
        >
          <svg
            class="lucide lucide-house w-4 h-4"
            fill="none"
            height="24"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"
            />
            <path
              d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
            />
          </svg>
          Go to Dashboard
        </button>
        <button
          class="btn-ghost border border-border hover:border-border-light"
        >
          <svg
            class="lucide lucide-arrow-left w-4 h-4"
            fill="none"
            height="24"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="m12 19-7-7 7-7"
            />
            <path
              d="M19 12H5"
            />
          </svg>
          Go Back
        </button>
      </div>
    </div>
  </div>
</div>
`;

exports[`screen snapshots > Run 1`] = `
<div>
  <div
    class="space-y-5"
  >
    <div
      class="flex flex-wrap items-center gap-3 border-b border-border pb-3"
    >
      <h2
        class="text-base font-semibold tracking-tight text-fg-primary"
      >
        Lanes
      </h2>
      <div
        class="flex flex-wrap items-center gap-1.5 text-xs"
      >
        <span
          class="rounded-full bg-surface-2 px-2.5 py-0.5 text-fg-secondary"
          data-testid="count-total"
        >
          0
           
          lanes
        </span>
        <span
          class="rounded-full bg-blue-600/20 px-2.5 py-0.5 text-blue-400"
          data-testid="count-running"
        >
          0
           
          running
        </span>
      </div>
      <button
        class="ml-auto flex items-center gap-1.5 rounded border border-border-light px-3 py-1 text-xs text-fg-secondary transition-colors hover:border-border-light hover:text-fg-primary"
        title="Create a lane from a working directory"
      >
        <svg
          class="lucide lucide-plus h-3.5 w-3.5"
          fill="none"
          height="24"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          viewBox="0 0 24 24"
          width="24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M5 12h14"
          />
          <path
            d="M12 5v14"
          />
        </svg>
        Add lane
      </button>
    </div>
    <div
      class="flex snap-x snap-mandatory gap-2 overflow-x-auto pb-1"
      data-testid="lane-strip"
    >
      <p
        class="text-sm text-fg-muted"
      >
        No lanes yet. Create one from a working directory:
         
        <code>
          ccam lanes add --cwd $(pwd)
        </code>
      </p>
    </div>
    <div
      class="flex min-h-0 flex-col gap-2"
    >
      <div
        class="flex items-center gap-1.5"
      >
        <button
          aria-pressed="true"
          class="rounded border px-2 py-1 text-xs border-accent bg-accent/15 text-accent"
          type="button"
        >
          1 pane
        </button>
        <button
          aria-pressed="false"
          class="rounded border px-2 py-1 text-xs border-border text-fg-secondary hover:border-border-light"
          type="button"
        >
          2 pane
        </button>
        <button
          aria-pressed="false"
          class="rounded border px-2 py-1 text-xs border-border text-fg-secondary hover:border-border-light"
          type="button"
        >
          4 pane
        </button>
      </div>
      <div
        class="flex min-h-0 flex-1 flex-col gap-5"
        data-testid="console-body"
      >
        <header
          class="flex items-start gap-3"
        >
          <div
            class="w-9 h-9 rounded-xl bg-accent/15 flex items-center justify-center flex-shrink-0"
          >
            <svg
              class="lucide lucide-play w-4.5 h-4.5 text-accent"
              fill="none"
              height="24"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <polygon
                points="6 3 20 12 6 21 6 3"
              />
            </svg>
          </div>
          <div
            class="min-w-0 flex-1"
          >
            <div
              class="flex items-center gap-2"
            >
              <h1
                class="text-lg font-semibold text-fg-primary"
              >
                Run Claude
              </h1>
              <span
                class="flex items-center gap-1.5 text-[11px] text-status-success bg-status-success/10 border border-status-success/20 px-2 py-0.5 rounded-full"
              >
                <span
                  class="w-1.5 h-1.5 rounded-full bg-status-success animate-pulse-dot"
                />
                Live
              </span>
            </div>
            <p
              class="text-xs text-fg-muted max-w-3xl"
            >
              Spin up a Claude Code session right inside the dashboard. Live streaming output, multi-turn conversation, and the same hooks-driven analytics as your terminal sessions.
            </p>
          </div>
          <button
            class="inline-flex items-center gap-2 rounded-lg border px-3 py-1.5 text-xs font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed border-border bg-surface-2 text-fg-secondary hover:bg-surface-3"
            disabled=""
          >
            <svg
              class="lucide lucide-list-ordered w-3.5 h-3.5"
              fill="none"
              height="24"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M10 12h11"
              />
              <path
                d="M10 18h11"
              />
              <path
                d="M10 6h11"
              />
              <path
                d="M4 10h2"
              />
              <path
                d="M4 6h1v4"
              />
              <path
                d="M6 18H4c0-1 2-2 2-3s-1-1.5-2-1"
              />
            </svg>
            Active runs
          </button>
        </header>
        <div
          class="rounded-xl border border-border bg-surface-1"
        >
          <div
            class="flex flex-wrap items-center gap-x-3 gap-y-1.5 border-b border-border px-3 py-2 text-[11.5px]"
          >
            <div
              class="flex items-center rounded-md border border-border bg-surface-2 p-0.5"
            >
              <button
                aria-pressed="true"
                class="rounded px-2 py-0.5 font-medium transition-colors bg-accent/20 text-accent"
                title="Start a fresh Claude Code session."
                type="button"
              >
                New session
              </button>
              <button
                aria-pressed="false"
                class="rounded px-2 py-0.5 font-medium transition-colors text-fg-secondary hover:text-fg-primary"
                title="Pick a session from your history and continue the conversation. Cwd is locked to the original."
                type="button"
              >
                Resume existing session
              </button>
            </div>
          </div>
          <div
            class="px-4 py-3 border-b border-border"
          >
            <label
              class="block text-[11px] font-semibold uppercase tracking-wider text-fg-muted mb-1.5"
            >
              Prompt
            </label>
            <textarea
              class="w-full bg-surface-2 border border-border rounded-md px-3 py-2 text-[11px] font-mono text-fg-primary placeholder:text-fg-muted focus:outline-none focus:border-accent/50 resize-none"
              placeholder="Ask Claude anything…"
              rows="5"
            />
            <div
              class="mt-1 text-[10px] text-fg-muted"
            >
              Cmd+Enter / Ctrl+Enter to send
               · / for slash commands · @ for file references
            </div>
          </div>
          <div
            class="grid grid-cols-1 gap-3 px-4 py-3 sm:grid-cols-2 lg:grid-cols-4"
          >
            <div>
              <label
                class="block text-[10px] font-semibold uppercase tracking-wider text-fg-muted mb-1"
              >
                Working directory
              </label>
              <div
                title="Absolute path. Defaults to the dashboard's own cwd."
              >
                <div
                  class="relative"
                >
                  <div
                    class="relative"
                  >
                    <svg
                      class="lucide lucide-folder-open absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-fg-muted pointer-events-none"
                      fill="none"
                      height="24"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2"
                      />
                    </svg>
                    <input
                      autocomplete="off"
                      class="w-full bg-surface-2 border border-border rounded-md pl-7 pr-3 py-1.5 text-[11px] font-mono text-fg-primary placeholder:text-fg-muted focus:outline-none focus:border-accent/50"
                      placeholder="Type to search or paste an absolute path…"
                      spellcheck="false"
                      type="text"
                      value=""
                    />
                  </div>
                </div>
              </div>
            </div>
            <div>
              <label
                class="block text-[10px] font-semibold uppercase tracking-wider text-fg-muted mb-1"
              >
                Model
              </label>
              <div
                class="space-y-1.5"
              >
                <div
                  class="relative"
                >
                  <button
                    class="w-full flex items-center justify-between gap-2 bg-surface-2 border border-border rounded-md px-3 py-1.5 text-[11px] text-fg-primary focus:outline-none focus:border-accent/50 hover:bg-surface-3 transition-colors disabled:opacity-60 disabled:cursor-not-allowed"
                    type="button"
                  >
                    <span
                      class="truncate"
                    >
                      Inherit from settings
                    </span>
                    <svg
                      class="lucide lucide-chevron-down w-3.5 h-3.5 text-fg-muted flex-shrink-0"
                      fill="none"
                      height="24"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="m6 9 6 6 6-6"
                      />
                    </svg>
                  </button>
                </div>
              </div>
            </div>
            <div>
              <label
                class="block text-[10px] font-semibold uppercase tracking-wider text-fg-muted mb-1"
              >
                Permission mode
              </label>
              <div
                class="relative"
              >
                <button
                  class="w-full flex items-center justify-between gap-2 bg-surface-2 border border-border rounded-md px-3 py-1.5 text-[11px] text-fg-primary focus:outline-none focus:border-accent/50 hover:bg-surface-3 transition-colors disabled:opacity-60 disabled:cursor-not-allowed"
                  type="button"
                >
                  <span
                    class="truncate"
                  >
                    acceptEdits (recommended)
                  </span>
                  <svg
                    class="lucide lucide-chevron-down w-3.5 h-3.5 text-fg-muted flex-shrink-0"
                    fill="none"
                    height="24"
                    stroke="currentColor"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m6 9 6 6 6-6"
                    />
                  </svg>
                </button>
              </div>
            </div>
            <div>
              <label
                class="block text-[10px] font-semibold uppercase tracking-wider text-fg-muted mb-1"
              >
                Thinking effort
              </label>
              <div
                class="relative"
              >
                <button
                  class="w-full flex items-center justify-between gap-2 bg-surface-2 border border-border rounded-md px-3 py-1.5 text-[11px] text-fg-primary focus:outline-none focus:border-accent/50 hover:bg-surface-3 transition-colors disabled:opacity-60 disabled:cursor-not-allowed"
                  type="button"
                >
                  <span
                    class="truncate"
                  >
                    Default (model decides)
                  </span>
                  <svg
                    class="lucide lucide-chevron-down w-3.5 h-3.5 text-fg-muted flex-shrink-0"
                    fill="none"
                    height="24"
                    stroke="currentColor"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m6 9 6 6 6-6"
                    />
                  </svg>
                </button>
              </div>
            </div>
          </div>
          <div
            class="border-t border-border px-4 py-3 flex items-center justify-between gap-3 flex-wrap"
          >
            <div
              class="flex items-center gap-3 text-[11px] min-w-0"
            />
            <button
              class="inline-flex items-center gap-2 rounded-lg border border-accent/40 bg-accent/15 hover:bg-accent/25 text-accent px-4 py-1.5 text-sm font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
              disabled=""
            >
              <svg
                class="lucide lucide-play w-3.5 h-3.5"
                fill="none"
                height="24"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                viewBox="0 0 24 24"
                width="24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <polygon
                  points="6 3 20 12 6 21 6 3"
                />
              </svg>
              Run
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`screen snapshots > Session detail 1`] = `
<div>
  <div
    class="animate-fade-in space-y-8"
  >
    <div
      class="flex items-start gap-4"
    >
      <button
        class="btn-ghost mt-1"
      >
        <svg
          class="lucide lucide-arrow-left w-4 h-4"
          fill="none"
          height="24"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          viewBox="0 0 24 24"
          width="24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="m12 19-7-7 7-7"
          />
          <path
            d="M19 12H5"
          />
        </svg>
      </button>
      <div
        class="flex-1"
      >
        <div
          class="flex items-center gap-3 mb-2"
        >
          <h2
            class="text-xl font-semibold text-fg-primary"
          >
            Test Session
          </h2>
          <span
            class="badge bg-emerald-500/10 border-emerald-500/20 text-emerald-400"
          >
            Active
          </span>
        </div>
        <div
          class="flex flex-wrap items-center gap-x-4 gap-y-1 mt-1"
        >
          <span
            class="inline-flex items-center gap-1 text-xs text-fg-muted font-mono bg-surface-2 px-2 py-1 rounded"
          >
            <span
              title="sess-1"
            >
              sess-1
            </span>
            <button
              aria-label="Copy"
              class="flex items-center gap-1 text-[10px] py-0.5 px-1.5 rounded text-fg-secondary hover:text-fg-primary hover:bg-surface-2 cursor-pointer"
              type="button"
            >
              <svg
                class="lucide lucide-copy w-3 h-3"
                fill="none"
                height="24"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                viewBox="0 0 24 24"
                width="24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <rect
                  height="14"
                  rx="2"
                  ry="2"
                  width="14"
                  x="8"
                  y="8"
                />
                <path
                  d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
                />
              </svg>
              Copy
            </button>
          </span>
          <span
            class="inline-flex items-center gap-1.5 text-xs text-fg-secondary bg-surface-2 px-2 py-1 rounded"
          >
            <svg
              class="lucide lucide-cpu w-3 h-3 text-fg-muted"
              fill="none"
              height="24"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <rect
                height="16"
                rx="2"
                width="16"
                x="4"
                y="4"
              />
              <rect
                height="6"
                rx="1"
                width="6"
                x="9"
                y="9"
              />
              <path
                d="M15 2v2"
              />
              <path
                d="M15 20v2"
              />
              <path
                d="M2 15h2"
              />
              <path
                d="M2 9h2"
              />
              <path
                d="M20 15h2"
              />
              <path
                d="M20 9h2"
              />
              <path
                d="M9 2v2"
              />
              <path
                d="M9 20v2"
              />
            </svg>
            Claude Opus 4.6
          </span>
          <span
            class="inline-flex items-center gap-1.5 text-xs text-fg-secondary bg-surface-2 px-2 py-1 rounded"
          >
            <svg
              class="lucide lucide-clock w-3 h-3 text-fg-muted"
              fill="none"
              height="24"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <circle
                cx="12"
                cy="12"
                r="10"
              />
              <polyline
                points="12 6 12 12 16 14"
              />
            </svg>
            Jun 10, 12:00 PM
          </span>
        </div>
        <div
          class="flex items-center gap-1.5 text-xs text-fg-muted mt-2 min-w-0"
        >
          <svg
            class="lucide lucide-folder-open w-3 h-3 flex-shrink-0"
            fill="none"
            height="24"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2"
            />
          </svg>
          <span
            class="font-mono truncate"
            title="/test"
          >
            /test
          </span>
          <button
            aria-label="Copy"
            class="flex items-center gap-1 text-[10px] py-0.5 px-1.5 rounded text-fg-secondary hover:text-fg-primary hover:bg-surface-2 cursor-pointer"
            type="button"
          >
            <svg
              class="lucide lucide-copy w-3 h-3"
              fill="none"
              height="24"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <rect
                height="14"
                rx="2"
                ry="2"
                width="14"
                x="8"
                y="8"
              />
              <path
                d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
              />
            </svg>
            Copy
          </button>
        </div>
      </div>
      <button
        class="btn-ghost"
      >
        <svg
          class="lucide lucide-refresh-cw w-4 h-4"
          fill="none"
          height="24"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          viewBox="0 0 24 24"
          width="24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"
          />
          <path
            d="M21 3v5h-5"
          />
          <path
            d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"
          />
          <path
            d="M8 16H3v5"
          />
        </svg>
      </button>
    </div>
    <div
      class="flex items-center gap-1 border-b border-border"
    >
      <button
        class="flex items-center gap-2 px-4 py-2.5 text-sm font-medium border-b-2 transition-colors border-violet-500 text-violet-400"
      >
        <svg
          class="lucide lucide-bot w-4 h-4"
          fill="none"
          height="24"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          viewBox="0 0 24 24"
          width="24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M12 8V4H8"
          />
          <rect
            height="12"
            rx="2"
            width="16"
            x="4"
            y="8"
          />
          <path
            d="M2 14h2"
          />
          <path
            d="M20 14h2"
          />
          <path
            d="M15 13v2"
          />
          <path
            d="M9 13v2"
          />
        </svg>
        Agents
         (
        0
        )
      </button>
      <button
        class="flex items-center gap-2 px-4 py-2.5 text-sm font-medium border-b-2 transition-colors border-transparent text-fg-muted hover:text-fg-secondary"
      >
        <svg
          class="lucide lucide-message-square w-4 h-4"
          fill="none"
          height="24"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          viewBox="0 0 24 24"
          width="24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"
          />
        </svg>
        Conversation
      </button>
      <button
        class="flex items-center gap-2 px-4 py-2.5 text-sm font-medium border-b-2 transition-colors border-transparent text-fg-muted hover:text-fg-secondary"
      >
        <svg
          class="lucide lucide-list w-4 h-4"
          fill="none"
          height="24"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          viewBox="0 0 24 24"
          width="24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M3 12h.01"
          />
          <path
            d="M3 18h.01"
          />
          <path
            d="M3 6h.01"
          />
          <path
            d="M8 12h13"
          />
          <path
            d="M8 18h13"
          />
          <path
            d="M8 6h13"
          />
        </svg>
        Timeline (0/0)
      </button>
    </div>
    <div>
      <div
        class="space-y-5 mb-6"
      >
        <div
          class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-2.5"
        >
          <div
            class="rounded-lg border px-3 py-2.5 border-surface-3 bg-surface-2 text-fg-secondary"
          >
            <div
              class="flex items-center gap-1.5 text-[10px] uppercase tracking-wider text-fg-muted"
            >
              <span
                class="text-fg-muted"
              >
                <svg
                  class="lucide lucide-activity w-3 h-3"
                  fill="none"
                  height="24"
                  stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  viewBox="0 0 24 24"
                  width="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"
                  />
                </svg>
              </span>
              Events
            </div>
            <div
              class="mt-1 font-mono text-lg font-semibold text-fg-primary leading-tight"
            >
              0
            </div>
          </div>
          <div
            class="rounded-lg border px-3 py-2.5 border-violet-500/20 bg-violet-500/5 text-violet-200"
          >
            <div
              class="flex items-center gap-1.5 text-[10px] uppercase tracking-wider text-fg-muted"
            >
              <span
                class="text-violet-400"
              >
                <svg
                  class="lucide lucide-wrench w-3 h-3"
                  fill="none"
                  height="24"
                  stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  viewBox="0 0 24 24"
                  width="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"
                  />
                </svg>
              </span>
              Tool calls
            </div>
            <div
              class="mt-1 font-mono text-lg font-semibold text-fg-primary leading-tight"
            >
              0
            </div>
          </div>
          <div
            class="rounded-lg border px-3 py-2.5 border-cyan-500/20 bg-cyan-500/5 text-cyan-200"
          >
            <div
              class="flex items-center gap-1.5 text-[10px] uppercase tracking-wider text-fg-muted"
            >
              <span
                class="text-cyan-400"
              >
                <svg
                  class="lucide lucide-git-branch w-3 h-3"
                  fill="none"
                  height="24"
                  stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  viewBox="0 0 24 24"
                  width="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <line
                    x1="6"
                    x2="6"
                    y1="3"
                    y2="15"
                  />
                  <circle
                    cx="18"
                    cy="6"
                    r="3"
                  />
                  <circle
                    cx="6"
                    cy="18"
                    r="3"
                  />
                  <path
                    d="M18 9a9 9 0 0 1-9 9"
                  />
                </svg>
              </span>
              Subagents
            </div>
            <div
              class="mt-1 font-mono text-lg font-semibold text-fg-primary leading-tight"
            >
              0
            </div>
          </div>
          <div
            class="rounded-lg border px-3 py-2.5 border-blue-600/20 bg-blue-600/5 text-blue-300"
          >
            <div
              class="flex items-center gap-1.5 text-[10px] uppercase tracking-wider text-fg-muted"
            >
              <span
                class="text-blue-500"
              >
                <svg
                  class="lucide lucide-layers w-3 h-3"
                  fill="none"
                  height="24"
                  stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  viewBox="0 0 24 24"
                  width="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"
                  />
                  <path
                    d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"
                  />
                  <path
                    d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"
                  />
                </svg>
              </span>
              Compactions
            </div>
            <div
              class="mt-1 font-mono text-lg font-semibold text-fg-primary leading-tight"
            >
              0
            </div>
          </div>
          <div
            class="rounded-lg border px-3 py-2.5 border-surface-3 bg-surface-2 text-fg-secondary"
          >
            <div
              class="flex items-center gap-1.5 text-[10px] uppercase tracking-wider text-fg-muted"
            >
              <span
                class="text-fg-muted"
              >
                <svg
                  class="lucide lucide-triangle-alert w-3 h-3"
                  fill="none"
                  height="24"
                  stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  viewBox="0 0 24 24"
                  width="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"
                  />
                  <path
                    d="M12 9v4"
                  />
                  <path
                    d="M12 17h.01"
                  />
                </svg>
              </span>
              Errors
            </div>
            <div
              class="mt-1 font-mono text-lg font-semibold text-fg-primary leading-tight"
            >
              0
            </div>
          </div>
          <div
            class="rounded-lg border px-3 py-2.5 border-status-success/20 bg-status-success/5 text-status-success"
          >
            <div
              class="flex items-center gap-1.5 text-[10px] uppercase tracking-wider text-fg-muted"
            >
              <span
                class="text-status-success"
              >
                <svg
                  class="lucide lucide-clock w-3 h-3"
                  fill="none"
                  height="24"
                  stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  viewBox="0 0 24 24"
                  width="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <circle
                    cx="12"
                    cy="12"
                    r="10"
                  />
                  <polyline
                    points="12 6 12 12 16 14"
                  />
                </svg>
              </span>
              Duration
            </div>
            <div
              class="mt-1 font-mono text-lg font-semibold text-fg-primary leading-tight"
            >
              1h 0m
            </div>
            <div
              class="text-[10px] text-fg-muted mt-0.5"
            >
              running
            </div>
          </div>
        </div>
        <div
          class="grid grid-cols-1 lg:grid-cols-3 gap-4"
        >
          <div
            class="lg:col-span-2 rounded-lg border border-surface-3 bg-surface-2/60 p-3.5"
          >
            <div
              class="flex items-center justify-between mb-3"
            >
              <h3
                class="text-xs font-semibold text-fg-secondary uppercase tracking-wider flex items-center gap-1.5"
              >
                <svg
                  class="lucide lucide-wrench w-3.5 h-3.5 text-violet-400"
                  fill="none"
                  height="24"
                  stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  viewBox="0 0 24 24"
                  width="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"
                  />
                </svg>
                Top tools
              </h3>
              <span
                class="text-[10px] text-fg-muted font-mono"
              >
                0
                 total
              </span>
            </div>
            <div
              class="text-center py-6 text-xs text-fg-muted"
            >
              No tool calls yet.
            </div>
          </div>
          <div
            class="rounded-lg border border-surface-3 bg-surface-2/60 p-3.5"
          >
            <div
              class="flex items-center justify-between mb-3"
            >
              <h3
                class="text-xs font-semibold text-fg-secondary uppercase tracking-wider flex items-center gap-1.5"
              >
                <svg
                  class="lucide lucide-git-branch w-3.5 h-3.5 text-cyan-400"
                  fill="none"
                  height="24"
                  stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  viewBox="0 0 24 24"
                  width="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <line
                    x1="6"
                    x2="6"
                    y1="3"
                    y2="15"
                  />
                  <circle
                    cx="18"
                    cy="6"
                    r="3"
                  />
                  <circle
                    cx="6"
                    cy="18"
                    r="3"
                  />
                  <path
                    d="M18 9a9 9 0 0 1-9 9"
                  />
                </svg>
                Subagents
              </h3>
              <span
                class="text-[10px] text-fg-muted font-mono"
              >
                0
                 runs
              </span>
            </div>
            <div
              class="text-center py-6 text-xs text-fg-muted"
            >
              No subagents in this session.
            </div>
          </div>
        </div>
      </div>
      <div
        class="mb-4"
      >
        <h3
          class="text-xs font-semibold text-fg-secondary uppercase tracking-wider mb-2 flex items-center gap-1.5"
        >
          <svg
            class="lucide lucide-workflow w-3.5 h-3.5 text-violet-400"
            fill="none"
            height="24"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <rect
              height="8"
              rx="2"
              width="8"
              x="3"
              y="3"
            />
            <path
              d="M7 11v4a2 2 0 0 0 2 2h4"
            />
            <rect
              height="8"
              rx="2"
              width="8"
              x="13"
              y="13"
            />
          </svg>
          Dynamic Workflows
          <span
            class="text-fg-muted font-mono"
          >
            · 
            1
          </span>
        </h3>
        <div
          class="space-y-2"
        >
          <div
            class="rounded-lg border border-border bg-card/40 overflow-hidden"
          >
            <button
              aria-expanded="false"
              class="w-full flex items-center gap-3 px-3 py-2.5 text-left hover:bg-surface-2/30 transition-colors"
            >
              <svg
                class="lucide lucide-chevron-right w-4 h-4 text-fg-muted flex-shrink-0"
                fill="none"
                height="24"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                viewBox="0 0 24 24"
                width="24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="m9 18 6-6-6-6"
                />
              </svg>
              <svg
                class="lucide lucide-workflow w-4 h-4 text-violet-400 flex-shrink-0"
                fill="none"
                height="24"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                viewBox="0 0 24 24"
                width="24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <rect
                  height="8"
                  rx="2"
                  width="8"
                  x="3"
                  y="3"
                />
                <path
                  d="M7 11v4a2 2 0 0 0 2 2h4"
                />
                <rect
                  height="8"
                  rx="2"
                  width="8"
                  x="13"
                  y="13"
                />
              </svg>
              <div
                class="flex-1 min-w-0"
              >
                <div
                  class="flex items-center gap-2 flex-wrap"
                >
                  <span
                    class="text-sm font-medium text-fg-secondary truncate"
                  >
                    review-changes
                  </span>
                  <span
                    class="badge text-[10px] border bg-status-success/15 text-status-success border-status-success/30"
                  >
                    Completed
                  </span>
                  <span
                    class="text-[10px] font-mono text-fg-muted"
                  >
                    claude-opus-4-6
                  </span>
                </div>
                <div
                  class="flex items-center gap-3 mt-0.5 text-[11px] text-fg-muted flex-wrap"
                >
                  <span>
                    2 agents
                  </span>
                  <span>
                    9 tool calls
                  </span>
                  <span>
                    48.0K
                     
                    tokens
                  </span>
                  <span>
                    5m 0s
                  </span>
                  <span>
                    30m ago
                  </span>
                </div>
              </div>
            </button>
          </div>
        </div>
      </div>
      <p
        class="text-sm text-fg-muted"
      >
        No agents recorded.
      </p>
    </div>
  </div>
</div>
`;

exports[`screen snapshots > Sessions 1`] = `
<div>
  <div
    class="animate-fade-in"
  >
    <div
      class="flex flex-wrap items-center justify-between gap-3 mb-8"
    >
      <div
        class="flex items-center gap-3"
      >
        <div
          class="w-9 h-9 rounded-xl bg-accent/15 flex items-center justify-center"
        >
          <svg
            class="lucide lucide-folder-open w-4.5 h-4.5 text-accent"
            fill="none"
            height="24"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2"
            />
          </svg>
        </div>
        <div>
          <div
            class="flex items-center gap-2"
          >
            <h1
              class="text-lg font-semibold text-fg-primary"
            >
              Sessions
            </h1>
            <span
              class="flex items-center gap-1.5 text-[11px] text-status-success bg-status-success/10 border border-status-success/20 px-2 py-0.5 rounded-full"
            >
              <span
                class="w-1.5 h-1.5 rounded-full bg-status-success animate-pulse-dot"
              />
              Live
            </span>
          </div>
          <p
            class="text-xs text-fg-muted"
          >
            0 session recorded
          </p>
        </div>
      </div>
      <button
        class="btn-ghost flex-shrink-0"
      >
        <svg
          class="lucide lucide-refresh-cw w-4 h-4"
          fill="none"
          height="24"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          viewBox="0 0 24 24"
          width="24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"
          />
          <path
            d="M21 3v5h-5"
          />
          <path
            d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"
          />
          <path
            d="M8 16H3v5"
          />
        </svg>
         
        Refresh
      </button>
    </div>
    <div
      class="flex flex-wrap lg:flex-nowrap items-center gap-3 mb-6 bg-surface-2/40 p-2 rounded-xl border border-border w-full"
    >
      <div
        class="relative flex-1 min-w-[180px] max-w-[340px]"
      >
        <svg
          class="lucide lucide-search absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-fg-muted"
          fill="none"
          height="24"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          viewBox="0 0 24 24"
          width="24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <circle
            cx="11"
            cy="11"
            r="8"
          />
          <path
            d="m21 21-4.3-4.3"
          />
        </svg>
        <input
          class="input w-full pl-10"
          placeholder="Search sessions..."
          type="text"
          value=""
        />
      </div>
      <div
        class="relative shrink-0 w-[180px]"
      >
        <select
          class="input w-full text-ellipsis bg-surface-1 pr-9 appearance-none cursor-pointer"
        >
          <option
            value=""
          >
            All Directories
          </option>
        </select>
        <svg
          class="lucide lucide-chevron-down absolute right-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-fg-muted pointer-events-none"
          fill="none"
          height="24"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          viewBox="0 0 24 24"
          width="24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="m6 9 6 6 6-6"
          />
        </svg>
      </div>
      <div
        class="flex items-center gap-1.5 bg-surface-1 px-1.5 py-1 rounded-lg border border-border h-[38px] flex-1 min-w-[180px]"
      >
        <div
          class="relative flex-1"
        >
          <select
            class="bg-transparent w-full text-sm text-fg-secondary outline-none pl-3 pr-8 appearance-none cursor-pointer whitespace-nowrap"
          >
            <option
              value="time"
            >
              Sort by Time (
              Newest
              )
            </option>
            <option
              value="duration"
            >
              Sort by Duration (
              Longest
              )
            </option>
            <option
              value="price"
            >
              Sort by Price (
              Highest
              )
            </option>
          </select>
          <svg
            class="lucide lucide-chevron-down absolute right-2 top-1/2 -translate-y-1/2 w-3 h-3 text-fg-muted pointer-events-none"
            fill="none"
            height="24"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="m6 9 6 6 6-6"
            />
          </svg>
        </div>
        <div
          class="w-px h-4 bg-border mx-1"
        />
        <button
          class="p-1.5 rounded hover:bg-surface-3 text-fg-secondary hover:text-fg-primary transition-colors shrink-0"
          title="Descending"
        >
          <svg
            class="lucide lucide-arrow-down-wide-narrow w-4 h-4"
            fill="none"
            height="24"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="m3 16 4 4 4-4"
            />
            <path
              d="M7 20V4"
            />
            <path
              d="M11 4h10"
            />
            <path
              d="M11 8h7"
            />
            <path
              d="M11 12h4"
            />
          </svg>
        </button>
      </div>
      <div
        class="flex gap-1 bg-surface-1 rounded-lg p-1 border border-border ml-auto shrink-0"
      >
        <button
          class="px-3 py-1.5 text-xs font-medium rounded-md transition-colors whitespace-nowrap bg-surface-4 text-fg-secondary"
        >
          All
        </button>
        <button
          class="px-3 py-1.5 text-xs font-medium rounded-md transition-colors whitespace-nowrap text-fg-muted hover:text-fg-secondary"
        >
          Active
        </button>
        <button
          class="px-3 py-1.5 text-xs font-medium rounded-md transition-colors whitespace-nowrap text-fg-muted hover:text-fg-secondary"
        >
          Waiting
        </button>
        <button
          class="px-3 py-1.5 text-xs font-medium rounded-md transition-colors whitespace-nowrap text-fg-muted hover:text-fg-secondary"
        >
          Completed
        </button>
        <button
          class="px-3 py-1.5 text-xs font-medium rounded-md transition-colors whitespace-nowrap text-fg-muted hover:text-fg-secondary"
        >
          Error
        </button>
        <button
          class="px-3 py-1.5 text-xs font-medium rounded-md transition-colors whitespace-nowrap text-fg-muted hover:text-fg-secondary"
        >
          Abandoned
        </button>
      </div>
    </div>
    <div
      class="flex flex-col items-center justify-center py-20 text-center"
    >
      <div
        class="w-14 h-14 rounded-2xl bg-surface-4 flex items-center justify-center mb-5"
      >
        <svg
          class="lucide lucide-folder-open w-6 h-6 text-fg-muted"
          fill="none"
          height="24"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          viewBox="0 0 24 24"
          width="24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2"
          />
        </svg>
      </div>
      <h3
        class="text-base font-medium text-fg-secondary mb-2"
      >
        No sessions found
      </h3>
      <p
        class="text-sm text-fg-muted max-w-md mb-6"
      >
        Start a Claude Code session with hooks installed to begin tracking.
      </p>
    </div>
  </div>
</div>
`;

exports[`screen snapshots > Settings 1`] = `
<div>
  <div
    class="animate-fade-in space-y-8"
  >
    <div
      class="flex flex-wrap items-center justify-between gap-3"
    >
      <div
        class="flex items-center gap-3"
      >
        <div
          class="w-9 h-9 rounded-xl bg-accent/15 flex items-center justify-center"
        >
          <svg
            class="lucide lucide-settings w-4.5 h-4.5 text-accent"
            fill="none"
            height="24"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"
            />
            <circle
              cx="12"
              cy="12"
              r="3"
            />
          </svg>
        </div>
        <div>
          <div
            class="flex items-center gap-2"
          >
            <h1
              class="text-lg font-semibold text-fg-primary"
            >
              Settings
            </h1>
            <span
              class="flex items-center gap-1.5 text-[11px] text-status-success bg-status-success/10 border border-status-success/20 px-2 py-0.5 rounded-full"
            >
              <span
                class="w-1.5 h-1.5 rounded-full bg-status-success animate-pulse-dot"
              />
              Live
            </span>
          </div>
          <p
            class="text-xs text-fg-muted"
          >
            Manage pricing, notifications, data, and hooks
          </p>
        </div>
      </div>
      <div
        class="flex items-center gap-2 flex-shrink-0"
      >
        <a
          class="inline-flex items-center gap-1.5 text-xs px-3 py-1.5 rounded-md border border-border text-fg-secondary hover:text-fg-primary hover:border-border-light transition-colors"
          download=""
          href="/api/settings/export"
        >
          <svg
            class="lucide lucide-file-down w-3.5 h-3.5"
            fill="none"
            height="24"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"
            />
            <path
              d="M14 2v4a2 2 0 0 0 2 2h4"
            />
            <path
              d="M12 18v-6"
            />
            <path
              d="m9 15 3 3 3-3"
            />
          </svg>
          Export Data
        </a>
        <button
          class="btn-ghost"
        >
          <svg
            class="lucide lucide-refresh-cw w-4 h-4"
            fill="none"
            height="24"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"
            />
            <path
              d="M21 3v5h-5"
            />
            <path
              d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"
            />
            <path
              d="M8 16H3v5"
            />
          </svg>
           
          Refresh
        </button>
      </div>
    </div>
    <nav
      class="sticky top-0 z-20 -mx-1 !mt-2 px-1 py-2 bg-surface-0/85 backdrop-blur border-b border-border/60 flex items-center gap-1.5"
    >
      <span
        class="flex-shrink-0 pl-1 text-[10px] font-semibold uppercase tracking-wider text-fg-muted"
      >
        Jump to
      </span>
      <div
        class="flex items-center gap-1.5 overflow-x-auto no-scrollbar flex-1"
      >
        <button
          class="inline-flex items-center gap-1.5 text-xs whitespace-nowrap px-2.5 py-1.5 rounded-lg border transition-colors flex-shrink-0 bg-accent/15 border-accent/30 text-accent"
          type="button"
        >
          <svg
            class="lucide lucide-dollar-sign w-3.5 h-3.5"
            fill="none"
            height="24"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <line
              x1="12"
              x2="12"
              y1="2"
              y2="22"
            />
            <path
              d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"
            />
          </svg>
          Model Pricing
        </button>
        <button
          class="inline-flex items-center gap-1.5 text-xs whitespace-nowrap px-2.5 py-1.5 rounded-lg border transition-colors flex-shrink-0 border-border text-fg-secondary hover:text-fg-primary hover:bg-surface-3"
          type="button"
        >
          <svg
            class="lucide lucide-plug w-3.5 h-3.5"
            fill="none"
            height="24"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M12 22v-5"
            />
            <path
              d="M9 8V2"
            />
            <path
              d="M15 8V2"
            />
            <path
              d="M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8Z"
            />
          </svg>
          Hook Configuration
        </button>
        <button
          class="inline-flex items-center gap-1.5 text-xs whitespace-nowrap px-2.5 py-1.5 rounded-lg border transition-colors flex-shrink-0 border-border text-fg-secondary hover:text-fg-primary hover:bg-surface-3"
          type="button"
        >
          <svg
            class="lucide lucide-git-branch w-3.5 h-3.5"
            fill="none"
            height="24"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <line
              x1="6"
              x2="6"
              y1="3"
              y2="15"
            />
            <circle
              cx="18"
              cy="6"
              r="3"
            />
            <circle
              cx="6"
              cy="18"
              r="3"
            />
            <path
              d="M18 9a9 9 0 0 1-9 9"
            />
          </svg>
          Lanes
        </button>
        <button
          class="inline-flex items-center gap-1.5 text-xs whitespace-nowrap px-2.5 py-1.5 rounded-lg border transition-colors flex-shrink-0 border-border text-fg-secondary hover:text-fg-primary hover:bg-surface-3"
          type="button"
        >
          <svg
            class="lucide lucide-folder-open w-3.5 h-3.5"
            fill="none"
            height="24"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2"
            />
          </svg>
          CLAUDE_HOME
        </button>
        <button
          class="inline-flex items-center gap-1.5 text-xs whitespace-nowrap px-2.5 py-1.5 rounded-lg border transition-colors flex-shrink-0 border-border text-fg-secondary hover:text-fg-primary hover:bg-surface-3"
          type="button"
        >
          <svg
            class="lucide lucide-history w-3.5 h-3.5"
            fill="none"
            height="24"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"
            />
            <path
              d="M3 3v5h5"
            />
            <path
              d="M12 7v5l4 2"
            />
          </svg>
          Import History
        </button>
        <button
          class="inline-flex items-center gap-1.5 text-xs whitespace-nowrap px-2.5 py-1.5 rounded-lg border transition-colors flex-shrink-0 border-border text-fg-secondary hover:text-fg-primary hover:bg-surface-3"
          type="button"
        >
          <svg
            class="lucide lucide-cloud w-3.5 h-3.5"
            fill="none"
            height="24"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z"
            />
          </svg>
          Remote Data Sources
        </button>
        <button
          class="inline-flex items-center gap-1.5 text-xs whitespace-nowrap px-2.5 py-1.5 rounded-lg border transition-colors flex-shrink-0 border-border text-fg-secondary hover:text-fg-primary hover:bg-surface-3"
          type="button"
        >
          <svg
            class="lucide lucide-cat w-3.5 h-3.5"
            fill="none"
            height="24"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M12 5c.67 0 1.35.09 2 .26 1.78-2 5.03-2.84 6.42-2.26 1.4.58-.42 7-.42 7 .57 1.07 1 2.24 1 3.44C21 17.9 16.97 21 12 21s-9-3-9-7.56c0-1.25.5-2.4 1-3.44 0 0-1.89-6.42-.5-7 1.39-.58 4.72.23 6.5 2.23A9.04 9.04 0 0 1 12 5Z"
            />
            <path
              d="M8 14v.5"
            />
            <path
              d="M16 14v.5"
            />
            <path
              d="M11.25 16.25h1.5L12 17l-.75-.75Z"
            />
          </svg>
          Tabby companion
        </button>
        <button
          class="inline-flex items-center gap-1.5 text-xs whitespace-nowrap px-2.5 py-1.5 rounded-lg border transition-colors flex-shrink-0 border-border text-fg-secondary hover:text-fg-primary hover:bg-surface-3"
          type="button"
        >
          <svg
            class="lucide lucide-bell w-3.5 h-3.5"
            fill="none"
            height="24"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M10.268 21a2 2 0 0 0 3.464 0"
            />
            <path
              d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"
            />
          </svg>
          Notifications
        </button>
        <button
          class="inline-flex items-center gap-1.5 text-xs whitespace-nowrap px-2.5 py-1.5 rounded-lg border transition-colors flex-shrink-0 border-border text-fg-secondary hover:text-fg-primary hover:bg-surface-3"
          type="button"
        >
          <svg
            class="lucide lucide-bell-ring w-3.5 h-3.5"
            fill="none"
            height="24"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M10.268 21a2 2 0 0 0 3.464 0"
            />
            <path
              d="M22 8c0-2.3-.8-4.3-2-6"
            />
            <path
              d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"
            />
            <path
              d="M4 2C2.8 3.7 2 5.7 2 8"
            />
          </svg>
          Alerts
        </button>
        <button
          class="inline-flex items-center gap-1.5 text-xs whitespace-nowrap px-2.5 py-1.5 rounded-lg border transition-colors flex-shrink-0 border-border text-fg-secondary hover:text-fg-primary hover:bg-surface-3"
          type="button"
        >
          <svg
            class="lucide lucide-database w-3.5 h-3.5"
            fill="none"
            height="24"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <ellipse
              cx="12"
              cy="5"
              rx="9"
              ry="3"
            />
            <path
              d="M3 5V19A9 3 0 0 0 21 19V5"
            />
            <path
              d="M3 12A9 3 0 0 0 21 12"
            />
          </svg>
          Data Management
        </button>
        <button
          class="inline-flex items-center gap-1.5 text-xs whitespace-nowrap px-2.5 py-1.5 rounded-lg border transition-colors flex-shrink-0 border-border text-fg-secondary hover:text-fg-primary hover:bg-surface-3"
          type="button"
        >
          <svg
            class="lucide lucide-server w-3.5 h-3.5"
            fill="none"
            height="24"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <rect
              height="8"
              rx="2"
              ry="2"
              width="20"
              x="2"
              y="2"
            />
            <rect
              height="8"
              rx="2"
              ry="2"
              width="20"
              x="2"
              y="14"
            />
            <line
              x1="6"
              x2="6.01"
              y1="6"
              y2="6"
            />
            <line
              x1="6"
              x2="6.01"
              y1="18"
              y2="18"
            />
          </svg>
          About
        </button>
      </div>
    </nav>
    <div
      class="card p-6"
    >
      <div
        class="flex items-center justify-between flex-wrap gap-4"
      >
        <div
          class="flex items-center gap-4"
        >
          <div
            class="w-12 h-12 rounded-xl bg-status-success/10 border border-status-success/20 flex items-center justify-center"
          >
            <svg
              class="lucide lucide-dollar-sign w-6 h-6 text-status-success"
              fill="none"
              height="24"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <line
                x1="12"
                x2="12"
                y1="2"
                y2="22"
              />
              <path
                d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"
              />
            </svg>
          </div>
          <div>
            <p
              class="text-sm text-fg-muted"
            >
              Total Estimated Cost
            </p>
            <p
              class="text-2xl font-semibold text-fg-primary"
            >
              <span
                class="relative inline-block cursor-default"
              >
                $0.00
              </span>
            </p>
          </div>
        </div>
        <div
          class="text-right text-xs text-fg-muted"
        >
          <p>
            Across all tracked sessions
          </p>
          <p>
            Based on per-model token usage
          </p>
        </div>
      </div>
    </div>
    <section
      class="scroll-mt-24"
      id="pricing"
    >
      <div
        class="flex flex-wrap items-center justify-between gap-3 mb-4"
      >
        <div>
          <h3
            class="text-sm font-medium text-fg-secondary flex items-center gap-2"
          >
            <svg
              class="lucide lucide-dollar-sign w-4 h-4 text-fg-muted"
              fill="none"
              height="24"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <line
                x1="12"
                x2="12"
                y1="2"
                y2="22"
              />
              <path
                d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"
              />
            </svg>
            Model Pricing
            <button
              aria-label="How model pricing works"
              class="inline-flex items-center justify-center rounded-full p-0.5 text-fg-muted hover:text-fg-secondary focus:outline-none focus:ring-1 focus:ring-accent/40"
              type="button"
            >
              <svg
                class="lucide lucide-info w-3.5 h-3.5"
                fill="none"
                height="24"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                viewBox="0 0 24 24"
                width="24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <circle
                  cx="12"
                  cy="12"
                  r="10"
                />
                <path
                  d="M12 16v-4"
                />
                <path
                  d="M12 8h.01"
                />
              </svg>
            </button>
          </h3>
          <p
            class="text-xs text-fg-muted mt-0.5"
          >
            Rates per million tokens (USD). Use % as wildcard in patterns. Some models have a time-limited introductory rate (shown in violet); usage on or before its cutoff date is billed at that rate, and usage after it at the standard rate.
          </p>
        </div>
        <div
          class="flex items-center gap-2"
        >
          <button
            class="text-xs px-3 py-1.5 rounded-md transition-colors disabled:opacity-50 inline-flex items-center gap-1.5 text-fg-secondary hover:text-fg-primary hover:bg-surface-4"
          >
            <svg
              class="lucide lucide-rotate-ccw w-3 h-3"
              fill="none"
              height="24"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"
              />
              <path
                d="M3 3v5h5"
              />
            </svg>
            Reset Defaults
          </button>
          <button
            class="btn-primary text-xs disabled:opacity-50"
          >
            <svg
              class="lucide lucide-plus w-3.5 h-3.5"
              fill="none"
              height="24"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M5 12h14"
              />
              <path
                d="M12 5v14"
              />
            </svg>
             
            Add Model
          </button>
        </div>
      </div>
      <div
        class="card overflow-x-auto mt-4"
      >
        <table
          class="w-full min-w-[1000px]"
        >
          <thead>
            <tr
              class="border-b border-border text-left"
            >
              <th
                class="px-4 py-3 text-[11px] font-semibold text-fg-muted uppercase tracking-wider"
              >
                Pattern
              </th>
              <th
                class="px-4 py-3 text-[11px] font-semibold text-fg-muted uppercase tracking-wider"
              >
                Model
              </th>
              <th
                class="px-4 py-3 text-[11px] font-semibold text-fg-muted uppercase tracking-wider text-right"
              >
                Input
              </th>
              <th
                class="px-4 py-3 text-[11px] font-semibold text-fg-muted uppercase tracking-wider text-right"
              >
                Output
              </th>
              <th
                class="px-4 py-3 text-[11px] font-semibold text-fg-muted uppercase tracking-wider text-right"
              >
                Cache Read
              </th>
              <th
                class="px-4 py-3 text-[11px] font-semibold text-fg-muted uppercase tracking-wider text-right"
              >
                Cache Write (5m)
              </th>
              <th
                class="px-4 py-3 text-[11px] font-semibold text-fg-muted uppercase tracking-wider text-right"
              >
                Cache Write (1h)
              </th>
              <th
                class="px-4 py-3 text-[11px] font-semibold text-fg-muted uppercase tracking-wider text-right"
              >
                Fast Input
              </th>
              <th
                class="px-4 py-3 text-[11px] font-semibold text-fg-muted uppercase tracking-wider text-right"
              >
                Fast Output
              </th>
              <th
                class="w-24 px-4 py-3 text-[11px] font-semibold text-fg-muted uppercase tracking-wider"
              >
                Actions
              </th>
            </tr>
          </thead>
          <tbody
            class="divide-y divide-border"
          />
        </table>
      </div>
    </section>
    <section
      class="scroll-mt-24"
      id="hooks"
    >
      <h3
        class="text-sm font-medium text-fg-secondary flex items-center gap-2 mb-1"
      >
        <svg
          class="lucide lucide-plug w-4 h-4 text-fg-muted"
          fill="none"
          height="24"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          viewBox="0 0 24 24"
          width="24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M12 22v-5"
          />
          <path
            d="M9 8V2"
          />
          <path
            d="M15 8V2"
          />
          <path
            d="M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8Z"
          />
        </svg>
        Hook Configuration
      </h3>
      <p
        class="text-xs text-fg-muted mb-4"
      >
        Claude Code hooks forward events to the dashboard in real time.
      </p>
      <div
        class="card p-5 space-y-4"
      >
        <div
          class="flex items-center justify-between flex-wrap gap-3"
        >
          <div
            class="flex items-center gap-3"
          >
            <span
              class="inline-flex items-center gap-1.5 text-xs font-medium text-status-success bg-status-success/10 border border-status-success/20 px-2.5 py-1 rounded-full"
            >
              <svg
                class="lucide lucide-circle-check-big w-3.5 h-3.5"
                fill="none"
                height="24"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                viewBox="0 0 24 24"
                width="24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M21.801 10A10 10 0 1 1 17 3.335"
                />
                <path
                  d="m9 11 3 3L22 4"
                />
              </svg>
               
              All hooks installed
            </span>
          </div>
          <button
            class="btn-ghost text-xs disabled:opacity-50"
          >
            <svg
              class="lucide lucide-rotate-ccw w-3.5 h-3.5"
              fill="none"
              height="24"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"
              />
              <path
                d="M3 3v5h5"
              />
            </svg>
            Reinstall Hooks
          </button>
        </div>
        <div
          class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-2"
        />
        <p
          class="text-[11px] text-fg-muted font-mono truncate"
        >
          /tmp/settings.json
        </p>
      </div>
    </section>
    <section
      class="scroll-mt-24"
      id="lanes"
    >
      <h3
        class="text-sm font-medium text-fg-secondary flex items-center gap-2 mb-1"
      >
        <svg
          class="lucide lucide-git-branch w-4 h-4 text-fg-muted"
          fill="none"
          height="24"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          viewBox="0 0 24 24"
          width="24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <line
            x1="6"
            x2="6"
            y1="3"
            y2="15"
          />
          <circle
            cx="18"
            cy="6"
            r="3"
          />
          <circle
            cx="6"
            cy="18"
            r="3"
          />
          <path
            d="M18 9a9 9 0 0 1-9 9"
          />
        </svg>
        Lanes
      </h3>
      <p
        class="text-xs text-fg-muted mb-4"
      >
        Machine-wide housekeeping and one-time setup for the ship-feature-lane pipeline.
      </p>
      <div
        class="card p-5 space-y-4"
      >
        <div
          class="flex items-center justify-between flex-wrap gap-3"
        >
          <span
            class="text-xs text-fg-secondary"
          >
            Install ship-feature-lane skill
          </span>
          <button
            class="btn-ghost text-xs disabled:opacity-50"
          >
            <svg
              class="lucide lucide-rotate-ccw w-3.5 h-3.5"
              fill="none"
              height="24"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"
              />
              <path
                d="M3 3v5h5"
              />
            </svg>
            Install ship-feature-lane skill
          </button>
        </div>
        <div
          class="flex items-center justify-between flex-wrap gap-3"
        >
          <label
            class="flex items-center gap-2 text-xs text-fg-secondary"
          >
            <input
              type="checkbox"
            />
            Dry run
          </label>
          <button
            class="btn-ghost text-xs disabled:opacity-50"
          >
            <svg
              class="lucide lucide-rotate-ccw w-3.5 h-3.5"
              fill="none"
              height="24"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"
              />
              <path
                d="M3 3v5h5"
              />
            </svg>
            Run housekeeping
          </button>
        </div>
      </div>
    </section>
    <section
      class="scroll-mt-24"
      id="claude-home"
    >
      <h3
        class="text-sm font-medium text-fg-secondary flex items-center gap-2 mb-1"
      >
        <svg
          class="lucide lucide-folder-open w-4 h-4 text-fg-muted"
          fill="none"
          height="24"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          viewBox="0 0 24 24"
          width="24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2"
          />
        </svg>
        CLAUDE_HOME
      </h3>
      <p
        class="text-xs text-fg-muted mb-1"
      >
        Root directory for Claude Code session data. Changing this updates the scan path for transcripts and imports immediately.
      </p>
      <p
        class="text-[11px] text-fg-muted italic mb-4 leading-snug"
      >
        Informational: Cursor sessions count here too — Cursor happens to use the same ~/.claude paths as Claude Code (locally and on synced remotes).
      </p>
      <div
        class="card p-5 space-y-4"
      >
        <div
          class="flex items-center gap-3"
        >
          <input
            class="flex-1 bg-surface-4 border border-surface-3 rounded-lg px-3 py-2 text-sm text-fg-secondary font-mono focus:outline-none focus:border-violet-500/50"
            placeholder="/path/to/claude-home"
            type="text"
            value="/home/test/.claude"
          />
          <button
            class="btn-primary px-4 py-2 text-sm disabled:opacity-50 disabled:cursor-not-allowed"
            disabled=""
          >
            Save
          </button>
        </div>
        <p
          class="text-xs text-fg-muted"
        >
          Current:
           
          <code
            class="text-fg-secondary"
          >
            /home/test/.claude
          </code>
        </p>
      </div>
    </section>
    <section
      class="scroll-mt-24"
      id="import"
    >
      <section>
        <h3
          class="text-sm font-medium text-fg-secondary flex items-center gap-2 mb-1"
        >
          <svg
            class="lucide lucide-history w-4 h-4 text-fg-muted"
            fill="none"
            height="24"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"
            />
            <path
              d="M3 3v5h5"
            />
            <path
              d="M12 7v5l4 2"
            />
          </svg>
          Import History
        </h3>
        <p
          class="text-xs text-fg-muted mb-1"
        >
          Bring existing Claude Code sessions into the dashboard. Token counts, per-model cost, compactions, subagents, tool uses, and turn durations are reconstructed from the original JSONL transcripts - identical to how live sessions are captured.
        </p>
        <p
          class="text-[11px] text-fg-muted italic mb-4 leading-snug"
        >
          Informational: Cursor sessions count here too — Cursor happens to use the same ~/.claude paths as Claude Code (locally and on synced remotes).
        </p>
        <div
          class="card p-5 space-y-5"
        >
          <div
            class="border border-border rounded-lg overflow-hidden"
          >
            <button
              class="w-full flex items-center justify-between px-4 py-3 bg-surface-2 hover:bg-surface-3 transition-colors"
            >
              <span
                class="flex items-center gap-2 text-xs font-semibold text-fg-secondary uppercase tracking-wider"
              >
                <svg
                  class="lucide lucide-list-checks w-3.5 h-3.5 text-blue-500"
                  fill="none"
                  height="24"
                  stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  viewBox="0 0 24 24"
                  width="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="m3 17 2 2 4-4"
                  />
                  <path
                    d="m3 7 2 2 4-4"
                  />
                  <path
                    d="M13 6h8"
                  />
                  <path
                    d="M13 12h8"
                  />
                  <path
                    d="M13 18h8"
                  />
                </svg>
                How to gather your history
              </span>
              <span
                class="text-[11px] text-fg-muted"
              >
                ▾
              </span>
            </button>
            <div
              class="px-4 py-4 space-y-4 text-sm text-fg-secondary bg-surface-1"
            >
              <div
                class="flex flex-wrap items-center gap-2 text-xs bg-surface-2 border border-border rounded-md px-3 py-2"
              >
                <svg
                  class="lucide lucide-hard-drive w-3.5 h-3.5 text-fg-muted flex-shrink-0"
                  fill="none"
                  height="24"
                  stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  viewBox="0 0 24 24"
                  width="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <line
                    x1="22"
                    x2="2"
                    y1="12"
                    y2="12"
                  />
                  <path
                    d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"
                  />
                  <line
                    x1="6"
                    x2="6.01"
                    y1="16"
                    y2="16"
                  />
                  <line
                    x1="10"
                    x2="10.01"
                    y1="16"
                    y2="16"
                  />
                </svg>
                <span
                  class="text-fg-secondary"
                >
                  Default location on this machine
                  :
                </span>
                <code
                  class="font-mono text-fg-secondary truncate"
                >
                  ~/.claude/projects
                </code>
                <span
                  class="inline-flex items-center gap-1 text-status-success bg-status-success/10 border border-status-success/20 px-2 py-0.5 rounded-full"
                >
                  <svg
                    class="lucide lucide-circle-check w-3 h-3"
                    fill="none"
                    height="24"
                    stroke="currentColor"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <circle
                      cx="12"
                      cy="12"
                      r="10"
                    />
                    <path
                      d="m9 12 2 2 4-4"
                    />
                  </svg>
                  Folder found
                  <span
                    class="text-fg-muted ml-1"
                  >
                    · 
                    0
                     
                    projects
                    ,
                     
                    0
                     
                    JSONL files
                  </span>
                </span>
              </div>
              <div
                class="space-y-3"
              >
                <div>
                  <p
                    class="text-sm font-medium text-fg-secondary"
                  >
                    1. Locate your Claude Code history
                  </p>
                  <p
                    class="text-xs text-fg-secondary mt-1 whitespace-pre-line"
                  >
                    Every Claude Code session is stored as a JSONL transcript under the projects folder. Each subfolder is named after the working directory where the session started (slashes replaced with dashes).
                  </p>
                </div>
                <div>
                  <p
                    class="text-sm font-medium text-fg-secondary"
                  >
                    2. Bundle it for transfer (optional)
                  </p>
                  <p
                    class="text-xs text-fg-secondary mt-1 whitespace-pre-line"
                  >
                    To move history from another machine, archive the whole folder first, then copy it over (AirDrop, scp, USB, cloud storage):
                  </p>
                  <div
                    class="mt-2 flex items-center gap-2 bg-surface-2 border border-border rounded-md px-3 py-2"
                  >
                    <svg
                      class="lucide lucide-terminal w-3.5 h-3.5 text-fg-muted flex-shrink-0"
                      fill="none"
                      height="24"
                      stroke="currentColor"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <polyline
                        points="4 17 10 11 4 5"
                      />
                      <line
                        x1="12"
                        x2="20"
                        y1="19"
                        y2="19"
                      />
                    </svg>
                    <code
                      class="flex-1 text-xs font-mono text-fg-secondary truncate"
                    >
                      tar
                    </code>
                    <button
                      class="text-xs text-fg-secondary hover:text-fg-primary flex items-center gap-1 flex-shrink-0"
                    >
                      <svg
                        class="lucide lucide-copy w-3 h-3"
                        fill="none"
                        height="24"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <rect
                          height="14"
                          rx="2"
                          ry="2"
                          width="14"
                          x="8"
                          y="8"
                        />
                        <path
                          d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
                        />
                      </svg>
                       
                      Copy
                    </button>
                  </div>
                </div>
                <div>
                  <p
                    class="text-sm font-medium text-fg-secondary"
                  >
                    3. Pick an import mode below
                  </p>
                  <p
                    class="text-xs text-fg-secondary mt-1 whitespace-pre-line"
                  >
                    Rescan the default location, point at any folder you've extracted history into, or upload files/archives directly.
                  </p>
                </div>
                <div>
                  <p
                    class="text-sm font-medium text-fg-secondary"
                  >
                    4. Verify tokens and cost
                  </p>
                  <p
                    class="text-xs text-fg-secondary mt-1 whitespace-pre-line"
                  >
                    After import, open Analytics → Cost to confirm the breakdown. Re-importing the same session is always safe.
                  </p>
                </div>
              </div>
              <div
                class="text-[11px] text-fg-muted flex items-start gap-2 pt-2 border-t border-border"
              >
                <svg
                  class="lucide lucide-info w-3 h-3 mt-0.5 flex-shrink-0"
                  fill="none"
                  height="24"
                  stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  viewBox="0 0 24 24"
                  width="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <circle
                    cx="12"
                    cy="12"
                    r="10"
                  />
                  <path
                    d="M12 16v-4"
                  />
                  <path
                    d="M12 8h.01"
                  />
                </svg>
                <span>
                  Re-running is safe. Sessions are deduplicated by session ID, and compaction baselines ensure token totals never double-count.
                </span>
              </div>
            </div>
          </div>
          <div
            class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-2"
          >
            <button
              class="text-left p-3 rounded-lg border transition-colors border-blue-600/40 bg-blue-600/10"
            >
              <div
                class="flex items-center gap-1.5 text-xs font-medium mb-1 text-blue-400"
              >
                <svg
                  class="lucide lucide-refresh-cw w-3.5 h-3.5"
                  fill="none"
                  height="24"
                  stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  viewBox="0 0 24 24"
                  width="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"
                  />
                  <path
                    d="M21 3v5h-5"
                  />
                  <path
                    d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"
                  />
                  <path
                    d="M8 16H3v5"
                  />
                </svg>
                Rescan default folder
              </div>
              <p
                class="text-[11px] text-fg-muted leading-snug"
              >
                Re-read ~/.claude/projects and import anything new.
              </p>
            </button>
            <button
              class="text-left p-3 rounded-lg border transition-colors border-border bg-surface-2 hover:bg-surface-3"
            >
              <div
                class="flex items-center gap-1.5 text-xs font-medium mb-1 text-fg-secondary"
              >
                <svg
                  class="lucide lucide-folder-input w-3.5 h-3.5"
                  fill="none"
                  height="24"
                  stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  viewBox="0 0 24 24"
                  width="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M2 9V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-1"
                  />
                  <path
                    d="M2 13h10"
                  />
                  <path
                    d="m9 16 3-3-3-3"
                  />
                </svg>
                Scan a folder
              </div>
              <p
                class="text-[11px] text-fg-muted leading-snug"
              >
                Scan any directory on this machine for JSONL transcripts (walks subfolders).
              </p>
            </button>
            <button
              class="text-left p-3 rounded-lg border transition-colors border-border bg-surface-2 hover:bg-surface-3"
            >
              <div
                class="flex items-center gap-1.5 text-xs font-medium mb-1 text-fg-secondary"
              >
                <svg
                  class="lucide lucide-cloud-upload w-3.5 h-3.5"
                  fill="none"
                  height="24"
                  stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  viewBox="0 0 24 24"
                  width="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M12 13v8"
                  />
                  <path
                    d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"
                  />
                  <path
                    d="m8 17 4-4 4 4"
                  />
                </svg>
                Upload files
              </div>
              <p
                class="text-[11px] text-fg-muted leading-snug"
              >
                Drop JSONL files or an archive (.zip / .tar.gz) directly into the browser.
              </p>
            </button>
            <button
              class="text-left p-3 rounded-lg border transition-colors border-border bg-surface-2 hover:bg-surface-3"
            >
              <div
                class="flex items-center gap-1.5 text-xs font-medium mb-1 text-fg-secondary"
              >
                <svg
                  class="lucide lucide-database-backup w-3.5 h-3.5"
                  fill="none"
                  height="24"
                  stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  viewBox="0 0 24 24"
                  width="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <ellipse
                    cx="12"
                    cy="5"
                    rx="9"
                    ry="3"
                  />
                  <path
                    d="M3 12a9 3 0 0 0 5 2.69"
                  />
                  <path
                    d="M21 9.3V5"
                  />
                  <path
                    d="M3 5v14a9 3 0 0 0 6.47 2.88"
                  />
                  <path
                    d="M12 12v4h4"
                  />
                  <path
                    d="M13 20a5 5 0 0 0 9-3 4.5 4.5 0 0 0-4.5-4.5c-1.33 0-2.54.54-3.41 1.41L12 16"
                  />
                </svg>
                Restore backup
              </div>
              <p
                class="text-[11px] text-fg-muted leading-snug"
              >
                Import a dashboard export (.json) from Export data — merge another machine's history in.
              </p>
            </button>
          </div>
          <div
            class="bg-surface-2 border border-border rounded-lg p-4"
          >
            <div
              class="flex flex-wrap items-center justify-between gap-3"
            >
              <div
                class="flex items-center gap-3 min-w-0"
              >
                <svg
                  class="lucide lucide-folder-open w-4 h-4 text-fg-muted flex-shrink-0"
                  fill="none"
                  height="24"
                  stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  viewBox="0 0 24 24"
                  width="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2"
                  />
                </svg>
                <code
                  class="font-mono text-xs text-fg-secondary truncate"
                >
                  ~/.claude/projects
                </code>
              </div>
              <button
                class="btn-primary text-xs disabled:opacity-50"
              >
                <svg
                  class="lucide lucide-refresh-cw w-3.5 h-3.5"
                  fill="none"
                  height="24"
                  stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  viewBox="0 0 24 24"
                  width="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"
                  />
                  <path
                    d="M21 3v5h-5"
                  />
                  <path
                    d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"
                  />
                  <path
                    d="M8 16H3v5"
                  />
                </svg>
                Rescan Now
              </button>
            </div>
          </div>
        </div>
      </section>
    </section>
    <section
      class="scroll-mt-24"
      id="remote-sources"
    >
      <div>
        <h3
          class="text-sm font-medium text-fg-secondary flex items-center gap-2 mb-1"
        >
          <svg
            class="lucide lucide-cloud w-4 h-4 text-fg-muted"
            fill="none"
            height="24"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z"
            />
          </svg>
          Remote Data Sources
        </h3>
        <p
          class="text-xs text-fg-muted mb-4"
        >
          Collect Claude Code usage from other machines over SSH - e.g. a dev box or cloud VM you drive over SSH while running this dashboard locally. Authentication uses your own SSH setup (~/.ssh/config, keys, agent); no passwords are stored here.
        </p>
        <p
          class="text-[11px] text-fg-muted italic mb-4 leading-snug"
        >
          Informational: Cursor sessions count here too — Cursor happens to use the same ~/.claude paths as Claude Code (locally and on synced remotes).
        </p>
        <div
          class="card p-5 mb-4"
        >
          <div
            class="flex items-center gap-2 mb-1"
          >
            <svg
              class="lucide lucide-wifi w-4 h-4 text-accent"
              fill="none"
              height="24"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M12 20h.01"
              />
              <path
                d="M2 8.82a15 15 0 0 1 20 0"
              />
              <path
                d="M5 12.859a10 10 0 0 1 14 0"
              />
              <path
                d="M8.5 16.429a5 5 0 0 1 7 0"
              />
            </svg>
            <span
              class="text-sm font-medium text-fg-secondary"
            >
              Data scope
            </span>
          </div>
          <p
            class="text-xs text-fg-muted mb-3"
          >
            Choose which machines' data the whole dashboard shows. Changes apply immediately across every page — sessions, analytics, and cost.
          </p>
          <div
            aria-label="Data scope"
            class="grid gap-2.5 sm:grid-cols-3"
            role="radiogroup"
          >
            <button
              aria-checked="true"
              class="relative text-left rounded-xl border p-3 transition-colors border-accent bg-accent/10 ring-1 ring-accent/40"
              role="radio"
            >
              <svg
                class="lucide lucide-circle-check-big w-4 h-4 text-accent absolute top-2.5 right-2.5"
                fill="none"
                height="24"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                viewBox="0 0 24 24"
                width="24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M21.801 10A10 10 0 1 1 17 3.335"
                />
                <path
                  d="m9 11 3 3L22 4"
                />
              </svg>
              <svg
                class="lucide lucide-globe w-5 h-5 mb-2 text-accent"
                fill="none"
                height="24"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                viewBox="0 0 24 24"
                width="24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <circle
                  cx="12"
                  cy="12"
                  r="10"
                />
                <path
                  d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"
                />
                <path
                  d="M2 12h20"
                />
              </svg>
              <div
                class="text-sm font-medium text-fg-primary"
              >
                All sources
              </div>
              <div
                class="text-[11px] text-fg-muted mt-0.5 leading-snug"
              >
                This machine plus every configured remote source, combined.
              </div>
            </button>
            <button
              aria-checked="false"
              class="relative text-left rounded-xl border p-3 transition-colors border-border bg-surface-2 hover:border-accent/40 hover:bg-surface-2/70"
              role="radio"
            >
              <svg
                class="lucide lucide-monitor w-5 h-5 mb-2 text-fg-secondary"
                fill="none"
                height="24"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                viewBox="0 0 24 24"
                width="24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <rect
                  height="14"
                  rx="2"
                  width="20"
                  x="2"
                  y="3"
                />
                <line
                  x1="8"
                  x2="16"
                  y1="21"
                  y2="21"
                />
                <line
                  x1="12"
                  x2="12"
                  y1="17"
                  y2="21"
                />
              </svg>
              <div
                class="text-sm font-medium text-fg-secondary"
              >
                This machine only
              </div>
              <div
                class="text-[11px] text-fg-muted mt-0.5 leading-snug"
              >
                Only sessions collected locally — hides all remote-source data.
              </div>
            </button>
            <button
              aria-checked="false"
              class="relative text-left rounded-xl border p-3 transition-colors border-border bg-surface-2 hover:border-accent/40 hover:bg-surface-2/70"
              role="radio"
            >
              <svg
                class="lucide lucide-list-checks w-5 h-5 mb-2 text-fg-secondary"
                fill="none"
                height="24"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                viewBox="0 0 24 24"
                width="24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="m3 17 2 2 4-4"
                />
                <path
                  d="m3 7 2 2 4-4"
                />
                <path
                  d="M13 6h8"
                />
                <path
                  d="M13 12h8"
                />
                <path
                  d="M13 18h8"
                />
              </svg>
              <div
                class="text-sm font-medium text-fg-secondary"
              >
                Selected sources
              </div>
              <div
                class="text-[11px] text-fg-muted mt-0.5 leading-snug"
              >
                Pick exactly which machines to include, below.
              </div>
            </button>
          </div>
        </div>
        <div
          class="flex items-center justify-between mb-3"
        >
          <span
            class="text-xs font-medium text-fg-secondary uppercase tracking-wider"
          >
            Configured sources
          </span>
          <div
            class="flex items-center gap-2"
          >
            <button
              class="btn-primary text-xs"
            >
              <svg
                class="lucide lucide-plus w-3.5 h-3.5"
                fill="none"
                height="24"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                viewBox="0 0 24 24"
                width="24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M5 12h14"
                />
                <path
                  d="M12 5v14"
                />
              </svg>
               
              Add source
            </button>
          </div>
        </div>
        <div
          class="card p-6 text-center"
        >
          <svg
            class="lucide lucide-server w-6 h-6 text-fg-muted mx-auto mb-2"
            fill="none"
            height="24"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <rect
              height="8"
              rx="2"
              ry="2"
              width="20"
              x="2"
              y="2"
            />
            <rect
              height="8"
              rx="2"
              ry="2"
              width="20"
              x="2"
              y="14"
            />
            <line
              x1="6"
              x2="6.01"
              y1="6"
              y2="6"
            />
            <line
              x1="6"
              x2="6.01"
              y1="18"
              y2="18"
            />
          </svg>
          <p
            class="text-sm text-fg-secondary"
          >
            No remote sources yet.
          </p>
          <p
            class="text-xs text-fg-muted mt-1"
          >
            Add a machine you reach over SSH to pull its Claude Code usage in.
          </p>
        </div>
      </div>
    </section>
    <section
      class="scroll-mt-24"
      id="tabby"
    >
      <h3
        class="text-sm font-medium text-fg-secondary flex items-center gap-2 mb-1"
      >
        <span
          aria-hidden="true"
          class="text-base leading-none"
        >
          🐾
        </span>
        Tabby companion
      </h3>
      <p
        class="text-xs text-fg-muted mb-4"
      >
        A floating cat that reacts to your live sessions.
      </p>
      <div
        class="card p-5"
      >
        <div
          class="flex items-center gap-3"
        >
          <div
            class="w-10 h-10 rounded-xl flex items-center justify-center transition-colors bg-blue-600/10 border border-blue-600/20"
          >
            <span
              aria-hidden="true"
              class="text-lg leading-none"
            >
              🐾
            </span>
          </div>
          <label
            class="flex items-center justify-between gap-3 cursor-pointer group"
          >
            <div
              class="min-w-0"
            >
              <p
                class="text-sm text-fg-secondary group-hover:text-fg-secondary transition-colors"
              >
                Show Tabby
              </p>
              <p
                class="text-xs text-fg-muted mt-0.5"
              >
                Display the corner companion across the dashboard (⌘B to open)
              </p>
            </div>
            <button
              aria-checked="true"
              class="relative inline-flex h-5 w-9 flex-shrink-0 rounded-full border-2 border-transparent transition-colors duration-200 bg-blue-600"
              role="switch"
              type="button"
            >
              <span
                class="pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow transform transition-transform duration-200 translate-x-4"
              />
            </button>
          </label>
        </div>
      </div>
    </section>
    <section
      class="scroll-mt-24"
      id="notifications"
    >
      <h3
        class="text-sm font-medium text-fg-secondary flex items-center gap-2 mb-1"
      >
        <svg
          class="lucide lucide-bell w-4 h-4 text-fg-muted"
          fill="none"
          height="24"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          viewBox="0 0 24 24"
          width="24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M10.268 21a2 2 0 0 0 3.464 0"
          />
          <path
            d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"
          />
        </svg>
        Notifications
      </h3>
      <p
        class="text-xs text-fg-muted mb-4"
      >
        Browser notifications for important events. Requires permission.
      </p>
      <div
        class="card p-5 space-y-5"
      >
        <div
          class="flex items-center justify-between flex-wrap gap-3"
        >
          <div
            class="flex items-center gap-3"
          >
            <div
              class="w-10 h-10 rounded-xl flex items-center justify-center transition-colors bg-surface-2 border border-border"
            >
              <svg
                class="lucide lucide-bell-off w-5 h-5 text-fg-muted"
                fill="none"
                height="24"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                viewBox="0 0 24 24"
                width="24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M10.268 21a2 2 0 0 0 3.464 0"
                />
                <path
                  d="M17 17H4a1 1 0 0 1-.74-1.673C4.59 13.956 6 12.499 6 8a6 6 0 0 1 .258-1.742"
                />
                <path
                  d="m2 2 20 20"
                />
                <path
                  d="M8.668 3.01A6 6 0 0 1 18 8c0 2.687.77 4.653 1.707 6.05"
                />
              </svg>
            </div>
            <label
              class="flex items-center justify-between gap-3 cursor-pointer group"
            >
              <div
                class="min-w-0"
              >
                <p
                  class="text-sm text-fg-secondary group-hover:text-fg-secondary transition-colors"
                >
                  Enable Browser Notifications
                </p>
              </div>
              <button
                aria-checked="false"
                class="relative inline-flex h-5 w-9 flex-shrink-0 rounded-full border-2 border-transparent transition-colors duration-200 bg-surface-4"
                role="switch"
                type="button"
              >
                <span
                  class="pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow transform transition-transform duration-200 translate-x-0"
                />
              </button>
            </label>
          </div>
        </div>
        <div
          class="flex items-center gap-2 text-xs text-fg-muted"
        >
          <svg
            class="lucide lucide-bell-off w-3.5 h-3.5"
            fill="none"
            height="24"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M10.268 21a2 2 0 0 0 3.464 0"
            />
            <path
              d="M17 17H4a1 1 0 0 1-.74-1.673C4.59 13.956 6 12.499 6 8a6 6 0 0 1 .258-1.742"
            />
            <path
              d="m2 2 20 20"
            />
            <path
              d="M8.668 3.01A6 6 0 0 1 18 8c0 2.687.77 4.653 1.707 6.05"
            />
          </svg>
          Notifications are disabled - enable to get alerts for session events
        </div>
      </div>
    </section>
    <section
      class="scroll-mt-24"
      id="alerts"
    >
      <h3
        class="text-sm font-medium text-fg-secondary flex items-center gap-2 mb-1"
      >
        <svg
          class="lucide lucide-bell-ring w-4 h-4 text-fg-muted"
          fill="none"
          height="24"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          viewBox="0 0 24 24"
          width="24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M10.268 21a2 2 0 0 0 3.464 0"
          />
          <path
            d="M22 8c0-2.3-.8-4.3-2-6"
          />
          <path
            d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"
          />
          <path
            d="M4 2C2.8 3.7 2 5.7 2 8"
          />
        </svg>
        Alerts
      </h3>
      <p
        class="text-xs text-fg-muted mb-4"
      >
        Define alert rules, route them to webhook channels, and review what has fired - all in one place.
      </p>
      <div
        class="space-y-4"
      >
        <div
          class="inline-flex flex-wrap rounded-xl border border-border bg-surface-2 p-1 gap-1"
        >
          <button
            class="inline-flex items-center gap-2 text-xs font-medium px-3.5 py-2 rounded-lg transition-colors bg-surface-4 text-fg-primary shadow-sm"
          >
            <svg
              class="lucide lucide-list-checks w-3.5 h-3.5"
              fill="none"
              height="24"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="m3 17 2 2 4-4"
              />
              <path
                d="m3 7 2 2 4-4"
              />
              <path
                d="M13 6h8"
              />
              <path
                d="M13 12h8"
              />
              <path
                d="M13 18h8"
              />
            </svg>
            Rules
          </button>
          <button
            class="inline-flex items-center gap-2 text-xs font-medium px-3.5 py-2 rounded-lg transition-colors text-fg-muted hover:text-fg-secondary hover:bg-surface-3"
          >
            <svg
              class="lucide lucide-webhook w-3.5 h-3.5"
              fill="none"
              height="24"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M18 16.98h-5.99c-1.1 0-1.95.94-2.48 1.9A4 4 0 0 1 2 17c.01-.7.2-1.4.57-2"
              />
              <path
                d="m6 17 3.13-5.78c.53-.97.1-2.18-.5-3.1a4 4 0 1 1 6.89-4.06"
              />
              <path
                d="m12 6 3.13 5.73C15.66 12.7 16.9 13 18 13a4 4 0 0 1 0 8"
              />
            </svg>
            Channels
          </button>
          <button
            class="inline-flex items-center gap-2 text-xs font-medium px-3.5 py-2 rounded-lg transition-colors text-fg-muted hover:text-fg-secondary hover:bg-surface-3"
          >
            <svg
              class="lucide lucide-bell-ring w-3.5 h-3.5"
              fill="none"
              height="24"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M10.268 21a2 2 0 0 0 3.464 0"
              />
              <path
                d="M22 8c0-2.3-.8-4.3-2-6"
              />
              <path
                d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"
              />
              <path
                d="M4 2C2.8 3.7 2 5.7 2 8"
              />
            </svg>
            Activity
          </button>
        </div>
        <div
          class="card p-4"
        >
          <div
            class="flex items-center justify-between gap-3 mb-3"
          >
            <div>
              <h4
                class="text-sm font-semibold text-fg-secondary"
              >
                Alert rules
              </h4>
              <p
                class="text-xs text-fg-muted mt-0.5"
              >
                Conditions that trigger an alert. Evaluated server-side against the live event stream.
              </p>
            </div>
            <button
              class="btn-ghost border border-border inline-flex items-center gap-1.5 text-xs flex-shrink-0"
            >
              <svg
                class="lucide lucide-plus w-3.5 h-3.5"
                fill="none"
                height="24"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                viewBox="0 0 24 24"
                width="24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M5 12h14"
                />
                <path
                  d="M12 5v14"
                />
              </svg>
              Add rule
            </button>
          </div>
          <div
            class="flex flex-col items-center justify-center py-20 text-center"
          >
            <div
              class="w-14 h-14 rounded-2xl bg-surface-4 flex items-center justify-center mb-5"
            >
              <svg
                class="lucide lucide-list-checks w-6 h-6 text-fg-muted"
                fill="none"
                height="24"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                viewBox="0 0 24 24"
                width="24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="m3 17 2 2 4-4"
                />
                <path
                  d="m3 7 2 2 4-4"
                />
                <path
                  d="M13 6h8"
                />
                <path
                  d="M13 12h8"
                />
                <path
                  d="M13 18h8"
                />
              </svg>
            </div>
            <h3
              class="text-base font-medium text-fg-secondary mb-2"
            >
              No alert rules yet. Add one to start monitoring for stuck agents, error bursts, idle sessions, or token spikes.
            </h3>
            <p
              class="text-sm text-fg-muted max-w-md mb-6"
            >
              Add a rule to start alerting on errors, inactivity, stuck agents, or token thresholds.
            </p>
          </div>
        </div>
      </div>
    </section>
    <section
      class="scroll-mt-24"
      id="data"
    >
      <h3
        class="text-sm font-medium text-fg-secondary flex items-center gap-2 mb-1"
      >
        <svg
          class="lucide lucide-database w-4 h-4 text-fg-muted"
          fill="none"
          height="24"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          viewBox="0 0 24 24"
          width="24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <ellipse
            cx="12"
            cy="5"
            rx="9"
            ry="3"
          />
          <path
            d="M3 5V19A9 3 0 0 0 21 19V5"
          />
          <path
            d="M3 12A9 3 0 0 0 21 12"
          />
        </svg>
        Data Management
      </h3>
      <p
        class="text-xs text-fg-muted mb-4"
      >
        Database info, import/export, and cleanup.
      </p>
      <div
        class="space-y-4"
      >
        <div
          class="card p-5 space-y-4"
        >
          <div
            class="flex flex-wrap items-center justify-between gap-2"
          >
            <p
              class="text-xs text-fg-muted uppercase tracking-wider font-semibold flex-shrink-0"
            >
              Database Overview
            </p>
            <div
              class="flex items-center gap-1.5 text-[11px] text-fg-muted font-mono bg-surface-2 px-2.5 py-1 rounded-md min-w-0"
            >
              <svg
                class="lucide lucide-hard-drive w-3 h-3 flex-shrink-0"
                fill="none"
                height="24"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                viewBox="0 0 24 24"
                width="24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <line
                  x1="22"
                  x2="2"
                  y1="12"
                  y2="12"
                />
                <path
                  d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"
                />
                <line
                  x1="6"
                  x2="6.01"
                  y1="16"
                  y2="16"
                />
                <line
                  x1="10"
                  x2="10.01"
                  y1="16"
                  y2="16"
                />
              </svg>
              <span
                class="truncate"
              >
                /tmp/test.db
              </span>
            </div>
          </div>
          <div
            class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-2"
          >
            <div
              class="bg-surface-2 rounded-lg px-3 py-3 border-l-2 border-indigo-500/20"
            >
              <div
                class="flex items-center gap-2 mb-1.5"
              >
                <svg
                  class="lucide lucide-hard-drive w-4 h-4 text-indigo-400"
                  fill="none"
                  height="24"
                  stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  viewBox="0 0 24 24"
                  width="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <line
                    x1="22"
                    x2="2"
                    y1="12"
                    y2="12"
                  />
                  <path
                    d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"
                  />
                  <line
                    x1="6"
                    x2="6.01"
                    y1="16"
                    y2="16"
                  />
                  <line
                    x1="10"
                    x2="10.01"
                    y1="16"
                    y2="16"
                  />
                </svg>
                <p
                  class="text-[11px] text-fg-muted uppercase tracking-wider"
                >
                  DB Size
                </p>
              </div>
              <p
                class="text-xl font-semibold text-fg-secondary"
              >
                0 B
              </p>
            </div>
          </div>
        </div>
        <div
          class="card p-5 space-y-4"
        >
          <div
            class="flex items-center gap-3"
          >
            <div
              class="w-9 h-9 rounded-lg bg-status-warning/10 border border-status-warning/20 flex items-center justify-center"
            >
              <svg
                class="lucide lucide-eraser w-4 h-4 text-status-warning"
                fill="none"
                height="24"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                viewBox="0 0 24 24"
                width="24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21"
                />
                <path
                  d="M22 21H7"
                />
                <path
                  d="m5 11 9 9"
                />
              </svg>
            </div>
            <div>
              <p
                class="text-sm font-medium text-fg-secondary"
              >
                Session Cleanup
              </p>
              <p
                class="text-xs text-fg-muted"
              >
                Abandon stale sessions and purge old data
              </p>
            </div>
          </div>
          <div
            class="grid grid-cols-1 sm:grid-cols-2 gap-3"
          >
            <div
              class="bg-surface-2 rounded-lg px-4 py-3"
            >
              <label
                class="text-xs text-fg-secondary block mb-2"
              >
                Abandon stale active sessions older than
              </label>
              <div
                class="flex items-center gap-2"
              >
                <input
                  class="input w-20 text-sm text-right font-mono"
                  min="1"
                  type="number"
                  value="24"
                />
                <span
                  class="text-xs text-fg-muted"
                >
                  hours
                </span>
              </div>
            </div>
            <div
              class="bg-surface-2 rounded-lg px-4 py-3"
            >
              <label
                class="text-xs text-fg-secondary block mb-2"
              >
                Purge completed/errored sessions older than
              </label>
              <div
                class="flex items-center gap-2"
              >
                <input
                  class="input w-20 text-sm text-right font-mono"
                  min="1"
                  type="number"
                  value="90"
                />
                <span
                  class="text-xs text-fg-muted"
                >
                  days
                </span>
              </div>
            </div>
          </div>
          <button
            class="text-xs px-3 py-1.5 rounded-md transition-colors disabled:opacity-50 text-fg-secondary hover:text-fg-primary hover:bg-surface-4 border border-border"
          >
            <svg
              class="lucide lucide-eraser w-3 h-3 inline mr-1"
              fill="none"
              height="24"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21"
              />
              <path
                d="M22 21H7"
              />
              <path
                d="m5 11 9 9"
              />
            </svg>
            Run Cleanup
          </button>
        </div>
        <div
          class="card p-5 space-y-4 border-status-danger/10"
        >
          <div
            class="flex items-center gap-3"
          >
            <div
              class="w-9 h-9 rounded-lg bg-status-danger/10 border border-status-danger/20 flex items-center justify-center"
            >
              <svg
                class="lucide lucide-triangle-alert w-4 h-4 text-status-danger"
                fill="none"
                height="24"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                viewBox="0 0 24 24"
                width="24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"
                />
                <path
                  d="M12 9v4"
                />
                <path
                  d="M12 17h.01"
                />
              </svg>
            </div>
            <div>
              <p
                class="text-sm font-medium text-status-danger"
              >
                Danger Zone
              </p>
              <p
                class="text-xs text-fg-muted"
              >
                Irreversible actions that delete data permanently
              </p>
            </div>
          </div>
          <button
            class="text-xs px-3 py-1.5 rounded-md text-status-danger hover:bg-status-danger/10 border border-status-danger/20 transition-colors disabled:opacity-50"
          >
            <svg
              class="lucide lucide-triangle-alert w-3.5 h-3.5 inline mr-1"
              fill="none"
              height="24"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"
              />
              <path
                d="M12 9v4"
              />
              <path
                d="M12 17h.01"
              />
            </svg>
            Clear All Data
          </button>
        </div>
      </div>
    </section>
    <section
      class="scroll-mt-24"
      id="about"
    >
      <h3
        class="text-sm font-medium text-fg-secondary flex items-center gap-2 mb-1"
      >
        <svg
          class="lucide lucide-server w-4 h-4 text-fg-muted"
          fill="none"
          height="24"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          viewBox="0 0 24 24"
          width="24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <rect
            height="8"
            rx="2"
            ry="2"
            width="20"
            x="2"
            y="2"
          />
          <rect
            height="8"
            rx="2"
            ry="2"
            width="20"
            x="2"
            y="14"
          />
          <line
            x1="6"
            x2="6.01"
            y1="6"
            y2="6"
          />
          <line
            x1="6"
            x2="6.01"
            y1="18"
            y2="18"
          />
        </svg>
        About
      </h3>
      <p
        class="text-xs text-fg-muted mb-4"
      >
        Server runtime information.
      </p>
      <div
        class="card p-5"
      >
        <div
          class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3"
        >
          <div
            class="bg-surface-2 rounded-lg px-4 py-3"
          >
            <div
              class="flex items-center gap-2 mb-1.5"
            >
              <svg
                class="lucide lucide-server w-4 h-4 text-indigo-400"
                fill="none"
                height="24"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                viewBox="0 0 24 24"
                width="24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <rect
                  height="8"
                  rx="2"
                  ry="2"
                  width="20"
                  x="2"
                  y="2"
                />
                <rect
                  height="8"
                  rx="2"
                  ry="2"
                  width="20"
                  x="2"
                  y="14"
                />
                <line
                  x1="6"
                  x2="6.01"
                  y1="6"
                  y2="6"
                />
                <line
                  x1="6"
                  x2="6.01"
                  y1="18"
                  y2="18"
                />
              </svg>
              <p
                class="text-[11px] text-fg-muted uppercase tracking-wider"
              >
                Release
              </p>
            </div>
            <p
              class="text-sm font-semibold text-fg-secondary font-mono"
            >
              v
            </p>
            <p
              class="text-[10px] text-status-warning/90 mt-1"
            >
              UI build v1.4.6 (rebuild client to match)
            </p>
          </div>
          <div
            class="bg-surface-2 rounded-lg px-4 py-3"
          >
            <div
              class="flex items-center gap-2 mb-1.5"
            >
              <svg
                class="lucide lucide-clock w-4 h-4 text-blue-500"
                fill="none"
                height="24"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                viewBox="0 0 24 24"
                width="24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <circle
                  cx="12"
                  cy="12"
                  r="10"
                />
                <polyline
                  points="12 6 12 12 16 14"
                />
              </svg>
              <p
                class="text-[11px] text-fg-muted uppercase tracking-wider"
              >
                Uptime
              </p>
            </div>
            <p
              class="text-sm font-semibold text-fg-secondary"
            >
              0m
            </p>
          </div>
          <div
            class="bg-surface-2 rounded-lg px-4 py-3"
          >
            <div
              class="flex items-center gap-2 mb-1.5"
            >
              <svg
                class="lucide lucide-cpu w-4 h-4 text-status-success"
                fill="none"
                height="24"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                viewBox="0 0 24 24"
                width="24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <rect
                  height="16"
                  rx="2"
                  width="16"
                  x="4"
                  y="4"
                />
                <rect
                  height="6"
                  rx="1"
                  width="6"
                  x="9"
                  y="9"
                />
                <path
                  d="M15 2v2"
                />
                <path
                  d="M15 20v2"
                />
                <path
                  d="M2 15h2"
                />
                <path
                  d="M2 9h2"
                />
                <path
                  d="M20 15h2"
                />
                <path
                  d="M20 9h2"
                />
                <path
                  d="M9 2v2"
                />
                <path
                  d="M9 20v2"
                />
              </svg>
              <p
                class="text-[11px] text-fg-muted uppercase tracking-wider"
              >
                Node.js
              </p>
            </div>
            <p
              class="text-sm font-semibold text-fg-secondary font-mono"
            >
              v22.0.0
            </p>
          </div>
          <div
            class="bg-surface-2 rounded-lg px-4 py-3"
          >
            <div
              class="flex items-center gap-2 mb-1.5"
            >
              <svg
                class="lucide lucide-globe w-4 h-4 text-violet-400"
                fill="none"
                height="24"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                viewBox="0 0 24 24"
                width="24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <circle
                  cx="12"
                  cy="12"
                  r="10"
                />
                <path
                  d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"
                />
                <path
                  d="M2 12h20"
                />
              </svg>
              <p
                class="text-[11px] text-fg-muted uppercase tracking-wider"
              >
                Platform
              </p>
            </div>
            <p
              class="text-sm font-semibold text-fg-secondary"
            >
              linux
            </p>
          </div>
          <div
            class="bg-surface-2 rounded-lg px-4 py-3"
          >
            <div
              class="flex items-center gap-2 mb-1.5"
            >
              <svg
                class="lucide lucide-wifi w-4 h-4 text-status-warning"
                fill="none"
                height="24"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                viewBox="0 0 24 24"
                width="24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M12 20h.01"
                />
                <path
                  d="M2 8.82a15 15 0 0 1 20 0"
                />
                <path
                  d="M5 12.859a10 10 0 0 1 14 0"
                />
                <path
                  d="M8.5 16.429a5 5 0 0 1 7 0"
                />
              </svg>
              <p
                class="text-[11px] text-fg-muted uppercase tracking-wider"
              >
                WS Clients
              </p>
            </div>
            <p
              class="text-sm font-semibold text-fg-secondary"
            >
              0
            </p>
          </div>
        </div>
      </div>
    </section>
  </div>
</div>
`;

exports[`screen snapshots > Workflows 1`] = `
<div>
  <div
    class="space-y-6"
  >
    <div
      class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4"
    >
      <div
        class="flex items-center gap-3"
      >
        <div
          class="w-9 h-9 rounded-xl bg-accent/15 flex items-center justify-center"
        >
          <svg
            class="lucide lucide-workflow w-4.5 h-4.5 text-accent"
            fill="none"
            height="24"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <rect
              height="8"
              rx="2"
              width="8"
              x="3"
              y="3"
            />
            <path
              d="M7 11v4a2 2 0 0 0 2 2h4"
            />
            <rect
              height="8"
              rx="2"
              width="8"
              x="13"
              y="13"
            />
          </svg>
        </div>
        <div>
          <div
            class="flex items-center gap-2"
          >
            <h1
              class="text-lg font-semibold text-fg-primary"
            >
              Workflows
            </h1>
            <span
              class="flex items-center gap-1.5 text-[11px] text-status-success bg-status-success/10 border border-status-success/20 px-2 py-0.5 rounded-full"
            >
              <span
                class="w-1.5 h-1.5 rounded-full bg-status-success animate-pulse-dot"
              />
              Live
            </span>
          </div>
          <p
            class="text-xs text-fg-muted"
          >
            Agent orchestration intelligence
          </p>
        </div>
      </div>
      <div
        class="flex items-center gap-2 flex-wrap"
      >
        <div
          class="flex bg-surface-2 rounded-lg p-0.5 border border-border"
        >
          <button
            class="px-3 py-1.5 rounded-md text-xs font-medium transition-colors bg-accent/15 text-accent"
          >
            All Sessions
          </button>
          <button
            class="px-3 py-1.5 rounded-md text-xs font-medium transition-colors text-fg-muted hover:text-fg-secondary"
          >
            Active Only
          </button>
          <button
            class="px-3 py-1.5 rounded-md text-xs font-medium transition-colors text-fg-muted hover:text-fg-secondary"
          >
            Completed
          </button>
        </div>
        <button
          class="p-2 rounded-lg text-fg-muted hover:text-fg-secondary hover:bg-surface-3 transition-colors"
          title="Refresh data"
        >
          <svg
            class="lucide lucide-refresh-cw w-4 h-4"
            fill="none"
            height="24"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"
            />
            <path
              d="M21 3v5h-5"
            />
            <path
              d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"
            />
            <path
              d="M8 16H3v5"
            />
          </svg>
        </button>
        <button
          class="p-2 rounded-lg text-fg-muted hover:text-fg-secondary hover:bg-surface-3 transition-colors"
          title="Export as JSON"
        >
          <svg
            class="lucide lucide-download w-4 h-4"
            fill="none"
            height="24"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"
            />
            <polyline
              points="7 10 12 15 17 10"
            />
            <line
              x1="12"
              x2="12"
              y1="15"
              y2="3"
            />
          </svg>
        </button>
        <span
          class="text-[10px] text-fg-muted ml-1"
        >
          Updated 
          1:00:00 PM
        </span>
      </div>
    </div>
    <div
      class="grid grid-cols-2 sm:grid-cols-3 xl:grid-cols-6 gap-3"
    >
      <div
        class="bg-surface-2 border border-border rounded-xl p-4 flex flex-col gap-3"
      >
        <div
          class="flex items-center justify-between gap-2"
        >
          <span
            class="text-[10px] font-semibold text-fg-muted uppercase tracking-wider leading-none"
          >
            Avg Agent Depth
          </span>
          <svg
            class="lucide lucide-git-fork w-4 h-4 flex-shrink-0 text-indigo-400"
            fill="none"
            height="24"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <circle
              cx="12"
              cy="18"
              r="3"
            />
            <circle
              cx="6"
              cy="6"
              r="3"
            />
            <circle
              cx="18"
              cy="6"
              r="3"
            />
            <path
              d="M18 9v2c0 .6-.4 1-1 1H7c-.6 0-1-.4-1-1V9"
            />
            <path
              d="M12 12v3"
            />
          </svg>
        </div>
        <div
          class="flex items-end justify-between gap-2"
        >
          <span
            class="text-2xl font-semibold leading-none truncate text-indigo-400"
            title="0.0"
          >
            0.0
          </span>
          <button
            aria-expanded="false"
            aria-label="Explain this metric"
            class="flex items-center justify-center rounded-full p-0.5 -m-0.5 text-fg-muted hover:text-fg-secondary focus:outline-none focus:ring-1 focus:ring-accent/40"
            type="button"
          >
            <svg
              class="lucide lucide-info w-4 h-4"
              fill="none"
              height="24"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <circle
                cx="12"
                cy="12"
                r="10"
              />
              <path
                d="M12 16v-4"
              />
              <path
                d="M12 8h.01"
              />
            </svg>
          </button>
        </div>
      </div>
      <div
        class="bg-surface-2 border border-border rounded-xl p-4 flex flex-col gap-3"
      >
        <div
          class="flex items-center justify-between gap-2"
        >
          <span
            class="text-[10px] font-semibold text-fg-muted uppercase tracking-wider leading-none"
          >
            Avg Subagents / Session
          </span>
          <svg
            class="lucide lucide-users w-4 h-4 flex-shrink-0 text-blue-500"
            fill="none"
            height="24"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"
            />
            <circle
              cx="9"
              cy="7"
              r="4"
            />
            <path
              d="M22 21v-2a4 4 0 0 0-3-3.87"
            />
            <path
              d="M16 3.13a4 4 0 0 1 0 7.75"
            />
          </svg>
        </div>
        <div
          class="flex items-end justify-between gap-2"
        >
          <span
            class="text-2xl font-semibold leading-none truncate text-blue-500"
            title="0.0"
          >
            0.0
          </span>
          <button
            aria-expanded="false"
            aria-label="Explain this metric"
            class="flex items-center justify-center rounded-full p-0.5 -m-0.5 text-fg-muted hover:text-fg-secondary focus:outline-none focus:ring-1 focus:ring-accent/40"
            type="button"
          >
            <svg
              class="lucide lucide-info w-4 h-4"
              fill="none"
              height="24"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <circle
                cx="12"
                cy="12"
                r="10"
              />
              <path
                d="M12 16v-4"
              />
              <path
                d="M12 8h.01"
              />
            </svg>
          </button>
        </div>
      </div>
      <div
        class="bg-surface-2 border border-border rounded-xl p-4 flex flex-col gap-3"
      >
        <div
          class="flex items-center justify-between gap-2"
        >
          <span
            class="text-[10px] font-semibold text-fg-muted uppercase tracking-wider leading-none"
          >
            Agent Success Rate
          </span>
          <svg
            class="lucide lucide-circle-check-big w-4 h-4 flex-shrink-0 text-status-danger"
            fill="none"
            height="24"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M21.801 10A10 10 0 1 1 17 3.335"
            />
            <path
              d="m9 11 3 3L22 4"
            />
          </svg>
        </div>
        <div
          class="flex items-end justify-between gap-2"
        >
          <span
            class="text-2xl font-semibold leading-none truncate text-status-danger"
            title="0.0%"
          >
            0.0%
          </span>
          <button
            aria-expanded="false"
            aria-label="Explain this metric"
            class="flex items-center justify-center rounded-full p-0.5 -m-0.5 text-fg-muted hover:text-fg-secondary focus:outline-none focus:ring-1 focus:ring-accent/40"
            type="button"
          >
            <svg
              class="lucide lucide-info w-4 h-4"
              fill="none"
              height="24"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <circle
                cx="12"
                cy="12"
                r="10"
              />
              <path
                d="M12 16v-4"
              />
              <path
                d="M12 8h.01"
              />
            </svg>
          </button>
        </div>
      </div>
      <div
        class="bg-surface-2 border border-border rounded-xl p-4 flex flex-col gap-3"
      >
        <div
          class="flex items-center justify-between gap-2"
        >
          <span
            class="text-[10px] font-semibold text-fg-muted uppercase tracking-wider leading-none"
          >
            Most Common Flow
          </span>
          <svg
            class="lucide lucide-arrow-right-left w-4 h-4 flex-shrink-0 text-violet-400"
            fill="none"
            height="24"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="m16 3 4 4-4 4"
            />
            <path
              d="M20 7H4"
            />
            <path
              d="m8 21-4-4 4-4"
            />
            <path
              d="M4 17h16"
            />
          </svg>
        </div>
        <div
          class="flex items-end justify-between gap-2"
        >
          <span
            class="text-2xl font-semibold leading-none truncate text-violet-400"
            title="-"
          >
            -
          </span>
          <button
            aria-expanded="false"
            aria-label="Explain this metric"
            class="flex items-center justify-center rounded-full p-0.5 -m-0.5 text-fg-muted hover:text-fg-secondary focus:outline-none focus:ring-1 focus:ring-accent/40"
            type="button"
          >
            <svg
              class="lucide lucide-info w-4 h-4"
              fill="none"
              height="24"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <circle
                cx="12"
                cy="12"
                r="10"
              />
              <path
                d="M12 16v-4"
              />
              <path
                d="M12 8h.01"
              />
            </svg>
          </button>
        </div>
      </div>
      <div
        class="bg-surface-2 border border-border rounded-xl p-4 flex flex-col gap-3"
      >
        <div
          class="flex items-center justify-between gap-2"
        >
          <span
            class="text-[10px] font-semibold text-fg-muted uppercase tracking-wider leading-none"
          >
            Avg Compactions
          </span>
          <svg
            class="lucide lucide-layers w-4 h-4 flex-shrink-0 text-cyan-400"
            fill="none"
            height="24"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"
            />
            <path
              d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"
            />
            <path
              d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"
            />
          </svg>
        </div>
        <div
          class="flex items-end justify-between gap-2"
        >
          <span
            class="text-2xl font-semibold leading-none truncate text-cyan-400"
            title="0.0"
          >
            0.0
          </span>
          <button
            aria-expanded="false"
            aria-label="Explain this metric"
            class="flex items-center justify-center rounded-full p-0.5 -m-0.5 text-fg-muted hover:text-fg-secondary focus:outline-none focus:ring-1 focus:ring-accent/40"
            type="button"
          >
            <svg
              class="lucide lucide-info w-4 h-4"
              fill="none"
              height="24"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <circle
                cx="12"
                cy="12"
                r="10"
              />
              <path
                d="M12 16v-4"
              />
              <path
                d="M12 8h.01"
              />
            </svg>
          </button>
        </div>
      </div>
      <div
        class="bg-surface-2 border border-border rounded-xl p-4 flex flex-col gap-3"
      >
        <div
          class="flex items-center justify-between gap-2"
        >
          <span
            class="text-[10px] font-semibold text-fg-muted uppercase tracking-wider leading-none"
          >
            Avg Duration
          </span>
          <svg
            class="lucide lucide-clock w-4 h-4 flex-shrink-0 text-status-warning"
            fill="none"
            height="24"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <circle
              cx="12"
              cy="12"
              r="10"
            />
            <polyline
              points="12 6 12 12 16 14"
            />
          </svg>
        </div>
        <div
          class="flex items-end justify-between gap-2"
        >
          <span
            class="text-2xl font-semibold leading-none truncate text-status-warning"
            title="0s"
          >
            0s
          </span>
          <button
            aria-expanded="false"
            aria-label="Explain this metric"
            class="flex items-center justify-center rounded-full p-0.5 -m-0.5 text-fg-muted hover:text-fg-secondary focus:outline-none focus:ring-1 focus:ring-accent/40"
            type="button"
          >
            <svg
              class="lucide lucide-info w-4 h-4"
              fill="none"
              height="24"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <circle
                cx="12"
                cy="12"
                r="10"
              />
              <path
                d="M12 16v-4"
              />
              <path
                d="M12 8h.01"
              />
            </svg>
          </button>
        </div>
      </div>
    </div>
    <div
      class="card p-4 space-y-3"
    >
      <div>
        <h2
          class="text-sm font-semibold text-fg-secondary flex items-center gap-2"
        >
          <svg
            class="lucide lucide-workflow w-4 h-4 text-violet-400"
            fill="none"
            height="24"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <rect
              height="8"
              rx="2"
              width="8"
              x="3"
              y="3"
            />
            <path
              d="M7 11v4a2 2 0 0 0 2 2h4"
            />
            <rect
              height="8"
              rx="2"
              width="8"
              x="13"
              y="13"
            />
          </svg>
          Dynamic Workflows
        </h2>
        <p
          class="text-xs text-fg-muted mt-0.5"
        >
          Fleets spawned by the Workflow tool, reconstructed from on-disk run journals
        </p>
      </div>
      <div
        class="space-y-2"
      >
        <div
          class="rounded-lg border border-border bg-card/40 overflow-hidden"
        >
          <button
            aria-expanded="false"
            class="w-full flex items-center gap-3 px-3 py-2.5 text-left hover:bg-surface-2/30 transition-colors"
          >
            <svg
              class="lucide lucide-chevron-right w-4 h-4 text-fg-muted flex-shrink-0"
              fill="none"
              height="24"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="m9 18 6-6-6-6"
              />
            </svg>
            <svg
              class="lucide lucide-workflow w-4 h-4 text-violet-400 flex-shrink-0"
              fill="none"
              height="24"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <rect
                height="8"
                rx="2"
                width="8"
                x="3"
                y="3"
              />
              <path
                d="M7 11v4a2 2 0 0 0 2 2h4"
              />
              <rect
                height="8"
                rx="2"
                width="8"
                x="13"
                y="13"
              />
            </svg>
            <div
              class="flex-1 min-w-0"
            >
              <div
                class="flex items-center gap-2 flex-wrap"
              >
                <span
                  class="text-sm font-medium text-fg-secondary truncate"
                >
                  review-changes
                </span>
                <span
                  class="badge text-[10px] border bg-status-success/15 text-status-success border-status-success/30"
                >
                  Completed
                </span>
                <span
                  class="text-[10px] font-mono text-fg-muted"
                >
                  claude-opus-4-6
                </span>
              </div>
              <div
                class="flex items-center gap-3 mt-0.5 text-[11px] text-fg-muted flex-wrap"
              >
                <span>
                  2 agents
                </span>
                <span>
                  9 tool calls
                </span>
                <span>
                  48.0K
                   
                  tokens
                </span>
                <span>
                  5m 0s
                </span>
                <span>
                  30m ago
                </span>
              </div>
            </div>
            <a
              class="text-fg-muted hover:text-violet-400 transition-colors flex-shrink-0"
              href="/sessions/sess-1"
              title="Open parent session"
            >
              <svg
                class="lucide lucide-external-link w-3.5 h-3.5"
                fill="none"
                height="24"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                viewBox="0 0 24 24"
                width="24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M15 3h6v6"
                />
                <path
                  d="M10 14 21 3"
                />
                <path
                  d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"
                />
              </svg>
            </a>
          </button>
        </div>
      </div>
    </div>
    <div
      class="flex flex-col h-full"
    >
      <div
        class="flex items-center justify-between gap-4 mb-3"
      >
        <div
          class="flex items-center gap-2.5 min-w-0"
        >
          <span
            class="w-5 h-5 rounded-md bg-accent/15 text-accent text-[11px] font-bold flex items-center justify-center flex-shrink-0"
          >
            1
          </span>
          <h2
            class="text-sm font-semibold text-fg-primary"
          >
            Agent Orchestration Graph
          </h2>
          <button
            aria-expanded="false"
            aria-label="What this shows"
            class="flex items-center justify-center rounded-full p-0.5 -m-0.5 text-fg-muted hover:text-fg-secondary transition-colors focus:outline-none focus:ring-1 focus:ring-accent/40"
            type="button"
          >
            <svg
              class="lucide lucide-info w-3.5 h-3.5"
              fill="none"
              height="24"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <circle
                cx="12"
                cy="12"
                r="10"
              />
              <path
                d="M12 16v-4"
              />
              <path
                d="M12 8h.01"
              />
            </svg>
          </button>
        </div>
        <span
          class="hidden lg:block flex-shrink-0 max-w-[20rem] xl:max-w-sm truncate text-right text-[11px] text-fg-muted"
          title="Aggregate spawning patterns across all sessions - Click a node to filter"
        >
          Aggregate spawning patterns across all sessions - Click a node to filter
        </span>
      </div>
      <div
        class="card p-4 flex-1"
      >
        <div
          class="flex flex-col items-center justify-center py-20 text-center"
        >
          <div
            class="w-14 h-14 rounded-2xl bg-surface-4 flex items-center justify-center mb-5"
          >
            <svg
              class="w-6 h-6 text-fg-muted"
              fill="none"
              stroke="currentColor"
              stroke-width="1.5"
              viewBox="0 0 24 24"
            >
              <circle
                cx="6"
                cy="12"
                r="2"
              />
              <circle
                cx="18"
                cy="6"
                r="2"
              />
              <circle
                cx="18"
                cy="18"
                r="2"
              />
              <line
                x1="8"
                x2="16"
                y1="11"
                y2="7"
              />
              <line
                x1="8"
                x2="16"
                y1="13"
                y2="17"
              />
            </svg>
          </div>
          <h3
            class="text-base font-medium text-fg-secondary mb-2"
          >
            No orchestration data
          </h3>
          <p
            class="text-sm text-fg-muted max-w-sm"
          >
            Agent spawning data will appear here once sessions with subagents have been recorded.
          </p>
        </div>
      </div>
    </div>
    <div
      class="flex flex-col h-full"
    >
      <div
        class="flex items-center justify-between gap-4 mb-3"
      >
        <div
          class="flex items-center gap-2.5 min-w-0"
        >
          <span
            class="w-5 h-5 rounded-md bg-accent/15 text-accent text-[11px] font-bold flex items-center justify-center flex-shrink-0"
          >
            2
          </span>
          <h2
            class="text-sm font-semibold text-fg-primary"
          >
            Tool Execution Flow
          </h2>
          <button
            aria-expanded="false"
            aria-label="What this shows"
            class="flex items-center justify-center rounded-full p-0.5 -m-0.5 text-fg-muted hover:text-fg-secondary transition-colors focus:outline-none focus:ring-1 focus:ring-accent/40"
            type="button"
          >
            <svg
              class="lucide lucide-info w-3.5 h-3.5"
              fill="none"
              height="24"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <circle
                cx="12"
                cy="12"
                r="10"
              />
              <path
                d="M12 16v-4"
              />
              <path
                d="M12 8h.01"
              />
            </svg>
          </button>
        </div>
        <span
          class="hidden lg:block flex-shrink-0 max-w-[20rem] xl:max-w-sm truncate text-right text-[11px] text-fg-muted"
          title="How tools chain together - Sankey-style directed flow"
        >
          How tools chain together - Sankey-style directed flow
        </span>
      </div>
      <div
        class="card p-4 flex-1"
      >
        <div
          class="relative"
        >
          <div
            class="flex items-center justify-center"
            style="height: 320px;"
          >
            <span
              class="text-sm text-fg-muted"
            >
              No tool flow data
            </span>
          </div>
          <div
            class="flex flex-wrap gap-x-4 gap-y-1.5 mt-3 px-1"
          >
            <div
              class="flex items-center gap-1.5"
            >
              <span
                class="inline-block w-2.5 h-2.5 rounded-sm flex-shrink-0"
                style="background: rgb(59, 130, 246); opacity: 0.9;"
              />
              <span
                class="text-xs text-fg-secondary"
              >
                Read
              </span>
            </div>
            <div
              class="flex items-center gap-1.5"
            >
              <span
                class="inline-block w-2.5 h-2.5 rounded-sm flex-shrink-0"
                style="background: rgb(34, 197, 94); opacity: 0.9;"
              />
              <span
                class="text-xs text-fg-secondary"
              >
                Write
              </span>
            </div>
            <div
              class="flex items-center gap-1.5"
            >
              <span
                class="inline-block w-2.5 h-2.5 rounded-sm flex-shrink-0"
                style="background: rgb(234, 179, 8); opacity: 0.9;"
              />
              <span
                class="text-xs text-fg-secondary"
              >
                Edit
              </span>
            </div>
            <div
              class="flex items-center gap-1.5"
            >
              <span
                class="inline-block w-2.5 h-2.5 rounded-sm flex-shrink-0"
                style="background: rgb(239, 68, 68); opacity: 0.9;"
              />
              <span
                class="text-xs text-fg-secondary"
              >
                Bash
              </span>
            </div>
            <div
              class="flex items-center gap-1.5"
            >
              <span
                class="inline-block w-2.5 h-2.5 rounded-sm flex-shrink-0"
                style="background: rgb(168, 85, 247); opacity: 0.9;"
              />
              <span
                class="text-xs text-fg-secondary"
              >
                Grep
              </span>
            </div>
            <div
              class="flex items-center gap-1.5"
            >
              <span
                class="inline-block w-2.5 h-2.5 rounded-sm flex-shrink-0"
                style="background: rgb(236, 72, 153); opacity: 0.9;"
              />
              <span
                class="text-xs text-fg-secondary"
              >
                Glob
              </span>
            </div>
            <div
              class="flex items-center gap-1.5"
            >
              <span
                class="inline-block w-2.5 h-2.5 rounded-sm flex-shrink-0"
                style="background: rgb(99, 102, 241); opacity: 0.9;"
              />
              <span
                class="text-xs text-fg-secondary"
              >
                Agent
              </span>
            </div>
            <div
              class="flex items-center gap-1.5"
            >
              <span
                class="inline-block w-2.5 h-2.5 rounded-sm flex-shrink-0"
                style="background: rgb(100, 116, 139); opacity: 0.9;"
              />
              <span
                class="text-xs text-fg-secondary"
              >
                Other
              </span>
            </div>
          </div>
          <div
            aria-hidden="true"
            class="fixed z-50 px-3 py-2 rounded-lg shadow-2xl pointer-events-none"
            role="tooltip"
            style="display: none; opacity: 0; left: 0px; top: 0px; background: rgb(18, 18, 31); border: 1px solid rgb(42, 42, 74); color: rgb(226, 232, 240); min-width: 240px; max-width: 320px; transition: opacity 120ms ease-out;"
          />
        </div>
      </div>
    </div>
    <div
      class="flex flex-col h-full"
    >
      <div
        class="flex items-center justify-between gap-4 mb-3"
      >
        <div
          class="flex items-center gap-2.5 min-w-0"
        >
          <span
            class="w-5 h-5 rounded-md bg-accent/15 text-accent text-[11px] font-bold flex items-center justify-center flex-shrink-0"
          >
            3
          </span>
          <h2
            class="text-sm font-semibold text-fg-primary"
          >
            Agent Pipeline Graph
          </h2>
          <button
            aria-expanded="false"
            aria-label="What this shows"
            class="flex items-center justify-center rounded-full p-0.5 -m-0.5 text-fg-muted hover:text-fg-secondary transition-colors focus:outline-none focus:ring-1 focus:ring-accent/40"
            type="button"
          >
            <svg
              class="lucide lucide-info w-3.5 h-3.5"
              fill="none"
              height="24"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <circle
                cx="12"
                cy="12"
                r="10"
              />
              <path
                d="M12 16v-4"
              />
              <path
                d="M12 8h.01"
              />
            </svg>
          </button>
        </div>
        <span
          class="hidden lg:block flex-shrink-0 max-w-[20rem] xl:max-w-sm truncate text-right text-[11px] text-fg-muted"
          title="Directed workflow - which agent types run after which, with frequency labels"
        >
          Directed workflow - which agent types run after which, with frequency labels
        </span>
      </div>
      <div
        class="card p-4 flex-1"
      >
        <div
          class="flex flex-col items-center justify-center py-16 text-center"
        >
          <p
            class="text-sm font-medium text-fg-secondary"
          >
            No pipeline data yet
          </p>
          <p
            class="text-xs text-fg-muted mt-1"
          >
            Directed workflow edges appear once agent types run sequentially across multiple sessions.
          </p>
        </div>
      </div>
    </div>
    <div
      class="grid grid-cols-1 lg:grid-cols-2 gap-6"
    >
      <div
        class="flex flex-col h-full"
      >
        <div
          class="flex items-center justify-between gap-4 mb-3"
        >
          <div
            class="flex items-center gap-2.5 min-w-0"
          >
            <span
              class="w-5 h-5 rounded-md bg-accent/15 text-accent text-[11px] font-bold flex items-center justify-center flex-shrink-0"
            >
              4
            </span>
            <h2
              class="text-sm font-semibold text-fg-primary"
            >
              Subagent Effectiveness
            </h2>
            <button
              aria-expanded="false"
              aria-label="What this shows"
              class="flex items-center justify-center rounded-full p-0.5 -m-0.5 text-fg-muted hover:text-fg-secondary transition-colors focus:outline-none focus:ring-1 focus:ring-accent/40"
              type="button"
            >
              <svg
                class="lucide lucide-info w-3.5 h-3.5"
                fill="none"
                height="24"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                viewBox="0 0 24 24"
                width="24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <circle
                  cx="12"
                  cy="12"
                  r="10"
                />
                <path
                  d="M12 16v-4"
                />
                <path
                  d="M12 8h.01"
                />
              </svg>
            </button>
          </div>
          <span
            class="hidden lg:block flex-shrink-0 max-w-[20rem] xl:max-w-sm truncate text-right text-[11px] text-fg-muted"
            title="Performance metrics per agent type"
          >
            Performance metrics per agent type
          </span>
        </div>
        <div
          class="card p-4 flex-1"
        >
          <div
            class="flex items-center justify-center py-16 text-fg-muted text-sm"
          >
            No subagent data available
          </div>
        </div>
      </div>
      <div
        class="flex flex-col h-full"
      >
        <div
          class="flex items-center justify-between gap-4 mb-3"
        >
          <div
            class="flex items-center gap-2.5 min-w-0"
          >
            <span
              class="w-5 h-5 rounded-md bg-accent/15 text-accent text-[11px] font-bold flex items-center justify-center flex-shrink-0"
            >
              5
            </span>
            <h2
              class="text-sm font-semibold text-fg-primary"
            >
              Detected Workflow Patterns
            </h2>
            <button
              aria-expanded="false"
              aria-label="What this shows"
              class="flex items-center justify-center rounded-full p-0.5 -m-0.5 text-fg-muted hover:text-fg-secondary transition-colors focus:outline-none focus:ring-1 focus:ring-accent/40"
              type="button"
            >
              <svg
                class="lucide lucide-info w-3.5 h-3.5"
                fill="none"
                height="24"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                viewBox="0 0 24 24"
                width="24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <circle
                  cx="12"
                  cy="12"
                  r="10"
                />
                <path
                  d="M12 16v-4"
                />
                <path
                  d="M12 8h.01"
                />
              </svg>
            </button>
          </div>
          <span
            class="hidden lg:block flex-shrink-0 max-w-[20rem] xl:max-w-sm truncate text-right text-[11px] text-fg-muted"
            title="Common agent orchestration sequences"
          >
            Common agent orchestration sequences
          </span>
        </div>
        <div
          class="card p-4 flex-1"
        >
          <div
            class="card p-5"
          >
            <h2
              class="text-sm font-semibold text-fg-secondary uppercase tracking-wider mb-4"
            >
              Workflow Patterns
            </h2>
            <div
              class="flex flex-col items-center justify-center py-12 text-center"
            >
              <div
                class="w-10 h-10 rounded-xl bg-surface-4 flex items-center justify-center mb-3"
              >
                <svg
                  class="lucide lucide-zap w-5 h-5 text-fg-muted"
                  fill="none"
                  height="24"
                  stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  viewBox="0 0 24 24"
                  width="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"
                  />
                </svg>
              </div>
              <p
                class="text-sm font-medium text-fg-secondary"
              >
                No patterns detected yet
              </p>
              <p
                class="text-xs text-fg-muted mt-1"
              >
                Patterns appear once multiple sessions share the same agent sequence.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="grid grid-cols-1 lg:grid-cols-2 gap-6"
    >
      <div
        class="flex flex-col h-full"
      >
        <div
          class="flex items-center justify-between gap-4 mb-3"
        >
          <div
            class="flex items-center gap-2.5 min-w-0"
          >
            <span
              class="w-5 h-5 rounded-md bg-accent/15 text-accent text-[11px] font-bold flex items-center justify-center flex-shrink-0"
            >
              6
            </span>
            <h2
              class="text-sm font-semibold text-fg-primary"
            >
              Model Delegation Flow
            </h2>
            <button
              aria-expanded="false"
              aria-label="What this shows"
              class="flex items-center justify-center rounded-full p-0.5 -m-0.5 text-fg-muted hover:text-fg-secondary transition-colors focus:outline-none focus:ring-1 focus:ring-accent/40"
              type="button"
            >
              <svg
                class="lucide lucide-info w-3.5 h-3.5"
                fill="none"
                height="24"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                viewBox="0 0 24 24"
                width="24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <circle
                  cx="12"
                  cy="12"
                  r="10"
                />
                <path
                  d="M12 16v-4"
                />
                <path
                  d="M12 8h.01"
                />
              </svg>
            </button>
          </div>
          <span
            class="hidden lg:block flex-shrink-0 max-w-[20rem] xl:max-w-sm truncate text-right text-[11px] text-fg-muted"
            title="How models route through agent hierarchies"
          >
            How models route through agent hierarchies
          </span>
        </div>
        <div
          class="card p-4 flex-1"
        >
          <div
            class="flex flex-col items-center justify-center py-16 gap-3 text-fg-muted"
          >
            <svg
              aria-hidden="true"
              fill="none"
              height="40"
              stroke="currentColor"
              stroke-width="1.5"
              viewBox="0 0 24 24"
              width="40"
            >
              <circle
                cx="12"
                cy="12"
                r="10"
              />
              <path
                d="M12 8v4M12 16h.01"
              />
            </svg>
            <span
              class="text-sm"
            >
              No model delegation data available
            </span>
          </div>
        </div>
      </div>
      <div
        class="flex flex-col h-full"
      >
        <div
          class="flex items-center justify-between gap-4 mb-3"
        >
          <div
            class="flex items-center gap-2.5 min-w-0"
          >
            <span
              class="w-5 h-5 rounded-md bg-accent/15 text-accent text-[11px] font-bold flex items-center justify-center flex-shrink-0"
            >
              7
            </span>
            <h2
              class="text-sm font-semibold text-fg-primary"
            >
              Error Propagation Map
            </h2>
            <button
              aria-expanded="false"
              aria-label="What this shows"
              class="flex items-center justify-center rounded-full p-0.5 -m-0.5 text-fg-muted hover:text-fg-secondary transition-colors focus:outline-none focus:ring-1 focus:ring-accent/40"
              type="button"
            >
              <svg
                class="lucide lucide-info w-3.5 h-3.5"
                fill="none"
                height="24"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                viewBox="0 0 24 24"
                width="24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <circle
                  cx="12"
                  cy="12"
                  r="10"
                />
                <path
                  d="M12 16v-4"
                />
                <path
                  d="M12 8h.01"
                />
              </svg>
            </button>
          </div>
          <span
            class="hidden lg:block flex-shrink-0 max-w-[20rem] xl:max-w-sm truncate text-right text-[11px] text-fg-muted"
            title="Where errors cluster in agent hierarchy depth"
          >
            Where errors cluster in agent hierarchy depth
          </span>
        </div>
        <div
          class="card p-4 flex-1"
        >
          <div
            class="flex flex-col items-center justify-center py-16 gap-3"
          >
            <div
              class="w-12 h-12 rounded-full bg-status-success/10 border border-status-success/20 flex items-center justify-center"
            >
              <svg
                fill="none"
                height="24"
                stroke="#10b981"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                viewBox="0 0 24 24"
                width="24"
              >
                <path
                  d="M22 11.08V12a10 10 0 1 1-5.93-9.14"
                />
                <polyline
                  points="22 4 12 14.01 9 11.01"
                />
              </svg>
            </div>
            <span
              class="text-sm text-status-success font-medium"
            >
              No errors recorded
            </span>
            <span
              class="text-xs text-fg-muted"
            >
              All sessions completed successfully
            </span>
          </div>
        </div>
      </div>
    </div>
    <div
      class="flex flex-col h-full"
    >
      <div
        class="flex items-center justify-between gap-4 mb-3"
      >
        <div
          class="flex items-center gap-2.5 min-w-0"
        >
          <span
            class="w-5 h-5 rounded-md bg-accent/15 text-accent text-[11px] font-bold flex items-center justify-center flex-shrink-0"
          >
            8
          </span>
          <h2
            class="text-sm font-semibold text-fg-primary"
          >
            Agent Concurrency Timeline
          </h2>
          <button
            aria-expanded="false"
            aria-label="What this shows"
            class="flex items-center justify-center rounded-full p-0.5 -m-0.5 text-fg-muted hover:text-fg-secondary transition-colors focus:outline-none focus:ring-1 focus:ring-accent/40"
            type="button"
          >
            <svg
              class="lucide lucide-info w-3.5 h-3.5"
              fill="none"
              height="24"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <circle
                cx="12"
                cy="12"
                r="10"
              />
              <path
                d="M12 16v-4"
              />
              <path
                d="M12 8h.01"
              />
            </svg>
          </button>
        </div>
        <span
          class="hidden lg:block flex-shrink-0 max-w-[20rem] xl:max-w-sm truncate text-right text-[11px] text-fg-muted"
          title="Parallel agent execution patterns - Shows how agents overlap in time"
        >
          Parallel agent execution patterns - Shows how agents overlap in time
        </span>
      </div>
      <div
        class="card p-4 flex-1"
      >
        <div
          class="flex flex-col items-center justify-center py-12 text-center"
        >
          <div
            class="w-10 h-10 rounded-xl bg-surface-4 flex items-center justify-center mb-3"
          >
            <svg
              class="w-5 h-5 text-fg-muted"
              fill="none"
              stroke="currentColor"
              stroke-width="1.5"
              viewBox="0 0 24 24"
            >
              <rect
                height="4"
                rx="1"
                width="18"
                x="3"
                y="4"
              />
              <rect
                height="4"
                rx="1"
                width="12"
                x="3"
                y="10"
              />
              <rect
                height="4"
                rx="1"
                width="15"
                x="3"
                y="16"
              />
            </svg>
          </div>
          <p
            class="text-sm font-medium text-fg-secondary"
          >
            No concurrency data
          </p>
          <p
            class="text-xs text-fg-muted mt-1"
          >
            Concurrency data appears once sessions with subagents have been recorded.
          </p>
        </div>
      </div>
    </div>
    <div
      class="grid grid-cols-1 lg:grid-cols-2 gap-6"
    >
      <div
        class="flex flex-col h-full"
      >
        <div
          class="flex items-center justify-between gap-4 mb-3"
        >
          <div
            class="flex items-center gap-2.5 min-w-0"
          >
            <span
              class="w-5 h-5 rounded-md bg-accent/15 text-accent text-[11px] font-bold flex items-center justify-center flex-shrink-0"
            >
              9
            </span>
            <h2
              class="text-sm font-semibold text-fg-primary"
            >
              Session Complexity Scatter
            </h2>
            <button
              aria-expanded="false"
              aria-label="What this shows"
              class="flex items-center justify-center rounded-full p-0.5 -m-0.5 text-fg-muted hover:text-fg-secondary transition-colors focus:outline-none focus:ring-1 focus:ring-accent/40"
              type="button"
            >
              <svg
                class="lucide lucide-info w-3.5 h-3.5"
                fill="none"
                height="24"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                viewBox="0 0 24 24"
                width="24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <circle
                  cx="12"
                  cy="12"
                  r="10"
                />
                <path
                  d="M12 16v-4"
                />
                <path
                  d="M12 8h.01"
                />
              </svg>
            </button>
          </div>
          <span
            class="hidden lg:block flex-shrink-0 max-w-[20rem] xl:max-w-sm truncate text-right text-[11px] text-fg-muted"
            title="Duration vs agent count vs tokens - Bubble size = token usage"
          >
            Duration vs agent count vs tokens - Bubble size = token usage
          </span>
        </div>
        <div
          class="card p-4 flex-1"
        >
          <div
            class="flex flex-col items-center justify-center py-16 text-center"
          >
            <div
              class="w-10 h-10 rounded-xl bg-surface-4 flex items-center justify-center mb-3"
            >
              <svg
                class="w-5 h-5 text-fg-muted"
                fill="none"
                stroke="currentColor"
                stroke-width="1.5"
                viewBox="0 0 24 24"
              >
                <circle
                  cx="7"
                  cy="12"
                  r="3"
                />
                <circle
                  cx="17"
                  cy="8"
                  r="2"
                />
                <circle
                  cx="14"
                  cy="17"
                  r="4"
                />
              </svg>
            </div>
            <p
              class="text-sm font-medium text-fg-secondary"
            >
              No session complexity data
            </p>
            <p
              class="text-xs text-fg-muted mt-1"
            >
              Sessions will appear here once they complete with agent activity.
            </p>
          </div>
        </div>
      </div>
      <div
        class="flex flex-col h-full"
      >
        <div
          class="flex items-center justify-between gap-4 mb-3"
        >
          <div
            class="flex items-center gap-2.5 min-w-0"
          >
            <span
              class="w-5 h-5 rounded-md bg-accent/15 text-accent text-[11px] font-bold flex items-center justify-center flex-shrink-0"
            >
              10
            </span>
            <h2
              class="text-sm font-semibold text-fg-primary"
            >
              Compaction Impact Analysis
            </h2>
            <button
              aria-expanded="false"
              aria-label="What this shows"
              class="flex items-center justify-center rounded-full p-0.5 -m-0.5 text-fg-muted hover:text-fg-secondary transition-colors focus:outline-none focus:ring-1 focus:ring-accent/40"
              type="button"
            >
              <svg
                class="lucide lucide-info w-3.5 h-3.5"
                fill="none"
                height="24"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                viewBox="0 0 24 24"
                width="24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <circle
                  cx="12"
                  cy="12"
                  r="10"
                />
                <path
                  d="M12 16v-4"
                />
                <path
                  d="M12 8h.01"
                />
              </svg>
            </button>
          </div>
          <span
            class="hidden lg:block flex-shrink-0 max-w-[20rem] xl:max-w-sm truncate text-right text-[11px] text-fg-muted"
            title="How context compression is spread across your sessions"
          >
            How context compression is spread across your sessions
          </span>
        </div>
        <div
          class="card p-4 flex-1"
        >
          <div
            class="flex flex-col items-center justify-center py-16 gap-3 text-fg-muted"
          >
            <svg
              aria-hidden="true"
              fill="none"
              height="40"
              stroke="currentColor"
              stroke-width="1.5"
              viewBox="0 0 24 24"
              width="40"
            >
              <path
                d="M9 17H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v3"
              />
              <path
                d="M13 21l2-2 4 4"
              />
              <path
                d="M17 21v-6"
              />
              <path
                d="M21 17h-6"
              />
            </svg>
            <span
              class="text-sm"
            >
              No compactions recorded
            </span>
          </div>
        </div>
      </div>
    </div>
    <div
      class="flex flex-col h-full"
    >
      <div
        class="flex items-center justify-between gap-4 mb-3"
      >
        <div
          class="flex items-center gap-2.5 min-w-0"
        >
          <span
            class="w-5 h-5 rounded-md bg-accent/15 text-accent text-[11px] font-bold flex items-center justify-center flex-shrink-0"
          >
            11
          </span>
          <h2
            class="text-sm font-semibold text-fg-primary"
          >
            Session Drill-In
          </h2>
          <button
            aria-expanded="false"
            aria-label="What this shows"
            class="flex items-center justify-center rounded-full p-0.5 -m-0.5 text-fg-muted hover:text-fg-secondary transition-colors focus:outline-none focus:ring-1 focus:ring-accent/40"
            type="button"
          >
            <svg
              class="lucide lucide-info w-3.5 h-3.5"
              fill="none"
              height="24"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <circle
                cx="12"
                cy="12"
                r="10"
              />
              <path
                d="M12 16v-4"
              />
              <path
                d="M12 8h.01"
              />
            </svg>
          </button>
        </div>
        <span
          class="hidden lg:block flex-shrink-0 max-w-[20rem] xl:max-w-sm truncate text-right text-[11px] text-fg-muted"
          title="Select a session from the scatter plot or use the dropdown to explore"
        >
          Select a session from the scatter plot or use the dropdown to explore
        </span>
      </div>
      <div
        class="card p-4 flex-1"
      >
        <div
          class="flex flex-col py-6 px-4 border-2 border-dashed border-border rounded-xl"
        >
          <div
            class="relative mb-4"
          >
            <div
              class="flex items-center gap-2 px-3 py-2 rounded-lg border bg-surface-3 transition-colors cursor-text border-border"
            >
              <svg
                class="lucide lucide-search w-3.5 h-3.5 text-fg-muted flex-shrink-0"
                fill="none"
                height="24"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                viewBox="0 0 24 24"
                width="24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <circle
                  cx="11"
                  cy="11"
                  r="8"
                />
                <path
                  d="m21 21-4.3-4.3"
                />
              </svg>
              <input
                class="flex-1 bg-transparent text-xs text-fg-secondary placeholder-fg-muted outline-none min-w-0"
                placeholder="Search sessions..."
                type="text"
                value=""
              />
              <svg
                class="lucide lucide-chevron-down w-3.5 h-3.5 text-fg-muted flex-shrink-0 transition-transform duration-150"
                fill="none"
                height="24"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                viewBox="0 0 24 24"
                width="24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="m6 9 6 6 6-6"
                />
              </svg>
            </div>
          </div>
          <div
            class="flex flex-col items-center text-center mt-2"
          >
            <div
              class="w-10 h-10 rounded-xl bg-surface-4 flex items-center justify-center mb-4"
            >
              <svg
                class="lucide lucide-git-fork w-5 h-5 text-fg-muted"
                fill="none"
                height="24"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                viewBox="0 0 24 24"
                width="24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <circle
                  cx="12"
                  cy="18"
                  r="3"
                />
                <circle
                  cx="6"
                  cy="6"
                  r="3"
                />
                <circle
                  cx="18"
                  cy="6"
                  r="3"
                />
                <path
                  d="M18 9v2c0 .6-.4 1-1 1H7c-.6 0-1-.4-1-1V9"
                />
                <path
                  d="M12 12v3"
                />
              </svg>
            </div>
            <p
              class="text-sm font-medium text-fg-secondary mb-1"
            >
              No session selected
            </p>
            <p
              class="text-xs text-fg-muted max-w-xs"
            >
              Search and select a session above, or click a bubble in the scatter plot, to drill into its agent tree, tool timeline, and event sequence.
            </p>
            <div
              class="flex gap-2 mt-5"
            >
              <div
                class="flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-xs font-medium text-fg-muted bg-surface-3 border border-border"
              >
                <svg
                  class="lucide lucide-git-fork w-3.5 h-3.5"
                  fill="none"
                  height="24"
                  stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  viewBox="0 0 24 24"
                  width="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <circle
                    cx="12"
                    cy="18"
                    r="3"
                  />
                  <circle
                    cx="6"
                    cy="6"
                    r="3"
                  />
                  <circle
                    cx="18"
                    cy="6"
                    r="3"
                  />
                  <path
                    d="M18 9v2c0 .6-.4 1-1 1H7c-.6 0-1-.4-1-1V9"
                  />
                  <path
                    d="M12 12v3"
                  />
                </svg>
                Agent Tree
              </div>
              <div
                class="flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-xs font-medium text-fg-muted bg-surface-3 border border-border"
              >
                <svg
                  class="lucide lucide-wrench w-3.5 h-3.5"
                  fill="none"
                  height="24"
                  stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  viewBox="0 0 24 24"
                  width="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"
                  />
                </svg>
                Tool Timeline
              </div>
              <div
                class="flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-xs font-medium text-fg-muted bg-surface-3 border border-border"
              >
                <svg
                  class="lucide lucide-list w-3.5 h-3.5"
                  fill="none"
                  height="24"
                  stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  viewBox="0 0 24 24"
                  width="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M3 12h.01"
                  />
                  <path
                    d="M3 18h.01"
                  />
                  <path
                    d="M3 6h.01"
                  />
                  <path
                    d="M8 12h13"
                  />
                  <path
                    d="M8 18h13"
                  />
                  <path
                    d="M8 6h13"
                  />
                </svg>
                Event Sequence
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;
