@worca/app 1.2.0-rc.2 → 1.2.0

package/ui/public/ask-panel.mjs

@@ -85,6 +85,22 @@ export function shortcutLabel(win) {
   return /mac|iphone|ipad|ipod/i.test(platform) ? '⌘K' : 'Ctrl K';
 }
 
+/**
+ * Sheet geometry shared with style.css: .ask-dock{padding:0 28px 26px} and
+ * .ask-sheet{width:min(782px,100%);height:min(669px,calc(100% - 20px))}. The
+ * user's size is clamped to [minW×minH, dock inner box]. The floor IS the
+ * stylesheet default: the sheet grows from what it always was and never shrinks
+ * below it, so every layout the fixed-size sheet was designed around (the
+ * non-wrapping composer row, the popovers written in 100vh terms) still holds.
+ * Border-box px throughout — the sheet has no padding.
+ */
+export const ASK_SHEET_SIZE = Object.freeze({
+  defaultW: 782, defaultH: 669,
+  minW: 782, minH: 669,
+  dockPadX: 28, dockPadBottom: 26, topGap: 20,
+});
+const SIZE_KEY = 'worca-cc.ask.size';
+
 export function createAskPanel({ doc, win, fetch, sendWs, confirm, getPageContext, openNewPipeline, loadMarkdown, hljsLoader, storage, raf, now }) {
   const storedPick = readStoredModel();   // hoisted declaration (defined below); null when nothing is stored
   const st = {
@@ -109,6 +125,9 @@ export function createAskPanel({ doc, win, fetch, sendWs, confirm, getPageContex
     worktrees: [],            // P4 §10: the chat's open worktrees (snapshot-fed)
     pinned: true,
     prevFocus: null,
+    size: readStoredSize(),   // {w,h} the user's persisted sheet size (hoisted reader); null = stylesheet default
+    applied: null,            // {w,h} the inline size currently on the sheet (clamped); null = default
+    drag: null,               // the active resize gesture — see startResize()
     pendingFiles: [],
     sending: false,
     subscribedFor: null,
@@ -161,6 +180,32 @@ export function createAskPanel({ doc, win, fetch, sendWs, confirm, getPageContex
       else storage.removeItem('worca-cc.ask.thread');
     } catch { /* ignore */ }
   }
+  /** The persisted sheet size, or null when nothing usable is stored. Clamped later, against a live dock. */
+  function readStoredSize() {
+    try {
+      const raw = storage.getItem(SIZE_KEY);
+      const v = raw ? JSON.parse(raw) : null;
+      if (v && Number.isFinite(v.w) && Number.isFinite(v.h)) return { w: Math.round(v.w), h: Math.round(v.h) };
+    } catch { /* storage unavailable */ }
+    return null;
+  }
+  function storeSize(size) {
+    try {
+      if (size) storage.setItem(SIZE_KEY, JSON.stringify({ w: size.w, h: size.h }));
+      else storage.removeItem(SIZE_KEY);
+    } catch { /* ignore */ }
+  }
+
+  /**
+   * Size the composer textarea to its content, one line minimum, 120px maximum.
+   * Bound to the input event; every programmatic write to el.input.value (the
+   * post-send clear, appendToComposer) must call it too, since assignment
+   * fires no input event and the box would keep the previous draft's height.
+   */
+  function fitInput() {
+    el.input.style.height = 'auto';
+    el.input.style.height = `${Math.min(el.input.scrollHeight || 0, 120)}px`;
+  }
 
   // ---- tiny DOM helpers -----------------------------------------------------
   function make(tag, className, text) {
@@ -257,10 +302,12 @@ export function createAskPanel({ doc, win, fetch, sendWs, confirm, getPageContex
     el.jump.hidden = true;
     el.jump.addEventListener('click', jumpToLatest);
     sheet.appendChild(el.jump);
+    for (const edge of ['n', 'e', 'w', 'ne', 'nw']) sheet.appendChild(buildResizeHandle(edge));
     dock.appendChild(sheet);
     dock.appendChild(pill);
     el.pill = pill;
     el.sheet = sheet;
+    el.dock = dock;           // measured by dockInner(); `root` is TDZ here
     return dock;
   }
 
@@ -430,6 +477,7 @@ export function createAskPanel({ doc, win, fetch, sendWs, confirm, getPageContex
       // No provisional title from the prompt: the header keeps "Ask Worca" until
       // the ask-title frame lands (ask-model marks title dirty, flushExtra repaints).
       el.input.value = '';
+      fitInput();                                    // a programmatic clear fires no input event
       st.pendingFiles = [];
       renderChips();
       subscribe(id);
@@ -455,10 +503,7 @@ export function createAskPanel({ doc, win, fetch, sendWs, confirm, getPageContex
     el.input.addEventListener('keydown', (e) => {
       if (e.key === 'Enter' && !e.shiftKey && !e.isComposing) { e.preventDefault(); sendMessage(); }
     });
-    el.input.addEventListener('input', () => {
-      el.input.style.height = 'auto';
-      el.input.style.height = `${Math.min(el.input.scrollHeight || 0, 120)}px`;
-    });
+    el.input.addEventListener('input', fitInput);
     wrap.appendChild(el.input);
 
     el.composerMsg = make('div', 'ask-composer-msg');
@@ -581,6 +626,7 @@ export function createAskPanel({ doc, win, fetch, sendWs, confirm, getPageContex
     st.prevFocus = doc.activeElement;
     el.pill.hidden = true;
     el.sheet.hidden = false;
+    restoreSize();                                 // the sheet has a box now — clamp the stored size to the dock
     st.pinned = true;
     ensureFirstOpen();
     focusComposer();
@@ -598,8 +644,8 @@ export function createAskPanel({ doc, win, fetch, sendWs, confirm, getPageContex
     openSheet();                                   // no-op when already open…
     const cur = el.input.value;
     el.input.value = cur ? `${cur.replace(/\s*$/, '')}\n${add}` : add;
-    // …so the autosize listener and the focus have to be driven here.
-    el.input.dispatchEvent(new win.Event('input'));
+    // …so the autosize and the focus have to be driven here.
+    fitInput();
     focusComposer();
     try { el.input.selectionStart = el.input.selectionEnd = el.input.value.length; } catch { /* jsdom */ }
     return true;
@@ -619,6 +665,180 @@ export function createAskPanel({ doc, win, fetch, sendWs, confirm, getPageContex
 
   function toggleSheet() { (st.open ? closeSheet : openSheet)(); }
 
+  // ---- resize ---------------------------------------------------------------
+  // The sheet is a bottom-anchored, horizontally centred flex child of the dock,
+  // so a top-edge drag is a pure height change and a side drag grows the width
+  // symmetrically about the centre (each edge moves half the delta, which keeps
+  // the grabbed edge under the cursor). Sizes are border-box px applied as
+  // inline width/height, so the stylesheet's default rule stays byte-identical
+  // and its max-width/max-height backstop still bounds a stale inline size.
+  //
+  // A gesture ends on pointerup/pointercancel, and — like graph/composer.mjs —
+  // on window blur, lostpointercapture (the sheet was hidden, the capture was
+  // taken) and a pointermove that reports no button held (the release landed
+  // outside the window and never reached us). All of those COMMIT: a half-done
+  // resize is still a size the user chose, unlike a half-drawn wire. Escape is
+  // the one CANCEL: the pre-drag size comes back and nothing is stored. Only a
+  // gesture that actually moved persists, and only the axis it dragged — the
+  // other axis keeps the stored preference, so a click on a dock-clamped sheet
+  // can never write the clamp back over a larger preference.
+  function buildResizeHandle(edge) {
+    const h = make('div', `ask-resize ask-resize-${edge}`);
+    h.setAttribute('data-ask-resize', edge);
+    h.setAttribute('aria-hidden', 'true');
+    h.addEventListener('pointerdown', (e) => startResize(e, edge, h));
+    h.addEventListener('lostpointercapture', () => { if (st.drag && st.drag.handle === h) finishResize(); });
+    h.addEventListener('dblclick', (e) => { e.preventDefault(); resetSize(); });
+    return h;
+  }
+
+  /** The dock's content box in px; zeros when there is no layout (hidden, detached, jsdom). */
+  function dockInner() {
+    const d = el.dock;
+    const w = d ? d.clientWidth : 0;
+    const h = d ? d.clientHeight : 0;
+    return {
+      w: w > 0 ? w - 2 * ASK_SHEET_SIZE.dockPadX : 0,
+      h: h > 0 ? h - ASK_SHEET_SIZE.dockPadBottom - ASK_SHEET_SIZE.topGap : 0,
+    };
+  }
+
+  /** Clamp to [min, dock inner]. The dock bound wins when the two conflict (a narrow viewport). */
+  function clampSize(size) {
+    const inner = dockInner();
+    const maxW = inner.w > 0 ? inner.w : Infinity;
+    const maxH = inner.h > 0 ? inner.h : Infinity;
+    return {
+      w: Math.round(Math.min(Math.max(size.w, ASK_SHEET_SIZE.minW), maxW)),
+      h: Math.round(Math.min(Math.max(size.h, ASK_SHEET_SIZE.minH), maxH)),
+    };
+  }
+
+  /** Write the inline size, or clear it (null) so min(782px,100%) rules again. */
+  function applySize(size) {
+    if (size) {
+      el.sheet.style.width = `${size.w}px`;
+      el.sheet.style.height = `${size.h}px`;
+    } else {
+      el.sheet.style.removeProperty('width');
+      el.sheet.style.removeProperty('height');
+    }
+    st.applied = size;
+  }
+
+  /** Re-apply the persisted preference against the current dock — on open and on window resize. */
+  function restoreSize() {
+    applySize(st.size ? clampSize(st.size) : null);
+  }
+
+  /** The sheet's live border-box size; the applied/default size when there is no layout. */
+  function currentSize() {
+    const w = el.sheet.offsetWidth;
+    const h = el.sheet.offsetHeight;
+    if (w > 0 && h > 0) return { w, h };
+    return st.applied ? { w: st.applied.w, h: st.applied.h } : { w: ASK_SHEET_SIZE.defaultW, h: ASK_SHEET_SIZE.defaultH };
+  }
+
+  function startResize(e, edge, handle) {
+    if (st.drag || st.destroyed || (e.button != null && e.button !== 0)) return;
+    const start = currentSize();
+    st.drag = {
+      edge, handle, pointerId: e.pointerId, x: e.clientX, y: e.clientY, w: start.w, h: start.h,
+      moved: false,                                  // set by the first pointermove that applies a size
+      before: st.applied ? { w: st.applied.w, h: st.applied.h } : null,   // what Escape restores
+    };
+    handle.classList.add('is-active');
+    el.sheet.classList.add('is-resizing');
+    // Capture is a bonus, never a precondition (Chrome throws for a synthetic
+    // pointerId; jsdom has no such method) — the document listeners carry the
+    // gesture either way, exactly like graph/composer.mjs.
+    try { handle.setPointerCapture?.(e.pointerId); } catch { /* synthetic pointer */ }
+    doc.addEventListener('pointermove', onResizeMove);
+    doc.addEventListener('pointerup', onResizeEnd);
+    doc.addEventListener('pointercancel', onResizeEnd);
+    win.addEventListener('blur', onResizeBlur);
+    e.preventDefault();                              // no text selection / focus steal mid-drag
+  }
+
+  function samePointer(g, e) {
+    return g.pointerId == null || e.pointerId == null || e.pointerId === g.pointerId;
+  }
+
+  function onResizeMove(e) {
+    const g = st.drag;
+    if (!g || !samePointer(g, e)) return;
+    if (e.buttons === 0) { finishResize(); return; }   // the release never reached us
+    g.moved = true;
+    const dx = e.clientX - g.x;
+    const dy = e.clientY - g.y;
+    let w = g.w;
+    let h = g.h;
+    if (g.edge === 'w' || g.edge === 'nw') w = g.w - 2 * dx;                  // left edge: leftwards grows
+    if (g.edge === 'e' || g.edge === 'ne') w = g.w + 2 * dx;                  // right edge: rightwards grows
+    if (g.edge === 'n' || g.edge === 'ne' || g.edge === 'nw') h = g.h - dy;   // top edge: upwards grows
+    applySize(clampSize({ w, h }));
+  }
+
+  function onResizeEnd(e) {
+    const g = st.drag;
+    if (!g || !samePointer(g, e)) return;
+    finishResize();
+  }
+
+  function onResizeBlur() { finishResize(); }
+
+  /** Idempotent; also run from destroy() so a mid-drag unmount leaves no document listeners. */
+  function finishResize() {
+    const g = endResize();
+    if (!g || !g.moved || !st.applied) return;
+    // Persist the dragged axis only; the other keeps the stored preference (or,
+    // with none stored, the size it had) — the clamp is never written back.
+    const movesW = g.edge !== 'n';
+    const movesH = g.edge !== 'e' && g.edge !== 'w';
+    const prev = st.size;
+    st.size = {
+      w: movesW || !prev ? st.applied.w : prev.w,
+      h: movesH || !prev ? st.applied.h : prev.h,
+    };
+    storeSize(st.size);
+  }
+
+  /** Escape: the pre-drag size comes back and nothing is stored. */
+  function cancelResize() {
+    const g = endResize();
+    if (!g) return;
+    applySize(g.before);
+  }
+
+  /** Tear the gesture down (listeners, classes, capture) and hand it back; null when none. */
+  function endResize() {
+    const g = st.drag;
+    if (!g) return null;
+    st.drag = null;
+    doc.removeEventListener('pointermove', onResizeMove);
+    doc.removeEventListener('pointerup', onResizeEnd);
+    doc.removeEventListener('pointercancel', onResizeEnd);
+    win.removeEventListener('blur', onResizeBlur);
+    g.handle.classList.remove('is-active');
+    el.sheet.classList.remove('is-resizing');
+    try { if (g.handle.hasPointerCapture?.(g.pointerId)) g.handle.releasePointerCapture(g.pointerId); } catch { /* already gone */ }
+    return g;
+  }
+
+  /** Double-click on any grip: back to the stylesheet default and forget the stored size. */
+  function resetSize() {
+    finishResize();
+    st.size = null;
+    applySize(null);
+    storeSize(null);
+  }
+
+  /** Window resize or dock resize (the rail toggling, the dock's slide): re-clamp — never under a held pointer. */
+  function onWinResize() {
+    if (st.destroyed || !st.open || !st.size || st.drag) return;
+    restoreSize();
+  }
+
   // ---- keyboard + pointer routing ------------------------------------------
   function containsNode(rootEl, t) { return !!(t && t.nodeType && rootEl.contains(t)); }
 
@@ -633,6 +853,7 @@ export function createAskPanel({ doc, win, fetch, sendWs, confirm, getPageContex
 
   function onDocKeydown(e) {
     if (st.destroyed) return;
+    if (st.drag && e.key === 'Escape') { e.preventDefault(); cancelResize(); return; }
     if (isToggleCombo(e)) {
       if (e.repeat || e.isComposing) return;
       e.preventDefault();
@@ -829,8 +1050,9 @@ export function createAskPanel({ doc, win, fetch, sendWs, confirm, getPageContex
     };
     const list = st.catalog && Array.isArray(st.catalog.models) ? st.catalog.models : [];
     const wantedEntry = catalogEntry(wanted.model);
-    // Unknown stored/default id -> the backend default -> the first model we do have.
-    const entry = wantedEntry || catalogEntry(fallback.model) || list[0] || null;
+    // Unknown stored/default id -> the backend default -> the first model we do
+    // have that is not a hidden built-in (#422; a hidden id is still a valid pick).
+    const entry = wantedEntry || catalogEntry(fallback.model) || list.find((m) => m && !m.hidden) || list[0] || null;
     if (!entry) { updatePickerButton(); return; }  // empty catalog: keep what we have
     const effort = wantedEntry ? wanted.effort : fallback.effort;
     const next = { model: entry.id, effort: coerceEffort(entry, effort) };
@@ -885,6 +1107,7 @@ export function createAskPanel({ doc, win, fetch, sendWs, confirm, getPageContex
     const seen = new Set();
     for (const m of st.catalog ? st.catalog.models : []) {
       if (!m || typeof m.id !== 'string') continue;
+      if (m.hidden && m.id !== st.picker.model) continue;         // hidden built-in (#422); the current pick stays
       if (m.custom === 'global') { primary.push(m); continue; }   // user models are never demoted
       const fam = familyKey(m);
       // The picked model always shows up front so its ✓ is visible and it is one click away.
@@ -2102,15 +2325,26 @@ export function createAskPanel({ doc, win, fetch, sendWs, confirm, getPageContex
   const root = buildRoot();
   doc.addEventListener('keydown', onDocKeydown, true);
   doc.addEventListener('pointerdown', onDocPointerdown, true);
+  win.addEventListener('resize', onWinResize);
+  // The rail collapsing changes the dock width by 222px with no window resize;
+  // observe the dock itself (guarded: jsdom has no ResizeObserver — P5's idiom).
+  let dockRo = null;
+  if (typeof win.ResizeObserver === 'function') {
+    dockRo = new win.ResizeObserver(onWinResize);
+    dockRo.observe(el.dock);
+  }
 
   function destroy() {
     if (st.destroyed) return;
     st.destroyed = true;
+    finishResize();                                  // a mid-drag unmount leaves no document listeners
     closePopover({ focusTrigger: false });
     if (st.elapsedTimer) { clearInterval(st.elapsedTimer); st.elapsedTimer = null; }
     if (el.orb) el.orb.stop();
     doc.removeEventListener('keydown', onDocKeydown, true);
     doc.removeEventListener('pointerdown', onDocPointerdown, true);
+    win.removeEventListener('resize', onWinResize);
+    if (dockRo) { dockRo.disconnect(); dockRo = null; }
     root.remove();
   }
 

package/ui/public/export-slug.mjs

@@ -0,0 +1,30 @@
+// ui/public/export-slug.mjs
+// Pure, DOM-free slug logic for the Export-to-Claude-Code modal, in its own module so
+// it can be unit-tested (and drift-guarded against src/core/skills.mjs isValidSkillName)
+// without importing the whole browser app. app.js imports exportSlugPreview from here.
+
+// slugifyLocal(s) -> mirrors src/core/artifacts.mjs slugify so the export modal previews
+// the same default slug the server would derive from a workflow name.
+export function slugifyLocal(s) {
+  const out = String(s ?? '')
+    .normalize('NFKD')
+    .replace(/[̀-ͯ]/g, '') // strip combining marks
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/-{2,}/g, '-')
+    .replace(/^-+|-+$/g, '');
+  return out || 'untitled';
+}
+
+// exportSlugPreview(rawSlug, workflowName) -> { slug, preview, valid }
+// An explicit slug is used verbatim (and must be a valid skill name); otherwise the
+// workflow name is slugified and capped at 48. `preview` is the "/<slug>" the user types.
+export function exportSlugPreview(rawSlug, workflowName) {
+  const explicit = typeof rawSlug === 'string' && rawSlug.trim();
+  const slug = explicit ? rawSlug.trim() : (slugifyLocal(workflowName).slice(0, 48) || 'workflow');
+  // MUST stay in step with isValidSkillName in src/core/skills.mjs — the core's assertName
+  // rejects on Apply what this reports invalid. skills.mjs pulls node:fs so it cannot be
+  // imported in the browser; export-slug.test.mjs guards these two against drift.
+  const valid = /^[A-Za-z0-9._-]+$/.test(slug) && slug !== '.' && slug !== '..';
+  return { slug, preview: `/${slug}`, valid };
+}

package/ui/public/graph/composer.mjs

@@ -175,12 +175,33 @@ export function createComposer(hostEls, { doc = globalThis.document, api, raf =
     paintInspector();
     if (hooks.onRender) hooks.onRender();
   }
+  /** A canvas nobody has touched: the two bookends, no wires, no edits. */
+  function isPristine() {
+    return !dirty && tpl.wires.length === 0 && tpl.nodes.length === 2
+      && tpl.nodes.every((n) => n.kind === 'task' || n.kind === 'end');
+  }
   function paintChrome() {
+    // "Unfinished" (a mandatory port still to wire — validate.mjs flags those
+    // `incomplete`) is not "wrong". Save is gated by BOTH, but only real mistakes
+    // earn the red chip; unfinished wiring gets a quiet to-do chip, and a canvas
+    // nobody has touched yet shows no chip at all — a fresh drawing has nothing
+    // to shout about.
     const n = lastReport.errors.length;
-    if (hostEls.saveBtn) hostEls.saveBtn.disabled = n > 0 || !ready;
+    const real = lastReport.errors.filter((e) => !e.incomplete).length;
+    const todo = n - real;
+    if (hostEls.saveBtn) {
+      hostEls.saveBtn.disabled = n > 0 || !ready;
+      hostEls.saveBtn.title = real
+        ? 'Fix the errors to save'
+        : todo ? 'Wire Task → … → End to save' : '';
+    }
     if (hostEls.errors) {
-      hostEls.errors.hidden = n === 0;
-      hostEls.errors.textContent = n ? `${n} error${n === 1 ? '' : 's'}` : '';
+      const quiet = !real && todo > 0 && !isPristine();
+      hostEls.errors.hidden = !real && !quiet;
+      hostEls.errors.classList.toggle('is-incomplete', quiet);
+      hostEls.errors.textContent = real
+        ? `${real} error${real === 1 ? '' : 's'}`
+        : quiet ? `${todo} port${todo === 1 ? '' : 's'} to wire` : '';
     }
   }
 

package/ui/public/graph/inspector.mjs

@@ -93,8 +93,11 @@ export function renderNodeInspector(node, { template, portsFn, meta = null, mode
 
   if (node.kind === 'agent') {
     root.appendChild(head(doc, (meta && meta.displayName) || node.key || node.id, `${node.key} · ${node.id}`));
+    // Hidden built-ins (#422) leave the list unless one is THIS node's stored
+    // pick — it still resolves at run time and must stay visible here.
+    const offered = models.filter((m) => m && (!m.hidden || m.id === node.config.model));
     body.appendChild(select(doc, 'ins-model', 'model', 'Model',
-      [{ value: '', text: 'inherit' }, ...models.map((m) => ({ value: m.id, text: m.label || m.id }))], node.config.model));
+      [{ value: '', text: 'inherit' }, ...offered.map((m) => ({ value: m.id, text: m.label || m.id }))], node.config.model));
     body.appendChild(select(doc, 'ins-effort', 'effort', 'Effort',
       [{ value: '', text: 'default' }, ...efforts.map((e) => ({ value: e, text: e }))], node.config.effort));
     if (meta && meta.fanOut) {

package/ui/public/index.html

@@ -975,7 +975,17 @@
           <section class="card gv-saved">
             <div class="saved-head">
               <div><b>Saved pipelines</b><span class="cnt" id="gv-saved-count"></span></div>
+              <!-- Import a workflow another Worca user shared as JSON (#421): the
+                   file goes through POST /api/workflows/import-json — the same validator
+                   the composer's Save uses; a taken name gets a " (2)" suffix. -->
+              <div class="saved-head-actions">
+                <button type="button" id="gv-import-btn" class="btn btn-ghost btn-mini" title="Import a pipeline shared as a JSON file">Import…</button>
+                <input id="gv-import-file" type="file" accept=".json,application/json" hidden />
+              </div>
             </div>
+            <!-- One tab per domain; the row itself no longer repeats the domain.
+                 Rendered by gvRenderSaved(); hidden while the library is empty. -->
+            <div class="gv-saved-tabs" id="gv-saved-tabs" role="tablist" aria-label="Pipeline domains" hidden></div>
             <div class="saved-list" id="gv-saved-list"></div>
             <div class="gv-archived" id="gv-archived" hidden></div>
             <!-- A refused DELETE (the built-in, a 404, a 500) has to land
@@ -1014,12 +1024,12 @@
             <section class="card settings-card">
               <div class="field">
                 <div class="label-row">
-                  <label for="settingsRoot">Worca CC root folder</label>
-                  <button type="button" class="info-tip" aria-label="About Worca CC root folder">i<span class="tip-content hidden">
-                    The folder under which Worca CC keeps its data &mdash; a <code>.worca-cc/</code> directory holding the
+                  <label for="settingsRoot">Worca root folder</label>
+                  <button type="button" class="info-tip" aria-label="About Worca root folder">i<span class="tip-content hidden">
+                    The folder under which Worca keeps its data &mdash; a <code>.worca-cc/</code> directory holding the
                     history store, the project list, and saved workflows. Leave empty to use the default.
                     Changes apply to new runs immediately. Changing the root does <b>not</b> move existing
-                    data: Worca CC starts a fresh <code>.worca-cc/</code> under the new folder; history under
+                    data: Worca starts a fresh <code>.worca-cc/</code> under the new folder; history under
                     the old root is left in place.
                   </span></button>
                 </div>
@@ -1146,6 +1156,39 @@
               </div>
             </section>
 
+            <!-- Title generation (#422): which model writes run/chat titles.
+                 Empty = the model of the run or chat itself (title.mjs
+                 resolveTitleModel), so a first-party-free install needs no setup.
+                 The select is built from the project-less catalog; a stored id
+                 that left the catalog paints disabled + "not installed". -->
+            <section class="card settings-card" id="title-model-settings-card">
+              <div class="card-head">
+                <div class="label-row">
+                  <h2>Title generation</h2>
+                  <button type="button" class="info-tip" aria-label="About title generation">i<span class="tip-content hidden">
+                    Every run and chat gets a short LLM-written title. By default it is written by the
+                    model the run or chat itself uses, so an install without a first-party Anthropic
+                    account needs no setup here. Pick a model to write every title with it instead;
+                    the change applies to the next title, no restart. A non-empty
+                    <code>WORCA_TITLE_MODEL</code> in the environment overrides this setting.
+                  </span></button>
+                </div>
+              </div>
+              <div class="field">
+                <div class="label-row">
+                  <label for="titleModel">Model</label>
+                </div>
+                <select id="titleModel" class="select" aria-label="Title model"></select>
+              </div>
+              <small class="hint" id="titleModelEnvNote"></small>
+              <div class="add-project-actions" style="margin-top:14px">
+                <button type="button" id="titleModelTest" class="btn btn-ghost btn-mini" title="Send one tiny prompt to the selected model">Test</button>
+                <button type="button" id="titleModelReset" class="btn btn-ghost btn-mini">Use default</button>
+                <button type="button" id="titleModelSave" class="btn btn-primary btn-mini">Save</button>
+              </div>
+              <small class="hint" id="titleModelMsg"></small>
+            </section>
+
             <!-- Spawn-debug diagnostics: the stored side of WORCA_DEBUG_SPAWN.
                  claude-runner.mjs reads the setting per spawn (UI server AND CLI);
                  a non-empty env var overrides it. This card only flips the gate —
@@ -1188,6 +1231,26 @@
               </div>
               <small class="hint" id="chatSettingsMsg"></small>
             </section>
+
+            <!-- About: intentionally no info-tip and no .hint (test/ui-settings-tooltips.test.mjs pins both). -->
+            <section class="card settings-card" id="about-card">
+              <div class="label-row">
+                <h2>About</h2>
+              </div>
+              <div class="about-row">
+                <span class="about-key">Version</span>
+                <!-- href is painted from app.releaseUrl (the worca-app-v<version> tag);
+                     without one the anchor is plain text, so the placeholder never links. -->
+                <a class="about-val about-version" id="aboutVersion"
+                   target="_blank" rel="noopener noreferrer">&mdash;</a>
+              </div>
+              <div class="about-row">
+                <span class="about-key">Repository</span>
+                <a class="about-val about-link" id="aboutRepoLink"
+                   href="https://github.com/SinishaDjukic/worca-cc"
+                   target="_blank" rel="noopener noreferrer">github.com/SinishaDjukic/worca-cc</a>
+              </div>
+            </section>
           </section>
           <!-- /pane general -->
 
@@ -1243,7 +1306,7 @@
             <p id="plugins-msg" class="form-msg" aria-live="polite"></p>
             <div class="card hidden" id="marketplace-add-row" style="padding:16px 20px;margin-bottom:14px">
               <div class="path-row">
-                <input id="marketplace-url" class="input" type="text" placeholder="https://github.com/owner/repo · owner/repo · /abs/path/to/repo" spellcheck="false" />
+                <input id="marketplace-url" class="input" type="text" placeholder="https://github.com/owner/repo · owner/repo · /abs/path/to/repo · /path/to/a/plugin-folder" spellcheck="false" />
                 <button type="button" id="marketplace-add" class="btn btn-primary btn-mini">Add</button>
               </div>
             </div>
@@ -1311,6 +1374,89 @@
       </div>
     </div>
 
+    <!-- ===== Export workflow → Claude Code skill modal ===== -->
+    <div id="export-modal" class="viewer-modal hidden" role="dialog" aria-modal="true" aria-labelledby="export-title">
+      <div class="card">
+        <div class="card-head">
+          <h2 id="export-title">Export pipeline</h2>
+        </div>
+        <p id="export-subtitle" class="confirm-message"></p>
+        <!-- The form; swapped for #export-done after a successful export. -->
+        <div id="export-form">
+        <!-- ONE Export… entry point per row; the dialog asks for the format first.
+             json = the saved graph as a file another Worca user imports (#421);
+             skill = a runnable Claude Code skill under .claude/ (#403);
+             plugin = a Worca plugin folder bundling agents + skills (#421). -->
+        <div class="export-field">
+          <span class="export-label">Format</span>
+          <div id="export-format" class="seg" role="group" aria-label="Export format">
+            <button type="button" class="seg-btn on" data-format="json">JSON file</button>
+            <button type="button" class="seg-btn" data-format="skill">Claude Code skill</button>
+            <button type="button" class="seg-btn" data-format="plugin">Worca plugin</button>
+          </div>
+          <span id="export-format-hint" class="hint"></span>
+        </div>
+        <div id="export-dest-field" class="export-field hidden">
+          <span class="export-label">Location</span>
+          <div id="export-dest" class="seg" role="group" aria-label="Skill location">
+            <button type="button" class="seg-btn on" data-dest="global">Global (~/.claude)</button>
+            <button type="button" class="seg-btn" data-dest="project">Project folder</button>
+          </div>
+        </div>
+        <div id="export-folder-field" class="export-field hidden">
+          <span class="export-label" id="export-folder-label">Folder</span>
+          <div class="export-folder-row">
+            <input type="text" id="export-folder" class="input" placeholder="/path/to/repo" />
+            <button type="button" id="export-browse" class="btn btn-ghost btn-mini">Browse…</button>
+          </div>
+        </div>
+        <div id="export-plugin-field" class="export-field hidden">
+          <span class="export-label">Plugin name</span>
+          <input type="text" id="export-plugin-name" class="input" placeholder="(defaults to the folder name)" />
+          <!-- Live: what the manifest will actually be called — kebab-case, derived
+               from the typed name or, when blank, from the folder's basename. -->
+          <span id="export-plugin-name-preview" class="hint"></span>
+          <!-- Re-export only: a changed export into an existing plugin folder bumps
+               the manifest's patch version (0.1.0 → 0.1.1) so the recipient's
+               `worca plugin update` sees it. A first export is always 0.1.0. -->
+          <label class="confirm-checkbox">
+            <input type="checkbox" id="export-keep-version" />
+            <span>Don't bump the plugin version when updating an existing plugin folder<br><span class="hint">A changed re-export normally goes 0.1.0 → 0.1.1 so recipients see an update. A first export is always 0.1.0.</span></span>
+          </label>
+        </div>
+        <div class="export-field" id="export-slug-field">
+          <span class="export-label">Slug</span>
+          <input type="text" id="export-slug" class="input" placeholder="(defaults to the workflow name)" />
+          <span id="export-slug-preview" class="hint"></span>
+        </div>
+        <label class="confirm-checkbox" id="export-agents-field">
+          <input type="checkbox" id="export-include-agents" checked />
+          <span>Include referenced agents (recommended)</span>
+        </label>
+        <div id="export-plan" class="export-plan hidden"></div>
+        <p id="export-msg" class="confirm-message"></p>
+        </div>
+        <!-- Result view: what was written, where, and the next step for the format.
+             Replaces the form (not a second dialog) once an export succeeded. -->
+        <div id="export-done" class="export-done hidden" role="status" aria-live="polite">
+          <div class="export-done-head">
+            <span class="export-done-check" aria-hidden="true">✓</span>
+            <b id="export-done-title"></b>
+          </div>
+          <dl id="export-done-lines" class="export-done-lines"></dl>
+          <p id="export-done-next" class="export-done-next"></p>
+        </div>
+        <div class="confirm-actions">
+          <button type="button" id="export-cancel" class="btn btn-ghost btn-mini">Cancel</button>
+          <!-- Preview = dry run (optional). Export runs the dry run itself and writes
+               unless it hits a conflict, which it then shows for per-file resolution. -->
+          <button type="button" id="export-plan-btn" class="btn btn-ghost btn-mini">Preview</button>
+          <button type="button" id="export-apply-btn" class="btn btn-primary btn-mini">Export</button>
+          <button type="button" id="export-done-close" class="btn btn-primary btn-mini hidden">Done</button>
+        </div>
+      </div>
+    </div>
+
     <!-- ===== "Ship it?" PR confirm modal (History detail) ===== -->
     <!-- No z-index of its own: #confirm-modal.viewer-modal{z-index:60} (style.css:781)
          exists because #confirm-modal precedes #plugin-modal in the DOM, and this