clay-server 5.2.0-beta.1 → 5.2.0-beta.11

package/lib/public/modules/vendor-usage-model.js

@@ -0,0 +1,215 @@
+// vendor-usage-model.js - Pure projection of the owner-scoped vendor usage
+// overview into what the top bar shows. No DOM, store or network access.
+//
+// Principle: a value is shown only if it was observed. A missing observation is
+// "Unknown", never 0%. Ages are measured from the server's own clock so a
+// skewed browser clock cannot make an old observation look fresh.
+
+import { formatMetric, pickHeadline } from "./vendor-usage-format.js";
+
+var STALE_AFTER_MS = 15 * 60 * 1000;
+var WARNING_PERCENT = 80;
+
+var TYPE_LABELS = {
+  five_hour: "5h",
+  seven_day: "7d",
+  seven_day_opus: "7d Opus",
+  seven_day_sonnet: "7d Sonnet",
+  overage: "Extra usage",
+  seven_day_overage_included: "7d included extra usage",
+};
+
+export function estimatedServerNow(overview, nowMs) {
+  if (!overview || !Number.isFinite(overview.serverNowMs) || !Number.isFinite(overview.receivedAtMs)) return nowMs;
+  return overview.serverNowMs + (nowMs - overview.receivedAtMs);
+}
+
+export function ageText(ms) {
+  if (!Number.isFinite(ms) || ms < 0) return "";
+  var minutes = Math.floor(ms / 60000);
+  if (minutes < 1) return "just now";
+  if (minutes < 60) return minutes + "m ago";
+  var hours = Math.floor(minutes / 60);
+  if (hours < 48) return hours + "h ago";
+  return Math.floor(hours / 24) + "d ago";
+}
+
+export function durationText(ms) {
+  if (!Number.isFinite(ms) || ms <= 0) return "";
+  var totalMinutes = Math.floor(ms / 60000);
+  var days = Math.floor(totalMinutes / 1440);
+  var hours = Math.floor((totalMinutes % 1440) / 60);
+  var minutes = totalMinutes % 60;
+  if (days >= 2) return days + "d " + hours + "h";
+  if (totalMinutes >= 60) return Math.floor(totalMinutes / 60) + "h " + minutes + "m";
+  return Math.max(1, minutes) + "m";
+}
+
+export function windowLabel(entry, vendor) {
+  var label;
+  if (entry.kind === "reset") {
+    label = TYPE_LABELS[entry.rateLimitType] || entry.rateLimitType || "Usage";
+  } else {
+    var mins = entry.windowDurationMins;
+    if (!Number.isFinite(mins) || mins <= 0) label = "Usage";
+    else if (mins % 1440 === 0) label = (mins / 1440) + "d";
+    else if (mins % 60 === 0) label = (mins / 60) + "h";
+    else label = mins + "m";
+  }
+  // A separate limit bucket (for example a model-specific one) keeps its name.
+  if (entry.limitId && entry.limitId !== vendor) label += " (" + entry.limitId + ")";
+  return label;
+}
+
+function percentOf(entry) {
+  return Number.isFinite(entry.usedPercent) ? entry.usedPercent : null;
+}
+
+function windowView(entry, vendor, serverNow) {
+  var percent = percentOf(entry);
+  var resetText = entry.resetsAt ? durationText(entry.resetsAt - serverNow) : "";
+  var warn = (percent !== null && percent >= WARNING_PERCENT) || entry.status === "allowed_warning" || entry.status === "rejected";
+  var observed = Number.isFinite(entry.observedAtMs) ? serverNow - entry.observedAtMs : null;
+  return {
+    label: windowLabel(entry, vendor),
+    percent: percent,
+    percentText: percent === null ? "" : Math.round(percent) + "% used",
+    resetText: resetText,
+    resetsAt: entry.resetsAt || null,
+    warning: warn,
+    observedAgeMs: observed,
+    observedText: observed === null ? "observation time unknown" : "observed " + ageText(observed),
+    origin: entry.origin === "history" ? "history" : "live",
+  };
+}
+
+var MAX_CHIPS = 3;
+
+function capabilityOf(info, entry) {
+  if (entry && entry.capability) return entry.capability;
+  // An older server without capabilities: only the observed path exists.
+  return { mode: info && info.rateLimitTracking === true ? "event" : "unintegrated", observed: info && info.rateLimitTracking === true, units: [] };
+}
+
+function accountRows(account, serverNow) {
+  if (!account || !Array.isArray(account.metrics)) return [];
+  var age = Number.isFinite(account.fetchedAtMs) ? serverNow - account.fetchedAtMs : null;
+  var stale = account.stale === true || (age !== null && age >= STALE_AFTER_MS);
+  return account.metrics.map(function (metric) {
+    var row = formatMetric(metric);
+    row.resetText = row.resetsAtMs ? durationText(row.resetsAtMs - serverNow) : "";
+    row.expired = !!(row.resetsAtMs && row.resetsAtMs <= serverNow);
+    row.stale = stale;
+    row.source = "account";
+    row.observedAgeMs = age;
+    row.observedText = age === null ? "read time unknown" : "read " + ageText(age);
+    return row;
+  }).filter(function (row) { return !row.expired; });
+}
+
+// Why a vendor has no figures, in the vendor's own terms.
+function statusLine(cap, account, hasObserved) {
+  if (cap.mode === "unintegrated" || cap.mode === "unsupported") return cap.reason || "Not integrated: no verified usage source.";
+  var status = account && account.status;
+  if (account && account.fetching) return "Checking account usage\u2026";
+  if (status === "refused") return account.message || "Account usage is not available for you.";
+  if (status === "no_auth") return "Not signed in, so account usage cannot be read.";
+  if (status === "expired_auth") return "Sign-in has expired; run the vendor CLI once to refresh it.";
+  if (status === "error") return (account.message || "Account usage could not be read.") + (Number.isFinite(account.retryAtMs) ? " Will retry later." : "");
+  if (cap.mode === "query" && (!status || status === "idle")) return "Not checked yet.";
+  if (!hasObserved) return cap.mode === "event" ? "Waiting for a report from one of your sessions. Usage is unknown, not zero." : "No usage reported. Usage is unknown, not zero.";
+  return "";
+}
+
+// Returns the display model for one vendor, or null when it is not installed.
+// The headline value, its label and its age always describe the same row: a
+// stale high row is never presented with the freshness of a different one.
+export function describeVendor(vendor, info, entry, overview, nowMs) {
+  if (!info) return null;
+  if (entry && entry.installed === false) return null;
+  var cap = capabilityOf(info, entry);
+  var serverNow = estimatedServerNow(overview, nowMs);
+  var name = info.displayName || vendor;
+  var meta = info.usageDashboard || null;
+  var observed = [];
+  if (entry && Array.isArray(entry.windows)) {
+    entry.windows.forEach(function (raw) {
+      if (raw.resetsAt && raw.resetsAt <= serverNow) return;
+      var row = windowView(raw, vendor, serverNow);
+      row.source = "session";
+      observed.push(row);
+    });
+  }
+  var account = entry && entry.account ? entry.account : null;
+  var accounts = accountRows(account, serverNow);
+  var lastSeenAge = entry && Number.isFinite(entry.lastObservedAtMs) ? serverNow - entry.lastObservedAtMs : null;
+  var chosen = null;
+  var fromAccount = accounts.length > 0 && !(accounts[0].stale && observed.length > 0);
+  if (fromAccount) {
+    chosen = pickHeadline(accounts);
+    chosen.percentText = chosen.percent === null ? "" : Math.round(chosen.percent) + "% used";
+  } else {
+    observed.forEach(function (row) { if (row.percent !== null && (chosen === null || row.percent > chosen.percent)) chosen = row; });
+    if (!chosen) observed.forEach(function (row) { if (row.resetText && (chosen === null || row.resetsAt < chosen.resetsAt)) chosen = row; });
+    if (!chosen && observed.length) chosen = observed[0];
+    if (!chosen && accounts.length) { chosen = pickHeadline(accounts); fromAccount = true; }
+  }
+  var known = chosen !== null;
+  var rows = accounts.concat(observed);
+  var warning = rows.some(function (row) { return row.warning; });
+  var text = "Unknown";
+  var summary = name + " usage unknown";
+  var stale = false;
+  if (known) {
+    var chosenAge = chosen.observedAgeMs;
+    var headline = fromAccount ? chosen.headline : (chosen.percent !== null ? Math.round(chosen.percent) + "%" : chosen.resetText ? "resets " + chosen.resetText : "Observed");
+    text = headline;
+    stale = fromAccount ? chosen.stale === true : (chosenAge !== null && chosenAge >= STALE_AFTER_MS);
+    if (chosenAge === null) text += " \u00b7 age unknown";
+    else if (stale) text += " \u00b7 " + ageText(chosenAge);
+    var pieces = [name + " " + chosen.label + " usage"];
+    if (fromAccount) pieces.push(chosen.value);
+    else if (chosen.percent !== null) pieces.push(Math.round(chosen.percent) + "% used");
+    else if (chosen.resetText) pieces.push("resets in " + chosen.resetText);
+    pieces.push(fromAccount ? "account, " + chosen.observedText : chosen.observedText);
+    summary = pieces.join(", ");
+  }
+  var others = entry && Number.isFinite(entry.otherSourceCount) ? entry.otherSourceCount : 0;
+  return {
+    vendor: vendor, name: name, mode: cap.mode, capability: cap, known: known, warning: warning, stale: stale,
+    text: text, summary: summary, rows: rows, accountCount: accounts.length, observedCount: observed.length,
+    status: statusLine(cap, account, observed.length > 0 || accounts.length > 0),
+    accountSource: cap.source || "",
+    sourceSessionId: entry && entry.sourceSessionId !== undefined ? entry.sourceSessionId : null,
+    otherSourceCount: others,
+    lastObservedText: lastSeenAge === null ? "" : ageText(lastSeenAge),
+    href: meta && meta.href || "", linkTitle: meta && meta.title || "", icon: meta && meta.icon || info.avatar || "",
+  };
+}
+
+// Every installed vendor, in registry order. Nothing is shown until the server
+// has answered for this project and user.
+export function allVendors(vendorInfo, overview, nowMs) {
+  if (!overview) return [];
+  var infos = vendorInfo || {};
+  var byVendor = {};
+  (Array.isArray(overview.vendors) ? overview.vendors : []).forEach(function (entry) { byVendor[entry.vendor] = entry; });
+  var result = [];
+  Object.keys(infos).forEach(function (vendor) {
+    // Without a server entry only a tracked vendor is listed (older servers).
+    if (!byVendor[vendor] && infos[vendor].rateLimitTracking !== true) return;
+    var view = describeVendor(vendor, infos[vendor], byVendor[vendor], overview, nowMs);
+    if (view) result.push(view);
+  });
+  return result;
+}
+
+// Compact bar: chips only for vendors that have figures (warnings first, then
+// registry order, at most MAX_CHIPS); everything else lives in the list.
+export function overviewVendors(vendorInfo, overview, nowMs) {
+  var all = allVendors(vendorInfo, overview, nowMs);
+  var withData = all.filter(function (view) { return view.known; });
+  var ordered = withData.filter(function (v) { return v.warning; }).concat(withData.filter(function (v) { return !v.warning; }));
+  var shown = ordered.slice(0, MAX_CHIPS);
+  return all.filter(function (view) { return shown.indexOf(view) !== -1; });
+}

