reviewflow 3.16.0 → 3.17.0

package/dist/dashboard/modules/worktreePanel.js

@@ -0,0 +1,373 @@
+/**
+ * Dashboard module — worktree pool panel (SPEC-173).
+ * Humble object: pure functions, no global state, no direct DOM access here.
+ * Animation choreography lives in the consumer (index.html) and styles.css.
+ *
+ * Visual DNA: "Agentic OS" — see project_agentic_os_design_dna.md.
+ */
+
+/**
+ * @typedef {'active' | 'idle' | 'stale'} WorktreeRowStatus
+ */
+
+/**
+ * @typedef {Object} WorktreeRowViewModel
+ * @property {number} mrNumber
+ * @property {string} path
+ * @property {string} mtime
+ * @property {number} ageSeconds
+ * @property {number | null} sizeBytes
+ * @property {WorktreeRowStatus} status
+ */
+
+/**
+ * @typedef {Object} WorktreeGroupViewModel
+ * @property {'gitlab' | 'github'} platform
+ * @property {string} projectPath
+ * @property {WorktreeRowViewModel[]} worktrees
+ */
+
+/**
+ * @typedef {Object} LastSweepViewModel
+ * @property {string} ranAt
+ * @property {number} removed
+ * @property {number} failures
+ * @property {number} scanned
+ */
+
+/**
+ * @typedef {Object} WorktreePanelViewModel
+ * @property {number} totalCount
+ * @property {number} totalSizeBytes
+ * @property {number} activeCount
+ * @property {number} idleCount
+ * @property {number} staleCount
+ * @property {string} nextSweepAt
+ * @property {LastSweepViewModel | null} lastSweep
+ * @property {WorktreeGroupViewModel[]} groups
+ */
+
+/**
+ * @typedef {Object} WorktreeTotals
+ * @property {number} total
+ * @property {number} active
+ * @property {number} idle
+ * @property {number} stale
+ */
+
+/**
+ * @typedef {Object} NullableWorktreeTotals
+ * @property {number | null} total
+ * @property {number | null} active
+ * @property {number | null} idle
+ * @property {number | null} stale
+ */
+
+/**
+ * @typedef {{ status: 'ok'; payload: { ranAt: string; removed: number; failures: number; scanned: number } }
+ *        | { status: 'conflict'; startedAt: string }
+ *        | { status: 'error'; reason?: string }} ManualSweepResult
+ */
+
+/**
+ * @param {string | number | null | undefined} text
+ * @returns {string}
+ */
+function escapeHtml(text) {
+  if (text === null || text === undefined) return '';
+  return String(text)
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
+/**
+ * @param {number | null} bytes
+ * @returns {string}
+ */
+export function formatBytes(bytes) {
+  if (bytes === null || bytes === undefined) return '—';
+  if (bytes < 1024) return `${bytes} B`;
+  const kb = bytes / 1024;
+  if (kb < 1024) return `${kb.toFixed(1)} KB`;
+  const mb = kb / 1024;
+  if (mb < 1024) return `${mb.toFixed(1)} MB`;
+  const gb = mb / 1024;
+  return `${gb.toFixed(2)} GB`;
+}
+
+/**
+ * @param {number} ageSeconds
+ * @returns {string}
+ */
+export function formatRelativeAge(ageSeconds) {
+  if (ageSeconds < 60) return `${ageSeconds}s`;
+  const minutes = Math.floor(ageSeconds / 60);
+  if (minutes < 60) return `${minutes}m`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h`;
+  const days = Math.floor(hours / 24);
+  return `${days}d`;
+}
+
+/**
+ * @param {string} mtime
+ * @returns {string}
+ */
+function formatMtime(mtime) {
+  const date = new Date(mtime);
+  if (Number.isNaN(date.getTime())) return mtime;
+  const pad = (value) => String(value).padStart(2, '0');
+  return `${date.getUTCFullYear()}-${pad(date.getUTCMonth() + 1)}-${pad(date.getUTCDate())} ${pad(
+    date.getUTCHours(),
+  )}:${pad(date.getUTCMinutes())}`;
+}
+
+/**
+ * @param {string} path
+ * @returns {string}
+ */
+function truncatePathMiddle(path) {
+  if (path.length <= 48) return path;
+  return `${path.slice(0, 24)}…${path.slice(-20)}`;
+}
+
+/**
+ * @param {WorktreeRowStatus} status
+ * @returns {string}
+ */
+export function renderWorktreeStatusBadge(status) {
+  if (status === 'active') {
+    return '<span class="worktree-status worktree-status-active" data-status="active"><span class="worktree-status-glyph">●</span><span class="worktree-status-label">ACTIVE</span></span>';
+  }
+  if (status === 'idle') {
+    return '<span class="worktree-status worktree-status-idle" data-status="idle"><span class="worktree-status-glyph">○</span><span class="worktree-status-label">IDLE</span></span>';
+  }
+  return '<span class="worktree-status worktree-status-stale" data-status="stale"><span class="worktree-status-glyph">◆</span><span class="worktree-status-label">STALE</span></span>';
+}
+
+/**
+ * @returns {string}
+ */
+export function renderWorktreeEmptyState() {
+  return `
+    <div class="worktree-empty">
+      <svg class="worktree-empty-illustration" viewBox="0 0 120 120" width="96" height="96" aria-hidden="true">
+        <g fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round">
+          <path d="M60 102 V62" />
+          <path d="M60 62 L36 42" />
+          <path d="M60 62 L84 42" />
+          <path d="M36 42 L26 26" />
+          <path d="M36 42 L48 26" />
+          <path d="M84 42 L72 26" />
+          <path d="M84 42 L94 26" />
+          <circle cx="26" cy="26" r="3" />
+          <circle cx="48" cy="26" r="3" />
+          <circle cx="72" cy="26" r="3" />
+          <circle cx="94" cy="26" r="3" class="worktree-empty-leaf" />
+          <rect x="50" y="100" width="20" height="6" rx="0" />
+        </g>
+      </svg>
+      <div class="worktree-empty-title">// POOL EMPTY</div>
+      <div class="worktree-empty-subtitle">No worktree on disk. The next scheduled review will materialize one.</div>
+    </div>
+  `;
+}
+
+/**
+ * @param {WorktreeRowViewModel} row
+ * @param {string} groupLabel  Display label for the row's group (e.g. "gitlab · group/project").
+ * @returns {string}
+ */
+function renderRow(row, groupLabel) {
+  const escapedPath = escapeHtml(row.path);
+  const truncatedPath = escapeHtml(truncatePathMiddle(row.path));
+  const truncatedLabel =
+    groupLabel.length > 28 ? `${groupLabel.slice(0, 24)}…` : groupLabel;
+  return `
+    <tr class="worktree-row" data-status="${escapeHtml(row.status)}">
+      <td class="worktree-cell worktree-cell-status">${renderWorktreeStatusBadge(row.status)}</td>
+      <td class="worktree-cell worktree-cell-identity">
+        <span class="worktree-project" title="${escapeHtml(groupLabel)}">${escapeHtml(truncatedLabel)}</span>
+        <span class="worktree-mr">#${escapeHtml(row.mrNumber)}</span>
+      </td>
+      <td class="worktree-cell worktree-cell-path"><span title="${escapedPath}">${truncatedPath}</span></td>
+      <td class="worktree-cell worktree-cell-age">${escapeHtml(formatRelativeAge(row.ageSeconds))}</td>
+      <td class="worktree-cell worktree-cell-size">${escapeHtml(formatBytes(row.sizeBytes))}</td>
+      <td class="worktree-cell worktree-cell-mtime">${escapeHtml(formatMtime(row.mtime))}</td>
+    </tr>
+  `;
+}
+
+/**
+ * @param {WorktreeGroupViewModel} group
+ * @returns {string}
+ */
+function renderGroupRows(group) {
+  return group.worktrees.map((row) => renderRow(row, `${group.platform} · ${group.projectPath}`)).join('');
+}
+
+/**
+ * Flattens the view model status counts into a single record consumed by the
+ * animation layer (count-up + change-flash). The presenter is the single source
+ * of truth for these counts — this helper just renames the keys.
+ *
+ * @param {WorktreePanelViewModel} viewModel
+ * @returns {WorktreeTotals}
+ */
+export function snapshotTotals(viewModel) {
+  return {
+    total: viewModel.totalCount,
+    active: viewModel.activeCount,
+    idle: viewModel.idleCount,
+    stale: viewModel.staleCount,
+  };
+}
+
+/**
+ * Returns the metric keys whose value changed between two snapshots. A key
+ * whose previous value is null (cold start) is ignored — only transitions
+ * between known values are surfaced.
+ *
+ * @param {NullableWorktreeTotals} previous
+ * @param {WorktreeTotals} next
+ * @returns {Array<'total' | 'active' | 'idle' | 'stale'>}
+ */
+export function computeChangedMetricKeys(previous, next) {
+  const keys = /** @type {Array<'total' | 'active' | 'idle' | 'stale'>} */ ([
+    'total',
+    'active',
+    'idle',
+    'stale',
+  ]);
+  return keys.filter((key) => previous[key] !== null && previous[key] !== next[key]);
+}
+
+/**
+ * @param {LastSweepViewModel | null} lastSweep
+ * @returns {string}
+ */
+function renderLastSweep(lastSweep) {
+  if (lastSweep === null) {
+    return '<span class="worktree-lastsweep-value">never</span>';
+  }
+  const ranAt = formatMtime(lastSweep.ranAt);
+  return `<span class="worktree-lastsweep-value">${escapeHtml(ranAt)} UTC · removed ${escapeHtml(lastSweep.removed)} · failures ${escapeHtml(lastSweep.failures)} · scanned ${escapeHtml(lastSweep.scanned)}</span>`;
+}
+
+/**
+ * @param {string} nextSweepAt
+ * @returns {string}
+ */
+function renderNextSweep(nextSweepAt) {
+  const date = new Date(nextSweepAt);
+  if (Number.isNaN(date.getTime())) return escapeHtml(nextSweepAt);
+  const diffMs = date.getTime() - Date.now();
+  if (diffMs <= 0) return 'imminent';
+  const totalMinutes = Math.round(diffMs / 60000);
+  const hours = Math.floor(totalMinutes / 60);
+  const minutes = totalMinutes % 60;
+  if (hours <= 0) return `in ${minutes}m`;
+  const pad = (value) => String(value).padStart(2, '0');
+  return `in ${hours}h ${pad(minutes)}m`;
+}
+
+/**
+ * @param {WorktreePanelViewModel} viewModel
+ * @returns {string}
+ */
+export function renderWorktreeSection(viewModel) {
+  const isEmpty = viewModel.totalCount === 0;
+
+  const body = isEmpty
+    ? renderWorktreeEmptyState()
+    : `
+      <div class="worktree-metrics">
+        <div class="worktree-metric"><div class="worktree-metric-label">TOTAL</div><div class="worktree-metric-value" data-metric="total">${escapeHtml(viewModel.totalCount)}</div></div>
+        <div class="worktree-metric"><div class="worktree-metric-label">ACTIVE</div><div class="worktree-metric-value" data-metric="active">${escapeHtml(viewModel.activeCount)}</div></div>
+        <div class="worktree-metric"><div class="worktree-metric-label">IDLE</div><div class="worktree-metric-value" data-metric="idle">${escapeHtml(viewModel.idleCount)}</div></div>
+        <div class="worktree-metric"><div class="worktree-metric-label">STALE</div><div class="worktree-metric-value" data-metric="stale">${escapeHtml(viewModel.staleCount)}</div></div>
+        <div class="worktree-metric"><div class="worktree-metric-label">TOTAL SIZE</div><div class="worktree-metric-value" data-metric="size">${escapeHtml(formatBytes(viewModel.totalSizeBytes))}</div></div>
+      </div>
+      <div class="worktree-table-wrapper">
+        <table class="worktree-table">
+          <thead>
+            <tr>
+              <th class="worktree-th">STATUS</th>
+              <th class="worktree-th">PLATFORM · MR</th>
+              <th class="worktree-th">PATH</th>
+              <th class="worktree-th">AGE</th>
+              <th class="worktree-th">SIZE</th>
+              <th class="worktree-th">MTIME</th>
+            </tr>
+          </thead>
+          <tbody>
+            ${viewModel.groups.map(renderGroupRows).join('')}
+          </tbody>
+        </table>
+      </div>
+    `;
+
+  return `
+    <div class="worktree-panel" data-empty="${isEmpty ? 'true' : 'false'}">
+      <div class="worktree-panel-header">
+        <span class="worktree-panel-title">// WORKTREE POOL · ${escapeHtml(viewModel.totalCount)}</span>
+        <button class="worktree-sweep-button" data-action="sweep" type="button">
+          <svg class="worktree-sweep-broom" viewBox="0 0 24 24" width="14" height="14" aria-hidden="true">
+            <g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round">
+              <path d="M14 4 L20 10" />
+              <path d="M13 5 L4 14 L10 20 L19 11" />
+              <path d="M4 14 L2 18" />
+              <path d="M6 16 L4 20" />
+              <path d="M8 18 L6 22" />
+            </g>
+          </svg>
+          <span class="worktree-sweep-label">SWEEP NOW</span>
+        </button>
+      </div>
+      <div class="worktree-panel-body">${body}</div>
+      <div class="worktree-panel-footer">
+        <div class="worktree-footer-block">
+          <span class="worktree-footer-label">// LAST SWEEP</span>
+          ${renderLastSweep(viewModel.lastSweep)}
+        </div>
+        <div class="worktree-footer-block worktree-footer-next">
+          <span class="worktree-footer-label">// NEXT SWEEP</span>
+          <span class="worktree-nextsweep-value">${escapeHtml(renderNextSweep(viewModel.nextSweepAt))}</span>
+        </div>
+      </div>
+    </div>
+  `;
+}
+
+/**
+ * @param {typeof fetch} [fetchImpl]
+ * @returns {Promise<WorktreePanelViewModel>}
+ */
+export async function fetchWorktreeOverview(fetchImpl = fetch) {
+  const response = await fetchImpl('/api/worktrees');
+  if (!response.ok) {
+    throw new Error(`Worktree overview request failed: ${response.status}`);
+  }
+  return response.json();
+}
+
+/**
+ * @param {typeof fetch} [fetchImpl]
+ * @returns {Promise<ManualSweepResult>}
+ */
+export async function triggerManualSweep(fetchImpl = fetch) {
+  const response = await fetchImpl('/api/worktrees/sweep', { method: 'POST' });
+  if (response.ok) {
+    const payload = await response.json();
+    return { status: 'ok', payload };
+  }
+  if (response.status === 409) {
+    const body = await response.json();
+    return { status: 'conflict', startedAt: body.startedAt };
+  }
+  const body = await response.json().catch(() => ({}));
+  return { status: 'error', reason: body.error };
+}

package/dist/dashboard/modules/worktreePanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"worktreePanel.js","sourceRoot":"","sources":["../../../src/dashboard/modules/worktreePanel.js"],"names":[],"mappings":"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"}

package/dist/dashboard/styles.css

@@ -4107,3 +4107,315 @@ input:focus-visible,
 .budget-slider-status { font-size: 0.8rem; min-width: 7rem; }
 .budget-slider-status--ok { color: #16a34a; }
 .budget-slider-status--error { color: #dc2626; }
+
+/* ============================================================
+   SPEC-173 — Worktree Pool ("Agentic OS" visual DNA)
+   Scoped: all rules target #worktree-section so the theme stays
+   contained — no leak into the surrounding dashboard.
+   Reference: project_agentic_os_design_dna.md.
+   ============================================================ */
+
+#worktree-section {
+  --worktree-bg: #0a0908;
+  --worktree-bg-elevated: #13110f;
+  --worktree-border-faint: rgba(255, 180, 100, 0.12);
+  --worktree-border-active: rgba(255, 138, 61, 0.65);
+  --worktree-accent: #ff8a3d;
+  --worktree-accent-dim: #a85a25;
+  --worktree-success: #5ce28b;
+  --worktree-warn: #f3c969;
+  --worktree-text-primary: #f3eee8;
+  --worktree-text-muted: #7a716a;
+  --worktree-glow-active: 0 0 12px rgba(255, 138, 61, 0.55);
+  --worktree-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Berkeley Mono", monospace;
+
+  display: block;
+  margin: 24px 0;
+  font-family: var(--worktree-mono);
+  color: var(--worktree-text-primary);
+}
+
+#worktree-section .worktree-panel {
+  position: relative;
+  background: var(--worktree-bg);
+  border: 1px solid var(--worktree-border-faint);
+  padding: 18px 20px 16px;
+  animation: worktree-reveal 250ms ease-out;
+}
+
+#worktree-section .worktree-panel::before,
+#worktree-section .worktree-panel::after {
+  content: "";
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  pointer-events: none;
+}
+#worktree-section .worktree-panel::before {
+  top: -1px;
+  left: -1px;
+  border-top: 2px solid var(--worktree-border-active);
+  border-left: 2px solid var(--worktree-border-active);
+}
+#worktree-section .worktree-panel::after {
+  bottom: -1px;
+  right: -1px;
+  border-bottom: 2px solid var(--worktree-border-active);
+  border-right: 2px solid var(--worktree-border-active);
+}
+
+@keyframes worktree-reveal {
+  from { opacity: 0; transform: translateY(4px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+#worktree-section .worktree-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 14px;
+}
+
+#worktree-section .worktree-panel-title {
+  font-family: var(--worktree-mono);
+  font-size: 13px;
+  letter-spacing: 0.04em;
+  color: var(--worktree-accent);
+  text-transform: none;
+}
+
+#worktree-section .worktree-sweep-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  background: transparent;
+  color: var(--worktree-accent);
+  border: 1px solid var(--worktree-border-active);
+  padding: 6px 12px;
+  font-family: var(--worktree-mono);
+  font-size: 11px;
+  letter-spacing: 0.1em;
+  cursor: pointer;
+  border-radius: 0;
+  transition: background-color 120ms ease-out, color 120ms ease-out;
+}
+#worktree-section .worktree-sweep-button:hover {
+  background: rgba(255, 138, 61, 0.08);
+}
+#worktree-section .worktree-sweep-button:active {
+  background: rgba(255, 138, 61, 0.18);
+}
+#worktree-section .worktree-sweep-pending {
+  border-color: var(--worktree-warn);
+  color: var(--worktree-warn);
+}
+#worktree-section .worktree-sweep-conflict {
+  border-color: var(--worktree-warn);
+  color: var(--worktree-warn);
+}
+#worktree-section .worktree-sweep-error {
+  border-color: #ff5252;
+  color: #ff5252;
+}
+#worktree-section .worktree-sweep-broom {
+  display: inline-block;
+}
+
+#worktree-section .worktree-metrics {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 16px;
+  padding: 12px 0 14px;
+  border-bottom: 1px dashed var(--worktree-border-faint);
+}
+#worktree-section .worktree-metric {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+#worktree-section .worktree-metric-label {
+  font-size: 10px;
+  letter-spacing: 0.1em;
+  color: var(--worktree-text-muted);
+  text-transform: uppercase;
+}
+#worktree-section .worktree-metric-value {
+  font-family: var(--worktree-mono);
+  font-size: 26px;
+  color: var(--worktree-text-primary);
+  font-weight: 500;
+  padding: 2px 4px;
+  margin: -2px -4px;
+}
+
+#worktree-section .worktree-table-wrapper {
+  overflow-x: auto;
+  margin-top: 10px;
+}
+#worktree-section .worktree-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-family: var(--worktree-mono);
+  font-size: 12px;
+  background: var(--worktree-bg);
+}
+#worktree-section .worktree-th {
+  text-align: left;
+  font-size: 10px;
+  letter-spacing: 0.1em;
+  color: var(--worktree-text-muted);
+  text-transform: uppercase;
+  padding: 8px 10px;
+  border-bottom: 1px solid var(--worktree-border-faint);
+  font-weight: normal;
+}
+#worktree-section .worktree-row {
+  position: relative;
+  background: var(--worktree-bg-elevated);
+  transition: background-color 120ms ease-out;
+}
+#worktree-section .worktree-row:hover {
+  background: rgba(255, 138, 61, 0.04);
+}
+#worktree-section .worktree-row + .worktree-row > .worktree-cell {
+  border-top: 1px solid var(--worktree-border-faint);
+}
+#worktree-section .worktree-cell {
+  padding: 10px 10px;
+  vertical-align: middle;
+  color: var(--worktree-text-primary);
+}
+#worktree-section .worktree-cell-identity {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+#worktree-section .worktree-project {
+  font-family: var(--worktree-mono);
+  font-size: 12px;
+  color: var(--worktree-text-primary);
+}
+#worktree-section .worktree-mr {
+  font-family: var(--worktree-mono);
+  font-size: 11px;
+  color: var(--worktree-text-muted);
+}
+#worktree-section .worktree-cell-path,
+#worktree-section .worktree-cell-age,
+#worktree-section .worktree-cell-size,
+#worktree-section .worktree-cell-mtime {
+  font-family: var(--worktree-mono);
+  font-size: 12px;
+  color: var(--worktree-text-muted);
+}
+#worktree-section .worktree-cell-path > span {
+  cursor: help;
+}
+
+#worktree-section .worktree-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-family: var(--worktree-mono);
+  font-size: 11px;
+  letter-spacing: 0.08em;
+}
+#worktree-section .worktree-status-glyph {
+  font-size: 11px;
+  line-height: 1;
+}
+#worktree-section .worktree-status-active {
+  color: var(--worktree-accent);
+}
+#worktree-section .worktree-status-active .worktree-status-glyph {
+  text-shadow: var(--worktree-glow-active);
+  animation: worktree-pulse 1.4s ease-in-out infinite;
+}
+#worktree-section .worktree-status-idle {
+  color: var(--worktree-accent-dim);
+  opacity: 0.85;
+}
+#worktree-section .worktree-status-stale {
+  color: var(--worktree-warn);
+}
+@keyframes worktree-pulse {
+  0%, 100% { opacity: 0.75; text-shadow: 0 0 8px rgba(255, 138, 61, 0.45); }
+  50%      { opacity: 1;    text-shadow: 0 0 14px rgba(255, 138, 61, 0.7); }
+}
+
+#worktree-section .worktree-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 32px 16px 24px;
+  gap: 12px;
+  color: var(--worktree-text-muted);
+}
+#worktree-section .worktree-empty-illustration {
+  color: var(--worktree-accent-dim);
+}
+#worktree-section .worktree-empty-leaf {
+  animation: worktree-leaf 2s ease-in-out infinite;
+  transform-origin: center;
+}
+@keyframes worktree-leaf {
+  0%, 100% { opacity: 0.5; }
+  50%      { opacity: 1; }
+}
+#worktree-section .worktree-empty-title {
+  font-family: var(--worktree-mono);
+  font-size: 12px;
+  letter-spacing: 0.08em;
+  color: var(--worktree-accent);
+}
+#worktree-section .worktree-empty-subtitle {
+  font-family: var(--worktree-mono);
+  font-size: 11px;
+  color: var(--worktree-text-muted);
+  max-width: 360px;
+  text-align: center;
+}
+
+#worktree-section .worktree-panel-footer {
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+  margin-top: 14px;
+  padding-top: 10px;
+  border-top: 1px dashed var(--worktree-border-faint);
+  font-family: var(--worktree-mono);
+  font-size: 11px;
+}
+#worktree-section .worktree-footer-block {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+#worktree-section .worktree-footer-label {
+  font-size: 10px;
+  letter-spacing: 0.1em;
+  color: var(--worktree-text-muted);
+}
+#worktree-section .worktree-lastsweep-value,
+#worktree-section .worktree-nextsweep-value {
+  color: var(--worktree-text-primary);
+}
+#worktree-section .worktree-footer-next {
+  text-align: right;
+}
+
+#worktree-section .worktree-panel-error {
+  font-family: var(--worktree-mono);
+  font-size: 12px;
+  color: var(--worktree-warn);
+  padding: 14px 16px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  #worktree-section .worktree-panel,
+  #worktree-section .worktree-status-active .worktree-status-glyph,
+  #worktree-section .worktree-empty-leaf {
+    animation: none !important;
+  }
+}