kanban-system 1.0.0

package/ui/styles/progress.css

@@ -0,0 +1,315 @@
+/* ============================================================
+   kanban-system — live progress indicators, event log, and toast.
+   Depends on: tokens.css (import that first).
+   ============================================================ */
+
+/* ── Connection Status Bar ──────────────────────────────────── */
+.ws-status {
+  display: flex;
+  align-items: center;
+  gap: var(--token-space-2);
+  padding: 3px var(--token-space-3);
+  border-radius: var(--token-radius-full);
+  font-size: var(--token-size-sm);
+  font-weight: var(--token-weight-medium);
+  background: var(--s2);
+  border: 1px solid var(--b1);
+}
+.ws-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: var(--token-radius-full);
+  flex-shrink: 0;
+}
+.ws-status[data-state="connected"]    .ws-dot { background: var(--gn); }
+.ws-status[data-state="connecting"]   .ws-dot {
+  background: var(--am);
+  animation: ws-pulse var(--token-duration-pulse) var(--token-ease-default) infinite;
+}
+.ws-status[data-state="disconnected"] .ws-dot { background: var(--rd); }
+.ws-status[data-state="idle"]         .ws-dot { background: var(--st-idle-dot); }
+
+@keyframes ws-pulse {
+  0%, 100% { opacity: 1; }
+  50%       { opacity: 0.3; }
+}
+
+.ws-label {
+  color: var(--t2);
+  font-family: var(--token-font-mono);
+  font-size: var(--token-size-xs);
+}
+.ws-status[data-state="connected"]  .ws-label { color: var(--gn); }
+.ws-status[data-state="connecting"] .ws-label { color: var(--am); }
+
+/* ── Run Progress Header ────────────────────────────────────── */
+.run-header {
+  display: flex;
+  align-items: center;
+  gap: var(--token-space-4);
+  padding: var(--token-space-3) var(--token-space-6);
+  background: var(--s1);
+  border-bottom: 1px solid var(--b1);
+}
+
+.run-id {
+  font-family: var(--token-font-mono);
+  font-size: var(--token-size-sm);
+  color: var(--t3);
+}
+
+.run-progress {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: var(--token-space-3);
+}
+
+.progress-bar-wrap {
+  flex: 1;
+  height: 4px;
+  background: var(--b1);
+  border-radius: var(--token-radius-full);
+  overflow: hidden;
+}
+
+.progress-bar {
+  height: 100%;
+  width: 0%;
+  background: var(--ac);
+  border-radius: var(--token-radius-full);
+  transition: width var(--token-duration-normal) var(--token-ease-out);
+}
+
+.progress-pct {
+  font-family: var(--token-font-mono);
+  font-size: var(--token-size-xs);
+  color: var(--t3);
+  min-width: 32px;
+  text-align: right;
+}
+
+/* ── Event Log — <details> collapsible ──────────────────────── */
+.event-log {
+  border-top: 1px solid var(--b1);
+  background: var(--s1);
+}
+
+.event-log > summary {
+  display: flex;
+  align-items: center;
+  gap: var(--token-space-2);
+  padding: var(--token-space-2) var(--token-space-6);
+  cursor: pointer;
+  font-size: var(--token-size-sm);
+  font-weight: var(--token-weight-medium);
+  color: var(--t3);
+  user-select: none;
+  list-style: none;
+}
+.event-log > summary::-webkit-details-marker { display: none; }
+.event-log > summary::before {
+  content: '▶';
+  font-size: 9px;
+  transition: transform var(--token-duration-fast);
+}
+.event-log[open] > summary::before { transform: rotate(90deg); }
+.event-log > summary:hover { color: var(--t1); }
+
+.event-log-title {
+  font-size: var(--token-size-sm);
+  color: var(--t3);
+}
+.event-log-count {
+  font-family: var(--token-font-mono);
+  font-size: var(--token-size-xs);
+  background: var(--s2);
+  color: var(--t4);
+  padding: 1px 5px;
+  border-radius: var(--token-radius-full);
+  margin-left: auto;
+}
+
+/* Log lines container */
+.event-log-lines {
+  max-height: 260px;
+  overflow-y: auto;
+  padding: var(--token-space-2) var(--token-space-6);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  scroll-behavior: smooth;
+}
+
+.event-log-lines::-webkit-scrollbar { width: 4px; }
+.event-log-lines::-webkit-scrollbar-thumb {
+  background: var(--b2);
+  border-radius: var(--token-radius-full);
+}
+
+/* Individual log line — format: [HH:MM:SS] event_type payload_summary */
+.log-line {
+  font-family: var(--token-font-mono);
+  font-size: var(--token-size-xs);    /* 10px */
+  line-height: var(--token-lh-normal);
+  white-space: pre-wrap;
+  word-break: break-word;
+  padding: 1px 0;
+  display: flex;
+  gap: var(--token-space-2);
+}
+
+.log-time {
+  color: var(--t4);
+  flex-shrink: 0;
+}
+
+.log-event  { flex-shrink: 0; }
+.log-payload { color: var(--t3); overflow: hidden; text-overflow: ellipsis; }
+
+/* Log line color coding per pattern spec */
+.log-line[data-type="error"]          .log-event,
+.log-line[data-type="blueprint.error"]  .log-event,
+.log-line[data-type="component.error"]  .log-event {
+  color: #f87171;  /* rose-400 */
+}
+.log-line[data-type="run.completed"]         .log-event,
+.log-line[data-type="component.validated"]   .log-event,
+.log-line[data-type="blueprint.completed"]   .log-event,
+.log-line[data-type="chapter.regen_completed"] .log-event {
+  color: #34d399;  /* emerald-400 */
+}
+.log-line[data-type="component.regenerating"] .log-event,
+.log-line[data-type="chapter.regen_started"]  .log-event,
+.log-line[data-type="component.flagged"]      .log-event {
+  color: #fbbf24;  /* amber-400 */
+}
+/* zinc — default for all others */
+.log-line .log-event { color: var(--t3); }
+
+/* ── Reconnect Notice ───────────────────────────────────────── */
+.reconnect-notice {
+  display: none;
+  align-items: center;
+  gap: var(--token-space-2);
+  padding: var(--token-space-2) var(--token-space-6);
+  background: color-mix(in srgb, var(--am) 12%, var(--s1));
+  border-bottom: 1px solid color-mix(in srgb, var(--am) 30%, transparent);
+  font-size: var(--token-size-sm);
+  color: var(--am);
+}
+.reconnect-notice.visible { display: flex; }
+.reconnect-spinner {
+  width: 12px;
+  height: 12px;
+  border: 2px solid var(--am);
+  border-top-color: transparent;
+  border-radius: var(--token-radius-full);
+  animation: spin var(--token-duration-slow) linear infinite;
+}
+@keyframes spin { to { transform: rotate(360deg); } }
+
+/* ── Toast Notifications ────────────────────────────────────── */
+.toast-container {
+  position: fixed;
+  bottom: var(--token-space-6);
+  right: var(--token-space-6);
+  display: flex;
+  flex-direction: column;
+  gap: var(--token-space-2);
+  z-index: var(--token-z-toast);
+  pointer-events: none;
+}
+
+.toast {
+  display: flex;
+  align-items: center;
+  gap: var(--token-space-2);
+  padding: var(--token-space-2) var(--token-space-4);
+  border-radius: var(--r);
+  font-size: var(--token-size-md);
+  font-weight: var(--token-weight-medium);
+  box-shadow: var(--shadow-lg);
+  pointer-events: auto;
+  animation: toast-in var(--token-duration-normal) var(--token-ease-out);
+}
+.toast.removing {
+  animation: toast-out var(--token-duration-fast) var(--token-ease-in) forwards;
+}
+
+.toast-ok   { background: var(--token-toast-ok-bg);   color: var(--token-toast-ok-fg); }
+.toast-err  { background: var(--token-toast-err-bg);  color: var(--token-toast-err-fg); }
+.toast-info { background: var(--token-toast-info-bg); color: var(--token-toast-info-fg); }
+
+@keyframes toast-in {
+  from { opacity: 0; transform: translateY(8px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+@keyframes toast-out {
+  from { opacity: 1; transform: translateY(0); }
+  to   { opacity: 0; transform: translateY(8px); }
+}
+
+/* ── Blueprint loading state ────────────────────────────────── */
+.blueprint-loading {
+  display: flex;
+  align-items: center;
+  gap: var(--token-space-3);
+  padding: var(--token-space-4) var(--token-space-6);
+  color: var(--t3);
+  font-size: var(--token-size-md);
+}
+.blueprint-loading .spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--b2);
+  border-top-color: var(--ac);
+  border-radius: var(--token-radius-full);
+  animation: spin var(--token-duration-slow) linear infinite;
+}
+
+/* ── Error Banner ───────────────────────────────────────────── */
+.err-banner {
+  display: none;
+  align-items: center;
+  gap: var(--token-space-3);
+  padding: var(--token-space-3) var(--token-space-6);
+  background: color-mix(in srgb, var(--rd) 12%, var(--s1));
+  border-bottom: 2px solid color-mix(in srgb, var(--rd) 40%, transparent);
+  color: var(--rd);
+  font-size: var(--token-size-md);
+  z-index: var(--token-z-err-banner);
+}
+.err-banner.visible { display: flex; }
+.err-banner-close {
+  margin-left: auto;
+  background: none;
+  border: none;
+  color: var(--rd);
+  cursor: pointer;
+  font-size: var(--token-size-lg);
+  line-height: 1;
+  padding: 2px var(--token-space-1);
+}
+
+/* ── Anchor highlight (flag-anchor-system) ──────────────────── */
+.anchor-highlight {
+  background: var(--token-anchor-bg);
+  border: 1px solid var(--token-anchor-border);
+  border-radius: var(--token-radius-sm);
+  padding: 0 3px;
+  position: relative;
+}
+.anchor-highlight::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: var(--token-anchor-pulse);
+  opacity: 0;
+  animation: anchor-pulse var(--token-duration-pulse) var(--token-ease-default) infinite;
+}
+@keyframes anchor-pulse {
+  0%, 100% { opacity: 0; }
+  50%       { opacity: 0.4; }
+}

