switchboard/core
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Releases 9 Wiki Activity

Changeset 0.31.1 (#204)

Browse Source 
Co-authored-by: Jeffrey Smith <jasafpro@gmail.com>
Co-committed-by: Jeffrey Smith <jasafpro@gmail.com>
This commit is contained in:
Jeffrey Smith
2026-03-19 10:21:40 +00:00
committed by xcaliber
parent 071dea8904
commit 8364440081
17 changed files with 1186 additions and 339 deletions
Download Patch File Download Diff File Expand all files Collapse all files

197
packages/dashboard/css/main.css Normal file
View File

@@ -0,0 +1,197 @@
/* ==========================================
Dashboard Surface — Layout Only
==========================================
v0.31.1: ZERO component CSS overrides.
Only grid, flex, sizing, and spacing.
All SDK components style themselves.
========================================== */
.surface-dashboard {
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
}
/* ── Topbar ──────────────────────────────── */
.dashboard-topbar {
display: flex;
align-items: center;
gap: 12px;
padding: 0 16px;
height: 44px;
flex-shrink: 0;
background: var(--bg-secondary);
border-bottom: 1px solid var(--border);
}
.dashboard-topbar-back {
display: flex;
align-items: center;
gap: 4px;
color: var(--text-2);
text-decoration: none;
font-size: 12px;
font-weight: 500;
padding: 4px 8px;
border-radius: var(--radius);
transition: color 0.15s, background 0.15s;
}
.dashboard-topbar-back:hover {
color: var(--text);
background: var(--bg-hover);
}
.dashboard-topbar-title {
font-size: 14px;
font-weight: 600;
color: var(--text);
}
.dashboard-topbar-sep {
width: 1px;
height: 18px;
background: var(--border);
}
.dashboard-topbar-spacer {
flex: 1;
}
/* ── Body ────────────────────────────────── */
.dashboard-body {
display: flex;
flex: 1;
min-height: 0;
}
/* ── Sidebar ─────────────────────────────── */
.dashboard-sidebar {
width: 300px;
flex-shrink: 0;
display: flex;
flex-direction: column;
border-right: 1px solid var(--border);
min-height: 0;
}
/* ── Main Content ────────────────────────── */
.dashboard-main {
flex: 1;
overflow-y: auto;
padding: 20px;
min-width: 0;
}
.dashboard-greeting {
font-size: 18px;
font-weight: 600;
color: var(--text);
margin-bottom: 4px;
}
.dashboard-subtitle {
font-size: 13px;
color: var(--text-3);
margin-bottom: 20px;
}
.dashboard-filter-bar {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
}
.dashboard-filter-label {
font-size: 12px;
font-weight: 600;
color: var(--text-2);
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* ── Cards Grid ──────────────────────────── */
.dashboard-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 12px;
}
.dashboard-card {
background: var(--bg-raised);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 16px;
display: flex;
flex-direction: column;
gap: 8px;
transition: border-color 0.15s;
}
.dashboard-card:hover {
border-color: var(--border-elevated);
}
.dashboard-card-header {
display: flex;
align-items: center;
gap: 8px;
}
.dashboard-card-title {
font-size: 14px;
font-weight: 600;
color: var(--text);
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dashboard-card-meta {
font-size: 11px;
color: var(--text-3);
}
.dashboard-card-desc {
font-size: 12px;
color: var(--text-2);
line-height: 1.4;
}
.dashboard-card-actions {
display: flex;
justify-content: flex-end;
margin-top: 4px;
}
.dashboard-empty {
text-align: center;
color: var(--text-3);
font-size: 13px;
padding: 40px 20px;
}
/* ── Admin Section ───────────────────────── */
.dashboard-admin-section {
margin-top: 24px;
padding-top: 16px;
border-top: 1px solid var(--border);
}
.dashboard-section-title {
font-size: 12px;
font-weight: 600;
color: var(--text-2);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 12px;
}

414
packages/dashboard/js/main.js Normal file
View File

@@ -0,0 +1,414 @@
// ==========================================
// Chat Switchboard — Dashboard Package (v0.31.1)
// ==========================================
// SDK Exercise Surface. Exercises every sw.* primitive with ZERO
// component CSS overrides. All styling comes from the SDK itself.
//
// Primitives exercised:
// sw.userMenu, sw.menu, sw.toolbar, sw.tabs, sw.dropdown,
// sw.chat, sw.notes, sw.modal, sw.confirm, sw.toast,
// sw.on/emit, sw.api, sw.user/isAdmin, sw.theme, sw.pipe
//
// Dependencies (loaded by base.html):
// API, UI, App, sw, esc (ui-primitives)
// ==========================================
(function () {
'use strict';
const SURFACE_ID = 'dashboard';
if (window.__SURFACE__ !== SURFACE_ID) return;
const base = window.__BASE__ || '';
// ── Init ─────────────────────────────────────
async function _init() {
const mount = document.getElementById('extension-mount');
if (!mount) return;
const surface = document.createElement('div');
surface.className = 'surface-dashboard';
surface.id = 'dashboardSurface';
mount.appendChild(surface);
// ── Topbar ──
const topbar = _buildTopbar();
surface.appendChild(topbar);
// sw.userMenu — flyout: 'down' from topbar
sw.userMenu(topbar, { flyout: 'down' });
// ── Body ──
const body = document.createElement('div');
body.className = 'dashboard-body';
surface.appendChild(body);
// ── Sidebar (tabs: activity + notes) ──
const sidebar = document.createElement('div');
sidebar.className = 'dashboard-sidebar';
body.appendChild(sidebar);
// sw.tabs — two tabs
const tabs = sw.tabs(sidebar, {
tabs: [
{ id: 'activity', label: 'Activity' },
{ id: 'notes', label: 'Notes' },
],
activeTab: 'activity',
onActivate: function (id) {
if (id === 'notes' && !_notesLoaded) {
_notesLoaded = true;
if (_notePanel) {
_notePanel.loadNotesList();
_notePanel.loadNoteFolders();
}
}
},
});
// sw.chat — standalone in activity tab
const activityPanel = tabs.getPanel('activity');
if (activityPanel) {
sw.chat(activityPanel, { id: 'dash', standalone: true });
}
// sw.notes — lazy-loaded in notes tab
let _notePanel = null;
let _notesLoaded = false;
const notesPanel = tabs.getPanel('notes');
if (notesPanel) {
_notePanel = sw.notes(notesPanel, { projectId: null });
}
// ── Main content area ──
const main = document.createElement('div');
main.className = 'dashboard-main';
body.appendChild(main);
_buildMainContent(main);
// ── Theme reactivity ──
sw.theme.on('change', function (resolved) {
const cards = main.querySelectorAll('.dashboard-card');
cards.forEach(function (c) {
c.style.borderColor = ''; // reset to CSS default for new theme
});
});
// ── Cross-component events ──
sw.on('dashboard.filter.changed', function (payload) {
_loadChannels(main.querySelector('.dashboard-cards'), payload.value);
});
console.log('[DashboardPkg] Mounted');
}
// ── Topbar ──────────────────────────────────
function _buildTopbar() {
const el = document.createElement('div');
el.className = 'dashboard-topbar';
el.innerHTML =
'<a href="' + esc(base) + '/" class="dashboard-topbar-back" title="Back to chat">' +
'<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>' +
'Back' +
'</a>' +
'<div class="dashboard-topbar-sep"></div>' +
'<span class="dashboard-topbar-title">Dashboard</span>' +
'<div class="dashboard-topbar-spacer"></div>';
// sw.toolbar — action buttons
const toolbarItems = [
{
id: 'refresh',
icon: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>',
title: 'Refresh',
onClick: function () {
const cards = document.querySelector('.dashboard-cards');
if (cards) _loadChannels(cards, _currentFilter);
sw.toast('Refreshed', 'success');
},
},
];
// sw.isAdmin — conditionally show admin action
if (sw.isAdmin) {
toolbarItems.push({
id: 'admin',
icon: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>',
title: 'Admin Panel',
onClick: function () { window.location.href = base + '/admin'; },
});
}
sw.toolbar(el, { items: toolbarItems });
return el;
}
// ── Main Content ────────────────────────────
let _currentFilter = '';
function _buildMainContent(main) {
// sw.user — greeting
const user = sw.user;
const greeting = document.createElement('div');
greeting.className = 'dashboard-greeting';
greeting.textContent = 'Welcome back' + (user ? ', ' + (user.display_name || user.username) : '');
main.appendChild(greeting);
const subtitle = document.createElement('div');
subtitle.className = 'dashboard-subtitle';
subtitle.textContent = 'Your recent conversations' + (sw.isAdmin ? ' \u00b7 Admin' : '');
main.appendChild(subtitle);
// ── Filter bar ──
const filterBar = document.createElement('div');
filterBar.className = 'dashboard-filter-bar';
main.appendChild(filterBar);
const filterLabel = document.createElement('span');
filterLabel.className = 'dashboard-filter-label';
filterLabel.textContent = 'Filter';
filterBar.appendChild(filterLabel);
// sw.dropdown — channel type filter
sw.dropdown(filterBar, {
items: [
{ value: '', label: 'All channels' },
{ value: 'channel', label: 'Team channels' },
{ value: 'direct', label: 'Direct chats' },
{ value: 'workflow', label: 'Workflows' },
],
value: '',
onChange: function (value) {
_currentFilter = value;
// sw.emit — cross-component event
sw.emit('dashboard.filter.changed', { value: value });
},
});
// ── Cards ──
const cards = document.createElement('div');
cards.className = 'dashboard-cards';
main.appendChild(cards);
_loadChannels(cards, '');
// ── Admin section (sw.isAdmin) ──
if (sw.isAdmin) {
const adminSection = document.createElement('div');
adminSection.className = 'dashboard-admin-section';
main.appendChild(adminSection);
const sectionTitle = document.createElement('div');
sectionTitle.className = 'dashboard-section-title';
sectionTitle.textContent = 'Administration';
adminSection.appendChild(sectionTitle);
const adminCards = document.createElement('div');
adminCards.className = 'dashboard-cards';
adminSection.appendChild(adminCards);
_loadAdminCards(adminCards);
}
}
// ── Channel Cards ───────────────────────────
async function _loadChannels(container, typeFilter) {
if (!container) return;
container.innerHTML = '<div class="dashboard-empty">Loading\u2026</div>';
try {
// sw.api — real API call
let url = '/api/v1/channels?page=1&per_page=12';
if (typeFilter) url += '&type=' + encodeURIComponent(typeFilter);
const resp = await sw.api.get(url);
const channels = resp.data || resp || [];
container.innerHTML = '';
if (!channels.length) {
container.innerHTML = '<div class="dashboard-empty">No channels found</div>';
return;
}
channels.forEach(function (ch) {
container.appendChild(_buildChannelCard(ch));
});
} catch (e) {
container.innerHTML = '<div class="dashboard-empty">Failed to load: ' + (typeof esc === 'function' ? esc(e.message) : e.message) + '</div>';
}
}
function _buildChannelCard(ch) {
const card = document.createElement('div');
card.className = 'dashboard-card';
const header = document.createElement('div');
header.className = 'dashboard-card-header';
card.appendChild(header);
const title = document.createElement('div');
title.className = 'dashboard-card-title';
title.textContent = ch.title || ch.name || 'Untitled';
header.appendChild(title);
const meta = document.createElement('div');
meta.className = 'dashboard-card-meta';
meta.textContent = ch.type || '';
card.appendChild(meta);
if (ch.description) {
const desc = document.createElement('div');
desc.className = 'dashboard-card-desc';
desc.textContent = ch.description.slice(0, 120);
card.appendChild(desc);
}
const updated = ch.updated_at || ch.created_at;
if (updated) {
const date = document.createElement('div');
date.className = 'dashboard-card-meta';
date.textContent = new Date(updated).toLocaleDateString();
card.appendChild(date);
}
// ── Card action menu ──
const actions = document.createElement('div');
actions.className = 'dashboard-card-actions';
card.appendChild(actions);
const menuBtn = document.createElement('button');
menuBtn.className = 'icon-btn';
menuBtn.title = 'Actions';
menuBtn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="5" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="12" cy="19" r="1"/></svg>';
actions.appendChild(menuBtn);
// sw.menu — per-card action flyout
sw.menu(menuBtn, {
items: [
{
label: 'Open',
icon: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>',
onClick: function () {
window.location.href = base + '/chat/' + ch.id;
},
},
{
label: 'Details',
icon: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>',
onClick: function () {
// sw.modal — show channel details
_showDetailModal(ch);
},
},
{ divider: true },
{
label: 'Delete',
danger: true,
icon: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><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>',
onClick: function () {
_deleteChannel(ch);
},
},
],
position: 'down',
});
return card;
}
// ── Detail Modal ────────────────────────────
function _showDetailModal(ch) {
// Build modal content
let existing = document.getElementById('dashDetailModal');
if (existing) existing.remove();
const modal = document.createElement('div');
modal.id = 'dashDetailModal';
modal.className = 'modal-overlay';
modal.style.cssText = 'position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:var(--overlay)';
const box = document.createElement('div');
box.style.cssText = 'background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;max-width:400px;width:90%;max-height:80vh;overflow-y:auto;';
box.innerHTML =
'<h3 style="margin:0 0 12px;font-size:16px;color:var(--text);">' + (typeof esc === 'function' ? esc(ch.title || 'Untitled') : (ch.title || 'Untitled')) + '</h3>' +
'<div style="font-size:12px;color:var(--text-2);margin-bottom:8px;"><strong>Type:</strong> ' + (typeof esc === 'function' ? esc(ch.type || 'unknown') : (ch.type || 'unknown')) + '</div>' +
'<div style="font-size:12px;color:var(--text-2);margin-bottom:8px;"><strong>ID:</strong> ' + (typeof esc === 'function' ? esc(ch.id || '') : (ch.id || '')) + '</div>' +
(ch.description ? '<div style="font-size:12px;color:var(--text-2);margin-bottom:8px;"><strong>Description:</strong> ' + (typeof esc === 'function' ? esc(ch.description) : ch.description) + '</div>' : '') +
(ch.created_at ? '<div style="font-size:12px;color:var(--text-3);margin-bottom:16px;">Created: ' + new Date(ch.created_at).toLocaleString() + '</div>' : '') +
'<div style="display:flex;justify-content:flex-end;gap:8px;">' +
'<button class="btn-small" id="dashDetailClose">Close</button>' +
'<button class="btn-small btn-primary" id="dashDetailOpen">Open Chat</button>' +
'</div>';
modal.appendChild(box);
document.body.appendChild(modal);
modal.addEventListener('click', function (e) {
if (e.target === modal) modal.remove();
});
document.getElementById('dashDetailClose').addEventListener('click', function () { modal.remove(); });
document.getElementById('dashDetailOpen').addEventListener('click', function () {
window.location.href = base + '/chat/' + ch.id;
});
}
// ── Delete Channel ──────────────────────────
async function _deleteChannel(ch) {
// sw.confirm — destructive action guard
const ok = await sw.confirm('Delete "' + (ch.title || 'Untitled') + '"? This cannot be undone.');
if (!ok) return;
try {
// sw.api.del — real DELETE call
await sw.api.del('/api/v1/channels/' + ch.id);
// sw.toast — success feedback
sw.toast('Channel deleted', 'success');
// Refresh cards
const cards = document.querySelector('.dashboard-cards');
if (cards) _loadChannels(cards, _currentFilter);
} catch (e) {
// sw.toast — error feedback
sw.toast('Delete failed: ' + e.message, 'error');
}
}
// ── Admin Cards ─────────────────────────────
async function _loadAdminCards(container) {
try {
const resp = await sw.api.get('/api/v1/admin/packages');
const packages = resp.data || resp || [];
container.innerHTML = '';
packages.forEach(function (pkg) {
const card = document.createElement('div');
card.className = 'dashboard-card';
card.innerHTML =
'<div class="dashboard-card-header">' +
'<div class="dashboard-card-title">' + (typeof esc === 'function' ? esc(pkg.title || pkg.id) : (pkg.title || pkg.id)) + '</div>' +
'</div>' +
'<div class="dashboard-card-meta">' + (typeof esc === 'function' ? esc(pkg.type || '') : (pkg.type || '')) + ' \u00b7 ' + (typeof esc === 'function' ? esc(pkg.tier || '') : (pkg.tier || '')) + '</div>' +
'<div class="dashboard-card-desc">' + (typeof esc === 'function' ? esc(pkg.description || '') : (pkg.description || '')) + '</div>';
container.appendChild(card);
});
if (!packages.length) {
container.innerHTML = '<div class="dashboard-empty">No packages installed</div>';
}
} catch (_) {
container.innerHTML = '<div class="dashboard-empty">Failed to load packages</div>';
}
}
// ── Boot ─────────────────────────────────────
document.addEventListener('DOMContentLoaded', _init);
})();

14
packages/dashboard/manifest.json Normal file
View File

@@ -0,0 +1,14 @@
{
"id": "dashboard",
"title": "Dashboard",
"type": "full",
"version": "0.31.1",
"tier": "browser",
"author": "Chat Switchboard",
"description": "Project dashboard exercising all SDK primitives",
"route": "/s/dashboard",
"permissions": [],
"settings": [
{ "key": "refresh_interval", "label": "Auto-Refresh (seconds)", "type": "number", "default": 0 }
]
}

243
packages/editor/js/main.js
View File

@@ -317,13 +317,15 @@
// ── Assist pane (tabbed: chat + notes) via SDK ──
if (assistPaneInfo?.tabs) {
// Chat tab
// Chat tab — standalone mode handles everything (streaming, model selector, history)
const chatPanel = assistPaneInfo.getTabPanel('chat');
if (chatPanel) {
const chatPane = sw.chat(chatPanel, { id: PREFIX, standalone: true });
const chatPane = sw.chat(chatPanel, {
id: PREFIX,
standalone: true,
getContext: () => _getFileContext(codeEditor),
});
if (chatPane) {
chatPane.showWelcome();
_initAssistChat(chatPane, codeEditor);
const chatTab = assistPaneInfo.tabs.find(t => t.id === 'chat');
if (chatTab) chatTab.instance = chatPane;
}
@@ -409,227 +411,22 @@
} catch (_) {}
}
// ── Assist Chat ─────────────────────────────
// ── File Context (editor-specific, passed to ChatPane via getContext) ──
function _initAssistChat(chatPane, codeEditor) {
const inputEl = chatPane.inputEl;
const sendBtn = chatPane.sendBtnEl;
const headerEl = document.getElementById(PREFIX + 'ChatHeader');
const selectEl = document.getElementById(PREFIX + 'ChatSelect');
const newBtnEl = document.getElementById(PREFIX + 'ChatNewBtn');
const modelSelEl = document.getElementById(PREFIX + 'ModelSel');
if (!inputEl) return;
if (headerEl) headerEl.style.display = '';
let _channelId = null, _messages = [], _sending = false, _abortController = null;
let _selectedModel = App.settings?.model || '';
async function _initModelSelector() {
if (!modelSelEl) return;
if (!App.models?.length && typeof fetchModels === 'function') await fetchModels();
const models = App.models || [];
if (!models.length) return;
const sel = document.createElement('select');
sel.className = 'chat-pane-model-select';
sel.title = 'Select model';
models.forEach(m => {
if (m.hidden) return;
const opt = document.createElement('option');
opt.value = m.isPersona ? (m.personaId || m.id) : m.id;
opt.textContent = (m.isPersona ? '\ud83c\udfad ' : '') + (m.name || m.id);
if (m.id === _selectedModel || m.personaId === _selectedModel) opt.selected = true;
sel.appendChild(opt);
});
sel.addEventListener('change', () => { _selectedModel = sel.value; });
modelSelEl.innerHTML = '';
modelSelEl.appendChild(sel);
}
async function _loadChatHistory() {
if (!selectEl) return;
try {
const resp = await API.listChannels(1, 20, 'direct');
const channels = resp.data || resp || [];
selectEl.innerHTML = '<option value="">New conversation</option>';
channels.forEach(ch => {
const opt = document.createElement('option');
opt.value = ch.id;
opt.textContent = ch.title || 'Untitled';
if (ch.id === _channelId) opt.selected = true;
selectEl.appendChild(opt);
});
} catch (_) {}
}
if (selectEl) selectEl.addEventListener('change', () => { selectEl.value ? _switchToChannel(selectEl.value) : _newChat(); });
if (newBtnEl) newBtnEl.addEventListener('click', _newChat);
async function _switchToChannel(channelId) {
_channelId = channelId;
_messages = [];
chatPane.clear();
chatPane.appendTyping();
try {
const resp = await API._get('/api/v1/channels/' + channelId + '/messages?page=1&per_page=100');
_messages = resp.data || resp || [];
chatPane.removeTyping();
_renderAllMessages();
} catch (e) {
chatPane.removeTyping();
_appendSystemMsg('Failed to load messages: ' + e.message);
function _getFileContext(editor) {
if (!editor) return null;
try {
const openFiles = editor.getOpenFiles();
if (!openFiles.length) return null;
const activeTab = document.querySelector('.code-editor-tab.active');
const path = activeTab?.dataset?.path || openFiles[0];
const inst = CodeEditor._instances?.get(PREFIX);
if (inst?._files) {
const file = inst._files.get(path);
if (file?.view) return { path, content: file.view.state.doc.toString().slice(0, 4000) };
}
}
function _newChat() {
_channelId = null;
_messages = [];
chatPane.showWelcome();
if (selectEl) selectEl.value = '';
}
const ta = document.createElement('textarea');
ta.placeholder = 'Ask about your code\u2026';
ta.rows = 1;
inputEl.appendChild(ta);
ta.addEventListener('input', () => { ta.style.height = 'auto'; ta.style.height = Math.min(ta.scrollHeight, 160) + 'px'; });
async function sendMessage() {
const text = ta.value.trim();
if (!text || _sending) return;
_sending = true;
if (sendBtn) sendBtn.disabled = true;
ta.value = '';
ta.style.height = 'auto';
if (!_channelId) {
try {
const title = text.slice(0, 50) + (text.length > 50 ? '\u2026' : '');
const resp = await API.createChannel(title, _selectedModel, '', 'direct');
_channelId = resp.id;
_loadChatHistory();
} catch (e) {
_appendSystemMsg('Failed to create chat: ' + e.message);
_sending = false;
if (sendBtn) sendBtn.disabled = false;
return;
}
}
_messages.push({ role: 'user', content: text });
_renderAllMessages();
try {
_abortController = new AbortController();
const fileCtx = _getFileContext(codeEditor);
const content = fileCtx
? text + '\n\n[Context: Currently editing ' + fileCtx.path + ']\n```\n' + fileCtx.content + '\n```'
: text;
const resp = await API.streamCompletion(_channelId, content, _selectedModel, _abortController.signal);
await _handleStream(resp, chatPane);
} catch (e) {
if (e.name !== 'AbortError') _appendSystemMsg('Error: ' + e.message);
}
_abortController = null;
_sending = false;
if (sendBtn) sendBtn.disabled = false;
ta.focus();
}
if (sendBtn) sendBtn.addEventListener('click', sendMessage);
ta.addEventListener('keydown', (e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMessage(); } });
async function _handleStream(response, pane) {
const messagesEl = pane.messagesEl;
if (!messagesEl) return;
const div = document.createElement('div');
div.className = 'chat-msg chat-msg--assistant chat-msg--streaming';
const contentEl = document.createElement('div');
contentEl.className = 'chat-msg__content';
div.appendChild(contentEl);
messagesEl.appendChild(div);
let content = '';
const reader = response.body.getReader();
const decoder = new TextDecoder();
let buffer = '';
try {
while (true) {
const { done, value } = await reader.read();
if (done) break;
buffer += decoder.decode(value, { stream: true });
const lines = buffer.split('\n');
buffer = lines.pop() || '';
for (const line of lines) {
if (!line.startsWith('data: ')) continue;
const data = line.slice(6);
if (data === '[DONE]') continue;
try {
const delta = JSON.parse(data).choices?.[0]?.delta?.content;
if (delta) {
content += delta;
if (typeof marked !== 'undefined' && typeof DOMPurify !== 'undefined') {
contentEl.innerHTML = DOMPurify.sanitize(marked.parse(content));
} else {
contentEl.textContent = content;
}
pane.scrollToBottom();
}
} catch (_) {}
}
}
} catch (e) {
if (e.name !== 'AbortError') content += '\n\n**[Stream error: ' + e.message + ']**';
}
div.classList.remove('chat-msg--streaming');
_messages.push({ role: 'assistant', content });
}
function _renderAllMessages() {
if (!chatPane.messagesEl) return;
chatPane.messagesEl.innerHTML = '';
_messages.forEach(m => {
const div = document.createElement('div');
div.className = 'chat-msg chat-msg--' + m.role;
const c = document.createElement('div');
c.className = 'chat-msg__content';
if (typeof marked !== 'undefined' && typeof DOMPurify !== 'undefined') {
c.innerHTML = DOMPurify.sanitize(marked.parse(m.content || ''));
} else {
c.textContent = m.content || '';
}
div.appendChild(c);
chatPane.messagesEl.appendChild(div);
});
chatPane.scrollToBottom();
}
function _appendSystemMsg(text) {
const div = document.createElement('div');
div.className = 'chat-msg chat-msg--system';
div.innerHTML = '<div class="chat-msg__content" style="color:var(--danger,#f44336);font-size:12px;">' + esc(text) + '</div>';
chatPane.messagesEl?.appendChild(div);
chatPane.scrollToBottom();
}
function _getFileContext(editor) {
if (!editor) return null;
try {
const openFiles = editor.getOpenFiles();
if (!openFiles.length) return null;
const activeTab = document.querySelector('.code-editor-tab.active');
const path = activeTab?.dataset?.path || openFiles[0];
const inst = CodeEditor._instances?.get(PREFIX);
if (inst?._files) {
const file = inst._files.get(path);
if (file?.view) return { path, content: file.view.state.doc.toString().slice(0, 4000) };
}
} catch (_) {}
return null;
}
function _deferredInit() { _initModelSelector(); _loadChatHistory(); }
if (App.models?.length) _deferredInit();
else document.addEventListener('sb:ready', _deferredInit, { once: true });
} catch (_) {}
return null;
}
// ── State Persistence (localStorage) ─────────

122
packages/icd-test-runner/js/crud/dashboard-package.js Normal file
View File

@@ -0,0 +1,122 @@
/**
* ICD Test Runner — CRUD: Dashboard Package (v0.31.1)
* Tests the dashboard .pkg lifecycle: install → surface accessible →
* settings → export/import round-trip.
* Uses T.crud.buildTestZip() from _helpers.js.
*/
(function () {
'use strict';
var T = window.ICD;
if (!T) return;
if (!T.crud) T.crud = {};
var buildTestZip = T.crud.buildTestZip;
T.crud.dashboardPackage = async function (testTag) {
if (T.user.role !== 'admin') return;
// ── dashpkg: Dashboard package install + lifecycle ──
var dashPkgId = null;
await T.test('crud', 'dashboardPackage', 'dashpkg: POST /admin/packages/install (dashboard .pkg)', async function () {
var manifest = JSON.stringify({
id: 'dashboard',
title: 'Dashboard',
type: 'full',
version: '0.31.1',
tier: 'browser',
author: 'Chat Switchboard',
description: 'Project dashboard exercising all SDK primitives',
route: '/s/dashboard',
permissions: [],
settings: [
{ key: 'refresh_interval', label: 'Auto-Refresh (seconds)', type: 'number', 'default': 0 }
]
});
var zipBlob = buildTestZip({
'manifest.json': manifest,
'js/main.js': '// dashboard package entry point\nconsole.log("[DashboardPkg] loaded");',
'css/main.css': '.surface-dashboard { display: flex; }'
});
var d = await T.apiUpload('/admin/packages/install', zipBlob, 'dashboard.pkg');
T.assert(d.id === 'dashboard', 'package id should be "dashboard", got: ' + d.id);
dashPkgId = d.id;
T.registerCleanup(async function () {
if (dashPkgId) {
var token = await T.getAuthToken();
return T.authFetch(token, 'DELETE', '/admin/packages/' + dashPkgId);
}
});
});
if (!dashPkgId) return;
await T.test('crud', 'dashboardPackage', 'dashpkg: GET /admin/packages/:id (verify type full)', async function () {
var d = await T.apiGet('/admin/packages/' + dashPkgId);
T.assertShape(d, T.S.extension, 'dashboard package');
T.assert(d.type === 'full', 'type should be "full", got: ' + d.type);
T.assert(d.tier === 'browser', 'tier should be "browser", got: ' + d.tier);
T.assert(d.source === 'extension', 'source should be "extension", got: ' + d.source);
T.assert(d.enabled === true, 'newly installed package should be enabled');
T.assert(d.version === '0.31.1', 'version mismatch');
});
await T.test('crud', 'dashboardPackage', 'dashpkg: GET /admin/surfaces (dashboard in list)', async function () {
var d = await T.apiGet('/admin/surfaces');
T.assertHasKey(d, 'data', '/admin/surfaces');
var found = d.data.some(function (s) { return s.id === 'dashboard'; });
T.assert(found, 'dashboard package should appear in surfaces list');
});
// ── Settings ──
await T.test('crud', 'dashboardPackage', 'dashpkg: GET /admin/packages/:id/settings', async function () {
var d = await T.apiGet('/admin/packages/' + dashPkgId + '/settings');
T.assert(typeof d === 'object', 'settings should be an object');
});
await T.test('crud', 'dashboardPackage', 'dashpkg: PUT /admin/packages/:id/settings', async function () {
var settings = { refresh_interval: 30 };
var d = await T.apiPut('/admin/packages/' + dashPkgId + '/settings', settings);
T.assert(d._status === 200 || d._status === 204 || !d._status, 'settings PUT should succeed');
// Verify persistence
var check = await T.apiGet('/admin/packages/' + dashPkgId + '/settings');
T.assert(check.refresh_interval === 30 || check.data?.refresh_interval === 30,
'refresh_interval should persist as 30');
});
// ── Export/Import Round-Trip ──
var exportBlob = null;
await T.test('crud', 'dashboardPackage', 'dashpkg: GET /admin/packages/:id/export', async function () {
var token = await T.getAuthToken();
var resp = await fetch(T.base + '/api/v1/admin/packages/' + dashPkgId + '/export', {
headers: { 'Authorization': 'Bearer ' + token }
});
T.assert(resp.ok, 'export should return 200, got: ' + resp.status);
exportBlob = await resp.blob();
T.assert(exportBlob.size > 0, 'export blob should not be empty');
});
if (exportBlob) {
await T.test('crud', 'dashboardPackage', 'dashpkg: DELETE + re-import round-trip', async function () {
var token = await T.getAuthToken();
var delResp = await T.authFetch(token, 'DELETE', '/admin/packages/' + dashPkgId);
T.assert(!delResp._status || delResp._status < 300, 'delete should succeed');
var d = await T.apiUpload('/admin/packages/install', exportBlob, 'dashboard.pkg');
T.assert(d.id === 'dashboard', 'reimported package id should be "dashboard"');
var check = await T.apiGet('/admin/packages/' + dashPkgId);
T.assert(check.id === 'dashboard', 'reimported dashboard should be readable');
T.assert(check.type === 'full', 'reimported type should be "full"');
});
}
};
})();

1
packages/icd-test-runner/js/main.js
View File

@@ -79,6 +79,7 @@
'crud/extensions.js',
'crud/surfaces.js',
'crud/editor-package.js',
'crud/dashboard-package.js',
// Orchestrator (must come after all crud/*.js)
'tier-crud.js',
'tier-authz.js',

3
packages/icd-test-runner/js/tier-crud.js
View File

@@ -30,6 +30,7 @@
if (C.personas) await C.personas(testTag);
if (C.extensions) await C.extensions(testTag);
if (C.surfaces) await C.surfaces(testTag);
if (C.editorPackage) await C.editorPackage(testTag);
if (C.editorPackage) await C.editorPackage(testTag);
if (C.dashboardPackage) await C.dashboardPackage(testTag);
};
})();