anentrypoint-design 0.0.368 → 0.0.370

package/src/components/skills-config.js

@@ -0,0 +1,188 @@
+// SkillsConfig — skill list + detail panel, ported from pi-web's
+// SkillsConfig.tsx UX (modal, sidebar list grouped/searchable, detail pane
+// with enable/disable toggle) but rebuilt over freddie's real skill contract,
+// not pi-web's installable-package model:
+//
+//   { file, name, description, frontmatter, body, platforms? }
+//
+// (see freddie's AGENTS.md — `src/skills/index.js::listSkills/loadSkill`,
+// `skills/<category>/<name>/SKILL.md` with YAML frontmatter). There is no
+// install/update/search-registry flow here: freddie skills are local
+// filesystem discovery only (`skills/`, `~/.freddie/skills/`), so the only
+// host-facing action is enable/disable. `category` (derived from the skill's
+// path — the directory directly under a `skills/` root) replaces pi-web's
+// source/scope grouping (project/global/path), and `platforms` renders as
+// chips in place of pi-web's version/update-check UI.
+//
+// Usage (consumer wires its own state/fetch, this is presentation-only):
+//   SkillsConfig({ skills, selected, onSelect, onToggle, onClose })
+//
+// Props:
+//   skills    : [{ file, name, description, category?, platforms?, enabled, frontmatter?, body? }]
+//               category is derived from `file`'s path when not passed explicitly
+//               (segment directly under the nearest `skills` directory).
+//               enabled drives the toggle and the sidebar status dot.
+//   selected  : name of the currently-selected skill, or null
+//   loading   : bool — sidebar shows a loading row instead of the list
+//   error     : string|null — sidebar shows this instead of the list
+//   busyName  : name of the skill currently mid-toggle, or null
+//   query     : current search text (string) — controlled by the consumer
+//   onQuery   : (text) => void — fired on search input
+//   onSelect  : (name) => void
+//   onToggle  : (skill) => void — fired with the full skill row to flip enabled
+//   onClose   : () => void
+//
+// No decorative glyphs beyond the kit's Icon SVGs — status communicated by a
+// tone dot + text label, never color alone.
+
+import * as webjsx from '../../vendor/webjsx/index.js';
+import { Icon } from './shell.js';
+import { SearchInput } from './content.js';
+const h = webjsx.createElement;
+
+const CATEGORY_ORDER = ['software-development', 'ops', 'data', 'planning', 'creative'];
+
+function deriveCategory(skill) {
+    if (skill.category) return skill.category;
+    const file = skill.file || '';
+    const parts = file.split(/[/\\]/).filter(Boolean);
+    const idx = parts.lastIndexOf('skills');
+    if (idx >= 0 && parts.length > idx + 1) return parts[idx + 1];
+    return 'other';
+}
+
+function statusTone(skill) {
+    return skill.enabled === false ? 'neutral' : 'add';
+}
+
+function statusLabel(skill) {
+    return skill.enabled === false ? 'disabled' : 'enabled';
+}
+
+function matchesQuery(skill, query) {
+    if (!query) return true;
+    const q = query.toLowerCase();
+    return (skill.name || '').toLowerCase().includes(q) ||
+        (skill.description || '').toLowerCase().includes(q);
+}
+
+function SkillSidebarRow({ skill, active, busy, onSelect }) {
+    return h('button', {
+        type: 'button',
+        class: 'ds-plugins-row' + (active ? ' active' : ''),
+        onclick: () => onSelect(skill.name),
+        'aria-pressed': active ? 'true' : 'false',
+        'aria-label': skill.name + ': ' + statusLabel(skill),
+    },
+        h('span', { class: 'ds-plugins-dot tone-' + statusTone(skill), 'aria-hidden': 'true' }),
+        h('span', { class: 'ds-plugins-row-body' },
+            h('span', { class: 'ds-plugins-row-name' }, skill.name),
+            skill.description
+                ? h('span', { class: 'ds-plugins-row-meta' }, skill.description)
+                : null),
+        busy ? h('span', { class: 'ds-plugins-row-busy' }, '…') : null);
+}
+
+function SkillDetail({ skill, busy, onToggle }) {
+    if (!skill) {
+        return h('div', { class: 'ds-plugins-empty', role: 'status' },
+            h('span', { 'aria-hidden': 'true' }, Icon('circle-dot', { size: 22 })),
+            h('span', {}, 'Select a skill'));
+    }
+    const platforms = Array.isArray(skill.platforms) ? skill.platforms : [];
+    return h('div', { class: 'ds-plugins-detail' },
+        h('div', { class: 'ds-plugins-detail-head' },
+            h('div', { class: 'ds-plugins-detail-title' },
+                h('span', { class: 'ds-plugins-dot tone-' + statusTone(skill), 'aria-hidden': 'true' }),
+                h('span', { class: 'name' }, skill.name)),
+            h('button', {
+                type: 'button',
+                class: 'ds-plugins-toggle' + (skill.enabled !== false ? ' on' : ''),
+                disabled: busy ? true : null,
+                onclick: () => onToggle && onToggle(skill),
+                'aria-pressed': skill.enabled !== false ? 'true' : 'false',
+                'aria-label': skill.enabled !== false ? 'Disable skill' : 'Enable skill',
+            }, h('span', { class: 'ds-plugins-toggle-knob' }))),
+        skill.description
+            ? h('div', { class: 'ds-skills-description' }, skill.description)
+            : null,
+        h('div', { class: 'ds-plugins-fact-grid' },
+            h('div', { class: 'ds-plugins-fact-label' }, 'status'),
+            h('div', { class: 'ds-plugins-fact-value tone-text-' + statusTone(skill) }, statusLabel(skill)),
+            h('div', { class: 'ds-plugins-fact-label' }, 'category'),
+            h('div', { class: 'ds-plugins-fact-value' }, deriveCategory(skill)),
+            skill.file ? h('div', { class: 'ds-plugins-fact-label' }, 'path') : null,
+            skill.file ? h('div', { class: 'ds-plugins-fact-value ds-plugins-mono' }, skill.file) : null),
+        h('div', { class: 'ds-plugins-requires' },
+            h('div', { class: 'ds-plugins-group-label' }, 'platforms'),
+            platforms.length
+                ? h('div', { class: 'ds-plugins-requires-list' },
+                    ...platforms.map((p) => h('span', { key: p, class: 'ds-plugins-chip' }, p)))
+                : h('div', { class: 'ds-plugins-requires-empty' }, 'all platforms')),
+        skill.body
+            ? h('div', { class: 'ds-skills-body-group' },
+                h('div', { class: 'ds-plugins-group-label' }, 'body preview'),
+                h('pre', { class: 'ds-skills-body-preview' }, skill.body.slice(0, 2000)))
+            : null);
+}
+
+export function SkillsConfig({
+    skills = [],
+    selected = null,
+    loading = false,
+    error = null,
+    busyName = null,
+    query = '',
+    onQuery,
+    onSelect,
+    onToggle,
+    onClose,
+} = {}) {
+    const selectedSkill = skills.find((s) => s.name === selected) || null;
+    const filtered = skills.filter((s) => matchesQuery(s, query));
+
+    // Group filtered skills by category, ordering freddie's five bundled
+    // categories first, then any others (custom/`~/.freddie/skills/`) alphabetically.
+    const byCategory = new Map();
+    for (const s of filtered) {
+        const cat = deriveCategory(s);
+        if (!byCategory.has(cat)) byCategory.set(cat, []);
+        byCategory.get(cat).push(s);
+    }
+    const otherCats = [...byCategory.keys()].filter((c) => !CATEGORY_ORDER.includes(c)).sort();
+    const orderedCats = [...CATEGORY_ORDER.filter((c) => byCategory.has(c)), ...otherCats];
+
+    const sidebarBody = loading
+        ? h('div', { class: 'ds-plugins-sidebar-status' }, 'Loading…')
+        : error
+            ? h('div', { class: 'ds-plugins-sidebar-status ds-plugins-status-error' }, error)
+            : filtered.length === 0
+                ? h('div', { class: 'ds-plugins-sidebar-status' }, skills.length === 0 ? 'No skills found' : 'No skills match your search')
+                : h('div', { class: 'ds-plugins-list', role: 'listbox', 'aria-label': 'skill list' },
+                    ...orderedCats.map((cat) => h('div', { key: 'grp-' + cat, class: 'ds-skills-group' },
+                        h('div', { class: 'ds-skills-group-label' }, cat),
+                        ...byCategory.get(cat).map((s) => SkillSidebarRow({
+                            key: s.name,
+                            skill: s,
+                            active: selected === s.name,
+                            busy: busyName === s.name,
+                            onSelect,
+                        })))));
+
+    const footerText = filtered.length + ' skill' + (filtered.length === 1 ? '' : 's') +
+        (query ? ' (of ' + skills.length + ')' : '');
+
+    return h('div', { class: 'ds-plugins-overlay', onclick: (e) => { if (e.target === e.currentTarget && onClose) onClose(); } },
+        h('div', { class: 'ds-plugins-modal', role: 'dialog', 'aria-label': 'Skills' },
+            h('div', { class: 'ds-plugins-header' },
+                h('span', { class: 'ds-plugins-title' }, 'Skills'),
+                onClose ? h('button', { type: 'button', class: 'ds-plugins-close', onclick: onClose, 'aria-label': 'Close' }, '×') : null),
+            h('div', { class: 'ds-skills-search-row' },
+                SearchInput({ value: query, placeholder: 'search skills…', onInput: onQuery, label: 'search skills' })),
+            h('div', { class: 'ds-plugins-body' },
+                h('div', { class: 'ds-plugins-sidebar' }, sidebarBody),
+                h('div', { class: 'ds-plugins-main' },
+                    SkillDetail({ skill: selectedSkill, busy: busyName === (selectedSkill && selectedSkill.name), onToggle }))),
+            h('div', { class: 'ds-plugins-footer' },
+                h('span', { class: 'ds-plugins-footer-count' }, footerText))));
+}