package/ui/styles/tokens.css

@@ -0,0 +1,291 @@
+/* ============================================================
+   kanban-system — design tokens (CSS custom properties)
+   Import this first, then kanban.css and progress.css.
+   Three themes ship: dark (default), navy, light. Override --token-* freely.
+   ============================================================ */
+
+/* ── Raw Design Tokens ─────────────────────────────────────── */
+:root {
+  /* Color / Neutral */
+  --token-neutral-50:  #fafafa;
+  --token-neutral-100: #f4f4f5;
+  --token-neutral-200: #e4e4e7;
+  --token-neutral-300: #d4d4d8;
+  --token-neutral-400: #a1a1aa;
+  --token-neutral-500: #71717a;
+  --token-neutral-600: #52525b;
+  --token-neutral-700: #3f3f46;
+  --token-neutral-800: #27272a;
+  --token-neutral-900: #18181b;
+
+  /* Color / Brand */
+  --token-brand-primary:       #18181b;
+  --token-brand-primary-hover: #27272a;
+  --token-brand-accent:        #059669;
+  --token-brand-accent-hover:  #047857;
+
+  /* Color / Status */
+  --token-status-generating-bg:  #dbeafe;
+  --token-status-generating-fg:  #1e40af;
+  --token-status-generating-dot: #3b82f6;
+
+  --token-status-validating-bg:  #fef3c7;
+  --token-status-validating-fg:  #92400e;
+  --token-status-validating-dot: #f59e0b;
+
+  --token-status-passed-bg:  #d1fae5;
+  --token-status-passed-fg:  #065f46;
+  --token-status-passed-dot: #10b981;
+
+  --token-status-flagged-bg:  #fee2e2;
+  --token-status-flagged-fg:  #991b1b;
+  --token-status-flagged-dot: #ef4444;
+
+  --token-status-regenerating-bg:  #fef3c7;
+  --token-status-regenerating-fg:  #92400e;
+  --token-status-regenerating-dot: #f59e0b;
+
+  --token-status-error-bg:  #fecaca;
+  --token-status-error-fg:  #7f1d1d;
+  --token-status-error-dot: #dc2626;
+
+  --token-status-idle-bg:  #e4e4e7;
+  --token-status-idle-fg:  #374151;
+  --token-status-idle-dot: #a1a1aa;
+
+  /* Color / Flag */
+  --token-flag-fact-bg:        #fee2e2;
+  --token-flag-fact-fg:        #991b1b;
+  --token-flag-schema-bg:      #fef3c7;
+  --token-flag-schema-fg:      #92400e;
+  --token-flag-borderline-bg:  #e0e7ff;
+  --token-flag-borderline-fg:  #3730a3;
+  --token-flag-sensitive-bg:   #fce7f3;
+  --token-flag-sensitive-fg:   #9d174d;
+  --token-flag-consistency-bg: #d1fae5;
+  --token-flag-consistency-fg: #065f46;
+
+  /* Color / Anchor */
+  --token-anchor-bg:     #fef3c7;
+  --token-anchor-border: #f59e0b;
+  --token-anchor-marker: #f59e0b;
+  --token-anchor-pulse:  #fde68a;
+
+  /* Color / Toast */
+  --token-toast-ok-bg:   #059669;
+  --token-toast-ok-fg:   #ffffff;
+  --token-toast-err-bg:  #dc2626;
+  --token-toast-err-fg:  #ffffff;
+  --token-toast-info-bg: #27272a;
+  --token-toast-info-fg: #ffffff;
+
+  /* Color / Severity */
+  --token-severity-high:   #dc2626;
+  --token-severity-mid:    #d97706;
+  --token-severity-low:    #71717a;
+
+  /* Typography */
+  --token-font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+  --token-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
+
+  --token-size-xs:   10px;
+  --token-size-sm:   11px;
+  --token-size-base: 12px;
+  --token-size-md:   13px;
+  --token-size-lg:   14px;
+  --token-size-xl:   16px;
+  --token-size-2xl:  20px;
+  --token-size-3xl:  24px;
+
+  --token-lh-tight:   1.25;
+  --token-lh-normal:  1.5;
+  --token-lh-relaxed: 1.7;
+
+  --token-ls-korean: -0.01em;
+
+  --token-weight-regular:  400;
+  --token-weight-medium:   500;
+  --token-weight-semibold: 600;
+  --token-weight-bold:     700;
+
+  /* Spacing */
+  --token-space-0:  0;
+  --token-space-1:  4px;
+  --token-space-2:  8px;
+  --token-space-3:  12px;
+  --token-space-4:  16px;
+  --token-space-5:  20px;
+  --token-space-6:  24px;
+  --token-space-8:  32px;
+  --token-space-10: 40px;
+  --token-space-12: 48px;
+  --token-space-16: 64px;
+
+  /* Radius */
+  --token-radius-sm:   4px;
+  --token-radius-md:   6px;
+  --token-radius-lg:   8px;
+  --token-radius-xl:   10px;
+  --token-radius-full: 9999px;
+
+  /* Shadow */
+  --token-shadow-none: none;
+  --token-shadow-sm:   0 1px 2px rgba(0,0,0,0.05);
+  --token-shadow-md:   0 2px 6px rgba(0,0,0,0.08);
+  --token-shadow-lg:   0 8px 24px rgba(0,0,0,0.12);
+
+  /* Motion */
+  --token-duration-instant: 0ms;
+  --token-duration-fast:    150ms;
+  --token-duration-normal:  250ms;
+  --token-duration-slow:    400ms;
+  --token-duration-pulse:   2000ms;
+
+  --token-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
+  --token-ease-in:      cubic-bezier(0.4, 0, 1, 1);
+  --token-ease-out:     cubic-bezier(0, 0, 0.2, 1);
+
+  /* Layout */
+  --token-sidebar-default: 240px;
+  --token-sidebar-min:     200px;
+  --token-sidebar-max:     400px;
+  --token-topbar-height:   56px;
+  --token-content-max:     1280px;
+
+  /* Z-index */
+  --token-z-base:       0;
+  --token-z-sticky:     10;
+  --token-z-divider:    50;
+  --token-z-overlay:    100;
+  --token-z-modal:      200;
+  --token-z-toast:      300;
+  --token-z-err-banner: 400;
+}
+
+/* ── Semantic Aliases — Dark Theme (default) ───────────────── */
+:root,
+[data-theme="dark"] {
+  --bg:      var(--token-neutral-900);   /* #18181b */
+  --s1:      #1f1f23;                    /* between 900 and 800 */
+  --s2:      var(--token-neutral-800);   /* #27272a */
+  --s3:      var(--token-neutral-700);   /* #3f3f46 */
+  --b1:      var(--token-neutral-700);   /* #3f3f46 */
+  --b2:      var(--token-neutral-600);   /* #52525b */
+  --t1:      var(--token-neutral-50);    /* #fafafa */
+  --t2:      var(--token-neutral-400);   /* #a1a1aa */
+  --t3:      var(--token-neutral-500);   /* #71717a */
+  --t4:      var(--token-neutral-600);   /* #52525b */
+  --ac:      var(--token-brand-accent);        /* #059669 */
+  --ac2:     var(--token-brand-accent-hover);  /* #047857 */
+  --gn:      var(--token-status-passed-dot);   /* #10b981 */
+  --rd:      var(--token-status-flagged-dot);  /* #ef4444 */
+  --am:      var(--token-status-validating-dot); /* #f59e0b */
+  --vl:      #8b5cf6;                    /* cross-val / violet */
+  --r:       var(--token-radius-md);     /* 6px */
+  --r-sm:    var(--token-radius-sm);     /* 4px */
+  --r-lg:    var(--token-radius-lg);     /* 8px */
+  --card-bg:    var(--token-neutral-800); /* #27272a */
+  --card-hover: var(--token-neutral-700); /* #3f3f46 */
+  --shadow-sm:  0 1px 2px rgba(0,0,0,0.3);
+  --shadow-md:  0 2px 6px rgba(0,0,0,0.4);
+  --shadow-lg:  0 8px 24px rgba(0,0,0,0.5);
+
+  /* Status — dark surface adaptations */
+  --st-gen-bg:  #1e3a5f;
+  --st-gen-fg:  #93c5fd;
+  --st-gen-dot: var(--token-status-generating-dot);
+  --st-val-bg:  #3f2f0a;
+  --st-val-fg:  #fbbf24;
+  --st-val-dot: var(--token-status-validating-dot);
+  --st-pass-bg: #0a3d2e;
+  --st-pass-fg: #6ee7b7;
+  --st-pass-dot: var(--token-status-passed-dot);
+  --st-flag-bg: #3f1212;
+  --st-flag-fg: #fca5a5;
+  --st-flag-dot: var(--token-status-flagged-dot);
+  --st-idle-bg:  #27272a;
+  --st-idle-fg:  #a1a1aa;
+  --st-idle-dot: var(--token-status-idle-dot);
+}
+
+/* ── Navy Theme ────────────────────────────────────────────── */
+[data-theme="navy"] {
+  --bg:  #050A12;
+  --s1:  #0B1220;
+  --s2:  #101828;
+  --s3:  #162035;
+  --b1:  #1E2D45;
+  --b2:  #2A3F5F;
+  --t1:  #DDE5F0;
+  --t2:  #8899B0;
+  --t3:  #607088;
+  --t4:  #455570;
+  --ac:  #1A6FEF;
+  --ac2: #1558C0;
+  --gn:  #22C55E;
+  --rd:  #EF4444;
+  --am:  #C8A24A;
+  --vl:  #8B5CF6;
+  --card-bg:    #0F1B30;
+  --card-hover: #142440;
+  --shadow-sm:  0 1px 2px rgba(0,0,0,0.4);
+  --shadow-md:  0 2px 6px rgba(0,0,0,0.5);
+  --shadow-lg:  0 8px 24px rgba(0,0,0,0.6);
+
+  --st-gen-bg:  #0c1f3f;
+  --st-gen-fg:  #60a5fa;
+  --st-gen-dot: #3b82f6;
+  --st-val-bg:  #2a1f05;
+  --st-val-fg:  #fbbf24;
+  --st-val-dot: #f59e0b;
+  --st-pass-bg: #062a1e;
+  --st-pass-fg: #34d399;
+  --st-pass-dot:#10b981;
+  --st-flag-bg: #2a0808;
+  --st-flag-fg: #fca5a5;
+  --st-flag-dot:#ef4444;
+  --st-idle-bg: #111828;
+  --st-idle-fg: #8899B0;
+  --st-idle-dot:#455570;
+}
+
+/* ── Light Theme ───────────────────────────────────────────── */
+[data-theme="light"] {
+  --bg:  var(--token-neutral-50);    /* #fafafa */
+  --s1:  #ffffff;
+  --s2:  var(--token-neutral-100);   /* #f4f4f5 */
+  --s3:  var(--token-neutral-200);   /* #e4e4e7 */
+  --b1:  var(--token-neutral-200);   /* #e4e4e7 */
+  --b2:  var(--token-neutral-300);   /* #d4d4d8 */
+  --t1:  var(--token-neutral-900);   /* #18181b */
+  --t2:  var(--token-neutral-600);   /* #52525b */
+  --t3:  var(--token-neutral-500);   /* #71717a */
+  --t4:  var(--token-neutral-400);   /* #a1a1aa */
+  --ac:  var(--token-brand-accent);        /* #059669 */
+  --ac2: var(--token-brand-accent-hover);  /* #047857 */
+  --gn:  #16A34A;
+  --rd:  #DC2626;
+  --am:  #D97706;
+  --vl:  #7C3AED;
+  --card-bg:    #FFFFFF;
+  --card-hover: #F0F1F3;
+  --shadow-sm:  var(--token-shadow-sm);
+  --shadow-md:  var(--token-shadow-md);
+  --shadow-lg:  var(--token-shadow-lg);
+
+  --st-gen-bg:  var(--token-status-generating-bg);
+  --st-gen-fg:  var(--token-status-generating-fg);
+  --st-gen-dot: var(--token-status-generating-dot);
+  --st-val-bg:  var(--token-status-validating-bg);
+  --st-val-fg:  var(--token-status-validating-fg);
+  --st-val-dot: var(--token-status-validating-dot);
+  --st-pass-bg: var(--token-status-passed-bg);
+  --st-pass-fg: var(--token-status-passed-fg);
+  --st-pass-dot:var(--token-status-passed-dot);
+  --st-flag-bg: var(--token-status-flagged-bg);
+  --st-flag-fg: var(--token-status-flagged-fg);
+  --st-flag-dot:var(--token-status-flagged-dot);
+  --st-idle-bg: var(--token-status-idle-bg);
+  --st-idle-fg: var(--token-status-idle-fg);
+  --st-idle-dot:var(--token-status-idle-dot);
+}