@bakapiano/ccsm 0.9.0 → 0.10.1

package/public/js/components/DirectoryPicker.js

@@ -0,0 +1,203 @@
+// Directory browser used by Launch page. Windows-Explorer-style:
+//   ┌───────────────────────────────────────────────┐
+//   │ [←] [→] [↑]  Home > Users > Admin > foo  [✎]  │   nav + breadcrumb
+//   ├──────────────┬────────────────────────────────┤
+//   │ Quick access │  folder rows (large, hoverable)│
+//   │   Home       │  ⌃  ..                          │
+//   │   Work dir   │  📁 AppData                     │
+//   │   C:\        │  📁 ccsm-workspaces             │
+//   │   D:\        │                                 │
+//   └──────────────┴────────────────────────────────┘
+//
+// The picker streams the currently-selected path back to the parent via
+// `onPick(path)` on every selection change. Confirm/cancel UI lives in
+// the parent (the workdir modal's shared footer) so auto + cwd modes
+// share one CTA.
+//
+// Props: { initialPath, onPick }
+
+import { html } from '../html.js';
+import { useEffect, useState } from 'preact/hooks';
+import { api } from '../api.js';
+import { setToast } from '../toast.js';
+import { IconFolder, IconHome, IconChevronLeft, IconChevronRight, IconChevronUp, IconPencil } from '../icons.js';
+
+export function DirectoryPicker({ initialPath, onPick }) {
+  const [data, setData] = useState(null);
+  const [path, setPath] = useState(initialPath || '');
+  const [history, setHistory] = useState({ stack: [], cursor: -1 }); // back/forward
+  const [editing, setEditing] = useState(false);
+  const [input, setInput] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  // Push the current selection up on every change so the parent's
+  // shared "Use folder" CTA can act on it.
+  const select = (p) => { setPath(p); setInput(p); onPick?.(p); };
+
+  const browse = async (p, { pushHistory = true } = {}) => {
+    setLoading(true);
+    try {
+      const url = '/api/browse' + (p ? `?path=${encodeURIComponent(p)}` : '');
+      const r = await api('GET', url);
+      setData(r);
+      select(r.path);
+      if (pushHistory) {
+        setHistory((h) => {
+          const head = h.stack.slice(0, h.cursor + 1);
+          head.push(r.path);
+          return { stack: head, cursor: head.length - 1 };
+        });
+      }
+    } catch (e) { setToast(e.message, 'error'); }
+    finally { setLoading(false); }
+  };
+
+  useEffect(() => { browse(initialPath); }, []);
+
+  const canBack = history.cursor > 0;
+  const canForward = history.cursor >= 0 && history.cursor < history.stack.length - 1;
+
+  const goBack = () => {
+    if (!canBack) return;
+    const idx = history.cursor - 1;
+    setHistory({ ...history, cursor: idx });
+    browse(history.stack[idx], { pushHistory: false });
+  };
+  const goForward = () => {
+    if (!canForward) return;
+    const idx = history.cursor + 1;
+    setHistory({ ...history, cursor: idx });
+    browse(history.stack[idx], { pushHistory: false });
+  };
+  const goUp = () => {
+    if (!data?.parent) return;
+    browse(data.parent);
+  };
+  const onAddressSubmit = (ev) => {
+    ev?.preventDefault?.();
+    const p = (input || '').trim();
+    setEditing(false);
+    if (p && p !== path) browse(p);
+  };
+
+  if (!data) {
+    return html`<div class="filex"><div class="filex-loading">Loading…</div></div>`;
+  }
+
+  // Build breadcrumb segments. Windows-style: "C:\Users\Admin\foo" →
+  // [C:, Users, Admin, foo] with each segment clickable.
+  const segments = breadcrumbSegments(data.path);
+
+  return html`
+    <div class="filex">
+      <div class="filex-toolbar">
+        <div class="filex-navbtns">
+          <button class="filex-navbtn" title="Back" disabled=${!canBack} onClick=${goBack}>
+            <${IconChevronLeft} />
+          </button>
+          <button class="filex-navbtn" title="Forward" disabled=${!canForward} onClick=${goForward}>
+            <${IconChevronRight} />
+          </button>
+          <button class="filex-navbtn" title="Up" disabled=${!data.parent} onClick=${goUp}>
+            <${IconChevronUp} />
+          </button>
+        </div>
+
+        ${editing ? html`
+          <form class="filex-address-edit" onSubmit=${onAddressSubmit}>
+            <input class="filex-address-input mono" value=${input}
+                   autoFocus
+                   onInput=${(e) => setInput(e.target.value)}
+                   onBlur=${onAddressSubmit}
+                   onKeyDown=${(e) => { if (e.key === 'Escape') { setInput(data.path); setEditing(false); } }}
+                   spellcheck="false" />
+          </form>
+        ` : html`
+          <div class="filex-breadcrumb"
+               onClick=${(e) => { if (e.target === e.currentTarget) { setInput(data.path); setEditing(true); } }}>
+            ${segments.map((seg, i) => html`
+              <button key=${seg.path} class="filex-crumb"
+                      title=${seg.path}
+                      onClick=${() => browse(seg.path)}>
+                ${i === 0 && seg.label.match(/^[a-z]:\\?$/i) ? null : null}
+                ${seg.label}
+              </button>
+              ${i < segments.length - 1
+                ? html`<span class="filex-crumb-sep" aria-hidden="true">›</span>`
+                : null}
+            `)}
+            <button class="filex-address-edit-btn" title="Edit path"
+                    onClick=${() => { setInput(data.path); setEditing(true); }}>
+              <${IconPencil} />
+            </button>
+          </div>
+        `}
+      </div>
+
+      <div class="filex-body">
+        <aside class="filex-side">
+          <div class="filex-side-label">Quick access</div>
+          ${(data.starts || []).map((s) => html`
+            <button key=${s.path} class=${`filex-side-item${path === s.path ? ' is-active' : ''}`}
+                    onClick=${() => browse(s.path)}
+                    title=${s.path}>
+              <span class="filex-side-icon">
+                ${s.label === 'Home' ? html`<${IconHome} />` : html`<${IconFolder} />`}
+              </span>
+              <span class="filex-side-name">${s.label}</span>
+            </button>`)}
+        </aside>
+
+        <div class="filex-main">
+          ${!data.exists ? html`
+            <div class="filex-empty">Directory not found.</div>
+          ` : html`
+            <div class="filex-list">
+              ${data.entries.length === 0 ? html`
+                <div class="filex-empty">This folder is empty.</div>
+              ` : data.entries.map((e) => html`
+                <button key=${e.path} class="filex-row"
+                        onDblClick=${() => browse(e.path)}
+                        onClick=${() => select(e.path)}
+                        data-active=${path === e.path}>
+                  <span class="filex-row-icon"><${IconFolder} /></span>
+                  <span class="filex-row-name">${e.name}</span>
+                </button>`)}
+            </div>`}
+        </div>
+      </div>
+
+      <div class="filex-foot">
+        <span class="filex-foot-current mono" title=${path}>${path || ' '}</span>
+      </div>
+    </div>`;
+}
+
+// "C:\Users\Admin\foo" → [{label:'C:', path:'C:\\'}, {label:'Users', path:'C:\\Users'}, …]
+// "/home/me/foo"        → [{label:'/',  path:'/'},   {label:'home',  path:'/home'},      …]
+function breadcrumbSegments(p) {
+  if (!p) return [];
+  // Windows: split on backslash. Posix: forward slash.
+  const isWin = /^[a-zA-Z]:[\\/]/.test(p);
+  const sep = isWin ? '\\' : '/';
+  const norm = p.replace(/[\\\/]+/g, sep);
+  const parts = norm.split(sep).filter(Boolean);
+  const segs = [];
+  if (isWin) {
+    // first part is drive like "C:"
+    let acc = parts[0] + sep;
+    segs.push({ label: parts[0], path: acc });
+    for (let i = 1; i < parts.length; i++) {
+      acc = (acc.endsWith(sep) ? acc.slice(0, -1) : acc) + sep + parts[i];
+      segs.push({ label: parts[i], path: acc });
+    }
+  } else {
+    let acc = '';
+    segs.push({ label: '/', path: '/' });
+    for (const part of parts) {
+      acc = acc + sep + part;
+      segs.push({ label: part, path: acc });
+    }
+  }
+  return segs;
+}

