synabun 2.0.10 → 2.2.0

package/neural-interface/public/shared/skills/studio/sx-import.js

@@ -0,0 +1,262 @@
+// ═══════════════════════════════════════════
+// SynaBun Neural Interface — Skills Studio 2.0: importing a bundle
+// ═══════════════════════════════════════════
+//
+// A bundle is checked and staged by the server first, outside every folder a runtime reads skills from (nothing of
+// it runs or loads there), and scanned. The owner sees what it is and what it can do, then installs exactly those
+// bytes (the staged digest), or discards it. The scope is the one they pick: global, or a project they choose;
+// never a default. Files already there are replaced only when the owner ticks the box (a backup is kept). A file
+// is picked in the click that asked for it (the browser's rule); what the server can do is asked once it is chosen.
+
+import { studioErrorText } from './sx-errors.js';
+import { dropdownHTML, wireDropdowns } from '../../cc-dropdown.js';
+import { revealHidden } from '../ss-unicode.js';
+import { decodeArtifactId } from '../ss-ids.js';
+
+const SEVERITY_MARK = { critical: '⛔', high: '✕', medium: '⚠', low: '•', info: '•' };
+const MAX_BUNDLE_BYTES = 24 * 1024 * 1024;
+
+const el = (tag, cls, text) => { const n = document.createElement(tag); if (cls) n.className = cls; if (text !== undefined) n.textContent = text; return n; };
+
+/**
+ * Pick a bundle and import it.
+ * @param {object} ctx the Studio's context
+ * @param {() => Promise<Set<string>>} capabilities what the server can do, once known
+ */
+export function triggerImport(ctx, capabilities) {
+  if (ctx.guest) { ctx.toast(ctx.t('skillsStudio.import.guest'), 'error'); return; }
+  const input = document.createElement('input');
+  input.type = 'file';
+  input.accept = BUNDLE_ACCEPT;
+  input.addEventListener('change', () => { const file = input.files?.[0]; if (file) importFile(ctx, file, capabilities); });
+  input.click();
+}
+
+/** The file types the picker offers. */
+export const BUNDLE_ACCEPT = '.json,.skill.json,.command.json,.agent.json';
+
+/** A bundle file someone picked (here, or from the menu before the Studio was loaded): read, checked, imported. */
+export async function importFile(ctx, file, capabilities) {
+  const { t } = ctx;
+  if (ctx.guest) { ctx.toast(t('skillsStudio.import.guest'), 'error'); return; }
+  try { await capabilities(); } catch { ctx.toast(t('skillsStudio.import.serverUnknown'), 'error'); return; }
+  if (file.size > MAX_BUNDLE_BYTES) { ctx.toast(t('skillsStudio.import.tooLarge'), 'error'); return; }
+  let bundle;
+  try { bundle = JSON.parse(await file.text()); } catch { ctx.toast(t('skillsStudio.import.notJson'), 'error'); return; }
+  if (!bundle || bundle.format !== 'synabun-skill-bundle') { ctx.toast(t('skillsStudio.import.notBundle'), 'error'); return; }
+  if (ctx.panel?.isConnected) await runImport(ctx, bundle, file.name);
+}
+
+function scopePicker(ctx, prefix) {
+  const { t } = ctx;
+  const projects = [{ value: '', label: t('skillsStudio.import.chooseProject'), disabled: true, selected: true }, ...ctx.projects.map((p) => ({ value: p.path, label: p.label }))];
+  const wrap = el('div', 'sx-dlg-form');
+  const group = el('div', 'sx-choices');
+  group.setAttribute('role', 'radiogroup');
+  group.setAttribute('aria-label', t('skillsStudio.import.where'));
+  for (const [value, words] of [['global', t('skillsStudio.import.scopeGlobal')], ['project', t('skillsStudio.import.scopeProject')]]) {
+    const label = el('label', 'sx-choice');
+    const radio = el('input');
+    radio.type = 'radio';
+    radio.name = `${prefix}-scope`;
+    radio.value = value;
+    if (value === 'global') radio.checked = true;
+    if (value === 'project' && !ctx.projects.length) radio.disabled = true;
+    label.append(radio, document.createTextNode(` ${words}`));
+    group.append(label);
+  }
+  const field = el('div', 'sx-field');
+  field.hidden = true;
+  field.id = `${prefix}-project-field`;
+  const fieldLabel = el('span', 'sx-field-label', t('skillsStudio.import.project'));
+  fieldLabel.id = `${prefix}-project-label`;
+  const dd = el('div');
+  dd.innerHTML = dropdownHTML(`${prefix}-project`, projects, { labelledBy: `${prefix}-project-label` });
+  field.append(fieldLabel, ...dd.childNodes);
+  const error = el('p', 'ss-dlg-error');
+  error.id = `${prefix}-error`;
+  error.setAttribute('role', 'alert');
+  wrap.append(group, field, error);
+  return wrap;
+}
+
+/** Where it goes, staged and scanned, the owner's review, then exactly those bytes installed (or nothing). */
+export async function runImport(ctx, bundle, fileName) {
+  const { t, tp, api } = ctx;
+  const type = ['skill', 'command', 'agent'].includes(bundle.type) ? bundle.type : 'skill';
+  const files = bundle.files && typeof bundle.files === 'object' ? Object.keys(bundle.files).length : 0;
+  // 1. Where it goes.
+  const life = new AbortController();
+  const extra = scopePicker(ctx, 'ss-imp');
+  wireDropdowns(extra, { signal: life.signal });
+  extra.addEventListener('change', (e) => { if (e.target.name === 'ss-imp-scope') extra.querySelector('#ss-imp-project-field').hidden = e.target.value !== 'project'; }, { signal: life.signal });
+  let place = null;
+  const where = await ctx.ask({
+    title: t('skillsStudio.import.title', { kind: t(`skillsStudio.kind.${type}`), name: revealHidden(String(bundle.name ?? '')) }),
+    lines: [tp('skillsStudio.import.intro', files, { file: fileName })],
+    extra,
+    buttons: [{ id: 'cancel', label: t('skillsStudio.dialog.cancel') }, { id: 'check', label: t('skillsStudio.import.check'), kind: 'primary' }],
+    accept: () => {
+      const scope = extra.querySelector('input[name="ss-imp-scope"]:checked')?.value || 'global';
+      const projectPath = scope === 'project' ? (extra.querySelector('#ss-imp-project')?.value || '') : '';
+      const error = scope === 'project' && !projectPath ? t('skillsStudio.import.chooseProjectError') : '';
+      extra.querySelector('#ss-imp-error').textContent = error;
+      if (error) return false;
+      place = { scope, projectPath };
+      return true;
+    },
+  });
+  life.abort();
+  if (where !== 'check' || !place || !ctx.panel?.isConnected) return;
+
+  // 2. Staged and scanned by the server.
+  let staged;
+  try {
+    staged = (await api.stageSkillsImport(bundle, place.scope, place.projectPath)).staged;
+  } catch (err) {
+    const problems = Array.isArray(err?.body?.problems) ? err.body.problems : [];
+    if (problems.length && ctx.panel?.isConnected) {
+      await ctx.ask({
+        title: t('skillsStudio.import.refusedTitle'),
+        lines: [t('skillsStudio.import.refusedIntro'), ...problems.slice(0, 12).map((p) => `• ${p.path ? `${revealHidden(p.path)}: ` : ''}${p.message}`), problems.length > 12 ? `• ${t('skillsStudio.dialog.andMore', { count: problems.length - 12 })}` : ''],
+        buttons: [{ id: 'cancel', label: t('skillsStudio.dialog.close'), kind: 'primary' }],
+      });
+    } else ctx.toast(t('skillsStudio.import.failed', { error: studioErrorText(ctx.t, err) }), 'error');
+    return;
+  }
+  if (!ctx.panel?.isConnected) { api.discardSkillsImport(staged.stagingId).catch(() => {}); return; }
+
+  // 3. The review: what it is, what it can do, what it would replace.
+  const review = buildImportReview(ctx, staged);
+  const lintErrors = staged.lint?.errors || 0;
+  const skillExists = staged.type === 'skill' && staged.collisions?.length > 0;
+  const blocked = staged.scan?.gate === 'blocked';
+  const answer = await ctx.ask({
+    wide: true,
+    title: t('skillsStudio.import.reviewTitle', { name: revealHidden(staged.name) }),
+    lines: [],
+    extra: review,
+    buttons: [{ id: 'discard', label: t('skillsStudio.import.discard'), kind: 'danger' }, { id: 'install', label: t('skillsStudio.import.install'), kind: 'primary', disabled: !!(lintErrors || skillExists || blocked) }],
+    focus: 'discard',
+    cancelId: 'discard',
+    accept: (choice) => {
+      if (choice !== 'install') return true;
+      const ack = review.querySelector('#ss-imp-ack');
+      const over = review.querySelector('#ss-imp-overwrite');
+      const error = ack && !ack.checked ? t('skillsStudio.import.confirmReviewed') : over && !over.checked ? t('skillsStudio.import.confirmReplace') : '';
+      const line = review.querySelector('#ss-imp-review-error');
+      if (line) line.textContent = error;
+      return !error;
+    },
+  });
+  if (answer !== 'install') { api.discardSkillsImport(staged.stagingId).catch(() => {}); return; }
+
+  // 4. Installed: exactly the staged bytes, or nothing.
+  try {
+    const res = await api.commitSkillsImport({
+      stagingId: staged.stagingId, expectedDigest: staged.digest,
+      acknowledgedDigest: staged.scan?.gate === 'review' ? staged.digest : undefined,
+      overwrite: !!review.querySelector('#ss-imp-overwrite')?.checked,
+    });
+    ctx.toast(t('skillsStudio.import.done', { name: res.name }));
+    await ctx.reload();
+    const id = decodeArtifactId(res.id);
+    const path = id.slice(id.indexOf(':') + 1);
+    const row = ctx.rows.find((r) => r.entries.some((e) => e.path === path));
+    if (row && ctx.panel?.isConnected) ctx.openRow(row.key, { tab: 'edit' });
+  } catch (err) {
+    ctx.toast(t('skillsStudio.import.failed', { error: studioErrorText(ctx.t, err) }), 'error');
+  }
+}
+
+/** The review of a staged import, built as text nodes: nothing of the bundle is ever markup here. */
+export function buildImportReview(ctx, staged) {
+  const { t, tp } = ctx;
+  const root = el('div', 'ss-review');
+  const row = (label, value, mono = false) => {
+    const r = el('div', 'ss-review-row');
+    r.append(el('span', 'ss-review-label', label), el(mono ? 'code' : 'span', 'ss-review-value', value));
+    root.append(r);
+  };
+  const size = (staged.files || []).reduce((n, f) => n + (Number(f.size) || 0), 0);
+  row(t('skillsStudio.import.goesTo'), staged.destination, true);
+  row(t('skillsStudio.import.files'), tp('skillsStudio.import.fileCount', staged.files?.length || 0, { size: size > 1024 ? `${Math.round(size / 1024)} KB` : `${size} B` }));
+  row(t('skillsStudio.import.digest'), staged.digest ? `${staged.digest.slice(0, 19)}…${staged.digest.slice(-6)}` : '', true);
+  const fileList = el('details', 'ss-review-files');
+  fileList.append(el('summary', '', t('skillsStudio.import.showFiles')));
+  const ul = el('ul');
+  for (const f of staged.files || []) ul.append(el('li', '', `${revealHidden(f.path)}${f.executable ? ` (${t('skillsStudio.import.executable')})` : ''}`));
+  for (const x of staged.excluded || []) ul.append(el('li', 'ss-review-muted', t('skillsStudio.import.leftOut', { path: revealHidden(x.path), reason: x.reason })));
+  fileList.append(ul);
+  root.append(fileList);
+
+  if (staged.type === 'skill' && staged.collisions?.length) root.append(el('p', 'ss-review-warn', t('skillsStudio.import.skillExists', { name: staged.name })));
+  if (staged.type !== 'skill' && staged.collisions?.length) {
+    const label = el('label', 'ss-review-check');
+    const box = el('input');
+    box.type = 'checkbox';
+    box.id = 'ss-imp-overwrite';
+    label.append(box, document.createTextNode(` ${tp('skillsStudio.import.replaceBox', staged.collisions.length, { files: staged.collisions.join(', ') })}`));
+    root.append(label);
+  }
+
+  // Checks of the head file
+  const lint = staged.lint || { diagnostics: [] };
+  const shownLint = (lint.diagnostics || []).filter((d) => d.severity !== 'info');
+  const checks = el('div', 'ss-review-section');
+  checks.append(el('div', 'ss-review-head', shownLint.length ? t('skillsStudio.import.checks', { errors: lint.errors || 0, warnings: lint.warnings || 0 }) : t('skillsStudio.import.checksOk')));
+  if (shownLint.length) {
+    const list = el('ul', 'ss-review-list');
+    for (const d of shownLint.slice(0, 20)) list.append(el('li', `ss-review-item ss-review-item--${d.severity === 'error' ? 'high' : 'medium'}`, `${d.message}${d.line ? ` (${t('skillsStudio.edit.line', { line: d.line })})` : ''}`));
+    checks.append(list);
+  }
+  if (lint.errors) checks.append(el('p', 'ss-review-warn', t('skillsStudio.import.blockedByProblems')));
+  root.append(checks);
+
+  // What it can do
+  const scan = staged.scan || {};
+  const auth = scan.authority || {};
+  const section = el('div', 'ss-review-section');
+  const found = scan.findings?.length || 0;
+  const status = scan.status === 'no_findings' ? t('skillsStudio.import.scanClean')
+    : scan.status === 'error' ? t('skillsStudio.import.scanError', { error: scan.error || 'error' })
+    : scan.status === 'incomplete' ? tp('skillsStudio.import.scanIncomplete', found)
+    : tp('skillsStudio.import.scanFindings', found);
+  section.append(el('div', 'ss-review-head', `${t('skillsStudio.import.canDo')} ${status}${scan.gate === 'blocked' ? ` (${t('skillsStudio.import.gateBlocked')})` : scan.gate === 'review' ? ` (${t('skillsStudio.import.gateReview')})` : ''}`));
+  const facts = [];
+  if (auth.dynamicContext?.length) facts.push(tp('skillsStudio.import.fact.dynamic', auth.dynamicContext.length));
+  if (auth.hooks?.length) facts.push(t('skillsStudio.import.fact.hooks', { events: auth.hooks.map((h) => h.event).join(', ') }));
+  if (auth.toolGrants?.length) facts.push(t('skillsStudio.import.fact.tools', { tools: auth.toolGrants.map((g) => g.tool).join(', ') }));
+  if (auth.scripts?.length) facts.push(tp('skillsStudio.import.fact.scripts', auth.scripts.length));
+  if (auth.binaries?.length) facts.push(tp('skillsStudio.import.fact.binaries', auth.binaries.length));
+  if (auth.domains?.length) facts.push(t('skillsStudio.import.fact.domains', { domains: auth.domains.slice(0, 6).join(', ') + (auth.domains.length > 6 ? ` +${auth.domains.length - 6}` : '') }));
+  if (facts.length) { const ul2 = el('ul', 'ss-review-facts'); for (const f of facts) ul2.append(el('li', '', f)); section.append(ul2); }
+  if (scan.findings?.length) {
+    const list = el('ul', 'ss-review-list');
+    for (const f of scan.findings.slice(0, 30)) {
+      const li = el('li', `ss-review-item ss-review-item--${f.severity}`);
+      li.append(el('span', 'ss-review-sev', `${SEVERITY_MARK[f.severity] || '•'} ${t(`skillsStudio.review.severity.${['critical', 'high', 'medium', 'low'].includes(f.severity) ? f.severity : 'low'}`)}`), el('span', '', ` ${f.message}`));
+      if (f.file) li.append(el('span', 'ss-review-where', ` ${revealHidden(f.file)}${f.line ? `:${f.line}` : ''}`));
+      if (f.evidence) li.append(el('code', 'ss-review-evidence', f.evidence));
+      list.append(li);
+    }
+    if (scan.findings.length > 30) list.append(el('li', 'ss-review-muted', t('skillsStudio.dialog.andMore', { count: scan.findings.length - 30 })));
+    section.append(list);
+  }
+  if (scan.disclosure) section.append(el('p', 'ss-review-muted', scan.disclosure));
+  root.append(section);
+
+  if (scan.gate === 'review') {
+    const label = el('label', 'ss-review-check');
+    const box = el('input');
+    box.type = 'checkbox';
+    box.id = 'ss-imp-ack';
+    label.append(box, document.createTextNode(` ${t('skillsStudio.import.reviewedBox')}`));
+    root.append(label);
+  }
+  const err = el('p', 'ss-dlg-error', '');
+  err.id = 'ss-imp-review-error';
+  err.setAttribute('role', 'alert');
+  root.append(err);
+  return root;
+}

