anentrypoint-design 0.0.358 → 0.0.360

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.358",
+  "version": "0.0.360",
   "description": "247420 design system SDK — webjsx + modified ripple-ui, single-file ESM bundle for reproducible use of the AnEntrypoint design.",
   "type": "module",
   "main": "./dist/247420.js",
@@ -23,6 +23,9 @@
     "./components/shell.js": "./src/components/shell.js",
     "./components/files.js": "./src/components/files.js",
     "./components/files-modals.js": "./src/components/files-modals.js",
+    "./components/overlay-primitives.js": "./src/components/overlay-primitives.js",
+    "./components/git-status.js": "./src/components/git-status.js",
+    "./components/worktree-switcher.js": "./src/components/worktree-switcher.js",
     "./web-components/ds-chat.js": "./src/web-components/ds-chat.js",
     "./web-components/freddie-chat.js": "./src/web-components/freddie-chat.js",
     "./lint": {

package/src/components/freddie.js

@@ -15,6 +15,8 @@ import { queueMessage, watchReconnect, isOnline } from '../idb-outbox.js';
 import { ChatMessage, ChatComposer } from './chat.js';
 import { fmtTime, fmtAgo } from './sessions.js';
 import { createVirtualizer, measureRef } from '../virtual-scroll.js';
+import { GitStatusPanel, GitDiffView } from './git-status.js';
+import { WorktreeSwitcher } from './worktree-switcher.js';
 
 const h = webjsx.createElement;
 
@@ -868,12 +870,92 @@ export const debug = makePage((ctx) => {
     };
 });
 
