cli-jaw 1.5.0 → 1.6.0

package/public/css/diagram.css

@@ -0,0 +1,348 @@
+/* public/css/diagram.css — Diagram visualization design system */
+
+/* ── Diagram Containers ── */
+.diagram-container {
+  position: relative;
+  margin: 1rem 0;
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+
+.diagram-svg {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  padding: var(--space-4);
+}
+
+.diagram-svg svg {
+  display: block;
+  width: 100%;
+  height: auto;
+  max-width: 680px;
+}
+
+.diagram-widget {
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+
+.diagram-widget iframe {
+  display: block;
+  width: 100%;
+  min-height: 60px;
+  border: none;
+}
+
+/* ── Loading & Error ── */
+.diagram-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 120px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+}
+
+.diagram-spinner {
+  width: 24px;
+  height: 24px;
+  border: 2px solid var(--border);
+  border-top-color: var(--accent);
+  border-radius: 50%;
+  animation: diagram-spin 0.8s linear infinite;
+}
+
+@keyframes diagram-spin {
+  to { transform: rotate(360deg); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .diagram-spinner { animation: none; }
+}
+
+.diagram-error {
+  padding: var(--space-4);
+  color: var(--text-dim);
+  font-size: 14px;
+  text-align: center;
+}
+
+.diagram-widget-pending {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 120px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+}
+
+/* ── Zoom Button ── */
+.diagram-zoom-btn {
+  position: absolute;
+  top: var(--space-2);
+  right: var(--space-2);
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text-dim);
+  font-size: 16px;
+  cursor: pointer;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--duration-fast);
+  z-index: 2;
+}
+
+.diagram-container:hover .diagram-zoom-btn,
+.diagram-container:focus-within .diagram-zoom-btn {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.diagram-zoom-btn:hover {
+  background: var(--bg);
+  color: var(--text);
+}
+
+/* ── Action Buttons (Copy / Save) ── */
+.diagram-copy-btn,
+.diagram-save-btn {
+  position: absolute;
+  top: var(--space-2);
+  right: var(--space-2);
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text-dim);
+  cursor: pointer;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--duration-fast), color var(--duration-fast);
+  z-index: 2;
+}
+
+/* Widget: copy rightmost, save left of copy */
+.diagram-widget .diagram-save-btn { right: calc(var(--space-2) + 36px); }
+
+/* SVG: zoom rightmost, copy middle, save leftmost */
+.diagram-svg .diagram-copy-btn { right: calc(var(--space-2) + 36px); }
+.diagram-svg .diagram-save-btn { right: calc(var(--space-2) + 72px); }
+
+.diagram-container:hover .diagram-copy-btn,
+.diagram-container:hover .diagram-save-btn,
+.diagram-container:focus-within .diagram-copy-btn,
+.diagram-container:focus-within .diagram-save-btn {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.diagram-copy-btn:hover,
+.diagram-save-btn:hover {
+  background: var(--bg);
+  color: var(--text);
+}
+
+.diagram-copy-btn.copied,
+.diagram-save-btn.copied {
+  color: var(--success);
+}
+
+/* ── Zoom Overlay ── */
+.diagram-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.7);
+  backdrop-filter: blur(4px);
+}
+
+.diagram-overlay-content {
+  min-width: min(680px, 90vw);
+  max-width: 95vw;
+  max-height: 90vh;
+  overflow: auto;
+  background: var(--surface);
+  border-radius: var(--radius-lg);
+  padding: var(--space-6);
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+}
+
+.diagram-overlay-content svg {
+  display: block;
+  width: 100%;
+  height: auto;
+  max-width: 1200px;
+}
+
+.diagram-overlay-close {
+  position: absolute;
+  top: var(--space-4);
+  right: var(--space-4);
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 50%;
+  color: var(--text);
+  font-size: 20px;
+  cursor: pointer;
+}
+
+.diagram-overlay-close:hover {
+  background: var(--bg);
+}
+
+/* ═══════════════════════════════════════════
+   COLOR RAMPS — 9 semantic colors
+   Dark = default (:root), Light = [data-theme="light"]
+   Each ramp: fill (background), stroke (border), text (label)
+   ═══════════════════════════════════════════ */
+
+/* ── Blue (Primary) ── */
+.c-blue-fill   { fill: #1e3a5f; }
+.c-blue-stroke { stroke: #3b82f6; fill: none; }
+.c-blue-text   { fill: #93c5fd; }
+.c-blue-bg     { fill: #1e3a5f; stroke: #3b82f6; stroke-width: 1; }
+
+/* ── Purple ── */
+.c-purple-fill   { fill: #3b1f5e; }
+.c-purple-stroke { stroke: #8b5cf6; fill: none; }
+.c-purple-text   { fill: #c4b5fd; }
+.c-purple-bg     { fill: #3b1f5e; stroke: #8b5cf6; stroke-width: 1; }
+
+/* ── Green ── */
+.c-green-fill   { fill: #14532d; }
+.c-green-stroke { stroke: #22c55e; fill: none; }
+.c-green-text   { fill: #86efac; }
+.c-green-bg     { fill: #14532d; stroke: #22c55e; stroke-width: 1; }
+
+/* ── Amber ── */
+.c-amber-fill   { fill: #451a03; }
+.c-amber-stroke { stroke: #f59e0b; fill: none; }
+.c-amber-text   { fill: #fcd34d; }
+.c-amber-bg     { fill: #451a03; stroke: #f59e0b; stroke-width: 1; }
+
+/* ── Red ── */
+.c-red-fill   { fill: #450a0a; }
+.c-red-stroke { stroke: #ef4444; fill: none; }
+.c-red-text   { fill: #fca5a5; }
+.c-red-bg     { fill: #450a0a; stroke: #ef4444; stroke-width: 1; }
+
+/* ── Cyan ── */
+.c-cyan-fill   { fill: #083344; }
+.c-cyan-stroke { stroke: #06b6d4; fill: none; }
+.c-cyan-text   { fill: #67e8f9; }
+.c-cyan-bg     { fill: #083344; stroke: #06b6d4; stroke-width: 1; }
+
+/* ── Pink ── */
+.c-pink-fill   { fill: #500724; }
+.c-pink-stroke { stroke: #ec4899; fill: none; }
+.c-pink-text   { fill: #f9a8d4; }
+.c-pink-bg     { fill: #500724; stroke: #ec4899; stroke-width: 1; }
+
+/* ── Slate (Neutral) ── */
+.c-slate-fill   { fill: #1e293b; }
+.c-slate-stroke { stroke: #64748b; fill: none; }
+.c-slate-text   { fill: #94a3b8; }
+.c-slate-bg     { fill: #1e293b; stroke: #64748b; stroke-width: 1; }
+
+/* ── Orange ── */
+.c-orange-fill   { fill: #431407; }
+.c-orange-stroke { stroke: #f97316; fill: none; }
+.c-orange-text   { fill: #fdba74; }
+.c-orange-bg     { fill: #431407; stroke: #f97316; stroke-width: 1; }
+
+/* ── SVG Primitives (scoped to .diagram-svg to avoid Mermaid class collision) ── */
+.diagram-svg .node {
+  rx: 8;
+  ry: 8;
+}
+
+.diagram-svg .connector {
+  stroke: var(--border);
+  stroke-width: 1.5;
+  fill: none;
+}
+
+.diagram-svg .label {
+  font-size: 14px;
+  text-anchor: middle;
+  dominant-baseline: central;
+}
+
+.diagram-svg .diagram-title {
+  font-size: 16px;
+  font-weight: 600;
+  text-anchor: middle;
+}
+
+/* ═══════════════════════════════════════════
+   LIGHT MODE OVERRIDES
+   ═══════════════════════════════════════════ */
+
+[data-theme="light"] .c-blue-fill   { fill: #dbeafe; }
+[data-theme="light"] .c-blue-stroke { stroke: #2563eb; }
+[data-theme="light"] .c-blue-text   { fill: #1e40af; }
+[data-theme="light"] .c-blue-bg     { fill: #dbeafe; stroke: #2563eb; }
+
+[data-theme="light"] .c-purple-fill   { fill: #ede9fe; }
+[data-theme="light"] .c-purple-stroke { stroke: #7c3aed; }
+[data-theme="light"] .c-purple-text   { fill: #5b21b6; }
+[data-theme="light"] .c-purple-bg     { fill: #ede9fe; stroke: #7c3aed; }
+
+[data-theme="light"] .c-green-fill   { fill: #dcfce7; }
+[data-theme="light"] .c-green-stroke { stroke: #16a34a; }
+[data-theme="light"] .c-green-text   { fill: #15803d; }
+[data-theme="light"] .c-green-bg     { fill: #dcfce7; stroke: #16a34a; }
+
+[data-theme="light"] .c-amber-fill   { fill: #fef3c7; }
+[data-theme="light"] .c-amber-stroke { stroke: #d97706; }
+[data-theme="light"] .c-amber-text   { fill: #92400e; }
+[data-theme="light"] .c-amber-bg     { fill: #fef3c7; stroke: #d97706; }
+
+[data-theme="light"] .c-red-fill   { fill: #fee2e2; }
+[data-theme="light"] .c-red-stroke { stroke: #dc2626; }
+[data-theme="light"] .c-red-text   { fill: #991b1b; }
+[data-theme="light"] .c-red-bg     { fill: #fee2e2; stroke: #dc2626; }
+
+[data-theme="light"] .c-cyan-fill   { fill: #cffafe; }
+[data-theme="light"] .c-cyan-stroke { stroke: #0891b2; }
+[data-theme="light"] .c-cyan-text   { fill: #155e75; }
+[data-theme="light"] .c-cyan-bg     { fill: #cffafe; stroke: #0891b2; }
+
+[data-theme="light"] .c-pink-fill   { fill: #fce7f3; }
+[data-theme="light"] .c-pink-stroke { stroke: #db2777; }
+[data-theme="light"] .c-pink-text   { fill: #9d174d; }
+[data-theme="light"] .c-pink-bg     { fill: #fce7f3; stroke: #db2777; }
+
+[data-theme="light"] .c-slate-fill   { fill: #f1f5f9; }
+[data-theme="light"] .c-slate-stroke { stroke: #475569; }
+[data-theme="light"] .c-slate-text   { fill: #334155; }
+[data-theme="light"] .c-slate-bg     { fill: #f1f5f9; stroke: #475569; }
+
+[data-theme="light"] .c-orange-fill   { fill: #ffedd5; }
+[data-theme="light"] .c-orange-stroke { stroke: #ea580c; }
+[data-theme="light"] .c-orange-text   { fill: #9a3412; }
+[data-theme="light"] .c-orange-bg     { fill: #ffedd5; stroke: #ea580c; }
+
+[data-theme="light"] .diagram-svg .connector {
+  stroke: var(--border);
+}

package/public/css/layout.css

@@ -1,7 +1,7 @@
 /* ── Left Sidebar ── */
 .sidebar-left {
-    background: linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 95%, #000) 100%);
-    border-right: 1px solid color-mix(in srgb, var(--border) 80%, var(--accent) 20%);
+    background: linear-gradient(180deg, var(--surface) 0%, color-mix(in oklch, var(--surface) 95%, #000) 100%);
+    border-right: 1px solid color-mix(in oklch, var(--border) 80%, var(--accent) 20%);
     box-shadow: inset -1px 0 0 var(--border);
     padding: 48px 16px 16px;
     display: flex;
@@ -24,12 +24,12 @@
             0deg,
             transparent,
             transparent 2px,
-            color-mix(in srgb, var(--accent) var(--scanline-pct), transparent) 2px,
-            color-mix(in srgb, var(--accent) var(--scanline-pct), transparent) 4px
+            color-mix(in oklch, var(--accent) var(--scanline-pct), transparent) 2px,
+            color-mix(in oklch, var(--accent) var(--scanline-pct), transparent) 4px
         ),
         linear-gradient(
             180deg,
-            color-mix(in srgb, var(--accent) var(--glow-strength), transparent) 0%,
+            color-mix(in oklch, var(--accent) var(--glow-strength), transparent) 0%,
             transparent 200px
         );
 }
@@ -40,7 +40,7 @@
     color: var(--accent);
     font-family: var(--font-display);
     letter-spacing: 1px;
-    text-shadow: 0 0 20px color-mix(in srgb, var(--accent) 30%, transparent);
+    text-shadow: 0 0 20px color-mix(in oklch, var(--accent) 30%, transparent);
 }
 
 .section-title {
@@ -88,13 +88,13 @@
 .status-idle {
     background: var(--status-idle-bg);
     color: var(--green);
-    box-shadow: 0 0 6px color-mix(in srgb, var(--success) 20%, transparent);
+    box-shadow: 0 0 6px color-mix(in oklch, var(--success) 20%, transparent);
 }
 
 .status-running {
     background: var(--status-running-bg);
     color: var(--status-running-color);
-    box-shadow: 0 0 6px color-mix(in srgb, var(--warning) 30%, transparent);
+    box-shadow: 0 0 6px color-mix(in oklch, var(--warning) 30%, transparent);
 }
 
 .btn-clear {
@@ -122,8 +122,8 @@
 
 /* ── Right Sidebar ── */
 .sidebar-right {
-    background: linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 95%, #000) 100%);
-    border-left: 1px solid color-mix(in srgb, var(--border) 80%, var(--accent) 20%);
+    background: linear-gradient(180deg, var(--surface) 0%, color-mix(in oklch, var(--surface) 95%, #000) 100%);
+    border-left: 1px solid color-mix(in oklch, var(--border) 80%, var(--accent) 20%);
     box-shadow: inset 1px 0 0 var(--border);
     overflow-y: auto;
     display: flex;
@@ -205,6 +205,9 @@
     text-align: left;
     font-family: var(--font-display);
     transition: border-color 0.15s, box-shadow 0.15s;
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
 }
 
 .sidebar-hb-btn.w-auto {
@@ -404,4 +407,24 @@ body.right-collapsed .sidebar-right {
 
 .mobile-nav {
     display: none;
+}
+
+/* ── Lucide Icons ── */
+.lucide,
+[data-icon] svg,
+.icon-hydrated svg,
+.cli-provider-icon svg,
+.skill-emoji svg {
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    vertical-align: -0.125em;
+    flex-shrink: 0;
+}
+
+[data-icon],
+.icon-hydrated {
+    display: inline-flex;
+    align-items: center;
+    line-height: 1;
 }

package/public/css/markdown.css

@@ -24,14 +24,14 @@
 }
 
 .table-wrapper th {
-    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
+    background: color-mix(in oklch, var(--accent) 8%, var(--surface));
     font-weight: 600;
     white-space: nowrap;
-    border-bottom: 2px solid color-mix(in srgb, var(--accent) 25%, var(--border));
+    border-bottom: 2px solid color-mix(in oklch, var(--accent) 25%, var(--border));
 }
 
 .table-wrapper tr:nth-child(even) td {
-    background: color-mix(in srgb, var(--text) 2%, transparent);
+    background: color-mix(in oklch, var(--text) 2%, transparent);
 }
 
 /* Legacy table styles (non-wrapped) */
@@ -51,14 +51,14 @@
 }
 
 .msg-content th {
-    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
+    background: color-mix(in oklch, var(--accent) 8%, var(--surface));
     font-weight: 600;
     white-space: nowrap;
     border-bottom: 2px solid var(--border);
 }
 
 .msg-content tr:nth-child(even) {
-    background: color-mix(in srgb, var(--text) 2%, transparent);
+    background: color-mix(in oklch, var(--text) 2%, transparent);
 }
 
 /* Code blocks — new structure */
@@ -74,7 +74,7 @@
     justify-content: space-between;
     align-items: center;
     padding: var(--space-1) var(--space-3);
-    background: color-mix(in srgb, var(--text) 8%, var(--surface));
+    background: color-mix(in oklch, var(--text) 8%, var(--surface));
     border-bottom: 1px solid var(--border);
     font-family: var(--font-mono);
     font-size: var(--text-xs);
@@ -102,7 +102,7 @@
 
 .code-copy-btn:hover {
     color: var(--text);
-    background: color-mix(in srgb, var(--text) 8%, transparent);
+    background: color-mix(in oklch, var(--text) 8%, transparent);
 }
 
 .code-copy-btn.copied { color: var(--success); }
@@ -159,7 +159,7 @@
 .msg-content code:not(pre code) {
     font-family: var(--font-mono);
     font-size: 0.875em;
-    background: color-mix(in srgb, var(--accent) 6%, var(--surface));
+    background: color-mix(in oklch, var(--accent) 6%, var(--surface));
     padding: 1px var(--space-1);
     border-radius: var(--radius-sm);
     border: 1px solid var(--border);
@@ -174,7 +174,7 @@
     margin: 8px 0;
     padding: 4px 12px;
     color: var(--text-dim);
-    background: color-mix(in srgb, var(--text) 2%, transparent);
+    background: color-mix(in oklch, var(--text) 2%, transparent);
     border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
 }
 
@@ -242,9 +242,12 @@
 
 /* Paragraphs */
 .msg-content p {
-    margin: 4px 0;
+    margin: 0.75em 0;
 }
 
+.msg-content p:first-child { margin-top: 0; }
+.msg-content p:last-child  { margin-bottom: 0; }
+
 /* KaTeX */
 .msg-content .katex-display {
     overflow-x: auto;
@@ -266,7 +269,7 @@
     margin: 8px 0;
     text-align: center;
     position: relative;
-    background: color-mix(in srgb, var(--surface) 60%, transparent);
+    background: color-mix(in oklch, var(--surface) 60%, transparent);
     border: 1px solid var(--border);
     border-radius: var(--radius-lg);
     padding: 16px 12px;
@@ -282,8 +285,8 @@
     position: absolute;
     top: 6px;
     right: 6px;
-    background: color-mix(in srgb, var(--text) 10%, transparent);
-    border: 1px solid color-mix(in srgb, var(--text) 15%, transparent);
+    background: color-mix(in oklch, var(--text) 10%, transparent);
+    border: 1px solid color-mix(in oklch, var(--text) 15%, transparent);
     color: var(--text-dim);
     width: 28px;
     height: 28px;
@@ -298,10 +301,53 @@
 }
 
 .mermaid-zoom-btn:hover {
-    background: color-mix(in srgb, var(--text) 20%, transparent);
+    background: color-mix(in oklch, var(--text) 20%, transparent);
+    color: var(--text);
+}
+
+/* Mermaid action buttons (copy / save) */
+.mermaid-copy-btn,
+.mermaid-save-btn {
+    position: absolute;
+    top: 6px;
+    background: color-mix(in oklch, var(--text) 10%, transparent);
+    border: 1px solid color-mix(in oklch, var(--text) 15%, transparent);
+    color: var(--text-dim);
+    width: 28px;
+    height: 28px;
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity var(--duration-fast), background var(--duration-fast), color var(--duration-fast);
+    z-index: 2;
+}
+
+/* zoom at right:6px (rightmost), copy next, save leftmost */
+.mermaid-copy-btn { right: calc(6px + 32px); }
+.mermaid-save-btn { right: calc(6px + 64px); }
+
+.mermaid-container:hover .mermaid-zoom-btn,
+.mermaid-container:hover .mermaid-copy-btn,
+.mermaid-container:hover .mermaid-save-btn {
+    opacity: 1;
+    pointer-events: auto;
+}
+
+.mermaid-copy-btn:hover,
+.mermaid-save-btn:hover {
+    background: color-mix(in oklch, var(--text) 20%, transparent);
     color: var(--text);
 }
 
+.mermaid-copy-btn.copied,
+.mermaid-save-btn.copied {
+    color: var(--success);
+}
+
 /* Mermaid popup overlay */
 .mermaid-overlay {
     position: fixed;
@@ -348,7 +394,7 @@
     position: absolute;
     top: 8px;
     right: 8px;
-    background: color-mix(in srgb, var(--text) 15%, transparent);
+    background: color-mix(in oklch, var(--text) 15%, transparent);
     border: none;
     color: var(--text);
     width: 36px;
@@ -365,7 +411,7 @@
 }
 
 .mermaid-overlay-close:hover {
-    background: color-mix(in srgb, var(--text) 30%, transparent);
+    background: color-mix(in oklch, var(--text) 30%, transparent);
     color: var(--text);
 }
 
@@ -391,7 +437,7 @@
     padding: 2px 8px;
     font-size: var(--text-xs);
     color: var(--code-label-color);
-    background: color-mix(in srgb, var(--text) 5%, transparent);
+    background: color-mix(in oklch, var(--text) 5%, transparent);
     border-radius: 0 var(--radius-md) 0 var(--radius-sm);
     font-family: var(--font-mono);
     cursor: pointer;
@@ -400,7 +446,7 @@
 }
 
 .msg-content .code-lang-label:hover {
-    background: color-mix(in srgb, var(--text) 12%, transparent);
+    background: color-mix(in oklch, var(--text) 12%, transparent);
     transform: scale(1.05);
 }
 

package/public/css/modals.css

@@ -22,15 +22,15 @@
 }
 
 .modal-box {
-    background: color-mix(in srgb, var(--surface) 85%, transparent);
+    background: color-mix(in oklch, var(--surface) 85%, transparent);
     backdrop-filter: blur(24px) saturate(1.5);
     -webkit-backdrop-filter: blur(24px) saturate(1.5);
-    border: 1px solid color-mix(in srgb, var(--accent) 10%, var(--border));
+    border: 1px solid color-mix(in oklch, var(--accent) 10%, var(--border));
     border-radius: var(--radius-xl);
     box-shadow:
         0 16px 48px rgba(0, 0, 0, 0.5),
         0 0 0 1px rgba(255, 255, 255, 0.04) inset,
-        0 0 60px -20px color-mix(in srgb, var(--accent) 6%, transparent);
+        0 0 60px -20px color-mix(in oklch, var(--accent) 6%, transparent);
     width: 500px;
     max-width: 90vw;
     max-height: 80vh;