{ if (e.key === "Escape") { e.preventDefault(); cancel(); } }} onDragLeave={e => { if (!e.currentTarget.contains(e.relatedTarget as Node | null)) setCue(null); }}>
+
ProviderCollect usageShow in menu bar and side notch
+ {order.map((p, i) =>
{ if (!drag.current || busy.current) return; e.preventDefault(); e.dataTransfer.dropEffect = "move"; const rect = e.currentTarget.getBoundingClientRect(); setCue({ provider: p, after: e.clientY >= rect.top + rect.height / 2 }); }}
+ onDrop={e => {
+ e.preventDefault(); const source = drag.current; if (!source || busy.current) return;
+ const rect = e.currentTarget.getBoundingClientRect(), after = e.clientY >= rect.top + rect.height / 2;
+ const next = order.filter(item => item !== source), target = next.indexOf(p);
+ cancel(); if (source === p || target < 0) return;
+ next.splice(target + (after ? 1 : 0), 0, source); void commit(next, source);
+ }}>
+
+ {mark?.(p)}{providerNames[p]}{p === "grok" && <> Beta>}
+ {controls(p)}
+
)}
+
{saving ? "Saving provider order…" : message}
+
;
+}
diff --git a/src/renderer/style.css b/src/renderer/style.css
new file mode 100644
index 0000000..55ad303
--- /dev/null
+++ b/src/renderer/style.css
@@ -0,0 +1,243 @@
+@import "tailwindcss";
+.api-billing-setup { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; margin-top: 8px; }
+.api-billing-setup > p { flex-basis: 100%; }
+.api-key-field { display: flex; flex: 1 1 180px; flex-direction: column; gap: 4px; min-width: 0; }
+.api-key-field input { width: 100%; min-width: 0; }
+:root { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 13px; font-kerning: normal; font-variant-numeric: tabular-nums; line-height: 1.45; color-scheme: light dark; background: transparent; }
+* { box-sizing: border-box; scrollbar-width: none; } *::-webkit-scrollbar { display: none; } body { margin: 0; } h1,h2,h3,p { margin: 0; } h1 { font-size: 17px; font-weight: 650; } h2 { font-size: 14px; font-weight: 650; } h3 { font-size: 11px; font-weight: 600; color: var(--muted); margin: 12px 0 7px; } p + p { margin-top: 5px; } button,input,select { font: inherit; } button { font-size: 11px; border: 1px solid var(--border); border-radius: 5px; padding: 3px 6px; background: var(--well); color: var(--text); cursor: pointer; } button:active { background: var(--border); } button:disabled { opacity: .45; cursor: default; } button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } input,select { color: var(--text); background: var(--well); border: 1px solid var(--border); border-radius: 5px; padding: 4px 6px; } input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; }
+.app { --grok: #1e1e22; --claude: #c25e00; --antigravity: #2563eb; --opencode: #0f766e; --openrouter: #6d28d9; --canvas: #fafafc; --surface: #fff; --well: #ececf1; --border: #00000018; --text: #242426; --muted: #696973; --good: #238636; --warn: #a86800; --alert: #c93636; color: var(--text); background: var(--canvas); }
+.theme-dark { --grok: #ebebf0; --claude: #d97706; --antigravity: #60a5fa; --opencode: #2dd4bf; --openrouter: #a78bfa; --canvas: #1c1c1e; --surface: #262629; --well: #343438; --border: #ffffff19; --text: #efeff2; --muted: #b0b0b8; --good: #30d158; --warn: #ffb340; --alert: #ff6961; color-scheme: dark; }
+.theme-light { color-scheme: light; }
+.panel-viewport { height: 100dvh; overflow: auto; }
+[hidden] { display: none !important; }
+.surface-flyout, .surface-settings { display: flow-root; }
+@media (prefers-color-scheme: dark) { .theme-system { --grok: #ebebf0; --claude: #d97706; --antigravity: #60a5fa; --opencode: #2dd4bf; --openrouter: #a78bfa; --canvas: #1c1c1e; --surface: #262629; --well: #343438; --border: #ffffff19; --text: #efeff2; --muted: #b0b0b8; --good: #30d158; --warn: #ffb340; --alert: #ff6961; } }
+.row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .secondary { color: var(--muted); font-size: 11px; } .stale { font-size: 11px; color: var(--warn); margin: 8px 0; } .empty { padding: 20px; color: var(--muted); } .badge { color: var(--muted); background: var(--well); padding: 2px 6px; border-radius: 5px; font-size: 10px; } .app-header { margin-bottom: 12px; flex-wrap: wrap; } .header-actions { display: flex; flex-wrap: wrap; gap: 6px; } .app-header small { color: var(--warn); font-size: 11px; font-weight: 400; } .flyout { padding: 14px; } .provider-card { padding: 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); margin-bottom: 10px; } .provider-heading { display: flex; align-items: center; gap: 7px; min-width: 0; } .provider-heading h2 { overflow-wrap: anywhere; } .mark { flex-shrink: 0; width: 16px; height: 16px; display: inline-block; mask-size: contain; mask-repeat: no-repeat; mask-position: center; } .pending-symbol { text-align: center; font-weight: 650; } .status { margin: 5px 0; } .quota-window { margin: 10px 0; } .meter { background: var(--well); height: 5px; border-radius: 4px; overflow: hidden; margin: 5px 0; } .meter span { display: block; height: 100%; border-radius: inherit; } .quota-window .secondary { align-items: flex-start; } .quota-window .secondary > :last-child { text-align: right; } .well { background: var(--well); padding: 8px; border-radius: 6px; } .credit { margin: 10px 0; } .metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; margin: 10px 0; } dt { font-size: 10px; color: var(--muted); } dd { font-size: 13px; margin: 0; } .sparkline { width: 100%; height: 45px; margin: 6px 0; } .heatmap { display: grid; grid-template-columns: repeat(15, 1fr); gap: 3px; margin: 8px 0; } .heatmap > span { aspect-ratio: 1; border-radius: 2px; } .session { padding: 7px 0; border-bottom: 1px solid var(--border); } .session span { overflow-wrap: anywhere; } summary { color: var(--muted); font-size: 11px; cursor: pointer; padding-top: 8px; } .reset-credit { padding: 6px 0; } footer { margin-top: 12px; }
+/* Balance Grok's right-heavy artwork within the shared icon layout. */
+.mark[data-provider="grok"] { transform: translate(-1px, -1px); }
+.provider-setting { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
+.settings { padding: 16px; max-width: 760px; margin: auto; font-size: 13px; }
+.settings .settings-header { margin-bottom: 14px; }
+.settings h1 { font-size: 18px; font-weight: 650; }
+.settings > section { margin: 14px 0; }
+.settings-workspace { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 18px; align-items: start; }
+.settings-nav { display: flex; flex-direction: column; gap: 3px; padding: 6px; border-radius: 8px; background: var(--well); }
+.settings .settings-nav button { text-align: left; background: transparent; border-color: transparent; padding: 3px 6px; }
+.settings .settings-nav button[aria-current="page"] { background: var(--surface); font-weight: 600; }
+.settings-content { min-width: 0; }
+.settings-content > section { margin: 0; }
+.settings h2 { font-size: 13px; margin-bottom: 8px; }
+.settings .secondary { font-size: 12px; line-height: 1.4; margin-top: 5px; overflow-wrap: anywhere; }
+.settings .section-description { margin: -3px 0 10px; }
+.settings .settings-group { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); padding: 0 14px; }
+.settings .setting { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 38px; padding: 7px 0; }
+.settings .settings-group > .setting + .setting, .settings .provider-setting + .provider-setting { border-top: 1px solid var(--border); }
+.settings .setting > span { min-width: 0; overflow-wrap: anywhere; }
+.settings input[type="checkbox"] { flex-shrink: 0; margin: 0; }
+.settings select { min-height: 30px; border-radius: 7px; padding: 5px 10px; }
+.settings button { min-height: 24px; font-size: 12px; border-radius: 5px; padding: 2px 6px; }
+.settings .connections .connection-row { display: block; padding: 10px 0; }
+.settings .connection-summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
+.settings .connection-identity { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
+.settings .connection-identity .mark { margin-top: 2px; }
+.settings .connection-identity > div { min-width: 0; }
+.settings .connection-title { font-weight: 600; }
+.settings .connection-identity .secondary { margin-top: 2px; }
+.settings .connection-summary button { background: transparent; border-color: transparent; color: var(--muted); padding: 2px 5px; }
+.settings .connection-detail { border-top: 1px solid var(--border); margin-top: 10px; padding-top: 4px; }
+.settings .connection-state { color: var(--muted); font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
+.settings .connection-row button { flex-shrink: 0; max-width: 65%; white-space: normal; }
+.settings .connection-method { padding: 8px 0; border-bottom: 0; flex-wrap: wrap; gap: 6px; }
+.settings .connection-method select { max-width: 70%; min-width: 0; }
+.settings .connection-help { line-height: 1.4; margin-bottom: 6px; }
+.connection-actions, .onboarding-finish { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+.connection-actions > p, .onboarding-finish > p { flex: 1; min-width: 0; }
+.onboarding-finish { margin-top: 12px; }
+.settings .connect-button { color: var(--text); font-weight: 600; background: color-mix(in srgb, var(--accent) 8%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }
+.settings .provider-setting { display: grid; grid-template-columns: minmax(0, 1fr) 68px 90px; align-items: center; gap: 14px; }
+.settings .provider-columns { color: var(--muted); font-size: 11px; line-height: 1.3; padding: 12px 0; }
+.settings .provider-columns > :not(:first-child) { text-align: center; }
+.settings .provider-name { overflow-wrap: anywhere; }
+.settings .provider-setting .setting { justify-content: center; gap: 8px; }
+.settings .local-accounts { border-top: 1px solid var(--border); padding: 0 0 12px; }
+.settings summary { font-size: 12px; padding: 12px 0 0; }
+.settings .local-accounts[open] summary { padding-bottom: 12px; }
+.settings .account-row { border: 1px solid var(--border); border-radius: 8px; padding: 10px; margin-bottom: 10px; }
+.settings .account-row input[type="text"], .settings .account-row input:not([type]) { width: 100%; }
+.settings .account-row .row { flex-wrap: wrap; gap: 8px; }
+.settings .account-row label { flex: 1 1 220px; min-width: 0; }
+.settings .account-row .secondary > span { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
+.settings .account-row button { flex-shrink: 0; }
+.settings .size-picker, .settings .accent-picker { border: 0; padding: 14px 0; margin: 0; min-width: 0; }
+.settings .size-picker legend { float: left; max-width: calc(100% - 184px); padding: 6px 8px 6px 0; font-size: 13px; }
+.settings .size-picker > .secondary { clear: both; padding-top: 6px; }
+.settings .accent-picker legend { float: left; width: 100%; padding: 0; margin-bottom: 9px; font-size: 13px; }
+.settings .size-options { margin-left: auto; width: 180px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; padding: 3px; background: var(--well); border-radius: 7px; }
+.settings .size-options label { position: relative; text-align: center; cursor: pointer; }
+.settings .size-options input { position: absolute; opacity: 0; width: 100%; height: 100%; inset: 0; margin: 0; cursor: pointer; }
+.settings .size-options span { display: block; border: 1px solid transparent; padding: 3px; border-radius: 4px; font-size: 11px; }
+.settings .size-options input:checked + span { background: var(--surface); border-color: var(--border); box-shadow: 0 1px 3px #00000012; font-weight: 600; }
+.settings .size-options input:focus-visible { outline: none; }
+.settings .size-options input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
+.settings .size-picker + .setting, .settings .accent-picker { border-top: 1px solid var(--border); }
+.settings .accent-picker { display: flex; flex-wrap: wrap; gap: 6px; }
+.settings .accent-picker label { display: flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 5px; padding: 4px 6px; font-size: 11px; text-transform: capitalize; cursor: pointer; }
+.settings .accent-picker label:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
+.settings .accent-picker input { margin: 0; width: 13px; height: 13px; }
+.settings .accent-swatch { width: 12px; height: 12px; border-radius: 50%; border: 1px solid #00000018; }
+.settings .diagnostics-actions { padding-top: 14px; padding-bottom: 14px; }
+.settings .diagnostics-actions .row, .settings .local-accounts > .row { justify-content: flex-start; flex-wrap: wrap; }
+.settings .settings-footer { margin-top: 14px; flex-wrap: wrap; }
+.action-error { border-left: 2px solid var(--alert); background: var(--well); color: var(--alert); padding: 8px; font-size: 11px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
+.action-error > span { min-width: 0; overflow-wrap: anywhere; }
+.action-error button { flex-shrink: 0; }
+.surface-settings > .action-error { position: sticky; top: 0; z-index: 1; font-size: 12px; line-height: 1.4; padding: 10px 16px; border-bottom: 1px solid var(--border); }
+.settings .onboarding { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px; }
+.settings .onboarding h2 { margin-bottom: 0; }
+.settings .onboarding > :not(button) { grid-column: 1; }
+.settings .onboarding button { grid-column: 2; grid-row: 1 / 3; align-self: center; }
+.settings .connection-demo { margin: 0 0 8px; }
+.settings .providers .provider-setting .setting > span { display: none; }
+@media (max-width: 620px) { .provider-setting { gap: 8px; } .provider-heading { align-items: flex-start; } }
+@media (max-width: 450px) {
+ .settings { padding: 12px; }
+ .settings-workspace { grid-template-columns: minmax(0, 1fr); gap: 14px; }
+ .settings-nav { flex-direction: row; flex-wrap: wrap; gap: 2px; }
+ .settings .settings-nav button { font-size: 12px; padding: 3px 6px; }
+ .settings .settings-group { padding: 0 12px; }
+ .settings .provider-setting { grid-template-columns: minmax(0, 1fr) 72px 92px; gap: 8px; }
+ .settings .providers .provider-setting:not(.provider-columns) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; padding: 8px 0; }
+ .settings .providers .provider-name { grid-column: 1 / -1; }
+ .settings .providers .provider-columns { display: none; }
+ .settings .providers .provider-setting .setting { justify-content: flex-start; }
+ .settings .providers .provider-setting .setting > span { display: inline; }
+ .settings .onboarding { grid-template-columns: minmax(0, 1fr); }
+ .settings .onboarding button { grid-column: 1; grid-row: auto; justify-self: start; }
+ .settings .connection-method select { max-width: 100%; }
+ .settings .connection-actions, .settings .onboarding-finish { flex-wrap: wrap; }
+ .settings .connection-row button { max-width: 100%; }
+}
+.surface-flyout button { border-radius: 5px; min-height: 24px; padding: 2px 5px; }
+.surface-flyout .service-status { padding: 10px 12px; background: transparent; }
+.surface-flyout .service-status .status { margin-top: 8px; }
+.surface-flyout .service-status h2 { font-size: 12px; }
+.surface-flyout .service-status .status { margin: 5px 0 0; }
+.surface-flyout .service-status .service-reading { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 2px 6px; }
+.surface-flyout .service-status .service-reading button { font-size: 11px; line-height: 1.2; padding: 2px 5px; }
+.surface-flyout .service-status .service-reading .secondary { font-size: 10px; }
+.surface-flyout .service-status button { min-height: 24px; }
+.surface-flyout .service-status button .badge { background: transparent; padding: 0; }
+.surface-flyout .activity-summary .metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 8px 0; }
+.surface-flyout .metrics dt { font-size: 11px; line-height: 1.35; }
+.surface-flyout .provider-card h3 { font-size: 12px; margin: 12px 0 6px; }
+.surface-flyout .provider-card .telemetry, .surface-share .detail-card .telemetry { border-top: 1px solid var(--border); padding-top: 8px; }
+.metrics > div { min-width: 0; overflow-wrap: anywhere; }
+.service-status .provider-heading > :not(.mark), .service-status .status > :last-child { min-width: 0; overflow-wrap: anywhere; }
+.service-status .status > :last-child { text-align: right; }
+.provider-card > header .badge { min-width: 0; overflow-wrap: anywhere; }
+.quota-window > .row:first-child > span, .reset-credit .row > span { min-width: 0; overflow-wrap: anywhere; }
+.quota-window > .row:first-child > strong, .reset-credit button { flex-shrink: 0; white-space: nowrap; }
+.reset-credit + .reset-credit { border-top: 1px solid var(--border); }
+.provider-card > .empty { padding: 8px 0; overflow-wrap: anywhere; }
+.quota-stale { padding: 8px; border-left: 2px solid var(--warn); background: var(--well); border-radius: 5px; overflow-wrap: anywhere; }
+.flyout > footer, .update-actions { flex-wrap: wrap; }
+.update-actions > span { flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; }
+.update-actions button { flex-shrink: 0; }
+@media (max-width: 360px) { .surface-flyout .activity-summary .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+.provider-tabs { display: flex; align-items: center; gap: 3px; overflow-x: auto; padding: 4px; margin-bottom: 8px; border-radius: 8px; background: var(--well); }
+.provider-tabs [role="tab"] { display: flex; align-items: center; gap: 5px; min-height: 28px; padding: 5px 6px; flex-shrink: 0; border-color: transparent; background: transparent; }
+.provider-tabs [role="tab"][aria-selected="true"] { background: var(--surface); font-weight: 600; }
+.provider-tabs small { font-size: 9px; color: var(--muted); }
+.surface-flyout .usage-card { padding: 10px; }
+:is(.surface-flyout, .surface-notch) .usage-card h3 { margin: 7px 0 3px; }
+:is(.surface-flyout, .surface-notch) .usage-card .status { margin: 2px 0 6px; }
+:is(.surface-flyout, .surface-notch) .usage-card .quota-window { margin: 6px 0; }
+:is(.surface-flyout, .surface-notch) .usage-card .meter { height: 4px; margin: 3px 0; }
+:is(.surface-flyout, .surface-notch) .usage-card .credit { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; margin: 6px 0; padding: 6px; }
+:is(.surface-flyout, .surface-notch) .usage-card .credit > .row { flex: 1 1 100px; }
+:is(.surface-flyout, .surface-notch) .usage-card .metrics { margin: 5px 0; gap: 5px 10px; }
+:is(.surface-flyout, .surface-notch) .usage-card .sparkline { display: block; height: 24px; margin: 4px 0; }
+:is(.surface-flyout, .surface-notch) .usage-card .reset-credit { padding: 4px 0; }
+:is(.surface-flyout, .surface-notch) .usage-card .activity-heatmap { margin-top: 8px; }
+:is(.surface-flyout, .surface-notch) .usage-card .telemetry { padding-top: 6px; }
+:is(.surface-flyout, .surface-notch) .usage-card summary { padding-top: 4px; }
+:is(.surface-flyout, .surface-notch) .usage-card footer { margin-top: 8px; }
+.surface-flyout .overview-details { background: transparent; padding: 8px 0; border: 0; border-top: 1px solid var(--border); border-radius: 0; }
+.overview-details > summary { padding: 0; }
+.overview-details[open] > summary { margin-bottom: 8px; }
+.overview-details > .provider-card:last-child { margin-bottom: 0; }
+.surface-notch { width: max-content; background: transparent; } .notch { display: flex; align-items: flex-start; width: max-content; background: transparent; } .strip { display: flex; flex-direction: column; width: 36px; background: #262629; border-radius: 10px; padding: 6px 0; flex-shrink: 0; touch-action: none; user-select: none; } .strip-provider { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; width: 36px; padding: 5px 0; border: none; background: none; border-radius: 6px; } .strip-provider[aria-pressed="true"] { background: #ffffff08; } .strip-provider .mark { width: 13px; height: 13px; } .strip-percent { font-size: 8px; line-height: 1.25; } .strip-provider small { position: absolute; top: 3px; right: 2px; font-size: 7px; line-height: 1; border-radius: 3px; background: var(--surface); padding: 1px; } .usage-ring { width: 22px; height: 22px; border-radius: 50%; padding: 2px; } .usage-ring > span { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #262629; } .detail-card { width: 250px; flex-shrink: 0; border-radius: 10px; margin: 0; padding: 14px; overflow: auto; } .detail-card h2 { font-size: 12px; } .detail-card .row { gap: 5px; } .detail-card .badge { font-size: 9px; } .detail-card .quota-window strong { font-size: 11px; } .detail-card .secondary { font-size: 10px; } .card-left .detail-card { order: -1; } .detail-card footer button, .reset-credit button { font-size: 11px; }
+@media (hover: hover) and (pointer: fine) {
+ button:hover:not(:disabled) { border-color: var(--accent); }
+}
+@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation: none !important; transition: none !important; } }
+
+.heatmap.full-history { grid-template-columns: repeat(26, minmax(0, 1fr)); grid-template-rows: repeat(7, auto); grid-auto-flow: column; gap: 2px; }
+
+.surface-tray { width: max-content; height: 22px; background: transparent; }
+.tray-image { height: 22px; width: max-content; display: flex; align-items: center; gap: 4px; padding: 0 5px; font-size: 11px; font-weight: 500; }
+.tray-cluster { display: flex; align-items: center; gap: 2px; white-space: nowrap; }
+.tray-cluster .mark { width: 13px; height: 13px; }
+.tray-cluster small { font-size: 7px; font-weight: 700; }
+.tray-eta { font-size: 9.5px; border-radius: 8px; padding: 1px 3px; background: var(--well); }
+
+
+.surface-share { width: 250px; background: transparent; }
+
+.surface-notch .strip { max-height: var(--notch-max-height); overflow-y: auto; }
+/* Integer pixel sizes keep notch text sharp without moving the strip anchor. */
+.surface-notch { --notch-body: 13px; --notch-secondary: 10px; --notch-heading: 12px; --notch-value: 13px; --notch-control: 10px; --notch-padding: 10px; --notch-space: 6px; --notch-gap: 6px; }
+.surface-notch.size-small { --notch-body: 11px; --notch-secondary: 10px; --notch-heading: 11px; --notch-value: 11px; --notch-control: 10px; --notch-padding: 9px; --notch-space: 6px; --notch-gap: 5px; }
+.surface-notch.size-large { --notch-body: 15px; --notch-secondary: 12px; --notch-heading: 14px; --notch-value: 15px; --notch-control: 12px; --notch-padding: 12px; --notch-space: 8px; --notch-gap: 8px; }
+.surface-notch .detail-card { width: 220px; max-height: var(--notch-max-height); overflow-y: auto; font-size: var(--notch-body); padding: var(--notch-padding); }
+.surface-notch .detail-card h2, .surface-notch .detail-card h3 { font-size: var(--notch-heading); }
+.surface-notch .detail-card .secondary, .surface-notch .detail-card dt, .surface-notch .detail-card .badge, .surface-notch .detail-card summary, .surface-notch .detail-card .heatmap { font-size: var(--notch-secondary); }
+.surface-notch .detail-card dd, .surface-notch .detail-card .quota-window strong { font-size: var(--notch-value); }
+.surface-notch .detail-card button { min-height: 20px; font-size: var(--notch-control); line-height: 1.2; padding: 2px 5px; }
+.surface-flyout .reset-credit button { min-height: 20px; font-size: 10px; line-height: 1.2; border-radius: 4px; }
+.surface-notch .detail-card .quota-window, .surface-notch .detail-card .credit, .surface-notch .detail-card .metrics { margin: var(--notch-space) 0; }
+.surface-notch .detail-card .metrics { gap: var(--notch-gap); }
+.surface-notch .detail-card :is(.secondary, dt, h3, .badge, summary) { color: #b0b0b8; }
+.surface-notch .detail-card .telemetry { border-top: 1px solid var(--border); padding-top: var(--notch-gap); }
+.surface-notch .detail-card .well { padding: var(--notch-gap); }
+.surface-notch .detail-card footer { margin-top: var(--notch-space); }
+.activity-heatmap { margin-top: 12px; }
+.heatmap-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+.heatmap-heading h3 { margin: 0; color: var(--text); }
+.heatmap-heading select { font-size: 10px; padding: 2px 5px; }
+@supports (appearance: base-select) {
+ .heatmap-heading select, .heatmap-heading select::picker(select) { appearance: base-select; }
+ .heatmap-heading select { min-width: 85px; justify-content: space-between; }
+ .heatmap-heading select::picker(select) { position-area: block-end span-inline-start; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 5px; padding: 3px; }
+ .heatmap-heading option { display: grid; grid-template-columns: 10px 1fr; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 3px; text-align: left; }
+ .heatmap-heading option::checkmark { display: block; visibility: hidden; grid-column: 1; content: "✓"; }
+ .heatmap-heading option:checked::checkmark { visibility: visible; }
+ .heatmap-heading option:is(:checked, :hover, :focus) { background: Highlight; color: HighlightText; }
+}
+.heatmap-caption { margin-top: 4px; line-height: 1.4; }
+.heatmap-empty { padding-top: 8px; }
+.heatmap { font-size: 11px; line-height: 1.4; }
+.heatmap-cell { min-width: 0; }
+.heatmap-readout { margin-top: 6px; font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
+.heatmap-legend { display: flex; align-items: center; flex-wrap: wrap; column-gap: 12px; row-gap: 4px; font-size: inherit; }
+.heatmap-scale, .heatmap-missing { display: inline-flex; align-items: center; gap: 4px; }
+.heatmap-legend i { width: 7px; height: 7px; border-radius: 2px; }
+.heatmap-missing i, .heatmap .unavailable-day > span { box-shadow: inset 0 0 0 1px var(--border); }
+.heatmap-cell > span { display: block; width: 100%; height: 100%; border-radius: inherit; }
+.heatmap-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.surface-notch .heatmap-readout { font-size: var(--notch-secondary); }
+
+@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
+ .surface-flyout button:not(:disabled):not(:focus-visible), .surface-settings button:not(:disabled):not(:focus-visible), .surface-notch .detail-card button:not(:disabled):not(:focus-visible) { transition: background-color 120ms ease; }
+ .surface-flyout button:hover:not(:disabled):not(:focus-visible):not(:active), .surface-settings button:hover:not(:disabled):not(:focus-visible):not(:active), .surface-notch .detail-card button:hover:not(:disabled):not(:focus-visible):not(:active) { background: color-mix(in srgb, var(--accent) 8%, var(--well)); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }
+ .surface-flyout button:is(:active, :focus-visible), .surface-settings button:is(:active, :focus-visible), .surface-notch .detail-card button:is(:active, :focus-visible) { transition: none; }
+}
+
+.settings .provider-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
+.settings .provider-name > span:not(.mark):not(.provider-moves) { flex: 1 1 64px; min-width: 0; }
+.settings .provider-drag { cursor: grab; padding: 4px; flex-shrink: 0; }
+.settings .provider-moves { display: flex; flex-shrink: 0; gap: 2px; }
+.settings .provider-moves button { padding: 4px; }
+.settings .provider-order .drop-before { box-shadow: inset 0 2px var(--accent); }
+.settings .provider-order .drop-after { box-shadow: inset 0 -2px var(--accent); }
+.settings .provider-order-status { min-height: 1.4em; margin: 4px 0; }
diff --git a/src/shared/ipc.ts b/src/shared/ipc.ts
new file mode 100644
index 0000000..9e01969
--- /dev/null
+++ b/src/shared/ipc.ts
@@ -0,0 +1,47 @@
+import type { Snapshot } from "./state";
+import type { Provider } from "../domain/models";
+export const channel = "meterusage:request", stateChannel = "meterusage:state";
+export const statusPages = { codex: "https://status.openai.com/", claude: "https://status.claude.com/", cursor: "https://status.cursor.com/", copilot: "https://www.githubstatus.com/" };
+export type Surface = "flyout" | "settings" | "notch" | "tray" | "share";
+export enum PanelSize { Small = "small", Medium = "medium", Large = "large" }
+export const panelScales = { [PanelSize.Small]: 0.8, [PanelSize.Medium]: 1, [PanelSize.Large]: 1.15 };
+export type ConnectionProvider = "codex" | "claude" | "antigravity" | "grok";
+export interface ConnectionState { provider: ConnectionProvider; status: "disconnected" | "connecting" | "connected" | "failed" | "unsupported"; source: "cli" | "account"; accountMethod?: "cursor" | "bot"; localAvailable: boolean }
+export interface SettingsState {
+ providerOrder?: Provider[];
+ values: Record