Changeset 0.37.18 (#230)
Co-authored-by: gobha <jasafpro@gmail.com> Co-committed-by: gobha <jasafpro@gmail.com>
This commit is contained in:
@@ -112,6 +112,26 @@ export function extractCodeBlocks(htmlStr) {
|
||||
return segments;
|
||||
}
|
||||
|
||||
/**
|
||||
* Map language tag to file extension.
|
||||
* @param {string} lang
|
||||
* @returns {string}
|
||||
*/
|
||||
export function guessExtension(lang) {
|
||||
const map = {
|
||||
javascript: 'js', typescript: 'ts', python: 'py', ruby: 'rb',
|
||||
go: 'go', rust: 'rs', java: 'java', kotlin: 'kt', swift: 'swift',
|
||||
c: 'c', cpp: 'cpp', csharp: 'cs', php: 'php', bash: 'sh',
|
||||
shell: 'sh', zsh: 'sh', sql: 'sql', html: 'html', css: 'css',
|
||||
json: 'json', yaml: 'yaml', yml: 'yml', xml: 'xml', toml: 'toml',
|
||||
markdown: 'md', md: 'md', jsx: 'jsx', tsx: 'tsx', vue: 'vue',
|
||||
svelte: 'svelte', scss: 'scss', less: 'less', lua: 'lua',
|
||||
perl: 'pl', r: 'r', dart: 'dart', elixir: 'ex', erlang: 'erl',
|
||||
haskell: 'hs', scala: 'scala', zig: 'zig', nim: 'nim',
|
||||
};
|
||||
return map[(lang || '').toLowerCase()] || 'txt';
|
||||
}
|
||||
|
||||
function _unescapeHtml(text) {
|
||||
return text
|
||||
.replace(/&/g, '&')
|
||||
|
||||
@@ -38,15 +38,25 @@ const DELETE_SVG = html`
|
||||
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
|
||||
</svg>`;
|
||||
|
||||
const SAVE_SVG = html`
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
|
||||
<polyline points="17 21 17 13 7 13 7 21"/>
|
||||
<polyline points="7 3 7 8 15 8"/>
|
||||
</svg>`;
|
||||
|
||||
/**
|
||||
* @param {{
|
||||
* role: string,
|
||||
* content: string,
|
||||
* onRegenerate?: () => void,
|
||||
* onDelete?: () => void,
|
||||
* onSave?: () => void,
|
||||
* hasCodeBlocks?: boolean,
|
||||
* }} props
|
||||
*/
|
||||
export function MessageActions({ role, content, onRegenerate, onDelete }) {
|
||||
export function MessageActions({ role, content, onRegenerate, onDelete, onSave, hasCodeBlocks }) {
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
const _copy = useCallback(async () => {
|
||||
@@ -80,6 +90,13 @@ export function MessageActions({ role, content, onRegenerate, onDelete }) {
|
||||
aria-label="Copy message text">
|
||||
${copied ? CHECK_SVG : COPY_SVG}
|
||||
</button>
|
||||
${role === 'assistant' && hasCodeBlocks && onSave && html`
|
||||
<button class="sw-chat-msg__action-btn"
|
||||
title="Save to workspace"
|
||||
onClick=${onSave}
|
||||
aria-label="Save code to workspace">
|
||||
${SAVE_SVG}
|
||||
</button>`}
|
||||
${onDelete && html`
|
||||
<button class="sw-chat-msg__action-btn sw-chat-msg__action-btn--danger"
|
||||
title="Delete"
|
||||
|
||||
@@ -12,11 +12,11 @@
|
||||
// onRegenerate=${fn} onDelete=${fn} />`
|
||||
|
||||
import { renderMarkdown } from './markdown.js';
|
||||
import { CodeBlock, extractCodeBlocks } from './code-block.js';
|
||||
import { CodeBlock, extractCodeBlocks, guessExtension } from './code-block.js';
|
||||
import { MessageActions } from './message-actions.js';
|
||||
|
||||
const html = window.html;
|
||||
const { useMemo } = window.hooks;
|
||||
const { useMemo, useCallback } = window.hooks;
|
||||
|
||||
/**
|
||||
* Format a relative time string from an ISO date.
|
||||
@@ -65,6 +65,33 @@ export function MessageBubble({ role, content, thinking, id, created_at, streami
|
||||
}, [thinking]);
|
||||
|
||||
const timeStr = _relTime(created_at);
|
||||
const hasCodeBlocks = useMemo(() => segments.some(s => s.type === 'code'), [segments]);
|
||||
|
||||
const handleSave = useCallback(async () => {
|
||||
if (!window.sw?.api?.workspaces?.getDefault) return;
|
||||
const codeBlocks = segments.filter(s => s.type === 'code');
|
||||
if (codeBlocks.length === 0) return;
|
||||
|
||||
try {
|
||||
const ws = await window.sw.api.workspaces.getDefault();
|
||||
const ts = Date.now();
|
||||
for (let i = 0; i < codeBlocks.length; i++) {
|
||||
const block = codeBlocks[i];
|
||||
const ext = guessExtension(block.language);
|
||||
const filename = codeBlocks.length === 1
|
||||
? `snippet-${ts}.${ext}`
|
||||
: `snippet-${ts}-${i + 1}.${ext}`;
|
||||
await window.sw.api.workspaces.writeFile(ws.id, filename, block.code);
|
||||
}
|
||||
if (window.sw?.toast) {
|
||||
window.sw.toast(`Saved ${codeBlocks.length} file${codeBlocks.length > 1 ? 's' : ''} to My Files`, 'success');
|
||||
}
|
||||
} catch (err) {
|
||||
if (window.sw?.toast) {
|
||||
window.sw.toast('Failed to save: ' + (err.message || err), 'error');
|
||||
}
|
||||
}
|
||||
}, [segments]);
|
||||
|
||||
// While streaming, show thinking open if content hasn't started yet
|
||||
const thinkingOpen = streaming && thinking && !content;
|
||||
@@ -93,7 +120,9 @@ export function MessageBubble({ role, content, thinking, id, created_at, streami
|
||||
role=${role}
|
||||
content=${content}
|
||||
onRegenerate=${onRegenerate}
|
||||
onDelete=${onDelete} />
|
||||
onDelete=${onDelete}
|
||||
hasCodeBlocks=${hasCodeBlocks}
|
||||
onSave=${handleSave} />
|
||||
</div>`}
|
||||
</div>`;
|
||||
}
|
||||
|
||||
@@ -10,11 +10,14 @@
|
||||
const { useState, useEffect } = window.hooks;
|
||||
const html = window.html;
|
||||
|
||||
const HEALTH_DOTS = { healthy: '\u{1F7E2}', degraded: '\u{1F7E1}', inactive: '\u{1F534}' };
|
||||
|
||||
/**
|
||||
* @param {{ value: string, onChange: (id: string) => void }} props
|
||||
*/
|
||||
export function ModelSelector({ value, onChange }) {
|
||||
const [models, setModels] = useState([]);
|
||||
const [health, setHealth] = useState({});
|
||||
|
||||
useEffect(() => {
|
||||
if (!window.sw?.api?.models?.enabled) return;
|
||||
@@ -23,13 +26,25 @@ export function ModelSelector({ value, onChange }) {
|
||||
if (cancelled) return;
|
||||
const list = (resp.data || []).filter(m => !m.hidden);
|
||||
setModels(list);
|
||||
// Auto-select first model if no value set
|
||||
if (!value && list.length && onChange) {
|
||||
const first = list[0];
|
||||
const id = first.isPersona ? (first.personaId || first.id) : first.id;
|
||||
onChange(id);
|
||||
}
|
||||
}).catch(() => {});
|
||||
|
||||
// Fetch provider health for admin users (graceful degrade for non-admin)
|
||||
if (window.sw?.api?.admin?.providers?.health) {
|
||||
window.sw.api.admin.providers.health().then(resp => {
|
||||
if (cancelled) return;
|
||||
const map = {};
|
||||
for (const p of (resp.data || resp || [])) {
|
||||
if (p.provider_name) map[p.provider_name] = p.status;
|
||||
}
|
||||
setHealth(map);
|
||||
}).catch(() => {});
|
||||
}
|
||||
|
||||
return () => { cancelled = true; };
|
||||
}, []);
|
||||
|
||||
@@ -47,7 +62,10 @@ export function ModelSelector({ value, onChange }) {
|
||||
<option value="" disabled selected>No models</option>`}
|
||||
${models.map(m => {
|
||||
const id = m.isPersona ? (m.personaId || m.id) : m.id;
|
||||
const label = (m.isPersona ? '\ud83c\udfad ' : '') + (m.name || m.id);
|
||||
const dot = !m.isPersona && m.provider_name && health[m.provider_name]
|
||||
? (HEALTH_DOTS[health[m.provider_name]] || '') + ' '
|
||||
: '';
|
||||
const label = (m.isPersona ? '\ud83c\udfad ' : dot) + (m.name || m.id);
|
||||
return html`<option key=${id} value=${id}>${label}</option>`;
|
||||
})}
|
||||
</select>`;
|
||||
|
||||
37
src/js/sw/components/debug/badge.js
Normal file
37
src/js/sw/components/debug/badge.js
Normal file
@@ -0,0 +1,37 @@
|
||||
// ==========================================
|
||||
// Debug Modal — Badge Component
|
||||
// ==========================================
|
||||
// Bug badge that shows error count. Subscribes to engine
|
||||
// for reactive updates.
|
||||
//
|
||||
// v0.37.18: Preact rebuild from debug.js _updateBadge().
|
||||
|
||||
const html = window.html;
|
||||
const { useEffect } = window.hooks;
|
||||
|
||||
/**
|
||||
* Updates the sidebar .avatar-bug element with current error count.
|
||||
* Not a visible Preact component — just a side-effect hook.
|
||||
*
|
||||
* @param {{ engine: object }} props
|
||||
*/
|
||||
export function DebugBadge({ engine }) {
|
||||
useEffect(() => {
|
||||
function update() {
|
||||
const bug = document.querySelector('.avatar-bug');
|
||||
if (!bug) return;
|
||||
if (engine.errorCount > 0) {
|
||||
bug.title = `${engine.errorCount} error${engine.errorCount > 1 ? 's' : ''} \u2014 click for Debug Log`;
|
||||
bug.classList.add('has-errors');
|
||||
} else {
|
||||
bug.title = 'Debug available';
|
||||
bug.classList.remove('has-errors');
|
||||
}
|
||||
}
|
||||
|
||||
update(); // initial
|
||||
return engine.subscribe(update);
|
||||
}, [engine]);
|
||||
|
||||
return null; // invisible — side-effect only
|
||||
}
|
||||
73
src/js/sw/components/debug/console-tab.js
Normal file
73
src/js/sw/components/debug/console-tab.js
Normal file
@@ -0,0 +1,73 @@
|
||||
// ==========================================
|
||||
// Debug Modal — Console Tab
|
||||
// ==========================================
|
||||
// Filterable console log display with type coloring,
|
||||
// elapsed timestamps, and auto-scroll.
|
||||
//
|
||||
// v0.37.18: Preact rebuild from debug.js _renderConsoleTab().
|
||||
|
||||
const html = window.html;
|
||||
const { useState, useMemo, useRef, useEffect } = window.hooks;
|
||||
|
||||
const TYPE_COLORS = {
|
||||
'ERROR': '#e74c3c', 'EXCEPTION': '#e74c3c', 'REJECTION': '#e74c3c',
|
||||
'NET:ERR': '#e74c3c', 'NET:PROXY': '#ff6b35',
|
||||
'WARN': '#f39c12', 'WARNING': '#f39c12',
|
||||
'LOG': '#95a5a6', 'INFO': '#3498db', 'DEBUG': '#7f8c8d',
|
||||
'NET': '#2ecc71',
|
||||
'DIAG': '#9b59b6'
|
||||
};
|
||||
|
||||
const ERROR_TYPES = new Set(['ERROR', 'EXCEPTION', 'REJECTION', 'NET:ERR', 'NET:PROXY', 'WARN']);
|
||||
|
||||
function _esc(s) {
|
||||
if (!s) return '';
|
||||
return String(s).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {{ entries: Array }} props
|
||||
*/
|
||||
export function ConsoleTab({ entries }) {
|
||||
const [errorsOnly, setErrorsOnly] = useState(false);
|
||||
const [autoScroll, setAutoScroll] = useState(true);
|
||||
const contentRef = useRef(null);
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
if (!errorsOnly) return entries;
|
||||
return entries.filter(e => ERROR_TYPES.has(e.type));
|
||||
}, [entries, errorsOnly]);
|
||||
|
||||
useEffect(() => {
|
||||
if (autoScroll && contentRef.current) {
|
||||
contentRef.current.scrollTop = contentRef.current.scrollHeight;
|
||||
}
|
||||
}, [filtered, autoScroll]);
|
||||
|
||||
return html`
|
||||
<div class="debug-console-tab">
|
||||
<div class="debug-toolbar">
|
||||
<label class="debug-check">
|
||||
<input type="checkbox" checked=${errorsOnly}
|
||||
onChange=${e => setErrorsOnly(e.target.checked)} />
|
||||
Errors only
|
||||
</label>
|
||||
<label class="debug-check">
|
||||
<input type="checkbox" checked=${autoScroll}
|
||||
onChange=${e => setAutoScroll(e.target.checked)} />
|
||||
Auto-scroll
|
||||
</label>
|
||||
<span class="debug-badge">${filtered.length}</span>
|
||||
</div>
|
||||
<div class="debug-content" ref=${contentRef}>
|
||||
${filtered.length === 0
|
||||
? html`<div class="debug-empty">No log entries yet</div>`
|
||||
: filtered.map((entry, i) => html`
|
||||
<div class="debug-entry" key=${i}>
|
||||
<span class="debug-time">${entry.ts.slice(11, 23)} +${(entry.elapsed / 1000).toFixed(1)}s</span>${' '}
|
||||
<span style="color:${TYPE_COLORS[entry.type] || '#95a5a6'};font-weight:bold;">[${_esc(entry.type)}]</span>${' '}
|
||||
<span class="debug-msg">${_esc(entry.message)}</span>
|
||||
</div>`)}
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
426
src/js/sw/components/debug/engine.js
Normal file
426
src/js/sw/components/debug/engine.js
Normal file
@@ -0,0 +1,426 @@
|
||||
// ==========================================
|
||||
// Debug Engine — Preact-compatible data layer
|
||||
// ==========================================
|
||||
// Console interceptor, fetch logger, error tracker, diagnostics.
|
||||
// Singleton — init() must run before SDK boot to capture early errors.
|
||||
// UI-agnostic: Preact components subscribe via .subscribe().
|
||||
//
|
||||
// v0.37.18: Extracted from debug.js (v0.37.14).
|
||||
//
|
||||
// Exports: debugEngine (singleton)
|
||||
|
||||
export const debugEngine = {
|
||||
entries: [],
|
||||
maxEntries: 500,
|
||||
networkLog: [],
|
||||
maxNetwork: 200,
|
||||
errorCount: 0,
|
||||
|
||||
_origConsole: {},
|
||||
_origFetch: null,
|
||||
_initTime: Date.now(),
|
||||
_subscribers: new Set(),
|
||||
|
||||
// ── Bootstrap ────────────────────────────
|
||||
|
||||
init() {
|
||||
this._interceptConsole();
|
||||
this._interceptFetch();
|
||||
this._interceptErrors();
|
||||
this._registerShortcut();
|
||||
this.log('DEBUG', 'Debug engine initialized');
|
||||
this.log('DEBUG', `Page: ${location.href}`);
|
||||
this.log('DEBUG', `UA: ${navigator.userAgent.slice(0, 120)}`);
|
||||
},
|
||||
|
||||
// ── Subscription (reactive updates) ─────
|
||||
|
||||
subscribe(fn) {
|
||||
this._subscribers.add(fn);
|
||||
return () => this._subscribers.delete(fn);
|
||||
},
|
||||
|
||||
_notify() {
|
||||
for (const fn of this._subscribers) {
|
||||
try { fn(); } catch (_) { /* subscriber error */ }
|
||||
}
|
||||
},
|
||||
|
||||
// ── Console Interception ────────────────
|
||||
|
||||
_interceptConsole() {
|
||||
['log', 'warn', 'error', 'info', 'debug'].forEach(method => {
|
||||
this._origConsole[method] = console[method].bind(console);
|
||||
console[method] = (...args) => {
|
||||
const type = method.toUpperCase();
|
||||
const message = args.map(a => this._serialize(a)).join(' ');
|
||||
this._addEntry(type, message);
|
||||
this._origConsole[method](...args);
|
||||
};
|
||||
});
|
||||
},
|
||||
|
||||
// ── Fetch Interception ──────────────────
|
||||
|
||||
_interceptFetch() {
|
||||
this._origFetch = window.fetch.bind(window);
|
||||
const self = this;
|
||||
|
||||
window.fetch = async function(input, init) {
|
||||
const url = typeof input === 'string' ? input : input?.url || String(input);
|
||||
const method = init?.method || 'GET';
|
||||
const entry = {
|
||||
id: Date.now(),
|
||||
ts: new Date().toISOString(),
|
||||
method,
|
||||
url: url.slice(0, 300),
|
||||
status: null,
|
||||
statusText: '',
|
||||
contentType: null,
|
||||
duration: null,
|
||||
error: null,
|
||||
responsePreview: null,
|
||||
requestBodyPreview: null,
|
||||
proxyDetected: false
|
||||
};
|
||||
|
||||
// Capture request body preview (redact keys)
|
||||
if (init?.body) {
|
||||
try {
|
||||
const bodyStr = typeof init.body === 'string' ? init.body : '';
|
||||
const parsed = bodyStr ? JSON.parse(bodyStr) : {};
|
||||
const safe = { ...parsed };
|
||||
['password', 'api_key', 'apiKey', 'refresh_token', 'access_token'].forEach(k => {
|
||||
if (safe[k]) safe[k] = '***';
|
||||
});
|
||||
entry.requestBodyPreview = JSON.stringify(safe).slice(0, 300);
|
||||
} catch (_) {
|
||||
entry.requestBodyPreview = '(non-JSON body)';
|
||||
}
|
||||
}
|
||||
|
||||
self.networkLog.push(entry);
|
||||
if (self.networkLog.length > self.maxNetwork) {
|
||||
self.networkLog.shift();
|
||||
}
|
||||
|
||||
const start = performance.now();
|
||||
try {
|
||||
const resp = await self._origFetch(input, init);
|
||||
entry.status = resp.status;
|
||||
entry.statusText = resp.statusText;
|
||||
entry.contentType = resp.headers.get('content-type') || null;
|
||||
entry.duration = Math.round(performance.now() - start);
|
||||
|
||||
const isApiCall = url.includes('/api/') || url.includes('/health');
|
||||
if (isApiCall && entry.contentType && entry.contentType.includes('text/html')) {
|
||||
entry.proxyDetected = true;
|
||||
self._addEntry('NET:PROXY', `${method} ${url.slice(0, 80)} \u2192 PROXY HTML (${entry.contentType}) (${entry.duration}ms)`);
|
||||
try {
|
||||
const clone = resp.clone();
|
||||
const text = await clone.text();
|
||||
entry.responsePreview = text.slice(0, 500);
|
||||
} catch (_) { /* */ }
|
||||
} else {
|
||||
const logType = resp.ok ? 'NET' : 'NET:ERR';
|
||||
self._addEntry(logType, `${method} ${url.slice(0, 80)} \u2192 ${resp.status} (${entry.duration}ms)`);
|
||||
}
|
||||
|
||||
if (!resp.ok && !entry.proxyDetected) {
|
||||
try {
|
||||
const clone = resp.clone();
|
||||
const text = await clone.text();
|
||||
entry.responsePreview = text.slice(0, 500);
|
||||
} catch (_) { /* can't peek */ }
|
||||
}
|
||||
|
||||
return resp;
|
||||
} catch (err) {
|
||||
entry.duration = Math.round(performance.now() - start);
|
||||
entry.error = err.message || String(err);
|
||||
self._addEntry('NET:ERR', `${method} ${url.slice(0, 80)} \u2192 FAILED: ${entry.error} (${entry.duration}ms)`);
|
||||
throw err;
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
// ── Global Error Handlers ───────────────
|
||||
|
||||
_interceptErrors() {
|
||||
window.addEventListener('error', (e) => {
|
||||
this._addEntry('EXCEPTION', `${e.message} at ${e.filename || '?'}:${e.lineno || 0}:${e.colno || 0}`);
|
||||
});
|
||||
|
||||
window.addEventListener('unhandledrejection', (e) => {
|
||||
const msg = e.reason?.message || e.reason || 'Unknown rejection';
|
||||
this._addEntry('REJECTION', String(msg));
|
||||
});
|
||||
},
|
||||
|
||||
// ── Keyboard Shortcut ───────────────────
|
||||
|
||||
_registerShortcut() {
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.ctrlKey && e.shiftKey && e.key === 'L') {
|
||||
e.preventDefault();
|
||||
// Dispatched as custom event; DebugModal listens for it.
|
||||
window.dispatchEvent(new CustomEvent('debug:toggle'));
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// ── Entry Management ────────────────────
|
||||
|
||||
_addEntry(type, message) {
|
||||
const entry = {
|
||||
ts: new Date().toISOString(),
|
||||
elapsed: Date.now() - this._initTime,
|
||||
type,
|
||||
message
|
||||
};
|
||||
this.entries.push(entry);
|
||||
if (this.entries.length > this.maxEntries) {
|
||||
this.entries.shift();
|
||||
}
|
||||
|
||||
if (type === 'ERROR' || type === 'EXCEPTION' || type === 'REJECTION' || type === 'NET:ERR' || type === 'NET:PROXY') {
|
||||
this.errorCount++;
|
||||
}
|
||||
|
||||
this._notify();
|
||||
},
|
||||
|
||||
log(type, message) {
|
||||
this._addEntry(type, message);
|
||||
},
|
||||
|
||||
clear() {
|
||||
this.entries = [];
|
||||
this.networkLog = [];
|
||||
this.errorCount = 0;
|
||||
this._notify();
|
||||
},
|
||||
|
||||
// ── Serialization ───────────────────────
|
||||
|
||||
_serialize(arg) {
|
||||
if (arg === null) return 'null';
|
||||
if (arg === undefined) return 'undefined';
|
||||
if (arg instanceof Error) return `${arg.name}: ${arg.message}`;
|
||||
if (typeof arg === 'object') {
|
||||
try { return JSON.stringify(arg, null, 0); }
|
||||
catch (_) { return String(arg); }
|
||||
}
|
||||
return String(arg);
|
||||
},
|
||||
|
||||
// ── State Snapshot ──────────────────────
|
||||
|
||||
getStateSnapshot() {
|
||||
const snap = {
|
||||
env: window.__ENV__ || 'unknown',
|
||||
version: window.__VERSION__ || 'unknown',
|
||||
basePath: window.__BASE__ || '(root)',
|
||||
url: location.href,
|
||||
};
|
||||
|
||||
if (window.sw) {
|
||||
snap.sdk = {
|
||||
user: window.sw.auth?.user ? {
|
||||
username: window.sw.auth.user.username,
|
||||
role: window.sw.auth.user.role,
|
||||
display_name: window.sw.auth.user.display_name
|
||||
} : null,
|
||||
isAuthed: !!window.sw.auth?.token,
|
||||
wsConnected: window.sw.events?.connected ?? false,
|
||||
theme: window.sw.theme?.resolved ?? 'unknown',
|
||||
};
|
||||
}
|
||||
|
||||
try {
|
||||
snap.storageKeys = Object.keys(localStorage).filter(k =>
|
||||
k.startsWith('chatSwitchboard') || k.startsWith('switchboard') || k.startsWith('sb_')
|
||||
);
|
||||
} catch (_) {
|
||||
snap.storageKeys = '(error reading)';
|
||||
}
|
||||
|
||||
return snap;
|
||||
},
|
||||
|
||||
// ── Connection Diagnostics ──────────────
|
||||
|
||||
async runDiagnostics() {
|
||||
this.log('DIAG', '\u2500\u2500 Starting connection diagnostics \u2500\u2500');
|
||||
this.log('DIAG', `Environment: ${window.__ENV__ || 'unknown'} | Version: ${window.__VERSION__ || 'unknown'} | Base: ${window.__BASE__ || '(root)'}`);
|
||||
|
||||
const baseUrl = window.location.origin + (window.__BASE__ || '');
|
||||
|
||||
// Test 1: Health check
|
||||
this.log('DIAG', `Test 1: Health check \u2192 ${baseUrl}/api/v1/health`);
|
||||
try {
|
||||
const start = performance.now();
|
||||
const resp = await this._origFetch(baseUrl + '/api/v1/health', {
|
||||
signal: AbortSignal.timeout(10000)
|
||||
});
|
||||
const dur = Math.round(performance.now() - start);
|
||||
const contentType = resp.headers.get('content-type') || '(none)';
|
||||
const text = await resp.text();
|
||||
this.log('DIAG', ` Status: ${resp.status} (${dur}ms)`);
|
||||
this.log('DIAG', ` Content-Type: ${contentType}`);
|
||||
this.log('DIAG', ` Body: ${text.slice(0, 300)}`);
|
||||
|
||||
if (contentType.includes('text/html')) {
|
||||
this.log('DIAG', ' \u26a0\ufe0f Got HTML instead of JSON \u2014 likely a PROXY interception page');
|
||||
}
|
||||
if (!resp.ok) {
|
||||
this.log('DIAG', ` \u26a0\ufe0f Non-200 status: ${resp.status} ${resp.statusText}`);
|
||||
}
|
||||
try {
|
||||
const json = JSON.parse(text);
|
||||
this.log('DIAG', ` \u2705 Valid JSON: database=${json.database}, registration=${json.registration_enabled}`);
|
||||
} catch (_) {
|
||||
this.log('DIAG', ' \u274c NOT valid JSON \u2014 proxy or wrong endpoint');
|
||||
}
|
||||
} catch (err) {
|
||||
this.log('DIAG', ` \u274c Fetch failed: ${err.message}`);
|
||||
if (err.name === 'TimeoutError' || err.name === 'AbortError') {
|
||||
this.log('DIAG', ' \u26a0\ufe0f Request timed out \u2014 proxy may be blocking');
|
||||
}
|
||||
}
|
||||
|
||||
// Test 2: CORS preflight
|
||||
this.log('DIAG', 'Test 2: OPTIONS preflight check');
|
||||
try {
|
||||
const resp = await this._origFetch(baseUrl + '/api/v1/health', {
|
||||
method: 'OPTIONS',
|
||||
signal: AbortSignal.timeout(5000)
|
||||
});
|
||||
this.log('DIAG', ` Status: ${resp.status}`);
|
||||
this.log('DIAG', ` CORS headers: ${resp.headers.get('access-control-allow-origin') || '(none)'}`);
|
||||
} catch (err) {
|
||||
this.log('DIAG', ` \u274c OPTIONS failed: ${err.message}`);
|
||||
}
|
||||
|
||||
// Test 3: Token validation
|
||||
if (window.sw?.auth?.token) {
|
||||
this.log('DIAG', 'Test 3: Token validation');
|
||||
try {
|
||||
const resp = await this._origFetch(baseUrl + '/api/v1/profile', {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${window.sw.auth.token}`,
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
signal: AbortSignal.timeout(5000)
|
||||
});
|
||||
this.log('DIAG', ` Profile endpoint: ${resp.status}`);
|
||||
if (resp.status === 401) {
|
||||
this.log('DIAG', ' \u26a0\ufe0f Token expired or invalid');
|
||||
}
|
||||
} catch (err) {
|
||||
this.log('DIAG', ` \u274c Token check failed: ${err.message}`);
|
||||
}
|
||||
} else {
|
||||
this.log('DIAG', 'Test 3: Skipped (no token)');
|
||||
}
|
||||
|
||||
// Test 4: WebSocket
|
||||
this.log('DIAG', `Test 4: SDK WebSocket = ${window.sw?.events?.connected ? 'connected' : 'disconnected'}`);
|
||||
|
||||
// Test 5: Service Worker & Cache
|
||||
this.log('DIAG', 'Test 5: Service Worker cache');
|
||||
try {
|
||||
if ('serviceWorker' in navigator) {
|
||||
const reg = await navigator.serviceWorker.getRegistration();
|
||||
this.log('DIAG', ` SW registered: ${reg ? 'yes' : 'no'}${reg ? ` (scope: ${reg.scope})` : ''}`);
|
||||
if (reg?.active) {
|
||||
this.log('DIAG', ` SW state: ${reg.active.state}`);
|
||||
}
|
||||
} else {
|
||||
this.log('DIAG', ' SW not supported');
|
||||
}
|
||||
const keys = await caches.keys();
|
||||
this.log('DIAG', ` Caches (${keys.length}): ${keys.join(', ') || '(none)'}`);
|
||||
for (const key of keys) {
|
||||
const cache = await caches.open(key);
|
||||
const cacheEntries = await cache.keys();
|
||||
this.log('DIAG', ` ${key}: ${cacheEntries.length} entries`);
|
||||
}
|
||||
} catch (e) {
|
||||
this.log('DIAG', ` Cache check error: ${e.message}`);
|
||||
}
|
||||
|
||||
this.log('DIAG', '\u2500\u2500 Diagnostics complete \u2500\u2500');
|
||||
},
|
||||
|
||||
// ── Export ───────────────────────────────
|
||||
|
||||
exportText() {
|
||||
let text = `=== Chat Switchboard Debug Export ===\n`;
|
||||
text += `Exported: ${new Date().toISOString()}\n`;
|
||||
text += `URL: ${location.href}\n`;
|
||||
text += `ENV: ${window.__ENV__ || 'unknown'} | VERSION: ${window.__VERSION__ || 'unknown'} | BASE: ${window.__BASE__ || '(root)'}\n`;
|
||||
text += `UA: ${navigator.userAgent}\n\n`;
|
||||
|
||||
text += `--- STATE ---\n`;
|
||||
text += JSON.stringify(this.getStateSnapshot(), null, 2) + '\n\n';
|
||||
|
||||
text += `--- CONSOLE LOG (${this.entries.length}) ---\n`;
|
||||
for (const e of this.entries) {
|
||||
text += `[${e.ts}] [${e.type}] ${e.message}\n`;
|
||||
}
|
||||
text += '\n';
|
||||
|
||||
text += `--- NETWORK LOG (${this.networkLog.length}) ---\n`;
|
||||
for (const r of this.networkLog) {
|
||||
const proxy = r.proxyDetected ? ' [PROXY]' : '';
|
||||
text += `[${r.ts}] ${r.method} ${r.url} \u2192 ${r.status || 'FAILED'}${proxy} ${r.error || ''} (${r.duration || '?'}ms)`;
|
||||
if (r.contentType) text += ` [${r.contentType}]`;
|
||||
text += '\n';
|
||||
if (r.responsePreview) text += ` Response: ${r.responsePreview.slice(0, 200)}\n`;
|
||||
}
|
||||
|
||||
return text;
|
||||
},
|
||||
|
||||
copyLog() {
|
||||
const text = this.exportText();
|
||||
navigator.clipboard.writeText(text)
|
||||
.then(() => this.log('DEBUG', 'Debug log copied to clipboard'))
|
||||
.catch(() => this.log('ERROR', 'Copy to clipboard failed'));
|
||||
},
|
||||
|
||||
downloadLog() {
|
||||
const text = this.exportText();
|
||||
const blob = new Blob([text], { type: 'text/plain' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `switchboard-debug-${new Date().toISOString().replace(/[:.]/g, '-')}.txt`;
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
},
|
||||
|
||||
async purgeCache() {
|
||||
this.log('DIAG', 'Purging Service Worker caches...');
|
||||
|
||||
try {
|
||||
const keys = await caches.keys();
|
||||
const deleted = await Promise.all(keys.map(k => caches.delete(k)));
|
||||
this.log('DIAG', ` Deleted ${deleted.filter(Boolean).length} cache(s): ${keys.join(', ') || '(none)'}`);
|
||||
|
||||
if ('serviceWorker' in navigator) {
|
||||
const registrations = await navigator.serviceWorker.getRegistrations();
|
||||
for (const reg of registrations) {
|
||||
await reg.unregister();
|
||||
this.log('DIAG', ` Unregistered SW: ${reg.scope}`);
|
||||
}
|
||||
}
|
||||
|
||||
this.log('DIAG', ' Cache purged \u2014 reloading...');
|
||||
setTimeout(() => location.reload(), 500);
|
||||
} catch (e) {
|
||||
this.log('DIAG', ` Purge failed: ${e.message}`);
|
||||
}
|
||||
}
|
||||
};
|
||||
132
src/js/sw/components/debug/index.js
Normal file
132
src/js/sw/components/debug/index.js
Normal file
@@ -0,0 +1,132 @@
|
||||
// ==========================================
|
||||
// Debug Modal — Root Component
|
||||
// ==========================================
|
||||
// Preact modal with tabs: Console, Network, State, REPL.
|
||||
// Global overlay — not a routed surface.
|
||||
// Mounts via mountDebugModal(el, engine).
|
||||
//
|
||||
// v0.37.18: Preact rebuild of debug modal (CR P2-5).
|
||||
|
||||
import { debugEngine } from './engine.js';
|
||||
import { ConsoleTab } from './console-tab.js';
|
||||
import { NetworkTab } from './network-tab.js';
|
||||
import { StateTab } from './state-tab.js';
|
||||
import { ReplTab } from './repl-tab.js';
|
||||
import { DebugBadge } from './badge.js';
|
||||
|
||||
const { h, render } = window.preact;
|
||||
const html = window.html;
|
||||
const { useState, useEffect, useCallback, useRef } = window.hooks;
|
||||
|
||||
const TABS = ['console', 'network', 'state', 'repl'];
|
||||
|
||||
function DebugModal({ engine }) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [activeTab, setActiveTab] = useState('console');
|
||||
const [tick, setTick] = useState(0);
|
||||
const overlayRef = useRef(null);
|
||||
|
||||
// Subscribe to engine for reactive re-render
|
||||
useEffect(() => {
|
||||
return engine.subscribe(() => setTick(t => t + 1));
|
||||
}, [engine]);
|
||||
|
||||
// Listen for toggle events (Ctrl+Shift+L, badge click)
|
||||
useEffect(() => {
|
||||
const toggle = () => setOpen(prev => !prev);
|
||||
window.addEventListener('debug:toggle', toggle);
|
||||
return () => window.removeEventListener('debug:toggle', toggle);
|
||||
}, []);
|
||||
|
||||
// Expose global open/close for backward compat
|
||||
useEffect(() => {
|
||||
window.openDebugModal = () => setOpen(true);
|
||||
window.closeDebugModal = () => setOpen(false);
|
||||
}, []);
|
||||
|
||||
// Close on overlay click
|
||||
const onOverlayClick = useCallback((e) => {
|
||||
if (e.target === overlayRef.current) setOpen(false);
|
||||
}, []);
|
||||
|
||||
// Close on Escape
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
|
||||
document.addEventListener('keydown', onKey);
|
||||
return () => document.removeEventListener('keydown', onKey);
|
||||
}, [open]);
|
||||
|
||||
const onClear = useCallback(async () => {
|
||||
if (window.sw?.confirm) {
|
||||
const ok = await window.sw.confirm('Clear all debug logs?');
|
||||
if (!ok) return;
|
||||
}
|
||||
engine.clear();
|
||||
}, [engine]);
|
||||
|
||||
const onPurge = useCallback(async () => {
|
||||
if (window.sw?.confirm) {
|
||||
const ok = await window.sw.confirm(
|
||||
'Purge all cached files and reload?\n\n' +
|
||||
'This clears the Service Worker cache and forces a fresh download of all assets.'
|
||||
);
|
||||
if (!ok) return;
|
||||
}
|
||||
engine.purgeCache();
|
||||
}, [engine]);
|
||||
|
||||
return html`
|
||||
<${DebugBadge} engine=${engine} />
|
||||
${open && html`
|
||||
<div class="modal-overlay active" ref=${overlayRef} onClick=${onOverlayClick}>
|
||||
<div class="modal modal-wide">
|
||||
<div class="modal-header">
|
||||
<h2>Debug Log</h2>
|
||||
<button class="modal-close" onClick=${() => setOpen(false)}>\u2715</button>
|
||||
</div>
|
||||
<div class="modal-tabs">
|
||||
${TABS.map(tab => html`
|
||||
<button key=${tab}
|
||||
class="debug-tab${activeTab === tab ? ' active' : ''}${tab === 'repl' && !_replVisible() ? ' debug-tab--hidden' : ''}"
|
||||
onClick=${() => setActiveTab(tab)}>
|
||||
${tab.charAt(0).toUpperCase() + tab.slice(1)}
|
||||
${tab === 'console' && html`${' '}<span class="badge">${engine.entries.length}</span>`}
|
||||
${tab === 'network' && html`${' '}<span class="badge">${engine.networkLog.length}</span>`}
|
||||
</button>`)}
|
||||
</div>
|
||||
<div class="modal-body debug-modal-body">
|
||||
${activeTab === 'console' && html`<${ConsoleTab} entries=${engine.entries} />`}
|
||||
${activeTab === 'network' && html`<${NetworkTab} networkLog=${engine.networkLog} />`}
|
||||
${activeTab === 'state' && html`<${StateTab} engine=${engine} />`}
|
||||
${activeTab === 'repl' && html`<${ReplTab} visible=${true} />`}
|
||||
</div>
|
||||
<div class="modal-footer debug-modal-footer">
|
||||
<div class="debug-footer-left">
|
||||
<button class="btn-danger btn-small" onClick=${() => { setActiveTab('console'); engine.runDiagnostics(); }}>Diagnostics</button>
|
||||
<button class="btn-danger btn-small" onClick=${onPurge}>Purge Cache</button>
|
||||
</div>
|
||||
<div class="debug-footer-right">
|
||||
<button class="btn-secondary btn-small" onClick=${onClear}>Clear</button>
|
||||
<button class="btn-secondary btn-small" onClick=${() => engine.copyLog()}>Copy</button>
|
||||
<button class="btn-secondary btn-small" onClick=${() => engine.downloadLog()}>Export</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`}`;
|
||||
}
|
||||
|
||||
function _replVisible() {
|
||||
const isAdmin = window.sw?.auth?.user?.role === 'admin';
|
||||
const debugParam = new URLSearchParams(window.location.search).has('debug');
|
||||
return isAdmin || debugParam;
|
||||
}
|
||||
|
||||
/**
|
||||
* Mount the debug modal into a target element.
|
||||
* Call after Preact globals are available.
|
||||
*/
|
||||
export function mountDebugModal(el) {
|
||||
if (!el) return;
|
||||
render(html`<${DebugModal} engine=${debugEngine} />`, el);
|
||||
}
|
||||
64
src/js/sw/components/debug/network-tab.js
Normal file
64
src/js/sw/components/debug/network-tab.js
Normal file
@@ -0,0 +1,64 @@
|
||||
// ==========================================
|
||||
// Debug Modal — Network Tab
|
||||
// ==========================================
|
||||
// Fetch log with expandable request/response details.
|
||||
// Newest entries first.
|
||||
//
|
||||
// v0.37.18: Preact rebuild from debug.js _renderNetworkTab().
|
||||
|
||||
const html = window.html;
|
||||
const { useState } = window.hooks;
|
||||
|
||||
function _esc(s) {
|
||||
if (!s) return '';
|
||||
return String(s).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
|
||||
}
|
||||
|
||||
function NetEntry({ req }) {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
const isErr = req.error || (req.status && req.status >= 400) || req.proxyDetected;
|
||||
const statusColor = req.proxyDetected ? '#ff6b35' : (isErr ? '#e74c3c' : '#2ecc71');
|
||||
const statusText = req.proxyDetected
|
||||
? `PROXY (${req.status})`
|
||||
: req.error
|
||||
? `ERR ${req.error}`
|
||||
: (req.status ? `${req.status} ${req.statusText}` : 'pending');
|
||||
|
||||
return html`
|
||||
<div class="debug-net-entry">
|
||||
<div class="debug-net-summary" onClick=${() => setOpen(!open)}>
|
||||
<span class="debug-net-arrow">${open ? '\u25be' : '\u25b8'}</span>
|
||||
<span class="debug-net-method">${req.method}</span>${' '}
|
||||
<span class="debug-net-url">${_esc(req.url)}</span>${' '}
|
||||
<span style="color:${statusColor}">${statusText}</span>
|
||||
${req.duration != null && html`${' '}<span class="debug-time">${req.duration}ms</span>`}
|
||||
</div>
|
||||
${open && html`
|
||||
<div class="debug-net-detail">
|
||||
${req.contentType && html`<div><strong>Content-Type:</strong> <code>${_esc(req.contentType)}</code></div>`}
|
||||
${req.requestBodyPreview && html`<div><strong>Request:</strong> <code>${_esc(req.requestBodyPreview)}</code></div>`}
|
||||
${req.responsePreview && html`<div><strong>Response:</strong> <pre class="debug-pre">${_esc(req.responsePreview)}</pre></div>`}
|
||||
<div class="debug-time">${req.ts}</div>
|
||||
</div>`}
|
||||
</div>`;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {{ networkLog: Array }} props
|
||||
*/
|
||||
export function NetworkTab({ networkLog }) {
|
||||
const reversed = [...networkLog].reverse();
|
||||
|
||||
return html`
|
||||
<div class="debug-network-tab">
|
||||
<div class="debug-toolbar">
|
||||
<span class="debug-badge">${networkLog.length}</span>
|
||||
</div>
|
||||
<div class="debug-content">
|
||||
${reversed.length === 0
|
||||
? html`<div class="debug-empty">No network requests logged</div>`
|
||||
: reversed.map((req, i) => html`<${NetEntry} key=${req.id || i} req=${req} />`)}
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
237
src/js/sw/components/debug/repl-tab.js
Normal file
237
src/js/sw/components/debug/repl-tab.js
Normal file
@@ -0,0 +1,237 @@
|
||||
// ==========================================
|
||||
// Debug Modal — REPL Tab
|
||||
// ==========================================
|
||||
// JavaScript REPL with top-level await, tab-completion,
|
||||
// command history, and collapsible JSON output.
|
||||
// Admin-gated OR ?debug=1 URL param.
|
||||
//
|
||||
// v0.37.18: Preact rebuild from repl.js (v0.37.14).
|
||||
|
||||
const html = window.html;
|
||||
const { useState, useRef, useEffect, useCallback } = window.hooks;
|
||||
|
||||
function _esc(s) {
|
||||
if (!s) return '';
|
||||
return String(s).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
|
||||
}
|
||||
|
||||
function _getGlobals() {
|
||||
const globals = {};
|
||||
if (window.sw) globals.sw = window.sw;
|
||||
if (window.DebugLog) globals.DebugLog = window.DebugLog;
|
||||
globals.$ = (sel) => document.querySelector(sel);
|
||||
globals.$$ = (sel) => [...document.querySelectorAll(sel)];
|
||||
globals.sleep = (ms) => new Promise(r => setTimeout(r, ms));
|
||||
return globals;
|
||||
}
|
||||
|
||||
function _wrapCode(code) {
|
||||
const trimmed = code.trim();
|
||||
if (/^(let |const |var |return |if |for |while |switch |try |class |function )/.test(trimmed)) {
|
||||
return trimmed;
|
||||
}
|
||||
return `return (${trimmed})`;
|
||||
}
|
||||
|
||||
function _formatValue(value) {
|
||||
if (value === null) return 'null';
|
||||
if (value === undefined) return 'undefined';
|
||||
const type = typeof value;
|
||||
if (type === 'string') return JSON.stringify(value);
|
||||
if (type === 'number' || type === 'bigint' || type === 'boolean') return String(value);
|
||||
if (type === 'function') return `[Function: ${value.name || 'anonymous'}]`;
|
||||
if (type === 'symbol') return String(value);
|
||||
if (value instanceof HTMLElement) {
|
||||
return `<${value.tagName.toLowerCase()}${value.id ? '#' + value.id : ''}${value.className ? '.' + value.className.split(' ').join('.') : ''}>`;
|
||||
}
|
||||
if (value instanceof Error) return `${value.constructor.name}: ${value.message}`;
|
||||
try { return JSON.stringify(value, null, 2); }
|
||||
catch (_) { return String(value); }
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {{ visible: boolean }} props
|
||||
*/
|
||||
export function ReplTab({ visible }) {
|
||||
const [output, setOutput] = useState([]);
|
||||
const [historyList] = useState(() => {
|
||||
try {
|
||||
const saved = sessionStorage.getItem('cs::repl::history');
|
||||
return saved ? JSON.parse(saved) : [];
|
||||
} catch (_) { return []; }
|
||||
});
|
||||
const historyIdx = useRef(-1);
|
||||
const scratchRef = useRef('');
|
||||
const inputRef = useRef(null);
|
||||
const outputRef = useRef(null);
|
||||
|
||||
// Admin gate
|
||||
const isAdmin = window.sw?.auth?.user?.role === 'admin';
|
||||
const debugParam = new URLSearchParams(window.location.search).has('debug');
|
||||
if (!isAdmin && !debugParam) return null;
|
||||
|
||||
const appendEntry = useCallback((type, text) => {
|
||||
setOutput(prev => [...prev, { type, text }]);
|
||||
}, []);
|
||||
|
||||
const runCode = useCallback(async (code) => {
|
||||
if (!code.trim()) return;
|
||||
|
||||
historyList.push(code);
|
||||
if (historyList.length > 100) historyList.shift();
|
||||
historyIdx.current = -1;
|
||||
try { sessionStorage.setItem('cs::repl::history', JSON.stringify(historyList)); } catch (_) {}
|
||||
|
||||
appendEntry('input', '> ' + code);
|
||||
|
||||
const startTime = performance.now();
|
||||
try {
|
||||
const globals = _getGlobals();
|
||||
const argNames = Object.keys(globals);
|
||||
const argValues = Object.values(globals);
|
||||
const AsyncFunction = Object.getPrototypeOf(async function(){}).constructor;
|
||||
const fn = new AsyncFunction(...argNames, _wrapCode(code));
|
||||
const result = await fn(...argValues);
|
||||
const elapsed = (performance.now() - startTime).toFixed(1);
|
||||
|
||||
if (result !== undefined) {
|
||||
appendEntry('result', `${_formatValue(result)} [${elapsed}ms]`);
|
||||
} else {
|
||||
appendEntry('info', `(undefined) [${elapsed}ms]`);
|
||||
}
|
||||
} catch (err) {
|
||||
appendEntry('error', err.message || String(err));
|
||||
if (err.stack) {
|
||||
appendEntry('stack', err.stack.split('\n').slice(1, 5).join('\n'));
|
||||
}
|
||||
}
|
||||
}, [historyList, appendEntry]);
|
||||
|
||||
const onKeyDown = useCallback((e) => {
|
||||
const input = e.target;
|
||||
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
runCode(input.value);
|
||||
input.value = '';
|
||||
return;
|
||||
}
|
||||
|
||||
if (e.key === 'ArrowUp' && input.value.substring(0, input.selectionStart).indexOf('\n') === -1) {
|
||||
e.preventDefault();
|
||||
if (historyIdx.current === -1) {
|
||||
scratchRef.current = input.value;
|
||||
historyIdx.current = historyList.length;
|
||||
}
|
||||
historyIdx.current = Math.max(0, historyIdx.current - 1);
|
||||
input.value = historyList[historyIdx.current] || '';
|
||||
input.selectionStart = input.selectionEnd = input.value.length;
|
||||
return;
|
||||
}
|
||||
if (e.key === 'ArrowDown' && input.value.substring(input.selectionStart).indexOf('\n') === -1) {
|
||||
e.preventDefault();
|
||||
if (historyIdx.current === -1) return;
|
||||
historyIdx.current++;
|
||||
if (historyIdx.current >= historyList.length) {
|
||||
historyIdx.current = -1;
|
||||
input.value = scratchRef.current || '';
|
||||
} else {
|
||||
input.value = historyList[historyIdx.current] || '';
|
||||
}
|
||||
input.selectionStart = input.selectionEnd = input.value.length;
|
||||
return;
|
||||
}
|
||||
|
||||
if (e.key === 'Tab') {
|
||||
e.preventDefault();
|
||||
_tabComplete(input);
|
||||
}
|
||||
}, [runCode, historyList]);
|
||||
|
||||
useEffect(() => {
|
||||
if (outputRef.current) {
|
||||
outputRef.current.scrollTop = outputRef.current.scrollHeight;
|
||||
}
|
||||
}, [output]);
|
||||
|
||||
if (!visible) return null;
|
||||
|
||||
return html`
|
||||
<div class="debug-repl-tab">
|
||||
<div class="debug-repl-output" ref=${outputRef}>
|
||||
${output.map((entry, i) => html`
|
||||
<div key=${i} class="repl-entry repl-entry-${entry.type}">
|
||||
<pre>${_esc(entry.text)}</pre>
|
||||
</div>`)}
|
||||
</div>
|
||||
<div class="debug-repl-input">
|
||||
<input type="text" ref=${inputRef}
|
||||
placeholder="Type expression\u2026"
|
||||
onKeyDown=${onKeyDown} />
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
function _tabComplete(input) {
|
||||
const cursor = input.selectionStart;
|
||||
const text = input.value.substring(0, cursor);
|
||||
|
||||
const propMatch = text.match(/([\w$.]+)\.([\w]*)$/);
|
||||
if (propMatch) {
|
||||
try {
|
||||
const globals = _getGlobals();
|
||||
const obj = new Function(...Object.keys(globals), `return ${propMatch[1]}`)(...Object.values(globals));
|
||||
if (obj == null) return;
|
||||
|
||||
const keys = [];
|
||||
for (let o = obj; o && o !== Object.prototype; o = Object.getPrototypeOf(o)) {
|
||||
for (const k of Object.getOwnPropertyNames(o)) {
|
||||
if (k.startsWith(propMatch[2]) && !k.startsWith('_')) keys.push(k);
|
||||
}
|
||||
}
|
||||
const unique = [...new Set(keys)].sort();
|
||||
if (unique.length === 1) {
|
||||
_insertCompletion(input, cursor, propMatch[2], unique[0]);
|
||||
} else if (unique.length > 1) {
|
||||
const common = _commonPrefix(unique);
|
||||
if (common.length > propMatch[2].length) {
|
||||
_insertCompletion(input, cursor, propMatch[2], common);
|
||||
}
|
||||
}
|
||||
} catch (_) {}
|
||||
return;
|
||||
}
|
||||
|
||||
const wordMatch = text.match(/([\w$]+)$/);
|
||||
if (wordMatch) {
|
||||
const globals = Object.keys(_getGlobals());
|
||||
const candidates = [...globals, 'document', 'window', 'console', 'fetch', 'JSON', 'Math',
|
||||
'Array', 'Object', 'String', 'Number', 'Boolean', 'Promise', 'Map', 'Set'];
|
||||
const matches = [...new Set(candidates)].filter(c => c.startsWith(wordMatch[1])).sort();
|
||||
if (matches.length === 1) {
|
||||
_insertCompletion(input, cursor, wordMatch[1], matches[0]);
|
||||
} else if (matches.length > 1) {
|
||||
const common = _commonPrefix(matches);
|
||||
if (common.length > wordMatch[1].length) {
|
||||
_insertCompletion(input, cursor, wordMatch[1], common);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function _insertCompletion(input, cursor, partial, completion) {
|
||||
const before = input.value.substring(0, cursor - partial.length);
|
||||
const after = input.value.substring(cursor);
|
||||
input.value = before + completion + after;
|
||||
const newPos = before.length + completion.length;
|
||||
input.selectionStart = input.selectionEnd = newPos;
|
||||
}
|
||||
|
||||
function _commonPrefix(strs) {
|
||||
if (strs.length === 0) return '';
|
||||
let prefix = strs[0];
|
||||
for (let i = 1; i < strs.length; i++) {
|
||||
while (!strs[i].startsWith(prefix)) prefix = prefix.slice(0, -1);
|
||||
}
|
||||
return prefix;
|
||||
}
|
||||
28
src/js/sw/components/debug/state-tab.js
Normal file
28
src/js/sw/components/debug/state-tab.js
Normal file
@@ -0,0 +1,28 @@
|
||||
// ==========================================
|
||||
// Debug Modal — State Tab
|
||||
// ==========================================
|
||||
// Displays current application state snapshot as formatted JSON.
|
||||
//
|
||||
// v0.37.18: Preact rebuild from debug.js _renderStateTab().
|
||||
|
||||
const html = window.html;
|
||||
const { useMemo } = window.hooks;
|
||||
|
||||
function _esc(s) {
|
||||
if (!s) return '';
|
||||
return String(s).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {{ engine: { getStateSnapshot: () => object } }} props
|
||||
*/
|
||||
export function StateTab({ engine }) {
|
||||
const snap = useMemo(() => engine.getStateSnapshot(), [engine.entries.length]);
|
||||
|
||||
return html`
|
||||
<div class="debug-state-tab">
|
||||
<div class="debug-content">
|
||||
<pre class="debug-pre debug-state-pre">${_esc(JSON.stringify(snap, null, 2))}</pre>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
@@ -94,7 +94,7 @@ export function createDomains(restClient) {
|
||||
kbs: (id) => rc.get(`/api/v1/channels/${id}/knowledge-bases`),
|
||||
setKbs: (id, kbIds) => rc.put(`/api/v1/channels/${id}/knowledge-bases`, { kb_ids: kbIds }),
|
||||
// Files
|
||||
files: (id) => rc.get(`/api/v1/channels/${id}/files`),
|
||||
files: (id, opts) => rc.get(`/api/v1/channels/${id}/files` + _qs(opts)),
|
||||
uploadFile: (id, file) => rc.upload(`/api/v1/channels/${id}/files`, file),
|
||||
},
|
||||
|
||||
@@ -150,7 +150,8 @@ export function createDomains(restClient) {
|
||||
// ── 7. Workspaces ──────────────────────
|
||||
workspaces: {
|
||||
...crud(rc, '/api/v1/workspaces'),
|
||||
update: (id, data) => rc.patch(`/api/v1/workspaces/${id}`, data),
|
||||
update: (id, data) => rc.patch(`/api/v1/workspaces/${id}`, data),
|
||||
getDefault: () => rc.get('/api/v1/workspaces/default'),
|
||||
files: (id, opts) => rc.get(`/api/v1/workspaces/${id}/files` + _qs(opts)),
|
||||
readFile: (id, path) => rc.get(`/api/v1/workspaces/${id}/files/read` + _qs({ path })),
|
||||
writeFile: (id, path, content) => rc.put(`/api/v1/workspaces/${id}/files/write` + _qs({ path }), content),
|
||||
|
||||
@@ -117,8 +117,7 @@ export function UserMenu({ placement = 'down-right', onAction, extraItems }) {
|
||||
});
|
||||
break;
|
||||
case 'debug':
|
||||
const dbg = document.getElementById('debugModal');
|
||||
if (dbg) dbg.classList.toggle('active');
|
||||
window.dispatchEvent(new CustomEvent('debug:toggle'));
|
||||
break;
|
||||
case 'chat':
|
||||
location.href = BASE + '/';
|
||||
|
||||
@@ -54,6 +54,16 @@ export default function ProvidersSection() {
|
||||
} catch (e) { sw.toast(e.message, 'error'); }
|
||||
}
|
||||
|
||||
async function testProvider(cfg) {
|
||||
sw.toast(`Testing ${cfg.name}\u2026`, 'info');
|
||||
try {
|
||||
const result = await sw.api.admin.models.fetch();
|
||||
sw.toast(`${cfg.name}: connection OK`, 'success');
|
||||
} catch (e) {
|
||||
sw.toast(`${cfg.name}: connection failed \u2014 ${e.message}`, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteProvider(id) {
|
||||
const ok = await sw.confirm('Delete this provider config?', true);
|
||||
if (!ok) return;
|
||||
@@ -118,6 +128,7 @@ export default function ProvidersSection() {
|
||||
</div>
|
||||
<div class="text-muted" style="font-size:12px;margin-bottom:8px;word-break:break-all;">${c.endpoint || '(default)'}</div>
|
||||
<div style="display:flex;gap:6px;">
|
||||
<button class="btn-small" onClick=${() => testProvider(c)}>Test</button>
|
||||
<button class="btn-small" onClick=${() => setEditing(c)}>Edit</button>
|
||||
<button class="btn-small" onClick=${() => syncModels(c.id)}>Sync Models</button>
|
||||
<button class="btn-small btn-danger" onClick=${() => deleteProvider(c.id)}>Delete</button>
|
||||
|
||||
@@ -110,6 +110,17 @@ export function ProvidersSection() {
|
||||
}
|
||||
}, []);
|
||||
|
||||
const testConnection = useCallback(async (prov) => {
|
||||
sw.emit('toast', { message: `Testing ${prov.name}\u2026`, variant: 'info' });
|
||||
try {
|
||||
const result = await sw.api.providers.fetchModels(prov.id);
|
||||
const total = result?.total || 0;
|
||||
sw.emit('toast', { message: `${prov.name}: connection OK (${total} model${total !== 1 ? 's' : ''})`, variant: 'success' });
|
||||
} catch (e) {
|
||||
sw.emit('toast', { message: `${prov.name}: connection failed \u2014 ${e.message}`, variant: 'error' });
|
||||
}
|
||||
}, []);
|
||||
|
||||
const setField = useCallback((key, val) => {
|
||||
setForm(f => ({ ...f, [key]: val }));
|
||||
}, []);
|
||||
@@ -179,6 +190,9 @@ export function ProvidersSection() {
|
||||
${esc(p.endpoint)}
|
||||
</td>
|
||||
<td class="admin-actions-cell" style="white-space:nowrap;">
|
||||
<button class="icon-btn" title="Test connection" onClick=${() => testConnection(p)}>
|
||||
\u{26A1}
|
||||
</button>
|
||||
<button class="icon-btn" title="Sync models" onClick=${() => sync(p)}>
|
||||
\u{1F504}
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user