+// ---- git ---------------------------------------------------------------
+
+export const git = makePage((ctx) => {
+    Object.assign(ctx.state, { cwd: null, status: null, log: null, worktrees: null, diff: null, activeFile: null, diffLoading: false, note: null });
+    async function load() {
+        try {
+            const proj = await api('/api/projects').catch(() => null);
+            const active = proj && proj.active;
+            const cwd = (active && typeof active === 'object' ? active.path : null) || ctx.state.cwd || '';
+            const qs = '?cwd=' + encodeURIComponent(cwd);
+            const [status, log, worktrees] = await Promise.all([
+                api('/api/git/status' + qs).catch((e) => ({ _err: e })),
+                api('/api/git/log' + qs + '&limit=20').catch((e) => ({ _err: e })),
+                api('/api/worktree' + qs).catch((e) => ({ _err: e })),
+            ]);
+            ctx.set({ loading: false, cwd, status, log, worktrees, error: null });
+        } catch (e) { ctx.set({ loading: false, error: e }); }
+    }
+    async function openDiff(file) {
+        ctx.set({ activeFile: file.path, diffLoading: true, diff: null });
+        try {
+            const qs = '?cwd=' + encodeURIComponent(ctx.state.cwd || '') + '&file=' + encodeURIComponent(file.path);
+            const res = await api('/api/git/diff' + qs);
+            ctx.set({ diff: res, diffLoading: false });
+        } catch (e) { ctx.set({ note: { kind: 'error', msg: String(e.message || e) }, diffLoading: false }); }
+    }
+    async function createWorktree() {
+        const path = (ctx.state.newWtPath || '').trim();
+        const branch = (ctx.state.newWtBranch || '').trim();
+        if (!path) { ctx.set({ note: { kind: 'warn', msg: 'path required' } }); return; }
+        ctx.set({ busy: true, note: null });
+        try {
+            await api('/api/worktree', { method: 'POST', body: { cwd: ctx.state.cwd || '', path, branch: branch || undefined } });
+            ctx.state.newWtPath = ''; ctx.state.newWtBranch = '';
+            await load();
+        } catch (e) { ctx.set({ note: { kind: 'error', msg: String(e.message || e) } }); }
+        ctx.set({ busy: false });
+    }
+    load();
+    return () => {
+        const s = ctx.state;
+        if (s.loading) return loadingState('loading git status…');
+        if (s.error && !s.status) return errorState(s.error, load);
+        const statusFailed = s.status && s.status._err;
+        const logFailed = s.log && s.log._err;
+        const wtFailed = s.worktrees && s.worktrees._err;
+        const files = statusFailed ? [] : (s.status && s.status.files) || [];
+        const commits = logFailed ? [] : (s.log && s.log.commits) || s.log || [];
+        const worktrees = wtFailed ? [] : (s.worktrees && s.worktrees.worktrees) || s.worktrees || [];
+        const current = Array.isArray(worktrees) ? (worktrees.find(w => w.path === s.cwd) || {}).path : undefined;
+        return [
+            PageHeader({ eyebrow: 'freddie', title: 'git', lede: s.cwd || 'active project' }),
+            noteAlert(s.note),
+            statusFailed ? refreshError(statusFailed) : null,
+            section('worktrees',
+                WorktreeSwitcher({
+                    worktrees: Array.isArray(worktrees) ? worktrees : [],
+                    current,
+                    onSwitch: () => {},
+                    onCreate: () => ctx.set({ showWtForm: !s.showWtForm }),
+                }),
+                s.showWtForm ? h('div', { class: 'fd-row-actions' },
+                    TextField({ label: 'path', value: s.newWtPath, onInput: (v) => { s.newWtPath = v; }, placeholder: '/path/to/worktree' }),
+                    TextField({ label: 'branch (optional)', value: s.newWtBranch, onInput: (v) => { s.newWtBranch = v; }, placeholder: 'feature/x' }),
+                    Btn({ variant: 'primary', disabled: s.busy, children: s.busy ? 'working…' : 'create', onClick: createWorktree })) : null),
+            section('changed files',
+                statusFailed ? errorState(statusFailed) : GitStatusPanel({ files, onFileClick: openDiff, active: s.activeFile })),
+            section('diff' + (s.activeFile ? ' · ' + s.activeFile : ''),
+                s.diffLoading ? loadingState('loading diff…')
+                    : s.diff ? GitDiffView({ diff: s.diff.diff || s.diff, filename: s.activeFile })
+                        : emptyState('select a file to view its diff')),
+            section('log',
+                logFailed ? errorState(logFailed)
+                    : commits.length
+                        ? Table({ headers: ['sha', 'message', 'author', 'date'], rows: commits.slice(0, 20).map(c => [String(c.sha || c.hash || '').slice(0, 8), truncSpan(c.message || c.subject, TRUNC_SUB), c.author || '', c.date ? fmtAgo(c.date) : ''])})
+                        : emptyState('no commits')),
+        ].filter(Boolean);
+    };
+});
+
 // ---- registry --------------------------------------------------------------
 
 export const FREDDIE_PAGES = {
     home, chat, voice, sessions, projects, agents, analytics,
     models, cron, skills, config, env, tools, batch, gateway, chains,
-    machines, health, debug, logs,
+    machines, health, debug, logs, git,
 };
 
 export { skillLabel, getRecentPaths, saveRecentPath, renderChatMessages };

package/src/components/git-status.js

