@worca/app 1.2.0-rc.2 → 1.2.0

package/ui/public/models-view.mjs

@@ -77,7 +77,7 @@ export function suggestDuplicateId(id, takenIds = []) {
  * `globals` come MASKED from GET /api/models. `predefinedShadowedIds` marks
  * built-ins currently overridden by a global entry.
  */
-export function renderModelsList({ globals = [], legacy = [], plugins = [], predefined = [], efforts = [], projectName = '' } = {}, { doc = globalThis.document } = {}) {
+export function renderModelsList({ globals = [], legacy = [], plugins = [], predefined = [], efforts = [], hideBuiltin = false, projectName = '' } = {}, { doc = globalThis.document } = {}) {
   const root = h(doc, 'div', 'mv-list');
   const predefLc = new Set(predefined.map((m) => m.id.toLowerCase()));
   const pluginLc = new Set(plugins.map((m) => m.id.toLowerCase()));
@@ -89,6 +89,30 @@ export function renderModelsList({ globals = [], legacy = [], plugins = [], pred
     return s;
   };
 
+  // The endpoint-routed badge (#422): honest disclosure that worca points the
+  // CLI's internal haiku/sonnet/opus/fable lookups at this model's own id
+  // (config.mjs#resolveModelEnv), so nothing falls back to the Anthropic API.
+  // The masked env still carries its KEYS, so presence is decidable here.
+  const routedBadge = (m) => {
+    if (!m.env || !Object.prototype.hasOwnProperty.call(m.env, 'ANTHROPIC_BASE_URL')) return null;
+    const b = h(doc, 'span', 'badge waiting mv-routed', 'endpoint-routed');
+    b.title = "worca points Claude Code's internal haiku/sonnet/opus/fable lookups at this model, so it never falls back to the Anthropic API.";
+    return b;
+  };
+
+  // ── Hide built-in models (#422) — one checkbox, top of the pane ──
+  const hideRow = h(doc, 'div', 'mv-hide-builtin-row');
+  const hideLabel = h(doc, 'label', 'check-row');
+  const hideCb = h(doc, 'input', 'mv-hide-builtin');
+  hideCb.type = 'checkbox';
+  hideCb.checked = !!hideBuiltin;
+  hideLabel.appendChild(hideCb);
+  hideLabel.appendChild(doc.createTextNode(" Hide built-in models (you don't use a first-party Anthropic account)"));
+  hideRow.appendChild(hideLabel);
+  hideRow.appendChild(h(doc, 'small', 'hint',
+    'Drops the built-ins from every model picker — new pipelines, the composer, Ask Worca, title generation. Cosmetic only: a run or reference that already names one keeps working.'));
+  root.appendChild(hideRow);
+
   // ── Your models (global) ──
   const yours = section('Your models', 'Defined once, available in every project. An entry with a built-in id overrides that built-in.');
   if (!globals.length) {
@@ -102,6 +126,8 @@ export function renderModelsList({ globals = [], legacy = [], plugins = [], pred
     head.appendChild(h(doc, 'b', 'mv-name', m.label || m.id));
     if (predefLc.has(m.id.toLowerCase())) head.appendChild(h(doc, 'span', 'badge violet mv-shadow', 'overrides built-in'));
     else if (pluginLc.has(m.id.toLowerCase())) head.appendChild(h(doc, 'span', 'badge violet mv-shadow', 'overrides plugin'));
+    const rb = routedBadge(m);
+    if (rb) head.appendChild(rb);
     // The §4.6 "unreliable" badge is meaningless once an override GOVERNS this
     // model's spend — and the backend only lifts the stored flag on the model's
     // next result event, so suppress it here the moment pricing is pinned.
@@ -169,6 +195,8 @@ export function renderModelsList({ globals = [], legacy = [], plugins = [], pred
       head.appendChild(h(doc, 'b', 'mv-name', m.label || m.id));
       head.appendChild(h(doc, 'span', 'badge waiting mv-origin', `plugin: ${m.plugin}`));
       if (globalLc.has(m.id.toLowerCase())) head.appendChild(h(doc, 'span', 'badge violet mv-shadowed', 'overridden by your copy'));
+      const prb = routedBadge(m);
+      if (prb) head.appendChild(prb);
       // Same rule as a global card: a manifest-pinned price governs the spend,
       // so the §4.6 "unreliable" flag says nothing about it.
       if (m.costUnreliable && !m.cost) head.appendChild(h(doc, 'span', 'badge waiting mv-cost', 'cost not verified'));
@@ -199,8 +227,11 @@ export function renderModelsList({ globals = [], legacy = [], plugins = [], pred
   }
 
   // ── Built-ins (read-only) ──
-  const builtins = section('Built-in models', 'Shipped with worca. Add a model with the same id to override its label, efforts, or routing.');
-  for (const m of predefined) {
+  const builtins = section('Built-in models', hideBuiltin
+    ? `Hidden from every picker (${predefined.length} built-in${predefined.length === 1 ? '' : 's'}) — untick the box above to show them.`
+    : 'Shipped with worca. Add a model with the same id to override its label, efforts, or routing.');
+  builtins.classList.add(hideBuiltin ? 'mv-builtins-hidden' : 'mv-builtins-shown');
+  for (const m of hideBuiltin ? [] : predefined) {
     const row = h(doc, 'div', 'mv-builtin');
     row.dataset.id = m.id;
     row.appendChild(h(doc, 'b', 'mv-name', m.label));

package/ui/public/style.css

@@ -959,6 +959,11 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
 /* Confirm dialog must stack ABOVE the plugin/wizard modal (equal .viewer-modal z-index,
    but #confirm-modal precedes #plugin-modal in the DOM). */
 #confirm-modal.viewer-modal{z-index:60;}
+/* The folder browser is a leaf picker opened FROM other modals (add-project,
+   export). It precedes #export-modal in the DOM, so at equal .viewer-modal
+   z-index the export modal would paint over it, hiding the Browse… picker.
+   Elevate it above every other modal so it is always usable when open. */
+#folder-browser.viewer-modal{z-index:70;}
 .viewer-modal .card{width:min(860px,100%);max-height:86vh;overflow:auto;}
 /* folder browser modal (native-dialog fallback). Must come AFTER the
    .viewer-modal rules: `.folder-modal .card` ties with `.viewer-modal .card`
@@ -1056,6 +1061,39 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
 .pl-remove:disabled{opacity:.6;cursor:default;}
 .pl-remove svg{display:block;}
 
+/* Export dialog (JSON file / Claude Code skill / Worca plugin). The row's
+   Export… button itself is a .btn-ghost (see .gv-saved .pl-export). */
+.export-field{margin:12px 0;}
+.export-field .hint{display:block;margin-top:6px;}
+/* A checkbox row directly under a text input needs its own breathing room:
+   .confirm-checkbox ships margin:0 (it is built for the confirm dialog's stack). */
+.export-field .confirm-checkbox{margin-top:10px;}
+/* Result view after a successful export (replaces #export-form in the same card). */
+.export-done{margin:12px 0 4px;}
+.export-done.hidden{display:none;}
+.export-done-head{display:flex;align-items:center;gap:10px;font-size:14px;margin-bottom:12px;}
+.export-done-check{display:grid;place-items:center;width:26px;height:26px;border-radius:999px;
+  background:var(--green-bg,#e6f4ea);color:var(--green-ink,#1e6b3a);font-weight:700;font-size:14px;}
+.export-done-lines{display:grid;grid-template-columns:max-content 1fr;gap:6px 14px;margin:0;font-size:12.5px;}
+.export-done-lines dt{color:var(--ink-3);font-weight:600;}
+.export-done-lines dd{margin:0;color:var(--ink);word-break:break-all;}
+.export-done-lines code{font:12px var(--mono);background:var(--field);border-radius:6px;padding:1px 6px;}
+.export-done-next{margin:14px 0 0;padding:10px 12px;border-radius:10px;background:var(--field);font-size:12.5px;color:var(--ink-2);}
+.export-done-next code{font:12px var(--mono);}
+.export-label{display:block;font-weight:600;font-size:12.5px;color:var(--ink-2);margin-bottom:6px;}
+.export-folder-row{display:flex;gap:8px;align-items:center;}
+.export-folder-row .input{flex:1 1 auto;}
+.export-plan{margin:12px 0;max-height:240px;overflow:auto;border:1px solid var(--line-2);border-radius:10px;padding:8px;font-size:12.5px;}
+.export-row{padding:4px 2px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
+.export-conflict-row{flex-direction:column;align-items:flex-start;}
+.export-tag{display:inline-block;min-width:58px;text-align:center;border-radius:6px;padding:1px 6px;font-weight:700;font-size:11px;}
+.export-create{background:var(--green-bg,#e6f7ec);color:var(--green-ink,#137a3b);}
+.export-update{background:var(--field);color:var(--ink);}
+.export-no-op{background:var(--field);color:var(--ink-3);}
+.export-warn,.export-conflict{background:var(--red-bg,#fde8e8);color:var(--red-ink,#b42323);}
+.export-orphan{background:var(--field);color:var(--ink-3);}
+.export-choices{display:flex;gap:12px;margin:4px 0 2px 64px;}
+.export-choice{font-size:12.5px;color:var(--ink-2);cursor:pointer;}
 /* Per-agent fan-out toggle in the New Pipeline rows. */
 .fanout-toggle {
   display: inline-flex;
@@ -1536,10 +1574,23 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
 .topnav button.active .topnav-amt{color:inherit;}
 
 /* ---------- Settings cards ---------- */
-/* One width/centering/gap rule for all three Settings cards. */
+/* One width/centering/gap rule for every Settings card. */
 .settings-card{max-width:760px;padding:22px;margin-left:auto;margin-right:auto;}
 .settings-card + .settings-card{margin-top:18px;}
 
+/* About card rows. .about-val and .about-link share specificity on one anchor, so
+   .about-link must stay AFTER .about-val (test/ui-settings-about.test.mjs pins it). */
+.about-row{display:flex;align-items:baseline;gap:10px;font-size:13px;}
+.about-row + .about-row{margin-top:10px;}
+.about-key{flex:0 0 96px;font-weight:600;color:var(--ink-2);}
+.about-val{color:var(--ink);min-width:0;}
+.about-version{font-family:var(--mono);}
+/* Once painted with a release-tag href the version reads as a link. */
+.about-version[href]{color:var(--green-ink);text-decoration:none;}
+.about-version[href]:hover{text-decoration:underline;}
+.about-link{color:var(--green-ink);font-weight:600;text-decoration:none;overflow-wrap:anywhere;}
+.about-link:hover{text-decoration:underline;}
+
 /* ---------- Budget readout (Settings) ---------- */
 /* Section gap before the limit fields (the disclaimer hint that used to sit
    here moved into the card heading's ⓘ tooltip). */
@@ -1586,6 +1637,8 @@ fieldset.source legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--
 /* ---- Models view (configurable-models-design.md §4.10) ---- */
 .mv-list{display:grid;gap:18px;}
 .mv-section{display:grid;gap:10px;}
+.mv-hide-builtin-row{display:grid;gap:6px;padding:10px 12px;border:1px solid var(--line-2,#e6e6ec);border-radius:10px;}
+.mv-hide-builtin-row .hint{margin:0;}
 .mv-section-title{margin:4px 0 0;font-size:13px;text-transform:uppercase;letter-spacing:.04em;opacity:.75;}
 .mv-card{padding:16px 20px;display:flex;align-items:center;gap:14px;}
 .mv-body{flex:1 1 auto;min-width:0;}
@@ -2820,7 +2873,8 @@ body.rail-collapsed .ask-dock{left:76px;}
   font-family:var(--mono);font-weight:400;font-size:10.5px;}
 
 .ask-sheet{pointer-events:auto;position:relative;display:flex;flex-direction:column;overflow:hidden;
-  width:min(782px,100%);height:min(669px,calc(100% - 20px));background:var(--panel);
+  width:min(782px,100%);height:min(669px,calc(100% - 20px));max-width:100%;max-height:calc(100% - 20px);
+  background:var(--panel);
   border:1px solid var(--line-2);border-radius:var(--r-card);
   box-shadow:0 18px 60px rgba(25,25,27,.14),0 2px 6px rgba(25,25,27,.06);
   animation:wr-rise .26s cubic-bezier(.2,.7,.3,1) both;}
@@ -2917,7 +2971,7 @@ body.rail-collapsed .ask-dock{left:76px;}
 .ask-agent-log-t{flex:0 0 auto;color:var(--seq);}
 .ask-agent-log-text{min-width:0;white-space:pre-wrap;overflow-wrap:anywhere;}
 
-.ask-answer{max-width:92%;font-size:13.5px;line-height:1.72;color:var(--ink);}
+.ask-answer{max-width:100%;font-size:13.5px;line-height:1.72;color:var(--ink);}
 .ask-answer-plain{white-space:pre-wrap;overflow-wrap:anywhere;}
 .ask-md :is(h1,h2,h3,h4,h5,h6){margin:14px 0 6px;font-size:13.5px;font-weight:600;color:var(--ink);}
 .ask-md h1{font-size:15px;}
@@ -3105,6 +3159,41 @@ body.rail-collapsed .ask-dock{left:76px;}
 .ask-wt-row .ask-runinfo-sub.ask-wt-path{cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:260px;}
 .ask-wt-row .ask-thread-trash{flex:none;}
 
+/* Resize grips (spec §10.3 addendum). Invisible edge zones INSIDE the sheet —
+   overflow:hidden would clip anything outside it — that only change the cursor;
+   a 2px inset line appears on hover and stays while dragging (.is-active). No
+   bottom grip: the sheet is bottom-anchored. ask-panel.mjs applies the user's
+   size as inline width/height and clamps it to the dock; the max-* pair on
+   .ask-sheet above is the backstop that keeps a stale inline size inside the
+   dock (the rail collapsing changes the dock width without a window resize).
+   The floor (JS-only, the stylesheet default 782×669: the sheet grows, never
+   shrinks) is not a CSS min-* on purpose — that would overflow narrow viewports
+   that width:min(782px,100%) handles today.
+   Corners: the sheet clips at its rounded corner (inner radius = --r-card minus
+   the 1px border), so a square corner grip's straight inset lines fall almost
+   entirely outside the clip and only a ~3px sliver ever shows. Each corner is
+   therefore exactly one radius wide and carries the same outer radius, so its
+   inset shadow bends along the arc, flush with the border like the straight
+   edges; the straight grips start where the arc ends (--ask-corner). */
+.ask-resize{position:absolute;z-index:5;background:transparent;touch-action:none;--ask-grip:transparent;
+  --ask-corner:calc(var(--r-card) - 1px);transition:box-shadow .15s;}
+.ask-resize:hover{--ask-grip:var(--ink-3);}
+.ask-resize.is-active{--ask-grip:var(--ink);}
+.ask-resize-n{top:0;left:var(--ask-corner);right:var(--ask-corner);height:6px;cursor:ns-resize;box-shadow:inset 0 2px 0 var(--ask-grip);}
+.ask-resize-e{top:var(--ask-corner);right:0;bottom:var(--ask-corner);width:6px;cursor:ew-resize;box-shadow:inset -2px 0 0 var(--ask-grip);}
+.ask-resize-w{top:var(--ask-corner);left:0;bottom:var(--ask-corner);width:6px;cursor:ew-resize;box-shadow:inset 2px 0 0 var(--ask-grip);}
+.ask-resize-ne{top:0;right:0;width:var(--ask-corner);height:var(--ask-corner);cursor:nesw-resize;
+  border-top-right-radius:var(--ask-corner);box-shadow:inset -2px 2px 0 var(--ask-grip);}
+.ask-resize-nw{top:0;left:0;width:var(--ask-corner);height:var(--ask-corner);cursor:nwse-resize;
+  border-top-left-radius:var(--ask-corner);box-shadow:inset 2px 2px 0 var(--ask-grip);}
+.ask-sheet.is-resizing{user-select:none;}
+/* The ne corner grip (one radius square, z-index:5) overlaps the top-right
+   corner of the header's last icon button (30×30 at padding 13px/14px): the
+   buttons sit above the grips so a click there still closes/opens instead of
+   starting a resize, and a hurried double-click never resets the size. The
+   grip's visible band hugs the border, well outside the button box. */
+.ask-header .ask-icon-btn{position:relative;z-index:6;}
+
 /* ---------- Ask Worca dock clearance ---------- */
 /* The dock is a fixed overlay -- .ask-dock above: 26px dock padding-bottom plus the
    ~47px pill occludes a ~73px strip at the bottom of every scrollport, while the page
@@ -3459,6 +3548,8 @@ input.gv-name:focus-visible{outline:none;}
   padding:4px 11px;font:600 11.5px var(--sans);cursor:pointer;flex:0 0 auto;white-space:nowrap;}
 .gv-errchip:hover{filter:brightness(.97);}
 .gv-errchip[hidden]{display:none;}
+/* Unfinished wiring is a to-do, not a mistake: the same chip in a quiet dress. */
+.gv-errchip.is-incomplete{background:var(--field);color:var(--ink-2);border-color:var(--line-2);}
 /* Toolbar density: .btn-ghost/.btn-go are PAGE-level pills (13–14px of vertical
    padding, 20–28px horizontal). In a 52px bar they wrap their own labels, so
    the bar re-states them at .btn-mini metrics — same skin, toolbar size. */
@@ -3637,11 +3728,27 @@ input.gv-name:focus-visible{outline:none;}
   padding:16px 20px;border-bottom:1px solid var(--line);}
 .saved-head b{font-size:15px;font-weight:600;letter-spacing:-.01em;}
 .saved-head .cnt{color:var(--ink-3);font-size:12.5px;font-weight:600;margin-left:9px;}
+.saved-head-actions{display:flex;align-items:center;gap:8px;}
+/* One tab per domain — the same pill tabs the History detail uses, one size down. */
+.gv-saved-tabs{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:12px 20px;border-bottom:1px solid var(--line);}
+.gv-saved-tabs[hidden]{display:none;}
+.gv-saved-tab{display:flex;align-items:center;gap:8px;padding:7px 13px;border:1.5px solid var(--line);
+  border-radius:999px;background:var(--panel);font:600 12.5px var(--sans);color:var(--ink-2);cursor:pointer;}
+.gv-saved-tab:hover{border-color:var(--ink-3);color:var(--ink);}
+.gv-saved-tab.active{background:var(--ink);color:#fff;border-color:var(--ink);}
+.gv-saved-tab:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
+.gv-saved-tab-badge{padding:1px 7px;border-radius:999px;background:var(--field);color:var(--ink-3);font:600 10.5px var(--mono);}
+.gv-saved-tab.active .gv-saved-tab-badge{background:var(--blue-bg);color:var(--blue-ink);}
 .saved-list{display:flex;flex-direction:column;}
 .gv-saved .pl-item{border-bottom:1px solid var(--line);}
 .gv-saved .pl-item:last-child{border-bottom:none;}
 .gv-saved .pl-row{display:flex;align-items:center;gap:14px;padding:12px 20px;transition:background .12s;}
 .gv-saved .pl-row:hover{background:var(--field);}
+/* The row IS the Open action for a v2 pipeline. */
+.gv-saved .pl-row.pl-openable{cursor:pointer;}
+.gv-saved .pl-row.pl-openable:focus-visible{outline:2px solid var(--ink);outline-offset:-2px;}
+.gv-saved .pl-new{display:inline-block;margin-left:8px;padding:2px 7px;border-radius:999px;vertical-align:middle;
+  background:var(--blue-bg);color:var(--blue-ink);font:700 10px var(--mono);letter-spacing:.06em;}
 /* The thumbnail is a fixed TILE at the head of the row: the SVG carries its own
    width/height, so a percentage box would leave it stranded in dead space. */
 .gv-saved .pl-thumb{flex:0 0 auto;width:140px;height:54px;display:grid;place-items:center;overflow:hidden;
@@ -3654,14 +3761,16 @@ input.gv-name:focus-visible{outline:none;}
   overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
 .gv-saved .pl-meta{margin-top:4px;font-size:10.5px;font-weight:700;letter-spacing:.05em;
   text-transform:uppercase;color:var(--ink-3);}
-.gv-saved .pl-open{flex:0 0 auto;padding:7px 15px;font-size:12.5px;}
+.gv-saved .pl-export{flex:0 0 auto;padding:7px 15px;font-size:12.5px;}
 .gv-saved .pl-legacy,.gv-saved .pl-origin{flex:0 0 auto;background:var(--field);border:1px solid var(--line);color:var(--ink-3);
   border-radius:999px;padding:3px 10px;font-size:11px;font-weight:600;}
 .gv-saved .pl-origin{font-family:var(--mono);letter-spacing:-.01em;}
-.gv-saved .pl-del{flex:0 0 auto;width:34px;height:34px;border-radius:10px;border:1.5px solid var(--line-2);
-  background:#fff;display:grid;place-items:center;cursor:pointer;color:var(--ink-3);
-  font-family:inherit;font-size:15px;line-height:1;transition:.12s;}
-.gv-saved .pl-del:hover{border-color:var(--red);color:var(--red-ink);background:var(--red-bg);}
+/* Delete: the bin icon in the pipeline Archive button's dress (.hd-archive — red
+   ink on a red-bg hairline pill, fills on hover), icon-only at row-action size. */
+.gv-saved .pl-del{flex:0 0 auto;width:34px;height:34px;border-radius:999px;border:1.5px solid var(--red-bg);
+  background:var(--panel);display:grid;place-items:center;cursor:pointer;color:var(--red-ink);transition:.12s;}
+.gv-saved .pl-del svg{width:15px;height:15px;stroke-width:1.9;}
+.gv-saved .pl-del:hover{border-color:var(--red);background:var(--red-bg);}
 .gv-saved .pl-del:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
 .gv-saved .pl-empty{padding:30px 20px;text-align:center;color:var(--ink-3);font-size:13px;}
 .gv-archived{display:flex;flex-wrap:wrap;align-items:center;gap:7px;