package/public/js/components/EntityFormModal.js

@@ -0,0 +1,105 @@
+// Generic create/edit form rendered inside a Modal. Field shape mirrors
+// the createFields prop used by Picker.js so the same field-definition
+// objects power both the inline-create-in-popover flow and the standalone
+// edit flow used from Configure.
+//
+// Usage:
+//   <${EntityFormModal}
+//     title="Edit CLI"
+//     fields=${cliFields}
+//     initial=${currentValues}
+//     onSubmit=${async (values) => { ... }}
+//     onClose=${close} />
+
+import { html } from '../html.js';
+import { useState } from 'preact/hooks';
+import { Modal } from './Modal.js';
+
+export function EntityFormModal({
+  title, fields, initial = {}, submitLabel = 'Save',
+  readOnlyKeys = [],
+  onSubmit, onClose, danger,
+}) {
+  const [draft, setDraft] = useState(() => ({ ...initialFrom(fields), ...initial }));
+  const [saving, setSaving] = useState(false);
+
+  const isReadOnly = (key) => readOnlyKeys.includes(key);
+
+  const submit = async (ev) => {
+    ev?.preventDefault?.();
+    for (const f of fields) {
+      if (f.required && !String(draft[f.key] || '').trim()) return;
+    }
+    setSaving(true);
+    try { await onSubmit?.(draft); onClose?.(); }
+    catch { /* caller toasts; stay open */ }
+    finally { setSaving(false); }
+  };
+
+  return html`
+    <${Modal} title=${title} onClose=${onClose} width=${440}>
+      <form class="entity-form" onSubmit=${submit}>
+        ${fields.map((f) => html`
+          <label class="entity-field" key=${f.key}>
+            <span class="entity-field-label">${f.label}</span>
+            ${f.type === 'select' ? html`
+              <select class="input" value=${draft[f.key] || ''}
+                      disabled=${isReadOnly(f.key)}
+                      onChange=${(e) => {
+                        const next = { ...draft, [f.key]: e.target.value };
+                        const sideEffects = f.onChange?.(e.target.value, next);
+                        setDraft(sideEffects ? { ...next, ...sideEffects } : next);
+                      }}>
+                ${(f.options || []).map((opt) => html`
+                  <option value=${opt.value}>${opt.label}</option>`)}
+              </select>
+            ` : f.type === 'iconRadio' ? html`
+              <div class=${`icon-radio${isReadOnly(f.key) ? ' is-disabled' : ''}`}>
+                ${(f.options || []).map((opt) => html`
+                  <button type="button" key=${opt.value}
+                          class=${`icon-radio-opt${draft[f.key] === opt.value ? ' is-active' : ''}`}
+                          disabled=${isReadOnly(f.key)}
+                          onClick=${() => {
+                            if (isReadOnly(f.key)) return;
+                            const next = { ...draft, [f.key]: opt.value };
+                            const sideEffects = f.onChange?.(opt.value, next);
+                            setDraft(sideEffects ? { ...next, ...sideEffects } : next);
+                          }}>
+                    ${opt.icon ? html`<span class="icon-radio-icon">${opt.icon}</span>` : null}
+                    <span>${opt.label}</span>
+                  </button>`)}
+              </div>
+            ` : f.type === 'checkbox' ? html`
+              <span class="entity-checkbox-row">
+                <input type="checkbox" checked=${!!draft[f.key]}
+                       disabled=${isReadOnly(f.key)}
+                       onChange=${(e) => setDraft({ ...draft, [f.key]: e.target.checked })} />
+                ${f.hint ? html`<span class="entity-field-hint">${f.hint}</span>` : null}
+              </span>
+            ` : html`
+              <input type=${f.type || 'text'}
+                     class=${`input${f.mono ? ' mono' : ''}`}
+                     placeholder=${f.placeholder || ''}
+                     value=${draft[f.key] || ''}
+                     readonly=${isReadOnly(f.key)}
+                     onInput=${(e) => setDraft({ ...draft, [f.key]: e.target.value })}
+                     autoFocus=${f.autoFocus && !isReadOnly(f.key)} />`}
+            ${f.hint && f.type !== 'checkbox' ? html`
+              <span class="entity-field-hint">${f.hint}</span>` : null}
+          </label>`)}
+        <div class="entity-form-actions">
+          <button type="button" class="action small subtle" onClick=${onClose}>Cancel</button>
+          <button type="submit" class=${`action small ${danger ? 'danger' : 'primary'}`}
+                  disabled=${saving}>
+            ${saving ? 'Saving…' : submitLabel}
+          </button>
+        </div>
+      </form>
+    </${Modal}>`;
+}
+
+function initialFrom(fields) {
+  const out = {};
+  for (const f of fields) out[f.key] = f.default ?? '';
+  return out;
+}

