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

54
packages/workflow-demo/js/main.js
View File

@@ -103,25 +103,25 @@
if (!mount) return;
const surface = document.createElement('div');
surface.className = 'surface-workflow-demo';
surface.className = 'ext-workflow-demo';
mount.appendChild(surface);
// Topbar with user menu
const topbar = document.createElement('div');
topbar.className = 'demo-topbar';
topbar.className = 'ext-workflow-demo-topbar';
topbar.innerHTML = '<h1>Workflow Demo</h1>';
surface.appendChild(topbar);
sw.userMenu(topbar, { flyout: 'down' });
// Subtitle
const subtitle = document.createElement('p');
subtitle.className = 'demo-subtitle';
subtitle.className = 'ext-workflow-demo-subtitle';
subtitle.textContent = 'Four example workflows that prove the engine works end-to-end. Install any package via Admin > Packages.';
surface.appendChild(subtitle);
// Workflow cards
const grid = document.createElement('div');
grid.className = 'demo-grid';
grid.className = 'ext-workflow-demo-grid';
surface.appendChild(grid);
// Fetch installed workflows to check status
@@ -145,28 +145,28 @@
function _buildCard(wf, installedWf) {
const card = document.createElement('div');
card.className = 'demo-card';
card.className = 'ext-workflow-demo-card';
// Title row
const titleRow = document.createElement('div');
titleRow.className = 'card-title-row';
titleRow.innerHTML = '<span class="card-icon">' + wf.icon + '</span>'
titleRow.className = 'ext-workflow-demo-card-title-row';
titleRow.innerHTML = '<span class="ext-workflow-demo-card-icon">' + wf.icon + '</span>'
+ '<h2>' + _esc(wf.title) + '</h2>'
+ '<span class="card-tier badge-' + wf.tier + '">' + wf.tier + '</span>';
+ '<span class="ext-workflow-demo-card-tier ext-workflow-demo-badge-' + wf.tier + '">' + wf.tier + '</span>';
card.appendChild(titleRow);
// Description
const desc = document.createElement('p');
desc.className = 'card-desc';
desc.className = 'ext-workflow-demo-card-desc';
desc.textContent = wf.description;
card.appendChild(desc);
// Badges
const badges = document.createElement('div');
badges.className = 'card-badges';
badges.className = 'ext-workflow-demo-card-badges';
for (const b of wf.badges) {
const span = document.createElement('span');
span.className = 'badge';
span.className = 'ext-workflow-demo-badge';
span.textContent = b;
badges.appendChild(span);
}
@@ -188,7 +188,7 @@
// Status + action
const actions = document.createElement('div');
actions.className = 'card-actions';
actions.className = 'ext-workflow-demo-card-actions';
if (installedWf) {
const isActive = installedWf.is_active;
@@ -199,18 +199,18 @@
// Installed badge
const status = document.createElement('span');
status.className = 'badge badge-installed';
status.className = 'ext-workflow-demo-badge ext-workflow-demo-badge-installed';
status.textContent = 'Installed';
actions.appendChild(status);
if (!isActive) {
const hint = document.createElement('span');
hint.className = 'badge badge-needs-publish';
hint.className = 'ext-workflow-demo-badge ext-workflow-demo-badge-needs-publish';
hint.textContent = 'Not Active';
actions.appendChild(hint);
} else if (!isPublished) {
const hint = document.createElement('span');
hint.className = 'badge badge-needs-publish';
hint.className = 'ext-workflow-demo-badge ext-workflow-demo-badge-needs-publish';
hint.textContent = 'Not Published';
actions.appendChild(hint);
}
@@ -235,14 +235,14 @@
// Public link for public_link workflows
if (installedWf.entry_mode === 'public_link' && isReady) {
const linkRow = document.createElement('div');
linkRow.className = 'public-link-row';
linkRow.className = 'ext-workflow-demo-public-link-row';
const linkInput = document.createElement('input');
linkInput.type = 'text';
linkInput.readOnly = true;
linkInput.value = window.location.origin + base + '/api/v1/public/workflows/' + installedWf.id + '/start';
linkRow.appendChild(linkInput);
const copyBtn = document.createElement('button');
copyBtn.className = 'btn-copy';
copyBtn.className = 'ext-workflow-demo-btn-copy';
copyBtn.textContent = 'Copy';
copyBtn.onclick = function () {
navigator.clipboard.writeText(linkInput.value).then(function () {
@@ -255,7 +255,7 @@
}
} else {
const status = document.createElement('span');
status.className = 'badge badge-not-installed';
status.className = 'ext-workflow-demo-badge ext-workflow-demo-badge-not-installed';
status.textContent = 'Not Installed';
actions.appendChild(status);
}
@@ -268,7 +268,7 @@
function _buildStageDiagram(wf) {
const container = document.createElement('div');
container.className = 'stage-flow';
container.className = 'ext-workflow-demo-stage-flow';
const stages = wf.stages;
let hasBranch = false;
@@ -277,21 +277,21 @@
const s = stages[i];
const node = document.createElement('div');
node.className = 'stage-node stage-' + s.audience;
node.className = 'ext-workflow-demo-stage-node ext-workflow-demo-stage-' + s.audience;
const label = document.createElement('div');
label.className = 'stage-label';
label.className = 'ext-workflow-demo-stage-label';
label.textContent = s.name;
node.appendChild(label);
const meta = document.createElement('div');
meta.className = 'stage-meta';
meta.className = 'ext-workflow-demo-stage-meta';
meta.textContent = s.mode + (s.audience !== 'team' ? ' (' + s.audience + ')' : '');
node.appendChild(meta);
if (s.note) {
const note = document.createElement('div');
note.className = 'stage-note';
note.className = 'ext-workflow-demo-stage-note';
note.textContent = s.note;
node.appendChild(note);
}
@@ -301,13 +301,13 @@
// Arrow (except after last stage)
if (i < stages.length - 1 && !stages[i + 1].branch) {
const arrow = document.createElement('div');
arrow.className = 'stage-arrow';
arrow.className = 'ext-workflow-demo-stage-arrow';
arrow.textContent = '\u2192';
container.appendChild(arrow);
} else if (stages[i + 1] && stages[i + 1].branch) {
if (!hasBranch) {
const split = document.createElement('div');
split.className = 'stage-arrow stage-branch';
split.className = 'ext-workflow-demo-stage-arrow ext-workflow-demo-stage-branch';
split.textContent = '\u2193\u2197';
container.appendChild(split);
hasBranch = true;
@@ -322,14 +322,14 @@
function _buildCollapsible(title, innerHtml) {
const details = document.createElement('details');
details.className = 'card-collapsible';
details.className = 'ext-workflow-demo-card-collapsible';
const summary = document.createElement('summary');
summary.textContent = title;
details.appendChild(summary);
const content = document.createElement('div');
content.className = 'collapsible-content';
content.className = 'ext-workflow-demo-collapsible-content';
content.innerHTML = innerHtml;
details.appendChild(content);