package/src/components/voice.js

@@ -5,6 +5,47 @@ import * as webjsx from '../../vendor/webjsx/index.js';
 import { Icon } from './shell.js';
 const h = webjsx.createElement;
 
+// ---------------------------------------------------------------------------
+// playCompletionCue — short two-tone audio cue (e.g. "agent turn finished"),
+// ported from pi-web's useAudio. This file otherwise covers voice-call UI
+// (PTT/VAD/webcam/queue), not simple one-shot notification tones, so this is
+// the missing piece rather than a duplicate. A single AudioContext is reused
+// (module-scoped) so a browser autoplay-suspended context can be resumed
+// instead of leaking a fresh context per call.
+// ---------------------------------------------------------------------------
+let _cueCtx = null;
+function getCueCtx() {
+    if (_cueCtx && _cueCtx.state !== 'closed') return _cueCtx;
+    try { _cueCtx = new (window.AudioContext || window.webkitAudioContext)(); } catch { return null; }
+    return _cueCtx;
+}
+
+export function playCompletionCue() {
+    const ctx = getCueCtx();
+    if (!ctx) return;
+    const play = () => {
+        try {
+            const now = ctx.currentTime;
+            [523.25, 659.25].forEach((freq, i) => {
+                const osc = ctx.createOscillator();
+                const gain = ctx.createGain();
+                osc.connect(gain);
+                gain.connect(ctx.destination);
+                osc.type = 'sine';
+                osc.frequency.value = freq;
+                const t = now + i * 0.18;
+                gain.gain.setValueAtTime(0, t);
+                gain.gain.linearRampToValueAtTime(0.18, t + 0.02);
+                gain.gain.exponentialRampToValueAtTime(0.001, t + 0.45);
+                osc.start(t);
+                osc.stop(t + 0.45);
+            });
+        } catch { /* swallow: AudioContext/oscillator unsupported, cue is best-effort */ }
+    };
+    if (ctx.state === 'suspended') { ctx.resume().then(play).catch(() => {}); return; }
+    play();
+}
+
 function fmtDur(s) {
     s = Math.max(0, Math.round(Number(s) || 0));
     if (s < 60) return s + 's';

package/src/components.js

@@ -27,6 +27,8 @@ export {
 
 export { AgentChat, MESSAGE_CAP } from './components/agent-chat.js';
 
+export { ChatMinimap, CHAT_MINIMAP_WIDTH } from './components/chat-minimap.js';
+
 export {
     ConversationList, SessionCard, SessionDashboard, SessionMeta, fmtDuration, fmtTime, fmtAgo, AgentListSkeleton
 } from './components/sessions.js';
@@ -39,6 +41,12 @@ export { GitStatusPanel, GitDiffView } from './components/git-status.js';
 
 export { WorktreeSwitcher } from './components/worktree-switcher.js';
 
+export { PluginsConfig } from './components/plugins-config.js';
+
+export { SkillsConfig } from './components/skills-config.js';
+
+export { ModelsConfig } from './components/models-config.js';
+
 export {
     DEFAULT_PHASES, PhaseWalk, TreeNode, BarRow, RateCell,
     StatTile, StatsGrid, SubGrid, SessionRow, DevRow, LiveLogEntry, LiveLog
@@ -66,7 +74,8 @@ export {
 } from './components/community.js';
 
 export {
-    PttButton, VadMeter, WebcamPreview, VoiceSettingsModal, AudioQueue, VoiceControls
+    PttButton, VadMeter, WebcamPreview, VoiceSettingsModal, AudioQueue, VoiceControls,
+    playCompletionCue
 } from './components/voice.js';
 
 export { ThemeToggle } from './components/theme-toggle.js';
@@ -78,7 +87,8 @@ export {
 export {
     useDraggable, useDropTarget, useNumberScrub, usePointerDrag, Reorderable,
     useKeyboardShortcut, formatShortcut, ShortcutHint, ShortcutList,
-    useKeyboardShortcutHelp, ShortcutHelpDialog
+    useKeyboardShortcutHelp, ShortcutHelpDialog,
+    isMobileNow, onMobileChange
 } from './components/interaction-primitives.js';
 
 export {

package/src/css/app-shell/chat-polish.css

@@ -152,6 +152,31 @@
 .chat-bubble.chat-md th { background: color-mix(in oklab, var(--fg) 5%, transparent); font-weight: 600; }
 .chat-bubble.chat-md hr { border: 0; border-top: var(--bw-hair) solid var(--rule); margin: 12px 0; }
 
+/* Mermaid diagram blocks — rendered SVG swapped in over the fenced source by
+   src/mermaid.js's renderMermaidBlocksUnder(); the source .pre stays in the
+   DOM (display:none) behind a source/diagram toggle button. */
+.ds-mermaid-block {
+  position: relative; margin: var(--space-2) 0;
+  border: 1px solid color-mix(in oklab, var(--fg) 12%, transparent);
+  border-radius: var(--r-1); background: var(--bg); padding: 12px 16px;
+}
+.ds-mermaid-diagram { overflow-x: auto; display: flex; justify-content: center; }
+.ds-mermaid-diagram svg { max-width: 100%; height: auto; }
+.ds-mermaid-toggle {
+  position: absolute; top: 6px; right: 6px;
+  font: inherit; font-size: var(--fs-xs); line-height: 1;
+  background: color-mix(in oklab, var(--fg) 8%, transparent);
+  color: var(--fg); border: none; border-radius: var(--r-1);
+  padding: 4px 8px; cursor: pointer;
+}
+.ds-mermaid-toggle:hover { background: color-mix(in oklab, var(--fg) 14%, transparent); }
+
+/* Inline/display math — KaTeX HTML swapped into text nodes by
+   src/math.js's renderMathBlocksUnder(). Display math centers on its own line;
+   inline math sits within running text. */
+.ds-math-display { display: block; margin: var(--space-2) 0; text-align: center; overflow-x: auto; }
+.ds-math-inline { display: inline-block; }
+
 .chat-msg .chat-bubble.chat-code,
 .chat-msg.you .chat-bubble.chat-code,
 .chat-bubble.chat-code {

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

@@ -659,6 +659,24 @@
 }
 .ds-preview-text { white-space: pre-wrap; word-break: break-word; }
 .ds-preview-code code, .ds-preview-text code { font: inherit; color: inherit; background: none; }
+/* wrap-lines toggle (ported from pi-web's DisplayMode word-wrap control) */
+.ds-preview-code.is-wrapped { white-space: pre-wrap; overflow-wrap: anywhere; }
+.ds-preview-wrap-toggle.active { color: var(--paper); background: color-mix(in oklab, var(--paper) 18%, transparent); }
+/* source/preview mode switch (ported from pi-web's markdown/HTML DisplayMode
+   tabs) — the host supplies already-rendered, already-sanitized HTML via
+   `previewHtml`; this component only toggles visibility. */
+.ds-preview-mode-switch { display: inline-flex; gap: var(--space-1); margin-right: var(--space-1); }
+.ds-preview-mode-btn {
+  font-family: var(--ff-mono); font-size: var(--fs-micro);
+  padding: var(--space-1) var(--space-2); border-radius: var(--r-1);
+  color: var(--paper-3); background: none; border: none; cursor: pointer;
+}
+.ds-preview-mode-btn.active { color: var(--paper); background: color-mix(in oklab, var(--paper) 18%, transparent); }
+.ds-preview-html {
+  flex: 1; min-height: 0; overflow: auto;
+  padding: var(--space-3) var(--space-4);
+  background: var(--bg-0); border-radius: var(--r-2);
+}
 .ds-preview-truncated {
   margin-top: var(--space-2); padding-top: var(--space-2);
   border-top: var(--bw-hair) solid color-mix(in oklab, var(--paper) 20%, transparent);

package/src/css/app-shell/models-config.css

@@ -0,0 +1,93 @@
+/* ============================================================
+   ModelsConfig — provider/model availability panel.
+   ============================================================ */
+.ds-mc { display: flex; flex-direction: column; gap: var(--space-3); }
+
+.ds-mc-loading, .ds-mc-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-mc-empty-hint { font-size: var(--fs-xs); color: var(--fg-3); }
+
+/* Summary bar: totals + last-checked + refresh/rebuild actions. */
+.ds-mc-summary {
+  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
+  flex-wrap: wrap;
+}
+.ds-mc-summary-facts { display: flex; gap: var(--space-3); font-size: var(--fs-sm); color: var(--fg-2); }
+.ds-mc-summary-ts { color: var(--fg-3); }
+.ds-mc-summary-actions { display: flex; align-items: center; gap: var(--space-2); }
+.ds-mc-rebuild-error { font-size: var(--fs-xs); color: var(--flame); }
+
+/* Two-pane body: provider tree (left) + model detail (right). */
+.ds-mc-body {
+  display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: var(--space-3);
+  align-items: start;
+}
+@media (max-width: 720px) {
+  .ds-mc-body { grid-template-columns: 1fr; }
+}
+
+.ds-mc-tree { display: flex; flex-direction: column; gap: 2px; }
+.ds-mc-tree-group + .ds-mc-tree-group { margin-top: 2px; }
+
+.ds-mc-key-chip {
+  font-family: var(--ff-mono); font-size: var(--fs-micro); font-weight: 700;
+  padding: 1px 6px; border-radius: var(--r-1);
+}
+.ds-mc-key-chip.tone-ok { color: var(--green-2); background: var(--green-tint); }
+.ds-mc-key-chip.tone-fail { color: var(--fg-3); background: var(--bg-3); }
+
+.ds-mc-sampler {
+  display: inline-block; margin: 2px 0 4px 12px;
+  font-size: var(--fs-micro); padding: 1px 6px; border-radius: var(--r-1);
+}
+.ds-mc-sampler.tone-ok { color: var(--green-2); background: var(--green-tint); }
+.ds-mc-sampler.tone-fail { color: var(--ink); background: var(--sun); }
+
+/* Detail pane */
+.ds-mc-detail-empty { padding: var(--space-3); color: var(--fg-3); font-size: var(--fs-sm); }
+.ds-mc-detail-head {
+  display: flex; align-items: center; gap: var(--space-2);
+  margin-bottom: var(--space-2);
+}
+.ds-mc-detail-title { font-family: var(--ff-mono); font-size: var(--fs-base); font-weight: 700; }
+
+.ds-mc-discovery-error {
+  display: flex; align-items: center; gap: var(--space-1-75);
+  padding: var(--space-1-75) var(--space-2);
+  margin-bottom: var(--space-2);
+  color: var(--flame); background: color-mix(in oklab, var(--flame) 12%, transparent);
+  border-radius: var(--r-1); font-size: var(--fs-xs);
+}
+
+.ds-mc-model-list { display: flex; flex-direction: column; gap: var(--space-2); }
+.ds-mc-model-row {
+  padding: var(--space-2); border: var(--bw-hair) solid var(--rule); border-radius: var(--r-2);
+}
+.ds-mc-model-row.active { border-color: var(--accent); background: var(--accent-tint); }
+.ds-mc-model-head {
+  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
+  margin-bottom: var(--space-1-75);
+}
+.ds-mc-model-id { font-family: var(--ff-mono); font-size: var(--fs-sm); font-weight: 600; }
+.ds-mc-model-via { font-size: var(--fs-micro); color: var(--fg-3); }
+.ds-mc-usable-chip {
+  font-size: var(--fs-micro); font-weight: 700; padding: 1px 6px; border-radius: var(--r-1);
+  margin-left: auto;
+}
+.ds-mc-usable-chip.tone-ok { color: var(--green-2); background: var(--green-tint); }
+.ds-mc-usable-chip.tone-fail { color: var(--fg-3); background: var(--bg-3); }
+
+/* 7-mode availability grid — one chip per mode, wraps on narrow panes. */
+.ds-mc-mode-grid { display: flex; flex-wrap: wrap; gap: 4px; }
+.ds-mc-chip {
+  font-family: var(--ff-mono); font-size: var(--fs-micro); font-weight: 600;
+  padding: 2px 7px; border-radius: var(--r-1);
+  border: var(--bw-hair) solid transparent;
+}
+.ds-mc-chip.tone-ok { color: var(--green-2); background: var(--green-tint); }
+.ds-mc-chip.tone-fail { color: var(--on-color); background: var(--flame); }
+.ds-mc-chip.tone-skip { color: var(--fg-3); background: var(--bg-3); }
+.ds-mc-chip.tone-unknown { color: var(--fg-3); background: none; border-color: var(--rule); opacity: 0.6; }

package/src/css/app-shell/plugins-config.css

@@ -0,0 +1,139 @@
+/* ============================================================
+   PluginsConfig — plugin/extension list + detail modal.
+   ============================================================ */
+
+.ds-plugins-overlay {
+  position: fixed; inset: 0; z-index: var(--z-modal, 1000);
+  background: color-mix(in oklab, var(--ink) 35%, transparent);
+  display: flex; align-items: center; justify-content: center;
+  padding: var(--space-3);
+}
+.ds-plugins-modal {
+  width: min(860px, 100%); height: min(76vh, 720px);
+  background: var(--bg); border: var(--bw-hair) solid var(--rule); border-radius: var(--r-3);
+  display: flex; flex-direction: column; overflow: hidden;
+  box-shadow: var(--shadow-3, 0 8px 32px rgba(0,0,0,0.18));
+}
+.ds-plugins-header {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: var(--space-3) var(--space-4);
+  border-bottom: var(--bw-hair) solid var(--rule); flex: 0 0 auto;
+}
+.ds-plugins-title { font-size: var(--fs-md); font-weight: 700; color: var(--fg); }
+.ds-plugins-close {
+  background: none; border: none; color: var(--fg-3); cursor: pointer;
+  font-size: 20px; line-height: 1; padding: 2px 6px; border-radius: var(--r-1);
+}
+.ds-plugins-close:hover { background: var(--bg-2); color: var(--fg); }
+.ds-plugins-close:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
+
+.ds-plugins-body { flex: 1 1 auto; display: flex; overflow: hidden; }
+
+.ds-plugins-sidebar {
+  width: 245px; flex: 0 0 auto; overflow-y: auto;
+  border-right: var(--bw-hair) solid var(--rule); background: var(--bg-2);
+  padding: var(--space-2);
+}
+.ds-plugins-sidebar-status {
+  padding: var(--space-3) var(--space-2); font-size: var(--fs-sm); color: var(--fg-3);
+}
+.ds-plugins-sidebar-status.ds-plugins-status-error { color: var(--flame); }
+.ds-plugins-list { display: flex; flex-direction: column; gap: 2px; }
+
+.ds-plugins-row {
+  display: flex; align-items: center; gap: 8px; width: 100%;
+  padding: var(--space-2); border-radius: var(--r-2);
+  background: none; border: var(--bw-hair) solid transparent; text-align: left; cursor: pointer;
+  color: var(--fg); font: inherit;
+  transition: background var(--dur-snap) var(--ease), border-color var(--dur-snap) var(--ease);
+}
+.ds-plugins-row:hover { background: var(--bg-3, var(--bg)); }
+.ds-plugins-row.active { background: var(--accent-tint); border-color: var(--accent); }
+.ds-plugins-row:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
+
+.ds-plugins-row-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
+.ds-plugins-row-name {
+  font-family: var(--ff-mono); font-size: var(--fs-sm); color: var(--fg);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.ds-plugins-row-meta {
+  font-size: var(--fs-micro); color: var(--fg-3);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.ds-plugins-row-busy { flex: 0 0 auto; font-size: var(--fs-micro); color: var(--fg-3); }
+
+.ds-plugins-dot {
+  flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%;
+}
+.ds-plugins-dot.tone-add { background: var(--green-2); }
+.ds-plugins-dot.tone-delete { background: var(--flame); }
+.ds-plugins-dot.tone-neutral { background: var(--fg-3); }
+
+.ds-plugins-main { flex: 1 1 auto; overflow-y: auto; padding: var(--space-4); }
+
+.ds-plugins-empty {
+  height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
+  gap: var(--space-2); color: var(--fg-3);
+}
+
+.ds-plugins-detail { display: flex; flex-direction: column; gap: var(--space-4); max-width: 640px; }
+.ds-plugins-detail-head {
+  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap;
+}
+.ds-plugins-detail-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
+.ds-plugins-detail-title .name {
+  font-family: var(--ff-mono); font-size: var(--fs-md); font-weight: 600; color: var(--fg);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.ds-plugins-version { font-size: var(--fs-micro); color: var(--fg-3); }
+
+.ds-plugins-toggle {
+  flex: 0 0 auto; width: 40px; height: 22px; border-radius: 11px; border: none; padding: 0;
+  background: var(--rule); position: relative; cursor: pointer;
+  transition: background var(--dur-snap) var(--ease);
+}
+.ds-plugins-toggle.on { background: var(--accent); }
+.ds-plugins-toggle[disabled] { cursor: wait; opacity: 0.65; }
+.ds-plugins-toggle-knob {
+  position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
+  background: var(--bg); box-shadow: var(--shadow-1, 0 1px 4px rgba(0,0,0,0.22));
+  transition: left var(--dur-snap) var(--ease);
+}
+.ds-plugins-toggle.on .ds-plugins-toggle-knob { left: 21px; }
+
+.ds-plugins-fact-grid {
+  display: grid; grid-template-columns: minmax(96px, 130px) minmax(0, 1fr);
+  gap: 9px var(--space-3); font-size: var(--fs-sm);
+}
+.ds-plugins-fact-label { color: var(--fg-3); }
+.ds-plugins-fact-value { color: var(--fg-2); }
+.ds-plugins-fact-value.ds-plugins-mono { font-family: var(--ff-mono); overflow-wrap: anywhere; }
+.ds-plugins-fact-value.tone-text-add { color: var(--green-2); }
+.ds-plugins-fact-value.tone-text-delete { color: var(--flame); }
+.ds-plugins-fact-value.tone-text-neutral { color: var(--fg-3); }
+
+.ds-plugins-group-label {
+  font-size: var(--fs-micro); font-weight: 600; color: var(--fg-3);
+  text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 6px;
+}
+.ds-plugins-requires-list { display: flex; flex-wrap: wrap; gap: 6px; }
+.ds-plugins-chip {
+  font-family: var(--ff-mono); font-size: var(--fs-micro); color: var(--fg-2);
+  border: var(--bw-hair) solid var(--rule); border-radius: var(--r-1); padding: 2px 7px;
+}
+.ds-plugins-requires-empty { font-size: var(--fs-sm); color: var(--fg-3); }
+
+.ds-plugins-detail-actions { display: flex; gap: var(--space-2); }
+.ds-plugins-btn {
+  padding: 6px 12px; background: none; border: var(--bw-hair) solid var(--rule); border-radius: var(--r-2);
+  color: var(--fg-2); cursor: pointer; font-size: var(--fs-sm);
+}
+.ds-plugins-btn:hover { background: var(--bg-2); }
+.ds-plugins-btn[disabled] { cursor: not-allowed; opacity: 0.5; }
+
+.ds-plugins-footer {
+  display: flex; align-items: center; justify-content: flex-end;
+  padding: var(--space-2) var(--space-4);
+  border-top: var(--bw-hair) solid var(--rule); flex: 0 0 auto;
+}
+.ds-plugins-footer-count { font-size: var(--fs-micro); color: var(--fg-3); }

package/src/css/app-shell/skills-config.css

@@ -0,0 +1,27 @@
+/* ============================================================
+   SkillsConfig — skill list + detail panel. Shares chrome with
+   PluginsConfig (.ds-plugins-overlay/-modal/-header/-body/-sidebar/-list/
+   -row/-dot/-main/-detail/-toggle/-fact-grid/-chip/-footer); the classes
+   below are the skills-specific additions only.
+   ============================================================ */
+
+.ds-skills-search-row {
+  padding: var(--space-2) var(--space-4);
+  border-bottom: var(--bw-hair) solid var(--rule); flex: 0 0 auto;
+}
+
+.ds-skills-group { margin-bottom: var(--space-2); }
+.ds-skills-group-label {
+  padding: var(--space-2) var(--space-2) 3px;
+  font-size: var(--fs-micro); font-weight: 600; color: var(--fg-3);
+  text-transform: uppercase; letter-spacing: 0.06em;
+}
+
+.ds-skills-description { font-size: var(--fs-sm); color: var(--fg-2); line-height: 1.5; }
+
+.ds-skills-body-group { display: flex; flex-direction: column; }
+.ds-skills-body-preview {
+  font-family: var(--ff-mono); font-size: var(--fs-micro); color: var(--fg-2);
+  background: var(--bg-2); border: var(--bw-hair) solid var(--rule); border-radius: var(--r-2);
+  padding: var(--space-3); overflow: auto; max-height: 260px; white-space: pre-wrap; word-break: break-word;
+}