package/public/js/components/Modal.js

@@ -0,0 +1,51 @@
+// Centered modal dialog with backdrop. Closes via Esc, the corner X,
+// or a click on the backdrop.
+//
+//   <${Modal} onClose=${close} title="Choose CLI" width=${440}>
+//     ...body...
+//   </${Modal}>
+
+import { html } from '../html.js';
+import { useEffect, useRef } from 'preact/hooks';
+import { createPortal } from 'preact/compat';
+
+export function Modal({ title, width = 440, onClose, children }) {
+  const panelRef = useRef(null);
+
+  useEffect(() => {
+    const onKey = (ev) => { if (ev.key === 'Escape') onClose?.(); };
+    document.addEventListener('keydown', onKey, true);
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    return () => {
+      document.removeEventListener('keydown', onKey, true);
+      document.body.style.overflow = prev;
+    };
+  }, [onClose]);
+
+  const onBackdrop = (ev) => {
+    if (ev.target === ev.currentTarget) onClose?.();
+  };
+
+  return createPortal(
+    html`<div class="modal-backdrop" onMouseDown=${onBackdrop}>
+      <div ref=${panelRef} class="modal modal-picker"
+           style=${`width:${width}px;max-width:calc(100vw - 32px);`}
+           role="dialog" aria-modal="true">
+        ${title ? html`
+          <div class="modal-head">
+            <h2>${title}</h2>
+            <button class="modal-close" type="button"
+                    aria-label="Close" onClick=${onClose}>
+              <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+                <line x1="3" y1="3" x2="13" y2="13"/>
+                <line x1="13" y1="3" x2="3" y2="13"/>
+              </svg>
+            </button>
+          </div>` : null}
+        <div class="modal-body">${children}</div>
+      </div>
+    </div>`,
+    document.body
+  );
+}

