npm - cli-jaw - Versions diffs - 1.7.34 → 1.7.36 - Mend

cli-jaw 1.7.34 → 1.7.36

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (169) hide show

package/public/js/ws.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 // ── WebSocket Connection ──
 import { state } from './state.js';
-import { setStatus, updateQueueBadge, addSystemMsg, appendAgentText, finalizeAgent, addMessage, showProcessStep, cleanupToolActivity, applyQueuedOverlay, hydrateActiveRun, reconcileChatBottomAfterRestore } from './ui.js';
+import { setStatus, updateQueueBadge, addSystemMsg, appendAgentText, finalizeAgent, addMessage, showProcessStep, cleanupToolActivity, applyQueuedOverlay, hydrateActiveRun, reconcileChatBottomAfterRestore, showChatRestoreIndicator } from './ui.js';
 import { renderPendingQueue } from './features/pending-queue.js';
 import { t, getLang } from './features/i18n.js';
 import { getVirtualScroll } from './virtual-scroll.js';
@@ -118,20 +118,36 @@ export function syncOrchestrateSnapshot(reason = 'manual', options: { hydrateRun
     return refreshRuntimeSnapshot(options);
 }
+function syncAfterBrowserRestore(reason: string): void {
+    showChatRestoreIndicator(reason);
+    syncOrchestrateSnapshot(reason)
+        .finally(() => {
+            reconcileChatBottomAfterRestore(reason);
+        })
+        .catch(() => {});
+}
 function registerOrchestrateRestoreHooks(): void {
     if (restoreHooksRegistered) return;
     restoreHooksRegistered = true;
     window.addEventListener('focus', () => {
-        syncOrchestrateSnapshot('focus').catch(() => {});
+        syncAfterBrowserRestore('focus');
     });
     window.addEventListener('pageshow', () => {
-        syncOrchestrateSnapshot('pageshow').catch(() => {});
+        syncAfterBrowserRestore('pageshow');
     });
     document.addEventListener('visibilitychange', () => {
         if (document.visibilityState === 'visible') {
-            syncOrchestrateSnapshot('visibilitychange').catch(() => {});
+            syncAfterBrowserRestore('visibilitychange');
         }
     });
+    document.addEventListener('resume', () => {
+        syncAfterBrowserRestore('resume');
+    });
+    if ('wasDiscarded' in document
+        && Boolean((document as Document & { wasDiscarded?: boolean }).wasDiscarded)) {
+        syncAfterBrowserRestore('discard');
+    }
 }
 /** Hydrate agent phase cache from snapshot (used after reconnect) */

package/public/manager/index.html ADDED Viewed

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Jaw Manager</title>
+</head>
+<body>
+  <div id="manager-root"></div>
+  <script type="module" src="/manager/src/main.tsx"></script>
+</body>
+</html>

package/public/manager/src/App.tsx ADDED Viewed

@@ -0,0 +1,185 @@
+import { useEffect, useMemo, useState } from 'react';
+import { fetchInstances } from './api';
+import { InstancePreview } from './InstancePreview';
+import type { DashboardInstance, DashboardInstanceStatus, DashboardPreviewMode, DashboardScanResult } from './types';
+const STATUS_OPTIONS: Array<'all' | DashboardInstanceStatus> = ['all', 'online', 'offline', 'timeout', 'error', 'unknown'];
+function formatUptime(seconds: number | null): string {
+    if (seconds == null) return 'n/a';
+    const minutes = Math.floor(seconds / 60);
+    if (minutes < 1) return `${Math.round(seconds)}s`;
+    const hours = Math.floor(minutes / 60);
+    if (hours < 1) return `${minutes}m`;
+    return `${hours}h ${minutes % 60}m`;
+}
+function instanceLabel(instance: DashboardInstance): string {
+    return instance.instanceId || instance.homeDisplay || `port-${instance.port}`;
+}
+function statusClass(status: DashboardInstanceStatus): string {
+    return `status status-${status}`;
+}
+export function App() {
+    const [data, setData] = useState<DashboardScanResult | null>(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+    const [query, setQuery] = useState('');
+    const [status, setStatus] = useState<'all' | DashboardInstanceStatus>('all');
+    const [selectedPort, setSelectedPort] = useState<number | null>(null);
+    const [previewMode, setPreviewMode] = useState<DashboardPreviewMode>('proxy');
+    const [previewEnabled, setPreviewEnabled] = useState(true);
+    async function load(): Promise<void> {
+        setLoading(true);
+        setError(null);
+        try {
+            setData(await fetchInstances());
+        } catch (err) {
+            setError((err as Error).message);
+        } finally {
+            setLoading(false);
+        }
+    }
+    useEffect(() => {
+        void load();
+    }, []);
+    const instances = data?.instances || [];
+    const summary = useMemo(() => {
+        return instances.reduce((acc, instance) => {
+            acc.total += 1;
+            acc[instance.status] = (acc[instance.status] || 0) + 1;
+            return acc;
+        }, { total: 0 } as Record<string, number>);
+    }, [instances]);
+    const filtered = useMemo(() => {
+        const needle = query.trim().toLowerCase();
+        return instances.filter((instance) => {
+            if (status !== 'all' && instance.status !== status) return false;
+            if (!needle) return true;
+            return [
+                String(instance.port),
+                instance.url,
+                instanceLabel(instance),
+                instance.version,
+                instance.workingDir,
+                instance.currentCli,
+                instance.currentModel,
+                instance.healthReason,
+            ].some(value => String(value || '').toLowerCase().includes(needle));
+        });
+    }, [instances, query, status]);
+    const selectedInstance = useMemo(() => {
+        if (selectedPort == null) return filtered.find(instance => instance.ok) || null;
+        return instances.find(instance => instance.port === selectedPort) || null;
+    }, [filtered, instances, selectedPort]);
+    return (
+        <main className="dashboard-shell">
+            <header className="dashboard-topbar">
+                <div>
+                    <p className="eyebrow">Jaw Manager</p>
+                    <h1>Instance dashboard</h1>
+                </div>
+                <div className="topbar-meta">
+                    <span>Manager {data?.manager.port || 24576}</span>
+                    <span>Scan {data ? `${data.manager.rangeFrom}-${data.manager.rangeTo}` : '3457-3506'}</span>
+                    <button type="button" onClick={() => void load()} disabled={loading}>
+                        {loading ? 'Scanning' : 'Refresh'}
+                    </button>
+                </div>
+            </header>
+            <section className="summary-grid" aria-label="Instance summary">
+                <div><span>Total</span><strong>{summary.total || 0}</strong></div>
+                <div><span>Online</span><strong>{summary.online || 0}</strong></div>
+                <div><span>Offline</span><strong>{summary.offline || 0}</strong></div>
+                <div><span>Timeout</span><strong>{summary.timeout || 0}</strong></div>
+            </section>
+            <section className="toolbar" aria-label="Filters">
+                <input
+                    value={query}
+                    onChange={event => setQuery(event.target.value)}
+                    placeholder="Search port, home, CLI, model"
+                    aria-label="Search instances"
+                />
+                <select
+                    value={status}
+                    onChange={event => setStatus(event.target.value as 'all' | DashboardInstanceStatus)}
+                    aria-label="Filter by status"
+                >
+                    {STATUS_OPTIONS.map(option => <option key={option} value={option}>{option}</option>)}
+                </select>
+            </section>
+            {error && <section className="state error-state">Scan failed: {error}</section>}
+            {!error && loading && <section className="state">Scanning local Jaw instances...</section>}
+            {!error && !loading && filtered.length === 0 && (
+                <section className="state">No matching instances found.</section>
+            )}
+            {!error && filtered.length > 0 && (
+                <section className="dashboard-layout">
+                    <section className="instance-table" aria-label="Jaw instances">
+                        <div className="table-head">
+                            <span>Status</span>
+                            <span>Instance</span>
+                            <span>Runtime</span>
+                            <span>Last checked</span>
+                            <span>Action</span>
+                        </div>
+                        {filtered.map(instance => (
+                            <article
+                                className={`instance-row ${selectedInstance?.port === instance.port ? 'is-selected' : ''}`}
+                                key={instance.port}
+                            >
+                                <div>
+                                    <span className={statusClass(instance.status)}>{instance.status}</span>
+                                    <span className="port">:{instance.port}</span>
+                                </div>
+                                <div>
+                                    <strong>{instanceLabel(instance)}</strong>
+                                    <span>{instance.workingDir || instance.url}</span>
+                                </div>
+                                <div>
+                                    <span>{instance.currentCli || 'cli n/a'} / {instance.currentModel || 'model n/a'}</span>
+                                    <span>v{instance.version || 'n/a'} · {formatUptime(instance.uptime)}</span>
+                                </div>
+                                <div>
+                                    <span>{new Date(instance.lastCheckedAt).toLocaleTimeString()}</span>
+                                    <span>{instance.healthReason || 'ok'}</span>
+                                </div>
+                                <div className="instance-actions">
+                                    <button
+                                        type="button"
+                                        onClick={() => setSelectedPort(instance.port)}
+                                        disabled={!instance.ok}
+                                    >
+                                        Preview
+                                    </button>
+                                    <a className="open-link" href={instance.url} target="_blank" rel="noreferrer">Open</a>
+                                </div>
+                            </article>
+                        ))}
+                    </section>
+                    <InstancePreview
+                        instance={selectedInstance}
+                        data={data}
+                        mode={previewMode}
+                        previewEnabled={previewEnabled}
+                        onModeChange={setPreviewMode}
+                        onPreviewEnabledChange={setPreviewEnabled}
+                    />
+                </section>
+            )}
+        </main>
+    );
+}

package/public/manager/src/InstancePreview.tsx ADDED Viewed

@@ -0,0 +1,72 @@
+import { buildPreviewState } from './preview';
+import type { DashboardInstance, DashboardPreviewMode, DashboardScanResult } from './types';
+type InstancePreviewProps = {
+    instance: DashboardInstance | null;
+    data: DashboardScanResult | null;
+    mode: DashboardPreviewMode;
+    previewEnabled: boolean;
+    onModeChange: (mode: DashboardPreviewMode) => void;
+    onPreviewEnabledChange: (enabled: boolean) => void;
+};
+export function InstancePreview(props: InstancePreviewProps) {
+    const state = buildPreviewState(
+        props.previewEnabled ? props.instance : null,
+        props.data,
+        props.mode,
+    );
+    return (
+        <aside className="preview-panel" aria-label="Instance preview">
+            <div className="preview-header">
+                <div>
+                    <p className="eyebrow">Preview</p>
+                    <h2>{props.instance ? `:${props.instance.port}` : 'No instance selected'}</h2>
+                </div>
+                {props.instance && (
+                    <a className="open-link" href={props.instance.url} target="_blank" rel="noreferrer">
+                        Open
+                    </a>
+                )}
+            </div>
+            <div className="preview-controls" aria-label="Preview controls">
+                <label className="preview-toggle">
+                    <input
+                        type="checkbox"
+                        checked={props.previewEnabled}
+                        onChange={event => props.onPreviewEnabledChange(event.target.checked)}
+                    />
+                    Enable preview
+                </label>
+                <select
+                    value={props.mode}
+                    onChange={event => props.onModeChange(event.target.value as DashboardPreviewMode)}
+                    aria-label="Preview mode"
+                >
+                    <option value="proxy">Proxy preview</option>
+                    <option value="direct">Direct iframe</option>
+                </select>
+            </div>
+            {!state.canPreview && <div className="preview-empty">{state.reason}</div>}
+            {state.canPreview && state.src && (
+                <iframe
+                    title={`Jaw instance ${props.instance?.port} preview`}
+                    className="preview-frame"
+                    src={state.src}
+                    sandbox="allow-forms allow-modals allow-popups allow-same-origin allow-scripts"
+                />
+            )}
+            {props.mode === 'direct' && (
+                <p className="preview-note">
+                    Preview may be blocked by frame policy. Open the instance in a new tab or use proxy preview.
+                </p>
+            )}
+        </aside>
+    );
+}

package/public/manager/src/api.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import type { DashboardScanResult } from './types';
+export async function fetchInstances(): Promise<DashboardScanResult> {
+    const response = await fetch('/api/dashboard/instances');
+    if (!response.ok) throw new Error(`scan failed: ${response.status}`);
+    return await response.json() as DashboardScanResult;
+}

package/public/manager/src/main.tsx ADDED Viewed

@@ -0,0 +1,9 @@
+import { createRoot } from 'react-dom/client';
+import { App } from './App';
+import './styles.css';
+const root = document.getElementById('manager-root');
+if (!root) throw new Error('manager-root not found');
+createRoot(root).render(<App />);

package/public/manager/src/preview.ts ADDED Viewed

@@ -0,0 +1,35 @@
+import type { DashboardInstance, DashboardPreviewMode, DashboardScanResult } from './types';
+export type PreviewState = {
+    canPreview: boolean;
+    src: string | null;
+    reason: string | null;
+};
+export function buildPreviewState(
+    instance: DashboardInstance | null,
+    data: DashboardScanResult | null,
+    mode: DashboardPreviewMode,
+): PreviewState {
+    if (!instance) {
+        return { canPreview: false, src: null, reason: 'Select an online instance to preview.' };
+    }
+    if (!instance.ok) {
+        return { canPreview: false, src: null, reason: 'Preview is only available for online instances.' };
+    }
+    if (mode === 'proxy') {
+        const proxy = data?.manager.proxy;
+        if (!proxy?.enabled) {
+            return { canPreview: false, src: null, reason: 'Proxy preview is not available.' };
+        }
+        if (instance.port < proxy.allowedFrom || instance.port > proxy.allowedTo) {
+            return { canPreview: false, src: null, reason: 'This port is outside the proxy allowlist.' };
+        }
+        const basePath = proxy.basePath || '/i';
+        return { canPreview: true, src: `${basePath}/${instance.port}/`, reason: null };
+    }
+    return { canPreview: true, src: instance.url, reason: null };
+}

package/public/manager/src/styles.css ADDED Viewed

@@ -0,0 +1,309 @@
+:root {
+    color-scheme: dark;
+    font-family: "Outfit", "Geist", ui-sans-serif, system-ui, sans-serif;
+    background: #111318;
+    color: #eef1f5;
+}
+* {
+    box-sizing: border-box;
+}
+body {
+    margin: 0;
+    min-width: 320px;
+    background: #111318;
+}
+button,
+input,
+select {
+    font: inherit;
+}
+.dashboard-shell {
+    min-height: 100dvh;
+    padding: 18px;
+}
+.dashboard-topbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    padding-bottom: 16px;
+    border-bottom: 1px solid #2b303a;
+}
+.eyebrow {
+    margin: 0 0 4px;
+    color: #7fd7ff;
+    font-size: 12px;
+}
+h1 {
+    margin: 0;
+    font-size: 24px;
+    font-weight: 500;
+    letter-spacing: 0;
+}
+.topbar-meta,
+.toolbar {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-wrap: wrap;
+}
+.topbar-meta span,
+.summary-grid div,
+.toolbar input,
+.toolbar select,
+.state,
+.instance-row,
+.table-head {
+    border: 1px solid #2b303a;
+    background: #181c24;
+    border-radius: 8px;
+}
+.topbar-meta span {
+    padding: 8px 10px;
+    color: #aab3c2;
+    font-size: 13px;
+}
+button,
+.open-link {
+    min-height: 38px;
+    border: 1px solid #236987;
+    background: #123244;
+    color: #d7f4ff;
+    border-radius: 7px;
+    padding: 8px 12px;
+    text-decoration: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+button:disabled {
+    opacity: 0.55;
+}
+.summary-grid {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: 10px;
+    margin: 16px 0;
+}
+.summary-grid div {
+    padding: 12px;
+}
+.summary-grid span,
+.instance-row span,
+.table-head {
+    color: #9aa3b2;
+    font-size: 12px;
+}
+.summary-grid strong {
+    display: block;
+    margin-top: 6px;
+    font-size: 24px;
+    font-weight: 500;
+}
+.toolbar {
+    margin-bottom: 12px;
+}
+.toolbar input,
+.toolbar select {
+    min-height: 40px;
+    color: #eef1f5;
+    padding: 8px 10px;
+}
+.toolbar input {
+    flex: 1;
+    min-width: 220px;
+}
+.state {
+    padding: 18px;
+    color: #aab3c2;
+}
+.error-state {
+    border-color: #6c2d35;
+    color: #ffb9c0;
+}
+.instance-table {
+    display: grid;
+    gap: 8px;
+}
+.dashboard-layout {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(320px, 42vw);
+    gap: 12px;
+    align-items: start;
+}
+.table-head,
+.instance-row {
+    display: grid;
+    grid-template-columns: 150px minmax(180px, 1.4fr) minmax(180px, 1fr) minmax(160px, 0.9fr) 90px;
+    gap: 12px;
+    align-items: center;
+    padding: 10px 12px;
+}
+.instance-row strong,
+.instance-row span {
+    display: block;
+    overflow-wrap: anywhere;
+}
+.instance-row.is-selected {
+    border-color: #7fd7ff;
+}
+.instance-actions {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+}
+.status {
+    width: fit-content;
+    padding: 4px 8px;
+    border-radius: 999px;
+    color: #111318;
+}
+.status-online {
+    background: #65d58d;
+}
+.status-offline,
+.status-unknown {
+    background: #858e9c;
+}
+.status-timeout {
+    background: #f0bd62;
+}
+.status-error {
+    background: #ef717b;
+}
+.port {
+    margin-top: 5px;
+}
+.preview-panel {
+    position: sticky;
+    top: 12px;
+    border: 1px solid #2b303a;
+    background: #181c24;
+    border-radius: 8px;
+    padding: 12px;
+    min-height: 520px;
+}
+.preview-header,
+.preview-controls {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    flex-wrap: wrap;
+}
+.preview-header h2 {
+    margin: 0;
+    font-size: 20px;
+    font-weight: 500;
+    letter-spacing: 0;
+}
+.preview-controls {
+    margin: 12px 0;
+}
+.preview-controls select {
+    min-height: 40px;
+    color: #eef1f5;
+    padding: 8px 10px;
+    border: 1px solid #2b303a;
+    background: #181c24;
+    border-radius: 8px;
+}
+.preview-toggle {
+    min-height: 40px;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    color: #aab3c2;
+    font-size: 13px;
+}
+.preview-frame {
+    width: 100%;
+    height: min(68dvh, 720px);
+    border: 1px solid #2b303a;
+    border-radius: 8px;
+    background: #0f1218;
+}
+.preview-empty {
+    min-height: 360px;
+    display: grid;
+    place-items: center;
+    border: 1px dashed #2b303a;
+    border-radius: 8px;
+    padding: 18px;
+}
+.preview-empty,
+.preview-note {
+    color: #aab3c2;
+    font-size: 13px;
+}
+@media (max-width: 860px) {
+    .dashboard-topbar {
+        align-items: flex-start;
+        flex-direction: column;
+    }
+    .summary-grid {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+    .table-head {
+        display: none;
+    }
+    .instance-row {
+        grid-template-columns: 1fr;
+    }
+}
+@media (max-width: 1080px) {
+    .dashboard-layout {
+        grid-template-columns: 1fr;
+    }
+    .preview-panel {
+        position: static;
+    }
+}