package/lib/public/modules/vendor-usage-overview.js

@@ -0,0 +1,312 @@
+// vendor-usage-overview.js - Top-bar usage overview for every tracked vendor.
+//
+// This is a read-only projection of the owner-scoped `vendor_usage_overview`
+// message. It sits beside the existing active-session usage pill and never
+// touches rejection, warning or scheduling state in app-rate-limit.js.
+
+import { store } from './store.js';
+import { getWs } from './ws-ref.js';
+import { iconHtml, refreshIcons } from './icons.js';
+import { overviewVendors, allVendors } from './vendor-usage-model.js';
+import { fillListPopover } from './vendor-usage-list.js';
+
+var LIST_KEY = "__all";
+
+var groupEl = null;
+var records = {};
+var tickTimer = null;
+var outsideHandler = null;
+var keyHandler = null;
+var requestCounter = 0;
+var pendingRequestId = null;
+
+// `refresh` asks the server to read account usage for vendors that support it;
+// the server caches, so repeating it is cheap. Replies echo the request id.
+function requestOverview(refresh) {
+  var ws = getWs();
+  if (!ws || ws.readyState !== 1) return;
+  pendingRequestId = "vu-" + (++requestCounter) + "-" + Date.now().toString(36);
+  var message = { type: "vendor_usage_get", slug: store.get('currentSlug') || undefined, requestId: pendingRequestId };
+  if (refresh) message.refresh = true;
+  ws.send(JSON.stringify(message));
+}
+
+// A reply is shown only for the project, user and request it was asked for.
+// A delayed reply from before a project or account change is dropped.
+export function handleVendorUsageOverview(msg) {
+  if (!msg || msg.error) return;
+  var slug = store.get('currentSlug');
+  if (slug && msg.slug !== slug) return;
+  if ((msg.userId || null) !== (store.get('myUserId') || null)) return;
+  if (msg.requestId !== undefined && msg.requestId !== pendingRequestId) return;
+  var vendors = Array.isArray(msg.vendors) ? msg.vendors : [];
+  store.set({ vendorUsageOverview: { slug: msg.slug, serverNowMs: msg.serverNowMs, receivedAtMs: Date.now(), vendors: vendors } });
+}
+
+function el(tag, className, text) {
+  var node = document.createElement(tag);
+  if (className) node.className = className;
+  if (text !== undefined) node.textContent = text;
+  return node;
+}
+
+function closePopover(restoreFocus) {
+  var open = store.get('vendorUsageOpen');
+  if (!open) return;
+  store.set({ vendorUsageOpen: null });
+  var record = records[open];
+  if (restoreFocus && record && typeof record.chip.focus === "function") record.chip.focus();
+}
+
+function sourceNote(view) {
+  var note = view.lastObservedText ? "Latest report " + view.lastObservedText : "Not observed yet in this project";
+  if (view.sourceSessionId !== null && view.sourceSessionId !== undefined) note += " from session #" + view.sourceSessionId;
+  note += ".";
+  if (view.otherSourceCount > 0) note += " " + view.otherSourceCount + " other session" + (view.otherSourceCount === 1 ? "" : "s") + " reported separately and are not combined.";
+  return note;
+}
+
+function ensurePopover(record, view) {
+  if (!record.pop) {
+    var pop = el("div", "vendor-usage-popover");
+    pop.setAttribute("role", "dialog");
+    record.title = el("div", "vendor-usage-popover-title");
+    record.rows = el("div", "vendor-usage-rows");
+    record.notes = el("div", "vendor-usage-notes");
+    pop.appendChild(record.title);
+    pop.appendChild(record.rows);
+    pop.appendChild(record.notes);
+    // The link is created once and only updated, so keyboard focus on it
+    // survives refreshes.
+    record.link = el("a", "vendor-usage-link");
+    record.link.target = "_blank";
+    record.link.rel = "noopener";
+    record.linkLabel = el("span", "", "Open usage dashboard");
+    record.link.appendChild(record.linkLabel);
+    record.link.insertAdjacentHTML("beforeend", iconHtml("external-link"));
+    pop.appendChild(record.link);
+    record.item.appendChild(pop);
+    record.pop = pop;
+  }
+  record.pop.setAttribute("aria-label", view.name + " usage");
+  record.title.textContent = view.name;
+  record.rows.textContent = "";
+  view.rows.forEach(function (row) {
+    var line = el("div", "vendor-usage-row" + (row.warning ? " warning" : "") + (row.stale ? " stale" : ""));
+    line.appendChild(el("span", "vendor-usage-row-label", row.label));
+    var parts = [];
+    if (row.source === "account") { if (row.value) parts.push(row.value); } else if (row.percentText) parts.push(row.percentText);
+    if (row.resetText) parts.push("resets in " + row.resetText);
+    var value = el("span", "vendor-usage-row-value");
+    value.appendChild(el("span", "", parts.length ? parts.join(" \u00b7 ") : "Limit window"));
+    var origin = row.source === "account" ? "account, " : (row.origin === "history" ? "session record, " : "session, ");
+    value.appendChild(el("span", "vendor-usage-row-age", origin + row.observedText + (row.stale ? " (stale)" : "") + (row.origin === "history" ? " (earlier session record)" : "")));
+    line.appendChild(value);
+    record.rows.appendChild(line);
+  });
+  record.notes.textContent = "";
+  if (view.status) record.notes.appendChild(el("div", "vendor-usage-note", view.status));
+  if (view.accountCount > 0 && view.accountSource) record.notes.appendChild(el("div", "vendor-usage-note", "Account figures: " + view.accountSource + ". Units are the vendor's own and are not converted."));
+  if (view.observedCount > 0) {
+    record.notes.appendChild(el("div", "vendor-usage-note", sourceNote(view)));
+    record.notes.appendChild(el("div", "vendor-usage-note", "Session rows come from your own sessions in this project; another account or session may differ."));
+  }
+  if (view.href) {
+    if (record.link.getAttribute("href") !== view.href) record.link.href = view.href;
+    record.link.title = view.linkTitle || "";
+    record.link.style.display = "";
+  } else {
+    record.link.style.display = "none";
+  }
+}
+
+function removePopover(record) {
+  if (record.pop) { record.pop.remove(); record.pop = null; }
+}
+
+// The popover is absolutely positioned under its chip, right-aligned; a measured
+// shift keeps it inside the viewport.
+function placePopover(pop) {
+  if (typeof pop.getBoundingClientRect !== "function") return;
+  pop.style.marginRight = "";
+  var bounds = pop.getBoundingClientRect();
+  var viewport = document.documentElement.clientWidth;
+  var shift = bounds.left < 8 ? 8 - bounds.left : Math.min(0, viewport - 8 - bounds.right);
+  if (shift) pop.style.marginRight = (-shift) + "px";
+}
+
+function bindDismissal(open) {
+  if (open && !outsideHandler) {
+    outsideHandler = function (event) {
+      if (groupEl && !groupEl.contains(event.target)) closePopover(false);
+    };
+    keyHandler = function (event) {
+      if (event.key === "Escape") { closePopover(true); }
+    };
+    document.addEventListener("pointerdown", outsideHandler, true);
+    document.addEventListener("keydown", keyHandler, true);
+  } else if (!open && outsideHandler) {
+    document.removeEventListener("pointerdown", outsideHandler, true);
+    document.removeEventListener("keydown", keyHandler, true);
+    outsideHandler = null;
+    keyHandler = null;
+  }
+}
+
+function removeGroup() {
+  if (groupEl) { groupEl.remove(); groupEl = null; }
+  records = {};
+  bindDismissal(false);
+  if (tickTimer) { clearInterval(tickTimer); tickTimer = null; }
+}
+
+function createRecord(view) {
+  var item = el("span", "vendor-usage-item");
+  var chip = el("button", "top-bar-pill vendor-usage-chip");
+  chip.type = "button";
+  chip.setAttribute("data-vendor", view.vendor);
+  chip.setAttribute("aria-haspopup", "dialog");
+  var record = { item: item, chip: chip, icon: null, text: el("span", "vendor-usage-chip-text"), pop: null };
+  chip.appendChild(record.text);
+  chip.addEventListener("click", function () {
+    var opening = store.get('vendorUsageOpen') !== view.vendor;
+    store.set({ vendorUsageOpen: opening ? view.vendor : null });
+    if (opening) requestOverview(true);
+  });
+  item.appendChild(chip);
+  return record;
+}
+
+function updateChip(record, view, open) {
+  record.chip.className = "top-bar-pill vendor-usage-chip " + (view.warning ? "pill-warning" : "pill-dim") + (view.known ? "" : " unknown") + (view.stale ? " stale" : "");
+  record.chip.setAttribute("aria-expanded", open ? "true" : "false");
+  record.chip.setAttribute("aria-label", view.summary + ". Show details");
+  record.chip.title = view.summary;
+  if (view.icon) {
+    if (!record.icon) {
+      record.icon = el("img", "usage-check-vendor-icon");
+      record.icon.alt = "";
+      record.chip.insertBefore(record.icon, record.text);
+    }
+    if (record.icon.getAttribute("src") !== view.icon) record.icon.setAttribute("src", view.icon);
+  }
+  if (record.text.textContent !== view.text) record.text.textContent = view.text;
+}
+
+function updateListChip(record, listViews, open) {
+  var known = listViews.filter(function (view) { return view.known; }).length;
+  var summary = "Usage for " + listViews.length + " vendor" + (listViews.length === 1 ? "" : "s") + ", " + known + " with figures";
+  record.chip.className = "top-bar-pill vendor-usage-chip vendor-usage-list-chip pill-dim";
+  record.chip.setAttribute("aria-expanded", open ? "true" : "false");
+  record.chip.setAttribute("aria-label", summary + ". Show all vendors");
+  record.chip.title = summary;
+  if (!record.icon) {
+    record.icon = el("span", "vendor-usage-list-icon");
+    record.icon.insertAdjacentHTML("beforeend", iconHtml("gauge"));
+    record.chip.insertBefore(record.icon, record.text);
+  }
+  var text = known + "/" + listViews.length;
+  if (record.text.textContent !== text) record.text.textContent = text;
+}
+
+function ensureListPopover(record, listViews) {
+  if (!record.pop) {
+    var pop = el("div", "vendor-usage-popover vendor-usage-list-popover");
+    pop.setAttribute("role", "dialog");
+    pop.setAttribute("aria-label", "Usage by vendor");
+    record.title = el("div", "vendor-usage-popover-title", "Usage by vendor");
+    record.rows = el("div", "vendor-usage-rows");
+    pop.appendChild(record.title);
+    pop.appendChild(record.rows);
+    record.item.appendChild(pop);
+    record.pop = pop;
+  }
+  fillListPopover(record.rows, listViews, el);
+}
+
+// Updates stable elements in place. Chips, the popover and its link are never
+// recreated while they stay relevant, so focus survives refreshes.
+export function renderVendorUsageOverview() {
+  var actions = document.querySelector("#top-bar .top-bar-actions");
+  if (!actions) return;
+  var overview = store.get('vendorUsageOverview');
+  var info = store.get('vendorInfo');
+  var views = overviewVendors(info, overview, Date.now());
+  var listViews = allVendors(info, overview, Date.now());
+  if (listViews.length === 0) {
+    if (store.get('vendorUsageOpen')) store.set({ vendorUsageOpen: null });
+    removeGroup();
+    return;
+  }
+  var open = store.get('vendorUsageOpen');
+  if (open && open !== LIST_KEY && !views.some(function (view) { return view.vendor === open; })) {
+    open = null;
+    store.set({ vendorUsageOpen: null });
+  }
+  if (!groupEl) {
+    groupEl = el("div", "vendor-usage-overview");
+    groupEl.id = "vendor-usage-overview";
+    groupEl.setAttribute("role", "group");
+    groupEl.setAttribute("aria-label", "Vendor usage");
+  }
+  var anchor = document.getElementById("rate-limit-usage-link") || document.getElementById("skip-perms-pill");
+  if (groupEl.parentNode !== actions || groupEl.nextSibling !== anchor) actions.insertBefore(groupEl, anchor);
+  var present = {};
+  views.forEach(function (view, index) {
+    present[view.vendor] = true;
+    var record = records[view.vendor] || (records[view.vendor] = createRecord(view));
+    if (groupEl.children[index] !== record.item) groupEl.insertBefore(record.item, groupEl.children[index] || null);
+    updateChip(record, view, open === view.vendor);
+    if (open === view.vendor) {
+      var created = !record.pop;
+      ensurePopover(record, view);
+      placePopover(record.pop);
+      if (created) bindDismissal(true);
+    } else {
+      removePopover(record);
+    }
+  });
+  // The list entry is always last and reaches every installed vendor.
+  present[LIST_KEY] = true;
+  var listRecord = records[LIST_KEY] || (records[LIST_KEY] = createRecord({ vendor: LIST_KEY }));
+  if (groupEl.children[views.length] !== listRecord.item) groupEl.insertBefore(listRecord.item, groupEl.children[views.length] || null);
+  updateListChip(listRecord, listViews, open === LIST_KEY);
+  if (open === LIST_KEY) {
+    var listCreated = !listRecord.pop;
+    ensureListPopover(listRecord, listViews);
+    placePopover(listRecord.pop);
+    if (listCreated) bindDismissal(true);
+  } else {
+    removePopover(listRecord);
+  }
+  Object.keys(records).forEach(function (vendor) {
+    if (present[vendor]) return;
+    records[vendor].item.remove();
+    delete records[vendor];
+  });
+  if (!open) bindDismissal(false);
+  refreshIcons();
+  // Relative times only change slowly; one light timer keeps them honest.
+  if (!tickTimer) tickTimer = setInterval(renderVendorUsageOverview, 30000);
+}
+
+export function initVendorUsageOverview() {
+  store.subscribe(function (state, prev) {
+    var identityChanged = state.currentSlug !== prev.currentSlug || state.myUserId !== prev.myUserId;
+    if (identityChanged) {
+      // Another project or account must start unknown and ignore any reply
+      // that was requested before the change.
+      pendingRequestId = null;
+      if (state.vendorUsageOverview) {
+        store.set({ vendorUsageOverview: null, vendorUsageOpen: null });
+        if (state.connected) requestOverview(true);
+        return;
+      }
+    }
+    if (state.connected && (!prev.connected || identityChanged)) requestOverview(true);
+    if (state.vendorUsageOverview !== prev.vendorUsageOverview || state.vendorInfo !== prev.vendorInfo
+        || state.currentVendor !== prev.currentVendor || state.vendorUsageOpen !== prev.vendorUsageOpen) {
+      renderVendorUsageOverview();
+    }
+  });
+}

