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 }
]
}