@sienklogic/plan-build-run 2.34.0 → 2.38.0

package/dashboard/public/css/command-center.css

@@ -5,6 +5,83 @@
    All values use tokens from tokens.css.
    ============================================ */
 
+/* --- Stat Card Grid --- */
+.stat-card-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: var(--space-md);
+  margin-bottom: var(--space-lg);
+}
+
+.stat-card {
+  background: var(--card-bg);
+  border: 1px solid var(--card-border);
+  border-radius: var(--card-radius);
+  box-shadow: var(--card-shadow);
+  padding: var(--stat-card-padding);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+  transition: box-shadow var(--transition-fast);
+}
+
+.stat-card:hover {
+  box-shadow: var(--shadow-md);
+}
+
+.stat-card--accent {
+  border-left: 3px solid var(--color-accent);
+}
+
+.stat-card__label {
+  font-size: var(--stat-card-label-size);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--color-text-muted);
+}
+
+.stat-card__value {
+  font-size: var(--stat-card-value-size);
+  font-weight: 700;
+  line-height: 1.1;
+  color: var(--color-text);
+  letter-spacing: -0.02em;
+}
+
+.stat-card__sub {
+  font-size: var(--stat-card-sub-size);
+  color: var(--color-text-dim);
+  line-height: 1.4;
+}
+
+.stat-card__mini-bar {
+  height: 4px;
+  border-radius: var(--radius-lg);
+  background: var(--color-border);
+  overflow: hidden;
+  margin-top: var(--space-xs);
+}
+
+.stat-card__mini-bar-fill {
+  height: 100%;
+  border-radius: var(--radius-lg);
+  background: var(--color-accent);
+  transition: width var(--transition-base);
+}
+
+@media (max-width: 900px) {
+  .stat-card-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 480px) {
+  .stat-card-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
 /* --- Command Center Layout --- */
 .command-center {
   display: flex;
@@ -26,6 +103,68 @@
   }
 }
 
+/* --- Command Center Two-Column Layout --- */
+.cc-two-col {
+  display: grid;
+  grid-template-columns: 1fr 360px;
+  gap: var(--space-lg);
+  align-items: start;
+}
+
+.cc-col-main {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-lg);
+}
+
+.cc-col-side {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-lg);
+}
+
+@media (max-width: 900px) {
+  .cc-two-col {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* --- Empty State --- */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-xl) var(--space-lg);
+  text-align: center;
+  gap: var(--space-sm);
+}
+
+.empty-state__icon {
+  font-size: 2rem;
+  color: var(--color-text-muted);
+  line-height: 1;
+  margin-bottom: var(--space-xs);
+}
+
+.empty-state__heading {
+  font-size: 0.9375rem;
+  font-weight: 600;
+  color: var(--color-text);
+  margin: 0;
+}
+
+.empty-state__body {
+  font-size: 0.875rem;
+  color: var(--color-text-dim);
+  margin: 0;
+  max-width: 240px;
+}
+
+.empty-state__action {
+  margin-top: var(--space-xs);
+}
+
 /* --- Status Header --- */
 .status-header {
   display: flex;
@@ -119,11 +258,11 @@
 }
 
 .card__header {
-  font-size: 0.75rem;
-  font-weight: 600;
+  font-size: var(--section-label-size);
+  font-weight: var(--section-label-weight);
   text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--color-text-muted);
+  letter-spacing: var(--section-label-spacing);
+  color: var(--section-label-color);
   padding-bottom: var(--space-sm);
   border-bottom: 1px solid var(--color-border);
   margin-bottom: var(--space-md);
@@ -203,11 +342,11 @@
 }
 
 .phase-timeline__label {
-  font-size: 0.75rem;
-  font-weight: 600;
+  font-size: var(--section-label-size);
+  font-weight: var(--section-label-weight);
   text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--color-text-muted);
+  letter-spacing: var(--section-label-spacing);
+  color: var(--section-label-color);
   margin-bottom: var(--space-sm);
 }
 
@@ -314,11 +453,11 @@
 }
 
 .quick-actions__label {
-  font-size: 0.75rem;
-  font-weight: 600;
+  font-size: var(--section-label-size);
+  font-weight: var(--section-label-weight);
   text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--color-text-muted);
+  letter-spacing: var(--section-label-spacing);
+  color: var(--section-label-color);
 }
 
 .quick-actions__buttons {
@@ -327,56 +466,4 @@
   gap: var(--space-sm);
 }
 
