@sienklogic/plan-build-run 2.33.1 → 2.37.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 ---- */
 
@@ -418,6 +399,54 @@
   gap: var(--space-md);
 }
 
+/* ---- Todo cards ---- */
+
+.todo-card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+  background: var(--color-surface-raised);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  border-left-width: 4px;
+  padding: var(--space-sm) var(--space-md);
+  overflow: hidden;
+}
+
+.todo-card--high {
+  border-left-color: var(--color-error, #ef4444);
+}
+
+.todo-card--medium {
+  border-left-color: var(--color-warning, #f59e0b);
+}
+
+.todo-card--low {
+  border-left-color: var(--color-border);
+}
+
+.todo-card__main {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+}
+
+.todo-card__main .explorer-item__title {
+  flex: 1;
+}
+
+.todo-card__meta {
+  display: flex;
+  gap: var(--space-md);
+  font-size: 0.8rem;
+  color: var(--color-text-dim);
+  padding-left: calc(var(--space-sm) + 60px);
+}
+
+.todo-card__meta:empty {
+  display: none;
+}
+
 /* ---- Requirements traceability table ---- */
 
 .explorer-req-section {

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;
@@ -103,13 +107,39 @@ ul, ol {
   z-index: 10;
 }
 
+.sidebar__toggle {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  top: var(--space-sm);
+  left: var(--space-sm);
+  z-index: 20;
+  width: 2.5rem;
+  height: 2.5rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface-raised);
+  color: var(--color-text);
+  font-size: 1.25rem;
+  cursor: pointer;
+}
+
+body.sidebar-visible .main-content::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.4);
+  z-index: 5;
+}
+
 .main-content {
   margin-left: var(--size-sidebar);
   flex: 1;
   padding: var(--space-lg) var(--space-xl);
   min-height: 100vh;
   background: var(--color-surface);
-  max-width: 100%;
+  max-width: 1400px;
 }
 
 /* --- Sidebar Brand --- */
@@ -134,6 +164,38 @@ ul, ol {
   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;
@@ -147,7 +209,9 @@ ul, ol {
 }
 
 .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;
@@ -241,6 +305,71 @@ ul, ol {
   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 {
@@ -249,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,
@@ -265,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);
 }
@@ -843,6 +987,23 @@ details li {
     min-width: 100px;
     font-size: 0.75rem;
   }
+
+  .sidebar {
+    transform: translateX(-100%);
+    transition: transform 0.2s ease;
+  }
+
+  .sidebar--open {
+    transform: translateX(0);
+  }
+
+  .sidebar__toggle {
+    display: flex;
+  }
+
+  .main-content {
+    margin-left: 0;
+  }
 }
 
 @media (max-width: 480px) {