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

62
packages/team-activity-log/css/main.css
View File

@@ -2,7 +2,7 @@
* Uses platform CSS variables exclusively for theming.
*/
.tal-shell {
.ext-team-activity-log-shell {
max-width: 720px;
margin: 0 auto;
padding: 24px 16px;
@@ -14,34 +14,34 @@
/* ── Header ────────────────────────────────── */
.tal-header {
.ext-team-activity-log-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.tal-header__left {
.ext-team-activity-log-header__left {
display: flex;
align-items: baseline;
gap: 10px;
}
.tal-title {
.ext-team-activity-log-title {
font-size: 20px;
font-weight: 600;
color: var(--text);
margin: 0;
}
.tal-subtitle {
.ext-team-activity-log-subtitle {
font-size: 13px;
color: var(--text-3);
}
/* ── Entry Form ────────────────────────────── */
.tal-form {
.ext-team-activity-log-form {
display: flex;
gap: 8px;
background: var(--bg-surface);
@@ -50,7 +50,7 @@
padding: 10px 12px;
}
.tal-form__select {
.ext-team-activity-log-form__select {
background: var(--bg-raised);
border: 1px solid var(--border);
border-radius: var(--radius);
@@ -61,7 +61,7 @@
cursor: pointer;
}
.tal-form__input {
.ext-team-activity-log-form__input {
flex: 1;
background: var(--bg-raised);
border: 1px solid var(--border);
@@ -74,15 +74,15 @@
transition: border-color var(--transition);
}
.tal-form__input:focus {
.ext-team-activity-log-form__input:focus {
border-color: var(--accent);
}
.tal-form__input::placeholder {
.ext-team-activity-log-form__input::placeholder {
color: var(--text-3);
}
.tal-form__btn {
.ext-team-activity-log-form__btn {
background: var(--accent);
color: #fff;
border: none;
@@ -95,25 +95,25 @@
transition: background var(--transition);
}
.tal-form__btn:hover:not(:disabled) {
.ext-team-activity-log-form__btn:hover:not(:disabled) {
background: var(--accent-hover);
}
.tal-form__btn:disabled {
.ext-team-activity-log-form__btn:disabled {
opacity: 0.5;
cursor: default;
}
/* ── Filters ───────────────────────────────── */
.tal-filters {
.ext-team-activity-log-filters {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.tal-filter {
.ext-team-activity-log-filter {
background: var(--bg-raised);
border: 1px solid var(--border);
border-radius: var(--radius);
@@ -125,18 +125,18 @@
transition: all var(--transition);
}
.tal-filter:hover {
.ext-team-activity-log-filter:hover {
background: var(--bg-hover);
color: var(--text);
}
.tal-filter.active {
.ext-team-activity-log-filter.ext-team-activity-log-active {
background: var(--accent-dim);
border-color: var(--accent);
color: var(--accent);
}
.tal-count {
.ext-team-activity-log-count {
margin-left: auto;
font-size: 12px;
color: var(--text-3);
@@ -144,13 +144,13 @@
/* ── Entry List ────────────────────────────── */
.tal-entries {
.ext-team-activity-log-entries {
display: flex;
flex-direction: column;
gap: 6px;
}
.tal-entry {
.ext-team-activity-log-entry {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius);
@@ -158,36 +158,36 @@
transition: border-color var(--transition);
}
.tal-entry:hover {
.ext-team-activity-log-entry:hover {
border-color: var(--border-light);
}
.tal-entry__header {
.ext-team-activity-log-entry__header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 4px;
}
.tal-entry__category {
.ext-team-activity-log-entry__category {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.tal-entry__user {
.ext-team-activity-log-entry__user {
font-size: 13px;
font-weight: 500;
color: var(--text);
}
.tal-entry__time {
.ext-team-activity-log-entry__time {
font-size: 12px;
color: var(--text-3);
margin-left: auto;
}
.tal-entry__delete {
.ext-team-activity-log-entry__delete {
background: none;
border: none;
color: var(--text-3);
@@ -199,15 +199,15 @@
transition: all var(--transition);
}
.tal-entry:hover .tal-entry__delete {
.ext-team-activity-log-entry:hover .ext-team-activity-log-entry__delete {
opacity: 1;
}
.tal-entry__delete:hover {
.ext-team-activity-log-entry__delete:hover {
color: var(--danger);
}
.tal-entry__message {
.ext-team-activity-log-entry__message {
font-size: 14px;
color: var(--text);
line-height: 1.5;
@@ -215,8 +215,8 @@
/* ── Empty / Loading ───────────────────────── */
.tal-empty,
.tal-loading {
.ext-team-activity-log-empty,
.ext-team-activity-log-loading {
text-align: center;
padding: 40px 16px;
color: var(--text-3);

48
packages/team-activity-log/js/main.js
View File

@@ -104,34 +104,34 @@
}
return html`
<div class="tal-shell">
<header class="tal-header">
<div class="tal-header__left">
<h1 class="tal-title">Activity Log</h1>
<span class="tal-subtitle">Team activity tracker</span>
<div class="ext-team-activity-log-shell">
<header class="ext-team-activity-log-header">
<div class="ext-team-activity-log-header__left">
<h1 class="ext-team-activity-log-title">Activity Log</h1>
<span class="ext-team-activity-log-subtitle">Team activity tracker</span>
</div>
<div class="tal-header__right">
<div class="ext-team-activity-log-header__right">
<div ref=${menuRef}></div>
</div>
</header>
<${EntryForm} onSubmit=${addEntry} />
<div class="tal-filters">
<button class="tal-filter ${filter === '' ? 'active' : ''}"
<div class="ext-team-activity-log-filters">
<button class="ext-team-activity-log-filter ${filter === '' ? 'ext-team-activity-log-active' : ''}"
onClick=${() => setFilter('')}>All</button>
${CATEGORIES.map(c => html`
<button key=${c}
class="tal-filter ${filter === c ? 'active' : ''}"
class="ext-team-activity-log-filter ${filter === c ? 'ext-team-activity-log-active' : ''}"
onClick=${() => setFilter(c)}>
${c}
</button>
`)}
<span class="tal-count">${entries.length} entries</span>
<span class="ext-team-activity-log-count">${entries.length} entries</span>
</div>
${loading
? html`<div class="tal-loading">Loading…</div>`
? html`<div class="ext-team-activity-log-loading">Loading…</div>`
: html`<${EntryList} entries=${entries} onDelete=${deleteEntry} />`
}
</div>
@@ -153,17 +153,17 @@
}
return html`
<form class="tal-form" onSubmit=${submit}>
<select class="tal-form__select" value=${category}
<form class="ext-team-activity-log-form" onSubmit=${submit}>
<select class="ext-team-activity-log-form__select" value=${category}
onChange=${e => setCategory(e.target.value)}>
${CATEGORIES.map(c => html`<option key=${c} value=${c}>${c}</option>`)}
</select>
<input class="tal-form__input" type="text"
<input class="ext-team-activity-log-form__input" type="text"
placeholder="What happened?"
value=${message}
onInput=${e => setMessage(e.target.value)}
disabled=${submitting} />
<button class="tal-form__btn" type="submit" disabled=${submitting || !message.trim()}>
<button class="ext-team-activity-log-form__btn" type="submit" disabled=${submitting || !message.trim()}>
${submitting ? '…' : 'Log'}
</button>
</form>
@@ -172,21 +172,21 @@
function EntryList({ entries, onDelete }) {
if (!entries.length) {
return html`<div class="tal-empty">No entries yet. Log your first activity above.</div>`;
return html`<div class="ext-team-activity-log-empty">No entries yet. Log your first activity above.</div>`;
}
return html`
<div class="tal-entries">
<div class="ext-team-activity-log-entries">
${entries.map(e => html`
<div key=${e.id} class="tal-entry">
<div class="tal-entry__header">
<span class="tal-entry__category badge">${e.category}</span>
<span class="tal-entry__user">${esc(e.username || 'unknown')}</span>
<span class="tal-entry__time">${timeAgo(e.created_at)}</span>
<button class="tal-entry__delete" onClick=${() => onDelete(e.id)}
<div key=${e.id} class="ext-team-activity-log-entry">
<div class="ext-team-activity-log-entry__header">
<span class="ext-team-activity-log-entry__category badge">${e.category}</span>
<span class="ext-team-activity-log-entry__user">${esc(e.username || 'unknown')}</span>
<span class="ext-team-activity-log-entry__time">${timeAgo(e.created_at)}</span>
<button class="ext-team-activity-log-entry__delete" onClick=${() => onDelete(e.id)}
title="Delete">×</button>
</div>
<div class="tal-entry__message">${esc(e.message)}</div>
<div class="ext-team-activity-log-entry__message">${esc(e.message)}</div>
</div>
`)}
</div>