omp-llm-role 1.0.0 → 1.2.0

package/web/app.js

@@ -12,6 +12,7 @@ const state = {
   defaults: {},
   metrics: [],
   metricMeta: {},
+  focusAssessments: {},
   levels: [],
   thinkingFactors: {},
   rows: [],
@@ -20,8 +21,14 @@ const state = {
   derivedLambda: 0,
   errors: [],
   lockPath: "",
+  scopes: [],
+  activeScope: "",
+  features: {},
+  featureRegistry: [],
   filter: "",
   topn: "25",
+  hideBlocked: false,
+  availability: null,
   explain: null,
   exportMessage: "",
 };
@@ -109,7 +116,11 @@ const TIPS = {
   models: "Models in the cached llm-stats leaderboard snapshot.",
   fetched: "UTC day of the cached snapshot; a cache older than today is refetched on boot.",
   orJoin: "OpenRouter join: matched = models paired by slug suffix (source of throughput and price); priced = matched models that carry an OpenRouter price.",
-  lock: "Plugin settings lock file that Export writes to.",
+  availability: "Whether your OpenRouter key can run each model, from the keyed catalog. Enable OpenRouter → Settings → \"Filter the model catalog for API keys\" so the keyed catalog is a per-model allowlist; otherwise every mark reads unknown.",
+  key: "Key usability: usable = your OpenRouter key can run this model (in the keyed catalog); blocked = the public catalog has it but your key cannot; unknown = the keyed catalog is inactive or the model is in neither catalog.",
+  hideBlocked: "Drop rows your OpenRouter key cannot run (key = blocked). Applied after the text filter and the top-n slice.",
+  lock: "Plugin settings lock file that Export writes to (the active scope's lock file).",
+  scope: "Role-config source: the user-level scope, or a project where /project-roles was used. Switching re-reads that scope's roles and universe from disk and points Export at its lock file. A project whose lock file is gone is unavailable.",
   refresh: "Refetch llm-stats and OpenRouter data (hits the network).",
   rank: "Rank among this role's eligible models, by value, descending.",
   delta: "Rank change against the role's saved (effective) definition: + means this definition ranks the model higher than the plugin does today.",
@@ -132,7 +143,22 @@ const TIPS = {
   lambda: "λ = price of one quality point, in $/M. Derived as " + LAMBDA_DERIVATION + " unless the role overrides lambda.",
   sum: "Weights must sum to 1.0 (±0.01) or the plugin rejects the role.",
   required: "Eligibility gate, not a weight: a model missing this metric is not ranked at all for the role.",
+  focus: "Nine-axis audit of each weighted benchmark/percentile metric, over the same pool the updater ranks on. A below-bar axis is warned; unknown means the metric's scores were not loaded (never a silent ok).",
+  focusCoverage: "Coverage: models carrying the metric (not the imputed fill) out of the pool, and the share. Below the coverage floor — or a capability-filled metric — is warned.",
+  focusDispersion: "Dispersion: IQR/median of the cardinal-normalized covered values. Too little spread means the metric barely separates models.",
+  focusComposition: "Composition: pool orgs above the minimum share that carry no covered model. A missing major provider is warned.",
+  focusFreshness: "Freshness: months between the newest covered model and the newest pool model. A stale benchmark is warned.",
+  focusTrust: "Trust: the self-reported share of the payload's covered entries (the per-entry self_reported flag). A mostly vendor-submitted source is warned; unknown means the payload carried no entry flags or the scores were not loaded.",
+  focusModality: "Modality: the catalog row's modality (text/image/audio/video/multimodal) and the payload's multimodal share. Informational only — never a gate; unknown means neither the catalog row nor the payload carried a modality signal.",
+  focusMaintenance: "Maintenance: months since the catalog row's updated_at (the dataset's own age), against a 12-month bar, with version_count/star_count as supporting detail. This is the dataset-date axis, distinct from freshness (the model-date axis). An annotation, never a gate — a stale dataset is warned but never drops a candidate; unknown means the catalog row is absent or its updated_at is missing/unparseable.",
+  focusProvenance: "Provenance: the benchmark's owner (the catalog row's dataset_org_id, falling back to dataset_slug) and the source's own per-entry org mix (the dominant lab and its share). A cross-check on the pool-derived composition axis: agree/disagree records whether the two concur. An annotation, never a gate — a vendor-populated source is warned but never drops a candidate; unknown means there is neither an owner nor a payload org mix.",
+  focusCrossSource: "Cross-source: the zeroeval per-entry price/context compared against the plugin's own price/context for the models carrying the metric (the median relative divergence, within a 0.5 tolerance). The speed figure is informational only (rps vs tok/s). An annotation, never a gate — it never feeds the 1/price² blend; unknown means no model joined or the payload carried none of the four fields.",
   imageFilter: "Require image input (filters.image) — the gate that shrinks the vision role's eligible set.",
+  providerPin: "Hard provider pin: the OpenRouter provider slug this role's requests are routed to (a tiered slug like deepinfra/fp8 is accepted verbatim). Setting it opts the role out of the automatic best-route pin; empty = default OpenRouter routing.",
+  features: "Opt-in capability presets (issue #40). Each flag applies the plugin's recommended settings for that capability to this role; an explicit knob value always wins. Export writes the flag, not the expanded values, so a future change to the recommendation keeps reaching the role.",
+  featureState: "inherit = use the global flag (features.<id> in the lock file); on/off = a per-role override (roles.<role>.features.<id>) that beats the global in either direction.",
+  featureKnob: "An individual knob the capability's recommended bundle fills. Leave it at inherit to take the recommendation; set a value to override it (an explicit value always wins over the flag).",
+  featureDerived: "derived = this value comes from the enabled capability's recommended bundle, not from an explicit key in the role. Set the knob to make it authored.",
   thinking: "Thinking level appended to the role's selector (`:level`) and used to scale the price axis. The factor (3ρ+1+T)/(3ρ+1) applies only to models that will actually run the level (omp catalog `thinking[]` membership; meta levels off/auto need only a non-empty list). Bare = no suffix — the session's defaultThinkingLevel applies and the price is unadjusted.",
   thinkingBare: "Bare (no suffix). Not restorable once the role's shipped default or the lock file sets a level: the plugin deep-merges roles over DEFAULT_ROLES, so an omitted key keeps the inherited value.",
   normalize: "Rescale every weight so the sum is 1.0 (the parked ε is rescaled too).",
@@ -211,18 +237,52 @@ function initTips() {
 // Header + role tabs
 // ---------------------------------------------------------------------------
 
+/** Header availability summary. When the keyed catalog is active it reports the
+ * allowlist size; otherwise it names the OpenRouter setting that turns it on and
+ * every row's mark reads unknown. */
+function availabilitySpan() {
+  const a = state.availability;
+  if (a && a.active) {
+    return el("span", { "data-tip": TIPS.availability, text: "key: " + a.keyedCount + " usable / " + a.blockedCount + " blocked" });
+  }
+  return el("span", { class: "muted", "data-tip": TIPS.availability, text: "availability unknown — enable OpenRouter → Settings → \"Filter the model catalog for API keys\"" });
+}
+
+/** The scope selector: the user-level scope plus every known project. A scope
+ * whose lock file is gone is disabled with a reason tooltip. */
+function scopeSelect() {
+  const sel = el("select", { id: "scope", "data-tip": TIPS.scope });
+  for (const s of state.scopes) {
+    sel.append(
+      el("option", {
+        value: s.id,
+        text: s.label,
+        disabled: s.present ? null : "",
+        title: s.present ? null : "unavailable — lock file missing",
+      }),
+    );
+  }
+  sel.value = state.activeScope;
+  sel.addEventListener("change", onScopeChange);
+  return sel;
+}
+
 function renderMeta(data) {
   const meta = document.getElementById("meta");
   meta.textContent = "";
   meta.append(
     el("span", { class: "brand", text: "omp-llm-role explorer" }),
     el("span", { class: "sep", text: "·" }),
+    scopeSelect(),
+    el("span", { class: "sep", text: "·" }),
     el("span", { "data-tip": TIPS.models, text: data.modelCount + " models" }),
     el("span", { class: "sep", text: "·" }),
     el("span", { "data-tip": TIPS.fetched, text: "fetched " + data.fetchedAt.slice(0, 10) }),
     el("span", { class: "sep", text: "·" }),
     el("span", { "data-tip": TIPS.orJoin, text: "OpenRouter " + data.orMatched + " matched / " + data.orPriced + " priced" }),
     el("span", { class: "sep", text: "·" }),
+    availabilitySpan(),
+    el("span", { class: "sep", text: "·" }),
     el("span", { class: "lock", "data-tip": TIPS.lock, text: "lock: " + data.lockPath }),
     el("button", { id: "refresh", "data-tip": TIPS.refresh, text: "Refresh data", onclick: onRefresh }),
   );
@@ -337,6 +397,21 @@ async function recompute() {
   }
 }
 
+/** Tooltip text for one key verdict. The server owns the verdict; the client
+ * only explains it, so the three states cannot drift from the ranking. */
+function keyTip(key) {
+  if (key === "usable") return "usable — your OpenRouter key can run this model (in the keyed catalog)";
+  if (key === "blocked") return "key-blocked — the public catalog has this model but your key cannot run it (OpenRouter → Settings → \"Filter the model catalog for API keys\")";
+  return "unknown — the keyed catalog is inactive or this model is in neither catalog (OpenRouter → Settings → \"Filter the model catalog for API keys\")";
+}
+
+/** Three-state key badge. Renders exactly the verdict the server sent; the
+ * client never invents an availability rule. */
+function keyBadge(key) {
+  const state_ = key === "usable" || key === "blocked" ? key : "unknown";
+  return el("span", { class: "badge " + state_, "data-tip": keyTip(state_), text: state_ });
+}
+
 function renderTable() {
   const table = document.getElementById("table");
   table.textContent = "";
@@ -347,6 +422,7 @@ function renderTable() {
       el("th", { "data-tip": TIPS.frontier, text: "★" }),
       el("th", { text: "model" }),
       el("th", { text: "org" }),
+      el("th", { "data-tip": TIPS.key, text: "key" }),
       el("th", { class: "num", "data-tip": TIPS.value, text: "value" }),
       el("th", { class: "num", "data-tip": TIPS.q, text: "q" }),
       el("th", { class: "num", "data-tip": TIPS.price, text: "$/M" }),
@@ -359,6 +435,9 @@ function renderTable() {
   let rows = state.rows;
   if (filter) rows = rows.filter((r) => (r.name + " " + r.org + " " + r.id).toLowerCase().includes(filter));
   if (state.topn !== "all") rows = rows.slice(0, Number(state.topn));
+  // Order: text filter → top-n slice → hide-blocked drop. The drop runs last so
+  // the top-n count is the ranking's own prefix, not a post-filter count.
+  if (state.hideBlocked) rows = rows.filter((r) => r.key !== "blocked");
   for (const r of rows) {
     tbody.append(
       el("tr", { class: "row" + (r.id === state.selectedId ? " selected" : ""), onclick: () => selectModel(r.id) }, [
@@ -367,6 +446,7 @@ function renderTable() {
         el("td", { class: "star", text: r.frontier ? "★" : "" }),
         el("td", { class: "model", text: r.name }),
         el("td", { class: "org", text: r.org }),
+        el("td", { class: "key" }, keyBadge(r.key)),
         el("td", { class: "num", text: fmt(r.value, 3) }),
         el("td", { class: "num", text: fmt(r.q, 3) }),
         el("td", { class: "num", text: fmt(r.priceEff, 2) }),
@@ -422,6 +502,21 @@ function renderExplain() {
     }),
   );
 
+  // Key verdict line: the server's overlay verdict, plus the reason and the
+  // OpenRouter setting name when the keyed catalog is not active.
+  let keyLine = "key: " + keyTip(ex.key);
+  if (ex.keyReason !== "active") keyLine += " (reason: " + ex.keyReason + ")";
+  panel.append(el("p", { class: "sub key-line", "data-tip": TIPS.key, text: keyLine }));
+
+  // The pin basis: a manual pin (from the edited def) overrides the automatic
+  // best-route pin the updater would write. Read-only here.
+  const manualPin = state.defs[state.role]?.providerPin;
+  if (manualPin) {
+    panel.append(el("p", { class: "sub pin-line", "data-tip": TIPS.providerPin, text: "pin: " + manualPin + " (manual)" }));
+  } else if (ex.autoPin) {
+    panel.append(el("p", { class: "sub pin-line", "data-tip": TIPS.providerPin, text: "auto pin: " + ex.autoPin }));
+  }
+
   panel.append(el("h3", { "data-tip": TIPS.composition, text: "Value composition" }));
   const comp = el("table", { class: "comp" });
   comp.append(
@@ -463,7 +558,9 @@ function renderExplain() {
   const derived = ex.role.lambda === ex.role.derivedLambda;
   panel.append(el("p", { class: "cost", "data-tip": TIPS.lambda, text: "λ = " + ex.role.lambda.toFixed(5) + " $/quality-point" + (derived ? " (derived = " + LAMBDA_DERIVATION + ")" : " (override)") }));
   const thinkNote = ex.role.thinking === undefined ? "bare" : ":" + ex.role.thinking;
-  panel.append(el("p", { class: "cost", "data-tip": TIPS.costPenalty, text: "eff price $" + fmt(ex.cost.priceEff, 2) + "/M" + (ex.cost.priceEff !== ex.cost.billedPrice ? " (billed $" + fmt(ex.cost.billedPrice, 2) + " × " + thinkNote + ")" : " (" + thinkNote + ")") + " · penalty = λ·price = " + fmt(ex.cost.penalty, 4) + " · value = q − penalty = " + fmt(ex.cost.value, 4) }));
+  const cacheNote = ex.role.cacheHitRate > 0 ? " · cache " + ex.role.cacheHitRate : "";
+  const ownNote = ex.ownProvider ? " · best route" : "";
+  panel.append(el("p", { class: "cost", "data-tip": TIPS.costPenalty, text: "eff price $" + fmt(ex.cost.priceEff, 2) + "/M" + (ex.cost.priceEff !== ex.cost.billedPrice ? " (billed $" + fmt(ex.cost.billedPrice, 2) + " × " + thinkNote + ")" : " (" + thinkNote + ")") + cacheNote + ownNote + " · penalty = λ·price = " + fmt(ex.cost.penalty, 4) + " · value = q − penalty = " + fmt(ex.cost.value, 4) }));
 
   panel.append(el("h3", { "data-tip": TIPS.whyNotHigher, text: "Why not higher" }));
   if (ex.gapAbove === null) {
@@ -531,6 +628,269 @@ function normalizeWeights(def) {
   for (const key of Object.keys(def.weights)) def.weights[key] = def.weights[key] / sum;
 }
 
+/** The role's focus metrics: the weighted benchmark/percentile metrics, the same
+ * rule the server's focusMetricsOf applies (shipped roles weight index metrics,
+ * so they carry none). */
+function focusMetricsOf(def) {
+  return Object.keys(def.weights).filter((metric) => {
+    const meta = state.metricMeta[metric];
+    return !!meta && (meta.kind === "benchmark" || meta.kind === "percentile");
+  });
+}
+
+/** One focus-signal cell: the value text plus a status class. `unknown` renders
+ * as unknown (muted), never as ok; `below-bar` gets the warning tint and glyph. */
+function focusSignal(text, status) {
+  const cls = status === "ok" ? "ok" : status === "below-bar" ? "below-bar" : "unknown";
+  return el("td", { class: "sig " + cls, text });
+}
+
+/** The nine-axis focus assessment of the role's weighted benchmark/percentile
+ * metrics, from the bootstrap payload's focusAssessments[role]. The payload is
+ * computed over the resolved definition, so a metric the editor just added reads
+ * "not assessed" until it is Exported and the page reloaded. */
+function renderFocus(panel) {
+  const def = state.defs[state.role];
+  const assessments = state.focusAssessments[state.role] || {};
+  const metrics = focusMetricsOf(def);
+  panel.append(el("h3", { "data-tip": TIPS.focus, text: "Focus metrics" }));
+  if (metrics.length === 0) {
+    panel.append(el("p", { class: "muted", text: "No benchmark/percentile metric weighted — the role ranks on the index/price/throughput backbone." }));
+    return;
+  }
+  const table = el("table", { class: "focus" });
+  table.append(
+    el("thead", {}, el("tr", {}, [
+      el("th", { text: "metric" }),
+      el("th", { "data-tip": TIPS.focusCoverage, text: "coverage" }),
+      el("th", { "data-tip": TIPS.focusDispersion, text: "dispersion" }),
+      el("th", { "data-tip": TIPS.focusComposition, text: "composition" }),
+      el("th", { "data-tip": TIPS.focusFreshness, text: "freshness" }),
+      el("th", { "data-tip": TIPS.focusTrust, text: "trust" }),
+      el("th", { "data-tip": TIPS.focusModality, text: "modality" }),
+      el("th", { "data-tip": TIPS.focusMaintenance, text: "maintenance" }),
+      el("th", { "data-tip": TIPS.focusProvenance, text: "provenance" }),
+      el("th", { "data-tip": TIPS.focusCrossSource, text: "cross-source" }),
+    ])),
+  );
+  const body = el("tbody");
+  for (const metric of metrics) {
+    const a = assessments[metric];
+    if (!a) {
+      body.append(
+        el("tr", {}, [
+          el("td", { "data-tip": metricTip(metric), text: metricLabel(metric) }),
+          el("td", { class: "sig unknown", colspan: "9", text: "not assessed — Export, then reload to assess the edited definition" }),
+        ]),
+      );
+      continue;
+    }
+    const c = a.coverage;
+    const coverage = c.status === "unknown" ? "unknown" : c.covered + "/" + c.total + " (" + (c.share === null ? "?" : (c.share * 100).toFixed(1) + "%") + ")";
+    const dispersion = a.dispersion.status === "unknown" ? "unknown" : a.dispersion.value.toFixed(3);
+    const composition = a.composition.status === "unknown" ? "unknown" : a.composition.status === "ok" ? "ok" : "omits " + a.composition.omittedOrgs.join(", ");
+    const freshness = a.freshness.status === "unknown" ? "unknown" : a.freshness.monthsBehind.toFixed(1) + "mo";
+    const community = a.trust.community ?? false;
+    const trust =
+      a.trust.status === "unknown"
+        ? community ? "community" : "unknown"
+        : a.trust.selfReported + "/" + a.trust.covered + " " + a.trust.status + (community ? " community" : "");
+    const modality =
+      a.modality.status === "unknown"
+        ? "unknown"
+        : (a.modality.value ?? "?") + (a.modality.multimodalShare === null ? "" : " " + (a.modality.multimodalShare * 100).toFixed(0) + "% multimodal");
+    const maintenance = a.maintenance.status === "unknown" ? "unknown" : a.maintenance.monthsOld.toFixed(1) + "mo";
+    const provenance =
+      a.provenance.status === "unknown"
+        ? "unknown"
+        : (a.provenance.owner ?? "?") +
+          (a.provenance.dominantShare === null ? "" : " " + (a.provenance.dominantShare * 100).toFixed(0) + "% " + (a.provenance.dominantOrg ?? "?")) +
+          " " +
+          a.provenance.compositionAgreement;
+    const crossSource =
+      a.crossSource.status === "unknown"
+        ? "unknown"
+        : a.crossSource.compared +
+          " priceΔ" +
+          (a.crossSource.priceDivergence === null ? "?" : (a.crossSource.priceDivergence * 100).toFixed(0) + "%") +
+          " ctxΔ" +
+          (a.crossSource.contextDivergence === null ? "?" : (a.crossSource.contextDivergence * 100).toFixed(0) + "%");
+    const statuses = [c.status, a.dispersion.status, a.composition.status, a.freshness.status, a.trust.status, a.modality.status, a.maintenance.status, a.provenance.status, a.crossSource.status];
+    body.append(
+      el("tr", { class: statuses.includes("below-bar") ? "warned" : "" }, [
+        el("td", { "data-tip": metricTip(metric), text: metricLabel(metric) }),
+        focusSignal(coverage, c.status),
+        focusSignal(dispersion, a.dispersion.status),
+        focusSignal(composition, a.composition.status),
+        focusSignal(freshness, a.freshness.status),
+        focusSignal(trust, a.trust.status),
+        focusSignal(modality, a.modality.status),
+        focusSignal(maintenance, a.maintenance.status),
+        focusSignal(provenance, a.provenance.status),
+        focusSignal(crossSource, a.crossSource.status),
+      ]),
+    );
+  }
+  table.append(body);
+  panel.append(table);
+}
+
+// ---------------------------------------------------------------------------
+// Capability flags (issue #40)
+// ---------------------------------------------------------------------------
+
+/** The knobs a capability's recommended bundle fills, derived from the registry
+ * so the panel cannot drift from `src/features.ts`. */
+function bundleKnobs(recommended) {
+  const out = [];
+  if (recommended.filters) {
+    for (const [key, value] of Object.entries(recommended.filters)) {
+      out.push({ key: "filters." + key, kind: typeof value === "boolean" ? "boolean" : "number", value });
+    }
+  }
+  if (recommended.cacheHitRate !== undefined) out.push({ key: "cacheHitRate", kind: "number", value: recommended.cacheHitRate });
+  if (recommended.preferOwnProvider !== undefined) out.push({ key: "preferOwnProvider", kind: "boolean", value: recommended.preferOwnProvider });
+  return out;
+}
+
+/** Render a recommended bundle as `key=value` pairs (mirrors formatBundle). */
+function bundleText(recommended) {
+  return bundleKnobs(recommended).map((k) => k.key + "=" + k.value).join(", ");
+}
+
+/** Read one knob from the AUTHORED def by its dotted key. */
+function getKnob(def, key) {
+  if (key === "cacheHitRate") return def.cacheHitRate;
+  if (key === "preferOwnProvider") return def.preferOwnProvider;
+  if (key.startsWith("filters.")) return def.filters ? def.filters[key.slice("filters.".length)] : undefined;
+  return undefined;
+}
+
+/** Write (or clear, with `undefined`) one knob on the AUTHORED def. */
+function setKnob(def, key, value) {
+  if (key === "cacheHitRate" || key === "preferOwnProvider") {
+    if (value === undefined) delete def[key];
+    else def[key] = value;
+    return;
+  }
+  if (key.startsWith("filters.")) {
+    const leaf = key.slice("filters.".length);
+    if (value === undefined) {
+      if (def.filters) {
+        delete def.filters[leaf];
+        if (Object.keys(def.filters).length === 0) delete def.filters;
+      }
+    } else {
+      def.filters = def.filters || {};
+      def.filters[leaf] = value;
+    }
+  }
+}
+
+/** The effective state of one capability for a role: the authored per-role flag
+ * when present (it wins either way), else the scope's global flag. */
+function effectiveFlag(def, id) {
+  const authored = def.features ? def.features[id] : undefined;
+  if (authored !== undefined) return authored;
+  return state.features[id] === true;
+}
+
+/** The effective value of one knob and whether it is DERIVED (filled by an
+ * enabled capability) rather than authored (an explicit key on the def). */
+function effectiveKnob(def, featureId, knob) {
+  const authored = getKnob(def, knob.key);
+  if (authored !== undefined) return { value: authored, derived: false };
+  if (effectiveFlag(def, featureId) && knob.value !== undefined) return { value: knob.value, derived: true };
+  return { value: undefined, derived: false };
+}
+
+/** One knob field: an editable input (number, or inherit/true/false select) plus
+ * a badge marking the value authored or derived from the capability. */
+function knobField(def, featureId, knob) {
+  const authored = getKnob(def, knob.key);
+  const eff = effectiveKnob(def, featureId, knob);
+  const cell = el("span", { class: "knob" + (eff.derived ? " derived" : "") });
+  let input;
+  if (knob.kind === "boolean") {
+    input = el("select", { class: "knob-input", "data-tip": TIPS.featureKnob });
+    input.append(el("option", { value: "inherit", text: "inherit" }));
+    input.append(el("option", { value: "true", text: "true" }));
+    input.append(el("option", { value: "false", text: "false" }));
+    input.value = authored === undefined ? "inherit" : String(authored);
+    input.addEventListener("change", () => {
+      setKnob(def, knob.key, input.value === "inherit" ? undefined : input.value === "true");
+      renderEditor();
+      renderRoles();
+      scheduleRecompute();
+    });
+  } else {
+    input = el("input", { type: "number", class: "knob-input", step: "any", "data-tip": TIPS.featureKnob, placeholder: eff.value === undefined ? "—" : String(eff.value) });
+    if (authored !== undefined) input.value = String(authored);
+    input.addEventListener("input", () => {
+      setKnob(def, knob.key, input.value === "" ? undefined : Number(input.value));
+      scheduleRecompute();
+    });
+    input.addEventListener("change", () => {
+      renderEditor();
+      renderRoles();
+    });
+  }
+  cell.append(input);
+  cell.append(el("span", { class: "knob-name", text: knob.key }));
+  const badge = eff.derived ? "derived " + eff.value : authored !== undefined ? "authored" : "—";
+  cell.append(el("span", { class: "knob-badge " + (eff.derived ? "derived" : authored !== undefined ? "authored" : "none"), "data-tip": TIPS.featureDerived, text: badge }));
+  return cell;
+}
+
+/** The per-role Features panel: one tri-state control per capability (inherit /
+ * on / off) writing `def.features[id]`, the recommended bundle, and the
+ * individual knobs the bundle fills, each marked derived or authored. */
+function renderFeatures(panel) {
+  panel.append(el("h3", { "data-tip": TIPS.features, text: "Capabilities" }));
+  if (state.featureRegistry.length === 0) {
+    panel.append(el("p", { class: "muted", text: "No capability registry in the payload." }));
+    return;
+  }
+  const def = state.defs[state.role];
+  const wrap = el("div", { class: "features" });
+  for (const feature of state.featureRegistry) {
+    const authored = def.features ? def.features[feature.id] : undefined;
+    const on = effectiveFlag(def, feature.id);
+    const row = el("div", { class: "feature" + (on ? " on" : "") });
+    const sel = el("select", { class: "feature-state", "data-tip": TIPS.featureState });
+    sel.append(el("option", { value: "inherit", text: "inherit" }));
+    sel.append(el("option", { value: "on", text: "on" }));
+    sel.append(el("option", { value: "off", text: "off" }));
+    sel.value = authored === undefined ? "inherit" : authored ? "on" : "off";
+    sel.addEventListener("change", () => {
+      def.features = def.features || {};
+      if (sel.value === "inherit") {
+        delete def.features[feature.id];
+        if (Object.keys(def.features).length === 0) delete def.features;
+      } else {
+        def.features[feature.id] = sel.value === "on";
+      }
+      renderEditor();
+      renderRoles();
+      scheduleRecompute();
+    });
+    const origin = authored === undefined ? (state.features[feature.id] === true ? "global on" : "global off") : "role override";
+    row.append(
+      el("div", { class: "feature-head" }, [
+        sel,
+        el("span", { class: "feature-label", "data-tip": feature.description + "\n\n" + feature.buys, text: feature.label }),
+        el("span", { class: "feature-origin muted", text: origin }),
+      ]),
+    );
+    row.append(el("div", { class: "feature-bundle muted", text: "recommended: " + bundleText(feature.recommended) }));
+    const knobs = el("div", { class: "feature-knobs" });
+    for (const knob of bundleKnobs(feature.recommended)) knobs.append(knobField(def, feature.id, knob));
+    row.append(knobs);
+    wrap.append(row);
+  }
+  panel.append(wrap);
+}
+
 function renderEditor() {
   const panel = document.getElementById("editor");
   panel.textContent = "";
@@ -650,6 +1010,8 @@ function renderEditor() {
   }
   panel.append(checks);
 
+  renderFocus(panel);
+
   const imgCb = el("input", { type: "checkbox" });
   imgCb.checked = !!(def.filters && def.filters.image);
   imgCb.addEventListener("change", () => {
@@ -659,6 +1021,21 @@ function renderEditor() {
   });
   panel.append(el("label", { class: "check" }, [imgCb, el("span", { "data-tip": TIPS.imageFilter, text: "requires image input (filters.image)" })]));
 
+  panel.append(el("h3", { "data-tip": TIPS.providerPin, text: "Provider pin" }));
+  const pin = el("input", { type: "text", class: "desc", "data-tip": TIPS.providerPin, value: def.providerPin || "", placeholder: "provider slug, e.g. deepinfra/fp8" });
+  pin.addEventListener("change", () => {
+    // Empty clears the key (default routing); a tiered slug is kept verbatim.
+    const value = pin.value.trim();
+    if (value === "") delete def.providerPin;
+    else def.providerPin = value;
+    renderEditor();
+    renderRoles();
+    scheduleRecompute();
+  });
+  panel.append(el("div", { class: "row-controls" }, [pin]));
+
+  renderFeatures(panel);
+
   panel.append(el("h3", { "data-tip": TIPS.thinking, text: "Thinking level" }));
   const bareLocked = state.effective[state.role]?.thinking !== undefined;
   const levelSel = el("select", { id: "thinking", "data-tip": TIPS.thinking });
@@ -746,7 +1123,7 @@ async function onExport() {
   try {
     const res = await api("/api/export", { roles: dirty });
     if (res.ok) {
-      state.exportMessage = "wrote " + res.roles.length + " role(s)" + (res.backupPath ? " — backup: " + res.backupPath : "");
+      state.exportMessage = "wrote " + res.roles.length + " role(s) to " + (res.lockPath || state.lockPath) + (res.backupPath ? " — backup: " + res.backupPath : "");
       for (const role of res.roles) state.effective[role] = structuredClone(state.defs[role]);
       renderRoles();
       renderEditor();
@@ -785,20 +1162,40 @@ function onDownload() {
 async function onRefresh() {
   if (!confirm("Refetch the leaderboard and OpenRouter data? This hits the network.")) return;
   try {
-    const data = await api("/api/refresh", {});
-    renderMeta(data);
-    await recompute();
+    applyBootstrap(await api("/api/refresh", {}));
   } catch (err) {
     alert("Refresh failed: " + err.message);
   }
 }
 
+/** Switch the active scope. Unsaved edits are confirmed first (mirroring
+ * Refresh); the returned payload rebuilds every per-scope panel. */
+async function onScopeChange(event) {
+  const id = event.target.value;
+  if (id === state.activeScope) return;
+  if (Object.keys(dirtyRoles()).length > 0 && !confirm("Discard unsaved role edits and switch scope?")) {
+    event.target.value = state.activeScope;
+    return;
+  }
+  try {
+    applyBootstrap(await api("/api/scope", { scope: id }));
+  } catch (err) {
+    alert("Scope switch failed: " + err.message);
+    event.target.value = state.activeScope;
+  }
+}
+
 // ---------------------------------------------------------------------------
 // Boot
 // ---------------------------------------------------------------------------
 
-async function boot() {
-  const data = await api("/api/bootstrap");
+/** Rebuild every panel from a bootstrap payload (boot, scope switch, refresh).
+ * The per-scope editing state is rebuilt from the payload, so dirty tracking is
+ * per scope; the previously selected role is kept when the new scope has it. */
+function applyBootstrap(data) {
+  const previousRole = state.role;
+  state.scopes = data.scopes || [];
+  state.activeScope = data.activeScope;
   state.universe = data.universe;
   state.effective = {};
   for (const [name, entry] of Object.entries(state.universe)) state.effective[name] = entry.def;
@@ -806,12 +1203,34 @@ async function boot() {
   state.defaults = data.defaults;
   state.metrics = data.metrics;
   state.metricMeta = data.metricMeta;
+  state.focusAssessments = data.focusAssessments || {};
   state.levels = data.levels;
   state.thinkingFactors = data.thinkingFactors;
   state.lockPath = data.lockPath;
-  initTips();
+  state.availability = data.availability;
+  state.features = data.features || {};
+  state.featureRegistry = data.featureRegistry || [];
+  state.rows = [];
+  state.selectedId = null;
+  state.explain = null;
+  state.errors = [];
+  state.exportMessage = "";
   renderMeta(data);
   renderRoles();
+  renderErrors();
+  renderTable();
+  const role = previousRole && state.defs[previousRole] ? previousRole : Object.keys(state.defs)[0];
+  if (role) selectRole(role);
+  else {
+    state.role = null;
+    renderEditor();
+    renderExplain();
+  }
+}
+
+async function boot() {
+  initTips();
+  applyBootstrap(await api("/api/bootstrap"));
 
   document.getElementById("filter").addEventListener("input", (e) => {
     state.filter = e.target.value;
@@ -821,6 +1240,12 @@ async function boot() {
     state.topn = e.target.value;
     renderTable();
   });
+  const hideBlocked = document.getElementById("hide-blocked");
+  hideBlocked.dataset.tip = TIPS.hideBlocked;
+  hideBlocked.addEventListener("change", (e) => {
+    state.hideBlocked = e.target.checked;
+    renderTable();
+  });
   const exportBtn = document.getElementById("export");
   exportBtn.dataset.tip = TIPS.exportBtn;
   exportBtn.addEventListener("click", onExport);
@@ -830,9 +1255,6 @@ async function boot() {
   const downloadBtn = document.getElementById("download");
   downloadBtn.dataset.tip = TIPS.download;
   downloadBtn.addEventListener("click", onDownload);
-
-  const first = Object.keys(state.defs)[0];
-  if (first) selectRole(first);
 }
 
 boot().catch((err) => {

package/web/index.html

@@ -21,6 +21,7 @@
           <option value="all">all</option>
         </select>
       </label>
+      <label class="check"><input id="hide-blocked" type="checkbox"> hide key-blocked</label>
     </div>
     <div id="errors"></div>
     <div id="table-wrap"><table id="table"></table></div>