package/lib/public/modules/wireframe-workbench.js

@@ -1,3 +1,4 @@
+import { forwardStudioPresentation, registerStudioPaint } from './clay-studio-render.js';
 import { sketchBrand, sketchCredit } from './wireframe-style.js';
 import { store } from './store.js';
 import { claimRightWorkbench, registerRightWorkbench, releaseRightWorkbench } from './right-workbench.js';
@@ -80,7 +81,7 @@ function createPanel() {
 export function openWireframe(message) {
   if (!message || typeof message.source !== 'string' || new TextEncoder().encode(message.source).length > 100000) return;
   if (store.get('paneMode') && window.parent !== window) {
-    window.parent.postMessage({ type: 'clay-pane-present-wireframe', message: message, projectSlug: store.get('currentSlug'), sessionId: store.get('activeSessionId') }, window.location.origin);
+    forwardStudioPresentation(message, 'clay-pane-present-wireframe');
     return;
   }
   claimRightWorkbench('wireframe');
@@ -92,7 +93,8 @@ export function openWireframe(message) {
   el.querySelector('header strong').textContent = draft.title;
   el.querySelector('.wireframe-save-status').textContent = '';
   el.querySelector('form').hidden = true;
-  draw(draft, el).catch(function () {});
+  var painted = draw(draft, el); registerStudioPaint(Object.assign({}, message, { source: draft.source }), el.querySelector("header"), painted, el.querySelector(".wireframe-workbench-canvas"));
+  painted.catch(function () {});
 }
 function draw(draft, el) {
   var canvas = el.querySelector('.wireframe-workbench-canvas');
@@ -104,6 +106,7 @@ function draw(draft, el) {
     var image = wireframeImage(svg, draft.title);
     canvas.replaceChildren(image);
     mountWireframeViewport(canvas, image, el.querySelector('.wireframe-zoom'));
+    return image.decode ? image.decode() : undefined;
   }).catch(function (error) {
     if (store.get('wireframeDraft') !== active) throw error;
     status.textContent = error.name === 'AbortError' ? 'Rendering was interrupted. Reopen the wireframe to retry.' : error.message;

package/lib/public/muse-avatar.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Muse Code">
+  <rect width="64" height="64" rx="14" fill="#111827"/>
+  <path d="M14 45V19h7l11 14 10-14h8v26h-7V30L32 45 21 30v15z" fill="#f8fafc"/>
+</svg>

package/lib/public/style.css

@@ -6,15 +6,15 @@
 @import url("css/linear.css");
 @import url("css/base.css?v=20260828-type1");
 @import url("css/icon-strip.css?v=20260828-surfaces4");
-@import url("css/title-bar.css?v=20260828-project-header1");
+@import url("css/title-bar.css?v=20261017-star4");
 @import url("css/clay-workspace.css?v=20261010-tint");
 @import url("css/pane.css");
 @import url("css/worker-proposal.css");
 @import url("css/workspace-assignment.css");
 @import url("css/session-actions.css?v=20260828-contrast1");
-@import url("css/sidebar.css?v=20260828-session-list3");
+@import url("css/sidebar.css?v=20261018-quick-appearance");
 @import url("css/session-folders.css");
-@import url("css/overlays.css?v=20260827-brand3");
+@import url("css/overlays.css?v=20261017-usage2");
 @import url("css/menus.css");
 @import url("css/messages.css?v=20260828-delegated-muted1");
 @import url("css/generated-images.css?v=20260829-save-details1");
@@ -22,7 +22,7 @@
 @import url("css/elicitation-form.css");
 @import url("css/input.css?v=20261002-stop-inline1");
 @import url("css/pending-message-queue.css?v=20260914-queue1");
-@import url("css/filebrowser.css?v=20260829-terminal-canvas1");
+@import url("css/filebrowser.css?v=20261018-browser-header1");
 @import url("css/git-panel.css");
 @import url("css/git-placard.css");
 @import url("css/diff.css");
@@ -59,15 +59,17 @@
 @import url("css/home-debate-planning.css");
 @import url("css/home-mate-creation.css");
 @import url("css/home-mate-settings.css");
+@import url("css/mate-avatar-gallery.css");
 @import url("css/home-mate-model-picker.css");
-@import url("css/project-mate-creation.css");
+@import url("css/project-mate-creation.css?v=20261018-clay-choices");
 @import url("css/home-debate-live.css");
 @import url("css/notifications-center.css");
 @import url("css/tui-attention.css?v=20260829-terminal-canvas1");
 @import url("css/pwa-mobile.css?v=20260824f");
 @import url("css/avatar-imprints.css?v=20260829-imprints1");
 
-@import url("css/projects-hub.css");
+@import url("css/projects-hub.css?v=20261018-welcome-art");
+@import url("css/project-start.css");
 
 @import url("./css/shared-browser.css");
 
@@ -87,3 +89,9 @@
 @import url("css/server-settings-system.css");
 
 @import url("css/project-settings-modal.css");
+@import url("css/settings-shell.css");
+
+@import url("css/clay-tool-activity.css");
+
+@import url("css/contextual-clay.css?v=20261018-loading-scene");
+@import url("css/mate-loading-scene.css");

package/lib/public/sw.js

@@ -1,4 +1,4 @@
-var CACHE_NAME = "clay-offline-v4";
+var CACHE_NAME = "clay-offline-v5";
 
 self.addEventListener("install", function (event) {
   event.waitUntil(self.skipWaiting());
@@ -23,6 +23,8 @@ self.addEventListener("activate", function (event) {
 function shouldCache(request, response) {
   if (request.method !== "GET") return false;
   if (!response || !response.ok) return false;
+  var cacheControl = response.headers && response.headers.get("Cache-Control") || "";
+  if (/(^|,)\s*(private|no-store)(?:\s*=\s*[^,]*)?(?=\s*(?:,|$))/i.test(cacheControl)) return false;
   // Cache same-origin static assets and CDN resources (jsdelivr, fonts)
   var url = new URL(request.url);
   if (url.origin === self.location.origin) return true;