cli-jaw 2.0.10 → 2.0.16

package/public/manager/src/settings-controls.css

@@ -148,6 +148,63 @@
     margin: 4px 8px;
 }
 
+/* ── Dark mode: replace glass gradient with subtle dark glass (explicit dark + auto-dark) ── */
+[data-theme="dark"] .settings-field input:not([type="checkbox"]):not([type="file"]),
+[data-theme="dark"] .settings-field textarea,
+[data-theme="dark"] .settings-field-select > select,
+[data-theme="dark"] .settings-select-trigger {
+    background:
+        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
+        var(--surface-raised);
+    box-shadow:
+        inset 0 1px 0 rgba(255, 255, 255, 0.04),
+        0 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+[data-theme="dark"] .settings-field input:not([type="checkbox"]):not([type="file"]):focus,
+[data-theme="dark"] .settings-field textarea:focus,
+[data-theme="dark"] .settings-field-select > select:focus,
+[data-theme="dark"] .settings-select-trigger:focus-visible {
+    box-shadow:
+        0 0 0 3px color-mix(in srgb, var(--ring) 18%, transparent),
+        inset 0 1px 0 rgba(255, 255, 255, 0.04);
+}
+
+[data-theme="dark"] .settings-select-menu {
+    box-shadow:
+        0 8px 24px rgba(0, 0, 0, 0.5),
+        0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+@media (prefers-color-scheme: dark) {
+    [data-theme="auto"] .settings-field input:not([type="checkbox"]):not([type="file"]),
+    [data-theme="auto"] .settings-field textarea,
+    [data-theme="auto"] .settings-field-select > select,
+    [data-theme="auto"] .settings-select-trigger {
+        background:
+            linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
+            var(--surface-raised);
+        box-shadow:
+            inset 0 1px 0 rgba(255, 255, 255, 0.04),
+            0 1px 2px rgba(0, 0, 0, 0.3);
+    }
+
+    [data-theme="auto"] .settings-field input:not([type="checkbox"]):not([type="file"]):focus,
+    [data-theme="auto"] .settings-field textarea:focus,
+    [data-theme="auto"] .settings-field-select > select:focus,
+    [data-theme="auto"] .settings-select-trigger:focus-visible {
+        box-shadow:
+            0 0 0 3px color-mix(in srgb, var(--ring) 18%, transparent),
+            inset 0 1px 0 rgba(255, 255, 255, 0.04);
+    }
+
+    [data-theme="auto"] .settings-select-menu {
+        box-shadow:
+            0 8px 24px rgba(0, 0, 0, 0.5),
+            0 2px 8px rgba(0, 0, 0, 0.3);
+    }
+}
+
 .settings-select-more {
     width: 100%;
     min-height: 28px;

package/public/manager/src/settings-embedding.css

@@ -46,7 +46,7 @@
 
 .embed-step.is-done .embed-step-badge {
     background: rgba(50, 200, 110, 0.15);
-    color: #32c86e;
+    color: var(--status-running);
 }
 
 .embed-step.is-active .embed-step-badge {
@@ -157,12 +157,12 @@
 
 .dashboard-embed-ok {
     font-size: 12px;
-    color: #32c86e;
+    color: var(--status-running);
     margin: 6px 0 0;
 }
 
 .dashboard-embed-err {
     font-size: 12px;
-    color: var(--text-error, #e55);
+    color: var(--error-text);
     margin: 6px 0 0;
 }

package/public/manager/src/terminal/TerminalPanel.tsx

@@ -0,0 +1,362 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Terminal } from '@xterm/xterm';
+import type { IDisposable, ITheme } from '@xterm/xterm';
+import { FitAddon } from '@xterm/addon-fit';
+import '@xterm/xterm/css/xterm.css';
+import { getTerminalBridge } from './terminal-bridge';
+import './terminal.css';
+
+type TermTab = {
+    id: string;
+    shell: string;
+    cwd: string;
+};
+
+type RuntimeTerminal = {
+    term: Terminal;
+    fit: FitAddon;
+    disposables: IDisposable[];
+    opened: boolean;
+};
+
+type TerminalPanelProps = {
+    onCollapse?: () => void;
+    onEmptySessions?: () => void;
+};
+
+const ACCESSIBILITY_INPUT_FLUSH_MS = 120;
+
+function normalizeTerminalInputValue(value: string): string {
+    return value.replace(/\r?\n/g, '\r');
+}
+
+function createAccessibilityInputBridge(
+    node: HTMLDivElement,
+    writeInput: (value: string) => void,
+): IDisposable {
+    let watchedTextarea: HTMLTextAreaElement | null = null;
+    let composing = false;
+    const onCompositionStart = () => { composing = true; };
+    const onCompositionEnd = () => {
+        window.setTimeout(() => {
+            composing = false;
+            flushTextareaValue();
+        }, 0);
+    };
+    const bindTextarea = (textarea: HTMLTextAreaElement) => {
+        if (watchedTextarea === textarea) return;
+        if (watchedTextarea) {
+            watchedTextarea.removeEventListener('input', flushTextareaValue);
+            watchedTextarea.removeEventListener('compositionstart', onCompositionStart);
+            watchedTextarea.removeEventListener('compositionend', onCompositionEnd);
+        }
+        watchedTextarea = textarea;
+        watchedTextarea.addEventListener('input', flushTextareaValue);
+        watchedTextarea.addEventListener('compositionstart', onCompositionStart);
+        watchedTextarea.addEventListener('compositionend', onCompositionEnd);
+    };
+    function flushTextareaValue() {
+        const textarea = node.querySelector<HTMLTextAreaElement>('textarea.terminal-a11y-input');
+        if (!textarea) return;
+        bindTextarea(textarea);
+        if (composing) return;
+        const rawValue = textarea.value;
+        if (!rawValue) return;
+        textarea.value = '';
+        const value = normalizeTerminalInputValue(rawValue);
+        writeInput(value);
+    }
+    const interval = window.setInterval(flushTextareaValue, ACCESSIBILITY_INPUT_FLUSH_MS);
+    flushTextareaValue();
+    return {
+        dispose: () => {
+            window.clearInterval(interval);
+            if (watchedTextarea) {
+                watchedTextarea.removeEventListener('input', flushTextareaValue);
+                watchedTextarea.removeEventListener('compositionstart', onCompositionStart);
+                watchedTextarea.removeEventListener('compositionend', onCompositionEnd);
+            }
+        },
+    };
+}
+
+function readTheme(): ITheme {
+    return {
+        background: '#0b1020',
+        foreground: '#e5edf8',
+        cursor: '#38bdf8',
+        selectionBackground: 'rgba(56, 189, 248, 0.22)',
+        black: '#0f172a',
+        brightBlack: '#475569',
+        red: '#ef4444',
+        brightRed: '#f87171',
+        green: '#22c55e',
+        brightGreen: '#4ade80',
+        yellow: '#eab308',
+        brightYellow: '#facc15',
+        blue: '#3b82f6',
+        brightBlue: '#60a5fa',
+        magenta: '#d946ef',
+        brightMagenta: '#e879f9',
+        cyan: '#06b6d4',
+        brightCyan: '#22d3ee',
+        white: '#e5e7eb',
+        brightWhite: '#f8fafc',
+    };
+}
+
+export function TerminalPanel(props: TerminalPanelProps = {}) {
+    const bridge = getTerminalBridge();
+    const [tabs, setTabs] = useState<TermTab[]>([]);
+    const [activeId, setActiveId] = useState<string | null>(null);
+    const [error, setError] = useState<string | null>(null);
+    const [isCreating, setIsCreating] = useState(false);
+    const panelRef = useRef<HTMLDivElement | null>(null);
+    const runtimesRef = useRef<Map<string, RuntimeTerminal>>(new Map());
+    const pendingOutputRef = useRef<Map<string, string>>(new Map());
+    const tabsRef = useRef<TermTab[]>(tabs);
+    const activeIdRef = useRef<string | null>(activeId);
+    const autoCreatedRef = useRef(false);
+    const onEmptySessionsRef = useRef(props.onEmptySessions);
+
+    tabsRef.current = tabs;
+    activeIdRef.current = activeId;
+    onEmptySessionsRef.current = props.onEmptySessions;
+
+    const notifyEmptySessionsSoon = useCallback(() => {
+        window.setTimeout(() => onEmptySessionsRef.current?.(), 0);
+    }, []);
+
+    const fitTerminal = useCallback((id: string) => {
+        const runtime = runtimesRef.current.get(id);
+        if (!bridge || !runtime?.opened) return;
+        try {
+            runtime.fit.fit();
+            void bridge.resize(id, runtime.term.cols, runtime.term.rows);
+        } catch (err) {
+            setError((err as Error).message);
+        }
+    }, [bridge]);
+
+    const disposeRuntime = useCallback((id: string) => {
+        const runtime = runtimesRef.current.get(id);
+        if (!runtime) return;
+        for (const disposable of runtime.disposables) {
+            try { disposable.dispose(); } catch { /* ignore */ }
+        }
+        try { runtime.term.dispose(); } catch { /* ignore */ }
+        runtimesRef.current.delete(id);
+        pendingOutputRef.current.delete(id);
+    }, []);
+
+    const createRuntime = useCallback((id: string) => {
+        if (!bridge || runtimesRef.current.has(id)) return;
+        const term = new Terminal({
+            cursorBlink: true,
+            cursorStyle: 'block',
+            fontFamily: "'SF Mono', 'Menlo', 'Monaco', 'Consolas', monospace",
+            fontSize: 12,
+            lineHeight: 1.22,
+            scrollback: 10_000,
+            convertEol: false,
+            theme: readTheme(),
+        });
+        const fit = new FitAddon();
+        term.loadAddon(fit);
+        const disposables = [
+            term.onData(data => {
+                void bridge.write(id, data);
+            }),
+            term.onResize(({ cols, rows }) => { void bridge.resize(id, cols, rows); }),
+        ];
+        runtimesRef.current.set(id, { term, fit, disposables, opened: false });
+        const pending = pendingOutputRef.current.get(id);
+        if (pending) {
+            term.write(pending);
+            pendingOutputRef.current.delete(id);
+        }
+    }, [bridge]);
+
+    const createSession = useCallback(async () => {
+        if (!bridge) return;
+        setIsCreating(true);
+        try {
+            const result = await bridge.create({ cols: 80, rows: 24 });
+            if (!result.ok || !result.id) {
+                setError(result.error ?? 'Failed to start terminal session');
+                return;
+            }
+            createRuntime(result.id);
+            const tab: TermTab = { id: result.id, shell: result.shell ?? 'sh', cwd: result.cwd ?? '~' };
+            setError(null);
+            setTabs(prev => [...prev, tab]);
+            setActiveId(result.id);
+            window.setTimeout(() => {
+                fitTerminal(result.id!);
+                runtimesRef.current.get(result.id!)?.term.focus();
+            }, 0);
+        } finally {
+            setIsCreating(false);
+        }
+    }, [bridge, createRuntime, fitTerminal]);
+
+    const closeSession = useCallback((id: string) => {
+        if (!bridge) return;
+        void bridge.kill(id);
+        disposeRuntime(id);
+        setTabs(prev => {
+            const next = prev.filter(tab => tab.id !== id);
+            setActiveId(current => current === id ? (next[0]?.id ?? null) : current);
+            if (prev.length > 0 && next.length === 0) notifyEmptySessionsSoon();
+            return next;
+        });
+    }, [bridge, disposeRuntime, notifyEmptySessionsSoon]);
+
+    const attachHost = useCallback((id: string, node: HTMLDivElement | null) => {
+        if (!node || !bridge) return;
+        const runtime = runtimesRef.current.get(id);
+        if (!runtime || runtime.opened) return;
+        runtime.term.open(node);
+        runtime.opened = true;
+        runtime.disposables.push(createAccessibilityInputBridge(node, value => {
+            void bridge.write(id, value);
+        }));
+        fitTerminal(id);
+        if (activeIdRef.current === id) runtime.term.focus();
+    }, [bridge, fitTerminal]);
+
+    useEffect(() => {
+        if (!bridge) return;
+        if (tabs.length === 0 && !autoCreatedRef.current) {
+            autoCreatedRef.current = true;
+            void createSession();
+        }
+    }, [bridge, tabs.length, createSession]);
+
+    useEffect(() => {
+        if (!bridge) return;
+        const offData = bridge.onData((id, data) => {
+            const runtime = runtimesRef.current.get(id);
+            if (runtime) {
+                runtime.term.write(data);
+                return;
+            }
+            pendingOutputRef.current.set(id, `${pendingOutputRef.current.get(id) ?? ''}${data}`);
+        });
+        const offExit = bridge.onExit((id, code) => {
+            const runtime = runtimesRef.current.get(id);
+            runtime?.term.writeln(`\r\n[process exited with code ${code ?? 'unknown'}]`);
+            disposeRuntime(id);
+            setTabs(prev => {
+                const next = prev.filter(tab => tab.id !== id);
+                if (prev.length > 0 && next.length === 0) notifyEmptySessionsSoon();
+                return next;
+            });
+            setActiveId(prev => prev === id ? (tabsRef.current.find(tab => tab.id !== id)?.id ?? null) : prev);
+        });
+        return () => {
+            offData();
+            offExit();
+            for (const tab of tabsRef.current) {
+                void bridge.kill(tab.id);
+            }
+            for (const id of Array.from(runtimesRef.current.keys())) {
+                disposeRuntime(id);
+            }
+        };
+    }, [bridge, disposeRuntime, notifyEmptySessionsSoon]);
+
+    useEffect(() => {
+        if (!activeId) return;
+        window.setTimeout(() => {
+            fitTerminal(activeId);
+            runtimesRef.current.get(activeId)?.term.focus();
+        }, 0);
+    }, [activeId, fitTerminal]);
+
+    useEffect(() => {
+        if (!panelRef.current || typeof ResizeObserver === 'undefined') return;
+        const observer = new ResizeObserver(() => {
+            const id = activeIdRef.current;
+            if (id) fitTerminal(id);
+        });
+        observer.observe(panelRef.current);
+        return () => observer.disconnect();
+    }, [fitTerminal]);
+
+    if (!bridge) {
+        return <div className="terminal-panel terminal-unavailable">Terminal requires Electron desktop app</div>;
+    }
+
+    const activeTab = tabs.find(tab => tab.id === activeId);
+    const statusText = activeTab?.cwd ?? (isCreating ? 'Starting shell...' : 'No terminal sessions');
+
+    return (
+        <div className="terminal-panel" ref={panelRef}>
+            <div className="terminal-tab-bar">
+                {tabs.map(tab => (
+                    <div
+                        key={tab.id}
+                        className={`terminal-tab-item ${tab.id === activeId ? 'is-active' : ''}`}
+                    >
+                        <button
+                            type="button"
+                            className="terminal-tab"
+                            onClick={() => setActiveId(tab.id)}
+                        >
+                            {tab.shell.split('/').pop()}
+                        </button>
+                        <button
+                            type="button"
+                            className="terminal-tab-close"
+                            aria-label={`Close ${tab.shell.split('/').pop() ?? 'terminal'} session`}
+                            title="Close terminal session"
+                            onClick={() => closeSession(tab.id)}
+                        >
+                            ×
+                        </button>
+                    </div>
+                ))}
+                <button type="button" className="terminal-tab terminal-new-tab" aria-label="New terminal" disabled={isCreating} onClick={() => void createSession()}>+</button>
+                <span className="terminal-status">{statusText}</span>
+                {props.onCollapse && (
+                    <button
+                        type="button"
+                        className="terminal-collapse-button"
+                        aria-label="Collapse terminal panel"
+                        title="Collapse terminal panel"
+                        onClick={props.onCollapse}
+                    >
+                        ▼
+                    </button>
+                )}
+            </div>
+            <div className="terminal-xterm-host" aria-label="Terminal output">
+                {tabs.map(tab => (
+                    <div
+                        key={tab.id}
+                        ref={node => attachHost(tab.id, node)}
+                        className={`terminal-xterm-surface${tab.id === activeId ? ' is-active' : ''}`}
+                        onPointerDown={() => runtimesRef.current.get(tab.id)?.term.focus()}
+                    >
+                        <textarea
+                            className="terminal-a11y-input"
+                            aria-label="Terminal automation input"
+                            autoCapitalize="off"
+                            autoComplete="off"
+                            autoCorrect="off"
+                            spellCheck={false}
+                            tabIndex={tab.id === activeId ? 0 : -1}
+                        />
+                    </div>
+                ))}
+                {tabs.length === 0 && (
+                    <div className="terminal-empty">
+                        <button type="button" disabled={isCreating} onClick={() => void createSession()}>New terminal</button>
+                    </div>
+                )}
+            </div>
+            {error && <div className="terminal-error" role="status">{error}</div>}
+        </div>
+    );
+}

package/public/manager/src/terminal/terminal-bridge.ts

@@ -0,0 +1,12 @@
+import { getDesktop, isElectron as isElectronCheck } from '../panels/desktop-bridge';
+import type { TerminalBridgeApi } from '../panels/desktop-bridge';
+
+export type { TerminalBridgeApi };
+
+export function getTerminalBridge(): TerminalBridgeApi | null {
+    return getDesktop()?.terminal ?? null;
+}
+
+export function isElectron(): boolean {
+    return isElectronCheck();
+}

package/public/manager/src/terminal/terminal.css

@@ -0,0 +1,175 @@
+.terminal-panel {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background: #0b1020;
+    color: #e5edf8;
+    font-family: 'SF Mono', 'Menlo', 'Monaco', 'Consolas', monospace;
+    font-size: 13px;
+}
+.terminal-unavailable {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--text-dim);
+    font-size: 12px;
+}
+.terminal-tab-bar {
+    display: flex;
+    gap: 4px;
+    padding: 0 4px;
+    min-height: 30px;
+    align-items: center;
+    background: var(--surface-raised);
+    border-bottom: 1px solid var(--border-subtle);
+    flex-shrink: 0;
+}
+.terminal-tab-item {
+    display: inline-flex;
+    align-items: center;
+    min-height: 28px;
+    border-bottom: 2px solid transparent;
+}
+.terminal-tab-item.is-active {
+    border-bottom-color: #2563eb;
+}
+.terminal-tab {
+    all: unset;
+    cursor: pointer;
+    padding: 2px 8px;
+    font-size: 11px;
+    color: var(--text-secondary);
+}
+.terminal-tab:hover { color: var(--text-primary); }
+.terminal-tab-item.is-active .terminal-tab { color: var(--text-primary); }
+.terminal-new-tab { font-size: 14px; font-weight: 600; }
+.terminal-tab-close {
+    all: unset;
+    box-sizing: border-box;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 22px;
+    height: 22px;
+    border-radius: 4px;
+    color: var(--text-secondary);
+    font-size: 14px;
+    line-height: 1;
+}
+.terminal-tab-close:hover,
+.terminal-tab-close:focus-visible {
+    color: var(--text-primary);
+    background: var(--row-bg-hover);
+}
+.terminal-output {
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+    padding: 8px;
+    outline: none;
+}
+.terminal-pre {
+    margin: 0;
+    white-space: pre-wrap;
+    word-break: break-all;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: 1.4;
+}
+.terminal-hidden { display: none; }
+.terminal-xterm-host {
+    position: relative;
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+    padding: 6px 8px;
+    background: #0b1020;
+}
+.terminal-xterm-surface {
+    position: absolute;
+    inset: 6px 8px;
+    display: none;
+    min-width: 0;
+    min-height: 0;
+}
+.terminal-xterm-surface.is-active {
+    display: block;
+}
+.terminal-a11y-input {
+    position: absolute;
+    top: 0;
+    left: -9999em;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    border: 0;
+    opacity: 0;
+    resize: none;
+    overflow: hidden;
+}
+.terminal-xterm-surface .xterm {
+    height: 100%;
+}
+.terminal-xterm-surface .xterm-viewport {
+    background: transparent !important;
+}
+.terminal-status {
+    margin-left: auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--text-secondary);
+    font-size: 11px;
+}
+.terminal-collapse-button {
+    all: unset;
+    box-sizing: border-box;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    border-radius: 4px;
+    color: var(--text-secondary);
+    font-size: 11px;
+    line-height: 1;
+    flex: 0 0 auto;
+}
+.terminal-collapse-button:hover,
+.terminal-collapse-button:focus-visible {
+    color: var(--text-primary);
+    background: var(--row-bg-hover);
+}
+.terminal-empty {
+    position: absolute;
+    inset: 6px 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--text-dim);
+    font-size: 12px;
+}
+.terminal-empty button {
+    all: unset;
+    cursor: pointer;
+    padding: 6px 10px;
+    border-radius: 5px;
+    border: 1px solid #334155;
+    background: #111827;
+    color: #e5edf8;
+}
+.terminal-empty button:hover,
+.terminal-empty button:focus-visible {
+    background: #1f2937;
+}
+.terminal-error {
+    flex-shrink: 0;
+    padding: 6px 8px;
+    border-top: 1px solid var(--border-subtle);
+    color: var(--danger, #f87171);
+    background: color-mix(in srgb, var(--danger, #f87171) 8%, transparent);
+    font-size: 12px;
+}