cli-jaw 1.4.11 → 1.5.0

package/public/css/layout.css

@@ -8,6 +8,30 @@
     flex-direction: column;
     gap: 16px;
     overflow-y: auto;
+    animation: revealLeft 0.4s var(--ease-out-expo) 0.05s both;
+}
+
+/* Sidebar ambient scanline + glow */
+.sidebar-left::before,
+.sidebar-right::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    z-index: 0;
+    background:
+        repeating-linear-gradient(
+            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
+        ),
+        linear-gradient(
+            180deg,
+            color-mix(in srgb, var(--accent) var(--glow-strength), transparent) 0%,
+            transparent 200px
+        );
 }
 
 .logo {
@@ -50,10 +74,11 @@
 }
 
 .status-badge {
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
     padding: 2px 8px;
     border-radius: 10px;
-    font-size: 11px;
+    font-size: 10px;
     font-weight: 600;
     transition: background 0.3s, color 0.3s;
     letter-spacing: 0.5px;
@@ -63,13 +88,13 @@
 .status-idle {
     background: var(--status-idle-bg);
     color: var(--green);
-    box-shadow: 0 0 6px rgba(74, 222, 128, 0.2);
+    box-shadow: 0 0 6px color-mix(in srgb, var(--success) 20%, transparent);
 }
 
 .status-running {
     background: var(--status-running-bg);
     color: var(--status-running-color);
-    box-shadow: 0 0 6px rgba(251, 191, 36, 0.3);
+    box-shadow: 0 0 6px color-mix(in srgb, var(--warning) 30%, transparent);
 }
 
 .btn-clear {
@@ -104,6 +129,7 @@
     display: flex;
     flex-direction: column;
     padding-top: 48px;
+    animation: revealRight 0.4s var(--ease-out-expo) 0.1s both;
 }
 
 .tab-bar {
@@ -181,6 +207,11 @@
     transition: border-color 0.15s, box-shadow 0.15s;
 }
 
+.sidebar-hb-btn.w-auto {
+    width: auto;
+    flex-shrink: 0;
+}
+
 .sidebar-hb-btn:hover {
     border-color: var(--accent);
     box-shadow: 0 0 0 1px var(--accent);
@@ -306,6 +337,7 @@ body.right-collapsed .sidebar-right {
     body {
         grid-template-columns: 1fr;
         grid-template-areas: "main";
+        height: 100dvh;
     }
 
     .sidebar-left,
@@ -314,10 +346,12 @@ body.right-collapsed .sidebar-right {
         top: 0;
         bottom: 0;
         z-index: 100;
-        width: 280px;
+        width: min(280px, 80vw);
         transform: translateX(-100%);
-        transition: transform 0.2s ease;
-        min-width: 280px !important;
+        transition: transform 0.25s var(--ease-out-expo);
+        min-width: unset !important;
+        padding-top: calc(48px + env(safe-area-inset-top, 0px));
+        padding-bottom: env(safe-area-inset-bottom, 0px);
     }
 
     .sidebar-right {
@@ -326,12 +360,25 @@ body.right-collapsed .sidebar-right {
         transform: translateX(100%);
     }
 
-    body.left-expanded .sidebar-left {
+    body.left-expanded .sidebar-left,
+    body.right-expanded .sidebar-right {
         transform: translateX(0);
     }
 
-    body.right-expanded .sidebar-right {
-        transform: translateX(0);
+    /* Backdrop overlay */
+    body.left-expanded::after,
+    body.right-expanded::after {
+        content: '';
+        position: fixed;
+        inset: 0;
+        background: var(--modal-bg);
+        z-index: 99;
+        animation: fadeIn 0.2s ease;
+    }
+
+    @keyframes fadeIn {
+        from { opacity: 0; }
+        to { opacity: 1; }
     }
 
     /* Override 900px collapse rules at mobile */
@@ -343,6 +390,16 @@ body.right-collapsed .sidebar-right {
         display: none;
     }
 
+    /* Input area safe area */
+    .chat-input-area {
+        padding-bottom: env(safe-area-inset-bottom, 0px);
+    }
+
+    /* Message bubble full width on mobile */
+    .message.agent-message,
+    .message.user-message {
+        max-width: 95% !important;
+    }
 }
 
 .mobile-nav {

package/public/css/markdown.css

@@ -1,66 +1,181 @@
 /* ── Markdown rendering styles ── */
 
-/* Tables */
+/* Table wrapper for responsive scrolling */
+.table-wrapper {
+    overflow-x: auto;
+    margin: var(--space-3) 0;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+}
+
+.table-wrapper table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: var(--text-sm);
+    border: none;
+    margin: 0;
+}
+
+.table-wrapper th,
+.table-wrapper td {
+    padding: var(--space-2) var(--space-3);
+    text-align: left;
+    border-bottom: 1px solid var(--border);
+}
+
+.table-wrapper th {
+    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
+    font-weight: 600;
+    white-space: nowrap;
+    border-bottom: 2px solid color-mix(in srgb, var(--accent) 25%, var(--border));
+}
+
+.table-wrapper tr:nth-child(even) td {
+    background: color-mix(in srgb, var(--text) 2%, transparent);
+}
+
+/* Legacy table styles (non-wrapped) */
 .msg-content table {
     border-collapse: collapse;
     width: auto;
     margin: 8px 0;
-    font-size: 12px;
-    border: 1px solid var(--table-border);
+    font-size: var(--text-sm);
+    border: 1px solid var(--border);
 }
 
 .msg-content th,
 .msg-content td {
-    border: 1px solid rgba(6, 182, 212, 0.35);
+    border: 1px solid var(--border);
     padding: 5px 12px;
     text-align: left;
 }
 
 .msg-content th {
-    background: rgba(6, 182, 212, 0.1);
+    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
     font-weight: 600;
     white-space: nowrap;
-    border-bottom: 2px solid var(--table-border);
+    border-bottom: 2px solid var(--border);
 }
 
 .msg-content tr:nth-child(even) {
-    background: rgba(255, 255, 255, 0.03);
+    background: color-mix(in srgb, var(--text) 2%, transparent);
+}
+
+/* Code blocks — new structure */
+.code-block {
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    overflow: hidden;
+    margin: var(--space-3) 0;
+}
+
+.code-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: var(--space-1) var(--space-3);
+    background: color-mix(in srgb, var(--text) 8%, var(--surface));
+    border-bottom: 1px solid var(--border);
+    font-family: var(--font-mono);
+    font-size: var(--text-xs);
+    color: var(--text-dim);
+    letter-spacing: 0.5px;
+}
+
+.code-copy-btn {
+    display: flex;
+    align-items: center;
+    gap: var(--space-1);
+    background: transparent;
+    border: none;
+    color: var(--text-dim);
+    cursor: pointer;
+    padding: 2px var(--space-2);
+    border-radius: var(--radius-sm);
+    font-size: var(--text-xs);
+    font-family: var(--font-mono);
+    transition: color var(--duration-fast), background var(--duration-fast);
+    opacity: 0;
+}
+
+.code-block:hover .code-copy-btn { opacity: 1; }
+
+.code-copy-btn:hover {
+    color: var(--text);
+    background: color-mix(in srgb, var(--text) 8%, transparent);
+}
+
+.code-copy-btn.copied { color: var(--success); }
+
+.code-block pre {
+    margin: 0;
+    padding: var(--space-3) var(--space-4);
+    background: var(--code-bg);
+    overflow-x: auto;
+    font-family: var(--font-mono);
+    font-size: var(--text-sm);
+    line-height: 1.5;
+    border-radius: 0;
+}
+
+.code-block pre code {
+    background: none;
+    padding: 0;
+    border-radius: 0;
+    font-family: var(--font-mono);
 }
 
-/* Code blocks */
-.msg-content pre {
+/* Legacy pre styles (not inside .code-block) */
+.msg-content pre:not(.code-block pre) {
     background: var(--code-bg);
     padding: 12px;
-    border-radius: 6px;
+    border-radius: var(--radius-md);
     overflow-x: auto;
     margin: 8px 0;
-    font-size: 12px;
+    font-size: var(--text-sm);
     line-height: 1.45;
 }
 
-.msg-content pre code {
+.msg-content pre:not(.code-block pre) code {
     background: none;
     padding: 0;
     border-radius: 0;
     font-family: var(--font-mono);
 }
 
-.msg-content code {
-    background: var(--border);
-    padding: 1px 5px;
-    border-radius: 3px;
-    font-size: 0.9em;
+/* Override: .code-block pre inside msg-content */
+.msg-content .code-block pre {
+    margin: 0;
+    padding: var(--space-3) var(--space-4);
+    background: var(--code-bg);
+    overflow-x: auto;
     font-family: var(--font-mono);
+    font-size: var(--text-sm);
+    line-height: 1.5;
+    border-radius: 0;
+}
+
+/* Inline code */
+.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));
+    padding: 1px var(--space-1);
+    border-radius: var(--radius-sm);
+    border: 1px solid var(--border);
+    color: var(--text);
+    word-break: break-word;
+    overflow-wrap: break-word;
 }
 
 /* Blockquotes */
 .msg-content blockquote {
-    border-left: 3px solid var(--accent, #60a5fa);
+    border-left: 3px solid var(--accent);
     margin: 8px 0;
     padding: 4px 12px;
     color: var(--text-dim);
-    background: rgba(255, 255, 255, 0.02);
-    border-radius: 0 4px 4px 0;
+    background: color-mix(in srgb, var(--text) 2%, transparent);
+    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
 }
 
 /* Lists */
@@ -91,24 +206,38 @@
     margin: 12px 0;
 }
 
-/* Headings inside messages */
-.msg-content h1,
-.msg-content h2,
-.msg-content h3 {
-    margin: 10px 0 4px;
-    line-height: 1.3;
-}
-
+/* Headings inside messages — clear hierarchy */
 .msg-content h1 {
-    font-size: 16px;
+    font-size: var(--text-xl);
+    font-weight: 700;
+    margin: var(--space-5) 0 var(--space-2);
+    letter-spacing: -0.02em;
+    line-height: 1.3;
+    color: var(--text);
 }
 
 .msg-content h2 {
-    font-size: 14px;
+    font-size: var(--text-lg);
+    font-weight: 600;
+    margin: var(--space-4) 0 var(--space-2);
+    letter-spacing: -0.01em;
+    color: var(--text);
 }
 
 .msg-content h3 {
-    font-size: 13px;
+    font-size: var(--text-md);
+    font-weight: 600;
+    margin: var(--space-3) 0 var(--space-1);
+    color: var(--text);
+}
+
+.msg-content h4,
+.msg-content h5,
+.msg-content h6 {
+    font-size: var(--text-base);
+    font-weight: 600;
+    margin: var(--space-2) 0 var(--space-1);
+    color: var(--text-dim);
 }
 
 /* Paragraphs */
@@ -118,8 +247,18 @@
 
 /* KaTeX */
 .msg-content .katex-display {
-    margin: 8px 0;
     overflow-x: auto;
+    overflow-y: hidden;
+    margin: var(--space-3) 0;
+    padding: var(--space-2) 0;
+}
+
+.msg-content .katex {
+    font-size: 1em;
+}
+
+.msg-content .katex-display > .katex {
+    font-size: 1.1em;
 }
 
 /* Mermaid */
@@ -127,9 +266,9 @@
     margin: 8px 0;
     text-align: center;
     position: relative;
-    background: rgba(30, 41, 59, 0.4);
+    background: color-mix(in srgb, var(--surface) 60%, transparent);
     border: 1px solid var(--border);
-    border-radius: 8px;
+    border-radius: var(--radius-lg);
     padding: 16px 12px;
     overflow-x: auto;
 }
@@ -143,23 +282,23 @@
     position: absolute;
     top: 6px;
     right: 6px;
-    background: rgba(255, 255, 255, 0.1);
-    border: 1px solid rgba(255, 255, 255, 0.15);
+    background: color-mix(in srgb, var(--text) 10%, transparent);
+    border: 1px solid color-mix(in srgb, var(--text) 15%, transparent);
     color: var(--text-dim);
     width: 28px;
     height: 28px;
-    border-radius: 6px;
+    border-radius: var(--radius-md);
     cursor: pointer;
     font-size: 14px;
     display: flex;
     align-items: center;
     justify-content: center;
-    transition: background 0.15s, color 0.15s;
+    transition: background var(--duration-fast), color var(--duration-fast);
     z-index: 2;
 }
 
 .mermaid-zoom-btn:hover {
-    background: rgba(255, 255, 255, 0.2);
+    background: color-mix(in srgb, var(--text) 20%, transparent);
     color: var(--text);
 }
 
@@ -184,7 +323,7 @@
     position: relative;
     background: var(--surface);
     border: 1px solid var(--border);
-    border-radius: 12px;
+    border-radius: var(--radius-lg);
     padding: 20px;
     max-width: 95vw;
     max-height: 95vh;
@@ -209,25 +348,25 @@
     position: absolute;
     top: 8px;
     right: 8px;
-    background: rgba(255, 255, 255, 0.15);
+    background: color-mix(in srgb, var(--text) 15%, transparent);
     border: none;
     color: var(--text);
     width: 36px;
     height: 36px;
-    border-radius: 8px;
+    border-radius: var(--radius-lg);
     cursor: pointer;
     font-size: 18px;
     display: flex;
     align-items: center;
     justify-content: center;
-    transition: background 0.15s;
+    transition: background var(--duration-fast);
     z-index: 10;
     pointer-events: auto;
 }
 
 .mermaid-overlay-close:hover {
-    background: rgba(255, 255, 255, 0.3);
-    color: #fff;
+    background: color-mix(in srgb, var(--text) 30%, transparent);
+    color: var(--text);
 }
 
 .mermaid-overlay-svg {
@@ -236,11 +375,11 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    min-width: 400px;
+    min-width: min(400px, 90vw);
     min-height: 200px;
 }
 
-/* Code block language label */
+/* Legacy code-block-wrapper label (existing messages compat) */
 .msg-content .code-block-wrapper {
     position: relative;
 }
@@ -250,21 +389,47 @@
     top: 0;
     right: 0;
     padding: 2px 8px;
-    font-size: 10px;
+    font-size: var(--text-xs);
     color: var(--code-label-color);
-    background: rgba(255, 255, 255, 0.05);
-    border-radius: 0 6px 0 4px;
-    font-family: 'SF Mono', monospace;
+    background: color-mix(in srgb, var(--text) 5%, transparent);
+    border-radius: 0 var(--radius-md) 0 var(--radius-sm);
+    font-family: var(--font-mono);
     cursor: pointer;
     user-select: none;
-    transition: background 0.15s, transform 0.15s, color 0.15s;
+    transition: background var(--duration-fast), transform var(--duration-fast), color var(--duration-fast);
 }
 
 .msg-content .code-lang-label:hover {
-    background: rgba(255, 255, 255, 0.15);
+    background: color-mix(in srgb, var(--text) 12%, transparent);
     transform: scale(1.05);
 }
 
 .msg-content .code-lang-label.copied {
-    color: #4ade80;
+    color: var(--success);
+}
+
+/* Mermaid error fallback */
+.mermaid-error {
+    border: 1px solid var(--error);
+    border-radius: var(--radius-md);
+    padding: var(--space-2);
+    margin: var(--space-1) 0;
+}
+
+.mermaid-error-title {
+    color: var(--error);
+    font-size: var(--text-xs);
+    margin-bottom: var(--space-1);
+}
+
+.mermaid-error-msg {
+    color: var(--warning);
+    font-size: var(--text-xs);
+    margin-bottom: var(--space-2);
+}
+
+.mermaid-error-code {
+    margin: 0;
+    font-size: var(--text-xs);
+    overflow-x: auto;
 }

