synabun 2.0.10 → 2.2.0

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

@@ -0,0 +1,237 @@
+// ═══════════════════════════════════════════
+// SynaBun Neural Interface — Skills Studio: drafting a skill with AI (P3), what decides
+// ═══════════════════════════════════════════
+//
+// Create's AI box: the owner's words, an example of a good result, the sources (a session transcript, a web page, a
+// registered project, memories, an existing skill), and the options (name, who invokes it, the runtimes, the worker
+// that drafts it, its work time). This module keeps that form as plain data (it survives the window: storage), turns
+// it into the request the server checks with the same rules (../ss-creation.js), and says what a creation shows:
+// its steps, its state, what it made or why it stopped. No DOM; the view (sx-create-view.js) draws it.
+
+import { CREATION_LIMITS, DRAFT_PROVIDERS, isActiveCreation, normalizeCreationRequest, sourceSummary } from '../ss-creation.js';
+
+export const AI_FORM_KEY = 'skills-studio-create-ai';
+/** The places a source is added from (describe is the prompt itself). */
+export const AI_SOURCE_KINDS = Object.freeze(['conversation', 'url', 'repo', 'memory', 'import']);
+/** The runtimes a drafted skill is meant for (its install targets, ss-creation.js CREATION_TARGET_RUNTIMES), not who drafts it. */
+export const DRAFT_RUNTIMES = Object.freeze(['claude', 'codex', 'opencode', 'antigravity']);
+export const WORK_MINUTES = Object.freeze([20, 30, 45, 60, 90]);
+/** The steps a creation shows, in order. */
+export const CREATION_STEPS = Object.freeze(['sources', 'drafting', 'checking', 'review']);
+/** Error codes the view words (`skillsStudio.create.ai.error.<code>`); anything else is said as `other`. */
+export const CREATION_ERRORS = Object.freeze(['needs_browser', 'needs_input', 'worker_blocked', 'worker_failed', 'worker_ended', 'draft_invalid', 'draft_unchanged', 'draft_unsafe', 'budget_exceeded', 'provider_unsupported', 'request_too_long', 'source_failed', 'source_not_found', 'source_empty', 'source_unavailable', 'dispatch_failed', 'drafting_unavailable', 'too_many_creations', 'interrupted', 'invalid_request', 'other']);
+
+export function emptyAiForm() {
+  return { prompt: '', example: '', showExample: false, sources: [], name: '', invocation: 'auto', runtimes: ['claude'], target: '', minutes: CREATION_LIMITS.maxMinutes.default };
+}
+
+/** The form as it was kept (a bad or old copy gives the empty form, its prompt kept when it can be). */
+export function readAiForm(text, legacyPrompt = '') {
+  const base = emptyAiForm();
+  let saved = null;
+  try { saved = text ? JSON.parse(text) : null; } catch { saved = null; }
+  if (!saved || typeof saved !== 'object') return { ...base, prompt: typeof legacyPrompt === 'string' ? legacyPrompt : '' };
+  const runtimes = Array.isArray(saved.runtimes) ? saved.runtimes.filter((r) => DRAFT_RUNTIMES.includes(r)) : base.runtimes;
+  return {
+    prompt: typeof saved.prompt === 'string' ? saved.prompt.slice(0, CREATION_LIMITS.promptChars) : '',
+    example: typeof saved.example === 'string' ? saved.example.slice(0, CREATION_LIMITS.exampleChars) : '',
+    showExample: saved.showExample === true || (typeof saved.example === 'string' && saved.example !== ''),
+    sources: Array.isArray(saved.sources) ? saved.sources.filter((s) => s && AI_SOURCE_KINDS.includes(s.kind)).slice(0, CREATION_LIMITS.sources) : [],
+    name: typeof saved.name === 'string' ? saved.name.slice(0, CREATION_LIMITS.nameChars) : '',
+    invocation: saved.invocation === 'manual' ? 'manual' : 'auto',
+    runtimes: runtimes.length ? runtimes : base.runtimes,
+    // A worker kept from before that can no longer draft (only Claude Code can) goes back to the default.
+    target: typeof saved.target === 'string' && DRAFT_PROVIDERS.includes(targetOf(saved.target)?.provider) ? saved.target.slice(0, 260) : '',
+    minutes: WORK_MINUTES.includes(Number(saved.minutes)) ? Number(saved.minutes) : base.minutes,
+  };
+}
+
+export const writeAiForm = (form) => JSON.stringify(form);
+
+/** A source the same as one already there (the same session, address, project and paths, query, skill). */
+export function sameSource(a, b) {
+  if (!a || !b || a.kind !== b.kind) return false;
+  switch (a.kind) {
+    case 'conversation': return a.provider === b.provider && a.sessionId === b.sessionId;
+    case 'url': return a.url === b.url;
+    case 'repo': return a.project === b.project && JSON.stringify(a.paths || []) === JSON.stringify(b.paths || []);
+    case 'memory': return a.query === b.query && (a.project || '') === (b.project || '');
+    case 'import': return (a.stagingId || a.skillId || a.artifactId) === (b.stagingId || b.skillId || b.artifactId);
+    default: return false;
+  }
+}
+
+/** The form with one more source: 'added', 'duplicate' or 'full' says what happened. */
+export function addSource(form, source) {
+  if (form.sources.some((s) => sameSource(s, source))) return { form, outcome: 'duplicate' };
+  if (form.sources.length >= CREATION_LIMITS.sources) return { form, outcome: 'full' };
+  return { form: { ...form, sources: [...form.sources, source] }, outcome: 'added' };
+}
+
+export const removeSource = (form, index) => ({ ...form, sources: form.sources.filter((_, i) => i !== index) });
+
+/** A source's chip: its kind and a short label. */
+export function sourceChip(source) {
+  return { kind: source.kind, label: sourceSummary(source) || source.kind, title: source.kind === 'url' ? source.url : (source.project || source.query || source.label || '') };
+}
+
+/** "provider|model" of the model dropdown → a target ({} for the owner's default route). */
+export function targetOf(value) {
+  const s = String(value || '');
+  if (!s) return null;
+  const at = s.indexOf('|');
+  const provider = at < 0 ? s : s.slice(0, at);
+  const model = at < 0 ? '' : s.slice(at + 1);
+  return { provider, ...(model ? { model } : {}) };
+}
+
+/**
+ * The request the form sends (POST /v2/creations), checked with the server's own rules.
+ * @returns {{ ok: boolean, body: object, problems: { field: string, code: string }[] }}
+ */
+export function buildCreationRequest(form) {
+  const body = {
+    prompt: form.prompt, ...(form.example && form.showExample ? { example: form.example } : {}), ...(form.name ? { name: form.name } : {}),
+    invocation: form.invocation, sources: form.sources.map(({ label, ...rest }) => ({ ...rest, ...(label ? { label } : {}) })),
+    targets: (form.runtimes.length ? form.runtimes : ['claude']).map((runtime) => ({ runtime })),
+    ...(targetOf(form.target) ? { target: targetOf(form.target) } : {}),
+    maxMinutes: form.minutes, submit: true,
+  };
+  const { ok, problems } = normalizeCreationRequest(body);
+  return { ok, body, problems };
+}
+
+/** The key of what is wrong with a request, for the view (`skillsStudio.create.ai.problem.<key>`). */
+export function problemKey(problem) {
+  const code = String(problem?.code || '');
+  if (code === 'prompt-required') return 'prompt';
+  if (code === 'name-format') return 'name';
+  if (code.startsWith('url-')) return 'url';
+  if (code.startsWith('repo-')) return 'repo';
+  if (code.startsWith('memory-')) return 'memory';
+  if (code.startsWith('conversation-')) return 'conversation';
+  if (code.startsWith('import-')) return 'import';
+  if (code === 'target-provider') return 'provider';
+  if (code.startsWith('targets-')) return 'targets';
+  if (code.endsWith('-long')) return 'long';
+  return 'other';
+}
+export const PROBLEM_KEYS = Object.freeze(['prompt', 'name', 'url', 'repo', 'memory', 'conversation', 'import', 'provider', 'targets', 'long', 'other']);
+
+/**
+ * The steps of a creation: each 'done', 'active', 'failed' or 'waiting'.
+ * @param {object} job a creation (GET /v2/creations/:id)
+ */
+export function creationSteps(job) {
+  const order = { queued: 0, gathering: 0, drafting: 1, checking: 2, submitting: 3, done: 4 };
+  const state = String(job?.state || 'queued');
+  // Where it stopped: the last step it reached.
+  const reached = state in order ? order[state] : (job?.result ? 4 : job?.run ? (job?.files?.length ? 2 : 1) : (job?.sources?.length ? 1 : 0));
+  return CREATION_STEPS.map((id, i) => {
+    if (state === 'done') return { id, state: id === 'review' && !job?.result?.reviewId ? 'skipped' : 'done' };
+    if (i < reached) return { id, state: 'done' };
+    if (i === reached) return { id, state: isActiveCreation(state) ? 'active' : (state === 'failed' || state === 'interrupted' ? 'failed' : 'waiting') };
+    return { id, state: 'waiting' };
+  });
+}
+
+/** What a creation is called in lists: the name it made, the name asked for, or the first words of the prompt. */
+export function creationTitle(job) {
+  const name = job?.result?.name || job?.partial?.name || job?.request?.name;
+  if (name) return name;
+  const words = String(job?.request?.prompt || '').replace(/\s+/g, ' ').trim();
+  return words ? (words.length > 60 ? `${words.slice(0, 59)}…` : words) : (job?.request?.sources?.[0] ? sourceSummary(job.request.sources[0]) : job?.jobId || '');
+}
+
+/** The error code the view words. */
+export function errorCode(job) {
+  const code = String(job?.error?.code || '');
+  if (CREATION_ERRORS.includes(code)) return code;
+  if (code.startsWith('dispatch_')) return 'dispatch_failed';
+  return 'other';
+}
+
+/** Seconds since a time (for "2 min"); null without one. */
+export function elapsedSeconds(job, now = Date.now()) {
+  const from = Date.parse(job?.createdAt || '');
+  if (!Number.isFinite(from)) return null;
+  const to = job?.finishedAt ? Date.parse(job.finishedAt) : now;
+  return Math.max(0, Math.round((to - from) / 1000));
+}
+
+/** "1:05" or "12 s". */
+export function clockText(seconds) {
+  if (seconds === null || seconds === undefined) return '';
+  if (seconds < 60) return `${seconds} s`;
+  const m = Math.floor(seconds / 60);
+  const s = String(seconds % 60).padStart(2, '0');
+  return m < 60 ? `${m}:${s}` : `${Math.floor(m / 60)}:${String(m % 60).padStart(2, '0')}:${s}`;
+}
+
+/** A size in bytes as the file list says it. */
+export function sizeText(bytes) {
+  const n = Number(bytes) || 0;
+  if (n < 1024) return `${n} B`;
+  if (n < 1024 * 1024) return `${(n / 1024).toFixed(n < 10 * 1024 ? 1 : 0)} KB`;
+  return `${(n / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+/** How long to wait before asking for a running creation again (a long poll holds most of it). */
+export function pollSeconds(job) {
+  if (!isActiveCreation(job?.state)) return null;
+  return job.state === 'queued' || job.state === 'gathering' ? 5 : 20;
+}
+
+/**
+ * The providers that draft, as the server lists them (GET /creations/options `drafting.providers`, Claude Code first
+ * and the default) with what it says of each (`providerStatus`: one that cannot start here now is greyed out with its
+ * plain reason and cannot be picked). A server without the list: Claude Code alone. A provider the server says nothing
+ * of on its own takes what it says of drafting as a whole (an older server: `available: false` and why).
+ * @returns {{ provider: string, available: boolean, reason: string|null }[]}
+ */
+export function draftingProviders(drafting) {
+  const listed = Array.isArray(drafting?.providers) ? drafting.providers.filter((p) => typeof p === 'string' && DRAFT_PROVIDERS.includes(p)) : [];
+  const providers = listed.length ? [...new Set(listed)] : ['claude-code'];
+  const status = new Map((Array.isArray(drafting?.providerStatus) ? drafting.providerStatus : []).filter((p) => p && typeof p.provider === 'string').map((p) => [p.provider, p]));
+  const allOff = drafting?.available === false;
+  return providers.sort((a, b) => (a === 'claude-code' ? -1 : b === 'claude-code' ? 1 : 0)).map((provider) => {
+    const st = status.get(provider);
+    if (st) return { provider, available: st.available === true, reason: st.available === true ? null : String(st.reason || '') };
+    return allOff ? { provider, available: false, reason: String(drafting.reason || '') } : { provider, available: true, reason: null };
+  });
+}
+
+
+/**
+ * The model dropdown: the owner's route first (when it is one that drafts and can start here), then the models of
+ * each provider the server lists from the Assistant's catalog; a provider that cannot draft here now is one greyed
+ * option with its reason, never selectable. The default (Claude Code's own model, when there is no route) is greyed
+ * too when Claude Code cannot start here, so the first provider that can is what the list then shows chosen.
+ */
+export function modelEntries({ defaultTarget = null, catalog = null, selected = '', words, providers = null }) {
+  const list_ = Array.isArray(providers) && providers.length ? providers : [{ provider: 'claude-code', available: true, reason: null }];
+  const can = (p) => list_.some((x) => x.provider === p && x.available);
+  const routed = defaultTarget?.provider && can(defaultTarget.provider) && defaultTarget.route === true;
+  const defaultOff = !routed && !can('claude-code');
+  const entries = [{ value: '', label: routed ? words.route(defaultTarget) : words.fallback, selected: !selected && !defaultOff, ...(defaultOff ? { disabled: true } : {}) }];
+  for (const { provider, available, reason } of list_) {
+    if (!available) { entries.push({ group: words.provider(provider), options: [{ value: provider, label: words.providerOff(provider, reason || ''), disabled: true, selected: false }] }); continue; }
+    const rows = Array.isArray(catalog?.[provider]) ? catalog[provider] : [];
+    const options = [{ value: provider, label: words.providerDefault(provider), selected: selected === provider }];
+    for (const row of rows.slice(0, 60)) {
+      if (!row?.id || row.status === 'unavailable') continue;
+      const value = `${provider}|${row.id}`;
+      options.push({ value, label: String(row.label || row.id), selected: selected === value });
+    }
+    entries.push({ group: words.provider(provider), options });
+  }
+  // A choice kept from before that the catalog no longer lists stays visible (and chosen), never silently swapped;
+  // one of a provider that cannot draft here now is shown greyed and the default is chosen instead.
+  if (selected && !entries.some((e) => (e.options || [e]).some((o) => o.value === selected))) {
+    const t = targetOf(selected);
+    const off = !can(t.provider);
+    entries.push({ value: selected, label: `${words.provider(t.provider)} · ${t.model || ''}`.trim(), selected: !off, disabled: off });
+    if (off && !defaultOff) entries[0].selected = true;
+  }
+  return entries;
+}

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

@@ -0,0 +1,254 @@
+// ═══════════════════════════════════════════
+// SynaBun Neural Interface — Skills Studio 2.0: the Create place
+// ═══════════════════════════════════════════
+//
+// AI first: one box to describe the skill, with the sources it is drafted from (a session transcript, a web page, a
+// registered project, memories, an existing skill); one worker drafts the package and the result waits in Review
+// (sx-create-ai-view.js, P3). One step away, without AI: a blank skill from a name (checked as it is typed, a
+// folder-safe name, a starting layout, the description written into its frontmatter), a pasted SKILL.md, and Import.
+// A new skill starts as a draft in SynaBun's library and reaches a runtime only when it is published; an agent or a
+// command is one file, written where the owner picks.
+
+import { studioErrorText } from './sx-errors.js';
+import { dropdownHTML, wireDropdowns } from '../../cc-dropdown.js';
+import { decodeArtifactId } from '../ss-ids.js';
+import { html, raw, setHTML, ICONS, attr } from './sx-dom.js';
+import { slugify, checkName, scaffold, layoutsFor, pastedName } from './sx-create.js';
+import { triggerImport } from './sx-import.js';
+import { aiAreaHTML, wireAi, leaveAi, openCreation } from './sx-create-ai-view.js';
+
+let _life = null;
+
+export { openCreation };
+
+function state(ctx) {
+  if (!ctx.lib.create) ctx.lib.create = { name: '', kind: 'skill', layout: 'blank', description: '', invocation: 'auto', scope: 'global', projectPath: '' };
+  return ctx.lib.create;
+}
+
+/** Start an import from anywhere (the menu's "Import…", a link). */
+export function startImport(ctx) { triggerImport(ctx, ctx.capabilities); }
+
+function nameChecks(ctx, st) {
+  const shipped = ctx.rows.filter((r) => r.source === 'synabun').map((r) => r.folderName);
+  const taken = ctx.rows.filter((r) => r.kind === st.kind).map((r) => r.folderName);
+  return checkName(st.name, { shipped, taken, kind: st.kind });
+}
+
+function blankHTML(ctx, st) {
+  const { t } = ctx;
+  const check = nameChecks(ctx, st);
+  const layouts = layoutsFor(st.kind);
+  const typed = st.name !== '';
+  const projects = [{ value: '', label: t('skillsStudio.import.chooseProject'), disabled: true, selected: !st.projectPath }, ...ctx.projects.map((p) => ({ value: p.path, label: p.label, selected: st.projectPath === p.path }))];
+  return html`<div class="sx-blank" role="group" aria-labelledby="sx-blank-title">
+    <h4 class="sx-section-title" id="sx-blank-title">${t('skillsStudio.create.blankTitle')}</h4>
+    <div class="sx-field">
+      <label class="sx-field-label" for="sx-cr-name">${t('skillsStudio.create.nameLabel')}</label>
+      <input class="sx-input" id="sx-cr-name" value="${st.name}" autocomplete="off" spellcheck="false" aria-describedby="sx-cr-name-help"${attr('aria-invalid', typed && !check.ok ? 'true' : null)} placeholder="${t('skillsStudio.create.namePlaceholder')}">
+      <p class="sx-field-note${typed && !check.ok ? ' sx-err-text' : check.warnings.length ? ' sx-warn-text' : ''}" id="sx-cr-name-help">${typed && !check.ok ? t(`skillsStudio.create.name.${check.errors[0]}`) : check.warnings.length ? t(`skillsStudio.create.name.${check.warnings[0]}`) : t('skillsStudio.create.nameHelp', { slug: st.name ? `/${st.name}` : '/name' })}</p>
+    </div>
+    <fieldset class="sx-field sx-choices"><legend class="sx-field-label">${t('skillsStudio.create.kindLabel')}</legend>
+      ${['skill', 'agent', 'command'].map((k) => html`<label class="sx-choice"><input type="radio" name="sx-cr-kind" value="${k}"${st.kind === k ? ' checked' : ''}> ${t(`skillsStudio.create.kind.${k}`)}</label>`)}
+      <p class="sx-help">${t(`skillsStudio.create.kindHelp.${st.kind}`)}</p>
+    </fieldset>
+    <fieldset class="sx-field"><legend class="sx-field-label">${t('skillsStudio.create.layoutLabel')}</legend>
+      <div class="sx-layouts">${layouts.map((l) => html`<label class="sx-layout${st.layout === l ? ' is-on' : ''}"><input type="radio" name="sx-cr-layout" value="${l}"${st.layout === l ? ' checked' : ''}>
+        <span class="sx-layout-name">${t(`skillsStudio.create.layout.${st.kind}.${l}.name`)}</span><span class="sx-layout-desc">${t(`skillsStudio.create.layout.${st.kind}.${l}.desc`)}</span></label>`)}</div>
+    </fieldset>
+    <div class="sx-field">
+      <label class="sx-field-label" for="sx-cr-desc">${t('skillsStudio.create.descriptionLabel')} <span class="sx-count" id="sx-cr-desc-count">${st.description.length} / 1024</span></label>
+      <textarea class="sx-input sx-textarea" id="sx-cr-desc" rows="3" maxlength="1024" placeholder="${t('skillsStudio.create.descriptionPlaceholder')}">${st.description}</textarea>
+      <p class="sx-help">${t('skillsStudio.create.descriptionHelp')}</p>
+    </div>
+    ${st.kind === 'skill' ? html`<fieldset class="sx-field sx-choices"><legend class="sx-field-label">${t('skillsStudio.form.invocation')}</legend>
+      <label class="sx-choice"><input type="radio" name="sx-cr-inv" value="auto"${st.invocation === 'auto' ? ' checked' : ''}> ${t('skillsStudio.form.invocationAuto', { name: st.name ? `/${st.name}` : '/name' })}</label>
+      <label class="sx-choice"><input type="radio" name="sx-cr-inv" value="manual"${st.invocation === 'manual' ? ' checked' : ''}> ${t('skillsStudio.form.invocationManual', { name: st.name ? `/${st.name}` : '/name' })}</label>
+      <p class="sx-help">${t('skillsStudio.create.whereSkill')}</p></fieldset>`
+    : html`<fieldset class="sx-field sx-choices"><legend class="sx-field-label">${t('skillsStudio.create.whereLabel')}</legend>
+      <label class="sx-choice"><input type="radio" name="sx-cr-scope" value="global"${st.scope === 'global' ? ' checked' : ''}> ${t(`skillsStudio.create.whereGlobal.${st.kind}`)}</label>
+      <label class="sx-choice"><input type="radio" name="sx-cr-scope" value="project"${st.scope === 'project' ? ' checked' : ''}${ctx.projects.length ? '' : ' disabled'}> ${t('skillsStudio.create.whereProject')}</label>
+      ${st.scope === 'project' ? html`<div class="sx-field"><span class="sx-field-label" id="sx-cr-project-label">${t('skillsStudio.import.project')}</span>${raw(dropdownHTML('sx-cr-project', projects, { labelledBy: 'sx-cr-project-label' }))}</div>` : ''}
+    </fieldset>`}
+    <div class="sx-row">
+      <button type="button" class="sx-btn sx-btn--primary" data-create="blank" aria-keyshortcuts="${ctx.mac ? 'Meta+Enter' : 'Control+Enter'}">${t(`skillsStudio.create.createButton.${st.kind}`)} <kbd>${ctx.mac ? '⌘↵' : 'Ctrl+Enter'}</kbd></button>
+      <button type="button" class="sx-btn" data-create="paste">${t('skillsStudio.create.paste')}</button>
+      <button type="button" class="sx-btn sx-btn--ghost" data-create="import">${ICONS.upload}<span>${t('skillsStudio.create.import')}</span></button>
+    </div>
+  </div>`;
+}
+
+/** Draw the Create place. */
+/** Create is left for another place: its listeners on the shared main area end. */
+export function leaveCreatePlace() { _life?.abort(); _life = null; leaveAi(); }
+
+export function renderCreatePlace(host, ctx) {
+  const { t } = ctx;
+  _life?.abort();
+  _life = new AbortController();
+  const signal = _life.signal;
+  const st = state(ctx);
+  const guest = ctx.guest;
+  setHTML(host, html`<section class="sx-place sx-place--create" aria-labelledby="sx-create-title">
+    <div class="sx-place-scroll"><div class="sx-create">
+      <h3 class="sx-place-title" id="sx-create-title" tabindex="-1">${t('skillsStudio.create.title')}</h3>
+      ${guest ? html`<p class="sx-note" role="note">${t('skillsStudio.create.guest')}</p>` : html`
+      ${aiAreaHTML(ctx)}
+      ${blankHTML(ctx, st)}`}
+      <p class="sx-explain">${t('skillsStudio.create.explain')}</p>
+      <div><p class="sx-help">${t('skillsStudio.create.examplesTitle')}</p><ul class="sx-plain-list sx-examples">
+        <li>${t('skillsStudio.create.example1')}</li><li>${t('skillsStudio.create.example2')}</li><li>${t('skillsStudio.create.example3')}</li></ul></div>
+    </div></div>
+  </section>`);
+  if (guest) return;
+  wireDropdowns(host, { signal });
+  // The AI box (its own listeners on the same host, ended by the same signal).
+  wireAi(host, ctx, signal);
+  host.addEventListener('input', (e) => {
+    const el = e.target;
+    if (el.id === 'sx-cr-name') {
+      const slug = slugify(el.value);
+      // Spaces and capitals turn into the folder-safe name as it is typed.
+      if (slug !== el.value && /[\sA-Z_]/.test(el.value)) { const at = el.selectionStart; el.value = slug; el.setSelectionRange(Math.min(at, slug.length), Math.min(at, slug.length)); }
+      st.name = el.value;
+      updateName(host, ctx, st);
+      return;
+    }
+    if (el.id === 'sx-cr-desc') { st.description = el.value; const c = host.querySelector('#sx-cr-desc-count'); if (c) c.textContent = `${el.value.length} / 1024`; }
+  }, { signal });
+  host.addEventListener('change', (e) => {
+    const el = e.target;
+    if (el.name === 'sx-cr-kind') { st.kind = el.value; st.layout = 'blank'; redraw(host, ctx, st); host.querySelector(`input[name="sx-cr-kind"][value="${el.value}"]`)?.focus(); }
+    else if (el.name === 'sx-cr-layout') { st.layout = el.value; host.querySelectorAll('.sx-layout').forEach((l) => l.classList.toggle('is-on', l.querySelector('input')?.checked)); }
+    else if (el.name === 'sx-cr-inv') st.invocation = el.value;
+    else if (el.name === 'sx-cr-scope') { st.scope = el.value; redraw(host, ctx, st); host.querySelector(`input[name="sx-cr-scope"][value="${el.value}"]`)?.focus(); }
+    else if (el.id === 'sx-cr-project') st.projectPath = el.value;
+  }, { signal });
+  host.addEventListener('click', (e) => {
+    const btn = e.target.closest?.('[data-create]');
+    if (!btn || btn.disabled) return;
+    if (btn.dataset.create === 'blank') createBlank(host, ctx, st);
+    else if (btn.dataset.create === 'paste') pasteSkill(ctx);
+    else if (btn.dataset.create === 'import') startImport(ctx);
+  }, { signal });
+  host.addEventListener('keydown', (e) => {
+    if ((ctx.mac ? e.metaKey : e.ctrlKey) && e.key === 'Enter' && e.target.closest?.('.sx-blank')) { e.preventDefault(); createBlank(host, ctx, st); }
+  }, { signal });
+}
+
+function updateName(host, ctx, st) {
+  const { t } = ctx;
+  const check = nameChecks(ctx, st);
+  const input = host.querySelector('#sx-cr-name');
+  const help = host.querySelector('#sx-cr-name-help');
+  const typed = st.name !== '';
+  if (input) { if (typed && !check.ok) input.setAttribute('aria-invalid', 'true'); else input.removeAttribute('aria-invalid'); }
+  if (help) {
+    help.className = `sx-field-note${typed && !check.ok ? ' sx-err-text' : check.warnings.length ? ' sx-warn-text' : ''}`;
+    help.textContent = typed && !check.ok ? t(`skillsStudio.create.name.${check.errors[0]}`) : check.warnings.length ? t(`skillsStudio.create.name.${check.warnings[0]}`) : t('skillsStudio.create.nameHelp', { slug: st.name ? `/${st.name}` : '/name' });
+  }
+}
+
+function redraw(host, ctx, st) {
+  const blank = host.querySelector('.sx-blank');
+  if (!blank) return;
+  const tmp = document.createElement('div');
+  setHTML(tmp, blankHTML(ctx, st));
+  // (the dropdowns of the new form are served by the host's delegated listeners: wiring them again would toggle twice)
+  blank.replaceWith(tmp.firstElementChild);
+}
+
+async function createBlank(host, ctx, st) {
+  const { t } = ctx;
+  const check = nameChecks(ctx, st);
+  if (!check.ok) {
+    // Said where it is: the field is marked, its note says why, and the keyboard goes there.
+    const input = host.querySelector('#sx-cr-name');
+    const help = host.querySelector('#sx-cr-name-help');
+    input?.setAttribute('aria-invalid', 'true');
+    if (help) { help.textContent = t(`skillsStudio.create.name.${check.errors[0]}`); help.className = 'sx-field-note sx-err-text'; }
+    input?.focus();
+    return;
+  }
+  if (st.kind !== 'skill' && st.scope === 'project' && !st.projectPath) { ctx.toast(t('skillsStudio.import.chooseProjectError'), 'error'); host.querySelector('#sx-cr-project-trigger')?.focus(); return; }
+  const files = scaffold({ kind: st.kind, name: st.name, description: st.description, layout: st.layout, invocation: st.invocation }).files;
+  const btn = host.querySelector('[data-create="blank"]');
+  if (btn) btn.disabled = true;
+  const gen = ctx.gen();
+  try {
+    if (st.kind === 'skill') {
+      const res = await ctx.api.createLibrarySkill({ name: st.name, files }, { idempotencyKey: ctx.key('create') });
+      if (!ctx.alive(gen)) return;
+      ctx.toast(t('skillsStudio.create.created', { name: st.name }));
+      ctx.lib.create = null;
+      await ctx.reload();
+      if (ctx.alive(gen)) await ctx.openRow(`lib:${res.skillId}`, { tab: 'edit' });
+    } else {
+      const res = await ctx.api.createSkillsArtifact({ type: st.kind, scope: st.scope, projectPath: st.scope === 'project' ? st.projectPath : '', name: st.name, rawContent: files[0].content });
+      if (!ctx.alive(gen)) return;
+      ctx.toast(t('skillsStudio.create.created', { name: st.name }));
+      ctx.lib.create = null;
+      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.alive(gen)) await ctx.openRow(row.key, { tab: 'edit' });
+    }
+  } catch (err) {
+    if (!ctx.alive(gen)) return;
+    if (btn) btn.disabled = false;
+    ctx.toast(t('skillsStudio.create.failed', { error: studioErrorText(ctx.t, err) }), 'error');
+  }
+}
+
+async function pasteSkill(ctx) {
+  const { t } = ctx;
+  const box = document.createElement('div');
+  box.className = 'sx-dlg-form';
+  const label = document.createElement('label');
+  label.className = 'sx-field-label';
+  label.htmlFor = 'sx-paste';
+  label.textContent = t('skillsStudio.create.pasteLabel');
+  const area = document.createElement('textarea');
+  area.id = 'sx-paste';
+  area.className = 'sx-input sx-textarea sx-mono';
+  area.rows = 12;
+  area.spellcheck = false;
+  const nameLabel = document.createElement('label');
+  nameLabel.className = 'sx-field-label';
+  nameLabel.htmlFor = 'sx-paste-name';
+  nameLabel.textContent = t('skillsStudio.create.nameLabel');
+  const nameInput = document.createElement('input');
+  nameInput.id = 'sx-paste-name';
+  nameInput.className = 'sx-input';
+  nameInput.autocomplete = 'off';
+  area.addEventListener('input', () => { if (!nameInput.dataset.touched) nameInput.value = slugify(pastedName(area.value)); });
+  nameInput.addEventListener('input', () => { nameInput.dataset.touched = '1'; });
+  const err = document.createElement('p');
+  err.className = 'ss-dlg-error';
+  err.setAttribute('role', 'alert');
+  box.append(label, area, nameLabel, nameInput, err);
+  setTimeout(() => area.focus(), 0);
+  let chosen = null;
+  const answer = await ctx.ask({
+    title: t('skillsStudio.create.pasteTitle'), extra: box, wide: true,
+    buttons: [{ id: 'cancel', label: t('skillsStudio.dialog.cancel') }, { id: 'ok', label: t('skillsStudio.create.pasteConfirm'), kind: 'primary' }],
+    accept: (id) => {
+      if (id !== 'ok') return true;
+      if (!area.value.trim()) { err.textContent = t('skillsStudio.create.pasteEmpty'); return false; }
+      const check = checkName(nameInput.value.trim(), { shipped: ctx.rows.filter((r) => r.source === 'synabun').map((r) => r.folderName) });
+      if (!check.ok) { err.textContent = t(`skillsStudio.create.name.${check.errors[0]}`); return false; }
+      chosen = { name: nameInput.value.trim(), text: area.value };
+      return true;
+    },
+  });
+  if (answer !== 'ok' || !chosen) return;
+  const gen = ctx.gen();
+  try {
+    const res = await ctx.api.createLibrarySkill({ name: chosen.name, files: [{ path: 'SKILL.md', content: chosen.text }] }, { idempotencyKey: ctx.key('paste') });
+    if (!ctx.alive(gen)) return;
+    ctx.toast(t('skillsStudio.create.created', { name: chosen.name }));
+    await ctx.reload();
+    if (ctx.alive(gen)) await ctx.openRow(`lib:${res.skillId}`, { tab: 'edit' });
+  } catch (e) { if (ctx.alive(gen)) ctx.toast(t('skillsStudio.create.failed', { error: studioErrorText(ctx.t, e) }), 'error'); }
+}

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

@@ -0,0 +1,126 @@
+// ═══════════════════════════════════════════
+// SynaBun Neural Interface — Skills Studio 2.0: a new skill, agent or command from a name
+// ═══════════════════════════════════════════
+//
+// The fast path of Create ("Blank skill"): a name, checked as it is typed and turned into a folder-safe slug, a
+// kind, an optional description that goes into the frontmatter (the old wizard dropped it, SK-063), and a starting
+// layout. A layout with references writes those files too, and SKILL.md points to them by a relative path, the
+// way every runtime resolves it (SK-064); nothing names `$SKILL_DIR`. What comes out is a list of files for the
+// library (POST /v2/skills { name, files }) or, for an agent or a command, the one file the P0 create route writes.
+// No DOM and no imports.
+
+export const NAME_MAX = 64;
+const NAME_RE = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
+
+/** A name as a folder can carry it everywhere: lowercase ASCII letters, digits, single hyphens, at most 64. */
+export function slugify(input) {
+  return String(input ?? '')
+    .normalize('NFKD').replace(/[̀-ͯ]/g, '')
+    .toLowerCase()
+    .replace(/[\s_./\\]+/g, '-')
+    .replace(/[^a-z0-9-]/g, '')
+    .replace(/-{2,}/g, '-')
+    .replace(/^-+|-+$/g, '')
+    .slice(0, NAME_MAX)
+    .replace(/-+$/, '');
+}
+
+/**
+ * What is wrong with a name, as codes the view words (`skillsStudio.create.name.*`).
+ * @param {string} name
+ * @param {{ taken?: string[], shipped?: string[], kind?: string }} [o] names already used (a warning), names SynaBun ships (an error)
+ * @returns {{ ok: boolean, errors: string[], warnings: string[] }}
+ */
+export function checkName(name, { taken = [], shipped = [], kind = 'skill' } = {}) {
+  const n = String(name ?? '');
+  const errors = [];
+  const warnings = [];
+  if (!n.trim()) errors.push('required');
+  else {
+    if (n.length > NAME_MAX) errors.push('too-long');
+    if (!NAME_RE.test(n)) errors.push('format');
+    const lower = n.toLowerCase();
+    if (kind === 'skill' && shipped.some((s) => String(s).toLowerCase() === lower)) errors.push('shipped');
+    else if (taken.some((s) => String(s).toLowerCase() === lower)) warnings.push('taken');
+  }
+  return { ok: errors.length === 0, errors, warnings };
+}
+
+/** A YAML scalar for a text value: JSON's double-quoted string is valid YAML and keeps every character. */
+const yamlText = (text) => JSON.stringify(String(text ?? ''));
+
+const TODO_DESCRIPTION = 'TODO: say what this skill does and when to use it.';
+
+/** The layouts a skill can start from. `files`: what each writes besides SKILL.md. */
+export const SKILL_LAYOUTS = Object.freeze(['blank', 'steps', 'router', 'references', 'script']);
+export const AGENT_LAYOUTS = Object.freeze(['blank', 'specialist', 'researcher']);
+export const COMMAND_LAYOUTS = Object.freeze(['blank', 'analysis', 'workflow']);
+
+export const layoutsFor = (kind) => (kind === 'agent' ? AGENT_LAYOUTS : kind === 'command' ? COMMAND_LAYOUTS : SKILL_LAYOUTS);
+
+function skillHead({ name, description, invocation }) {
+  const lines = ['---', `name: ${name}`, `description: ${yamlText(description || TODO_DESCRIPTION)}`];
+  if (invocation === 'manual') lines.push('disable-model-invocation: true');
+  return lines;
+}
+
+const SKILL_BODIES = {
+  blank: (n) => [`# ${n}`, '', 'Write the instructions here: what to do, in which order, and what a good result looks like.', ''],
+  steps: (n) => [`# ${n}`, '', 'The user asked for this with: $ARGUMENTS', '', '## Steps', '', '1. Read what the user gave and check it is complete.', '2. Do the task.', '3. Check the result before you report it.', '4. Report what changed, briefly.', ''],
+  router: (n) => [`# ${n}`, '', 'Read the first word of $ARGUMENTS and follow its section. With no word, list the sections and ask which one.', '', '| Word | What it does |', '|------|--------------|', '| `first` | Does the first thing |', '| `second` | Does the second thing |', '', '## first', '', 'Instructions for the first thing.', '', '## second', '', 'Instructions for the second thing.', ''],
+  references: (n) => [`# ${n}`, '', 'Keep this file short. Read a reference only when the task needs it:', '', '- [references/guide.md](references/guide.md): the detailed guide.', '', '## Steps', '', '1. Work out what the user needs.', '2. When the details matter, read the guide above.', '3. Follow it and report the result.', ''],
+  script: (n) => [`# ${n}`, '', 'Run the script instead of reading it:', '', '```bash', 'bash scripts/run.sh', '```', '', 'It prints what it did. Report that output to the user.', ''],
+};
+
+const AGENT_FILES = {
+  blank: (n, d) => ['---', `name: ${n}`, `description: ${yamlText(d || `Use this agent when the task needs ${n}.`)}`, '---', '', `You are the ${n} agent.`, '', 'Follow the instructions you are given and report what you did.', ''],
+  specialist: (n, d) => ['---', `name: ${n}`, `description: ${yamlText(d || `Use this agent when the task needs ${n} expertise.`)}`, 'model: sonnet', 'tools: Read, Grep, Glob, Bash', '---', '', `You are an expert in ${n}.`, '', '## How you work', '', '1. Understand the current state before you change anything.', '2. Explain what you found.', '3. Recommend concrete next steps.', ''],
+  researcher: (n, d) => ['---', `name: ${n}`, `description: ${yamlText(d || `Use this agent to research ${n}.`)}`, 'tools: Read, Grep, Glob, WebFetch, WebSearch', '---', '', `You research ${n}.`, '', '1. Search the code for context.', '2. Look up current documentation.', '3. Return a short summary with sources.', ''],
+};
+
+const COMMAND_FILES = {
+  blank: (n, d) => ['---', `description: ${yamlText(d || `What /${n} does.`)}`, '---', '', `# ${n}`, '', 'Instructions for the command. The user\'s words: $ARGUMENTS', ''],
+  analysis: (n, d) => ['---', `description: ${yamlText(d || `Analyze code or content for ${n}.`)}`, '---', '', `# ${n}`, '', 'Target: $ARGUMENTS', '', '1. Read the target.', '2. Look for problems and improvements.', '3. Report them, most important first.', ''],
+  workflow: (n, d) => ['---', `description: ${yamlText(d || `Run the ${n} workflow.`)}`, '---', '', `# ${n}`, '', '$ARGUMENTS', '', '1. Gather what is needed.', '2. Propose a plan and wait for a yes.', '3. Do it.', '4. Check the result.', ''],
+};
+
+/**
+ * The files of a new skill, agent or command.
+ * @param {{ kind?: 'skill'|'agent'|'command', name: string, description?: string, layout?: string, invocation?: 'auto'|'manual' }} o
+ * @returns {{ files: { path: string, content: string, executable?: boolean }[], head: string }}
+ */
+export function scaffold({ kind = 'skill', name, description = '', layout = 'blank', invocation = 'auto' }) {
+  const n = String(name ?? '');
+  const d = String(description ?? '').replace(/\s+/g, ' ').trim();
+  if (kind === 'agent') {
+    const gen = AGENT_FILES[layout] || AGENT_FILES.blank;
+    return { files: [{ path: `${n}.md`, content: gen(n, d).join('\n') }], head: `${n}.md` };
+  }
+  if (kind === 'command') {
+    const gen = COMMAND_FILES[layout] || COMMAND_FILES.blank;
+    return { files: [{ path: `${n}.md`, content: gen(n, d).join('\n') }], head: `${n}.md` };
+  }
+  const body = (SKILL_BODIES[layout] || SKILL_BODIES.blank)(n);
+  const hint = layout === 'router' ? ['argument-hint: "[first|second]"'] : layout === 'steps' ? ['argument-hint: "[what to work on]"'] : [];
+  const head = [...skillHead({ name: n, description: d, invocation }), ...hint, '---', '', ...body];
+  const files = [{ path: 'SKILL.md', content: head.join('\n') }];
+  if (layout === 'references') {
+    files.push({ path: 'references/guide.md', content: [`# ${n}: the detailed guide`, '', 'Everything SKILL.md does not need to say every time: background, examples, edge cases.', '', '## Examples', '', '- An example of a request and what a good answer looks like.', ''].join('\n') });
+  }
+  if (layout === 'script') {
+    files.push({ path: 'scripts/run.sh', content: ['#!/usr/bin/env bash', 'set -euo pipefail', '', `echo "${n}: replace this line with the work the script does"`, ''].join('\n'), executable: true });
+  }
+  return { files, head: 'SKILL.md' };
+}
+
+/** The name a pasted SKILL.md gives itself (its frontmatter `name`), or ''. YAML is not parsed here: a plain line only. */
+export function pastedName(text) {
+  const m = /^---[ \t]*\r?\n([\s\S]*?)\r?\n---/.exec(String(text ?? '').replace(/^/, ''));
+  if (!m) return '';
+  const line = /^name:[ \t]*(.+?)[ \t]*$/m.exec(m[1]);
+  if (!line) return '';
+  return line[1].replace(/^(['"])(.*)\1$/, '$2');
+}
+
+/** The AI sources of Create (P3: sx-create-ai.js drafts from them; `describe` is the prompt itself). */
+export const AI_SOURCES = Object.freeze(['describe', 'conversation', 'url', 'repo', 'memory', 'import']);