@oddessentials/agent-guild 0.12.1 → 0.14.0

package/README.md

@@ -47,7 +47,7 @@ Grok Build and a plain shell each get a card. A tool that is missing shows
 vendor's install command for a tool not published on npm. An installed
 tool shows its version and offers **Update** when a newer one is out, using
 the same installer that put it there: npm, Homebrew, WinGet or the vendor's
-own.
+own. The cloud icon on each card opens the vendor's web app.
 
 **Real terminals that outlive the page.** Every session is a full interactive
 terminal: type instructions, answer prompts, watch output. Run as many as you
@@ -104,7 +104,8 @@ vX.Y.Z** switches over when you are ready. The version badge opens
 dark mode, without a reload. **Guild** is the default fantasy look;
 **Professional** is a plain business look with no characters; **Orbital**
 puts a crew of little robots in deep space; **Grove** is a calm moss garden
-of gentle nature spirits. The page
+of gentle nature spirits; **Gnomeland** is a lantern-lit village of gnome
+builders, engineers with a little magic. The page
 follows your system's light or dark setting until you pick one. See
 [docs/SKINS.md](docs/SKINS.md) to make another.
 

package/config/providers.default.json

@@ -29,6 +29,7 @@
       "docs": "https://code.claude.com/docs/en/setup",
       "usageUrl": "https://claude.ai/settings/usage",
       "billingUrl": "https://claude.ai/settings/billing",