package/public/js/components/OfflineBanner.js

@@ -1,9 +1,11 @@
-// Shown when the backend probe fails. The hosted frontend (running at
-// https://bakapiano.github.io/ccsm/v1/) can't spawn processes directly,
-// so we surface a ccsm://start link instead. Windows / OS will hand that
-// off to the registered protocol handler (ccsm.cmd), which spawns the
-// backend silently. Our health probe picks it up on the next tick and
-// the banner auto-hides.
+// Fullscreen overlay shown when the backend is offline. Blocks
+// interaction with the rest of the UI until backend comes back.
+//
+// The hosted frontend (https://bakapiano.github.io/ccsm/v1/) can't
+// spawn processes directly, so we surface a ccsm://start link instead.
+// Windows hands that off to the registered protocol handler
+// (ccsm.cmd), which spawns the backend silently. Our health probe
+// picks it up on the next tick and the overlay auto-hides.
 //
 // First click triggers a Windows confirmation dialog ("Open ccsm.cmd?").
 // User can check "Always allow" to suppress future prompts.
@@ -12,17 +14,13 @@ import { html } from '../html.js';
 import { useEffect, useState } from 'preact/hooks';
 import { serverHealth } from '../state.js';
 import { refreshAll } from '../api.js';
+import { BrandMark } from '../icons.js';
 
 export function OfflineBanner() {
   const h = serverHealth.value;
-  // "connecting" is the initial transient state — don't flash the banner
-  // until we've actually seen offline.
   const offline = h.state === 'offline';
   const [clicked, setClicked] = useState(false);
 
-  // When backend comes back online after the user tried to launch it,
-  // kick refreshAll so the page state catches up faster than the next
-  // 5s tick.
   useEffect(() => {
     if (h.state === 'online' && clicked) {
       refreshAll().catch(() => {});
@@ -33,20 +31,28 @@ export function OfflineBanner() {
   if (!offline) return null;
 
   return html`
-    <div class="offline-banner">
-      <div class="offline-banner-inner">
-        <span class="offline-dot" aria-hidden="true"></span>
-        <div class="offline-banner-text">
-          <strong>Backend not running.</strong>
-          <span class="muted-text">
-            Click Start to launch · Windows will ask once
-            (check "Always allow" to silence future prompts).
-          </span>
-        </div>
-        <div class="offline-banner-actions">
-          <a class="action primary" href="ccsm://start"
+    <div class="offline-overlay" role="dialog" aria-modal="true" aria-labelledby="offline-title">
+      <div class="offline-card">
+        <div class="offline-brand"><${BrandMark} /></div>
+        <h1 id="offline-title" class="offline-title">Backend not running</h1>
+        <p class="offline-copy">
+          ccsm's local backend isn't reachable. Click Start to launch it —
+          Windows may ask for permission once. Tick <em>Always allow</em>
+          to silence future prompts.
+        </p>
+        <div class="offline-actions">
+          <a class="action primary big" href="ccsm://start"
              onClick=${() => setClicked(true)}>Start ccsm</a>
         </div>
+        <details class="offline-fallback">
+          <summary>Don't have ccsm installed?</summary>
+          <div class="offline-fallback-body">
+            <p>Install once via npm, then come back here:</p>
+            <pre><code>npm i -g @bakapiano/ccsm</code></pre>
+            <p>Or run a one-shot trial without installing:</p>
+            <pre><code>npx @bakapiano/ccsm</code></pre>
+          </div>
+        </details>
       </div>
     </div>`;
 }

package/public/js/components/PageTitleBar.js

@@ -0,0 +1,13 @@
+// Thin page-title strip rendered at the top of every page's main panel.
+// Matches the sidebar collapse-toggle height so the eye sees a single
+// 28px-tall row spanning the top of the whole window.
+
+import { html } from '../html.js';
+
+export function PageTitleBar({ title, children }) {
+  return html`
+    <header class="page-title-bar">
+      <div class="page-title-bar-title">${title}</div>
+      ${children ? html`<div class="page-title-bar-actions">${children}</div>` : null}
+    </header>`;
+}

package/public/js/components/Picker.js

@@ -0,0 +1,179 @@
+// Unified picker used inside a Popover. Renders:
+//   - optional search box (filters items by `label` + `meta`)
+//   - scrollable item list (single or multi select)
+//   - footer "+ New <thing>" that expands an inline form
+//
+// items: [{ id, label, meta?, disabled? }]
+// onSelect(id) — single select. Closes popover.
+// onToggle(id, on) — multi select. Doesn't close.
+// selectedIds: Set<string> — for multi select highlight
+// selectedId: string — for single select highlight
+// onCreate(values) — async; returns the newly-created id (selected immediately
+//                    in single mode; added to selection in multi mode)
+// createFields: [{ key, label, type?, placeholder?, required? }]
+
+import { html } from '../html.js';
+import { useState, useRef, useEffect } from 'preact/hooks';
+import { IconSearch, IconPlus, IconClose } from '../icons.js';
+
+export function PickerPanel({
+  title,
+  items,
+  selectedId,
+  selectedIds,
+  multi = false,
+  showSearch = true,
+  emptyHint = 'Nothing yet.',
+  createLabel = '+ New',
+  createFields = [],
+  onSelect,
+  onToggle,
+  onCreate,
+  onClose,
+  dnd,
+}) {
+  const [q, setQ] = useState('');
+  const [creating, setCreating] = useState(false);
+  const [draft, setDraft] = useState(() => initialDraft(createFields));
+  const [saving, setSaving] = useState(false);
+  const searchRef = useRef(null);
+
+  useEffect(() => {
+    if (showSearch) searchRef.current?.focus();
+  }, [showSearch]);
+
+  const filtered = items.filter((it) => {
+    if (!q.trim()) return true;
+    const hay = (it.label + ' ' + (it.meta || '')).toLowerCase();
+    return hay.includes(q.trim().toLowerCase());
+  });
+
+  const submitCreate = async (ev) => {
+    ev?.preventDefault?.();
+    for (const f of createFields) {
+      if (f.required && !String(draft[f.key] || '').trim()) return;
+    }
+    setSaving(true);
+    try {
+      const id = await onCreate?.(draft);
+      setDraft(initialDraft(createFields));
+      setCreating(false);
+      if (id != null) {
+        if (multi) onToggle?.(id, true);
+        else { onSelect?.(id); onClose?.(); }
+      }
+    } catch (e) {
+      // Caller is expected to toast; we just stay open with the form
+      console.warn(e);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return html`
+    <div class="picker">
+      ${title ? html`<div class="picker-title">${title}</div>` : null}
+
+      ${showSearch ? html`
+        <div class="picker-search">
+          <span class="picker-search-icon"><${IconSearch} /></span>
+          <input ref=${searchRef} class="picker-search-input"
+                 placeholder="Search…" value=${q}
+                 onInput=${(e) => setQ(e.target.value)} />
+          ${q ? html`<button class="picker-search-clear" onClick=${() => setQ('')}>
+            <${IconClose} />
+          </button>` : null}
+        </div>` : null}
+
+      <div class="picker-list">
+        ${filtered.length === 0 ? html`
+          <div class="picker-empty">${q ? 'No matches.' : emptyHint}</div>
+        ` : filtered.map((it) => {
+          const isSel = multi ? selectedIds?.has(it.id) : selectedId === it.id;
+          const enableDnd = dnd && !it.disabled && !it.undraggable && !q.trim();
+          const rowProps = enableDnd ? dnd.rowProps(it.id) : {};
+          const handleProps = enableDnd ? dnd.handleProps(it.id) : {};
+          return html`
+            <div key=${it.id} class=${`picker-item-wrap${enableDnd ? ' is-draggable' : ''}`} ...${rowProps} ...${handleProps}>
+              ${enableDnd ? html`<span class="picker-item-grip" aria-hidden="true">⋮⋮</span>` : null}
+              <button type="button"
+                      class=${`picker-item${isSel ? ' is-selected' : ''}`}
+                      disabled=${it.disabled}
+                      onClick=${() => {
+                        if (multi) onToggle?.(it.id, !isSel);
+                        else { onSelect?.(it.id); onClose?.(); }
+                      }}>
+                ${it.icon ? html`<span class="picker-item-icon">${it.icon}</span>` : null}
+                <span class="picker-item-label">${it.label}</span>
+                ${it.meta ? html`<span class="picker-item-meta">${it.meta}</span>` : null}
+                ${isSel ? html`<span class="picker-item-check">✓</span>` : null}
+              </button>
+            </div>`;
+        })}
+      </div>
+
+      ${onCreate ? html`
+        <div class="picker-create">
+          ${!creating ? html`
+            <button class="picker-create-toggle" type="button"
+                    onClick=${() => setCreating(true)}>
+              <${IconPlus} />
+              <span>${createLabel}</span>
+            </button>
+          ` : html`
+            <form class="picker-create-form" onSubmit=${submitCreate}>
+              ${createFields.map((f) => html`
+                <label class="picker-field" key=${f.key}>
+                  <span class="picker-field-label">${f.label}</span>
+                  ${f.type === 'select' ? html`
+                    <select class="input" value=${draft[f.key] || ''}
+                            onChange=${(e) => {
+                              const next = { ...draft, [f.key]: e.target.value };
+                              const side = f.onChange?.(e.target.value, next);
+                              setDraft(side ? { ...next, ...side } : next);
+                            }}>
+                      ${(f.options || []).map((opt) => html`
+                        <option value=${opt.value}>${opt.label}</option>`)}
+                    </select>
+                  ` : f.type === 'iconRadio' ? html`
+                    <div class="icon-radio">
+                      ${(f.options || []).map((opt) => html`
+                        <button type="button" key=${opt.value}
+                                class=${`icon-radio-opt${draft[f.key] === opt.value ? ' is-active' : ''}`}
+                                onClick=${() => {
+                                  const next = { ...draft, [f.key]: opt.value };
+                                  const side = f.onChange?.(opt.value, next);
+                                  setDraft(side ? { ...next, ...side } : next);
+                                }}>
+                          ${opt.icon ? html`<span class="icon-radio-icon">${opt.icon}</span>` : null}
+                          <span>${opt.label}</span>
+                        </button>`)}
+                    </div>
+                  ` : html`
+                    <input type=${f.type || 'text'}
+                           class=${`input${f.mono ? ' mono' : ''}`}
+                           placeholder=${f.placeholder || ''}
+                           value=${draft[f.key] || ''}
+                           onInput=${(e) => setDraft({ ...draft, [f.key]: e.target.value })}
+                           autoFocus=${f.autoFocus} />`}
+                  ${f.hint ? html`<span class="picker-field-hint">${f.hint}</span>` : null}
+                </label>`)}
+              <div class="picker-create-actions">
+                <button type="button" class="action small subtle"
+                        onClick=${() => { setCreating(false); setDraft(initialDraft(createFields)); }}>
+                  Cancel
+                </button>
+                <button type="submit" class="action small primary" disabled=${saving}>
+                  ${saving ? 'Creating…' : 'Create'}
+                </button>
+              </div>
+            </form>`}
+        </div>` : null}
+    </div>`;
+}
+
+function initialDraft(fields) {
+  const out = {};
+  for (const f of fields) out[f.key] = f.default ?? '';
+  return out;
+}