dsh-agy 0.4.2 → 0.4.3

package/lib/client.js

@@ -31,35 +31,70 @@ window.__ModuleLoader__.load({
 		*   host has no primitive for.
 		*/
 		const STYLE_ID = "dsh-agy-styles";
-		const CSS = `
+		/**
+		* Single source of truth for `--dsw-alias-*` fallbacks: the colour an alias
+		* renders with when the host theme has not defined it. The host owns the real
+		* values; this table only pins the degraded-mode answer, and every usage must
+		* go through `aliasVar()` so one alias cannot carry two answers — without the
+		* table the file grew three values for `border-l2` and a renamed-forever
+		* `--dsw-alias-brand-primary-new-colorprimary-new-color` that no host defines.
+		* Normalisation picks (degraded-mode only, enforced by the alias scans in
+		* tests/client.test.ts): `state-success` took `#10b981` over the duplicated
+		* `#22c55e` because the 60%-alpha glow variant derives from the same base, and
+		* `state-business` took the brand blue over the popover pill's emerald —
+		* active/cooling/disabled reads as blue/amber/grey, not success-green.
+		*/
+		const ALIAS_FALLBACKS = {
+			"bg-layer-1": "#fff",
+			"bg-layer-2": "#f4f5f7",
+			"bg-layer-3": "#fff",
+			"bg-overlay": "#fff",
+			"border-l1": "rgba(0,0,0,.04)",
+			"border-l2": "#e5e6eb",
+			"border-l3": "rgba(0,0,0,.15)",
+			"brand-primary": "#4176e6",
+			"interactive-bg-hover": "#f4f5f7",
+			"label-primary": "#1f2329",
+			"label-secondary": "#61666b",
+			"label-tertiary": "#8f959e",
+			"state-business-primary": "#4176e6",
+			"state-error-primary": "#ec1313",
+			"state-error-secondary": "#f59e0b",
+			"state-success-primary": "#10b981",
+			"state-warn-primary": "#f59e0b"
+		};
+		function aliasVar(alias) {
+			return `var(--dsw-alias-${alias}, ${ALIAS_FALLBACKS[alias]})`;
+		}
+		const AGY_STYLES_CSS = `
 .agy-root { display: flex; flex-direction: column; gap: 12px; font: var(--dsw-font-xs-13); }
 .agy-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
-.agy-title { font: var(--dsw-font-base-strong-16); color: var(--dsw-alias-label-primary, #1f2329); }
-.agy-sub { margin-top: 3px; font: var(--dsw-font-xxs-12); color: var(--dsw-alias-label-tertiary, #8f959e); }
+.agy-title { font: var(--dsw-font-base-strong-16); color: ${aliasVar("label-primary")}; }
+.agy-sub { margin-top: 3px; font: var(--dsw-font-xxs-12); color: ${aliasVar("label-tertiary")}; }
 
 .agy-tabs {
   display: flex; align-items: flex-end; gap: 22px; margin-top: 2px;
-  border-bottom: 0.5px solid var(--dsw-alias-border-l2, #eef0f3);
+  border-bottom: 0.5px solid ${aliasVar("border-l2")};
 }
 .agy-tab {
   position: relative; border: 0; padding: 7px 1px 9px; background: transparent;
-  color: var(--dsw-alias-label-tertiary, #8f959e);
+  color: ${aliasVar("label-tertiary")};
   font: var(--dsw-font-xs-13); cursor: pointer;
 }
-.agy-tab:hover, .agy-tab[data-active="true"] { color: var(--dsw-alias-label-primary, #1f2329); }
+.agy-tab:hover, .agy-tab[data-active="true"] { color: ${aliasVar("label-primary")}; }
 /* Active tab is an underline rule, matching the Plugins settings section's own
    tab bar rather than introducing a second, boxed tab idiom. */
 .agy-tab[data-active="true"]::after {
   position: absolute; right: 0; bottom: -1px; left: 0; height: 2px;
-  border-radius: 2px 2px 0 0; background: var(--dsw-alias-label-primary, #1f2329);
+  border-radius: 2px 2px 0 0; background: ${aliasVar("label-primary")};
   content: '';
 }
 .agy-tab:focus-visible {
-  outline: 2px solid var(--dsw-alias-state-business-primary, #4176e6);
+  outline: 2px solid ${aliasVar("state-business-primary")};
   outline-offset: 2px;
   border-radius: 4px;
 }
-.agy-tab .agy-count { margin-left: 5px; font: var(--dsw-font-xxxs-11); color: var(--dsw-alias-label-tertiary, #8f959e); }
+.agy-tab .agy-count { margin-left: 5px; font: var(--dsw-font-xxxs-11); color: ${aliasVar("label-tertiary")}; }
 
 /* A failed action states WHAT failed and then WHY, on two lines. The default
    white-space (normal) folds that newline into a space and runs the verdict
@@ -67,35 +102,35 @@ window.__ModuleLoader__.load({
    .agy-notice already does for its own multi-line form. */
 .agy-error { padding: 9px 12px; border-radius: 8px; font: var(--dsw-font-xxs-12);
   white-space: pre-wrap; overflow-wrap: anywhere;
-  color: var(--dsw-alias-state-error-primary, #ec1313);
-  background: color-mix(in srgb, var(--dsw-alias-state-error-primary, #ec1313) 10%, transparent); }
+  color: ${aliasVar("state-error-primary")};
+  background: color-mix(in srgb, ${aliasVar("state-error-primary")} 10%, transparent); }
 /* A non-fatal outcome (a partial import). Neutral, not alarming, and it keeps
    newlines so a list of per-source failures stays readable. */
 .agy-notice { padding: 9px 12px; border-radius: 8px; font: var(--dsw-font-xxs-12);
   white-space: pre-wrap; overflow-wrap: anywhere;
-  color: var(--dsw-alias-label-secondary, #61666b);
-  background: var(--dsw-alias-bg-layer-2, #f4f5f7); }
-.agy-empty { padding: 24px 12px; text-align: center; font: var(--dsw-font-xs-13); color: var(--dsw-alias-label-tertiary, #8f959e); }
-.agy-hint { margin: 0; font: var(--dsw-font-xxs-12); color: var(--dsw-alias-label-tertiary, #8f959e); }
-.agy-aside { font: var(--dsw-font-xxxs-11); color: var(--dsw-alias-label-tertiary, #8f959e); }
+  color: ${aliasVar("label-secondary")};
+  background: ${aliasVar("bg-layer-2")}; }
+.agy-empty { padding: 24px 12px; text-align: center; font: var(--dsw-font-xs-13); color: ${aliasVar("label-tertiary")}; }
+.agy-hint { margin: 0; font: var(--dsw-font-xxs-12); color: ${aliasVar("label-tertiary")}; }
+.agy-aside { font: var(--dsw-font-xxxs-11); color: ${aliasVar("label-tertiary")}; }
 .agy-grow { flex: 1; }
 
 /* ── Grouping surface ───────────────────────────────────────────────────────
    DSH groups with spacing first and a light container second. A settings page
    built only from tables reads as a spreadsheet, so each block gets a card. */
 .agy-card {
-  border: 0.5px solid var(--dsw-alias-border-l2, #eef0f3);
+  border: 0.5px solid ${aliasVar("border-l2")};
   border-radius: 12px;
-  background: var(--dsw-alias-bg-layer-3, #fff);
+  background: ${aliasVar("bg-layer-3")};
   overflow: hidden;
 }
 .agy-card-head {
   display: flex; align-items: center; justify-content: space-between; gap: 10px;
   padding: 10px 12px;
-  border-bottom: 0.5px solid var(--dsw-alias-border-l1, rgba(0,0,0,.04));
-  background: var(--dsw-alias-bg-layer-2, #f9fafb);
+  border-bottom: 0.5px solid ${aliasVar("border-l1")};
+  background: ${aliasVar("bg-layer-2")};
 }
-.agy-card-title { font: var(--dsw-font-xs-strong-13); color: var(--dsw-alias-label-primary, #1f2329); }
+.agy-card-title { font: var(--dsw-font-xs-strong-13); color: ${aliasVar("label-primary")}; }
 .agy-card-body { padding: 6px 12px 8px; }
 
 /* ── Rows inside a card ────────────────────────────────────────────────────
@@ -111,8 +146,8 @@ window.__ModuleLoader__.load({
 .agy-live {
   display: flex; align-items: center; gap: 7px;
   margin: 2px 2px 6px; padding: 7px 8px; border-radius: 10px;
-  font: var(--dsw-font-xxs-12); color: var(--dsw-alias-label-secondary, #61666b);
-  background: var(--dsw-alias-bg-layer-2, #f4f5f7);
+  font: var(--dsw-font-xxs-12); color: ${aliasVar("label-secondary")};
+  background: ${aliasVar("bg-layer-2")};
 }
 /* Master/detail: the account list beside the selected account's detail, so a
  * row and the panel it opens stay in view together — but only when the
@@ -157,23 +192,23 @@ window.__ModuleLoader__.load({
 }
 .agy-rowitem[data-clickable="true"] { cursor: pointer; }
 .agy-rowitem[data-clickable="true"]:hover {
-  background: var(--dsw-alias-interactive-bg-hover, #f4f5f7);
+  background: ${aliasVar("interactive-bg-hover")};
 }
 .agy-rowitem[data-selected="true"] {
-  background: var(--dsw-alias-interactive-bg-hover, #f4f5f7);
+  background: ${aliasVar("interactive-bg-hover")};
 }
 .agy-rowitem:focus-visible {
-  outline: 2px solid var(--dsw-alias-label-primary, #1f2329);
+  outline: 2px solid ${aliasVar("label-primary")};
   outline-offset: -2px;
 }
 .agy-rowmain { min-width: 0; flex: 1 1 160px; display: flex; flex-direction: column; gap: 3px; }
 .agy-rowtitle { display: flex; align-items: center; gap: 7px; min-width: 0; }
 .agy-rowname {
-  font: var(--dsw-font-xs-strong-13); color: var(--dsw-alias-label-primary, #1f2329);
+  font: var(--dsw-font-xs-strong-13); color: ${aliasVar("label-primary")};
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
 }
 .agy-rowmeta {
-  font: var(--dsw-font-xxxs-11); color: var(--dsw-alias-label-tertiary, #8f959e);
+  font: var(--dsw-font-xxxs-11); color: ${aliasVar("label-tertiary")};
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
 }
 /* margin-left: auto right-aligns the cluster while it shares a line with the
@@ -191,15 +226,15 @@ window.__ModuleLoader__.load({
    the gap and their own left alignment, and the dividers turned a metric strip
    into a spreadsheet grid. */
 .agy-metric { padding: 12px 0; }
-.agy-metric-k { font: var(--dsw-font-xxxs-11); color: var(--dsw-alias-label-tertiary, #8f959e); }
+.agy-metric-k { font: var(--dsw-font-xxxs-11); color: ${aliasVar("label-tertiary")}; }
 /* The theme's own role carries family + size + line-height + weight; the
    metric only tightens the tracking. */
 .agy-metric-v { margin-top: 4px; font: var(--dsw-font-base-strong-16); letter-spacing: -.015em;
-  font-variant-numeric: tabular-nums; color: var(--dsw-alias-label-primary, #1f2329); }
+  font-variant-numeric: tabular-nums; color: ${aliasVar("label-primary")}; }
 .agy-metric-v small { margin-left: 2px; font: var(--dsw-font-xxs-strong-12);
-  color: var(--dsw-alias-label-tertiary, #8f959e); }
+  color: ${aliasVar("label-tertiary")}; }
 .agy-metric-d { margin-top: 3px; font: var(--dsw-font-xxxs-11);
-  color: var(--dsw-alias-label-tertiary, #8f959e); }
+  color: ${aliasVar("label-tertiary")}; }
 
 /* ── Token composition ─────────────────────────────────────────────────────
    A share bar per bucket, under the headline metrics. This exists to answer
@@ -212,16 +247,16 @@ window.__ModuleLoader__.load({
   display: grid; grid-template-columns: 64px minmax(0,1fr) 56px 44px;
   align-items: center; gap: 10px;
 }
-.agy-compose-k { font: var(--dsw-font-xxxs-11); color: var(--dsw-alias-label-tertiary, #8f959e); }
+.agy-compose-k { font: var(--dsw-font-xxxs-11); color: ${aliasVar("label-tertiary")}; }
 .agy-compose-track {
   height: 6px; border-radius: 3px; overflow: hidden;
-  background: var(--dsw-alias-border-l2, rgba(0,0,0,.12));
+  background: ${aliasVar("border-l2")};
 }
 .agy-compose-track i { display: block; height: 100%; border-radius: 3px; }
 .agy-compose-v { text-align: right; font: var(--dsw-font-xxs-12);
-  font-variant-numeric: tabular-nums; color: var(--dsw-alias-label-secondary, #61666b); }
+  font-variant-numeric: tabular-nums; color: ${aliasVar("label-secondary")}; }
 .agy-compose-p { text-align: right; font: var(--dsw-font-xxxs-11);
-  font-variant-numeric: tabular-nums; color: var(--dsw-alias-label-tertiary, #8f959e); }
+  font-variant-numeric: tabular-nums; color: ${aliasVar("label-tertiary")}; }
 /* A table's own footnote: states a column's scope that its header cannot. */
 .agy-table-note { padding: 6px 8px 2px; }
 /* The 65535 row is a CONFIGURATION of High, not a sibling tier: indenting it
@@ -231,25 +266,25 @@ window.__ModuleLoader__.load({
 /* ── Definition rows (label / value pairs) ───────────────────────────────── */
 .agy-defs { display: grid; grid-template-columns: 92px minmax(0,1fr); margin: 0; }
 .agy-defs dt {
-  padding: 7px 0; font: var(--dsw-font-xxs-12); color: var(--dsw-alias-label-tertiary, #8f959e);
-  border-bottom: 0.5px solid var(--dsw-alias-border-l1, rgba(0,0,0,.04));
+  padding: 7px 0; font: var(--dsw-font-xxs-12); color: ${aliasVar("label-tertiary")};
+  border-bottom: 0.5px solid ${aliasVar("border-l1")};
 }
 .agy-defs dd {
-  margin: 0; padding: 7px 0; font: var(--dsw-font-xxs-12); color: var(--dsw-alias-label-secondary, #61666b);
-  border-bottom: 0.5px solid var(--dsw-alias-border-l1, rgba(0,0,0,.04));
+  margin: 0; padding: 7px 0; font: var(--dsw-font-xxs-12); color: ${aliasVar("label-secondary")};
+  border-bottom: 0.5px solid ${aliasVar("border-l1")};
   overflow-wrap: anywhere;
 }
 .agy-defs dt:last-of-type, .agy-defs dd:last-of-type { border-bottom: 0; }
 
 /* ── Disclosure (the collapsible model-quota block) ──────────────────────── */
-.agy-disclosure { border-top: 0.5px solid var(--dsw-alias-border-l1, rgba(0,0,0,.04)); }
+.agy-disclosure { border-top: 0.5px solid ${aliasVar("border-l1")}; }
 .agy-disclosure-toggle {
   display: flex; align-items: center; gap: 7px; width: 100%;
   padding: 9px 0; border: 0; cursor: pointer;
   font: var(--dsw-font-xxs-strong-12); text-align: left;
-  color: var(--dsw-alias-label-secondary, #61666b); background: none;
+  color: ${aliasVar("label-secondary")}; background: none;
 }
-.agy-disclosure-toggle:hover { color: var(--dsw-alias-label-primary, #1f2329); }
+.agy-disclosure-toggle:hover { color: ${aliasVar("label-primary")}; }
 .agy-caret {
   flex: none; width: 0; height: 0; border-left: 4px solid currentColor;
   border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent;
@@ -267,7 +302,7 @@ window.__ModuleLoader__.load({
 .agy-thinking-group { display: flex; flex-direction: column; }
 .agy-thinking-group + .agy-thinking-group { margin-top: 16px; }
 .agy-thinking-group-name {
-  font: var(--dsw-font-xxs-strong-12); color: var(--dsw-alias-label-secondary, #61666b);
+  font: var(--dsw-font-xxs-strong-12); color: ${aliasVar("label-secondary")};
   margin-bottom: 2px;
 }
 .agy-thinking-group .agy-hint { margin: 0 0 8px; }
@@ -278,38 +313,38 @@ window.__ModuleLoader__.load({
    last one is why that group has no reference table. */
 .agy-thinking-notes { margin: 0 0 8px; padding-left: 18px; }
 .agy-thinking-notes li {
-  font: var(--dsw-font-xxxs-11); color: var(--dsw-alias-label-tertiary, #8f959e);
+  font: var(--dsw-font-xxxs-11); color: ${aliasVar("label-tertiary")};
   line-height: 1.6;
 }
 .agy-thinking-row {
   display: grid; grid-template-columns: 72px minmax(0, 180px) auto;
   align-items: center; gap: 14px; padding: 8px 0;
 }
-.agy-thinking-k { font: var(--dsw-font-xxs-12); color: var(--dsw-alias-label-secondary, #61666b); }
+.agy-thinking-k { font: var(--dsw-font-xxs-12); color: ${aliasVar("label-secondary")}; }
 /* Shortcut chips, not a second control: they fill the field beside them. */
 .agy-thinking-chips { display: flex; gap: 6px; }
 .agy-thinking-chip {
-  border: 0.5px solid var(--dsw-alias-border-l3, rgba(0,0,0,.15));
+  border: 0.5px solid ${aliasVar("border-l3")};
   background: transparent; cursor: pointer; border-radius: 10px;
   padding: 2px 8px; font: var(--dsw-font-xxxs-11);
-  color: var(--dsw-alias-label-secondary, #61666b);
+  color: ${aliasVar("label-secondary")};
 }
-.agy-thinking-chip:hover { background: var(--dsw-alias-interactive-bg-hover); }
+.agy-thinking-chip:hover { background: ${aliasVar("interactive-bg-hover")}; }
 .agy-thinking-chip:focus-visible {
-  outline: 2px solid var(--dsw-alias-brand-primary, #4176e6); outline-offset: 1px;
+  outline: 2px solid ${aliasVar("brand-primary")}; outline-offset: 1px;
 }
 .agy-disclosure-meta { margin-left: auto; font: var(--dsw-font-xxxs-11);
-  color: var(--dsw-alias-label-tertiary, #8f959e); font-variant-numeric: tabular-nums; }
+  color: ${aliasVar("label-tertiary")}; font-variant-numeric: tabular-nums; }
 
 /* ── 5h / weekly limits ────────────────────────────────────────────────────
    One group per upstream group (Gemini, Claude+GPT), each with its windows.
    The rows are a fixed 4-column grid so the bars and the percentages line up
    across groups: label / bar / percentage / reset countdown. */
 .agy-limits { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
-.agy-limit-age { font: var(--dsw-font-xxxs-11); color: var(--dsw-alias-label-tertiary, #8f959e); }
+.agy-limit-age { font: var(--dsw-font-xxxs-11); color: ${aliasVar("label-tertiary")}; }
 .agy-limit-group { display: flex; flex-direction: column; gap: 2px; }
 .agy-limit-group-name {
-  font: var(--dsw-font-xxs-strong-12); color: var(--dsw-alias-label-secondary, #61666b);
+  font: var(--dsw-font-xxs-strong-12); color: ${aliasVar("label-secondary")};
   padding-bottom: 2px;
 }
 .agy-limit-row {
@@ -317,33 +352,33 @@ window.__ModuleLoader__.load({
   align-items: center; gap: 10px; padding: 4px 0;
   font: var(--dsw-font-xxs-12);
 }
-.agy-limit-k { color: var(--dsw-alias-label-secondary, #61666b); }
+.agy-limit-k { color: ${aliasVar("label-secondary")}; }
 .agy-limit-track { height: 6px; border-radius: 3px; overflow: hidden;
-  background: var(--dsw-alias-border-l2, rgba(0,0,0,.12)); }
+  background: ${aliasVar("border-l2")}; }
 .agy-limit-track i { display: block; height: 100%; border-radius: 3px; }
 .agy-limit-p { text-align: right; font-variant-numeric: tabular-nums;
-  color: var(--dsw-alias-label-primary, #1f2329); }
+  color: ${aliasVar("label-primary")}; }
 .agy-limit-reset { text-align: right; font: var(--dsw-font-xxxs-11);
-  color: var(--dsw-alias-label-tertiary, #8f959e); }
+  color: ${aliasVar("label-tertiary")}; }
 /* The burn projection: indented to align with the bar (58px label + 10px gap),
    warn-tinted because "this window runs dry before it resets" is the one
    projection that asks the reader to act. */
 .agy-limit-burn { padding: 0 0 4px 68px;
   font: var(--dsw-font-xxxs-11);
-  color: var(--dsw-alias-state-warn-primary, #f59e0b); }
+  color: ${aliasVar("state-warn-primary")}; }
 
 /* ── Dense breakdown tables (Usage tab only) ─────────────────────────────── */
 .agy-table-wrap { padding: 6px 0 2px; }
 .agy-table { width: 100%; border-collapse: collapse; font: var(--dsw-font-xs-13); table-layout: fixed; }
 .agy-table th {
   text-align: left; padding: 0 8px 7px; font: var(--dsw-font-xxxs-strong-11);
-  color: var(--dsw-alias-label-tertiary, #8f959e);
-  border-bottom: 0.5px solid var(--dsw-alias-border-l2, #eef0f3); white-space: nowrap;
+  color: ${aliasVar("label-tertiary")};
+  border-bottom: 0.5px solid ${aliasVar("border-l2")}; white-space: nowrap;
 }
-.agy-table td { padding: 8px; vertical-align: middle; color: var(--dsw-alias-label-secondary, #61666b);
-  border-bottom: 0.5px solid var(--dsw-alias-border-l1, rgba(0,0,0,.04)); }
+.agy-table td { padding: 8px; vertical-align: middle; color: ${aliasVar("label-secondary")};
+  border-bottom: 0.5px solid ${aliasVar("border-l1")}; }
 .agy-table tr:last-child td { border-bottom: 0; }
-.agy-table tbody tr:hover td { background: var(--dsw-alias-bg-layer-2, #f4f5f7); }
+.agy-table tbody tr:hover td { background: ${aliasVar("bg-layer-2")}; }
 .agy-num { text-align: right; font-variant-numeric: tabular-nums; }
 /* Numeric HEADERS must right-align too, and .agy-num alone cannot do it: the
    .agy-table th rule above is specificity 0-1-1 and outranks the bare .agy-num
@@ -354,20 +389,20 @@ window.__ModuleLoader__.load({
    escalating with !important. */
 .agy-table th.agy-num { text-align: right; }
 /* Inline emphasis on a table cell: a strong role, not a heavier size. */
-.agy-strong { color: var(--dsw-alias-label-primary, #1f2329); font-weight: 500; }
+.agy-strong { color: ${aliasVar("label-primary")}; font-weight: 500; }
 .agy-mail { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .agy-mono { font-family: var(--ds-font-family-code); }
 /* The one external link in the section (a verification appeal URL). Colored and
    underlined with theme tokens rather than left to the browser default, which
    ignores both the light/dark theme and the host's brand color. */
-.agy-link { color: var(--dsw-alias-brand-primary-new-colorprimary-new-color, #4176e6); text-decoration: underline; }
+.agy-link { color: ${aliasVar("brand-primary")}; text-decoration: underline; }
 .agy-link:hover { opacity: 0.8; }
 
 .agy-bar { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; }
 .agy-bar .agy-track { width: 56px; height: 4px; border-radius: 2px; overflow: hidden;
-  background: var(--dsw-alias-border-l2, rgba(0,0,0,.12)); }
+  background: ${aliasVar("border-l2")}; }
 .agy-bar .agy-track i { display: block; height: 100%; border-radius: 2px;
-  background: var(--dsw-alias-brand-primary-new-colorprimary-new-color, #4176e6); }
+  background: ${aliasVar("brand-primary")}; }
 
 /* ── Range picker container ────────────────────────────────────────────────
    The pills themselves are the host Pill primitive (its own fill pair and
@@ -375,16 +410,16 @@ window.__ModuleLoader__.load({
 .agy-chips { display: flex; gap: 6px; }
 
 /* Danger has no primitive variant; keep the ghost skin and tint the label. */
-.agy-btn-danger { color: var(--dsw-alias-state-error-primary, #ec1313) !important; }
+.agy-btn-danger { color: ${aliasVar("state-error-primary")} !important; }
 
 /* ── Recent activity ring ──────────────────────────────────────────────────
    The "what just happened" list. Only the result cell carries color — ok
    inherits the table's neutral, and a wall of tinted rows would read as an
    alarm rather than a log. */
 .agy-recent-state { font: var(--dsw-font-xxs-12); }
-.agy-recent-state[data-kind="fail"] { color: var(--dsw-alias-state-error-primary, #ec1313); }
-.agy-recent-state[data-kind="limited"] { color: var(--dsw-alias-state-warn-primary, #f59e0b); }
-.agy-recent-state[data-kind="rotation"] { color: var(--dsw-alias-brand-primary-new-colorprimary-new-color, #4176e6); }
+.agy-recent-state[data-kind="fail"] { color: ${aliasVar("state-error-primary")}; }
+.agy-recent-state[data-kind="limited"] { color: ${aliasVar("state-warn-primary")}; }
+.agy-recent-state[data-kind="rotation"] { color: ${aliasVar("brand-primary")}; }
 /* The recent list is a standalone disclosure on the tab root, not one block
    inside a card body — the separator border-top the disclosure idiom uses
    between sibling blocks would draw a stray line across nothing here. */
@@ -393,9 +428,471 @@ window.__ModuleLoader__.load({
 .agy-toolbar { display: flex; align-items: center; gap: 8px; }
 .agy-textarea { width: 100%; min-height: 88px; resize: vertical; outline: none;
   padding: 9px 10px; font: var(--dsw-font-xxs-12); font-family: var(--ds-font-family-code);
-  color: var(--dsw-alias-label-primary, #1f2329); background: var(--dsw-alias-bg-layer-1, #fff);
-  border: 0.5px solid var(--dsw-alias-border-l2, #eef0f3); border-radius: 8px; }
-.agy-textarea:focus { border-color: var(--dsw-alias-brand-primary-new-colorprimary-new-color, #4176e6); }
+  color: ${aliasVar("label-primary")}; background: ${aliasVar("bg-layer-1")};
+  border: 0.5px solid ${aliasVar("border-l2")}; border-radius: 8px; }
+.agy-textarea:focus { border-color: ${aliasVar("brand-primary")}; }
+
+/* ── Preferences card ───────────────────────────────────────────────────── */
+.agy-pref-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 4px 0;
+}
+.agy-pref-name {
+  font: var(--dsw-font-xs-strong-13);
+  color: ${aliasVar("label-primary")};
+}
+.agy-pref-desc {
+  font: var(--dsw-font-xxs-12);
+  color: ${aliasVar("label-tertiary")};
+  margin-top: 2px;
+}
+
+/* ── Conversation-header quota badge & popover ─────────────────────────── */
+.agy-ui-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: ${aliasVar("bg-layer-2")};
+  border: 0.5px solid ${aliasVar("border-l2")};
+  border-radius: 9999px;
+  padding: 3px 10px;
+  font: var(--dsw-font-xxs-12);
+  color: ${aliasVar("label-primary")};
+  cursor: pointer;
+  user-select: none;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  font-family: inherit;
+  height: auto;
+}
+
+.agy-ui-badge:hover,
+.agy-ui-badge.pinned {
+  background: ${aliasVar("bg-layer-3")};
+  border-color: ${aliasVar("border-l1")};
+  transform: translateY(-1px);
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
+}
+
+.agy-ui-badge.pinned {
+  border-color: ${aliasVar("brand-primary")};
+  box-shadow: 0 0 0 1px ${aliasVar("brand-primary")}, 0 3px 10px rgba(0, 0, 0, 0.12);
+}
+
+.agy-ui-dot {
+  display: inline-block;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  transition: background-color 0.3s;
+}
+
+.agy-ui-dot[data-state="done"],
+.agy-ui-dot.active {
+  background-color: ${aliasVar("state-success-primary")};
+  box-shadow: 0 0 6px ${aliasVar("state-success-primary")};
+}
+
+.agy-ui-dot[data-state="warning"],
+.agy-ui-dot.cooling {
+  background-color: ${aliasVar("state-warn-primary")};
+  box-shadow: 0 0 6px ${aliasVar("state-warn-primary")};
+}
+
+.agy-ui-dot[data-state="idle"],
+.agy-ui-dot.disabled {
+  background-color: ${aliasVar("label-tertiary")};
+}
+
+.agy-ui-dot.updating {
+  animation: agy-ui-pulse 1.2s ease-in-out infinite;
+}
+
+.agy-ui-dot.active.updating,
+.agy-ui-dot[data-state="done"].updating {
+  box-shadow: 0 0 10px ${aliasVar("state-success-primary")};
+}
+
+.agy-ui-dot.cooling.updating,
+.agy-ui-dot[data-state="warning"].updating {
+  box-shadow: 0 0 10px ${aliasVar("state-warn-primary")};
+}
+
+@keyframes agy-ui-pulse {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.35;
+    transform: scale(0.7);
+  }
+}
+
+.agy-ui-sparkle {
+  color: ${aliasVar("brand-primary")};
+  font: var(--dsw-font-xs-13);
+}
+
+.agy-ui-popover-container.desktop {
+  position: static;
+}
+
+.agy-ui-popover-container.mobile {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  background: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  animation: agy-ui-fade-in 0.2s ease-out;
+}
+
+.agy-ui-popover {
+  background: ${aliasVar("bg-overlay")};
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 0.5px solid ${aliasVar("border-l2")};
+  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.15), 0 0 0 0.5px ${aliasVar("border-l1")};
+  color: ${aliasVar("label-primary")};
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  z-index: 1000;
+}
+
+.agy-ui-popover.desktop {
+  width: 380px;
+  max-width: calc(100vw - 24px);
+  border-radius: 14px;
+  animation: agy-ui-popover-in 0.18s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.agy-ui-popover.mobile {
+  width: 100%;
+  max-height: 82vh;
+  border-radius: 20px 20px 0 0;
+  border-bottom: none;
+  animation: agy-ui-bottom-sheet-in 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.agy-ui-mobile-handle {
+  width: 36px;
+  height: 4px;
+  background: ${aliasVar("border-l2")};
+  border-radius: 9999px;
+  margin: 8px auto 2px auto;
+}
+
+@keyframes agy-ui-popover-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes agy-ui-bottom-sheet-in {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes agy-ui-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.agy-ui-modal-header {
+  padding: 10px 14px;
+  border-bottom: 0.5px solid ${aliasVar("border-l2")};
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: ${aliasVar("bg-layer-1")};
+}
+
+.agy-ui-modal-title {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  font: var(--dsw-font-xs-strong-13);
+  color: ${aliasVar("label-primary")};
+}
+
+.agy-ui-pinned-tag {
+  font: var(--dsw-font-xxxs-11);
+  margin-left: 2px;
+}
+
+.agy-ui-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.agy-ui-icon-btn {
+  color: ${aliasVar("label-secondary")};
+  padding: 4px;
+  min-width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  border-radius: 6px;
+  transition: all 0.15s;
+}
+
+.agy-ui-icon-btn:hover {
+  color: ${aliasVar("label-primary")};
+  background: ${aliasVar("bg-layer-2")};
+}
+
+.agy-ui-icon-btn.active {
+  color: ${aliasVar("brand-primary")};
+  background: color-mix(in srgb, ${aliasVar("brand-primary")} 18%, transparent);
+}
+
+.agy-ui-icon-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.agy-ui-spinning {
+  animation: agy-ui-spin 1s linear infinite;
+}
+
+@keyframes agy-ui-spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+.agy-ui-modal-body {
+  padding: 14px 16px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  max-height: 480px;
+}
+
+.agy-ui-account-card {
+  background: ${aliasVar("bg-layer-2")};
+  border: 0.5px solid ${aliasVar("border-l1")};
+  border-radius: 9px;
+  padding: 8px 12px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.agy-ui-account-email {
+  font: var(--dsw-font-xxs-12);
+  color: ${aliasVar("label-primary")};
+}
+
+.agy-ui-account-project {
+  font: var(--dsw-font-xxxs-11);
+  color: ${aliasVar("label-tertiary")};
+  margin-top: 2px;
+}
+
+.agy-ui-state-pill {
+  font: var(--dsw-font-xxxs-11);
+  padding: 2px 7px;
+  border-radius: 9999px;
+  text-transform: capitalize;
+}
+
+.agy-ui-state-pill.active {
+  background: color-mix(in srgb, ${aliasVar("state-business-primary")} 15%, transparent);
+  color: ${aliasVar("state-business-primary")};
+  border: 0.5px solid color-mix(in srgb, ${aliasVar("state-business-primary")} 30%, transparent);
+}
+
+.agy-ui-state-pill.cooling {
+  background: color-mix(in srgb, ${aliasVar("state-error-secondary")} 15%, transparent);
+  color: ${aliasVar("state-error-secondary")};
+  border: 0.5px solid color-mix(in srgb, ${aliasVar("state-error-secondary")} 30%, transparent);
+}
+
+.agy-ui-state-pill.verification-required {
+  background: color-mix(in srgb, ${aliasVar("brand-primary")} 15%, transparent);
+  color: ${aliasVar("brand-primary")};
+  border: 0.5px solid color-mix(in srgb, ${aliasVar("brand-primary")} 30%, transparent);
+}
+
+.agy-ui-state-pill.disabled {
+  background: color-mix(in srgb, ${aliasVar("label-tertiary")} 15%, transparent);
+  color: ${aliasVar("label-secondary")};
+  border: 0.5px solid color-mix(in srgb, ${aliasVar("label-tertiary")} 30%, transparent);
+}
+
+.agy-ui-section-label {
+  font: var(--dsw-font-xxxs-11);
+  color: ${aliasVar("label-tertiary")};
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.agy-ui-quota-card {
+  background: ${aliasVar("bg-layer-2")};
+  border: 0.5px solid ${aliasVar("border-l1")};
+  border-radius: 10px;
+  padding: 10px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.agy-ui-quota-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 2px;
+}
+
+.agy-ui-model-name {
+  font: var(--dsw-font-xxs-12);
+  color: ${aliasVar("label-primary")};
+}
+
+.agy-ui-limit-row {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.agy-ui-limit-row + .agy-ui-limit-row {
+  margin-top: 5px;
+}
+
+.agy-ui-limit-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font: var(--dsw-font-xxxs-11);
+}
+
+.agy-ui-limit-title {
+  color: ${aliasVar("label-secondary")};
+  font: var(--dsw-font-xxxs-11);
+}
+
+.agy-ui-limit-percent {
+  font: var(--dsw-font-xxs-12);
+  font-variant-numeric: tabular-nums;
+}
+
+.agy-ui-progress-track {
+  width: 100%;
+  height: 5px;
+  background: color-mix(in srgb, ${aliasVar("label-primary")} 8%, transparent);
+  border-radius: 9999px;
+  overflow: hidden;
+}
+
+.agy-ui-progress-fill {
+  height: 100%;
+  border-radius: 9999px;
+  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.agy-ui-quota-footer {
+  display: flex;
+  justify-content: flex-end;
+  font: var(--dsw-font-xxxs-11);
+  color: ${aliasVar("label-tertiary")};
+  font-variant-numeric: tabular-nums;
+}
+
+.agy-ui-modal-footer {
+  padding: 8px 14px;
+  border-top: 0.5px solid ${aliasVar("border-l2")};
+  background: ${aliasVar("bg-layer-1")};
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  flex-wrap: wrap;
+  font: var(--dsw-font-xxxs-11);
+  color: ${aliasVar("label-tertiary")};
+}
+
+.agy-ui-window-note {
+  font: var(--dsw-font-xxxs-11);
+  color: ${aliasVar("label-tertiary")};
+  margin-top: 3px;
+  padding: 8px 0;
+}
+
+.agy-ui-limit-age {
+  font: var(--dsw-font-xxxs-11);
+  color: ${aliasVar("label-tertiary")};
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+.agy-ui-verify-note {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  font: var(--dsw-font-xxs-12);
+  color: ${aliasVar("brand-primary")};
+  background: color-mix(in srgb, ${aliasVar("brand-primary")} 10%, transparent);
+  border: 0.5px solid color-mix(in srgb, ${aliasVar("brand-primary")} 30%, transparent);
+  border-radius: 9999px;
+  padding: 6px 12px;
+}
+
+.agy-ui-link-btn {
+  color: ${aliasVar("brand-primary")};
+  text-decoration: none;
+  font: var(--dsw-font-xxs-12);
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  cursor: pointer;
+  transition: color 0.15s;
+  background: none;
+  border: none;
+  padding: 0;
+}
+
+.agy-ui-link-btn:hover {
+  text-decoration: underline;
+}
+
+@media (max-width: 640px) {
+  .agy-ui-badge {
+    padding: 2px 7px;
+    font: var(--dsw-font-xxxs-11);
+    gap: 4px;
+  }
+  .agy-ui-modal-body {
+    padding: 12px 14px;
+    gap: 10px;
+  }
+}
 `;
 		/** Install the stylesheet once (idempotent across plugin reloads): a second
 		*  install never appends a duplicate, and one whose content has gone stale
@@ -407,12 +904,12 @@ window.__ModuleLoader__.load({
 			if (typeof document === "undefined") return () => {};
 			const existing = document.getElementById(STYLE_ID);
 			if (existing !== null) {
-				if (existing.textContent !== CSS) existing.textContent = CSS;
+				if (existing.textContent !== AGY_STYLES_CSS) existing.textContent = AGY_STYLES_CSS;
 				return () => {};
 			}
 			const style = document.createElement("style");
 			style.id = STYLE_ID;
-			style.textContent = CSS;
+			style.textContent = AGY_STYLES_CSS;
 			document.head.appendChild(style);
 			return () => {};
 		}
@@ -476,6 +973,37 @@ window.__ModuleLoader__.load({
 			limitBurnWarn: "按此速度{value}后耗尽",
 			quotaWindow5h: "5 小时",
 			quotaWindowWeekly: "每周",
+			quotaWindowDaily: "每日",
+			quotaWindowMonthly: "每月",
+			quotaResetPassed: "已重置",
+			quotaStaleNote: "该窗口已重置，等待下次刷新",
+			quotaUnmeasuredNote: "上游未返回该窗口的剩余额度",
+			quotaGroupFallback: "配额分组",
+			badgeTitle: "Antigravity 配额状态",
+			badgeAria: "Antigravity 配额",
+			badgeHint: "固定弹窗",
+			badgeUnpinHint: "取消固定",
+			badgeRefreshHint: "刷新配额状态",
+			badgePinned: "已固定",
+			badgeClose: "关闭",
+			badgeReading: "{window}剩余 {percent}%",
+			badgeUnmeasured: "尚未测量",
+			badgeNoAccount: "未检测到活跃账号，请前往设置页登录",
+			badgeSectionMonitor: "额度监控 (5小时 / 日 / 周 / 月)",
+			badgeVerifyRequired: "该账号被要求验证身份",
+			badgeAppealLink: "打开申诉链接 ↗",
+			badgeNoQuotaData: "暂无额度数据，点击右上角刷新重新测量",
+			badgeMeasuredAt: "额度测量于 {time}",
+			badgeTooltip: "Antigravity: {count} 个账号 · {reading} · 悬停或点击查看配额详情",
+			quotaSourceCaption: "数据来源: dsh-agy 分组额度",
+			quotaManageHint: "管理入口: 设置 → Antigravity",
+			preferencesTitle: "偏好设置",
+			prefConversationBadge: "会话顶栏配额胶囊",
+			prefConversationBadgeDesc: "在聊天会话顶栏显示当前账号配额与水位状态浮层",
+			prefSaveFailed: "保存失败：{message}",
+			badgeQuotaFormat: "AGY · {percent}%",
+			badgeWindowQuotaFormat: "AGY · {window}{percent}%",
+			badgeCountFormat: "AGY ✦ {count}",
 			fieldProject: "项目",
 			fieldProxy: "代理",
 			fieldFingerprint: "指纹",
@@ -658,6 +1186,37 @@ window.__ModuleLoader__.load({
 			limitBurnWarn: "at this rate, empty in {value}",
 			quotaWindow5h: "5 hours",
 			quotaWindowWeekly: "Weekly",
+			quotaWindowDaily: "Daily",
+			quotaWindowMonthly: "Monthly",
+			quotaResetPassed: "already reset",
+			quotaStaleNote: "This window has already reset — waiting for the next refresh",
+			quotaUnmeasuredNote: "Upstream reported no remaining fraction for this window",
+			quotaGroupFallback: "Quota group",
+			badgeTitle: "Antigravity quota status",
+			badgeAria: "Antigravity quota",
+			badgeHint: "Pin modal",
+			badgeUnpinHint: "Unpin modal",
+			badgeRefreshHint: "Refresh quota status",
+			badgePinned: "Pinned",
+			badgeClose: "Close",
+			badgeReading: "{window} {percent}% left",
+			badgeUnmeasured: "not measured yet",
+			badgeNoAccount: "No active account, please login in Settings",
+			badgeSectionMonitor: "Quota monitor (5h / Daily / Weekly / Monthly)",
+			badgeVerifyRequired: "Account verification required",
+			badgeAppealLink: "Open appeal link ↗",
+			badgeNoQuotaData: "No quota data yet, click refresh in top right to measure",
+			badgeMeasuredAt: "Limits measured {time}",
+			badgeTooltip: "Antigravity: {count} accounts · {reading} · Hover or click to view quota details",
+			quotaSourceCaption: "Source: dsh-agy grouped limits",
+			quotaManageHint: "Manage: Settings → Antigravity",
+			preferencesTitle: "Preferences",
+			prefConversationBadge: "Conversation header quota badge",
+			prefConversationBadgeDesc: "Display active account quota badge and popover in conversation session header",
+			prefSaveFailed: "Save failed: {message}",
+			badgeQuotaFormat: "AGY · {percent}%",
+			badgeWindowQuotaFormat: "AGY · {window}{percent}%",
+			badgeCountFormat: "AGY ✦ {count}",
 			fieldProject: "Project",
 			fieldProxy: "Proxy",
 			fieldFingerprint: "Fingerprint",
@@ -791,6 +1350,732 @@ window.__ModuleLoader__.load({
 			exportAll: "Export all"
 		};
 		//#endregion
+		//#region src/client/element.ts
+		/**
+		* The element shorthand the browser half is written in.
+		*
+		* `h(tag, props, ...children)` keeps an element tree flat and readable where
+		* nested `createElement` calls become a parenthesis maze — and this bundle has
+		* no JSX transform, so there is no third option.
+		*
+		* A shared module rather than a copy per file: the Settings section and the
+		* conversation-header badge build their trees the same way.
+		*/
+		function h(tag, props, ...children) {
+			return (0, react.createElement)(tag, props ?? null, ...children);
+		}
+		//#endregion
+		//#region src/types.ts
+		/**
+		* The upstream `window` tokens we understand: their ORDER by duration, and which
+		* of them `CachedQuota` has a field for.
+		*
+		* ONE table for a vocabulary that used to live in two places giving two different
+		* answers: `adapter/quota-summary.ts` sorted by its own token table while
+		* `runtime/quota.ts` classified windows with `includes()` checks. The
+		* disagreement was not academic — `daily` existed in one and not the other, so a
+		* daily group parsed and display-sorted correctly, then contributed an EMPTY
+		* record that replaced a real measurement.
+		*
+		* Keeping both facts in one row is deliberate: a token cannot be rankable in one
+		* consumer and unknown to the other, because there is only one place to add it.
+		* A missing `kind` means the cache has nowhere to put that reading, which is what
+		* stops the empty-record overwrite.
+		*
+		* Declared in this leaf rather than in either consumer because BOTH need it:
+		* `runtime/` must not reach into `adapter/`, and the persisted `QuotaWindow` is
+		* already defined here.
+		*
+		* `rank` is explicit rather than inferred from token length so it states the
+		* intended duration ordering: `daily` (5 chars) would otherwise sort before
+		* `weekly` (6) for the wrong reason.
+		*/
+		const QUOTA_WINDOWS = {
+			"5h": {
+				rank: 0,
+				kind: "rolling"
+			},
+			daily: { rank: 1 },
+			weekly: {
+				rank: 2,
+				kind: "weekly"
+			},
+			monthly: { rank: 3 }
+		};
+		//#endregion
+		//#region src/runtime/rotation.ts
+		/** Below this remaining fraction the account is treated as soft-quota-exhausted. */
+		const SOFT_QUOTA_THRESHOLD = .15;
+		/**
+		* The WEEKLY window's exhaustion threshold, and deliberately NOT
+		* `SOFT_QUOTA_THRESHOLD`.
+		*
+		* The two numbers answer the same question — "how much work is left in this
+		* window?" — about windows of very different lengths, so they only look
+		* inconsistent when read side by side:
+		*
+		*   15% of a 5-hour window is ~45 minutes of runway.
+		*   1%  of a 7-day window  is ~1.7 hours of runway.
+		*
+		* The weekly bar is the stricter one where it matters, because being wrong is
+		* asymmetric: a drained 5-hour window refills within five hours, while a drained
+		* weekly window parks the account for DAYS. Treating an account as drained a
+		* little early costs one rotation; treating it as usable too late costs the user
+		* a failed request with no healthy fallback.
+		*
+		* Do not "unify" these two constants without re-deriving both runways above.
+		*/
+		const WEEKLY_QUOTA_THRESHOLD = .01;
+		/** Absolute server-reported reset in ms when it lies in the future, else undefined. */
+		function parseFutureResetMs(resetTime, now = Date.now()) {
+			if (!resetTime) return void 0;
+			const reset = Date.parse(resetTime);
+			if (Number.isNaN(reset) || reset <= now) return void 0;
+			return reset;
+		}
+		//#endregion
+		//#region src/client/quota-view.ts
+		/**
+		* Pure quota view layer, shared by the conversation-header badge
+		* (`quota-badge.ts`) and the Settings section's own limits card.
+		*
+		* No React, no fetch, no DOM: every figure and every word is computed here from
+		* data handed in, with `now` always injected, so `tests/quota-view.test.ts` can
+		* pin the badge's arithmetic without a browser.
+		*
+		* Nothing in this module restates an upstream fact:
+		*
+		* - the window vocabulary and its order come from `QUOTA_WINDOWS`
+		*   (`../types.ts`), the one table the adapter and the scheduler also read;
+		* - the drain thresholds are IMPORTED from `../runtime/rotation.ts`, so the
+		*   badge ranks windows by the same numbers the pool rotates on;
+		* - "the reset has passed" is `parseFutureResetMs`, the predicate the pool
+		*   itself applies (`isFamilyDrained`, `rankPoolCandidates`);
+		* - every visible word comes from the `agy` dictionary (`locales.ts`).
+		*
+		* A window with no reported fraction is "unknown" and renders as an em dash —
+		* never as 0%, because unknown headroom and no headroom are opposite facts.
+		*/
+		const MINUTE_MS = 6e4;
+		const HOUR_MS = 60 * MINUTE_MS;
+		const DAY_MS = 24 * HOUR_MS;
+		/**
+		* Localized label for an upstream quota window token.
+		*
+		* The tokens are mapped rather than printed so the surface follows the UI
+		* language, and an UNRECOGNIZED token falls back to its raw value: upstream may
+		* add a window, and showing `30d` is better than a blank or a wrong label.
+		*/
+		function windowLabel(window, t) {
+			switch (window) {
+				case "5h": return t("quotaWindow5h");
+				case "daily": return t("quotaWindowDaily");
+				case "weekly": return t("quotaWindowWeekly");
+				case "monthly": return t("quotaWindowMonthly");
+				default: return window;
+			}
+		}
+		/** Localized account-state label. */
+		function stateLabel(state, t) {
+			switch (state) {
+				case "active": return t("stateActive");
+				case "cooling": return t("stateCooling");
+				case "verification-required": return t("stateVerificationRequired");
+				case "disabled": return t("stateDisabled");
+			}
+		}
+		/**
+		* Time until a future moment, as localized copy.
+		*
+		* A quota reset wall is often more than 24h out, so a bare `HH:mm` cannot say
+		* whether it means today or tomorrow. Bucket boundaries mirror the host's
+		* `relativeTime`; the words stay in this plugin's own dictionary, which is
+		* exactly the split that API intends.
+		*/
+		function untilText(iso, t, now) {
+			if (iso === null) return "—";
+			const at = new Date(iso).getTime();
+			if (Number.isNaN(at)) return "—";
+			const diff = at - now;
+			if (diff <= 0) return t("relNow");
+			return t("quotaResetIn", { value: diff < 6e4 ? t("relNow") : diff < 36e5 ? t("relMinutes", { n: Math.floor(diff / MINUTE_MS) }) : diff < 864e5 ? t("relHours", { n: Math.floor(diff / HOUR_MS) }) : diff < 2592e6 ? t("relDays", { n: Math.floor(diff / DAY_MS) }) : diff < 31536e6 ? t("relMonths", { n: Math.floor(diff / (30 * DAY_MS)) }) : t("relYears", { n: Math.floor(diff / (365 * DAY_MS)) }) });
+		}
+		/**
+		* How long ago a past moment was (the mirror of `untilText`).
+		*
+		* Reuses the same `rel*` magnitudes so the two read consistently, but adds a
+		* direction suffix: a bare magnitude beside a cooldown could equally mean when
+		* it started or when it ends.
+		*/
+		function agoText(iso, t, now) {
+			if (iso === null) return "—";
+			const at = new Date(iso).getTime();
+			if (Number.isNaN(at)) return "—";
+			const diff = now - at;
+			if (diff < 6e4) return t("relJustNow");
+			return t("relAgo", { value: diff < 36e5 ? t("relMinutes", { n: Math.floor(diff / MINUTE_MS) }) : diff < 864e5 ? t("relHours", { n: Math.floor(diff / HOUR_MS) }) : diff < 2592e6 ? t("relDays", { n: Math.floor(diff / DAY_MS) }) : diff < 31536e6 ? t("relMonths", { n: Math.floor(diff / (30 * DAY_MS)) }) : t("relYears", { n: Math.floor(diff / (365 * DAY_MS)) }) });
+		}
+		/**
+		* The reset moment of one window.
+		*
+		* A wall that has already passed is its own state rather than a zero-distance
+		* countdown: `untilText` answers "shortly" for `diff <= 0`, which is precisely
+		* the promise the old badge made about a window that had already refilled.
+		*/
+		function resetText(resetTime, t, now) {
+			if (resetTime === null) return null;
+			const at = Date.parse(resetTime);
+			if (Number.isNaN(at)) return null;
+			if (at <= now) return t("quotaResetPassed");
+			return untilText(resetTime, t, now);
+		}
+		/** Sort rank for a window token; an unknown token ranks last. */
+		function windowRank(window) {
+			return QUOTA_WINDOWS[window]?.rank ?? Number.MAX_SAFE_INTEGER;
+		}
+		/** Order windows shortest-first; an unknown token last, tie-broken alphabetically. */
+		function sortWindows(windows) {
+			return [...windows].sort((a, b) => windowRank(a.window) - windowRank(b.window) || a.window.localeCompare(b.window));
+		}
+		/** 0..100 for a usable fraction, or null when it is absent or not finite. */
+		function toPercent(fraction) {
+			if (typeof fraction !== "number" || !Number.isFinite(fraction)) return null;
+			return Math.round(Math.max(0, Math.min(1, fraction)) * 100);
+		}
+		/**
+		* Quota tint by remaining fraction: healthy / low / critical.
+		*
+		* The thresholds are the Settings section's own, so the badge's bars read the
+		* same colour as the limits card's beside them. Built from `--dsw-alias-*`
+		* tokens (with the literal as a pre-theme fallback) rather than fixed hex: a
+		* private palette does not follow the host's light/dark switch.
+		*/
+		function quotaColor(fraction) {
+			if (fraction > .7) return aliasVar("state-success-primary");
+			if (fraction >= .3) return aliasVar("state-warn-primary");
+			return aliasVar("state-error-primary");
+		}
+		/**
+		* The drain threshold that governs one window token, or undefined when the pool
+		* does not block on that window.
+		*
+		* The two numbers are IMPORTED from `runtime/rotation.ts` because they answer
+		* the same question there ("how much work is left" over windows of different
+		* lengths), which is why they are deliberately asymmetric. `daily`/`monthly`
+		* report but never block, so they have no threshold and never drive the badge.
+		*/
+		function drainThresholdFor(window) {
+			if (window === "5h") return SOFT_QUOTA_THRESHOLD;
+			if (window === "weekly") return WEEKLY_QUOTA_THRESHOLD;
+		}
+		/** The windows the pool actually blocks on. */
+		function rotationWindows(group) {
+			return group.windows.filter((window) => drainThresholdFor(window.window) !== void 0);
+		}
+		/**
+		* Whether a window's reset moment has already passed.
+		*
+		* The pool treats such a window as unmeasured (`isFamilyDrained`,
+		* `rankPoolCandidates`): the cached fraction describes a period that has ENDED,
+		* so it is not evidence about the one we are in. This view layer reads the same
+		* records, so it has to apply the same rule — otherwise a spent five-hour window
+		* that has already rolled over keeps the badge red long after the pool resumed
+		* serving that account.
+		*
+		* A reset moment that cannot be parsed counts as passed: it cannot be shown to
+		* be in the future, and the reading it dates is not trustworthy either way.
+		* A window that reported no reset moment at all is NOT stale — the pool keeps
+		* using its fraction, and so does this.
+		*/
+		function resetInPast(resetTime, now) {
+			if (resetTime === null) return false;
+			return parseFutureResetMs(resetTime, now) === void 0;
+		}
+		/**
+		* Whether a window's fraction is a leftover from a period that has ended.
+		*
+		* Only a window that DID report a fraction can be stale: one that never reported
+		* stays "unknown", which the row already renders as its own case.
+		*/
+		function windowIsStale(window, now) {
+			return window.remainingFraction !== null && resetInPast(window.resetTime, now);
+		}
+		/**
+		* How close a window is to its own drain point, as a threshold multiple.
+		*
+		* Comparing raw `remainingFraction` values would rank a comfortable 44% week
+		* above a comfortable 82% five-hour window and hand the badge to the week, which
+		* is not what stops a request. Dividing by each window's own drain threshold asks
+		* the question the pool itself asks — how much runway is left before this window
+		* stops serving — so the five-hour window stays in charge until the week is
+		* genuinely nearly spent.
+		*/
+		function windowPressure(window, now) {
+			if (window.remainingFraction === null) return null;
+			if (resetInPast(window.resetTime, now)) return null;
+			const threshold = drainThresholdFor(window.window);
+			if (threshold === void 0 || threshold <= 0) return null;
+			return Math.max(window.remainingFraction, 0) / threshold;
+		}
+		/**
+		* Pick the window that constrains the account first, for the header badge.
+		*
+		* Groups are read in upstream's own order — it lists the Gemini budget first —
+		* and the FIRST group reporting a blocking window decides on its own: mixing
+		* groups would blend one budget with another. Within that group the window with
+		* the smallest threshold multiple wins.
+		*
+		* Deliberately no family inference here (the badge used to match group names
+		* against `/gemini/`): upstream's grouping is a payload detail, and the pool's
+		* own family mapping lives in `runtime/quota.ts`, which the browser bundle does
+		* not carry.
+		*/
+		function pickBadgeWindow(limits, now) {
+			if (!limits || limits.length === 0) return null;
+			for (const group of limits) {
+				const candidates = rotationWindows(group);
+				if (candidates.length === 0) continue;
+				let best = null;
+				let bestPressure = Number.POSITIVE_INFINITY;
+				for (const window of candidates) {
+					const pressure = windowPressure(window, now);
+					if (pressure === null) continue;
+					if (pressure < bestPressure) {
+						best = window;
+						bestPressure = pressure;
+					}
+				}
+				if (best !== null) return best;
+				return null;
+			}
+			for (const group of limits) {
+				const first = sortWindows(group.windows).filter((window) => !windowIsStale(window, now))[0];
+				if (first !== void 0) return first;
+			}
+			return null;
+		}
+		/**
+		* The badge's reading: the most constrained tracked window of the ACTIVE account.
+		*
+		* Reported `daily`/`monthly` windows never drive the badge: the pool does not
+		* block on them, so a low monthly figure is not a reason to alarm the header.
+		* Returns null when nothing usable is known — the caller renders a dash instead
+		* of inventing 0%.
+		*/
+		function pickBadgeQuota(accounts, now = Date.now()) {
+			const window = pickBadgeWindow((accounts.find((account) => account.active) ?? accounts[0])?.limits, now);
+			if (window === null) return null;
+			const percent = toPercent(window.remainingFraction);
+			if (percent === null) return null;
+			return {
+				percent,
+				window: window.window
+			};
+		}
+		/** Build the window rows of one group card. */
+		function windowRows(windows, t, now) {
+			return sortWindows(windows).map((window) => {
+				const stale = windowIsStale(window, now);
+				return {
+					bucketId: window.bucketId,
+					label: windowLabel(window.window, t),
+					percent: stale ? null : toPercent(window.remainingFraction),
+					reset: resetText(window.resetTime, t, now),
+					stale
+				};
+			});
+		}
+		/**
+		* Build the quota cards for one account.
+		*
+		* One card per upstream group, exactly as the group arrived: the grouped
+		* windows are the only quota channel this plugin has now, and upstream's own
+		* split ("Gemini Models" / "Claude and GPT models") cannot be re-derived from
+		* model-id prefixes — `3p-*` covers Claude AND GPT.
+		*
+		* A group whose windows all turned out to be unusable would render as an empty
+		* card that pushes a real one off screen, so those are dropped.
+		*/
+		function buildQuotaCards(account, t, now) {
+			const groups = account?.limits;
+			if (!groups || groups.length === 0) return [];
+			const cards = [];
+			for (const group of groups) {
+				const rows = windowRows(group.windows, t, now);
+				if (rows.length === 0) continue;
+				cards.push({
+					key: group.name || `group-${cards.length}`,
+					title: group.name || t("quotaGroupFallback"),
+					windows: rows
+				});
+			}
+			return cards;
+		}
+		/**
+		* Which StateDot semantic the badge's health light shows.
+		*
+		* The pool is usable when some account is serving; anything else (a cooling
+		* account, one parked behind verification, a disabled one) is user attention
+		* rather than a hard failure, and an empty pool is idle rather than broken.
+		*/
+		function dotStateFor(accounts) {
+			if (accounts.length === 0) return "idle";
+			if (!accounts.some((account) => account.active || account.state === "active")) return "warning";
+			return accounts.some((account) => account.state !== "active") ? "warning" : "done";
+		}
+		/**
+		* Mask an account email for the header surface.
+		*
+		* Deliberately NOT what the Settings section does: that panel shows the address
+		* in full, on a page the user opened on purpose. The conversation header sits on
+		* screen for the whole session — including during a share or a recording — so the
+		* local part is shortened and the domain kept, which is enough to tell two
+		* accounts apart without publishing the address.
+		*/
+		function desensitizeEmail(email) {
+			if (!email || !email.includes("@")) return email || "—";
+			const [name, domain] = email.split("@");
+			if (name === void 0 || domain === void 0) return email;
+			if (name.length <= 3) return `${name.slice(0, 1)}***@${domain}`;
+			if (name.length <= 6) return `${name.slice(0, 2)}***@${domain}`;
+			return `${name.slice(0, 5)}***@${domain}`;
+		}
+		/**
+		* Which probe a refresh should run.
+		*
+		* `force` re-probes inside the host's window (the user asked); `off` leaves the
+		* window refresh out entirely for this tick; `auto` lets the host's TTL decide.
+		* Ported from the standalone badge, which learned that a failed probe run has to
+		* back itself off.
+		*/
+		function shouldProbeLimits(input) {
+			if (input.force) return "force";
+			if (input.failedAt !== null && input.now - input.failedAt < 6e5) return "off";
+			return "auto";
+		}
+		//#endregion
+		//#region src/client/quota-badge.ts
+		/**
+		* Conversation-header quota badge & popover.
+		*
+		* Shows the tightest of the active account's tracked windows, and opens the
+		* window breakdown floating card on hover or click.
+		*
+		* Built with DSH native UI primitives (Button, Tag, StateDot, useAnchoredPosition,
+		* useDismissOnOutsidePointer) and semantic design tokens (--dsw-*).
+		*/
+		/**
+		* Render-tick cadence for the countdown and staleness figures. Pure state
+		* recompute from already-fetched data — deliberately ZERO RPC: the fetch paths
+		* are mount, window wake (throttled above) and the popover's refresh button,
+		* and without this tick the countdown text would freeze between fetches.
+		*/
+		const RENDER_TICK_MS = 6e4;
+		/**
+		* Grace period before hover close (250ms).
+		*/
+		const HOVER_CLOSE_DELAY_MS = 250;
+		/**
+		* Quota bar and percentage color for a window.
+		* Strictly unified with upstream Settings panel via quotaColor(percent / 100).
+		* Thresholds: >70% success green, 30%-70% warning amber, <30% error red.
+		*/
+		function quotaColorForWindow(percent) {
+			if (percent === null) return aliasVar("label-tertiary");
+			return quotaColor(percent / 100);
+		}
+		/** Render one window row of a quota card. */
+		function renderWindow(window, index, t) {
+			return h("div", {
+				key: window.bucketId,
+				className: "agy-ui-limit-row"
+			}, h("div", { className: "agy-ui-limit-header" }, h("span", { className: "agy-ui-limit-title" }, window.label), h("span", {
+				className: "agy-ui-limit-percent",
+				style: { color: window.color }
+			}, window.percent === null ? "—" : `${window.percent}%`)), h("div", { className: "agy-ui-progress-track" }, h("div", {
+				className: "agy-ui-progress-fill",
+				style: {
+					width: `${window.percent ?? 0}%`,
+					backgroundColor: window.color
+				}
+			})), window.reset ? h("div", { className: "agy-ui-quota-footer" }, h("span", null, window.reset)) : null, window.percent === null ? h("div", { className: "agy-ui-window-note" }, window.stale ? t("quotaStaleNote") : t("quotaUnmeasuredNote")) : null);
+		}
+		/**
+		* The badge and its popover modal.
+		*/
+		function AgyQuotaBadge({ rpc, t }) {
+			const [accounts, setAccounts] = (0, react.useState)([]);
+			const [loading, setLoading] = (0, react.useState)(false);
+			const [isUpdating, setIsUpdating] = (0, react.useState)(false);
+			const [isHovered, setIsHovered] = (0, react.useState)(false);
+			const [isPinned, setIsPinned] = (0, react.useState)(false);
+			const [isMobile, setIsMobile] = (0, react.useState)(false);
+			const [now, setNow] = (0, react.useState)(() => Date.now());
+			const [error, setError] = (0, react.useState)(null);
+			const rootRef = (0, react.useRef)(null);
+			const panelRef = (0, react.useRef)(null);
+			const leaveTimerRef = (0, react.useRef)(null);
+			const lastFetchTimeRef = (0, react.useRef)(0);
+			const failedAtRef = (0, react.useRef)(null);
+			(0, react.useEffect)(() => {
+				installAgyStyles();
+				const checkMobile = () => {
+					setIsMobile(typeof window !== "undefined" && window.innerWidth <= 640);
+				};
+				checkMobile();
+				window.addEventListener("resize", checkMobile);
+				return () => window.removeEventListener("resize", checkMobile);
+			}, []);
+			const load = (0, react.useCallback)(async (isManual = false) => {
+				const currentNow = Date.now();
+				if (!isManual && lastFetchTimeRef.current > 0 && currentNow - lastFetchTimeRef.current < 119e3) return;
+				lastFetchTimeRef.current = currentNow;
+				setIsUpdating(true);
+				setLoading(true);
+				try {
+					const listed = await rpc.call("account.list", {});
+					setAccounts(listed.accounts);
+					setError(null);
+					const probe = shouldProbeLimits({
+						force: isManual,
+						failedAt: failedAtRef.current,
+						now: Date.now()
+					});
+					if (probe !== "off") {
+						const limits = await rpc.call("account.limits", probe === "force" ? { force: true } : {});
+						const byIndex = new Map(limits.limits.map((entry) => [entry.index, entry]));
+						setAccounts((current) => current.map((account) => {
+							const entry = byIndex.get(account.index);
+							return entry === void 0 ? account : {
+								...account,
+								limits: entry.groups,
+								limitsUpdatedAt: entry.updatedAt
+							};
+						}));
+						failedAtRef.current = limits.measured === 0 && limits.failed > 0 ? Date.now() : null;
+					}
+				} catch (err) {
+					setError(err instanceof Error ? err.message : String(err));
+				} finally {
+					setLoading(false);
+					setNow(Date.now());
+					setTimeout(() => {
+						setIsUpdating(false);
+					}, 1200);
+				}
+			}, [rpc]);
+			(0, react.useEffect)(() => {
+				load(false);
+				const tick = window.setInterval(() => setNow(Date.now()), RENDER_TICK_MS);
+				const onWake = () => {
+					if (document.visibilityState !== "hidden") load(false);
+				};
+				window.addEventListener("focus", onWake);
+				document.addEventListener("visibilitychange", onWake);
+				return () => {
+					window.clearInterval(tick);
+					window.removeEventListener("focus", onWake);
+					document.removeEventListener("visibilitychange", onWake);
+					if (leaveTimerRef.current !== null) window.clearTimeout(leaveTimerRef.current);
+				};
+			}, [load]);
+			const isOpen = isPinned || isHovered;
+			(0, _deepseek_ai_dsh_client_ui_primitives.useDismissOnOutsidePointer)(rootRef, isPinned, setIsPinned, panelRef);
+			const anchored = (0, _deepseek_ai_dsh_client_ui_primitives.useAnchoredPosition)({
+				open: isOpen && !isMobile,
+				anchorRef: rootRef,
+				panelRef,
+				side: "bottom",
+				gap: 6,
+				margin: 12
+			});
+			const handleMouseEnterBadge = () => {
+				if (leaveTimerRef.current !== null) {
+					window.clearTimeout(leaveTimerRef.current);
+					leaveTimerRef.current = null;
+				}
+				setIsHovered(true);
+			};
+			const handleMouseLeaveBadge = () => {
+				if (leaveTimerRef.current !== null) window.clearTimeout(leaveTimerRef.current);
+				leaveTimerRef.current = window.setTimeout(() => {
+					setIsHovered(false);
+				}, HOVER_CLOSE_DELAY_MS);
+			};
+			const handleMouseEnterPopover = () => {
+				if (leaveTimerRef.current !== null) {
+					window.clearTimeout(leaveTimerRef.current);
+					leaveTimerRef.current = null;
+				}
+			};
+			const handleMouseLeavePopover = () => {
+				if (leaveTimerRef.current !== null) window.clearTimeout(leaveTimerRef.current);
+				leaveTimerRef.current = window.setTimeout(() => {
+					setIsHovered(false);
+				}, HOVER_CLOSE_DELAY_MS);
+			};
+			const handleTogglePin = (e) => {
+				e?.stopPropagation();
+				setIsPinned((prev) => !prev);
+				setIsHovered(true);
+			};
+			const handleClose = () => {
+				if (leaveTimerRef.current !== null) {
+					window.clearTimeout(leaveTimerRef.current);
+					leaveTimerRef.current = null;
+				}
+				setIsPinned(false);
+				setIsHovered(false);
+			};
+			const handleRefreshClick = async (e) => {
+				e.stopPropagation();
+				if (loading) return;
+				await load(true);
+			};
+			const activeAccount = accounts.find((a) => a.active) ?? accounts[0];
+			const accountCount = accounts.length;
+			const rawDot = dotStateFor(accounts);
+			const dotState = rawDot === "done" ? "active" : rawDot === "warning" ? "cooling" : "disabled";
+			const badgeQuota = pickBadgeQuota(accounts, now);
+			const badgeWindow = badgeQuota?.window && badgeQuota.window !== "5h" ? `${windowLabel(badgeQuota.window, t)} ` : "";
+			const displayText = badgeQuota !== null ? badgeWindow !== "" ? t("badgeWindowQuotaFormat", {
+				window: badgeWindow,
+				percent: badgeQuota.percent
+			}) : t("badgeQuotaFormat", { percent: badgeQuota.percent }) : t("badgeCountFormat", { count: accountCount });
+			const cards = buildQuotaCards(activeAccount, t, now).map((rc) => ({
+				key: rc.key,
+				title: rc.title,
+				windows: rc.windows.map((w) => ({
+					bucketId: w.bucketId,
+					label: w.label,
+					percent: w.percent,
+					color: quotaColorForWindow(w.percent),
+					reset: w.reset,
+					stale: w.stale
+				}))
+			}));
+			const limitsAge = activeAccount?.limitsUpdatedAt ? agoText(new Date(activeAccount.limitsUpdatedAt).toISOString(), t, now) : null;
+			const badgeTooltip = t("badgeTooltip", {
+				count: accountCount,
+				reading: badgeQuota !== null ? t("badgeReading", {
+					window: badgeWindow,
+					percent: badgeQuota.percent
+				}) : t("badgeUnmeasured")
+			});
+			const popoverContent = h("div", {
+				ref: panelRef,
+				className: `agy-ui-popover ${isMobile ? "mobile" : "desktop"}`,
+				style: !isMobile ? anchored === null ? { visibility: "hidden" } : {
+					position: "fixed",
+					top: `${anchored.top}px`,
+					left: `${anchored.left}px`,
+					visibility: "visible"
+				} : void 0,
+				onMouseEnter: handleMouseEnterPopover,
+				onMouseLeave: handleMouseLeavePopover,
+				onClick: (e) => {
+					e.stopPropagation();
+				}
+			}, isMobile ? h("div", { className: "agy-ui-mobile-handle" }) : null, h("div", { className: "agy-ui-modal-header" }, h("div", { className: "agy-ui-modal-title" }, h("span", { className: "agy-ui-sparkle" }, "✦"), h("span", null, t("badgeTitle")), isPinned && !isMobile ? h(_deepseek_ai_dsh_client_ui_primitives.Tag, {
+				tone: "solid",
+				className: "agy-ui-pinned-tag"
+			}, t("badgePinned")) : null), h("div", { className: "agy-ui-header-actions" }, !isMobile ? h(_deepseek_ai_dsh_client_ui_primitives.Button, {
+				variant: "ghost",
+				size: "sm",
+				className: `agy-ui-icon-btn ${isPinned ? "active" : ""}`,
+				title: isPinned ? t("badgeUnpinHint") : t("badgeHint"),
+				onClick: handleTogglePin
+			}, h("svg", {
+				width: "13",
+				height: "13",
+				viewBox: "0 0 24 24",
+				fill: isPinned ? "currentColor" : "none",
+				stroke: "currentColor",
+				strokeWidth: "2"
+			}, h("path", { d: "M12 2v8m0 0l3-3m-3 3L9 7M5 10h14a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-1a2 2 0 0 1 2-2zM12 15v7" }))) : null, h(_deepseek_ai_dsh_client_ui_primitives.Button, {
+				variant: "ghost",
+				size: "sm",
+				className: "agy-ui-icon-btn",
+				title: t("badgeRefreshHint"),
+				onClick: handleRefreshClick,
+				disabled: loading
+			}, h("svg", {
+				className: loading || isUpdating ? "agy-ui-spinning" : "",
+				width: "13",
+				height: "13",
+				viewBox: "0 0 24 24",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: "2",
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			}, h("path", { d: "M21.5 2v6h-6M2.5 22v-6h6M2.5 11.5a10 10 0 0 1 17.5-4.5l1.5 2M21.5 12.5a10 10 0 0 1-17.5 4.5l-1.5-2" }))), h(_deepseek_ai_dsh_client_ui_primitives.Button, {
+				variant: "ghost",
+				size: "sm",
+				className: "agy-ui-icon-btn",
+				title: t("badgeClose"),
+				onClick: handleClose
+			}, h("svg", {
+				width: "13",
+				height: "13",
+				viewBox: "0 0 24 24",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: "2",
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			}, h("line", {
+				x1: "18",
+				y1: "6",
+				x2: "6",
+				y2: "18"
+			}), h("line", {
+				x1: "6",
+				y1: "6",
+				x2: "18",
+				y2: "18"
+			}))))), h("div", { className: "agy-ui-modal-body" }, activeAccount ? h("div", { className: "agy-ui-account-card" }, h("div", null, h("div", { className: "agy-ui-account-email" }, desensitizeEmail(activeAccount.email)), h("div", { className: "agy-ui-account-project" }, `${t("fieldProject")}: ${activeAccount.projectId || t("thinkingDefaultAll")}`)), h(_deepseek_ai_dsh_client_ui_primitives.Tag, {
+				tone: activeAccount.state === "active" ? "success" : activeAccount.state === "cooling" ? "warning" : "danger",
+				className: `agy-ui-state-pill ${activeAccount.state || "active"}`
+			}, stateLabel(activeAccount.state || "active", t))) : h("div", { className: "agy-ui-account-card" }, h("div", {
+				className: "agy-ui-account-email",
+				style: { color: aliasVar("label-tertiary") }
+			}, error ?? t("badgeNoAccount"))), activeAccount?.verificationRequired && activeAccount?.verificationUrl ? h("div", { className: "agy-ui-verify-note" }, h("span", null, t("badgeVerifyRequired")), h("a", {
+				className: "agy-ui-link-btn",
+				href: activeAccount.verificationUrl,
+				target: "_blank",
+				rel: "noopener noreferrer"
+			}, t("badgeAppealLink"))) : null, h("div", { className: "agy-ui-section-label" }, t("badgeSectionMonitor")), ...cards.map((card) => h("div", {
+				key: card.key,
+				className: "agy-ui-quota-card"
+			}, h("div", { className: "agy-ui-quota-header" }, h("span", { className: "agy-ui-model-name" }, card.title)), ...card.windows.map((w, idx) => renderWindow(w, idx, t)))), cards.length === 0 ? h("div", { className: "agy-ui-window-note" }, t("badgeNoQuotaData")) : null, limitsAge ? h("div", { className: "agy-ui-limit-age" }, t("badgeMeasuredAt", { time: limitsAge })) : null), h("div", { className: "agy-ui-modal-footer" }, h("span", null, t("quotaSourceCaption")), h("span", null, t("quotaManageHint"))));
+			const popoverNode = isOpen ? isMobile ? h("div", {
+				className: "agy-ui-popover-container mobile",
+				onClick: handleClose
+			}, popoverContent) : popoverContent : null;
+			return h("span", {
+				ref: rootRef,
+				style: {
+					position: "relative",
+					display: "inline-flex",
+					alignItems: "center"
+				}
+			}, h(_deepseek_ai_dsh_client_ui_primitives.Button, {
+				variant: "ghost",
+				size: "sm",
+				className: `agy-ui-badge ${isPinned ? "pinned" : ""}`,
+				title: badgeTooltip,
+				"aria-label": t("badgeAria"),
+				onClick: handleTogglePin,
+				onMouseEnter: handleMouseEnterBadge,
+				onMouseLeave: handleMouseLeaveBadge
+			}, h(_deepseek_ai_dsh_client_ui_primitives.StateDot, {
+				state: rawDot,
+				size: 7,
+				className: `agy-ui-dot ${dotState}${isUpdating ? " updating" : ""}`
+			}), h("span", null, displayText)), popoverNode);
+		}
+		//#endregion
 		//#region src/thinking-types.ts
 		/**
 		* Thinking-budget vocabulary shared by the host store, the RPC wire contract,
@@ -869,9 +2154,6 @@ window.__ModuleLoader__.load({
 		* without a visible request cost.
 		*/
 		const POOL_POLL_INTERVAL_MS = 3e3;
-		function h(tag, props, ...children) {
-			return (0, react.createElement)(tag, props ?? null, ...children);
-		}
 		/** Call one management method and unwrap the Connection RPC envelope. */
 		function createRpc(connection) {
 			return { async call(method, payload, signal) {
@@ -982,21 +2264,6 @@ window.__ModuleLoader__.load({
 		function promptTokens(counters) {
 			return counters.input + counters.cacheRead + counters.cacheWrite;
 		}
-		/** Quota tint by remaining fraction: healthy / low / critical. */
-		function quotaColor(fraction) {
-			if (fraction > .7) return "var(--dsw-alias-state-success-primary, #22c55e)";
-			if (fraction >= .3) return "var(--dsw-alias-state-warn-primary, #f59e0b)";
-			return "var(--dsw-alias-state-error-primary, #ec1313)";
-		}
-		/** Localized account-state label. */
-		function stateLabel(state, t) {
-			switch (state) {
-				case "active": return t("stateActive");
-				case "cooling": return t("stateCooling");
-				case "verification-required": return t("stateVerificationRequired");
-				case "disabled": return t("stateDisabled");
-			}
-		}
 		/**
 		* Localized label for a reasoning level.
 		*
@@ -1012,21 +2279,6 @@ window.__ModuleLoader__.load({
 			}
 		}
 		/**
-		* Localized label for an upstream quota window token.
-		*
-		* Upstream sends `5h` / `weekly` today. The tokens are mapped rather than
-		* printed so the panel follows the UI language, and an UNRECOGNIZED token falls
-		* back to its raw value: upstream may add a window, and showing `30d` is better
-		* than a blank or a wrong localized label.
-		*/
-		function windowLabel(window, t) {
-			switch (window) {
-				case "5h": return t("quotaWindow5h");
-				case "weekly": return t("quotaWindowWeekly");
-				default: return window;
-			}
-		}
-		/**
 		* Humanize a burn horizon (hours until a window runs dry at the sampled rate).
 		*
 		* Reuses the shared `rel*` magnitudes so the phrasing matches every other
@@ -1079,27 +2331,6 @@ window.__ModuleLoader__.load({
 				day: "numeric"
 			});
 		}
-		const MINUTE_MS = 6e4;
-		const HOUR_MS = 60 * MINUTE_MS;
-		const DAY_MS = 24 * HOUR_MS;
-		/**
-		* Time until a future moment, as localized copy.
-		*
-		* A quota reset wall is often more than 24h out, so a bare `HH:mm` cannot say
-		* whether it means today or tomorrow — the failure this replaces. Bucket
-		* boundaries mirror the host's `relativeTime` (which is defined for past-dated
-		* rows and would need its arguments reversed to serve a future one, so the
-		* comparison is written out here instead); the words stay in this plugin's own
-		* dictionary, which is exactly the split that API intends.
-		*/
-		function untilText(iso, t, now) {
-			if (iso === null) return "—";
-			const at = new Date(iso).getTime();
-			if (Number.isNaN(at)) return "—";
-			const diff = at - now;
-			if (diff <= 0) return t("relNow");
-			return t("quotaResetIn", { value: diff < MINUTE_MS ? t("relNow") : diff < HOUR_MS ? t("relMinutes", { n: Math.floor(diff / MINUTE_MS) }) : diff < DAY_MS ? t("relHours", { n: Math.floor(diff / HOUR_MS) }) : diff < 30 * DAY_MS ? t("relDays", { n: Math.floor(diff / DAY_MS) }) : diff < 365 * DAY_MS ? t("relMonths", { n: Math.floor(diff / (30 * DAY_MS)) }) : t("relYears", { n: Math.floor(diff / (365 * DAY_MS)) }) });
-		}
 		/**
 		* Localized label for a cooldown reason.
 		*
@@ -1116,22 +2347,6 @@ window.__ModuleLoader__.load({
 			}
 		}
 		/**
-		* How long ago a past moment was (the mirror of `untilText`).
-		*
-		* Reuses the same `rel*` magnitudes so the two read consistently, but adds a
-		* direction suffix: a bare magnitude beside a cooldown could equally mean when
-		* it started or when it ends. The suffix and every magnitude come from the
-		* dictionary, so nothing here is language-specific.
-		*/
-		function agoText(iso, t, now) {
-			if (iso === null) return "—";
-			const at = new Date(iso).getTime();
-			if (Number.isNaN(at)) return "—";
-			const diff = now - at;
-			if (diff < MINUTE_MS) return t("relJustNow");
-			return t("relAgo", { value: diff < HOUR_MS ? t("relMinutes", { n: Math.floor(diff / MINUTE_MS) }) : diff < DAY_MS ? t("relHours", { n: Math.floor(diff / HOUR_MS) }) : diff < 30 * DAY_MS ? t("relDays", { n: Math.floor(diff / DAY_MS) }) : diff < 365 * DAY_MS ? t("relMonths", { n: Math.floor(diff / (30 * DAY_MS)) }) : t("relYears", { n: Math.floor(diff / (365 * DAY_MS)) }) });
-		}
-		/**
 		* Ago label with seconds resolution, for the recent list. `agoText` collapses
 		* the whole first minute into "just now", which is too coarse when the reader
 		* is watching live activity — here the seconds carry the information.
@@ -1139,7 +2354,7 @@ window.__ModuleLoader__.load({
 		function recentAgo(at, now, t) {
 			const diff = now - at;
 			if (diff < 1e4) return t("relJustNow");
-			if (diff < MINUTE_MS) return t("relSeconds", { n: Math.floor(diff / 1e3) });
+			if (diff < 6e4) return t("relSeconds", { n: Math.floor(diff / 1e3) });
 			return agoText(new Date(at).toISOString(), t, now);
 		}
 		/**
@@ -1356,6 +2571,59 @@ window.__ModuleLoader__.load({
 			const activePos = accounts.findIndex((a) => a.active);
 			return activePos >= 0 ? activePos : 0;
 		}
+		function PreferencesCard(props) {
+			const { rpc, t, onBadgePrefChange } = props;
+			const [badgeEnabled, setBadgeEnabled] = (0, react.useState)(false);
+			const [loading, setLoading] = (0, react.useState)(true);
+			const [saving, setSaving] = (0, react.useState)(false);
+			const [saveError, setSaveError] = (0, react.useState)(null);
+			const errorTimer = (0, react.useRef)(void 0);
+			(0, react.useEffect)(() => () => {
+				if (errorTimer.current !== void 0) clearTimeout(errorTimer.current);
+			}, []);
+			(0, react.useEffect)(() => {
+				let active = true;
+				rpc.call("ui.prefs.get", {}).then((prefs) => {
+					if (active) {
+						setBadgeEnabled(prefs?.conversationBadge === true);
+						setLoading(false);
+					}
+				}).catch(() => {
+					if (active) setLoading(false);
+				});
+				return () => {
+					active = false;
+				};
+			}, [rpc]);
+			const toggleBadge = (0, react.useCallback)(async (checked) => {
+				setSaving(true);
+				setBadgeEnabled(checked);
+				if (errorTimer.current !== void 0) clearTimeout(errorTimer.current);
+				try {
+					const res = await rpc.call("ui.prefs.set", { conversationBadge: checked });
+					setBadgeEnabled(res.conversationBadge);
+					setSaveError(null);
+					onBadgePrefChange?.(res.conversationBadge);
+				} catch (err) {
+					setBadgeEnabled(!checked);
+					setSaveError(t("prefSaveFailed", { message: err instanceof Error ? err.message : String(err) }));
+					errorTimer.current = setTimeout(() => setSaveError(null), ACTION_MESSAGE_TTL_MS);
+				} finally {
+					setSaving(false);
+				}
+			}, [
+				rpc,
+				t,
+				onBadgePrefChange
+			]);
+			const row = h("div", { className: "agy-pref-row" }, h("div", { className: "agy-pref-info" }, h("div", { className: "agy-pref-name" }, t("prefConversationBadge")), h("div", { className: "agy-pref-desc" }, t("prefConversationBadgeDesc"))), h(_deepseek_ai_dsh_client_ui_primitives.Switch, {
+				label: t("prefConversationBadge"),
+				checked: badgeEnabled,
+				disabled: loading || saving,
+				onChange: (checked) => void toggleBadge(checked)
+			}));
+			return card(t("preferencesTitle"), saveError === null ? row : [row, h("div", { className: "agy-error" }, saveError)]);
+		}
 		function AccountsTab(props) {
 			const { accounts, busy, handlers, t } = props;
 			const [selected, setSelected] = (0, react.useState)(null);
@@ -1434,6 +2702,10 @@ window.__ModuleLoader__.load({
 			})), h(RecentCard, {
 				rpc: props.rpc,
 				t
+			}), h(PreferencesCard, {
+				rpc: props.rpc,
+				t,
+				onBadgePrefChange: props.onBadgePrefChange
 			})));
 		}
 		/**
@@ -1966,7 +3238,7 @@ window.__ModuleLoader__.load({
 					id: "cacheRead",
 					labelKey: "kpiCacheRead",
 					value: counters.cacheRead,
-					tone: "var(--dsw-alias-brand-primary-new-colorprimary-new-color, #4176e6)"
+					tone: aliasVar("brand-primary")
 				},
 				{
 					id: "missed",
@@ -1978,7 +3250,7 @@ window.__ModuleLoader__.load({
 					id: "output",
 					labelKey: "kpiOutput",
 					value: counters.output,
-					tone: "var(--dsw-alias-state-success-primary, #22c55e)"
+					tone: aliasVar("state-success-primary")
 				}
 			].map((row) => {
 				const share = total > 0 ? row.value / total * 100 : 0;
@@ -2049,6 +3321,9 @@ window.__ModuleLoader__.load({
 		/** The Settings section body. */
 		function AgySettings(props) {
 			const { rpc, t } = props;
+			(0, react.useEffect)(() => {
+				installAgyStyles();
+			}, []);
 			const [tab, setTab] = (0, react.useState)("accounts");
 			const [accounts, setAccounts] = (0, react.useState)([]);
 			const [models, setModels] = (0, react.useState)([]);
@@ -2421,7 +3696,8 @@ window.__ModuleLoader__.load({
 				handlers,
 				lang: props.lang,
 				rpc,
-				t
+				t,
+				onBadgePrefChange: props.onBadgePrefChange
 			}) : tab === "models" ? modelError === void 0 ? h(ModelsTab, {
 				models,
 				account: modelAccount,
@@ -2552,6 +3828,32 @@ window.__ModuleLoader__.load({
 			const rpc = createRpc(connection);
 			const t = ctx.locale.bind(NS);
 			const lang = ctx.locale.getLocale?.().active;
+			let badgeDisposer = null;
+			const registerBadge = () => {
+				if (badgeDisposer !== null) return;
+				badgeDisposer = ctx.slots.inject("conversation.session.header.actions", () => ctx.slots.register({
+					name: "conversation.session.header.actions",
+					id: "agy-quota-badge",
+					order: 8,
+					label: () => t("title")
+				}, () => h(AgyQuotaBadge, {
+					rpc,
+					t
+				})));
+			};
+			const unregisterBadge = () => {
+				if (badgeDisposer !== null) {
+					badgeDisposer();
+					badgeDisposer = null;
+				}
+			};
+			rpc.call("ui.prefs.get", {}).then((prefs) => {
+				if (prefs?.conversationBadge) registerBadge();
+			}).catch(() => {});
+			const onBadgePrefChange = (enabled) => {
+				if (enabled) registerBadge();
+				else unregisterBadge();
+			};
 			ctx.effect(() => ctx.slots.inject("settings.section", () => ctx.slots.register({
 				name: "settings.section",
 				id: "agy",
@@ -2561,8 +3863,12 @@ window.__ModuleLoader__.load({
 			}, () => h(AgySettings, {
 				rpc,
 				t,
-				lang
+				lang,
+				onBadgePrefChange
 			}))), "dsh-agy: Settings section");
+			ctx.effect(() => () => {
+				unregisterBadge();
+			}, "dsh-agy: quota badge cleanup");
 		}
 		//#endregion
 		exports.AgySettings = AgySettings;