+      "cloudUrl": "https://claude.ai/code",
       "win32": {
         "install": "irm https://claude.ai/install.ps1 | iex",
         "channels": {
@@ -65,6 +66,7 @@
       "docs": "https://github.com/openai/codex",
       "usageUrl": "https://chatgpt.com/codex/settings/usage",
       "billingUrl": "https://chatgpt.com/#settings/Billing",
+      "cloudUrl": "https://chatgpt.com/codex",
       "win32": {
         "install": "powershell -ExecutionPolicy ByPass -c \"irm https://chatgpt.com/codex/install.ps1 | iex\"",
         "channels": {
@@ -92,6 +94,7 @@
       },
       "docs": "https://antigravity.google/docs/cli/install",
       "billingUrl": "https://one.google.com/settings",
+      "cloudUrl": "https://gemini.google.com/",
       "win32": {
         "install": "irm https://antigravity.google/cli/install.ps1 | iex",
         "channels": {
@@ -123,6 +126,7 @@
       "docs": "https://docs.x.ai/build/overview",
       "usageUrl": "https://grok.com/?_s=usage",
       "billingUrl": "https://grok.com/?_s=billing",
+      "cloudUrl": "https://grok.com/",
       "win32": {
         "install": "irm https://x.ai/cli/install.ps1 | iex"
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oddessentials/agent-guild",
-  "version": "0.12.1",
+  "version": "0.14.0",
   "description": "Launch and watch AI coding-assistant terminal sessions from one local web page. A bundled session manager owns the terminals so the page can close and reconnect.",
   "license": "MIT",
   "repository": {

package/src/manager/providers.mjs

@@ -182,6 +182,7 @@ function normalize(raw, platform, warnings) {
     docs: String(merged.docs || ''),
     usageUrl: httpsUrl(merged.usageUrl, 'usageUrl', merged.id, warnings),
     billingUrl: httpsUrl(merged.billingUrl, 'billingUrl', merged.id, warnings),
+    cloudUrl: httpsUrl(merged.cloudUrl, 'cloudUrl', merged.id, warnings),
     enabled: merged.enabled !== false,
   };
 }
@@ -637,6 +638,7 @@ export class ProviderRegistry extends EventEmitter {
       docs: provider.docs,
       usageUrl: provider.usageUrl,
       billingUrl: provider.billingUrl,
+      cloudUrl: provider.cloudUrl,
       available: Boolean(resolvedPath),
       resolvedPath,
     };

package/web/app.js

@@ -557,7 +557,7 @@ function renderProviders() {
     update.addEventListener('click', () => installProvider(provider, node));
     renderHint(hint, provider);
     renderCopies(node.querySelector('.copies'), provider);
-    renderConsoleLinks(node, provider);
+    renderVendorLinks(node, provider);
     renderAccounts(node, provider);
     renderUsage(node, provider);
     renderReportingSetup(node, provider);
@@ -627,19 +627,22 @@ function renderHint(hint, provider) {
   hint.append(' ', link);
 }
 
-function renderConsoleLinks(card, provider) {
-  let any = false;
-  for (const [selector, url, what] of [['.usage-link', provider.usageUrl, 'usage'], ['.billing-link', provider.billingUrl, 'billing']]) {
-    const link = card.querySelector(selector);
-    const href = httpsHref(url);
-    link.hidden = !href;
-    if (!href) { link.removeAttribute('href'); continue; }
-    any = true;
-    link.href = href;
-    link.title = `${provider.vendor} ${what} console: ${href}`;
-    link.setAttribute('aria-label', `${provider.vendor} ${what} console (opens in a new tab)`);
-  }
-  card.querySelector('.provider-links').hidden = !any;
+function renderVendorLinks(card, provider) {
+  const usage = setVendorLink(card.querySelector('.usage-link'), provider.usageUrl, `${provider.vendor} usage console`);
+  const billing = setVendorLink(card.querySelector('.billing-link'), provider.billingUrl, `${provider.vendor} billing console`);
+  card.querySelector('.provider-links').hidden = !usage && !billing;
+  setVendorLink(card.querySelector('.cloud-link'), provider.cloudUrl, `${provider.vendor} web app`);
+}
+
+/** Point a link at an https URL, or hide it. Returns whether it is shown. */
+function setVendorLink(link, url, label) {
+  const href = httpsHref(url);
+  link.hidden = !href;
+  if (!href) { link.removeAttribute('href'); return false; }
+  link.href = href;
+  link.title = `${label}: ${href}`;
+  link.setAttribute('aria-label', `${label} (opens in a new tab)`);
+  return true;
 }
 
 function renderTier(card, provider, usage) {

package/web/index.html

@@ -14,6 +14,7 @@
   <link rel="stylesheet" href="/skins/professional/skin.css">
   <link rel="stylesheet" href="/skins/orbital/skin.css">
   <link rel="stylesheet" href="/skins/grove/skin.css">
+  <link rel="stylesheet" href="/skins/gnomeland/skin.css">
 </head>
 <body>
   <header class="topbar">
@@ -258,6 +259,7 @@
           <span class="tool"></span>
           <span class="state"></span>
         </span>
+        <a class="cloud-link" target="_blank" rel="noopener noreferrer" hidden></a>
       </div>
       <div class="accounts" role="tablist" aria-label="Accounts" hidden></div>
       <div class="usage"></div>

package/web/skins/gnomeland/fonts/OFL.txt

@@ -0,0 +1,93 @@
+Copyright (c) 2011-2012, Ana Sanfelippo (anasanfe@gmail.com), with Reserved Font Name 'Almendra'
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/web/skins/gnomeland/skin.css

@@ -0,0 +1,389 @@
+/* The Gnomeland skin: a village of gnome builders, engineers with a little magic, in timber, brass and lantern light.
+   Everything here applies only while <html data-skin="gnomeland">; docs/SKINS.md lists every slot.
+   The art is built by concept-art/gnomeland-skin/source/build.py. */
+
+@font-face {
+  font-family: "Almendra";
+  src: url("fonts/almendra-bold.woff2") format("woff2");
+  font-weight: 700;
+  font-display: swap;
+}
+
+:where(:root[data-skin="gnomeland"]) {
+  --bg: #f4efe4;
+  --surface: #fffaf0;
+  --surface-2: #f4ebd9;
+  --border: #e0d1b2;
+  --text: #261b10;
+  --muted: #6c5a43;
+  --heading: #2f1f11;
+  --accent: #3b6b36;
+  --accent-fill: #3d6e37;
+  --accent-text: #ffffff;
+  --danger: #b0362a;
+  --ok: #2c7a3c;
+  --warn: #9a5a00;
+  --gold: #b88a3e;
+  --gold-ink: #7a5418;
+  --focus: #3b6b36;
+  --shadow: 0 1px 2px rgba(70, 45, 15, 0.08), 0 6px 18px rgba(70, 45, 15, 0.08);
+  --radius: 8px;
+  --font-display: "Almendra", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
+
+  --panel: rgba(255, 250, 240, 0.86);
+  --panel-strong: rgba(255, 250, 240, 0.95);
+  --rule: linear-gradient(90deg, transparent, #c99a4a 20%, #e9c47a 50%, #c99a4a 80%, transparent);
+  --fireflies:
+    radial-gradient(circle, rgba(255, 214, 120, 0.85) 0 0.9px, transparent 1.8px) 0 0 / 43px 37px,
+    radial-gradient(circle, rgba(255, 236, 170, 0.6) 0 0.7px, transparent 1.5px) 19px 21px / 59px 53px,
+    radial-gradient(circle, rgba(200, 255, 150, 0.45) 0 0.6px, transparent 1.3px) 7px 33px / 31px 67px;
+  --page-art: image-set(url("page-light.avif") type("image/avif"), url("page-light.webp") type("image/webp"));
+  --empty-shadow: rgba(70, 45, 15, 0.3);
+  --card-shadow: 0 1px 2px rgba(70, 45, 15, 0.08), 0 10px 26px rgba(70, 45, 15, 0.12);
+  --card-hover-shadow: 0 2px 4px rgba(70, 45, 15, 0.08), 0 16px 34px color-mix(in srgb, var(--pc) 20%, rgba(70, 45, 15, 0.14));
+  --dialog-shadow: 0 30px 70px -18px rgba(50, 30, 10, 0.4);
+
+  body { background: var(--bg); }
+  body::before {
+    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
+    background: var(--page-art) center bottom / cover no-repeat;
+  }
+  h2 { font-weight: 700; letter-spacing: 0.02em; font-size: 1.15rem; }
+
+  .topbar { background: var(--panel); backdrop-filter: blur(12px) saturate(1.1); border-bottom: 1px solid transparent; border-image: var(--rule) 1; }
+  .version { font-family: var(--font-display); color: var(--gold-ink); border-color: color-mix(in srgb, var(--gold) 50%, transparent); background: transparent; }
+  .version:hover { color: var(--gold-ink); border-color: var(--gold); }
+  .version.unread::after { background: radial-gradient(circle at 35% 30%, #fff6d0 0 14%, #f0b84a 50%, #a8661a 100%); box-shadow: 0 0 0 2px var(--surface), 0 0 8px #f0b84a; }
+  .connection .dot { box-shadow: 0 0 0 3px color-mix(in srgb, var(--dot) 18%, transparent), 0 0 7px var(--dot); }
+  .section-head { padding-bottom: 9px; border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, var(--gold), color-mix(in srgb, var(--gold) 30%, transparent) 45%, transparent 85%) 1; }
+
+  /* --hearth reads --pc, so it is declared on the elements that set it, not on :root. */
+  .provider, .session-card {
+    --hearth: radial-gradient(120% 90% at 50% 38%, color-mix(in srgb, var(--pc) 34%, #2b1a0d) 0%, #170e07 62%, #0c0704 100%);
+  }
+
+  /* Provider colour and art. Unknown providers fall back to the Shell ghost. */
+  .provider, .session-card {
+    --pc: #9a6cf0;
+    --idle: image-set(url("characters/shell/idle.avif") type("image/avif"), url("characters/shell/idle.webp") type("image/webp"));
+    --working: image-set(url("characters/shell/working.avif") type("image/avif"), url("characters/shell/working.webp") type("image/webp"));
+    --locked: image-set(url("characters/shell/locked.avif") type("image/avif"), url("characters/shell/locked.webp") type("image/webp"));
+  }
+  .provider[data-id="anthropic"], .session-card[data-provider="anthropic"] {
+    --pc: #dd7a3e;
+    --idle: image-set(url("characters/anthropic/idle.avif") type("image/avif"), url("characters/anthropic/idle.webp") type("image/webp"));
+    --working: image-set(url("characters/anthropic/working.avif") type("image/avif"), url("characters/anthropic/working.webp") type("image/webp"));
+    --locked: image-set(url("characters/anthropic/locked.avif") type("image/avif"), url("characters/anthropic/locked.webp") type("image/webp"));
+  }
+  .provider[data-id="openai"], .session-card[data-provider="openai"] {
+    --pc: #36b86f;
+    --idle: image-set(url("characters/openai/idle.avif") type("image/avif"), url("characters/openai/idle.webp") type("image/webp"));
+    --working: image-set(url("characters/openai/working.avif") type("image/avif"), url("characters/openai/working.webp") type("image/webp"));
+    --locked: image-set(url("characters/openai/locked.avif") type("image/avif"), url("characters/openai/locked.webp") type("image/webp"));
+  }
+  .provider[data-id="google"], .session-card[data-provider="google"] {
+    --pc: #4d84e6;
+    --idle: image-set(url("characters/google/idle.avif") type("image/avif"), url("characters/google/idle.webp") type("image/webp"));
+    --working: image-set(url("characters/google/working.avif") type("image/avif"), url("characters/google/working.webp") type("image/webp"));
+    --locked: image-set(url("characters/google/locked.avif") type("image/avif"), url("characters/google/locked.webp") type("image/webp"));
+  }
+  .provider[data-id="xai"], .session-card[data-provider="xai"] {
+    --pc: #2cc3d3;
+    --idle: image-set(url("characters/xai/idle.avif") type("image/avif"), url("characters/xai/idle.webp") type("image/webp"));
+    --working: image-set(url("characters/xai/working.avif") type("image/avif"), url("characters/xai/working.webp") type("image/webp"));
+    --locked: image-set(url("characters/xai/locked.avif") type("image/avif"), url("characters/xai/locked.webp") type("image/webp"));
+  }
+
+  .provider-icon[data-provider="anthropic"] { --icon: image-set(url("icons/anthropic.avif") type("image/avif"), url("icons/anthropic.webp") type("image/webp")); }
+  .provider-icon[data-provider="openai"] { --icon: image-set(url("icons/openai.avif") type("image/avif"), url("icons/openai.webp") type("image/webp")); }
+  .provider-icon[data-provider="google"] { --icon: image-set(url("icons/google.avif") type("image/avif"), url("icons/google.webp") type("image/webp")); }
+  .provider-icon[data-provider="xai"] { --icon: image-set(url("icons/xai.avif") type("image/avif"), url("icons/xai.webp") type("image/webp")); }
+  .provider-icon[data-provider="shell"] { --icon: image-set(url("icons/shell.avif") type("image/avif"), url("icons/shell.webp") type("image/webp")); }
+  .provider-icon:not(.has-image) { box-shadow: 0 0 0 1.5px #c99a4a, 0 0 0 2.5px rgba(90, 56, 20, 0.35); }
+  .provider-icon:not(.has-image)[data-provider="anthropic"],
+  .provider-icon:not(.has-image)[data-provider="openai"],
+  .provider-icon:not(.has-image)[data-provider="google"],
+  .provider-icon:not(.has-image)[data-provider="xai"],
+  .provider-icon:not(.has-image)[data-provider="shell"] {
+    background: var(--icon) center / cover no-repeat; color: transparent;
+    box-shadow: 0 0 0 1.5px #c99a4a, 0 0 0 2.5px rgba(90, 56, 20, 0.45), 0 2px 6px rgba(50, 30, 10, 0.3);
+  }
+
+  /* Cards: parchment panels held by riveted brass corner brackets. */
+  .provider, .session-card {
+    position: relative; isolation: isolate; overflow: hidden;
+    padding: 16px; background: var(--panel); backdrop-filter: blur(10px);
+    border: 1px solid color-mix(in srgb, var(--pc) 18%, var(--border)); box-shadow: var(--card-shadow);
+    transition: border-color 0.25s, box-shadow 0.25s, transform 0.3s var(--ease);
+  }
+  .provider:hover, .session-card:hover {
+    transform: translateY(-2px); border-color: color-mix(in srgb, var(--pc) 50%, var(--border)); box-shadow: var(--card-hover-shadow);
+  }
+  .provider::after, .session-card::after, .models::after, .auth::after {
+    content: ""; position: absolute; inset: 2px; z-index: 2; pointer-events: none;
+    border: 22px solid transparent; border-image: url("ui/frame.svg") 30 / 22px stretch;
+  }
+  /* A warm lantern glint sweeps across a provider card on hover. */
+  .provider::before {
+    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
+    background: linear-gradient(105deg, transparent 38%, rgba(255, 220, 150, 0.32) 50%, transparent 62%) -100% 0 / 220% 100% no-repeat;
+    opacity: 0;
+  }
+  .provider:hover::before { opacity: 1; background-position: 100% 0; transition: background-position 1.1s var(--ease), opacity 0.2s; }
+
+  .card-art { position: absolute; z-index: -1; overflow: hidden; pointer-events: none; background: var(--fireflies), var(--hearth); }
+  .card-art::before { content: ""; position: absolute; inset: 0; background: var(--idle) no-repeat; }
+  .provider .card-art::before { transition: transform 0.5s var(--ease); }
+  .provider:hover .card-art::before { transform: translate(calc(var(--px, 0) * -6px), calc(var(--py, 0) * -4px)) scale(1.04); }
+  .provider.unavailable { border-color: var(--border); }
+  .provider.unavailable .card-art { background: radial-gradient(120% 90% at 50% 38%, #3a352e 0%, #17140f 70%); }
+  .provider.unavailable .card-art::before { background-image: var(--locked); }
+  .provider.unavailable::after {
+    background: url("ui/lock.svg") right 8px top 8px / 32px 32px no-repeat; background-origin: border-box;
+  }
+
+  .session-card { min-height: 196px; }
+  .session-card .card-art::after {
+    content: ""; position: absolute; inset: 0; background: var(--working) no-repeat;
+    opacity: 0; transition: opacity 0.6s var(--ease);
+  }
+  .session-card:has(.status-pill.active) .card-art::after { opacity: 1; }
+  .session-card:has(.status-pill.active) { border-color: color-mix(in srgb, var(--pc) 60%, var(--border)); }
+  .session-card.exited .card-art { filter: sepia(0.5) grayscale(0.7) brightness(0.8); }
+  .session-card .card-top > .provider-icon { display: none; }
+  .session-card .card-top { flex-wrap: wrap; gap: 6px 8px; }
+  .session-card .card-title { flex-basis: 100%; }
+
+  /* Working: a brass cog turns behind the gnome in a forge glow while sparks rise. */
+  .card-aura { position: absolute; z-index: -1; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity 0.6s var(--ease); }
+  .card-aura::before {
+    content: ""; position: absolute; left: 50%; top: 34%; width: 150%; aspect-ratio: 1; translate: -50% -50%;
+    background: url("ui/wheel.svg") center / 100% no-repeat; opacity: 0.32;
+    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--pc) 70%, transparent));
+  }
+  .card-aura::after {
+    content: ""; position: absolute; inset: 0 0 auto 0; height: calc(100% + 120px);
+    background-image:
+      radial-gradient(circle, #ffe39a 0 1.2px, transparent 2px),
+      radial-gradient(circle, color-mix(in srgb, var(--pc) 70%, #fff) 0 1px, transparent 1.8px),
+      radial-gradient(circle, #ffb35a 0 0.9px, transparent 1.6px);
+    background-size: 46px 60px, 70px 44px, 31px 120px;
+    background-position: 6px 10px, 28px 24px, 15px 50px;
+    mask-image: linear-gradient(to top, #000 30%, transparent 85%);
+  }
+  .session-card:has(.status-pill.active) .card-aura { opacity: 1; }
+  .session-card:has(.status-pill.active) .card-aura::before { animation: gnomeland-turn 9s linear infinite; }
+  .session-card:has(.status-pill.active) .card-aura::after { animation: gnomeland-sparks 2.6s linear infinite; }
+  body:has(#terminal-panel:not([hidden])) main :is(.card-aura, .status-pill, .agent)::before,
+  body:has(#terminal-panel:not([hidden])) main :is(.card-aura, .agent)::after { animation-play-state: paused; }
+
+  .level-badge {
+    display: grid; place-items: center; position: absolute; left: 10px; bottom: 10px; z-index: 3;
+    width: 52px; height: 52px; padding-top: 2px;
+    background: url("ui/level.svg") center / contain no-repeat;
+    font-weight: 800; font-size: 1rem; color: #fbe3a6; font-variant-numeric: tabular-nums;
+    text-shadow: 0 0 6px rgba(240, 184, 74, 0.8), 0 1px 2px #000;
+    filter: drop-shadow(0 2px 3px rgba(20, 10, 0, 0.45));
+  }
+  .level-badge:empty { display: none; }
+  .level-badge.level-up { animation: gnomeland-level-up 1.2s var(--ease); }
+
+  .agent {
+    --fc: var(--c);
+    border-width: 1.5px; border-color: #c99a4a; place-items: end end; padding: 0 3px 1px 0;
+    background: #1a110a center / cover no-repeat;
+    color: #fff; font-size: 0.6rem; text-shadow: 0 0 3px #000, 0 1px 2px #000;
+    box-shadow: 0 0 0 1px rgba(90, 56, 20, 0.5), 0 0 8px color-mix(in srgb, var(--fc) 45%, transparent);
+  }
+  .session-card .agent { width: 34px; height: 34px; }
+  .agent.working::after { border-color: var(--fc); }
+  .agent[data-familiar="flame"] { --fc: #ff9a4a; background-image: url("familiars/flame.png"); }
+  .agent[data-familiar="leaf"] { --fc: #7fd35a; background-image: url("familiars/leaf.png"); }
+  .agent[data-familiar="night"] { --fc: #b38cff; background-image: url("familiars/night.png"); }
+  .agent[data-familiar="aether"] { --fc: #6cc8ff; background-image: url("familiars/aether.png"); }
+  .agent.summon { animation: gnomeland-summon 0.75s var(--ease) both; }
+
+  .meter-label { padding-left: 19px; background: url("ui/cog.svg") left center / 14px 14px no-repeat; }
+  .meter + .meter .meter-label { background-image: url("ui/crystal.svg"); }
+  .meter-bar, .stat-bar { height: 7px; border-radius: 4px; box-shadow: inset 0 1px 1px rgba(60, 35, 10, 0.18); }
+  .meter-fill { border-radius: 4px; background: linear-gradient(90deg, #2f6b33, #6cb05a); }
+  .meter + .meter .meter-fill { background: linear-gradient(90deg, #2f55b8, #64a0f0); }
+  .meter.low .meter-fill { background: linear-gradient(90deg, #9a5a00, #e9a53e); }
+  .meter.empty .meter-fill { background: linear-gradient(90deg, #9c2a20, #d9584a); }
+  .stat-fill { border-radius: 4px; background: linear-gradient(90deg, color-mix(in srgb, var(--tier) 60%, #2f1f11), var(--tier)); }
+  .model-stats-head { color: var(--accent); }
+  .stat-tier { border-radius: 5px; font-family: var(--font-display); }
+  .tier-s { --tier: #b07d12; --tier-ink: #6b4a00; }
+  .tier-a { --tier: #8a55c8; --tier-ink: #5a2f94; }
+  .tier-b { --tier: #3a6fd0; --tier-ink: #1f4a9c; }
+  .tier-c { --tier: #2f8a45; --tier-ink: #1c5e2c; }
+  .tier-d { --tier: #9a8b74; --tier-ink: #5c4f3c; }
+
+  #empty { padding: 4px 16px 8px; text-align: center; }
+  #empty::before {
+    content: ""; display: block; width: 230px; height: 214px; margin: 0 auto 12px;
+    background: image-set(url("ui/empty-state.avif") type("image/avif"), url("ui/empty-state.webp") type("image/webp")) center / contain no-repeat;
+    filter: drop-shadow(0 12px 16px var(--empty-shadow));
+    transform-origin: 50% 100%;
+    animation: gnomeland-sway 7s ease-in-out infinite alternate;
+  }
+
+  .status-pill { border: 1px solid var(--border); background: var(--panel-strong); }
+  .status-pill.active { border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: color-mix(in srgb, var(--ok) 9%, var(--surface)); }
+  .status-pill.exited { border-color: color-mix(in srgb, var(--danger) 35%, transparent); background: color-mix(in srgb, var(--danger) 6%, var(--surface)); }
+  .model-pill { border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
+  .provider .tier { border-color: color-mix(in srgb, var(--pc) 45%, var(--border)); color: color-mix(in srgb, var(--pc) 50%, var(--text)); background: color-mix(in srgb, var(--pc) 10%, var(--surface)); }
+
+  .btn { background: var(--panel-strong); }
+  .btn:hover { border-color: color-mix(in srgb, var(--gold) 70%, var(--border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 16%, transparent); }
+  .btn.primary {
+    border-color: #2a4f25; color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
+    background: linear-gradient(#4f8a46, #35632f);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 0 0 1px rgba(233, 196, 122, 0.35), 0 3px 10px rgba(40, 70, 30, 0.28);
+  }
+  .btn.primary:hover { filter: brightness(1.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 0 0 1px rgba(233, 196, 122, 0.6), 0 5px 16px rgba(40, 70, 30, 0.35); }
+  .btn.danger:hover { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 14%, transparent); }
+  .cwd input, .auth input, .history-tools input[type="search"], .history-form input, .github-fields input, .github-fields select { background: var(--panel-strong); }
+
+  .models, .news-panel, .auth, .news-latest, .appearance-menu { background: var(--panel-strong); backdrop-filter: blur(16px); }
+  .models, .news-panel { box-shadow: var(--dialog-shadow); }
+  .model-columns, .news-day { background: transparent; backdrop-filter: blur(16px); }
+  .models::backdrop, .news-panel::backdrop { background: rgba(40, 24, 8, 0.4); backdrop-filter: blur(2px); }
+  .models { border-radius: 12px; }
+  .models-bar, .panel-bar { border-bottom: 1px solid transparent; border-image: var(--rule) 1; }
+  .model-group h4, .news-day, .changelog-type { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.04em; color: var(--gold-ink); }
+  .news-latest { border-radius: 10px; }
+  .news-row { transition: background-color 0.15s; }
+  .news-row:hover { background: color-mix(in srgb, var(--gold) 10%, transparent); }
+  .news-row:first-child { border-radius: 10px 10px 0 0; }
+  .news-row:last-child { border-radius: 0 0 10px 10px; }
+  .news-filter[aria-pressed="true"] { border-color: #2a4f25; background: linear-gradient(#4f8a46, #35632f); }
+  .auth { position: relative; border-radius: 12px; padding: 32px; box-shadow: var(--dialog-shadow); }
+  .terminal-panel { border-radius: 10px; border-color: color-mix(in srgb, var(--gold) 45%, var(--border)); box-shadow: 0 30px 70px rgba(30, 18, 6, 0.45); }
+  .panel-bar { background: var(--panel-strong); }
+  .tip { background: #1d140c; color: #f1e6d2; border: 1px solid #8a6328; box-shadow: inset 0 0 0 1px rgba(233, 196, 122, 0.12), 0 12px 30px rgba(20, 10, 0, 0.45); }
+  .tip strong { color: #f0cb80; font-family: var(--font-display); font-weight: 700; }
+
+  .providers.deal > .provider { animation: gnomeland-raise 0.7s var(--ease) both; }
+  .providers.deal > .provider:nth-child(2) { animation-delay: 0.08s; }
+  .providers.deal > .provider:nth-child(3) { animation-delay: 0.16s; }
+  .providers.deal > .provider:nth-child(4) { animation-delay: 0.24s; }
+  .providers.deal > .provider:nth-child(5) { animation-delay: 0.32s; }
+  .providers.deal > .provider:nth-child(n + 6) { animation-delay: 0.4s; }
+  .session-card.enter { animation: gnomeland-build 0.6s var(--ease) both; }
+
+  /* Light: the gnomes look out of lantern-lit workshop windows set into the parchment. */
+  .card-art { border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(255, 220, 150, 0.18), 0 0 0 1.5px #b88a3e, 0 0 0 3px rgba(90, 56, 20, 0.28), 0 2px 8px rgba(50, 30, 10, 0.25); }
+  .provider { padding-top: 240px; }
+  .provider .card-art { inset: 14px 14px auto; height: 212px; }
+  .provider .card-art::before { background-size: 108% auto; background-position: 50% 10%; }
+  .session-card { padding-left: 164px; }
+  .session-card .card-art, .session-card .card-aura { inset: 14px auto 14px 14px; width: 134px; border-radius: 6px; }
+  .session-card .card-art::before, .session-card .card-art::after { background-size: 165% auto; background-position: 50% 14%; }
+  .session-card .level-badge { left: 18px; bottom: 18px; width: 46px; height: 46px; font-size: 0.95rem; }
+
+  @media (max-width: 640px) {
+    .session-card { padding-left: 144px; }
+    .session-card .card-art, .session-card .card-aura { width: 114px; }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .provider, .session-card, .card-aura, .session-card .card-art::after, .provider .card-art::before { transition: none; }
+    .provider:hover, .session-card:hover, .provider:hover .card-art::before { transform: none; }
+    .provider::before { display: none; }
+    .providers.deal > .provider, .session-card.enter, .level-badge.level-up, .agent.summon, #empty::before,
+    .session-card:has(.status-pill.active) .card-aura::before, .session-card:has(.status-pill.active) .card-aura::after { animation: none; }
+  }
+}
+
+:where(:root[data-skin="gnomeland"][data-theme="dark"]) {
+  --bg: #0d0a07;
+  --surface: #17120d;
+  --surface-2: #201912;
+  --border: #36291c;
+  --text: #ede3d2;
+  --muted: #a8977d;
+  --heading: #f6e0b4;
+  --accent: #a6d68f;
+  --accent-fill: #4a8441;
+  --danger: #f07b6a;
+  --ok: #82d67a;
+  --warn: #ebb75a;
+  --gold: #e2b766;
+  --gold-ink: #f0cb80;
+  --focus: #f0cb80;
+  --shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+
+  --panel: rgba(22, 16, 10, 0.8);
+  --panel-strong: rgba(24, 18, 12, 0.93);
+  --page-art: image-set(url("page.avif") type("image/avif"), url("page.webp") type("image/webp"));
+  --empty-shadow: rgba(240, 170, 70, 0.22);
+  --card-shadow: inset 0 1px 0 rgba(255, 220, 150, 0.06), 0 10px 30px rgba(0, 0, 0, 0.5);
+  --card-hover-shadow: inset 0 1px 0 rgba(255, 220, 150, 0.08), 0 0 26px color-mix(in srgb, var(--pc) 24%, transparent);
+  --dialog-shadow: 0 30px 80px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(233, 196, 122, 0.06);
+
+  .tier-s { --tier: #f2c25b; --tier-ink: #fbe2a6; }
+  .tier-a { --tier: #b69af0; --tier-ink: #e2d6ff; }
+  .tier-b { --tier: #6ea2f2; --tier-ink: #d2e3ff; }
+  .tier-c { --tier: #82d67a; --tier-ink: #d6f5d0; }
+  .tier-d { --tier: #a8977d; --tier-ink: #e2d8c6; }
+
+  /* Dark: the gnomes stand in the lantern light, faded into the panel. */
+  .card-art { border-radius: 0; box-shadow: none; }
+  .provider { padding-top: 198px; }
+  .provider .card-art { inset: 0 0 auto 0; height: 252px; mask-image: linear-gradient(to bottom, #000 58%, transparent 100%); }
+  .provider .card-art::before { background-size: cover; background-position: center 6%; }
+  .provider .vendor { color: #fff4dc; }
+  .session-card { padding-left: 154px; }
+  .session-card .card-art, .session-card .card-aura {
+    inset: 0 auto 0 0; width: 170px; border-radius: 0;
+    mask-image: linear-gradient(to right, #000 62%, transparent 100%);
+  }
+  .session-card .card-art::before, .session-card .card-art::after { background-size: 170px auto; background-position: center 8%; }
+  .session-card .level-badge { left: 12px; bottom: 12px; }
+  .provider-icon:not(.has-image) { box-shadow: 0 0 0 1.5px #b88a3e, 0 0 10px rgba(240, 184, 74, 0.25); }
+
+  .meter-bar, .stat-bar { background: #0b0805; box-shadow: inset 0 0 0 1px rgba(233, 196, 122, 0.16); }
+  .meter-fill { background: linear-gradient(90deg, #3a8a3e, #8fdc72); box-shadow: 0 0 8px rgba(143, 220, 114, 0.4); }
+  .meter + .meter .meter-fill { background: linear-gradient(90deg, #3a62cc, #7ab2ff); box-shadow: 0 0 8px rgba(122, 178, 255, 0.45); }
+  .meter.low .meter-fill { background: linear-gradient(90deg, #b8781a, #f2bf5c); box-shadow: 0 0 8px rgba(242, 191, 92, 0.45); }
+  .meter.empty .meter-fill { background: linear-gradient(90deg, #b8402f, #f07b6a); box-shadow: 0 0 8px rgba(240, 123, 106, 0.45); }
+  .stat-fill { background: linear-gradient(90deg, color-mix(in srgb, var(--tier) 50%, #000), var(--tier)); box-shadow: 0 0 8px color-mix(in srgb, var(--tier) 40%, transparent); }
+  .stat-tier { background: linear-gradient(color-mix(in srgb, var(--tier) 28%, #17120d), #0b0805); border-color: color-mix(in srgb, var(--tier) 60%, #000); }
+
+  .status-pill { background: rgba(10, 7, 4, 0.6); }
+  .status-pill.active { background: color-mix(in srgb, var(--ok) 10%, rgba(10, 7, 4, 0.6)); box-shadow: 0 0 10px rgba(130, 214, 122, 0.2); }
+  .status-pill.exited { background: color-mix(in srgb, var(--danger) 8%, rgba(10, 7, 4, 0.6)); }
+  .provider .tier { color: color-mix(in srgb, var(--pc) 65%, #fff); background: rgba(10, 7, 4, 0.6); }
+  .badge { background: rgba(10, 7, 4, 0.5); }
+
+  .btn { background: linear-gradient(rgba(44, 33, 22, 0.92), rgba(26, 19, 12, 0.92)); border-color: #4a3824; box-shadow: inset 0 1px 0 rgba(255, 220, 150, 0.08); }
+  .btn:hover { border-color: #b88a3e; box-shadow: inset 0 1px 0 rgba(255, 220, 150, 0.1), 0 0 12px rgba(226, 183, 102, 0.3); }
+  .btn.primary { border-color: #6a8f3a; background: linear-gradient(#55924a, #35662f); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(233, 196, 122, 0.3), 0 0 16px rgba(110, 170, 80, 0.3); }
+  .btn.danger { color: #f59a8c; }
+  .btn.danger:hover { border-color: #b8402f; box-shadow: 0 0 12px rgba(240, 123, 106, 0.3); }
+  .cwd input, .auth input, .history-tools input[type="search"], .history-form input, .github-fields input, .github-fields select { border-color: #4a3824; background: rgba(10, 7, 4, 0.7); }
+
+  .models::backdrop, .news-panel::backdrop { background: rgba(6, 4, 2, 0.66); }
+  .terminal-panel { border-color: #5a4226; box-shadow: 0 0 0 1px rgba(233, 196, 122, 0.06), 0 30px 80px rgba(0, 0, 0, 0.7); }
+  .news-link { color: #fff4dc; }
+  a.news-link:visited { color: var(--muted); }
+
+  @media (max-width: 640px) {
+    .session-card { padding-left: 120px; }
+    .session-card .card-art, .session-card .card-aura { width: 134px; }
+    .session-card .card-art::before, .session-card .card-art::after { background-size: 134px auto; }
+  }
+}
+
+@keyframes gnomeland-raise { from { opacity: 0; transform: translateY(26px) rotate(-1.4deg); } 60% { opacity: 1; transform: translateY(-4px) rotate(0.4deg); } }
+@keyframes gnomeland-build { from { opacity: 0; transform: translateY(8px) scaleY(0.9); transform-origin: 50% 100%; } 65% { opacity: 1; transform: scaleY(1.02); } }
+@keyframes gnomeland-level-up {
+  35% { transform: scale(1.3) rotate(-0.5turn); filter: brightness(1.5) drop-shadow(0 0 10px #f6d48a); }
+  75% { transform: scale(0.96) rotate(-0.97turn); }
+  to { transform: rotate(-1turn); }
+}
+@keyframes gnomeland-summon { from { opacity: 0; transform: translateY(12px) scale(0.3); } 60% { opacity: 1; transform: translateY(-3px) scale(1.15); } }
+@keyframes gnomeland-turn { to { transform: rotate(1turn); } }
+@keyframes gnomeland-sparks { to { transform: translateY(-120px); } }
+@keyframes gnomeland-sway { from { transform: rotate(-1.2deg); } to { transform: rotate(1.2deg) translateY(-4px); } }

package/web/skins/gnomeland/ui/cog.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><linearGradient id="b" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#fbe3a2"/><stop offset="0.5" stop-color="#c9933e"/><stop offset="1" stop-color="#7a4f1c"/></linearGradient></defs><path d="M6.35 2.33L6.81 0.49L9.19 0.49L9.65 2.33L10.84 2.83L12.47 1.85L14.15 3.53L13.17 5.16L13.67 6.35L15.51 6.81L15.51 9.19L13.67 9.65L13.17 10.84L14.15 12.47L12.47 14.15L10.84 13.17L9.65 13.67L9.19 15.51L6.81 15.51L6.35 13.67L5.16 13.17L3.53 14.15L1.85 12.47L2.83 10.84L2.33 9.65L0.49 9.19L0.49 6.81L2.33 6.35L2.83 5.16L1.85 3.53L3.53 1.85L5.16 2.83Z" fill="url(#b)" stroke="#5a3814" stroke-width="0.5" stroke-linejoin="round"/><circle cx="8" cy="8" r="2.3" fill="#3a2414" stroke="#f6d48a" stroke-width="0.6"/></svg>

package/web/skins/gnomeland/ui/crystal.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><linearGradient id="f" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#e2f1ff"/><stop offset="0.5" stop-color="#6aa8ff"/><stop offset="1" stop-color="#2f4fc8"/></linearGradient></defs><path d="M8 0.6L9.7 6.3 15.4 8 9.7 9.7 8 15.4 6.3 9.7 0.6 8 6.3 6.3z" fill="url(#f)" stroke="#dbe9ff" stroke-width="0.6" stroke-linejoin="round"/><path d="M8 3.2L8.7 7.3 8 8 7.3 7.3z" fill="#fff" fill-opacity="0.75"/></svg>

package/web/skins/gnomeland/ui/frame.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96"><defs><linearGradient id="b" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#f7dc98"/><stop offset="0.5" stop-color="#c38c3a"/><stop offset="1" stop-color="#86561e"/></linearGradient></defs><path d="M28 6.5h40M28 89.5h40M6.5 28v40M89.5 28v40" stroke="#c99a4a" stroke-opacity="0.85" stroke-width="1.2"/><path d="M3 3h25v7H10v18H3z" fill="url(#b)" stroke="#5a3814" stroke-width="0.8" stroke-linejoin="round"/><g fill="#fff4cf" stroke="#6b4419" stroke-width="0.6"><circle cx="6.5" cy="6.5" r="1.6"/><circle cx="23" cy="6.5" r="1.3"/><circle cx="6.5" cy="23" r="1.3"/></g><g transform="matrix(-1 0 0 1 96 0)"><path d="M3 3h25v7H10v18H3z" fill="url(#b)" stroke="#5a3814" stroke-width="0.8" stroke-linejoin="round"/><g fill="#fff4cf" stroke="#6b4419" stroke-width="0.6"><circle cx="6.5" cy="6.5" r="1.6"/><circle cx="23" cy="6.5" r="1.3"/><circle cx="6.5" cy="23" r="1.3"/></g></g><g transform="matrix(1 0 0 -1 0 96)"><path d="M3 3h25v7H10v18H3z" fill="url(#b)" stroke="#5a3814" stroke-width="0.8" stroke-linejoin="round"/><g fill="#fff4cf" stroke="#6b4419" stroke-width="0.6"><circle cx="6.5" cy="6.5" r="1.6"/><circle cx="23" cy="6.5" r="1.3"/><circle cx="6.5" cy="23" r="1.3"/></g></g><g transform="matrix(-1 0 0 -1 96 96)"><path d="M3 3h25v7H10v18H3z" fill="url(#b)" stroke="#5a3814" stroke-width="0.8" stroke-linejoin="round"/><g fill="#fff4cf" stroke="#6b4419" stroke-width="0.6"><circle cx="6.5" cy="6.5" r="1.6"/><circle cx="23" cy="6.5" r="1.3"/><circle cx="6.5" cy="23" r="1.3"/></g></g></svg>

package/web/skins/gnomeland/ui/level.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><defs><linearGradient id="b" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#fbe3a2"/><stop offset="0.45" stop-color="#c9933e"/><stop offset="1" stop-color="#7a4f1c"/></linearGradient><radialGradient id="w" cx="42%" cy="36%" r="70%"><stop offset="0" stop-color="#5a3a22"/><stop offset="0.75" stop-color="#2e1d11"/><stop offset="1" stop-color="#1c120a"/></radialGradient></defs><path d="M27.32 7.44L28.81 1.67L35.19 1.67L36.68 7.44L40.22 8.39L44.41 4.14L49.93 7.32L48.34 13.08L50.92 15.66L56.68 14.07L59.86 19.59L55.61 23.78L56.56 27.32L62.33 28.81L62.33 35.19L56.56 36.68L55.61 40.22L59.86 44.41L56.68 49.93L50.92 48.34L48.34 50.92L49.93 56.68L44.41 59.86L40.22 55.61L36.68 56.56L35.19 62.33L28.81 62.33L27.32 56.56L23.78 55.61L19.59 59.86L14.07 56.68L15.66 50.92L13.08 48.34L7.32 49.93L4.14 44.41L8.39 40.22L7.44 36.68L1.67 35.19L1.67 28.81L7.44 27.32L8.39 23.78L4.14 19.59L7.32 14.07L13.08 15.66L15.66 13.08L14.07 7.32L19.59 4.14L23.78 8.39Z" fill="url(#b)" stroke="#5a3814" stroke-width="1" stroke-linejoin="round"/><circle cx="32" cy="32" r="20" fill="url(#w)" stroke="#f6d48a" stroke-width="1.6"/><circle cx="32" cy="32" r="17" fill="none" stroke="#e7b865" stroke-opacity="0.35" stroke-width="0.8" stroke-dasharray="1.4 2.6"/><g fill="#f6d48a"><circle cx="32" cy="9.5" r="1.3"/><circle cx="54.5" cy="32" r="1.3"/><circle cx="32" cy="54.5" r="1.3"/><circle cx="9.5" cy="32" r="1.3"/></g></svg>

package/web/skins/gnomeland/ui/lock.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><defs><radialGradient id="o" cx="40%" cy="32%" r="75%"><stop offset="0" stop-color="#7a5232"/><stop offset="0.7" stop-color="#4a301b"/><stop offset="1" stop-color="#2c1b0e"/></radialGradient><linearGradient id="i" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#d9dde3"/><stop offset="1" stop-color="#7d848f"/></linearGradient></defs><circle cx="20" cy="20" r="18.5" fill="url(#o)"/><path d="M5 15.5h30M4 23h32" stroke="#2c1b0e" stroke-opacity="0.45" stroke-width="0.8"/><circle cx="20" cy="20" r="18" fill="none" stroke="#3a3f47" stroke-width="2.2"/><circle cx="20" cy="20" r="18" fill="none" stroke="#9aa1ab" stroke-width="0.7"/><g fill="#b9bfc8"><circle cx="20" cy="4.2" r="1"/><circle cx="35.8" cy="20" r="1"/><circle cx="20" cy="35.8" r="1"/><circle cx="4.2" cy="20" r="1"/></g><path d="M15.4 19.5v-3.2a4.6 4.6 0 0 1 9.2 0v3.2" fill="none" stroke="url(#i)" stroke-width="2.3" stroke-linecap="round"/><rect x="12.6" y="19" width="14.8" height="11.2" rx="2.4" fill="url(#i)" stroke="#4a5059" stroke-width="0.7"/><circle cx="20" cy="23.6" r="1.7" fill="#2a2e35"/><rect x="19.25" y="24" width="1.5" height="3.3" rx="0.75" fill="#2a2e35"/></svg>

package/web/skins/gnomeland/ui/wheel.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><defs><linearGradient id="b" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#ffe7a8"/><stop offset="0.5" stop-color="#d79e45"/><stop offset="1" stop-color="#8a5a1e"/></linearGradient></defs><path d="M91.91 14.38L94.92 3.13L105.08 3.13L108.09 14.38L114.34 15.20L120.17 5.12L129.97 7.75L129.98 19.39L135.80 21.81L144.04 13.57L152.83 18.65L149.82 29.90L154.82 33.74L164.91 27.91L172.09 35.09L166.26 45.18L170.10 50.18L181.35 47.17L186.43 55.96L178.19 64.20L180.61 70.02L192.25 70.03L194.88 79.83L184.80 85.66L185.62 91.91L196.87 94.92L196.87 105.08L185.62 108.09L184.80 114.34L194.88 120.17L192.25 129.97L180.61 129.98L178.19 135.80L186.43 144.04L181.35 152.83L170.10 149.82L166.26 154.82L172.09 164.91L164.91 172.09L154.82 166.26L149.82 170.10L152.83 181.35L144.04 186.43L135.80 178.19L129.98 180.61L129.97 192.25L120.17 194.88L114.34 184.80L108.09 185.62L105.08 196.87L94.92 196.87L91.91 185.62L85.66 184.80L79.83 194.88L70.03 192.25L70.02 180.61L64.20 178.19L55.96 186.43L47.17 181.35L50.18 170.10L45.18 166.26L35.09 172.09L27.91 164.91L33.74 154.82L29.90 149.82L18.65 152.83L13.57 144.04L21.81 135.80L19.39 129.98L7.75 129.97L5.12 120.17L15.20 114.34L14.38 108.09L3.13 105.08L3.13 94.92L14.38 91.91L15.20 85.66L5.12 79.83L7.75 70.03L19.39 70.02L21.81 64.20L13.57 55.96L18.65 47.17L29.90 50.18L33.74 45.18L27.91 35.09L35.09 27.91L45.18 33.74L50.18 29.90L47.17 18.65L55.96 13.57L64.20 21.81L70.02 19.39L70.03 7.75L79.83 5.12L85.66 15.20ZM100 22a78 78 0 1 0 0.01 0z" fill="url(#b)" fill-rule="evenodd"/><circle cx="100" cy="100" r="60" fill="none" stroke="url(#b)" stroke-width="3" stroke-dasharray="4 7"/><g stroke="url(#b)" stroke-width="5" stroke-linecap="round"><path d="M100 24v52M100 124v52M24 100h52M124 100h52"/></g><circle cx="100" cy="100" r="22" fill="none" stroke="url(#b)" stroke-width="6"/></svg>

package/web/styles.css

@@ -23,7 +23,8 @@
   --icon-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Cpath d='M12 2.5v2.2M12 19.3v2.2M2.5 12h2.2M19.3 12h2.2M5.3 5.3l1.6 1.6M17.1 17.1l1.6 1.6M5.3 18.7l1.6-1.6M17.1 6.9l1.6-1.6'/%3E%3C/svg%3E");
   --icon-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M19.5 14.6A8 8 0 0 1 9.4 4.5a8 8 0 1 0 10.1 10.1z'/%3E%3C/svg%3E");
   --icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E");
-  --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5.5l6.5 6.5L9 18.5'/%3E%3C/svg%3E");
+  --icon-cloud: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M7 18.5h10.5a4 4 0 0 0 .6-7.96A6 6 0 0 0 6.5 9.6 4.5 4.5 0 0 0 7 18.5z'/%3E%3C/svg%3E");
+  --icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5.5l6.5 6.5L9 18.5'/%3E%3C/svg%3E");
   --icon-github: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z'/%3E%3C/svg%3E");
   --icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 10.8v6.2' stroke-width='2.4'/%3E%3Ccircle cx='12' cy='7.3' r='1.2' fill='black' stroke='none'/%3E%3C/svg%3E");
   font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
@@ -201,6 +202,10 @@ main { max-width: 1200px; margin: 0 auto; padding: 26px 16px 56px; display: grid
 .console-link { color: var(--accent); text-decoration: none; }
 .console-link:hover { text-decoration: underline; }
 .console-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
+.cloud-link { display: block; flex: none; align-self: flex-start; width: 32px; height: 32px; margin: -4px -6px 0 0; border-radius: 8px; color: var(--muted); }
+.cloud-link::before { content: ""; display: block; width: 100%; height: 100%; background: currentColor; mask: var(--icon-cloud) center / 20px no-repeat; }
+.cloud-link:hover { color: var(--accent); }
+.cloud-link:focus-visible { color: var(--accent); outline: 2px solid var(--focus); outline-offset: 0; }
 .provider-actions { margin-top: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
 .provider .hint { font-size: 0.78rem; color: var(--muted); overflow-wrap: anywhere; }
 .provider .copies { font-size: 0.78rem; color: var(--muted); overflow-wrap: anywhere; }

package/web/theme.js

@@ -9,6 +9,7 @@
     { id: 'professional', name: 'Professional' },
     { id: 'orbital', name: 'Orbital' },
     { id: 'grove', name: 'Grove' },
+    { id: 'gnomeland', name: 'Gnomeland' },
   ];
   window.agentGuildSkins = skins;