package/public/css/modals.css

@@ -3,7 +3,9 @@
     display: none;
     position: fixed;
     inset: 0;
-    background: rgba(0, 0, 0, 0.6);
+    background: var(--modal-bg);
+    backdrop-filter: blur(10px) saturate(1.2);
+    -webkit-backdrop-filter: blur(10px) saturate(1.2);
     z-index: 999;
     align-items: center;
     justify-content: center;
@@ -11,17 +13,35 @@
 
 .modal-overlay.open {
     display: flex;
+    animation: overlayIn 0.2s ease-out;
+}
+
+@keyframes overlayIn {
+    from { opacity: 0; }
+    to   { opacity: 1; }
 }
 
 .modal-box {
-    background: var(--surface);
-    border: 1px solid var(--border);
-    border-radius: 10px;
+    background: color-mix(in srgb, 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-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);
     width: 500px;
     max-width: 90vw;
     max-height: 80vh;
     display: flex;
     flex-direction: column;
+    animation: modalBounce 0.35s var(--ease-spring);
+}
+
+@keyframes modalBounce {
+    from { opacity: 0; transform: translateY(24px) scale(0.96); }
+    to   { opacity: 1; transform: translateY(0) scale(1); }
 }
 
 .modal-header {
@@ -141,13 +161,13 @@
 }
 
 .hb-error {
-    color: #f87171;
+    color: var(--error);
 }
 
 .hb-toggle {
-    width: 32px;
-    height: 18px;
-    border-radius: 9px;
+    width: var(--toggle-w);
+    height: var(--toggle-h);
+    border-radius: calc(var(--toggle-h) / 2);
     border: none;
     cursor: pointer;
     position: relative;
@@ -159,22 +179,22 @@
 }
 
 .hb-toggle.off {
-    background: #555;
+    background: var(--toggle-off);
 }
 
 .hb-toggle::after {
     content: '';
     position: absolute;
-    top: 2px;
-    width: 14px;
-    height: 14px;
+    top: calc((var(--toggle-h) - var(--toggle-knob)) / 2);
+    width: var(--toggle-knob);
+    height: var(--toggle-knob);
     border-radius: 50%;
-    background: #fff;
+    background: var(--toggle-on);
     transition: left .2s;
 }
 
 .hb-toggle.on::after {
-    left: 16px;
+    left: calc(var(--toggle-w) - var(--toggle-knob) - 2px);
 }
 
 .hb-toggle.off::after {
@@ -184,7 +204,7 @@
 .hb-del {
     background: none;
     border: none;
-    color: #f55;
+    color: var(--delete-color);
     cursor: pointer;
     font-size: 14px;
 }