cli-jaw 0.1.0

package/public/css/layout.css

@@ -0,0 +1,350 @@
+/* ── 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%);
+    box-shadow: inset -1px 0 0 var(--border);
+    padding: 48px 16px 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    overflow-y: auto;
+}
+
+.logo {
+    font-size: 26px;
+    font-weight: 700;
+    color: var(--accent);
+    font-family: var(--font-display);
+    letter-spacing: 1px;
+    text-shadow: 0 0 20px color-mix(in srgb, var(--accent) 30%, transparent);
+}
+
+.section-title {
+    font-size: 11px;
+    color: var(--text-dim);
+    text-transform: uppercase;
+    letter-spacing: 1.5px;
+    margin-bottom: 4px;
+    font-family: var(--font-display);
+    font-weight: 600;
+}
+
+.memory-list {
+    list-style: none;
+    font-size: 12px;
+}
+
+.memory-list li {
+    padding: 4px 0;
+    border-bottom: 1px solid var(--border);
+}
+
+.memory-key {
+    color: var(--accent2);
+}
+
+.stat {
+    font-size: 12px;
+    color: var(--text-dim);
+    margin: 2px 0;
+}
+
+.status-badge {
+    display: inline-block;
+    padding: 2px 8px;
+    border-radius: 10px;
+    font-size: 11px;
+    font-weight: 600;
+    transition: background 0.3s, color 0.3s;
+    letter-spacing: 0.5px;
+    font-family: var(--font-display);
+}
+
+.status-idle {
+    background: var(--status-idle-bg);
+    color: var(--green);
+    box-shadow: 0 0 6px rgba(74, 222, 128, 0.2);
+}
+
+.status-running {
+    background: var(--status-running-bg);
+    color: var(--status-running-color);
+    box-shadow: 0 0 6px rgba(251, 191, 36, 0.3);
+}
+
+.btn-clear {
+    background: none;
+    border: 1px solid var(--border);
+    color: var(--text-dim);
+    padding: 8px;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 12px;
+    font-family: var(--font-display);
+    margin-top: auto;
+    transition: border-color 0.15s, color 0.15s, transform 0.1s;
+}
+
+.btn-clear:hover {
+    border-color: var(--accent);
+    color: var(--accent);
+    transform: translateY(-1px);
+}
+
+.btn-clear:active {
+    transform: translateY(0);
+}
+
+/* ── 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%);
+    box-shadow: inset 1px 0 0 var(--border);
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    padding-top: 48px;
+}
+
+.tab-bar {
+    display: flex;
+    border-bottom: 1px solid var(--border);
+    flex-shrink: 0;
+}
+
+.tab-btn {
+    flex: 1;
+    padding: 10px 8px;
+    background: none;
+    border: none;
+    border-bottom: 2px solid transparent;
+    color: var(--text-dim);
+    font-size: 11px;
+    font-family: var(--font-display);
+    cursor: pointer;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    transition: color 0.15s, border-bottom-color 0.15s;
+}
+
+.tab-btn.active {
+    color: var(--accent);
+    border-bottom-color: var(--accent);
+}
+
+.tab-content {
+    display: none;
+    padding: 16px;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.tab-content.active {
+    display: flex;
+}
+
+/* ── Save Bar ── */
+.sidebar-save-bar {
+    padding: 6px 16px;
+    border-bottom: 1px solid var(--border);
+    flex-shrink: 0;
+}
+
+.btn-save {
+    width: 100%;
+    padding: 6px;
+    background: var(--accent);
+    border: none;
+    border-radius: 6px;
+    color: #fff;
+    font-size: 11px;
+    font-family: var(--font-display);
+    cursor: pointer;
+    font-weight: 600;
+}
+
+.btn-save:hover {
+    opacity: 0.9;
+}
+
+.sidebar-hb-btn {
+    width: 100%;
+    padding: 6px;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    color: var(--text);
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 12px;
+    text-align: left;
+    font-family: var(--font-display);
+    transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.sidebar-hb-btn:hover {
+    border-color: var(--accent);
+    box-shadow: 0 0 0 1px var(--accent);
+}
+
+/* ── Sidebar Collapse ── */
+.sidebar-toggle {
+    background: none;
+    border: 1px solid var(--border);
+    color: var(--text-dim);
+    width: 28px;
+    height: 28px;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    transition: border-color 0.15s, color 0.15s;
+}
+
+.sidebar-toggle:hover {
+    border-color: var(--accent);
+    color: var(--accent);
+}
+
+/* Sidebar bottom group */
+.sidebar-bottom {
+    margin-top: auto;
+    padding-top: 12px;
+    border-top: 1px solid var(--border);
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+/* Toggle positioning — absolute, never moves */
+.sidebar-left,
+.sidebar-right {
+    position: relative;
+    contain: layout style;
+}
+
+/* Sidebar content transition (opacity instead of display:none to avoid reflow) */
+.sidebar-left>*:not(.sidebar-toggle),
+.sidebar-right>*:not(.sidebar-toggle) {
+    opacity: 1;
+    transition: opacity 0.15s 0.05s ease-in;
+}
+
+.sidebar-left .sidebar-toggle,
+.sidebar-right .sidebar-toggle {
+    position: absolute;
+    top: 10px;
+    z-index: 2;
+}
+
+.sidebar-left .sidebar-toggle {
+    left: 10px;
+}
+
+.sidebar-right .sidebar-toggle {
+    right: 10px;
+}
+
+/* Collapsed states — opacity fade instead of display:none */
+body.left-collapsed .sidebar-left>*:not(.sidebar-toggle) {
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.1s ease-out;
+}
+
+body.left-collapsed .sidebar-left {
+    padding: 16px 10px;
+    overflow: hidden;
+}
+
+body.right-collapsed .sidebar-right>*:not(.sidebar-toggle) {
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.1s ease-out;
+}
+
+body.right-collapsed .sidebar-right {
+    padding: 16px 10px;
+    overflow: hidden;
+}
+
+/* Responsive — auto-collapse under 900px */
+@media (max-width: 900px) {
+    body:not(.left-expanded) {
+        --sidebar-left-w: var(--sidebar-collapsed-w);
+    }
+
+    body:not(.left-expanded) .sidebar-left>*:not(.sidebar-toggle) {
+        opacity: 0;
+        pointer-events: none;
+    }
+
+    body:not(.left-expanded) .sidebar-left {
+        padding: 16px 10px;
+        overflow: hidden;
+    }
+
+    body:not(.right-expanded) {
+        --sidebar-right-w: var(--sidebar-collapsed-w);
+    }
+
+    body:not(.right-expanded) .sidebar-right>*:not(.sidebar-toggle) {
+        opacity: 0;
+        pointer-events: none;
+    }
+
+    body:not(.right-expanded) .sidebar-right {
+        padding: 16px 10px;
+        overflow: hidden;
+    }
+}
+
+/* ─── Mobile: ≤ 768px — sidebar overlay + bottom nav ─── */
+@media (max-width: 768px) {
+    body {
+        grid-template-columns: 1fr;
+        grid-template-areas: "main";
+    }
+
+    .sidebar-left,
+    .sidebar-right {
+        position: fixed;
+        top: 0;
+        bottom: 0;
+        z-index: 100;
+        width: 280px;
+        transform: translateX(-100%);
+        transition: transform 0.2s ease;
+        min-width: 280px !important;
+    }
+
+    .sidebar-right {
+        right: 0;
+        left: auto;
+        transform: translateX(100%);
+    }
+
+    body.left-expanded .sidebar-left {
+        transform: translateX(0);
+    }
+
+    body.right-expanded .sidebar-right {
+        transform: translateX(0);
+    }
+
+    /* Override 900px collapse rules at mobile */
+    body:not(.left-expanded) .sidebar-left>*:not(.sidebar-toggle) {
+        display: block;
+    }
+
+    .sidebar-toggle {
+        display: none;
+    }
+
+}
+
+.mobile-nav {
+    display: none;
+}

package/public/css/markdown.css

@@ -0,0 +1,270 @@
+/* ── Markdown rendering styles ── */
+
+/* Tables */
+.msg-content table {
+    border-collapse: collapse;
+    width: auto;
+    margin: 8px 0;
+    font-size: 12px;
+    border: 1px solid var(--table-border);
+}
+
+.msg-content th,
+.msg-content td {
+    border: 1px solid rgba(6, 182, 212, 0.35);
+    padding: 5px 12px;
+    text-align: left;
+}
+
+.msg-content th {
+    background: rgba(6, 182, 212, 0.1);
+    font-weight: 600;
+    white-space: nowrap;
+    border-bottom: 2px solid var(--table-border);
+}
+
+.msg-content tr:nth-child(even) {
+    background: rgba(255, 255, 255, 0.03);
+}
+
+/* Code blocks */
+.msg-content pre {
+    background: var(--code-bg);
+    padding: 12px;
+    border-radius: 6px;
+    overflow-x: auto;
+    margin: 8px 0;
+    font-size: 12px;
+    line-height: 1.45;
+}
+
+.msg-content 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;
+    font-family: var(--font-mono);
+}
+
+/* Blockquotes */
+.msg-content blockquote {
+    border-left: 3px solid var(--accent, #60a5fa);
+    margin: 8px 0;
+    padding: 4px 12px;
+    color: var(--text-dim);
+    background: rgba(255, 255, 255, 0.02);
+    border-radius: 0 4px 4px 0;
+}
+
+/* Lists */
+.msg-content ul,
+.msg-content ol {
+    margin: 4px 0;
+    padding-left: 20px;
+}
+
+.msg-content li {
+    margin: 2px 0;
+}
+
+/* Links */
+.msg-content a {
+    color: var(--link-color);
+    text-decoration: none;
+}
+
+.msg-content a:hover {
+    text-decoration: underline;
+}
+
+/* Horizontal rules */
+.msg-content hr {
+    border: none;
+    border-top: 1px solid var(--border);
+    margin: 12px 0;
+}
+
+/* Headings inside messages */
+.msg-content h1,
+.msg-content h2,
+.msg-content h3 {
+    margin: 10px 0 4px;
+    line-height: 1.3;
+}
+
+.msg-content h1 {
+    font-size: 16px;
+}
+
+.msg-content h2 {
+    font-size: 14px;
+}
+
+.msg-content h3 {
+    font-size: 13px;
+}
+
+/* Paragraphs */
+.msg-content p {
+    margin: 4px 0;
+}
+
+/* KaTeX */
+.msg-content .katex-display {
+    margin: 8px 0;
+    overflow-x: auto;
+}
+
+/* Mermaid */
+.msg-content .mermaid-container {
+    margin: 8px 0;
+    text-align: center;
+    position: relative;
+    background: rgba(30, 41, 59, 0.4);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 16px 12px;
+    overflow-x: auto;
+}
+
+.msg-content .mermaid-container svg {
+    max-width: 100%;
+}
+
+/* Mermaid popup button */
+.mermaid-zoom-btn {
+    position: absolute;
+    top: 6px;
+    right: 6px;
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    color: var(--text-dim);
+    width: 28px;
+    height: 28px;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.15s, color 0.15s;
+    z-index: 2;
+}
+
+.mermaid-zoom-btn:hover {
+    background: rgba(255, 255, 255, 0.2);
+    color: var(--text);
+}
+
+/* Mermaid popup overlay */
+.mermaid-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 9999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.mermaid-overlay-backdrop {
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.75);
+    backdrop-filter: blur(6px);
+}
+
+.mermaid-overlay-content {
+    position: relative;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    padding: 20px;
+    max-width: 95vw;
+    max-height: 95vh;
+    overflow: auto;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+    animation: mermaid-pop 0.2s ease-out;
+}
+
+@keyframes mermaid-pop {
+    from {
+        opacity: 0;
+        transform: scale(0.95);
+    }
+
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+.mermaid-overlay-close {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    background: rgba(255, 255, 255, 0.15);
+    border: none;
+    color: var(--text);
+    width: 36px;
+    height: 36px;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 18px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.15s;
+    z-index: 10;
+    pointer-events: auto;
+}
+
+.mermaid-overlay-close:hover {
+    background: rgba(255, 255, 255, 0.3);
+    color: #fff;
+}
+
+.mermaid-overlay-svg {
+    position: relative;
+    z-index: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 400px;
+    min-height: 200px;
+}
+
+/* Code block language label */
+.msg-content .code-block-wrapper {
+    position: relative;
+}
+
+.msg-content .code-lang-label {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 2px 8px;
+    font-size: 10px;
+    color: var(--code-label-color);
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 0 6px 0 4px;
+    font-family: 'SF Mono', monospace;
+    cursor: pointer;
+    user-select: none;
+    transition: background 0.15s, transform 0.15s, color 0.15s;
+}
+
+.msg-content .code-lang-label:hover {
+    background: rgba(255, 255, 255, 0.15);
+    transform: scale(1.05);
+}
+
+.msg-content .code-lang-label.copied {
+    color: #4ade80;
+}