-/* --- Buttons --- */
-.btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--space-xs) var(--space-md);
-  border-radius: var(--radius-sm);
-  font-size: 0.875rem;
-  font-weight: 500;
-  text-decoration: none;
-  cursor: pointer;
-  border: 1px solid transparent;
-  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
-}
-
-.btn--primary {
-  background: var(--color-accent);
-  color: #fff;
-  border-color: var(--color-accent);
-}
-
-.btn--primary:hover {
-  background: var(--color-accent-hover);
-  border-color: var(--color-accent-hover);
-  color: #fff;
-  text-decoration: none;
-}
-
-.btn--secondary {
-  background: transparent;
-  color: var(--color-text);
-  border-color: var(--color-border);
-}
-
-.btn--secondary:hover {
-  background: var(--color-surface-hover);
-  text-decoration: none;
-}
-
-.btn--ghost {
-  background: transparent;
-  color: var(--color-text-dim);
-  border-color: transparent;
-}
-
-.btn--ghost:hover {
-  background: var(--color-surface-hover);
-}
-
-.btn--sm {
-  padding: 2px var(--space-sm);
-  font-size: 0.75rem;
-}
+/* .btn system — defined in layout.css */

package/dashboard/public/css/explorer.css

@@ -312,6 +312,23 @@
   font-size: 0.9rem;
 }
 
+.explorer-filter-select {
+  padding: var(--space-xs) var(--space-sm);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface);
+  color: var(--color-text);
+  font-size: 0.875rem;
+  font-family: var(--font-sans);
+  cursor: pointer;
+  min-width: 120px;
+}
+
+.explorer-filter-select:focus {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 1px;
+}
+
 .explorer-create-form {
   background: var(--color-surface-raised);
   border: 1px solid var(--color-border);
@@ -321,51 +338,15 @@
 }
 
 .explorer-section-title {
-  font-size: 0.85rem;
-  font-weight: 600;
-  color: var(--color-text-dim);
+  font-size: var(--section-label-size);
+  font-weight: var(--section-label-weight);
+  color: var(--section-label-color);
   text-transform: uppercase;
-  letter-spacing: 0.05em;
+  letter-spacing: var(--section-label-spacing);
   margin: var(--space-md) 0 var(--space-sm);
 }
 
-/* ---- Button system ---- */
-
-.btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: var(--space-xs) var(--space-sm);
-  border-radius: var(--radius-sm);
-  border: 1px solid transparent;
-  cursor: pointer;
-  font-size: 0.875rem;
-  font-weight: 500;
-  transition: all 0.15s;
-}
-
-.btn--primary {
-  background: var(--color-accent);
-  color: white;
-  border-color: var(--color-accent);
-}
-
-.btn--ghost {
-  background: none;
-  color: var(--color-text-dim);
-  border-color: var(--color-border);
-}
-
-.btn--sm {
-  padding: 2px var(--space-xs);
-  font-size: 0.8rem;
-}
-
-.btn--danger {
-  background: var(--color-error-bg);
-  color: var(--color-error);
-  border-color: var(--color-error);
-}
+/* .btn system — defined in layout.css */
 
 /* ---- Priority badge modifiers ---- */
 

package/dashboard/public/css/layout.css

@@ -42,6 +42,10 @@ a:hover {
   text-decoration: underline;
 }
 
