cli-jaw 1.5.0 → 1.6.2

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 {
@@ -352,6 +355,8 @@ body.right-collapsed .sidebar-right {
         min-width: unset !important;
         padding-top: calc(48px + env(safe-area-inset-top, 0px));
         padding-bottom: env(safe-area-inset-bottom, 0px);
+        visibility: hidden;
+        pointer-events: none;
     }
 
     .sidebar-right {
@@ -363,6 +368,8 @@ body.right-collapsed .sidebar-right {
     body.left-expanded .sidebar-left,
     body.right-expanded .sidebar-right {
         transform: translateX(0);
+        visibility: visible;
+        pointer-events: auto;
     }
 
     /* Backdrop overlay */
@@ -404,4 +411,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;

package/public/css/orc-state.css

@@ -46,7 +46,7 @@ body[data-orc-state].orc-pulse #chatMessages {
     font-weight: 700;
     font-family: var(--font-mono);
     letter-spacing: 1px;
-    background: color-mix(in srgb, var(--orc-glow) 20%, var(--surface));
+    background: color-mix(in oklch, var(--orc-glow) 20%, var(--surface));
     color: var(--orc-glow);
     border: 1px solid var(--orc-glow);
     text-transform: uppercase;
@@ -56,7 +56,7 @@ body[data-orc-state].orc-pulse #chatMessages {
 .pabc-roadmap {
     display: none;
     align-items: center;
-    background: linear-gradient(135deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 90%, #000) 100%);
+    background: linear-gradient(135deg, var(--surface) 0%, color-mix(in oklch, var(--surface) 90%, #000) 100%);
     border: 1px solid var(--border);
     border-radius: 10px;
     padding: 12px 22px;
@@ -100,8 +100,8 @@ body[data-orc-state].orc-pulse #chatMessages {
     transform: scale(1.1);
 }
 .pabc-dot.done {
-    color: color-mix(in srgb, var(--bg) 90%, transparent);
-    border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
+    color: color-mix(in oklch, var(--bg) 90%, transparent);
+    border: 1px solid color-mix(in oklch, var(--text) 10%, transparent);
     opacity: 0.65;
 }
 .pabc-dot[data-phase="P"].active, .pabc-dot[data-phase="P"].done { background: var(--orc-glow-P); }
@@ -112,13 +112,13 @@ body[data-orc-state].orc-pulse #chatMessages {
 .pabc-connector {
     flex: 1;
     height: 2px;
-    background: linear-gradient(90deg, var(--border) 0%, color-mix(in srgb, var(--border) 60%, var(--surface)) 50%, var(--border) 100%);
+    background: linear-gradient(90deg, var(--border) 0%, color-mix(in oklch, var(--border) 60%, var(--surface)) 50%, var(--border) 100%);
     min-width: 44px;
     transition: all 0.5s ease;
     border-radius: 1px;
 }
 .pabc-connector.done {
-    background: linear-gradient(90deg, var(--text-dim) 0%, color-mix(in srgb, var(--text-dim) 70%, var(--surface)) 50%, var(--text-dim) 100%);
+    background: linear-gradient(90deg, var(--text-dim) 0%, color-mix(in oklch, var(--text-dim) 70%, var(--surface)) 50%, var(--text-dim) 100%);
     box-shadow: 0 0 6px -2px var(--text-dim);
 }
 
@@ -184,7 +184,7 @@ body[data-orc-state].orc-pulse #chatMessages {
 
 /* ─── Light Theme Overrides ─── */
 [data-theme="light"] .pabc-roadmap {
-    background: linear-gradient(135deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 90%, #000) 100%);
+    background: linear-gradient(135deg, var(--surface) 0%, color-mix(in oklch, var(--surface) 90%, #000) 100%);
     box-shadow: 0 2px 12px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.6);
 }
 [data-theme="light"] .pabc-dot.future {
@@ -199,10 +199,10 @@ body[data-orc-state].orc-pulse #chatMessages {
     border-color: rgba(0,0,0,0.06);
 }
 [data-theme="light"] .pabc-connector {
-    background: linear-gradient(90deg, var(--border) 0%, color-mix(in srgb, var(--border) 60%, var(--surface)) 50%, var(--border) 100%);
+    background: linear-gradient(90deg, var(--border) 0%, color-mix(in oklch, var(--border) 60%, var(--surface)) 50%, var(--border) 100%);
 }
 [data-theme="light"] .pabc-connector.done {
-    background: linear-gradient(90deg, var(--text-dim) 0%, color-mix(in srgb, var(--text-dim) 70%, var(--surface)) 50%, var(--text-dim) 100%);
+    background: linear-gradient(90deg, var(--text-dim) 0%, color-mix(in oklch, var(--text-dim) 70%, var(--surface)) 50%, var(--text-dim) 100%);
     box-shadow: none;
 }
 [data-theme="light"] .shark-runner {

package/public/css/sidebar.css

@@ -39,6 +39,18 @@
     background: var(--error);
 }
 
+.cli-provider-icon {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+}
+.cli-provider-icon svg {
+    width: 100%;
+    height: 100%;
+}
+
 .cli-name {
     flex: 1;
 }
@@ -60,7 +72,7 @@
 }
 
 .settings-group:hover {
-    border-color: color-mix(in srgb, var(--border) 60%, var(--accent));
+    border-color: color-mix(in oklch, var(--border) 60%, var(--accent));
 }
 
 .settings-group h4 {
@@ -69,6 +81,9 @@
     margin-bottom: 8px;
     font-family: var(--font-display);
     letter-spacing: 0.5px;
+    display: flex;
+    align-items: center;
+    gap: 4px;
 }
 
 .settings-row {
@@ -105,7 +120,7 @@
 .perm-btn.active {
     border-color: var(--accent);
     color: var(--accent);
-    background: color-mix(in srgb, var(--accent) 10%, var(--bg));
+    background: color-mix(in oklch, var(--accent) 10%, var(--bg));
 }
 
 textarea.prompt-editor {
@@ -136,7 +151,7 @@ textarea.prompt-editor {
 .skill-filter.active {
     border-color: var(--accent);
     color: var(--accent);
-    background: color-mix(in srgb, var(--accent) 10%, var(--bg));
+    background: color-mix(in oklch, var(--accent) 10%, var(--bg));
 }
 
 .skill-card {
@@ -167,6 +182,11 @@ textarea.prompt-editor {
 
 .skill-emoji {
     font-size: 16px;
+    display: inline-flex;
+    align-items: center;
+    width: 20px;
+    height: 20px;
+    flex-shrink: 0;
 }
 
 .skill-name {
@@ -253,4 +273,18 @@ textarea.prompt-editor {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+}
+
+/* ── Settings fieldset grouping ── */
+.settings-fieldset {
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    padding: var(--space-3);
+    margin-bottom: var(--space-3);
+}
+.settings-fieldset legend {
+    font-weight: 600;
+    font-size: var(--text-sm);
+    padding: 0 var(--space-2);
+    color: var(--text);
 }

package/public/css/tool-ui.css

@@ -29,7 +29,7 @@
 
 .tool-group-summary:hover {
     color: var(--text);
-    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
+    border-color: color-mix(in oklch, var(--accent) 40%, var(--border));
 }
 
 .tool-group-summary-text { flex: 1; }
@@ -110,7 +110,7 @@
 }
 
 .tool-item + .tool-item {
-    border-top: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
+    border-top: 1px solid color-mix(in oklch, var(--border) 50%, transparent);
 }
 
 .tool-item-header {
@@ -185,8 +185,8 @@
 .tool-item-details {
     margin-left: 22px;
     padding: 8px 10px;
-    border-left: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
-    background: color-mix(in srgb, var(--surface) 70%, transparent);
+    border-left: 1px solid color-mix(in oklch, var(--border) 70%, transparent);
+    background: color-mix(in oklch, var(--surface) 70%, transparent);
     border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
 }
 
@@ -300,7 +300,7 @@
     align-items: center;
     gap: var(--space-2);
     width: 100%;
-    background: color-mix(in srgb, var(--surface) 50%, transparent);
+    background: color-mix(in oklch, var(--surface) 50%, transparent);
     border: 1px solid var(--border);
     border-radius: var(--radius-md);
     color: var(--text-dim);
@@ -311,7 +311,7 @@
 }
 
 .process-summary:hover {
-    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
+    border-color: color-mix(in oklch, var(--accent) 40%, var(--border));
 }
 
 .process-dot {
@@ -403,17 +403,17 @@
 }
 
 .process-step-badge.thinking {
-    background: color-mix(in srgb, var(--accent) 15%, transparent);
+    background: color-mix(in oklch, var(--accent) 15%, transparent);
     color: var(--accent);
 }
 
 .process-step-badge.tool {
-    background: color-mix(in srgb, var(--warning) 15%, transparent);
+    background: color-mix(in oklch, var(--warning) 15%, transparent);
     color: var(--warning);
 }
 
 .process-step-badge.search {
-    background: color-mix(in srgb, var(--success) 15%, transparent);
+    background: color-mix(in oklch, var(--success) 15%, transparent);
     color: var(--success);
 }
 
@@ -449,8 +449,8 @@
 .process-step-details {
     margin-left: 22px;
     padding: 8px 10px;
-    border-left: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
-    background: color-mix(in srgb, var(--surface) 70%, transparent);
+    border-left: 1px solid color-mix(in oklch, var(--border) 70%, transparent);
+    background: color-mix(in oklch, var(--surface) 70%, transparent);
     border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
 }
 
@@ -481,3 +481,38 @@
         animation: none;
     }
 }
+
+/* ── Native details/summary for tool blocks (future refactor) ── */
+details.tool-block summary {
+    cursor: pointer;
+    list-style: none;
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--space-1) var(--space-2);
+    font-size: var(--text-sm);
+    color: var(--text-dim);
+    border-radius: var(--radius-sm);
+    transition: background var(--duration-fast);
+}
+details.tool-block summary:hover {
+    background: color-mix(in oklch, var(--accent) 8%, transparent);
+}
+details.tool-block summary::before {
+    content: '';
+    display: inline-block;
+    width: 0.5em;
+    height: 0.5em;
+    border-right: 2px solid currentColor;
+    border-bottom: 2px solid currentColor;
+    transform: rotate(-45deg);
+    transition: transform var(--duration-fast);
+    flex-shrink: 0;
+}
+details.tool-block[open] summary::before {
+    transform: rotate(45deg);
+}
+details.tool-block .tool-content {
+    content-visibility: auto;
+    contain-intrinsic-size: auto 200px;
+}