@materialwebunofficial/antigravity-themes 1.0.5 → 1.0.13

package/lib/plugin.mjs

@@ -0,0 +1,98 @@
+// The Antigravity plugin that carries the keeper (keeper.mjs). Antigravity
+// discovers plugins in ~/.gemini/config/plugins/, outside its install folder,
+// and starts their sidecars itself at every launch, with its own Node: so the
+// native install survives updates with no process of ours left running.
+import { cpSync, existsSync, mkdirSync, renameSync, rmdirSync, writeFileSync } from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+import { removeTree } from './asar.mjs';
+import { installDir } from './paths.mjs';
+
+export const PLUGIN = 'antigravity-themes';
+export const pluginDir = () => path.join(os.homedir(), '.gemini', 'config', 'plugins', PLUGIN);
+
+// What the keeper needs to build the scripts again after an update
+const RUNTIME = ['lib', 'src', 'themes', 'vendor', 'package.json', 'LICENSE', 'NOTICE'];
+
+// Material Symbols Rounded "palette"
+const LOGO = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="#6f9fe8" d="M480 -96Q401 -96 331 -126Q261 -156 208 -208Q156 -261 126 -331Q96 -401 96 -480Q96 -560 126 -630Q157 -699 210 -752Q264 -804 336 -834Q407 -864 488 -864Q566 -864 634 -837Q703 -810 754 -763Q805 -716 834 -653Q864 -590 864 -518Q864 -422 797 -355Q730 -288 634 -288H566Q558 -288 552 -283Q546 -278 546 -270Q546 -255 561 -245Q576 -235 576 -192Q576 -155 549 -126Q522 -96 480 -96ZM264 -444Q289 -444 306 -462Q324 -479 324 -504Q324 -529 306 -546Q289 -564 264 -564Q239 -564 222 -546Q204 -529 204 -504Q204 -479 222 -462Q239 -444 264 -444ZM384 -588Q409 -588 426 -606Q444 -623 444 -648Q444 -673 426 -690Q409 -708 384 -708Q359 -708 342 -690Q324 -673 324 -648Q324 -623 342 -606Q359 -588 384 -588ZM576 -588Q601 -588 618 -606Q636 -623 636 -648Q636 -673 618 -690Q601 -708 576 -708Q551 -708 534 -690Q516 -673 516 -648Q516 -623 534 -606Q551 -588 576 -588ZM696 -444Q721 -444 738 -462Q756 -479 756 -504Q756 -529 738 -546Q721 -564 696 -564Q671 -564 654 -546Q636 -529 636 -504Q636 -479 654 -462Q671 -444 696 -444Z"/></svg>
+`;
+
+const README = `# Antigravity Themes
+
+Installed by \`antigravity-themes install --native\`. The themes themselves are
+written into Antigravity's own files (resources/app); this plugin only keeps
+them there. Its one sidecar, the keeper, runs once each time Antigravity
+starts:
+
+- when the themes are in place, it exits at once;
+- after an Antigravity update, which replaces the app's files, it puts the
+  themes back and applies them to the open windows straight away.
+
+Turning this plugin off stops the keeper: the themes then last until the next
+Antigravity update. To remove everything, run
+\`npx -y @materialwebunofficial/antigravity-themes uninstall\`.
+`;
+
+const KEEPER = `// Started by Antigravity with every launch (restart_policy "never": once per
+// start). The work is in runtime/lib/keeper.mjs.
+import { runKeeper } from '../../runtime/lib/keeper.mjs';
+
+await runKeeper();
+`;
+
+export function installPlugin(root, { build, version }) {
+  const staging = path.join(installDir(), 'plugin-staging');
+  removeTree(staging);
+  mkdirSync(path.join(staging, 'sidecars', 'keeper'), { recursive: true });
+  mkdirSync(path.join(staging, 'assets'), { recursive: true });
+  for (const entry of RUNTIME) {
+    const from = path.join(root, entry);
+    if (existsSync(from)) cpSync(from, path.join(staging, 'runtime', entry), { recursive: true });
+  }
+  writeFileSync(path.join(staging, 'runtime', 'build.json'), `${JSON.stringify({ build, version }, null, 2)}\n`);
+  writeFileSync(path.join(staging, 'plugin.json'), `${JSON.stringify({
+    name: PLUGIN,
+    displayName: 'Antigravity Themes',
+    description: 'Keeps the Matte, Paper, Nordic and Material 3 Expressive themes installed across Antigravity updates.',
+    version,
+    logo: 'assets/logo.svg',
+    homepage: 'https://github.com/materialwebunofficial/antigravity-themes',
+  }, null, 2)}\n`);
+  writeFileSync(path.join(staging, 'README.md'), README);
+  writeFileSync(path.join(staging, 'assets', 'logo.svg'), LOGO);
+  writeFileSync(path.join(staging, 'sidecars', 'keeper', 'sidecar.json'), `${JSON.stringify({
+    command: 'node',
+    args: ['keeper.mjs'],
+    restart_policy: 'never',
+    display_name: 'Antigravity Themes keeper',
+    description: 'At each start, puts the themes back if an Antigravity update removed them; otherwise exits at once.',
+  }, null, 2)}\n`);
+  writeFileSync(path.join(staging, 'sidecars', 'keeper', 'keeper.mjs'), KEEPER);
+
+  // Moved in whole (same volume: a rename), so Antigravity never discovers
+  // half a plugin. A keeper still running keeps its folder busy: then copy.
+  const dest = pluginDir();
+  mkdirSync(path.dirname(dest), { recursive: true });
+  try {
+    if (existsSync(dest)) {
+      const old = path.join(installDir(), 'plugin-old');
+      removeTree(old);
+      renameSync(dest, old);
+      removeTree(old);
+    }
+    renameSync(staging, dest);
+  } catch {
+    cpSync(staging, dest, { recursive: true, force: true });
+    removeTree(staging);
+  }
+  try { rmdirSync(installDir()); } catch { /* not empty (a background install) or gone */ }
+  return dest;
+}
+
+export function removePlugin() {
+  const dest = pluginDir();
+  if (!existsSync(dest)) return null;
+  removeTree(dest);
+  return dest;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@materialwebunofficial/antigravity-themes",
-  "version": "1.0.5",
+  "version": "1.0.13",
   "description": "Matte, Paper, Nordic, and Material 3 Expressive themes for Antigravity Desktop, applied without changing the app's files.",
   "homepage": "https://github.com/materialwebunofficial/antigravity-themes#readme",
   "repository": {

package/src/code-tools.js

@@ -120,7 +120,7 @@ function agyCodeTools() {
   }
 
   apply();
-  const timer = setInterval(scan, 2000);
+  const timer = setInterval(scan, 10000);
   scan();
 
   return {

package/src/context-card.js

@@ -21,7 +21,7 @@
 //           seen part-way says which step its count starts from.
 // Warnings at 80% and 95% of the window: one quiet line under the summary.
 function agyContextCard() {
-  const WINDOWS = [[/^gemini/i, 1048576], [/^claude/i, 200000], [/gpt-oss/i, 131072]];
+  const WINDOWS = [[/^gemini/i, 256000], [/^claude/i, 200000], [/gpt-oss/i, 131072]];
   const LEVELS = [[0.95, 'critical', 'The context window is almost full.'],
     [0.8, 'warn', 'The context window is filling up.']];
   const GROUP_NAMES = { 1: 'System prompt', 2: 'Tools', 3: 'Rules', 4: 'MCP tools', 5: 'Skills', 6: 'Subagents', 7: 'Messages', 8: 'Workflows', 9: 'Plugins', 10: 'Flows' };

package/src/frame-host.js

@@ -0,0 +1,282 @@
+// AGY frame host: the themes inside a sidecar frame (Swarm and other plugin
+// panes). Each is a cross-origin plugin:// iframe, so the main window's theme
+// host can neither style it nor share its fonts; this script is injected into
+// the frame itself and takes only what a frame needs: the theme's frame
+// stylesheet (themes/frames/*.css) and the mode, seed and font the window
+// tells it about.
+//
+// Protocol (postMessage with the parent window, which runs theme-host.js):
+//   frame  -> parent  { type: 'agy-theme-query', fonts?: true }
+//   parent -> frame   { type: 'agy-theme-change', theme, seed, mode }
+//   parent -> frame   { type: 'agy-theme-fonts', theme, fonts: [{ family, weight, stretch, buffer }] }
+// The last answer is kept in localStorage, so a frame that loads later paints
+// with its theme at once instead of flashing the stock look.
+function agyFrameHost(bundle) {
+  const VERSION = 1;
+  const existing = window.__agyFrameHost;
+  if (existing?.version === VERSION) return existing.update(bundle);
+  existing?.dispose();
+  // Before 1.0.13 the window's full host ran in frames too, and the window
+  // wrote every one of its custom properties inline on this <html>, where they
+  // would outrank the frame stylesheet. Only the app's own tokens belong there.
+  try { window.__agyThemeHost?.dispose?.(); } catch { /* not ours to fix */ }
+  try {
+    const inline = document.documentElement.style;
+    for (const name of [...inline]) {
+      if (/^--(sw-|o2-|md-|m-|p-|n-|agy-|nord\d)/.test(name)) inline.removeProperty(name);
+    }
+  } catch { /* no root yet: nothing was written */ }
+
+  const STORE = 'agy-frame-theme';
+  const read = () => {
+    try { return JSON.parse(localStorage.getItem(STORE)) || null; } catch { return null; }
+  };
+  const save = (state) => {
+    try { localStorage.setItem(STORE, JSON.stringify(state)); } catch { /* storage blocked: the query answers again */ }
+  };
+
+  let current = null;            // { theme, seed, mode }
+  let answered = false;
+  const fontsLoaded = new Set();  // themes whose font faces are registered
+  let fontsPending = false;       // asked for them, no answer yet
+  const features = new Map();     // theme -> { dispose } for the theme's own script
+
+  // A query asks for the theme's fonts too while the frame lacks them; the
+  // window may not be listening yet (at startup the frame can load first), so
+  // every later query asks again until they arrive
+  const needsFonts = (theme) => (bundle.fonts || []).includes(theme) && !fontsLoaded.has(theme);
+  const ask = () => {
+    const fonts = needsFonts(current?.theme);
+    if (fonts) fontsPending = true;
+    try { window.parent.postMessage(fonts ? { type: 'agy-theme-query', fonts: true } : { type: 'agy-theme-query' }, '*'); } catch { /* detached */ }
+  };
+
+  function apply() {
+    const root = document.documentElement;
+    if (!root) return;
+    const theme = current?.theme;
+    const css = (theme && bundle.frames[theme]) || '';
+    let style = document.getElementById('agy-theme-css');
+    if (!css) {
+      root.removeAttribute('data-agy-theme');
+      root.removeAttribute('data-agy-seed');
+      root.removeAttribute('data-agy-mode');
+      style?.remove();
+    } else {
+      root.setAttribute('data-agy-theme', theme);
+      if (current.seed) root.setAttribute('data-agy-seed', current.seed);
+      else root.removeAttribute('data-agy-seed');
+      root.setAttribute('data-agy-mode', current.mode === 'light' ? 'light' : 'dark');
+      if (!style) {
+        style = document.createElement('style');
+        style.id = 'agy-theme-css';
+      }
+      if (style.textContent !== css) style.textContent = css;
+      // Last, after the frame's own sheets: equal-specificity ties go to the
+      // theme (before <head> exists it goes on <html>; moved at DOMContentLoaded)
+      const parent = document.head || root;
+      if (style.parentNode !== parent || style !== parent.lastElementChild) parent.appendChild(style);
+      if (needsFonts(theme) && !fontsPending) ask();
+    }
+    for (const [name, feature] of features) {
+      if (name !== theme) { feature.dispose(); features.delete(name); }
+    }
+    const start = theme && !features.has(theme) && FEATURES[theme];
+    if (start) {
+      try { features.set(theme, start()); } catch { /* the stylesheet still applies */ }
+    }
+    // A sidecar follows the app's theme by watching this element's inline
+    // style, where the SDK writes the app's tokens. The theme changes what
+    // those tokens resolve to without touching them, so it leaves its own mark
+    // there: Swarm then re-reads its light/dark scheme and hands the tokens on
+    // to its narrator frame.
+    if (css) root.style.setProperty('--agy-frame-theme', `${theme} ${current.seed ?? '-'} ${current.mode}`);
+    else root.style.removeProperty('--agy-frame-theme');
+    // md3e-web components cache their colors; this is the package's own signal
+    // to read the tokens again (a new seed or mode)
+    window.dispatchEvent(new Event('theme-change'));
+  }
+
+  function onMessage(e) {
+    const d = e.data;
+    if (!d || e.source !== window.parent || e.source === window) return;
+    if (d.type === 'agy-theme-change') {
+      answered = true;
+      const next = { theme: typeof d.theme === 'string' ? d.theme : null, seed: typeof d.seed === 'string' ? d.seed : null, mode: d.mode === 'light' ? 'light' : 'dark' };
+      if (current && next.theme === current.theme && next.seed === current.seed && next.mode === current.mode) {
+        // the theme painted from storage: only its fonts may still be missing
+        if (needsFonts(next.theme) && !fontsPending) ask();
+        return;
+      }
+      current = next;
+      save(current);
+      apply();
+    } else if (d.type === 'agy-theme-fonts' && Array.isArray(d.fonts) && document.fonts) {
+      fontsPending = false;
+      if (fontsLoaded.has(d.theme)) return;
+      fontsLoaded.add(d.theme);
+      for (const f of d.fonts) {
+        try {
+          const face = new FontFace(f.family, f.buffer, { weight: f.weight, stretch: f.stretch, style: 'normal', display: 'swap' });
+          document.fonts.add(face);
+          face.load().catch(() => {});
+        } catch {
+          // the theme still reads on its fallback stack
+        }
+      }
+    }
+  }
+  window.addEventListener('message', onMessage);
+
+  // ---- Posts written with literal \uXXXX escapes -------------------------------
+  // A model that passes its post as a JSON string sometimes escapes it twice,
+  // and the board then shows "\u00e9" where an accented letter belongs. Swarm
+  // prints a post as it was stored, so the escapes are decoded here, in the
+  // text nodes of what the page adds (never inside code: there an escape is
+  // meant). Every theme gets this, the app's own included. Swarm clamps a post
+  // to two lines by measuring it, which it did on the longer text: measured
+  // again.
+  const ESCAPE = /\\u([0-9a-fA-F]{4})/g;
+  function decodeEscapes(node) {
+    if (node.nodeType !== 1 || !node.textContent.includes('\\u')) return;
+    const walker = document.createTreeWalker(node, NodeFilter.SHOW_TEXT);
+    const clamps = new Set();
+    for (let text = walker.nextNode(); text; text = walker.nextNode()) {
+      const value = text.nodeValue;
+      if (!value.includes('\\u') || text.parentElement?.closest('code, pre, script, style')) continue;
+      const decoded = value.replace(ESCAPE, (_, hex) => String.fromCharCode(parseInt(hex, 16)));
+      if (decoded === value) continue;
+      text.nodeValue = decoded;
+      const body = text.parentElement?.closest('.feed .msg-body');
+      if (body) clamps.add(body);
+    }
+    for (const body of clamps) {
+      const open = body.classList.contains('open');
+      body.classList.add('clamped');
+      body.classList.remove('open');
+      const overflows = body.scrollHeight > body.clientHeight + 4;
+      if (open) body.classList.add('open');
+      body.classList.toggle('clamped', overflows);
+      body.nextElementSibling?.classList.toggle('hidden', !overflows);
+    }
+  }
+  const escapeObserver = new MutationObserver((records) => {
+    for (const record of records) {
+      for (const node of record.addedNodes) decodeEscapes(node);
+    }
+  });
+  function watchEscapes() {
+    if (!document.body) return;
+    decodeEscapes(document.body);
+    escapeObserver.observe(document.body, { childList: true, subtree: true });
+  }
+  if (document.body) watchEscapes();
+  else document.addEventListener('DOMContentLoaded', watchEscapes, { once: true });
+
+  // ---- MD3E: the Live status is the package's <md-loading-indicator> --------
+  // Swarm marks "updates automatically" with a pulsing dot. M3 Expressive has
+  // a component for exactly that, live activity: the loading indicator. It
+  // rests as its determinate shape (one drawn frame, no animation loop), morphs
+  // for three steps when new posts arrive, and runs while the board is
+  // reconnecting. frames/md3e.css hides the dot it replaces.
+  function md3eFrame() {
+    if (!customElements.get('md-loading-indicator')) {
+      try { bundle.md3e?.(); } catch { return { dispose() {} }; }
+      if (!customElements.get('md-loading-indicator')) return { dispose() {} };
+    }
+    const MORPH_MS = 650 * 3;
+    let live = null, indicator = null, still = null, observer = null, timer = 0, mounted = false;
+    // At rest the indicator is determinate: one drawn frame, no frame loop
+    const make = () => {
+      const el = document.createElement('md-loading-indicator');
+      el.className = 'agy-live';
+      el.setAttribute('size', '24');
+      el.setAttribute('progress', '1');
+      el.setAttribute('aria-hidden', 'true');   // the label next to it says it
+      return el;
+    };
+
+    function sync() {
+      if (!indicator) return;
+      const busy = live.classList.contains('stale') || timer !== 0;
+      if (busy) indicator.removeAttribute('progress');
+      else if (indicator.getAttribute('progress') !== '1') indicator.setAttribute('progress', '1');
+    }
+    function onClass() {
+      if (live.classList.contains('flash') && !timer) {
+        timer = setTimeout(() => { timer = 0; sync(); }, MORPH_MS);
+      }
+      sync();
+    }
+    function mount() {
+      if (mounted) return;
+      live = document.getElementById('live');
+      if (!live) return;
+      mounted = true;
+      indicator = make();
+      live.prepend(indicator);
+      // "Watching for a swarm", on the empty state: the same mark, still
+      const hint = document.querySelector('.empty-hint');
+      if (hint) {
+        still = make();
+        hint.prepend(still);
+      }
+      observer = new MutationObserver(onClass);
+      observer.observe(live, { attributes: true, attributeFilter: ['class'] });
+      sync();
+    }
+    if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', mount, { once: true });
+    else mount();
+
+    return {
+      dispose() {
+        document.removeEventListener('DOMContentLoaded', mount);
+        observer?.disconnect();
+        clearTimeout(timer);
+        indicator?.remove();
+        still?.remove();
+        mounted = true;   // a late DOMContentLoaded must not mount after dispose
+      },
+    };
+  }
+  const FEATURES = { md3e: md3eFrame };
+
+  function update(nextBundle) {
+    bundle = nextBundle;
+    apply();
+    return api;
+  }
+  function dispose() {
+    window.removeEventListener('message', onMessage);
+    document.removeEventListener('DOMContentLoaded', watchEscapes);
+    escapeObserver.disconnect();
+    for (const feature of features.values()) feature.dispose();
+    features.clear();
+    document.getElementById('agy-theme-css')?.remove();
+    const root = document.documentElement;
+    root?.removeAttribute('data-agy-theme');
+    root?.removeAttribute('data-agy-seed');
+    root?.removeAttribute('data-agy-mode');
+    root?.style.removeProperty('--agy-frame-theme');
+    delete window.__agyFrameHost;
+    delete window.__agyFrameScript;   // the frame script may run here again
+  }
+
+  const api = { version: VERSION, update, dispose, get: () => current?.theme ?? null };
+  window.__agyFrameHost = api;
+
+  current = read();
+  apply();
+  // Injected at the start of the document, the stylesheet may have gone on
+  // <html> ahead of the frame's own: put it last in <head> once it exists
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => { if (window.__agyFrameHost === api) apply(); }, { once: true });
+  }
+  // The window's host may start after this frame (the injector reaches the
+  // targets in any order): ask again until it answers
+  ask();
+  for (const delay of [400, 1500, 4000]) setTimeout(() => { if (!answered && window.__agyFrameHost === api) ask(); }, delay);
+  return api;
+}
+
+if (typeof module === 'object' && module.exports) module.exports = agyFrameHost;

package/src/loading-indicator.js

@@ -60,7 +60,7 @@ function agyLoadingIndicator() {
     viewport?.querySelectorAll(ROW).forEach(decorate);
   }
 
-  const timer = setInterval(scan, 2000);
+  const timer = setInterval(scan, 10000);
   scan();
 
   return {

package/src/progress-indicators.js

@@ -84,7 +84,7 @@ function agyProgressIndicators() {
     }
   }
 
-  const timer = setInterval(scan, 2000);
+  const timer = setInterval(scan, 10000);
   scan();
 
   return {
@@ -96,3 +96,51 @@ function agyProgressIndicators() {
     },
   };
 }
+
+// Usage rings (Settings > Models & Usage, the model menu's usage view): M3
+// Expressive's circular indicator leaves a gap between the arc and its
+// track; the app draws a full track circle under the arc. In MD3E the track
+// is cut to what the arc leaves, minus the gap at both ends, through two
+// variables md3e.css reads (other themes ignore them). A 1ms CSS animation on
+// the arc announces each ring as it mounts, so nothing watches the page; one
+// observer follows the value of the rings already seen.
+function agyQuotaRings() {
+  const ARC = '[data-testid="quota-progress-circle"]';
+  const GAP = 4;   // M3's indicator-track gap, px (the ring is drawn 1:1)
+  const style = document.createElement('style');
+  style.id = 'agy-rings-css';
+  style.textContent = `
+    :root[data-agy-theme="md3e"] ${ARC} { animation: agy-ring-mount 1ms; }
+    @keyframes agy-ring-mount { to { opacity: 1; } }`;
+  (document.head || document.documentElement).appendChild(style);
+
+  function fit(arc) {
+    const track = arc.parentElement?.querySelector('circle:first-child');
+    if (!track || track === arc) return;
+    const length = parseFloat(arc.getAttribute('stroke-dasharray'));
+    const offset = parseFloat(arc.getAttribute('stroke-dashoffset')) || 0;
+    if (!(length > 0)) return;
+    const cap = (parseFloat(getComputedStyle(arc).strokeWidth) || 4) / 2;
+    const value = Math.max(0, length - offset);
+    const skip = value ? GAP + 2 * cap : 0;   // round caps reach past both ends
+    const rest = Math.max(0, length - value - 2 * skip);
+    track.style.setProperty('--agy-track-dash', `${rest.toFixed(2)} ${length.toFixed(2)}`);
+    track.style.setProperty('--agy-track-offset', `${(-(value + skip)).toFixed(2)}`);
+    track.style.setProperty('--agy-track-opacity', rest > 0.5 ? '1' : '0');   // a 0-length dash still paints its round caps
+  }
+  const observer = new MutationObserver((records) => records.forEach((r) => fit(r.target)));
+  function onAnimationStart(e) {
+    if (e.animationName !== 'agy-ring-mount') return;
+    fit(e.target);
+    observer.observe(e.target, { attributes: true, attributeFilter: ['stroke-dashoffset', 'stroke-dasharray'] });
+  }
+  document.addEventListener('animationstart', onAnimationStart, true);
+
+  return {
+    dispose() {
+      document.removeEventListener('animationstart', onAnimationStart, true);
+      observer.disconnect();
+      style.remove();
+    },
+  };
+}