@@ -0,0 +1,153 @@
+// Git status + diff primitives — changed-file list and unified-diff renderer.
+// Ported from pi-web's BranchNavigator concept into this design system's
+// pure-webjsx idiom (see files.js for the sibling file-list pattern this
+// mirrors: FileIcon-style type glyph, ds-file-row-style clickable row).
+
+import * as webjsx from '../../vendor/webjsx/index.js';
+import { Icon } from './shell.js';
+import { fileGlyph } from './files.js';
+import { highlightAllUnder } from '../highlight.js';
+const h = webjsx.createElement;
+
+// git status letter -> { label, tone, icon } used for both the row's status
+// chip and its left-edge tone. Mirrors the porcelain status codes pi-web's
+// git API returns (A/M/D/R/? ...), collapsed to the ones a status list needs.
+const STATUS_META = {
+    A: { label: 'added', tone: 'add', glyph: 'A' },
+    M: { label: 'modified', tone: 'modify', glyph: 'M' },
+    D: { label: 'deleted', tone: 'delete', glyph: 'D' },
+    R: { label: 'renamed', tone: 'modify', glyph: 'R' },
+    C: { label: 'copied', tone: 'modify', glyph: 'C' },
+    U: { label: 'conflicted', tone: 'delete', glyph: 'U' },
+    '?': { label: 'untracked', tone: 'add', glyph: '?' },
+    '!': { label: 'ignored', tone: 'neutral', glyph: '!' },
+};
+
+function statusMeta(status) {
+    return STATUS_META[status] || { label: status || 'changed', tone: 'neutral', glyph: (status || '?').slice(0, 1) };
+}
+
+// Guess a file "type" (for FileIcon-style glyph reuse) from its extension —
+// git-status entries are paths, not the richer {type} shape files.js rows get
+// from a directory listing.
+const EXT_TYPE = {
+    js: 'code', mjs: 'code', cjs: 'code', ts: 'code', tsx: 'code', jsx: 'code',
+    py: 'code', rs: 'code', go: 'code', java: 'code', c: 'code', cpp: 'code', h: 'code',
+    css: 'code', scss: 'code', html: 'code', json: 'code', yml: 'code', yaml: 'code', toml: 'code', sh: 'code',
+    md: 'document', mdx: 'document', txt: 'text',
+    png: 'image', jpg: 'image', jpeg: 'image', gif: 'image', svg: 'image', webp: 'image',
+    mp4: 'video', mov: 'video', webm: 'video',
+    mp3: 'audio', wav: 'audio',
+    zip: 'archive', tar: 'archive', gz: 'archive',
+};
+
+function fileTypeFromPath(pathname = '') {
+    const base = pathname.split('/').pop() || pathname;
+    const dot = base.lastIndexOf('.');
+    if (dot <= 0) return 'other';
+    return EXT_TYPE[base.slice(dot + 1).toLowerCase()] || 'other';
+}
+
+// GitStatusPanel — a list of changed files with add/modify/delete indicators.
+// files: [{ path, status, staged?, insertions?, deletions? }]
+// onFileClick(file) opens the diff for a row.
+export function GitStatusPanel({ files = [], onFileClick, emptyText = 'no changes', active } = {}) {
+    if (!files.length) {
+        return h('div', { class: 'ds-git-empty', role: 'status' },
+            h('span', { class: 'ds-git-empty-glyph', 'aria-hidden': 'true' }, Icon('circle-dot', { size: 22 })),
+            h('span', {}, emptyText));
+    }
+    return h('div', { class: 'ds-git-status-grid', role: 'group', 'aria-label': 'changed files' },
+        ...files.map((f, i) => GitStatusRow({ key: f.path || i, file: f, onClick: onFileClick, active: active === f.path })));
+}
+
+function GitStatusRow({ key, file, onClick, active } = {}) {
+    const meta = statusMeta(file.status);
+    const type = fileTypeFromPath(file.path);
+    const stats = [
+        file.insertions != null ? h('span', { class: 'ds-git-stat ds-git-stat-add' }, '+' + file.insertions) : null,
+        file.deletions != null ? h('span', { class: 'ds-git-stat ds-git-stat-del' }, '-' + file.deletions) : null,
+    ].filter(Boolean);
+    return h('button', {
+        key, type: 'button',
+        class: 'ds-git-row' + (active ? ' active' : ''),
+        onclick: onClick ? () => onClick(file) : null,
+        disabled: onClick ? null : true,
+        'aria-label': meta.label + ': ' + file.path,
+        'aria-pressed': active ? 'true' : 'false',
+    },
+        h('span', { class: 'ds-git-status-chip tone-' + meta.tone, 'aria-hidden': 'true' }, meta.glyph),
+        h('span', { class: 'ds-git-row-icon', 'aria-hidden': 'true' }, Icon(fileGlyph(type), { size: 15 })),
+        h('span', { class: 'ds-git-row-path' }, file.path),
+        file.staged ? h('span', { class: 'ds-git-row-tag' }, 'staged') : null,
+        stats.length ? h('span', { class: 'ds-git-row-stats' }, ...stats) : null,
+    );
+}
+
+// Parse a unified diff into hunks of typed lines so we can color +/- context
+// independently of the raw text (avoids relying on Prism's diff grammar for
+// the leading marker column, which we style ourselves).
+function parseUnifiedDiff(diff = '') {
+    const lines = diff.split('\n');
+    const hunks = [];
+    let current = null;
+    for (const line of lines) {
+        if (line.startsWith('@@')) {
+            current = { header: line, lines: [] };
+            hunks.push(current);
+            continue;
+        }
+        if (line.startsWith('diff --git') || line.startsWith('index ') ||
+            line.startsWith('--- ') || line.startsWith('+++ ')) {
+            continue; // file-header noise; the host already knows the filename
+        }
+        if (!current) continue;
+        let kind = 'context';
+        if (line.startsWith('+')) kind = 'add';
+        else if (line.startsWith('-')) kind = 'del';
+        current.lines.push({ kind, text: line });
+    }
+    return hunks;
+}
+
+const EXT_LANG = {
+    js: 'javascript', mjs: 'javascript', cjs: 'javascript', jsx: 'jsx',
+    ts: 'typescript', tsx: 'tsx', py: 'python', rs: 'rust', go: 'go',
+    css: 'css', scss: 'css', html: 'markup', md: 'markdown', json: 'json',
+    yml: 'yaml', yaml: 'yaml', sh: 'bash', sql: 'sql', toml: 'toml',
+};
+
+function langFromFilename(filename = '') {
+    const base = filename.split('/').pop() || filename;
+    const dot = base.lastIndexOf('.');
+    if (dot <= 0) return null;
+    return EXT_LANG[base.slice(dot + 1).toLowerCase()] || null;
+}
+
+// GitDiffView — unified-diff renderer with +/- line coloring. Uses
+// highlight.js's Prism loader for language detection by file extension; the
+// +/- marker column is drawn by CSS (tone classes), Prism only tokenizes the
+// code content inside each line.
+export function GitDiffView({ diff = '', filename } = {}) {
+    const hunks = parseUnifiedDiff(diff);
+    const lang = langFromFilename(filename);
+    const highlightRef = (el) => {
+        if (!el) return;
+        try { highlightAllUnder(el); } catch { /* progressive enhancement only */ }
+    };
+    if (!hunks.length) {
+        return h('div', { class: 'ds-git-diff-empty', role: 'status' }, 'no diff to show');
+    }
+    return h('div', { class: 'ds-git-diff', ref: highlightRef },
+        filename ? h('div', { class: 'ds-git-diff-head' }, h('span', { class: 'name' }, filename)) : null,
+        ...hunks.map((hunk, hi) => h('div', { key: 'hunk' + hi, class: 'ds-git-hunk' },
+            h('div', { class: 'ds-git-hunk-header' }, hunk.header),
+            h('pre', { class: 'ds-git-hunk-body' + (lang ? ' lang-' + lang : '') },
+                ...hunk.lines.map((l, li) => h('code', {
+                    key: li,
+                    class: 'ds-git-line ds-git-line-' + l.kind + (lang ? ' language-' + lang : ''),
+                }, l.text + '\n'))
+            )
+        ))
+    );
+}

