@oddessentials/agent-guild 0.9.0 → 0.11.0

package/web/skins/grove/skin.css

@@ -0,0 +1,395 @@
+/* The Grove skin: moss, water and quiet skies, with a cast of gentle nature spirits.
+   Everything here applies only while <html data-skin="grove">; docs/SKINS.md lists every slot.
+   The art is built by concept-art/grove-skin/source/build.py. */
+
+@font-face {
+  font-family: "Fraunces";
+  src: url("fonts/fraunces.woff2") format("woff2");
+  font-weight: 100 900;
+  font-display: swap;
+}
+
+:where(:root[data-skin="grove"]) {
+  --bg: #eef0e6;
+  --surface: #fbfaf4;
+  --surface-2: #f1f2e7;
+  --border: #d8dcc8;
+  --text: #1e2a21;
+  --muted: #5a6a5d;
+  --heading: #1b3324;
+  --accent: #3b7550;
+  --accent-fill: #3b7550;
+  --accent-text: #ffffff;
+  --danger: #b0392c;
+  --ok: #2c7a47;
+  --warn: #965f00;
+  --gold: #a5863e;
+  --gold-ink: #6a5420;
+  --focus: #3b7550;
+  --shadow: 0 1px 2px rgba(30, 50, 30, 0.06), 0 6px 18px rgba(30, 50, 30, 0.07);
+  --radius: 14px;
+  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
+
+  --paper: rgba(251, 250, 244, 0.84);
+  --paper-strong: rgba(251, 250, 244, 0.95);
+  --vine: linear-gradient(90deg, transparent, #7fae6a 20%, #4f8a5a 50%, #8fbf9a 80%, transparent);
+  --page-art: image-set(url("page-light.avif") type("image/avif"), url("page-light.webp") type("image/webp"));
+  --page-veil: linear-gradient(rgba(244, 242, 234, 0.5), rgba(244, 242, 234, 0.26) 45%, rgba(244, 242, 234, 0.36));
+  --card-backdrop: image-set(url("ui/card-light.avif") type("image/avif"), url("ui/card-light.webp") type("image/webp"));
+  --empty-shadow: rgba(40, 70, 40, 0.28);
+  --card-shadow: 0 1px 2px rgba(30, 50, 30, 0.06), 0 10px 28px rgba(30, 50, 30, 0.1);
+  --card-hover-shadow: 0 2px 4px rgba(30, 50, 30, 0.06), 0 16px 36px color-mix(in srgb, var(--pc) 18%, rgba(30, 50, 30, 0.12));
+  --dialog-shadow: 0 30px 70px -18px rgba(20, 40, 25, 0.35);
+  --sunbeam: rgba(255, 248, 220, 0.34);
+
+  body { background: var(--bg); }
+  body::before {
+    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
+    background: var(--page-veil), var(--page-art) center bottom / cover no-repeat;
+  }
+  h2 { font-weight: 600; letter-spacing: 0.01em; }
+
+  .topbar { background: var(--paper); backdrop-filter: blur(12px) saturate(1.15); border-bottom: 1px solid transparent; border-image: var(--vine) 1; }
+  .version { font-family: var(--font-display); }
+  .version.unread::after { background: radial-gradient(circle at 35% 30%, #fff 0 14%, var(--accent) 52%); box-shadow: 0 0 0 2px var(--surface), 0 0 8px color-mix(in srgb, var(--accent) 60%, transparent); }
+  .connection .dot { box-shadow: 0 0 0 3px color-mix(in srgb, var(--dot) 16%, transparent), 0 0 7px color-mix(in srgb, var(--dot) 70%, transparent); }
+  .section-head { padding-bottom: 9px; border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 30%, transparent) 45%, transparent 85%) 1; }
+
+  /* Provider colour and art. Unknown providers fall back to the Shell lantern spirit. */
+  .provider, .session-card {
+    --pc: #9a7ae0;
+    --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: #d97757;
+    --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: #4caf6e;
+    --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: #4a9be8;
+    --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: #2fb8c6;
+    --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)[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; border-radius: 50%;
+    box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--c) 45%, #fff), 0 2px 6px rgba(20, 40, 25, 0.25);
+  }
+
+  /* Cards: soft paper panels with a hairline inner frame and a sprig of leaves in the corner. */
+  .provider, .session-card {
+    position: relative; isolation: isolate; overflow: hidden;
+    padding: 16px; border-radius: 18px; background: var(--paper); 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.4s, box-shadow 0.4s, transform 0.6s var(--ease);
+  }
+  .provider:hover, .session-card:hover {
+    transform: translateY(-2px); border-color: color-mix(in srgb, var(--pc) 45%, var(--border)); box-shadow: var(--card-hover-shadow);
+  }
+  .provider::after, .session-card::after {
+    content: ""; position: absolute; inset: 5px; z-index: 2; pointer-events: none;
+    border: 1px solid color-mix(in srgb, var(--pc) 22%, transparent); border-radius: 14px;
+    background: url("ui/sprig.svg") right -1px top -1px / 46px 46px no-repeat;
+  }
+  /* Hover: a slow beam of sunlight passes across the card. */
+  .provider::before {
+    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
+    background: linear-gradient(115deg, transparent 35%, var(--sunbeam) 50%, transparent 65%);
+    transform: translateX(-110%);
+  }
+  .provider:hover::before { transform: translateX(110%); transition: transform 1.6s var(--ease); }
+
+  .card-art { position: absolute; z-index: -1; overflow: hidden; pointer-events: none; background: var(--card-backdrop) center / cover; }
+  .card-art::before { content: ""; position: absolute; inset: 0; background: var(--idle) no-repeat; }
+  .provider .card-art::before { transition: transform 0.8s var(--ease); }
+  .provider:hover .card-art::before { transform: translate(calc(var(--px, 0) * -6px), calc(var(--py, 0) * -4px)) scale(1.035); }
+  .provider.unavailable { border-color: var(--border); }
+  .provider.unavailable::after { border-color: color-mix(in srgb, var(--muted) 22%, transparent); }
+  .provider.unavailable .card-art { filter: saturate(0.25) brightness(0.92); }
+  .provider.unavailable .card-art::before { background-image: var(--locked); }
+  .provider.unavailable::after {
+    background: url("ui/lock.svg") right 12px top 12px / 32px 32px no-repeat;
+  }
+
+  .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.9s 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) 55%, var(--border)); }
+  .session-card.exited .card-art { filter: grayscale(1) brightness(0.85); }
+  .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: ripples spread across still water beneath the spirit while fireflies rise around it. */
+  .card-aura { position: absolute; z-index: -1; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity 0.9s var(--ease); }
+  .card-aura::before {
+    content: ""; position: absolute; left: 50%; bottom: 6%; width: 120%; aspect-ratio: 3; translate: -50% 0;
+    border-radius: 50%;
+    background: repeating-radial-gradient(closest-side, transparent 0 9%, color-mix(in srgb, var(--pc) 55%, #fff) 10.5%, transparent 12.5% 20%);
+    mask: radial-gradient(closest-side, #000 30%, transparent 100%);
+    transform-origin: 50% 50%;
+  }
+  .card-aura::after {
+    content: ""; position: absolute; inset: 0 0 auto; height: calc(100% + 110px);
+    background-image:
+      radial-gradient(circle, #fff6c4 0 1.3px, color-mix(in srgb, #ffe27a 55%, transparent) 2.2px, transparent 4px),
+      radial-gradient(circle, color-mix(in srgb, var(--pc) 70%, #fff) 0 1px, transparent 3px),
+      radial-gradient(circle, #e8ffd0 0 0.9px, transparent 2.6px);
+    background-size: 52px 110px, 71px 55px, 39px 110px;
+    background-position: 8px 14px, 33px 36px, 20px 70px;
+  }
+  .session-card:has(.status-pill.active) .card-aura { opacity: 1; }
+  .session-card:has(.status-pill.active) .card-aura::before { animation: grove-ripple 3.6s ease-out infinite; }
+  .session-card:has(.status-pill.active) .card-aura::after { animation: grove-fireflies 7s 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; }
+
+  /* The level is carved into a mossy river stone. */
+  .level-badge {
+    display: grid; place-items: center; position: absolute; left: 10px; bottom: 10px; z-index: 3;
+    width: 54px; height: 48px; padding: 3px 0 0 4px;
+    background: url("ui/stone.png") center / contain no-repeat;
+    font: 600 1.05rem var(--font-display); color: #f3f6ee; font-variant-numeric: tabular-nums;
+    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6), 0 0 6px rgba(0, 0, 0, 0.55);
+    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
+  }
+  .level-badge:empty { display: none; }
+  .level-badge.level-up { animation: grove-level-up 1.4s var(--ease); }
+
+  .agent {
+    --fc: var(--c);
+    border-width: 1.5px; border-color: color-mix(in srgb, var(--fc) 75%, #fff); place-items: end end; padding: 0 3px 1px 0;
+    background: #0d1512 center / 100% auto no-repeat;
+    color: #fff; font-size: 0.6rem; text-shadow: 0 0 3px #000, 0 1px 2px #000;
+    box-shadow: 0 0 10px color-mix(in srgb, var(--fc) 40%, transparent);
+  }
+  .session-card .agent { width: 34px; height: 34px; }
+  .agent.working::after { border-color: var(--fc); }
+  .agent[data-familiar="flame"] { --fc: #f2994a; background-image: url("familiars/flame.png"); }
+  .agent[data-familiar="leaf"] { --fc: #6cc46a; background-image: url("familiars/leaf.png"); }
+  .agent[data-familiar="night"] { --fc: #a888e8; background-image: url("familiars/night.png"); }
+  .agent[data-familiar="aether"] { --fc: #a9d8f0; background-image: url("familiars/aether.png"); }
+  .agent.summon { animation: grove-sprout 0.9s var(--ease) both; }
+
+  .meter-label { padding-left: 19px; background: url("ui/drop.svg") left center / 14px 14px no-repeat; }
+  .meter + .meter .meter-label { background-image: url("ui/leaf.svg"); }
+  .meter-bar, .stat-bar { height: 7px; border-radius: 4px; background: color-mix(in srgb, var(--border) 70%, transparent); }
+  .meter-fill { border-radius: 4px; background: linear-gradient(90deg, #2f7fc0, #6cc0e8); }
+  .meter + .meter .meter-fill { background: linear-gradient(90deg, #2f7a45, #7cc25e); }
+  .meter.low .meter-fill { background: linear-gradient(90deg, #9a6200, #e0a74a); }
+  .meter.empty .meter-fill { background: linear-gradient(90deg, #a5352a, #e06a5c); }
+  .stat-fill { border-radius: 4px; background: linear-gradient(90deg, color-mix(in srgb, var(--tier) 60%, #1b3324), var(--tier)); }
+  .model-stats-head { color: var(--accent); }
+  .stat-tier { border-radius: 7px; font-family: var(--font-display); }
+  .tier-s { --tier: #b08518; --tier-ink: #6b4d00; }
+  .tier-a { --tier: #3f8f5a; --tier-ink: #245a37; }
+  .tier-b { --tier: #3a86c8; --tier-ink: #1d568a; }
+  .tier-c { --tier: #8a9a3a; --tier-ink: #55601c; }
+  .tier-d { --tier: #98a39a; --tier-ink: #4f5a52; }
+
+  #empty {
+    padding: 18px 16px 16px; text-align: center; border-radius: 18px;
+    background: var(--paper); backdrop-filter: blur(10px); border: 1px solid var(--border); box-shadow: var(--card-shadow);
+  }
+  .section-head h2 { text-shadow: 0 0 10px var(--bg), 0 0 3px var(--bg); }
+  #empty::before {
+    content: ""; display: block; width: 230px; height: 190px; 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 18px var(--empty-shadow));
+    animation: grove-float 8s ease-in-out infinite alternate;
+  }
+
+  .status-pill { border: 1px solid var(--border); background: var(--paper-strong); }
+  .status-pill.active { border-color: color-mix(in srgb, var(--ok) 40%, 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 { font-family: var(--font-display); border-color: color-mix(in srgb, var(--pc) 40%, var(--border)); color: color-mix(in srgb, var(--pc) 50%, var(--text)); background: color-mix(in srgb, var(--pc) 9%, var(--surface)); }
+
+  .btn { background: var(--paper-strong); border-radius: 999px; }
+  .btn:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
+  .btn.primary {
+    border-color: transparent; color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+    background: linear-gradient(135deg, #4f9163, #2d6b45);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 4px 14px rgba(45, 107, 69, 0.28);
+  }
+  .btn.primary:hover { filter: brightness(1.07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 6px 20px rgba(45, 107, 69, 0.36); }
+  .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(--paper-strong); }
+
+  .models, .news-panel, .auth, .news-latest, .appearance-menu { background: var(--paper-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(20, 36, 26, 0.34); backdrop-filter: blur(3px); }
+  .models { border-radius: 20px; }
+  .models::after, .auth::after {
+    content: ""; position: absolute; inset: 7px; z-index: 2; pointer-events: none;
+    border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); border-radius: 15px;
+  }
+  .models-bar, .panel-bar { border-bottom: 1px solid transparent; border-image: var(--vine) 1; }
+  .model-group h4, .news-day, .changelog-type { font-family: var(--font-display); letter-spacing: 0.04em; color: var(--gold-ink); }
+  .news-latest { border-radius: 16px; }
+  .news-row { transition: background-color 0.2s; }
+  .news-row:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
+  .news-row:first-child { border-radius: 16px 16px 0 0; }
+  .news-row:last-child { border-radius: 0 0 16px 16px; }
+  .news-filter { border-radius: 999px; }
+  .news-filter[aria-pressed="true"] { border-color: transparent; color: #fff; background: linear-gradient(135deg, #4f9163, #2d6b45); }
+  .auth { position: relative; border-radius: 20px; padding: 32px; box-shadow: var(--dialog-shadow); }
+  .terminal-panel { border-radius: 14px; border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); box-shadow: 0 30px 70px rgba(10, 24, 16, 0.4); }
+  .panel-bar { background: var(--paper-strong); }
+  .tip { background: #13201a; color: #e4ece4; border: 1px solid #2f4a3a; border-radius: 10px; box-shadow: 0 12px 30px rgba(8, 18, 12, 0.45); }
+  .tip strong { color: #b9e3a6; font-family: var(--font-display); }
+
+  .providers.deal > .provider { animation: grove-bloom 0.9s var(--ease) both; }
+  .providers.deal > .provider:nth-child(2) { animation-delay: 0.09s; }
+  .providers.deal > .provider:nth-child(3) { animation-delay: 0.18s; }
+  .providers.deal > .provider:nth-child(4) { animation-delay: 0.27s; }
+  .providers.deal > .provider:nth-child(5) { animation-delay: 0.36s; }
+  .providers.deal > .provider:nth-child(n + 6) { animation-delay: 0.45s; }
+  .session-card.enter { animation: grove-drift 0.8s var(--ease) both; }
+
+  /* Light: each spirit sits in a rounded window onto a sunlit glade. */
+  .card-art { border-radius: 13px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), 0 0 0 1px color-mix(in srgb, var(--pc) 30%, #cfd6c0), 0 2px 8px rgba(30, 50, 30, 0.16); }
+  .provider { padding-top: 238px; }
+  .provider .card-art { inset: 12px 12px auto; height: 212px; }
+  .provider .card-art::before { background-size: 104% auto; background-position: 50% 10%; }
+  .session-card { padding-left: 160px; }
+  .session-card .card-art, .session-card .card-aura { inset: 12px auto 12px 12px; width: 134px; border-radius: 13px; }
+  .session-card .card-art::before, .session-card .card-art::after { background-size: 150% auto; background-position: 50% 8%; }
+  .session-card .level-badge { left: 14px; bottom: 14px; }
+
+  @media (max-width: 640px) {
+    .session-card { padding-left: 140px; }
+    .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="grove"][data-theme="dark"]) {
+  --bg: #08110f;
+  --surface: #101b18;
+  --surface-2: #16241f;
+  --border: #24362f;
+  --text: #e2eae3;
+  --muted: #92a597;
+  --heading: #eef5e8;
+  --accent: #8fd0a2;
+  --accent-fill: #3a7a52;
+  --danger: #f07a6c;
+  --ok: #6fd29a;
+  --warn: #e6b45c;
+  --gold: #d6c27e;
+  --gold-ink: #e2d196;
+  --focus: #a6e2b8;
+  --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
+
+  --paper: rgba(10, 20, 17, 0.76);
+  --paper-strong: rgba(13, 24, 20, 0.92);
+  --vine: linear-gradient(90deg, transparent, #4e7d55 20%, #8fd0a2 50%, #5c8f7a 80%, transparent);
+  --page-art: image-set(url("page.avif") type("image/avif"), url("page.webp") type("image/webp"));
+  --page-veil: linear-gradient(rgba(5, 11, 10, 0.6), rgba(5, 11, 10, 0.4) 40%, rgba(5, 11, 10, 0.55));
+  --card-backdrop: image-set(url("ui/card.avif") type("image/avif"), url("ui/card.webp") type("image/webp"));
+  --empty-shadow: rgba(140, 220, 160, 0.18);
+  --card-shadow: inset 0 1px 0 rgba(200, 255, 210, 0.05), 0 10px 30px rgba(0, 0, 0, 0.45);
+  --card-hover-shadow: inset 0 1px 0 rgba(200, 255, 210, 0.07), 0 0 26px color-mix(in srgb, var(--pc) 22%, transparent);
+  --dialog-shadow: 0 30px 80px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(140, 210, 160, 0.06);
+  --sunbeam: rgba(200, 230, 255, 0.08);
+
+  .tier-s { --tier: #e8c25e; --tier-ink: #f8e3a8; }
+  .tier-a { --tier: #6fd29a; --tier-ink: #cdf3db; }
+  .tier-b { --tier: #6cb6f0; --tier-ink: #d0e8fb; }
+  .tier-c { --tier: #b7c86a; --tier-ink: #e6eec4; }
+  .tier-d { --tier: #98a39a; --tier-ink: #d4dbd5; }
+
+  /* Dark: each spirit stands in a moonlit glade that fades into the card. */
+  .card-art { border-radius: 0; box-shadow: none; }
+  .provider { padding-top: 196px; }
+  .provider .card-art { inset: 0 0 auto 0; height: 250px; mask-image: linear-gradient(to bottom, #000 58%, transparent 100%); }
+  .provider .card-art::before { background-size: cover; background-position: center 12%; }
+  .provider .vendor { color: #f1f6ec; }
+  .session-card { padding-left: 152px; }
+  .session-card .card-art, .session-card .card-aura {
+    inset: 0 auto 0 0; width: 168px; 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: 168px auto; background-position: center top; }
+  .session-card .level-badge { left: 10px; bottom: 10px; }
+
+  .meter-bar, .stat-bar { background: #07100d; box-shadow: inset 0 0 0 1px rgba(140, 210, 160, 0.14); }
+  .meter-fill { background: linear-gradient(90deg, #2a78b8, #72c8f0); box-shadow: 0 0 8px rgba(114, 200, 240, 0.45); }
+  .meter + .meter .meter-fill { background: linear-gradient(90deg, #2f8a4e, #8fdc6e); box-shadow: 0 0 8px rgba(143, 220, 110, 0.45); }
+  .meter.low .meter-fill { background: linear-gradient(90deg, #b67a14, #f0c060); box-shadow: 0 0 8px rgba(240, 192, 96, 0.4); }
+  .meter.empty .meter-fill { background: linear-gradient(90deg, #b8443a, #f07a6c); box-shadow: 0 0 8px rgba(240, 122, 108, 0.4); }
+  .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%, #101b18), #07100d); border-color: color-mix(in srgb, var(--tier) 60%, #000); }
+
+  .status-pill { background: rgba(4, 10, 8, 0.6); }
+  .status-pill.active { background: color-mix(in srgb, var(--ok) 10%, rgba(4, 10, 8, 0.6)); box-shadow: 0 0 10px rgba(111, 210, 154, 0.2); }
+  .status-pill.exited { background: color-mix(in srgb, var(--danger) 8%, rgba(4, 10, 8, 0.6)); }
+  .provider .tier { color: color-mix(in srgb, var(--pc) 65%, #fff); background: rgba(4, 10, 8, 0.6); }
+  .badge { background: rgba(4, 10, 8, 0.5); }
+
+  .btn { background: linear-gradient(rgba(28, 44, 37, 0.92), rgba(14, 24, 20, 0.92)); border-color: #2e4a3d; box-shadow: inset 0 1px 0 rgba(200, 255, 210, 0.06); }
+  .btn:hover { border-color: #5f9a72; box-shadow: inset 0 1px 0 rgba(200, 255, 210, 0.08), 0 0 12px rgba(95, 154, 114, 0.3); }
+  .btn.primary { background: linear-gradient(135deg, #4a8c5e, #2a6340); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 18px rgba(80, 160, 105, 0.35); }
+  .btn.danger { color: #ff9a8e; }
+  .btn.danger:hover { border-color: #b8443a; box-shadow: 0 0 12px rgba(240, 122, 108, 0.3); }
+  .cwd input, .auth input, .history-tools input[type="search"], .history-form input, .github-fields input, .github-fields select { border-color: #2e4a3d; background: rgba(4, 10, 8, 0.7); }
+
+  .models::backdrop, .news-panel::backdrop { background: rgba(2, 6, 5, 0.66); }
+  .terminal-panel { border-color: #2e4a3d; box-shadow: 0 0 0 1px rgba(140, 210, 160, 0.06), 0 30px 80px rgba(0, 0, 0, 0.7); }
+  .news-link { color: #eef5e8; }
+  a.news-link:visited { color: var(--muted); }
+
+  @media (max-width: 640px) {
+    .session-card { padding-left: 118px; }
+    .session-card .card-art, .session-card .card-aura { width: 132px; }
+    .session-card .card-art::before, .session-card .card-art::after { background-size: 132px auto; }
+  }
+}
+
+@keyframes grove-bloom { from { opacity: 0; transform: translateY(16px) scale(0.97); filter: blur(4px); } 60% { opacity: 1; filter: blur(0); } }
+@keyframes grove-drift { from { opacity: 0; transform: translateX(-12px); filter: blur(3px); } }
+@keyframes grove-level-up {
+  35% { transform: scale(1.3) rotate(-6deg); filter: brightness(1.35) drop-shadow(0 0 10px #b9f0a0); }
+  70% { transform: scale(0.96) rotate(2deg); }
+}
+@keyframes grove-sprout { from { opacity: 0; transform: translateY(10px) scale(0.2); } 60% { opacity: 1; transform: translateY(-2px) scale(1.12); } }
+@keyframes grove-ripple { from { opacity: 0.9; transform: scale(0.35); } to { opacity: 0; transform: scale(1.15); } }
+@keyframes grove-fireflies { to { transform: translateY(-110px); } }
+@keyframes grove-float { from { transform: translateY(0); } to { transform: translateY(-7px); } }

package/web/skins/grove/ui/drop.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="0.4" y2="1"><stop offset="0" stop-color="#bdeaff"/><stop offset="0.55" stop-color="#4aa6e8"/><stop offset="1" stop-color="#1f6fb8"/></linearGradient></defs><path d="M8 1.2C8 1.2 3 7 3 10.2a5 5 0 0 0 10 0C13 7 8 1.2 8 1.2z" fill="url(#f)" stroke="#1a5f9c" stroke-opacity="0.45" stroke-width="0.6"/><path d="M5.6 10.4a2.6 2.6 0 0 0 2 2.4" fill="none" stroke="#fff" stroke-opacity="0.85" stroke-width="1.1" stroke-linecap="round"/></svg>

package/web/skins/grove/ui/leaf.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><linearGradient id="f" x1="0" y1="1" x2="1" y2="0"><stop offset="0" stop-color="#2f7a3a"/><stop offset="0.6" stop-color="#5fb84e"/><stop offset="1" stop-color="#b6e27a"/></linearGradient></defs><path d="M2.2 13.8C1.6 7.4 5.6 2.4 14 1.8c.4 8-4.6 12.4-11.8 12z" fill="url(#f)" stroke="#245e2c" stroke-opacity="0.5" stroke-width="0.6"/><path d="M2.4 13.6C5.4 10 8.4 7 12.2 3.8M6.4 10.2l-.4-2.6M9 7.6l2.4.2" fill="none" stroke="#e8f6d2" stroke-opacity="0.8" stroke-width="0.8" stroke-linecap="round"/></svg>

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

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><defs><radialGradient id="s" cx="38%" cy="32%" r="75%"><stop offset="0" stop-color="#6d7672"/><stop offset="0.65" stop-color="#3a423f"/><stop offset="1" stop-color="#1f2523"/></radialGradient><linearGradient id="m" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#9ccf5a"/><stop offset="1" stop-color="#4f8a2c"/></linearGradient></defs><ellipse cx="20" cy="21" rx="17.5" ry="16" fill="url(#s)" stroke="#1a1f1d" stroke-opacity="0.5"/><path d="M5 16c3-7 10-11 17-10.5 4 .3 7 1.8 9.4 4-4.4-1.6-9.6-1.2-14 .6S9.6 15 5 16z" fill="url(#m)"/><path d="M15.6 19.5v-3a4.4 4.4 0 0 1 8.8 0v3" fill="none" stroke="#e9efe4" stroke-width="2.1" stroke-linecap="round"/><rect x="13" y="19.2" width="14" height="10.4" rx="3" fill="#e9efe4"/><path d="M20 21.6c-1.9 1.3-2.2 3.6-.1 5.6 2.1-2 1.8-4.3.1-5.6z" fill="#5b9a34"/><path d="M20 22.6v4.4" stroke="#e9efe4" stroke-width="0.6"/><path d="M3.5 27c5 3.5 10 2 13.5-1.5M36.5 24.5c-3.6 3.6-8.4 4.3-12 2.5" fill="none" stroke="#5b9a34" stroke-width="1.5" stroke-linecap="round"/><path d="M8 29.5c-1.6-.4-2.6-1.6-2.6-3 1.5 0 2.6 1.2 2.6 3zM31.5 28c1.4-.9 1.8-2.4 1.2-3.6-1.4.6-1.9 2.2-1.2 3.6z" fill="#7cb84a"/></svg>

package/web/skins/grove/ui/sprig.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><defs><linearGradient id="g" x1="1" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#3f7d3a"/><stop offset="1" stop-color="#8cc75a"/></linearGradient></defs><path d="M63 1C52 6 40 10 30 20 22 28 18 36 15 46" fill="none" stroke="#5a7d3a" stroke-width="1.6" stroke-linecap="round"/><path d="M49 7c-3-5-9-6-13-4 3 4 8 6 13 4z" fill="url(#g)"/><path d="M41 13c1 6 6 9 11 9-1-5-6-9-11-9z" fill="url(#g)"/><path d="M31 20c-4-4-10-4-14-1 4 3 10 4 14 1z" fill="url(#g)"/><path d="M25 28c1 6 5 10 11 10-1-6-5-9-11-10z" fill="url(#g)"/><path d="M19 37c-4-3-9-2-12 1 3 3 9 3 12-1z" fill="url(#g)"/><path d="M15 46c-2 3-1.5 6 .5 8 1.5-2.5 1.2-5.6-.5-8z" fill="#9fd468"/></svg>

package/web/styles.css

@@ -196,6 +196,8 @@ main { max-width: 1200px; margin: 0 auto; padding: 26px 16px 56px; display: grid
   .tier-d { --tier: #94a3b8; --tier-ink: #d4dbe4; }
 }
 .provider-links { display: flex; gap: 14px; font-size: 0.78rem; }
+.reporting-row { display: flex; align-items: center; gap: 10px; font-size: 0.78rem; color: var(--muted); }
+.reporting-row .btn { padding: 2px 10px; font-size: 0.75rem; white-space: nowrap; }
 .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; }
@@ -223,7 +225,7 @@ main { max-width: 1200px; margin: 0 auto; padding: 26px 16px 56px; display: grid
 
 .session-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
 .session-card {
-  display: grid; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius);
+  display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius);
   background: var(--surface); box-shadow: var(--shadow); cursor: pointer;
 }
 .session-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@@ -256,7 +258,11 @@ main { max-width: 1200px; margin: 0 auto; padding: 26px 16px 56px; display: grid
 .agents-row { display: flex; align-items: center; gap: 10px; min-height: 30px; }
 .agents-label { font-size: 0.75rem; color: var(--muted); }
 .agents { display: flex; flex-wrap: wrap; gap: 6px; }
-.agents:empty::after { content: "none reported"; font-size: 0.75rem; color: var(--muted); }
+.agents-row .agents { flex: 1; min-width: 0; }
+.agents:empty::after { content: attr(data-empty); font-size: 0.75rem; color: var(--muted); }
+.agents.reporting-attention:empty::after { color: var(--warn); }
+.reporting-why { align-self: center; padding: 0 6px; border: 1px solid var(--border); border-radius: 999px; background: none; color: var(--muted); font: inherit; font-size: 0.7rem; cursor: pointer; }
+.reporting-why:hover, .reporting-why:focus-visible { color: var(--text); border-color: var(--muted); }
 .agent {
   --c: #64748b;
   width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; position: relative;
@@ -270,6 +276,8 @@ main { max-width: 1200px; margin: 0 auto; padding: 26px 16px 56px; display: grid
 .agent.waiting { border-style: dashed; }
 .agent.done, .agent.idle { opacity: 0.5; }
 .panel-title .agents:empty::after { content: none; }
+.agent.shell { font-family: var(--font-mono, monospace); font-size: 0.8rem; }
+.agent-overflow { align-self: center; font-size: 0.75rem; font-weight: 600; color: var(--muted); }
 
 .card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
 .btn {

package/web/theme.js

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