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

Feat v0.6.12 extension css isolation
Some checks failed
CI/CD / detect-changes (pull_request) Successful in 4s
Details
CI/CD / build-and-deploy (pull_request) Has been cancelled
Details
CI/CD / test-sqlite (pull_request) Has been cancelled
Details
CI/CD / test-go-pg (pull_request) Has been cancelled
Details
CI/CD / test-frontend (pull_request) Has been cancelled
Details

Browse Source 
Prefix enforcement prevents extension CSS from leaking into the kernel
or sibling extensions. All 12 in-tree packages migrated to .ext-{slug}-*
naming convention.

- Add data-ext attribute to extension mount container
- Add CSS linter (scripts/lint-package-css.sh) enforcing .ext-{slug} prefix
- Add kernel CSS contract doc (docs/EXTENSION-CSS.md)
- Migrate 12 packages: chat, dashboard, editor, git-board, hello-dashboard,
  icd-test-runner, notes, schedules, sdk-test-runner, tasks,
  team-activity-log, workflow-demo (CSS + JS in lockstep)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jeffrey Smith
2026-04-01 11:54:51 +00:00
parent 786bc92768
commit abf71162b1
33 changed files with 1385 additions and 1074 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
packages/dashboard/js/main.js
View File

@@ -28,7 +28,7 @@
if (!mount) return;
const surface = document.createElement('div');
surface.className = 'surface-dashboard';
surface.className = 'ext-dashboard';
surface.id = 'dashboardSurface';
mount.appendChild(surface);
@@ -41,12 +41,12 @@
// ── Body ──
const body = document.createElement('div');
body.className = 'dashboard-body';
body.className = 'ext-dashboard-body';
surface.appendChild(body);
// ── Sidebar (tabs: activity + notes) ──
const sidebar = document.createElement('div');
sidebar.className = 'dashboard-sidebar';
sidebar.className = 'ext-dashboard-sidebar';
body.appendChild(sidebar);
// sw.tabs — two tabs
@@ -83,14 +83,14 @@
// ── Main content area ──
const main = document.createElement('div');
main.className = 'dashboard-main';
main.className = 'ext-dashboard-main';
body.appendChild(main);
_buildMainContent(main);
// ── Theme reactivity ──
sw.theme.on('change', function (resolved) {
const cards = main.querySelectorAll('.dashboard-card');
const cards = main.querySelectorAll('.ext-dashboard-card');
cards.forEach(function (c) {
c.style.borderColor = ''; // reset to CSS default for new theme
});
@@ -98,7 +98,7 @@
// ── Cross-component events ──
sw.on('dashboard.filter.changed', function (payload) {
_loadChannels(main.querySelector('.dashboard-cards'), payload.value);
_loadChannels(main.querySelector('.ext-dashboard-cards'), payload.value);
});
console.log('[DashboardPkg] Mounted');
@@ -108,15 +108,15 @@
function _buildTopbar() {
const el = document.createElement('div');
el.className = 'dashboard-topbar';
el.className = 'ext-dashboard-topbar';
el.innerHTML =
'<a href="' + esc(base) + '/" class="dashboard-topbar-back" title="Back to chat">' +
'<a href="' + esc(base) + '/" class="ext-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>';
'<div class="ext-dashboard-topbar-sep"></div>' +
'<span class="ext-dashboard-topbar-title">Dashboard</span>' +
'<div class="ext-dashboard-topbar-spacer"></div>';
// sw.toolbar — action buttons
const toolbarItems = [
@@ -125,7 +125,7 @@
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');
const cards = document.querySelector('.ext-dashboard-cards');
if (cards) _loadChannels(cards, _currentFilter);
sw.toast('Refreshed', 'success');
},
@@ -155,22 +155,22 @@
// sw.user — greeting
const user = sw.user;
const greeting = document.createElement('div');
greeting.className = 'dashboard-greeting';
greeting.className = 'ext-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.className = 'ext-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';
filterBar.className = 'ext-dashboard-filter-bar';
main.appendChild(filterBar);
const filterLabel = document.createElement('span');
filterLabel.className = 'dashboard-filter-label';
filterLabel.className = 'ext-dashboard-filter-label';
filterLabel.textContent = 'Filter';
filterBar.appendChild(filterLabel);
@@ -192,7 +192,7 @@
// ── Cards ──
const cards = document.createElement('div');
cards.className = 'dashboard-cards';
cards.className = 'ext-dashboard-cards';
main.appendChild(cards);
_loadChannels(cards, '');
@@ -200,16 +200,16 @@
// ── Admin section (sw.isAdmin) ──
if (sw.isAdmin) {
const adminSection = document.createElement('div');
adminSection.className = 'dashboard-admin-section';
adminSection.className = 'ext-dashboard-admin-section';
main.appendChild(adminSection);
const sectionTitle = document.createElement('div');
sectionTitle.className = 'dashboard-section-title';
sectionTitle.className = 'ext-dashboard-section-title';
sectionTitle.textContent = 'Administration';
adminSection.appendChild(sectionTitle);
const adminCards = document.createElement('div');
adminCards.className = 'dashboard-cards';
adminCards.className = 'ext-dashboard-cards';
adminSection.appendChild(adminCards);
_loadAdminCards(adminCards);
@@ -220,7 +220,7 @@
async function _loadChannels(container, typeFilter) {
if (!container) return;
container.innerHTML = '<div class="dashboard-empty">Loading\u2026</div>';
container.innerHTML = '<div class="ext-dashboard-empty">Loading\u2026</div>';
try {
// sw.api — real API call
@@ -231,7 +231,7 @@
container.innerHTML = '';
if (!channels.length) {
container.innerHTML = '<div class="dashboard-empty">No channels found</div>';
container.innerHTML = '<div class="ext-dashboard-empty">No channels found</div>';
return;
}
@@ -239,31 +239,31 @@
container.appendChild(_buildChannelCard(ch));
});
} catch (e) {
container.innerHTML = '<div class="dashboard-empty">Failed to load: ' + (typeof esc === 'function' ? esc(e.message) : e.message) + '</div>';
container.innerHTML = '<div class="ext-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';
card.className = 'ext-dashboard-card';
const header = document.createElement('div');
header.className = 'dashboard-card-header';
header.className = 'ext-dashboard-card-header';
card.appendChild(header);
const title = document.createElement('div');
title.className = 'dashboard-card-title';
title.className = 'ext-dashboard-card-title';
title.textContent = ch.title || ch.name || 'Untitled';
header.appendChild(title);
const meta = document.createElement('div');
meta.className = 'dashboard-card-meta';
meta.className = 'ext-dashboard-card-meta';
meta.textContent = ch.type || '';
card.appendChild(meta);
if (ch.description) {
const desc = document.createElement('div');
desc.className = 'dashboard-card-desc';
desc.className = 'ext-dashboard-card-desc';
desc.textContent = ch.description.slice(0, 120);
card.appendChild(desc);
}
@@ -271,14 +271,14 @@
const updated = ch.updated_at || ch.created_at;
if (updated) {
const date = document.createElement('div');
date.className = 'dashboard-card-meta';
date.className = 'ext-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';
actions.className = 'ext-dashboard-card-actions';
card.appendChild(actions);
const menuBtn = document.createElement('button');
@@ -372,7 +372,7 @@
// sw.toast — success feedback
sw.toast('Channel deleted', 'success');
// Refresh cards
const cards = document.querySelector('.dashboard-cards');
const cards = document.querySelector('.ext-dashboard-cards');
if (cards) _loadChannels(cards, _currentFilter);
} catch (e) {
// sw.toast — error feedback
@@ -390,21 +390,21 @@
container.innerHTML = '';
packages.forEach(function (pkg) {
const card = document.createElement('div');
card.className = 'dashboard-card';
card.className = 'ext-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 class="ext-dashboard-card-header">' +
'<div class="ext-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>';
'<div class="ext-dashboard-card-meta">' + (typeof esc === 'function' ? esc(pkg.type || '') : (pkg.type || '')) + ' \u00b7 ' + (typeof esc === 'function' ? esc(pkg.tier || '') : (pkg.tier || '')) + '</div>' +
'<div class="ext-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>';
container.innerHTML = '<div class="ext-dashboard-empty">No packages installed</div>';
}
} catch (_) {
container.innerHTML = '<div class="dashboard-empty">Failed to load packages</div>';
container.innerHTML = '<div class="ext-dashboard-empty">Failed to load packages</div>';
}
}