package/src/components/shell.js

@@ -27,12 +27,15 @@ export function Brand({ name = '247420', leaf } = {}) {
  * @param {string} [props.tone=''] - semantic color tone (empty = neutral).
  * @param {'sm'|'md'|'lg'} [props.size='md']
  * @param {boolean} [props.tag=false] - true renders a rectangular sentence-case variant for dense data (drops the all-caps pill styling). Orthogonal to tone.
+ * @param {Function} [props.onRemove] - if given, renders a trailing dismiss (x) button that calls onRemove() on click. Omitted entirely (no button) when not supplied.
  * @param {*} props.children
  * @returns {*} webjsx vnode
  */
-export function Chip({ tone = '', size = 'md', tag = false, children }) {
+export function Chip({ tone = '', size = 'md', tag = false, onRemove, children }) {
     const sizeCls = size === 'sm' ? ' chip--sm' : (size === 'lg' ? ' chip--lg' : '');
-    return h('span', { class: 'chip' + sizeCls + (tag ? ' chip--tag' : '') + (tone ? ' tone-' + tone : '') }, children);
+    return h('span', { class: 'chip' + sizeCls + (tag ? ' chip--tag' : '') + (tone ? ' tone-' + tone : '') + (onRemove ? ' ds-chip-removable' : '') },
+        children,
+        onRemove ? h('button', { type: 'button', class: 'ds-chip-remove-btn', 'aria-label': 'Remove', onclick: (e) => { e.stopPropagation(); onRemove(); } }, Icon('x')) : null);
 }
 
 /**

package/src/components/worktree-switcher.js

@@ -0,0 +1,57 @@
+// WorktreeSwitcher — a dropdown for listing/switching git worktrees + branches,
+// with a "new worktree" action. Built on overlay-primitives.js's Dropdown
+// (itself the Popover/useFloating primitives + roving-focus menu keyboard
+// handling already in this kit) rather than re-deriving popover positioning,
+// outside-click, Escape, and focus-trap logic from scratch.
+
+import * as webjsx from '../../vendor/webjsx/index.js';
+import { Icon } from './shell.js';
+import { Dropdown } from './overlay-primitives.js';
+const h = webjsx.createElement;
+
+const NEW_WORKTREE_ID = '__ds_new_worktree__';
+
+// WorktreeSwitcher({ worktrees, current, onSwitch, onCreate })
+// worktrees: [{ path, branch, current? }]
+// current: path of the active worktree (falls back to a worktree's own `current` flag)
+// onSwitch(worktree) — fired when an existing worktree is picked
+// onCreate() — fired from the trailing "new worktree" row; the host owns the create flow (prompt/modal)
+export function WorktreeSwitcher({ worktrees = [], current, onSwitch, onCreate, ariaLabel = 'switch worktree' } = {}) {
+    const isCurrent = (wt) => wt.current || (current != null && wt.path === current);
+    const activeWt = worktrees.find(isCurrent) || worktrees[0];
+    const byId = new Map(worktrees.map((wt, i) => [wt.path || String(i), wt]));
+
+    const items = [
+        ...worktrees.map((wt, i) => ({
+            id: wt.path || String(i),
+            label: h('span', { class: 'ds-wts-item-body' },
+                h('span', { class: 'ds-wts-item-check', 'aria-hidden': 'true' },
+                    isCurrent(wt) ? Icon('check', { size: 14 }) : null),
+                h('span', { class: 'ds-wts-item-text' },
+                    h('span', { class: 'ds-wts-item-branch' }, wt.branch || '(detached HEAD)'),
+                    h('span', { class: 'ds-wts-item-path' }, wt.path)
+                ),
+            ),
+            disabled: isCurrent(wt),
+        })),
+        worktrees.length && onCreate ? { separator: true } : null,
+        onCreate ? {
+            id: NEW_WORKTREE_ID,
+            glyph: '+',
+            label: 'new worktree',
+        } : null,
+    ].filter(Boolean);
+
+    const onSelect = (id) => {
+        if (id === NEW_WORKTREE_ID) { onCreate && onCreate(); return; }
+        const wt = byId.get(id);
+        if (wt && onSwitch && !isCurrent(wt)) onSwitch(wt);
+    };
+
+    const trigger = h('button', { type: 'button', class: 'ds-wts-trigger' },
+        h('span', { class: 'ds-wts-trigger-branch' }, (activeWt && activeWt.branch) || 'select worktree'),
+        h('span', { class: 'ds-wts-trigger-caret', 'aria-hidden': 'true' }, Icon('chevron-down', { size: 13 }))
+    );
+
+    return h('span', { class: 'ds-wts' }, Dropdown({ trigger, items, onSelect, ariaLabel }));
+}

package/src/css/app-shell/git-status.css

@@ -0,0 +1,112 @@
+/* ============================================================
+   Git status panel + diff view — changed-file list, unified diff.
+   ============================================================ */
+
+.ds-git-status-grid {
+  display: flex; flex-direction: column; gap: 2px;
+}
+.ds-git-row {
+  display: flex; align-items: center; gap: 10px;
+  width: 100%; padding: 7px 12px;
+  background: none; border: var(--bw-hair) solid transparent; border-radius: var(--r-2);
+  color: var(--fg); font: inherit; text-align: left; cursor: pointer;
+  transition: background var(--dur-snap) var(--ease), border-color var(--dur-snap) var(--ease);
+}
+.ds-git-row:hover { background: var(--bg-2); border-color: var(--rule); }
+.ds-git-row.active { background: var(--accent-tint); border-color: var(--accent); }
+.ds-git-row:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
+.ds-git-row[disabled] { cursor: default; }
+
+.ds-git-status-chip {
+  display: inline-flex; align-items: center; justify-content: center;
+  flex: 0 0 auto; width: 18px; height: 18px;
+  font-family: var(--ff-mono); font-size: var(--fs-micro); font-weight: 700;
+  border-radius: var(--r-1);
+}
+.ds-git-status-chip.tone-add { color: var(--green-2); background: color-mix(in oklab, var(--green-2) 16%, transparent); }
+.ds-git-status-chip.tone-modify { color: var(--sun); background: color-mix(in oklab, var(--sun) 16%, transparent); }
+.ds-git-status-chip.tone-delete { color: var(--flame); background: color-mix(in oklab, var(--flame) 16%, transparent); }
+.ds-git-status-chip.tone-neutral { color: var(--fg-3); background: var(--bg-2); }
+
+.ds-git-row-icon { display: inline-flex; flex: 0 0 auto; color: var(--fg-3); }
+.ds-git-row-path {
+  flex: 1 1 auto; min-width: 0;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  font-family: var(--ff-mono); font-size: var(--fs-sm);
+}
+.ds-git-row-tag {
+  flex: 0 0 auto; font-size: var(--fs-micro); color: var(--fg-3);
+  border: var(--bw-hair) solid var(--rule); border-radius: var(--r-1); padding: 1px 6px;
+}
+.ds-git-row-stats { flex: 0 0 auto; display: inline-flex; gap: 6px; font-family: var(--ff-mono); font-size: var(--fs-micro); }
+.ds-git-stat-add { color: var(--green-2); }
+.ds-git-stat-del { color: var(--flame); }
+
+.ds-git-empty {
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  gap: var(--space-2); padding: var(--space-6) var(--space-3);
+  color: var(--fg-3); text-align: center;
+}
+.ds-git-empty-glyph { opacity: 0.55; }
+
+/* Diff view */
+.ds-git-diff {
+  display: flex; flex-direction: column; gap: var(--space-2);
+  background: var(--ink); color: var(--paper);
+  border-radius: var(--r-2); overflow: hidden;
+}
+.ds-git-diff-head {
+  padding: var(--space-2) var(--space-3);
+  border-bottom: var(--bw-hair) solid color-mix(in oklab, var(--paper) 18%, transparent);
+  font-family: var(--ff-mono); font-size: var(--fs-xs);
+}
+.ds-git-diff-empty { padding: var(--space-3); color: var(--fg-3); font-size: var(--fs-sm); }
+.ds-git-hunk + .ds-git-hunk { border-top: var(--bw-hair) solid color-mix(in oklab, var(--paper) 12%, transparent); }
+.ds-git-hunk-header {
+  padding: 4px var(--space-3);
+  color: var(--purple-2); font-family: var(--ff-mono); font-size: var(--fs-micro);
+  background: color-mix(in oklab, var(--paper) 6%, transparent);
+}
+.ds-git-hunk-body {
+  margin: 0; padding: 0 0 var(--space-2);
+  font-family: var(--ff-mono); font-size: var(--fs-xs); line-height: var(--lh-base);
+  white-space: pre; overflow-x: auto; tab-size: 2;
+}
+.ds-git-line {
+  display: block; padding: 0 var(--space-3);
+}
+.ds-git-line-add { background: color-mix(in oklab, var(--green-2) 16%, transparent); color: var(--paper); }
+.ds-git-line-del { background: color-mix(in oklab, var(--flame) 16%, transparent); color: var(--paper); }
+.ds-git-line-context { color: var(--paper-3); }
+
+/* ============================================================
+   WorktreeSwitcher — trigger + dropdown menu of worktrees/branches.
+   ============================================================ */
+.ds-wts { display: inline-flex; }
+.ds-wts-trigger {
+  display: inline-flex; align-items: center; gap: 8px;
+  padding: 5px 10px; min-height: 32px;
+  background: var(--bg); border: var(--bw-hair) solid var(--rule); border-radius: var(--r-1);
+  color: var(--fg); font: inherit; font-size: var(--fs-sm); cursor: pointer;
+  max-width: 220px;
+}
+.ds-wts-trigger:hover { background: var(--bg-2); }
+.ds-wts-trigger:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
+.ds-wts-trigger-branch {
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  font-family: var(--ff-mono);
+}
+.ds-wts-trigger-caret { display: inline-flex; flex: 0 0 auto; color: var(--fg-3); }
+
+.ds-wts-item-body { display: flex; align-items: center; gap: 8px; min-width: 0; }
+.ds-wts-item-check { display: inline-flex; flex: 0 0 16px; color: var(--accent-ink); }
+.ds-wts-item-text { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
+.ds-wts-item-branch {
+  font-family: var(--ff-mono); font-size: var(--fs-sm);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.ds-wts-item-path {
+  font-size: var(--fs-micro); color: var(--fg-3);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.ds-dropdown-item[aria-disabled="true"] .ds-wts-item-branch { color: var(--fg); font-weight: 600; }

package/src/css/app-shell/primitives.css

@@ -175,6 +175,25 @@
 .chip.tone-orange   { background: color-mix(in oklab, var(--flame) 30%, var(--sun) 70%); color: var(--ink); }
 .chip.tone-yellow   { background: var(--sun);         color: var(--ink); }
 
+/* Removable chip — a trailing dismiss (x) button for editable tag/filter
+   chip lists (session tags, saved-search chips). Reuses the chip's own
+   tone/size; the button itself stays neutral-at-rest, per the standing
+   color-reserved-for-meaning convention, tinting only on hover/focus. */
+.chip.ds-chip-removable { padding-right: var(--space-1); }
+.ds-chip-remove-btn {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 16px; height: 16px; margin-left: var(--space-half);
+  padding: 0; border: none; border-radius: var(--r-pill);
+  background: transparent; color: currentColor; opacity: 0.7;
+  cursor: pointer;
+}
+.ds-chip-remove-btn:hover, .ds-chip-remove-btn:focus-visible { opacity: 1; background: color-mix(in oklab, currentColor 16%, transparent); }
+.ds-chip-remove-btn svg { width: 10px; height: 10px; }
+@media (pointer: coarse) {
+  .ds-chip-remove-btn { width: 24px; height: 24px; margin-left: 0; }
+  .ds-chip-remove-btn svg { width: 12px; height: 12px; }
+}
+
 /* ds-pill — plain neutral chip, distinct from the toned .ds-badge/.chip family
    (gmsniff's .pill: a bare rounded label with no semantic tone). */
 .ds-pill {