package/neural-interface/public/shared/skills/studio/sx-inspector.js

@@ -0,0 +1,308 @@
+// ═══════════════════════════════════════════
+// SynaBun Neural Interface — Skills Studio 2.0: the inspector beside the document
+// ═══════════════════════════════════════════
+//
+// Form | YAML over the same document, never a copy of it (P0's lossless frontmatter: ss-frontmatter.js parses,
+// ss-form.js says what each field shows, a change of a field patches that one key of the text). Keys the form has
+// no field for are listed under Advanced, "kept as written", with the lines they are on. The description helper
+// counts each runtime's budget and says whether the description tells what the skill does and when to use it.
+// Problems come from the same checks as the server (ss-lint.js) and, for a skill, each runtime's profile
+// (ss-profiles.js); a problem jumps to its line. Snippets go in at the caret (body) or as keys (frontmatter).
+// While another file of the skill is showing, the form only shows: it changes SKILL.md, and Save saves the file
+// on screen. Every string is a `skillsStudio.*` key; values from the document reach the markup as text only.
+
+import { dropdownHTML } from '../../cc-dropdown.js';
+import { formView, fieldPatchValue, KNOWN_TOOLS, KNOWN_MODELS } from '../ss-form.js';
+import { lintArtifact } from '../ss-lint.js';
+import { lintForProfile } from '../ss-profiles.js';
+import { revealHidden } from '../ss-unicode.js';
+import { readStoredPresets } from '../ss-presets.js';
+import { html, raw, setHTML, ICONS } from './sx-dom.js';
+import { descriptionHelp, keptKeys, frontmatterText } from './sx-editor-model.js';
+import { snippetsFor, applySnippet, snippetMatches, SNIPPET_GROUPS } from './sx-snippets.js';
+
+const OTHER_PROFILES = ['portable-six-field', 'codex-native', 'opencode-native', 'antigravity-native'];
+let _life = null;
+
+/** The checks of a head document: the Studio's (gutter and list) and, for a skill, each other runtime's. */
+export function headProblems({ type, parsed, folderName, knownNames = [], files = [] }) {
+  const studio = lintArtifact({ type, parsed, folderName, knownNames });
+  const others = type === 'skill' ? OTHER_PROFILES.map((id) => {
+    try {
+      const lint = lintForProfile(id, { parsed, folderName, files });
+      return { id, problems: lint.all.filter((d) => d.severity === 'error' || d.severity === 'warning') };
+    } catch { return { id, problems: [] }; }
+  }).filter((p) => p.problems.length) : [];
+  return { studio, others };
+}
+
+const fieldLabel = (t, type, key) => t(`skillsStudio.form.field.${key}`);
+
+export function fieldHTML(t, f, { locked, type, folderName }) {
+  const id = `sx-f-${f.key}`;
+  const dis = locked || !f.writable;
+  const note = f.note ? html`<p class="sx-field-note">${noteWords(t, f.note)}</p>` : '';
+  const label = html`<label class="sx-field-label" for="${id}" id="${id}-label">${fieldLabel(t, type, f.key)}</label>`;
+  switch (f.control) {
+    case 'textarea': return html`<div class="sx-field">${label}<textarea class="sx-input sx-textarea" id="${id}" data-fm="${f.key}" rows="4"${dis ? ' disabled' : ''}>${f.value}</textarea>${note}</div>`;
+    case 'number': return html`<div class="sx-field">${label}<input class="sx-input" type="number" min="0" step="1" id="${id}" data-fm="${f.key}" value="${f.value}" placeholder="${t('skillsStudio.form.unlimited')}"${dis ? ' disabled' : ''}>${note}</div>`;
+    case 'checkbox':
+      if (f.key === 'disable-model-invocation') {
+        const name = folderName ? `/${folderName}` : '/name';
+        return html`<fieldset class="sx-field sx-choices"${dis ? ' disabled' : ''}><legend class="sx-field-label">${t('skillsStudio.form.invocation')}</legend>
+          <label class="sx-choice"><input type="radio" name="sx-inv" data-fm-radio="disable-model-invocation" value="false"${f.value ? '' : ' checked'}> ${t('skillsStudio.form.invocationAuto', { name })}</label>
+          <label class="sx-choice"><input type="radio" name="sx-inv" data-fm-radio="disable-model-invocation" value="true"${f.value ? ' checked' : ''}> ${t('skillsStudio.form.invocationManual', { name })}</label>${note}</fieldset>`;
+      }
+      return html`<div class="sx-field sx-field--check"><label class="sx-choice"><input type="checkbox" id="${id}" data-fm="${f.key}"${f.value ? ' checked' : ''}${dis ? ' disabled' : ''}> ${fieldLabel(t, type, f.key)}</label>${note}</div>`;
+    case 'model': {
+      const entries = [{ value: '', label: t('skillsStudio.form.modelInherit'), selected: !f.value }, ...KNOWN_MODELS.map((m) => ({ value: m, label: m, selected: f.value === m }))];
+      if (f.value && !KNOWN_MODELS.includes(f.value)) entries.push({ value: f.value, label: f.value, selected: true });
+      return html`<div class="sx-field"><span class="sx-field-label" id="${id}-label">${fieldLabel(t, type, f.key)}</span>${raw(dropdownHTML(id, entries, { labelledBy: `${id}-label`, disabled: dis, inputAttrs: `data-fm="${f.key}"` }))}${note}</div>`;
+    }
+    case 'tools':
+      if (Array.isArray(f.value)) {
+        const entries = [{ value: '', label: t('skillsStudio.form.addTool'), selected: true, disabled: true }, ...KNOWN_TOOLS.filter((x) => !f.value.includes(x)).map((x) => ({ value: x, label: x }))];
+        return html`<div class="sx-field"><span class="sx-field-label" id="${id}-label">${t('skillsStudio.form.field.allowed-tools')} <span class="sx-count">${f.value.length}</span></span>
+          <p class="sx-help">${t('skillsStudio.form.toolsHelp')}</p>
+          <div class="sx-chips" role="list">${f.value.map((tool) => html`<span class="sx-chip" role="listitem">${tool}${dis ? '' : html`<button type="button" class="sx-chip-x" data-tool-remove="${tool}" aria-label="${t('skillsStudio.form.removeTool', { tool })}">${ICONS.close}</button>`}</span>`)}</div>
+          ${dis ? '' : html`<div class="sx-tools-add">${raw(dropdownHTML('sx-f-tool-add', entries, { label: t('skillsStudio.form.addTool') }))}
+            <label class="sx-sr" for="sx-f-tool-pattern">${t('skillsStudio.form.toolPattern')}</label>
+            <input class="sx-input sx-input--sm" id="sx-f-tool-pattern" placeholder="${t('skillsStudio.form.toolPatternPlaceholder')}" autocomplete="off" spellcheck="false">
+            <button type="button" class="sx-btn" data-tool-add-pattern="1">${t('skillsStudio.form.add')}</button></div>`}${note}</div>`;
+      }
+      return html`<div class="sx-field">${label}<input class="sx-input" id="${id}" data-fm="${f.key}" value="${f.value}"${dis ? ' disabled' : ''}>${note}</div>`;
+    default:
+      return html`<div class="sx-field">${label}<input class="sx-input" id="${id}" data-fm="${f.key}" value="${f.value}" autocomplete="off" spellcheck="false"${dis ? ' disabled' : ''}>${f.key === 'name' ? html`<p class="sx-field-note" id="sx-name-check"></p>` : ''}${note}</div>`;
+  }
+}
+
+/** The form's notes come from ss-form.js in English: each is said in the page's language. */
+function noteWords(t, note) {
+  if (/^Not text/.test(note)) return t('skillsStudio.form.note.notText');
+  if (/^Not a list of tool names/.test(note)) return t('skillsStudio.form.note.notTools');
+  if (/^Not true or false/.test(note)) return t('skillsStudio.form.note.notBoolean');
+  if (/^Not a whole number/.test(note)) return t('skillsStudio.form.note.notNumber');
+  if (/^An alias/.test(note)) return t('skillsStudio.form.note.alias');
+  return note;
+}
+
+function reasonWords(t, view) {
+  if (!view.reason) return '';
+  return /errors/.test(view.reason) ? t('skillsStudio.form.reason.errors') : t('skillsStudio.form.reason.unsupported');
+}
+
+export function helperHTML(t, data) {
+  const help = descriptionHelp(data);
+  return html`<div class="sx-helper" aria-live="polite">
+    <ul class="sx-budgets">${help.budgets.map((b) => html`<li class="sx-budget${b.over ? ' is-over' : ''}">
+      <span class="sx-budget-name">${t(`skillsStudio.form.budget.${b.runtime}`)}</span>
+      <span class="sx-meter" aria-hidden="true"><i style="width:${Math.round(b.ratio * 100)}%"></i></span>
+      <span class="sx-budget-count">${t('skillsStudio.form.budgetCount', { used: b.used, limit: b.limit })}</span></li>`)}</ul>
+    <ul class="sx-checks">
+      <li class="${help.what ? 'is-ok' : 'is-warn'}">${help.what ? ICONS.ok : ICONS.warn}<span>${t(help.what ? 'skillsStudio.form.saysWhat' : 'skillsStudio.form.missingWhat')}</span></li>
+      <li class="${help.when ? 'is-ok' : 'is-warn'}">${help.when ? ICONS.ok : ICONS.warn}<span>${t(help.when ? 'skillsStudio.form.saysWhen' : 'skillsStudio.form.missingWhen')}</span></li>
+    </ul>
+    <p class="sx-help">${t(`skillsStudio.form.advice.${help.advice}`)}</p>
+  </div>`;
+}
+
+export function nameCheck(t, value, folderName) {
+  if (!value) return { ok: false, text: t('skillsStudio.form.nameMissing') };
+  if (folderName && value !== folderName) return { ok: false, text: t('skillsStudio.form.nameFolder', { folder: folderName }) };
+  if (!/^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(value)) return { ok: false, text: t('skillsStudio.form.nameFormat') };
+  return { ok: true, text: folderName ? t('skillsStudio.form.nameMatches') : t('skillsStudio.form.nameOk') };
+}
+
+export function problemsHTML(t, problems) {
+  const shown = problems.studio.all.filter((d) => d.severity !== 'info');
+  const item = (d, profile = null) => html`<li><button type="button" class="sx-problem sx-problem--${d.severity}" data-line="${Number(d.line) || ''}">
+    ${d.severity === 'error' ? ICONS.err : ICONS.warn}<span class="sx-problem-text">${d.line ? html`<span class="sx-problem-line">${t('skillsStudio.edit.line', { line: d.line })}</span> ` : ''}${d.message}</span>${profile ? html`<span class="sx-problem-tag">${t(`skillsStudio.form.budget.${profile}`)}</span>` : ''}</button></li>`;
+  const others = problems.others.flatMap((p) => p.problems.slice(0, 6).map((d) => item(d, p.id === 'portable-six-field' ? 'portable' : p.id.replace('-native', ''))));
+  return html`<section class="sx-insp-section" aria-labelledby="sx-problems-h">
+    <h4 class="sx-insp-h" id="sx-problems-h">${t('skillsStudio.edit.problems')} <span class="sx-count">${shown.length}</span></h4>
+    ${shown.length ? html`<ul class="sx-problems">${shown.map((d) => item(d))}</ul>` : html`<p class="sx-help sx-ok-text">${ICONS.ok} ${t('skillsStudio.edit.noProblems')}</p>`}
+    ${others.length ? html`<details class="sx-details"><summary>${t('skillsStudio.edit.otherRuntimes', { count: others.length })}</summary><ul class="sx-problems">${others}</ul></details>` : ''}
+  </section>`;
+}
+
+export function snippetsHTML(t, list, query) {
+  const words = (s) => (s.custom ? `${s.name} ${s.description}` : `${t(`skillsStudio.snippets.${s.id}.name`)} ${t(`skillsStudio.snippets.${s.id}.desc`)}`);
+  const shown = list.filter((s) => snippetMatches(s, query, words));
+  const groups = SNIPPET_GROUPS.map((g) => ({ g, items: shown.filter((s) => s.group === g) })).filter((x) => x.items.length);
+  return html`<section class="sx-insp-section" aria-labelledby="sx-snip-h">
+    <h4 class="sx-insp-h" id="sx-snip-h">${t('skillsStudio.snippets.title')}</h4>
+    <label class="sx-sr" for="sx-snip-search">${t('skillsStudio.snippets.search')}</label>
+    <input type="search" class="sx-input sx-input--sm" id="sx-snip-search" placeholder="${t('skillsStudio.snippets.search')}" value="${query}" autocomplete="off">
+    <div id="sx-snip-list">${groups.map(({ g, items }) => html`<p class="sx-snip-group">${t(`skillsStudio.snippets.group.${g}`)}</p>
+      <ul class="sx-snippets">${items.map((s) => html`<li class="sx-snippet" draggable="true" data-snippet="${s.id}">
+        <span class="sx-snippet-text"><span class="sx-snippet-name">${s.custom ? s.name : t(`skillsStudio.snippets.${s.id}.name`)}</span>
+        <span class="sx-snippet-where">${s.kind === 'frontmatter' ? t('skillsStudio.snippets.whereKeys', { keys: Object.keys(s.patch || {}).join(', ') }) : (s.custom ? (s.description || t('skillsStudio.snippets.whereCaret')) : t(`skillsStudio.snippets.${s.id}.desc`))}</span></span>
+        <button type="button" class="sx-btn sx-btn--sm" data-insert="${s.id}" aria-label="${t('skillsStudio.snippets.insertNamed', { name: s.custom ? s.name : t(`skillsStudio.snippets.${s.id}.name`) })}">${t('skillsStudio.snippets.insert')}</button></li>`)}</ul>`)}
+      ${shown.length ? '' : html`<p class="sx-help">${t('skillsStudio.snippets.none')}</p>`}</div>
+  </section>`;
+}
+
+/**
+ * Draw the inspector for a workspace.
+ * @param {HTMLElement} host
+ * @param {object} o
+ * @param {object} o.ctx @param {object} o.ws
+ * @param {object|null} o.fm ss-frontmatter.js (null while it loads)
+ * @param {object|null} o.head the head document (SKILL.md, or the agent's / command's file)
+ * @param {boolean} o.headShowing the head document is the one on screen
+ * @param {(next: string, o?: object) => void} o.replaceHead change the head document's text (one undo step)
+ * @param {(line: number) => void} o.reveal show a line of the head document
+ * @param {() => void} o.openHead show the head document
+ * @param {() => number|null} o.caret where the caret is in the showing document
+ * @param {(snippet) => void} o.insertSnippet
+ */
+export function renderInspector(host, o) {
+  const { ctx, ws, fm, head } = o;
+  const { t } = ctx;
+  _life?.abort();
+  _life = new AbortController();
+  const signal = _life.signal;
+  const mode = ws.inspectorMode || 'form';
+  const type = ws.kind;
+  const folderName = ws.kind === 'skill' ? (ws.row.folderName || ws.label) : '';
+  let body;
+  if (!head) body = html`<p class="sx-help">${t('skillsStudio.edit.noHead')}</p>`;
+  else if (head.binary) body = html`<p class="sx-note sx-note--warn" role="note">${t('skillsStudio.form.binaryHead')}</p>`;
+  else if (!fm) body = html`<p class="sx-help" role="status">${t('skillsStudio.form.loading')}</p>`;
+  else {
+    let parsed = null;
+    try { parsed = fm.parse(head.content); } catch { parsed = null; }
+    if (!parsed) body = html`<p class="sx-note" role="note">${t('skillsStudio.form.cannotRead')}</p>`;
+    else {
+      const view = formView(type, parsed);
+      const locked = !ws.subject.editable || head.readOnly || !view.editable || !o.headShowing;
+      const kept = keptKeys(type, parsed, head.content);
+      const problems = headProblems({ type, parsed, folderName, knownNames: o.knownNames || [], files: (ws.files || []).filter((f) => f.path).map((f) => ({ path: f.path, size: f.size || 0 })) });
+      ws.lastProblems = problems;
+      const notShowing = !o.headShowing && ws.subject.editable;
+      const formPart = mode === 'yaml'
+        ? html`<div class="sx-yaml"><pre class="sx-pre" tabindex="0" aria-label="${t('skillsStudio.form.yamlLabel')}">${frontmatterText(head.content) || t('skillsStudio.form.noFrontmatter')}</pre>
+            <button type="button" class="sx-btn" data-insp="yaml-edit">${t('skillsStudio.form.editInDocument')}</button>
+            <p class="sx-help">${t('skillsStudio.form.yamlHelp')}</p></div>`
+        : html`${view.reason && ws.subject.editable ? html`<p class="sx-note" role="note">${reasonWords(t, view)}</p>` : ''}
+            ${notShowing ? html`<p class="sx-note" role="note">${t('skillsStudio.form.notShowing', { file: head.label })} <button type="button" class="sx-link" data-insp="open-head">${t('skillsStudio.form.openIt')}</button></p>` : ''}
+            <div class="sx-form" role="group" aria-label="${t('skillsStudio.form.label')}">${view.fields.map((f) => fieldHTML(t, f, { locked, type, folderName }))}</div>
+            ${type === 'skill' ? helperHTML(t, parsed.data || {}) : ''}`;
+      const keptPart = kept.length ? html`<details class="sx-details sx-advanced"${ws.advancedOpen ? ' open' : ''} data-insp-details="advanced">
+          <summary>${ctx.tp('skillsStudio.form.advanced', kept.length)}</summary>
+          <p class="sx-help">${t('skillsStudio.form.advancedHelp')}</p>
+          <ul class="sx-kept">${kept.map((k) => html`<li><button type="button" class="sx-link" data-line="${k.line}">${k.key}</button><pre class="sx-pre sx-pre--sm">${k.text}</pre></li>`)}</ul>
+        </details>` : html`<p class="sx-help">${t('skillsStudio.form.advancedNone')}</p>`;
+      const custom = readStoredPresets(ctx.storage.getItem('neural-skills-custom-presets')).presets;
+      body = html`
+        <div class="sx-seg" role="group" aria-label="${t('skillsStudio.form.viewLabel')}">
+          <button type="button" data-insp="mode-form" aria-pressed="${mode === 'form' ? 'true' : 'false'}">${t('skillsStudio.form.form')}</button>
+          <button type="button" data-insp="mode-yaml" aria-pressed="${mode === 'yaml' ? 'true' : 'false'}">${t('skillsStudio.form.yaml')}</button>
+        </div>
+        ${formPart}
+        ${keptPart}
+        ${problemsHTML(t, problems)}
+        ${ws.subject.editable ? snippetsHTML(t, snippetsFor(type, custom), ws.snippetQuery || '') : ''}`;
+    }
+  }
+  setHTML(host, html`<div class="sx-inspector">${body}</div>`);
+  if (!head || !fm || head.binary) return;
+  // (its dropdowns are served by the Edit panel's delegated listeners, which hold this pane: wiring them here too
+  // would open and close them with the same click)
+  const nameInput = host.querySelector('#sx-f-name');
+  const showName = () => {
+    const out = host.querySelector('#sx-name-check');
+    if (!out || !nameInput) return;
+    const check = nameCheck(t, nameInput.value.trim(), folderName && ws.kind === 'skill' ? folderName : '');
+    out.textContent = `${check.ok ? '✓' : '✕'} ${check.text}`;
+    out.className = `sx-field-note ${check.ok ? 'sx-ok-text' : 'sx-warn-text'}`;
+  };
+  showName();
+  const apply = (key, input) => {
+    const parsed = fm.parse(head.content);
+    const view = formView(type, parsed);
+    const field = view.fields.find((f) => f.key === key);
+    if (!view.editable || !field?.writable || head.readOnly || !o.headShowing) return;
+    const savedKeys = new Set((fm.parse(head.saved.raw).keys || []).map((k) => k.key));
+    const next = fieldPatchValue({ field, input, current: parsed.data?.[key], savedHasKey: savedKeys.has(key) });
+    const el = host.querySelector(`#sx-f-${CSS.escape(key)}`);
+    if (next.invalid) { if (el) { el.setAttribute('aria-invalid', 'true'); el.title = t('skillsStudio.form.invalidNumber'); } return; }
+    if (el) { el.removeAttribute('aria-invalid'); el.removeAttribute('title'); }
+    const result = fm.patch(head.content, { [key]: next.value });
+    if (!result.ok) { ctx.toast(t('skillsStudio.form.patchFailed', { field: fieldLabel(t, type, key) }), 'error'); return; }
+    if (result.changed) o.replaceHead(result.text);
+  };
+  host.addEventListener('input', (e) => {
+    const el = e.target;
+    if (el.dataset?.fm && el.type !== 'checkbox' && el.type !== 'hidden') { apply(el.dataset.fm, el.value); if (el.dataset.fm === 'name') showName(); }
+    if (el.id === 'sx-snip-search') { ws.snippetQuery = el.value; redrawSnippets(host, ctx, ws, type); }
+  }, { signal });
+  host.addEventListener('change', (e) => {
+    const el = e.target;
+    if (el.type === 'checkbox' && el.dataset?.fm) apply(el.dataset.fm, el.checked);
+    else if (el.type === 'hidden' && el.dataset?.fm) apply(el.dataset.fm, el.value);
+    else if (el.dataset?.fmRadio) apply(el.dataset.fmRadio, el.value === 'true');
+    else if (el.id === 'sx-f-tool-add' && el.value) {
+      const parsed = fm.parse(head.content);
+      const tools = Array.isArray(parsed.data?.['allowed-tools']) ? parsed.data['allowed-tools'] : [];
+      apply('allowed-tools', [...tools, el.value]);
+    }
+  }, { signal });
+  host.addEventListener('toggle', (e) => { if (e.target.dataset?.inspDetails === 'advanced') ws.advancedOpen = e.target.open; }, { signal, capture: true });
+  host.addEventListener('click', (e) => {
+    const btn = e.target.closest?.('button');
+    if (!btn || !host.contains(btn)) return;
+    if (btn.dataset.insp === 'mode-form' || btn.dataset.insp === 'mode-yaml') { ws.inspectorMode = btn.dataset.insp === 'mode-yaml' ? 'yaml' : 'form'; renderInspector(host, o); host.querySelector(`[data-insp="${btn.dataset.insp}"]`)?.focus(); return; }
+    if (btn.dataset.insp === 'open-head') { o.openHead(); return; }
+    if (btn.dataset.insp === 'yaml-edit') { o.openHead(); o.reveal(2); return; }
+    if (btn.dataset.line) { const line = Number(btn.dataset.line); if (line) { o.openHead(); o.reveal(line); } return; }
+    if (btn.dataset.toolRemove) {
+      const parsed = fm.parse(head.content);
+      const tools = Array.isArray(parsed.data?.['allowed-tools']) ? parsed.data['allowed-tools'] : [];
+      apply('allowed-tools', tools.filter((x) => x !== btn.dataset.toolRemove));
+      return;
+    }
+    if (btn.dataset.toolAddPattern) {
+      const input = host.querySelector('#sx-f-tool-pattern');
+      const value = input?.value.trim();
+      if (!value) return;
+      const parsed = fm.parse(head.content);
+      const tools = Array.isArray(parsed.data?.['allowed-tools']) ? parsed.data['allowed-tools'] : [];
+      if (!tools.includes(value)) apply('allowed-tools', [...tools, value]);
+      return;
+    }
+    if (btn.dataset.insert) {
+      const custom = readStoredPresets(ctx.storage.getItem('neural-skills-custom-presets')).presets;
+      const snippet = snippetsFor(type, custom).find((s) => s.id === btn.dataset.insert);
+      if (snippet) o.insertSnippet(snippet);
+    }
+  }, { signal });
+  host.addEventListener('dragstart', (e) => {
+    const item = e.target.closest?.('[data-snippet]');
+    if (!item) return;
+    const custom = readStoredPresets(ctx.storage.getItem('neural-skills-custom-presets')).presets;
+    const snippet = snippetsFor(type, custom).find((s) => s.id === item.dataset.snippet);
+    if (!snippet || snippet.kind !== 'body') { e.preventDefault(); return; }
+    e.dataTransfer.setData('text/plain', snippet.text);
+    e.dataTransfer.effectAllowed = 'copy';
+  }, { signal });
+}
+
+function redrawSnippets(host, ctx, ws, type) {
+  const custom = readStoredPresets(ctx.storage.getItem('neural-skills-custom-presets')).presets;
+  const list = snippetsFor(type, custom);
+  const box = host.querySelector('#sx-snip-list');
+  if (!box) return;
+  const tmp = document.createElement('div');
+  setHTML(tmp, snippetsHTML(ctx.t, list, ws.snippetQuery || ''));
+  const fresh = tmp.querySelector('#sx-snip-list');
+  if (fresh) box.replaceWith(fresh);
+}
+
+/** Insert a snippet into a text (the view hands the result to the editor). */
+export function snippetResult(text, snippet, { caret, fm }) {
+  return applySnippet(text, snippet, { caret, fm });
+}
+
+/** A hidden-character-safe label of a document (a name may hold characters nobody can see). */
+export const shownName = (name) => revealHidden(String(name ?? ''));