+button, [role="button"], summary, label[for] {
+  cursor: pointer;
+}
+
 code, pre, kbd, samp {
   font-family: var(--font-mono);
   font-size: 0.875em;
@@ -160,6 +164,38 @@ body.sidebar-visible .main-content::before {
   letter-spacing: 0.02em;
 }
 
+/* --- Sidebar Brand Icon --- */
+.sidebar__brand {
+  flex-direction: row;
+  align-items: center;
+  gap: var(--space-sm);
+}
+
+.sidebar__brand-icon {
+  display: flex;
+  align-items: center;
+  color: var(--color-accent);
+  flex-shrink: 0;
+}
+
+.sidebar__brand-text {
+  display: flex;
+  flex-direction: column;
+}
+
+/* --- Sidebar Nav Icon --- */
+.sidebar__nav-icon {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  opacity: 0.7;
+}
+
+.sidebar__nav-link--active .sidebar__nav-icon,
+.sidebar__nav-link[aria-current="page"] .sidebar__nav-icon {
+  opacity: 1;
+}
+
 /* --- Sidebar Navigation --- */
 .sidebar__nav {
   list-style: none;
@@ -173,7 +209,9 @@ body.sidebar-visible .main-content::before {
 }
 
 .sidebar__nav-link {
-  display: block;
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
   padding: var(--space-sm) var(--space-lg);
   font-size: 0.875rem;
   font-weight: 500;
@@ -267,6 +305,71 @@ body.sidebar-visible .main-content::before {
   text-align: center;
 }
 
+/* --- Button System (single source of truth) --- */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: var(--space-xs) var(--space-md);
+  border-radius: var(--radius-sm);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  border: 1px solid transparent;
+  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
+  text-decoration: none;
+}
+
+.btn:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+}
+
+.btn--primary {
+  background: var(--color-accent);
+  color: #fff;
+  border-color: var(--color-accent);
+}
+
+.btn--primary:hover {
+  background: var(--color-accent-hover);
+  border-color: var(--color-accent-hover);
+  color: #fff;
+  text-decoration: none;
+}
+
+.btn--secondary {
+  background: transparent;
+  color: var(--color-text);
+  border-color: var(--color-border);
+}
+
+.btn--secondary:hover {
+  background: var(--color-surface-hover);
+  text-decoration: none;
+}
+
+.btn--ghost {
+  background: transparent;
+  color: var(--color-text-dim);
+  border-color: transparent;
+}
+
+.btn--ghost:hover {
+  background: var(--color-surface-hover);
+}
+
+.btn--sm {
+  padding: 2px var(--space-sm);
+  font-size: 0.75rem;
+}
+
+.btn--danger {
+  background: var(--color-error-bg);
+  color: var(--color-error);
+  border-color: var(--color-error);
+}
+
 /* --- Card Component --- */
 .card,
 article {
@@ -275,6 +378,12 @@ article {
   background: var(--card-bg);
   box-shadow: var(--card-shadow);
   margin-bottom: var(--space-lg);
+  transition: box-shadow var(--transition-fast);
+}
+
+.card:hover,
+article:hover {
+  box-shadow: var(--shadow-md);
 }
 
 .card__header,
@@ -291,6 +400,15 @@ article > header strong {
   font-weight: 600;
 }
 
+/* Reusable section label — same treatment as card headers */
+.section-label {
+  font-size: var(--section-label-size);
+  font-weight: var(--section-label-weight);
+  text-transform: uppercase;
+  letter-spacing: var(--section-label-spacing);
+  color: var(--section-label-color);
+}
+
 .card__body {
   padding: var(--card-padding) var(--space-lg);
 }

package/dashboard/public/css/tokens.css

@@ -69,6 +69,19 @@
   --badge-font-size-sm: 0.6875rem;
   --badge-font-size-base: 0.75rem;
   --badge-font-size-lg: 0.8125rem;
+
+  /* Stat card tokens */
+  --stat-card-padding: var(--space-md) var(--space-lg);
+  --stat-card-value-size: 2rem;
+  --stat-card-label-size: 0.6875rem;
+  --stat-card-sub-size: 0.8125rem;
+  --sidebar-icon-size: 16px;
+
+  /* Section label tokens */
+  --section-label-size: 0.6875rem;
+  --section-label-weight: 600;
+  --section-label-spacing: 0.08em;
+  --section-label-color: var(--color-text-muted);
 }
 
 /* --- Dark Mode (explicit [data-theme="dark"] attribute) --- */

package/dashboard/src/components/Layout.tsx

@@ -7,10 +7,30 @@ interface LayoutProps {
 }
 
 const navItems = [
-  { href: '/', label: 'Command Center', view: 'home' },
-  { href: '/explorer', label: 'Explorer', view: 'explorer' },
-  { href: '/timeline', label: 'Timeline', view: 'timeline' },
-  { href: '/settings', label: 'Settings', view: 'settings' },
+  {
+    href: '/',
+    label: 'Command Center',
+    view: 'home',
+    icon: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>',
+  },
+  {
+    href: '/explorer',
+    label: 'Explorer',
+    view: 'explorer',
+    icon: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>',
+  },
+  {
+    href: '/timeline',
+    label: 'Timeline',
+    view: 'timeline',
+    icon: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>',
+  },
+  {
+    href: '/settings',
+    label: 'Settings',
+    view: 'settings',
+    icon: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="21" x2="4" y2="14"/><line x1="4" y1="10" x2="4" y2="3"/><line x1="12" y1="21" x2="12" y2="12"/><line x1="12" y1="8" x2="12" y2="3"/><line x1="20" y1="21" x2="20" y2="16"/><line x1="20" y1="12" x2="20" y2="3"/><line x1="1" y1="14" x2="7" y2="14"/><line x1="9" y1="8" x2="15" y2="8"/><line x1="17" y1="16" x2="23" y2="16"/></svg>',
+  },
 ];
 
 export function Layout({ title, children, currentView }: LayoutProps) {
@@ -73,8 +93,13 @@ export function Layout({ title, children, currentView }: LayoutProps) {
 
         <nav class="sidebar" aria-label="Main navigation">
           <div class="sidebar__brand">
-            <span class="sidebar__brand-name">PBR</span>
-            <span class="sidebar__brand-subtitle">Dashboard</span>
+            <span class="sidebar__brand-icon" aria-hidden="true">
+              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
+            </span>
+            <div class="sidebar__brand-text">
+              <span class="sidebar__brand-name">PBR</span>
+              <span class="sidebar__brand-subtitle">Dashboard</span>
+            </div>
           </div>
 
           <ul class="sidebar__nav" role="list">
@@ -88,6 +113,7 @@ export function Layout({ title, children, currentView }: LayoutProps) {
                     class={`sidebar__nav-link${isActive ? ' sidebar__nav-link--active' : ''}`}
                     aria-current={isActive ? 'page' : undefined}
                   >
+                    <span class="sidebar__nav-icon" aria-hidden="true" dangerouslySetInnerHTML={{ __html: item.icon }} />
                     {item.label}
                   </a>
                 </li>

package/dashboard/src/components/explorer/tabs/PhasesTab.tsx

@@ -3,6 +3,9 @@ interface Phase {
   name: string;
   status: string;
   planCount?: number;
+  plansComplete?: number;
+  plansTotal?: number;
+  lastActivity?: string | null;
 }
 
 interface Plan {
@@ -74,8 +77,15 @@ function PhaseItem({ phase }: { phase: Phase }) {
         </span>
         <span class={statusBadgeClass(phase.status)}>{phase.status}</span>
         <span class="explorer-item__meta">
-          {phase.planCount != null ? `${phase.planCount} plan${phase.planCount !== 1 ? 's' : ''}` : ''}
+          {(phase.plansComplete != null && phase.plansTotal != null)
+            ? (phase.plansComplete === 0 && phase.plansTotal === 0
+              ? '—'
+              : `${phase.plansComplete}/${phase.plansTotal} plans`)
+            : (phase.planCount != null
+              ? `${phase.planCount} plan${phase.planCount !== 1 ? 's' : ''}`
+              : '')}
         </span>
+        <span class="explorer-item__meta">{phase.lastActivity || '—'}</span>
       </div>
 
       {/* Body is only shown when open. The inner div fires hx-get on load (once the body is visible). */}

package/dashboard/src/components/explorer/tabs/TodosTab.tsx

@@ -19,7 +19,7 @@ interface TodoListFragmentProps {
 
 export function TodosTab({ todos }: TodosTabProps) {
   return (
-    <div x-data="{ showCreate: false, showDone: false, search: '' }">
+    <div x-data="{ showCreate: false, showDone: false, search: '', statusFilter: '', priorityFilter: '', applyFilters() {} }">
       {/* Search + filters row */}
       <div class="explorer-toolbar">
         <input
@@ -29,6 +29,22 @@ export function TodosTab({ todos }: TodosTabProps) {
           class="explorer-search"
           aria-label="Filter todos by title"
         />
+        <select class="explorer-filter-select" aria-label="Filter by status"
+          x-model="statusFilter"
+          x-on:change="applyFilters()">
+          <option value="">All statuses</option>
+          <option value="pending">Pending</option>
+          <option value="in-progress">In Progress</option>
+          <option value="done">Done</option>
+        </select>
+        <select class="explorer-filter-select" aria-label="Filter by priority"
+          x-model="priorityFilter"
+          x-on:change="applyFilters()">
+          <option value="">All priorities</option>
+          <option value="high">High</option>
+          <option value="medium">Medium</option>
+          <option value="low">Low</option>
+        </select>
         <button x-on:click="showCreate = !showCreate" class="btn btn--primary btn--sm">
           + New Todo
         </button>
@@ -76,7 +92,7 @@ export function TodoListFragment({ todos }: TodoListFragmentProps) {
         <li
           class={`todo-card todo-card--${todo.priority}`}
           key={todo.id}
-          x-show={`!search || '${todo.title.toLowerCase()}'.includes(search.toLowerCase())`}
+          x-show={`(!search || '${todo.title.toLowerCase()}'.includes(search.toLowerCase())) && (!priorityFilter || priorityFilter === '${todo.priority}') && (!statusFilter || statusFilter === '${todo.status || ''}')`}
         >
           <div class="todo-card__main">
             <span class={`explorer-badge explorer-badge--${todo.priority}`}>{todo.priority}</span>

package/dashboard/src/components/partials/AttentionPanel.tsx

@@ -41,7 +41,13 @@ export const AttentionPanel: FC<AttentionPanelProps> = ({
           ))}
         </ul>
       ) : (
-        <p class="attention-panel__clear">All clear — nothing needs attention.</p>
+        <div class="empty-state">
+          <span class="empty-state__icon" aria-hidden="true">
+            <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
+          </span>
+          <p class="empty-state__heading">All clear</p>
+          <p class="empty-state__body">No blockers or attention items right now.</p>
+        </div>
       )}
     </div>
   );