@oddessentials/agent-guild 0.24.0 → 0.25.0

package/README.md

@@ -60,6 +60,11 @@ and come back to the same screens. Drag a session card by its grip, with a
 mouse or a finger, to put the cards in the order you want; this browser
 remembers it, and new sessions join at the end.
 
+On a touchscreen, **Copy…** opens a still copy of the terminal text. Touch and
+hold to select, then use **Copy selection** or the browser's Copy menu. **Done**
+returns to the live terminal; the session keeps running while you copy. The
+view includes retained scrollback, or the current screen of a full-screen tool.
+
 **Pick your shell.** The Shell card offers the shells installed on your
 computer and remembers your choice in this browser. On Windows it defaults
 to PowerShell 7 when installed, then Windows PowerShell; Git Bash and Command
@@ -149,7 +154,8 @@ 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; **Gnomeland** is a lantern-lit village of gnome
-builders, engineers with a little magic. The page
+builders, engineers with a little magic; **Goblinville** is a steam-powered
+town of goblin, orc, ogre and troll builders on stilts over a bog. The page
 follows your system's light or dark setting until you pick one. See
 [docs/SKINS.md](docs/SKINS.md) to make another. **Alert sounds**, off until
 you turn them on in the same menu, chime when the session manager confirms

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oddessentials/agent-guild",
-  "version": "0.24.0",
+  "version": "0.25.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/web/app.js

@@ -2,6 +2,7 @@
 // it never owns sessions, so closing the page leaves them running.
 
 import { SOUNDS, MAX_ALERT_AGE_MS, playOnce, rearmSound, managerLossWatcher, stopWatcher, updateWatcher } from './alerts.js';
+import { TerminalCopy } from './terminal-copy.js';
 
 const TOKEN_KEY = 'agentGuild.token';
 const CWD_KEY = 'agentGuild.cwd';
@@ -3591,8 +3592,18 @@ class TerminalView {
 
 // ---- terminal panel -------------------------------------------------------
 
+const terminalCopy = new TerminalCopy({
+  opener: $('panel-copy'), dialog: $('terminal-copy'),
+  getCurrent: () => {
+    const session = state.sessions.get(state.activeId);
+    const view = state.views.get(state.activeId);
+    return session && view ? { id: session.id, name: session.name, term: view.term } : null;
+  },
+});
+
 function openPanel(id) {
   if (!state.sessions.has(id)) return;
+  if (state.activeId !== id) terminalCopy.close();
   if (dictation && dictation.id !== id) stopDictation();
   if (state.activeId && state.activeId !== id) state.views.get(state.activeId)?.unmount();
   state.activeId = id;
@@ -3604,6 +3615,7 @@ function openPanel(id) {
 }
 
 function closePanel() {
+  terminalCopy.close();
   stopDictation();
   if (state.activeId) state.views.get(state.activeId)?.unmount();
   state.activeId = null;
@@ -4187,6 +4199,7 @@ document.addEventListener('visibilitychange', () => {
 });
 addEventListener('pagehide', () => {
   state.pageAway = true;
+  terminalCopy.close();
   stopDictation();
   managerLoss.cancel();
   state.eventsSocket?.close();

package/web/index.html

@@ -15,6 +15,7 @@
   <link rel="stylesheet" href="/skins/orbital/skin.css">
   <link rel="stylesheet" href="/skins/grove/skin.css">
   <link rel="stylesheet" href="/skins/gnomeland/skin.css">
+  <link rel="stylesheet" href="/skins/goblinville/skin.css">
 </head>
 <body>
   <header class="topbar">
@@ -125,6 +126,7 @@
       </div>
       <div class="panel-actions">
         <button id="panel-voice" class="btn voice" type="button" hidden aria-pressed="false" title="Speak into this terminal. Review the text, then press Enter yourself.">Dictate</button>
+        <button id="panel-copy" class="btn" type="button" hidden aria-haspopup="dialog" title="Select and copy terminal text">Copy…</button>
         <button id="panel-stop" class="btn danger" type="button">Stop</button>
         <button id="panel-close" class="btn" type="button" title="Hide the terminal. The session keeps running.">Hide</button>
       </div>
@@ -133,6 +135,21 @@
     <div id="voice-preview" class="voice-preview" hidden aria-live="polite"></div>
   </div>
 
+  <dialog id="terminal-copy" class="terminal-copy" aria-labelledby="terminal-copy-title">
+    <div class="terminal-copy-bar">
+      <div class="terminal-copy-heading">
+        <h2 id="terminal-copy-title">Copy terminal text</h2>
+        <p class="sub" data-session></p>
+      </div>
+      <button class="btn" type="button" data-done>Done</button>
+    </div>
+    <textarea readonly autofocus wrap="off" spellcheck="false" inputmode="none" aria-label="Terminal text snapshot" aria-describedby="terminal-copy-status"></textarea>
+    <div class="terminal-copy-footer">
+      <p id="terminal-copy-status" role="status"></p>
+      <button class="btn primary" type="button" data-copy disabled>Copy selection</button>
+    </div>
+  </dialog>
+
   <dialog id="models" class="models" aria-labelledby="models-title">
     <div class="models-bar">
       <span id="models-icon" class="provider-icon small"></span>

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

@@ -0,0 +1,94 @@
+Copyright (c) 2011, John Vargas Beltr�n (www.johnvargasbeltran.com|john.vargasbeltran@gmail.com),
+with Reserved Font Name "Germania".
+
+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/goblinville/skin.css

@@ -0,0 +1,422 @@
+/* The Goblinville skin: a steam-powered town of goblin builders on stilts over a bog, in riveted copper, brass, soot and lamplight.
+   Everything here applies only while <html data-skin="goblinville">; docs/SKINS.md lists every slot.
+   The art is built by concept-art/goblinville-skin/source/build.py. */
+
+@font-face {
+  font-family: "Germania One";
+  src: url("fonts/germania-one.woff2") format("woff2");
+  font-weight: 400;
+  font-display: swap;
+}
+
+:where(:root[data-skin="goblinville"]) {
+  --bg: #eef0e6;
+  --surface: #fbfaf2;
+  --surface-2: #eeeee0;
+  --border: #d3d3bc;
+  --text: #1d211b;
+  --muted: #5b6052;
+  --heading: #23291f;
+  --accent: #1f6e5c;
+  --accent-fill: #216f5d;
+  --accent-text: #ffffff;
+  --danger: #b0362a;
+  --ok: #2c7a3c;
+  --warn: #985200;
+  --gold: #b8703a;
+  --gold-ink: #7a3f17;
+  --focus: #1f6e5c;
+  --shadow: 0 1px 2px rgba(35, 45, 30, 0.08), 0 6px 18px rgba(35, 45, 30, 0.08);
+  --radius: 7px;
+  --font-display: "Germania One", "Rockwell", "Roboto Slab", "Georgia", serif;
+
+  --panel: rgba(251, 250, 242, 0.86);
+  --panel-strong: rgba(251, 250, 242, 0.95);
+  --rule: linear-gradient(90deg, transparent, #b8703a 20%, #e3a677 50%, #b8703a 80%, transparent);
+  --embers:
+    radial-gradient(circle, rgba(255, 176, 96, 0.8) 0 0.9px, transparent 1.8px) 0 0 / 41px 39px,
+    radial-gradient(circle, rgba(255, 222, 160, 0.55) 0 0.7px, transparent 1.5px) 17px 23px / 57px 51px,
+    radial-gradient(circle, rgba(150, 230, 200, 0.4) 0 0.6px, transparent 1.3px) 9px 31px / 33px 63px;
+  --page-art: image-set(url("page-light.avif") type("image/avif"), url("page-light.webp") type("image/webp"));
+  --page-veil: linear-gradient(rgba(238, 240, 230, 0.55), rgba(238, 240, 230, 0.32) 40%, rgba(238, 240, 230, 0.5));
+  --empty-shadow: rgba(35, 45, 30, 0.3);
+  --card-shadow: 0 1px 2px rgba(35, 45, 30, 0.08), 0 10px 26px rgba(35, 45, 30, 0.12);
+  --card-hover-shadow: 0 2px 4px rgba(35, 45, 30, 0.08), 0 16px 34px color-mix(in srgb, var(--pc) 20%, rgba(35, 45, 30, 0.14));
+  --dialog-shadow: 0 30px 70px -18px rgba(25, 32, 22, 0.42);
+
+  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;
+  }
+  /* Text that sits on the town itself gets a halo of the page colour. */
+  .section-head h2, .cwd > span, .empty { text-shadow: 0 0 2px var(--bg), 0 0 8px var(--bg), 0 0 16px var(--bg); }
+  h2 { font-weight: 400; letter-spacing: 0.03em; font-size: 1.22rem; }
+
+  .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); letter-spacing: 0.03em; 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%, #fff0dc 0 14%, #f08a4a 50%, #9a4416 100%); box-shadow: 0 0 0 2px var(--surface), 0 0 8px #f08a4a; }
+  .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; }
+
+  /* --furnace reads --pc, so it is declared on the elements that set it, not on :root. */
+  .provider, .session-card {
+    --furnace: radial-gradient(120% 90% at 50% 38%, color-mix(in srgb, var(--pc) 32%, #17201b) 0%, #0c110e 62%, #060807 100%);
+  }
+
+  /* Provider colour and art. Unknown providers fall back to the Shell watchman. */
+  .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) { border-radius: 8px; box-shadow: 0 0 0 1.5px #b8703a, 0 0 0 2.5px rgba(74, 34, 12, 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 #b8703a, 0 0 0 2.5px rgba(74, 34, 12, 0.45), 0 2px 6px rgba(25, 32, 22, 0.3);
+  }
+
+  /* Cards: riveted plates held by copper gussets in each corner, joined by a thin copper pipe. */
+  .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 puff of lamplit steam drifts across a provider card on hover. */
+  .provider::before {
+    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
+    background: radial-gradient(40% 60% at 50% 50%, rgba(255, 236, 214, 0.34), transparent 70%) -60% 30% / 70% 90% no-repeat;
+    opacity: 0;
+  }
+  .provider:hover::before { opacity: 1; background-position: 160% 0; transition: background-position 1.4s var(--ease), opacity 0.25s; }
+
+  .card-art { position: absolute; z-index: -1; overflow: hidden; pointer-events: none; background: var(--embers), var(--furnace); }
+  .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%, #2f3631 0%, #111512 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.4) grayscale(0.75) 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%; }
+  /* The reorder grip steps out from under the corner gusset. */
+  .session-card .drag-handle { margin-right: 14px; }
+
+  /* Working: a big pressure gauge rattles behind the builder while steam rises. */
+  .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/gauge.svg") center / 100% no-repeat; opacity: 0.3;
+    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% + 140px);
+    background-image:
+      radial-gradient(closest-side, rgba(255, 255, 255, 0.34), transparent),
+      radial-gradient(closest-side, color-mix(in srgb, var(--pc) 40%, rgba(255, 255, 255, 0.3)), transparent),
+      radial-gradient(closest-side, rgba(255, 240, 220, 0.26), transparent);
+    background-size: 64px 70px, 88px 70px, 46px 140px;
+    background-position: 0 10px, 34px 40px, 18px 70px;
+    filter: blur(2px);
+    mask-image: linear-gradient(to top, #000 25%, transparent 80%);
+  }
+  .session-card:has(.status-pill.active) .card-aura { opacity: 1; }
+  .session-card:has(.status-pill.active) .card-aura::before { animation: goblinville-rattle 2.4s ease-in-out infinite; }
+  .session-card:has(.status-pill.active) .card-aura::after { animation: goblinville-steam 3.4s 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: 1px;
+    background: url("ui/level.svg") center / contain no-repeat;
+    font-family: var(--font-display); font-weight: 400; font-size: 1.12rem; color: #ffe3b0; font-variant-numeric: tabular-nums;
+    text-shadow: 0 0 6px rgba(240, 138, 74, 0.8), 0 1px 2px #000;
+    filter: drop-shadow(0 2px 3px rgba(10, 14, 10, 0.45));
+  }
+  .level-badge:empty { display: none; }
+  .level-badge.level-up { animation: goblinville-tighten 1.1s var(--ease); }
+
+  .agent {
+    --fc: var(--c);
+    border-width: 1.5px; border-color: #b8703a; border-radius: 9px; place-items: end end; padding: 0 3px 1px 0;
+    background: #101511 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(74, 34, 12, 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); border-radius: 11px; }
+  .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: goblinville-hatch 0.8s var(--ease) both; }
+
+  .meter-label { padding-left: 19px; background: url("ui/nut.svg") left center / 14px 14px no-repeat; }
+  .meter + .meter .meter-label { background-image: url("ui/tube.svg"); }
+  .meter-bar, .stat-bar { height: 7px; border-radius: 2px; box-shadow: inset 0 1px 1px rgba(30, 40, 25, 0.2); }
+  .meter-fill { border-radius: 2px; background: linear-gradient(90deg, #1d6656, #4fae8c); }
+  .meter + .meter .meter-fill { background: linear-gradient(90deg, #2f55b8, #64a0f0); }
+  .meter.low .meter-fill { background: linear-gradient(90deg, #985200, #e9a53e); }
+  .meter.empty .meter-fill { background: linear-gradient(90deg, #9c2a20, #d9584a); }
+  .stat-fill { border-radius: 2px; background: linear-gradient(90deg, color-mix(in srgb, var(--tier) 60%, #23291f), var(--tier)); }
+  .model-stats-head { color: var(--accent); }
+  .stat-tier { border-radius: 4px; font-family: var(--font-display); font-weight: 400; }
+  .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: #8d8f7c; --tier-ink: #52554a; }
+
+  #empty { padding: 4px 16px 8px; text-align: center; }
+  #empty::before {
+    content: ""; display: block; width: 236px; 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: goblinville-idle 5.5s ease-in-out infinite;
+  }
+
+  .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: #154a3e; color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
+    background: linear-gradient(#2f8a73, #1c5c4d);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 0 0 1px rgba(227, 166, 119, 0.35), 0 3px 10px rgba(20, 70, 56, 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(227, 166, 119, 0.6), 0 5px 16px rgba(20, 70, 56, 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, .notes-text { 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(18, 26, 20, 0.42); backdrop-filter: blur(2px); }
+  .models { border-radius: 10px; }
+  .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: 400; letter-spacing: 0.05em; color: var(--gold-ink); }
+  .news-latest { border-radius: 8px; }
+  .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: 8px 8px 0 0; }
+  .news-row:last-child { border-radius: 0 0 8px 8px; }
+  .news-filter[aria-pressed="true"] { border-color: #154a3e; background: linear-gradient(#2f8a73, #1c5c4d); }
+  .auth { position: relative; border-radius: 10px; padding: 32px; box-shadow: var(--dialog-shadow); }
+  .terminal-panel { border-radius: 8px; border-color: color-mix(in srgb, var(--gold) 45%, var(--border)); box-shadow: 0 30px 70px rgba(15, 22, 16, 0.45); }
+  .panel-bar { background: var(--panel-strong); }
+  .tip { background: #121814; color: #e6e8dc; border: 1px solid #8a4a22; box-shadow: inset 0 0 0 1px rgba(227, 166, 119, 0.12), 0 12px 30px rgba(5, 10, 6, 0.45); }
+  .tip strong { color: #f2b47e; font-family: var(--font-display); font-weight: 400; letter-spacing: 0.03em; }
+
+  .providers.deal > .provider { animation: goblinville-hoist 0.75s 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: goblinville-bolt 0.6s var(--ease) both; }
+
+  /* Light: the builders look out of round-topped workshop windows rimmed in copper. */
+  .card-art { border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(255, 200, 160, 0.16), 0 0 0 1.5px #b8703a, 0 0 0 3px rgba(74, 34, 12, 0.26), 0 2px 8px rgba(25, 32, 22, 0.25); }
+  .provider { padding-top: 240px; }
+  .provider .card-art { inset: 14px 14px auto; height: 212px; border-radius: 50% 50% 6px 6px / 56px 56px 6px 6px; }
+  .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: 50% 50% 6px 6px / 40px 40px 6px 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: 1.02rem; }
+
+  @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="goblinville"][data-theme="dark"]) {
+  --bg: #070a09;
+  --surface: #0f1512;
+  --surface-2: #161e1a;
+  --border: #26322b;
+  --text: #e3e6da;
+  --muted: #9aa292;
+  --heading: #f3d9b8;
+  --accent: #7fd2b4;
+  --accent-fill: #23735f;
+  --danger: #f07b6a;
+  --ok: #82d67a;
+  --warn: #ebb75a;
+  --gold: #e0955a;
+  --gold-ink: #f2b47e;
+  --focus: #f2b47e;
+  --shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+
+  --panel: rgba(13, 19, 16, 0.8);
+  --panel-strong: rgba(14, 20, 17, 0.93);
+  --page-art: image-set(url("page.avif") type("image/avif"), url("page.webp") type("image/webp"));
+  --page-veil: linear-gradient(rgba(7, 10, 9, 0.12), rgba(7, 10, 9, 0.12) 45%, rgba(7, 10, 9, 0.4));
+  --empty-shadow: rgba(240, 140, 70, 0.22);
+  --card-shadow: inset 0 1px 0 rgba(255, 210, 170, 0.06), 0 10px 30px rgba(0, 0, 0, 0.5);
+  --card-hover-shadow: inset 0 1px 0 rgba(255, 210, 170, 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(227, 166, 119, 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: #9aa292; --tier-ink: #dde2d4; }
+
+  /* Dark: the builders stand in the furnace light, faded into the plate. */
+  .card-art { border-radius: 0; box-shadow: none; }
+  .provider { padding-top: 198px; }
+  .provider .card-art { inset: 0 0 auto 0; height: 252px; border-radius: 0; mask-image: linear-gradient(to bottom, #000 58%, transparent 100%); }
+  .provider .card-art::before { background-size: cover; background-position: center 6%; }
+  .provider .vendor { color: #fff1de; }
+  .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 #b8703a, 0 0 10px rgba(240, 138, 74, 0.25); }
+
+  .meter-bar, .stat-bar { background: #050806; box-shadow: inset 0 0 0 1px rgba(227, 166, 119, 0.16); }
+  .meter-fill { background: linear-gradient(90deg, #1f7a64, #6fdcb2); box-shadow: 0 0 8px rgba(111, 220, 178, 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%, #0f1512), #050806); border-color: color-mix(in srgb, var(--tier) 60%, #000); }
+
+  .status-pill { background: rgba(5, 8, 6, 0.6); }
+  .status-pill.active { background: color-mix(in srgb, var(--ok) 10%, rgba(5, 8, 6, 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(5, 8, 6, 0.6)); }
+  .provider .tier { color: color-mix(in srgb, var(--pc) 65%, #fff); background: rgba(5, 8, 6, 0.6); }
+  .badge { background: rgba(5, 8, 6, 0.5); }
+
+  .btn { background: linear-gradient(rgba(30, 40, 34, 0.92), rgba(16, 22, 18, 0.92)); border-color: #3a4a3f; box-shadow: inset 0 1px 0 rgba(255, 210, 170, 0.08); }
+  .btn:hover { border-color: #b8703a; box-shadow: inset 0 1px 0 rgba(255, 210, 170, 0.1), 0 0 12px rgba(224, 149, 90, 0.3); }
+  .btn.primary { border-color: #3f9a80; background: linear-gradient(#2f8a73, #1b5a4b); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(227, 166, 119, 0.3), 0 0 16px rgba(60, 170, 140, 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, .notes-text { border-color: #3a4a3f; background: rgba(5, 8, 6, 0.7); }
+
+  .models::backdrop, .news-panel::backdrop { background: rgba(2, 5, 3, 0.66); }
+  .terminal-panel { border-color: #5a3a22; box-shadow: 0 0 0 1px rgba(227, 166, 119, 0.06), 0 30px 80px rgba(0, 0, 0, 0.7); }
+  .news-link { color: #f6efe2; }
+  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 goblinville-hoist {
+  from { opacity: 0; transform: translateY(-34px) rotate(1.6deg); }
+  55% { opacity: 1; transform: translateY(5px) rotate(-0.6deg); }
+  78% { transform: translateY(-2px) rotate(0.2deg); }
+}
+@keyframes goblinville-bolt {
+  from { opacity: 0; transform: translateX(-18px) scaleX(0.94); transform-origin: 0 50%; }
+  60% { opacity: 1; transform: translateX(3px) scaleX(1.01); }
+  80% { transform: translateX(-1px); }
+}
+@keyframes goblinville-tighten {
+  20% { transform: rotate(120deg) scale(1.22); filter: brightness(1.4) drop-shadow(0 0 10px #f2b47e); }
+  45% { transform: rotate(240deg) scale(1.22); }
+  70% { transform: rotate(1turn) scale(1.18); filter: brightness(1.5) drop-shadow(0 0 12px #f2b47e); }
+  86% { transform: rotate(1turn) scale(0.94); }
+  to { transform: rotate(1turn); }
+}
+@keyframes goblinville-hatch {
+  from { opacity: 0; transform: scale(0.2) rotate(-25deg); filter: blur(4px) brightness(2); }
+  55% { opacity: 1; transform: scale(1.18) rotate(8deg); filter: blur(0) brightness(1.2); }
+  80% { transform: scale(0.95) rotate(-3deg); }
+}
+@keyframes goblinville-rattle {
+  0%, 100% { transform: rotate(0deg); }
+  20% { transform: rotate(-4deg); }
+  24% { transform: rotate(-2.5deg); }
+  28% { transform: rotate(-4.5deg); }
+  60% { transform: rotate(3deg); }
+  64% { transform: rotate(1.5deg); }
+  68% { transform: rotate(3.5deg); }
+}
+@keyframes goblinville-steam { to { transform: translateY(-140px); } }
+@keyframes goblinville-idle {
+  0%, 100% { transform: translateY(0) rotate(0deg); }
+  30% { transform: translateY(-3px) rotate(-0.8deg); }
+  65% { transform: translateY(-1px) rotate(0.8deg); }
+}

package/web/skins/goblinville/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="c" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#f3b483"/><stop offset="0.5" stop-color="#b8693a"/><stop offset="1" stop-color="#6a3317"/></linearGradient></defs><path d="M26 5.5h44M26 90.5h44M5.5 26v44M90.5 26v44" stroke="#6a3317" stroke-opacity="0.7" stroke-width="2.6" stroke-linecap="round"/><path d="M26 5.5h44M26 90.5h44M5.5 26v44M90.5 26v44" stroke="#d98b55" stroke-opacity="0.9" stroke-width="1.2" stroke-linecap="round"/><path d="M3 7a4 4 0 0 1 4-4h21L3 28z" fill="url(#c)" stroke="#4a220c" stroke-width="0.8" stroke-linejoin="round"/><path d="M6 6.5h15M6.5 6v15" stroke="#ffd9b8" stroke-opacity="0.4" stroke-width="0.7"/><g fill="#ffe7c8" stroke="#5a2a10" stroke-width="0.6"><circle cx="7.5" cy="7.5" r="1.7"/><circle cx="17.5" cy="7" r="1.25"/><circle cx="7" cy="17.5" r="1.25"/></g><g transform="matrix(-1 0 0 1 96 0)"><path d="M3 7a4 4 0 0 1 4-4h21L3 28z" fill="url(#c)" stroke="#4a220c" stroke-width="0.8" stroke-linejoin="round"/><path d="M6 6.5h15M6.5 6v15" stroke="#ffd9b8" stroke-opacity="0.4" stroke-width="0.7"/><g fill="#ffe7c8" stroke="#5a2a10" stroke-width="0.6"><circle cx="7.5" cy="7.5" r="1.7"/><circle cx="17.5" cy="7" r="1.25"/><circle cx="7" cy="17.5" r="1.25"/></g></g><g transform="matrix(1 0 0 -1 0 96)"><path d="M3 7a4 4 0 0 1 4-4h21L3 28z" fill="url(#c)" stroke="#4a220c" stroke-width="0.8" stroke-linejoin="round"/><path d="M6 6.5h15M6.5 6v15" stroke="#ffd9b8" stroke-opacity="0.4" stroke-width="0.7"/><g fill="#ffe7c8" stroke="#5a2a10" stroke-width="0.6"><circle cx="7.5" cy="7.5" r="1.7"/><circle cx="17.5" cy="7" r="1.25"/><circle cx="7" cy="17.5" r="1.25"/></g></g><g transform="matrix(-1 0 0 -1 96 96)"><path d="M3 7a4 4 0 0 1 4-4h21L3 28z" fill="url(#c)" stroke="#4a220c" stroke-width="0.8" stroke-linejoin="round"/><path d="M6 6.5h15M6.5 6v15" stroke="#ffd9b8" stroke-opacity="0.4" stroke-width="0.7"/><g fill="#ffe7c8" stroke="#5a2a10" stroke-width="0.6"><circle cx="7.5" cy="7.5" r="1.7"/><circle cx="17.5" cy="7" r="1.25"/><circle cx="7" cy="17.5" r="1.25"/></g></g></svg>

package/web/skins/goblinville/ui/gauge.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="#f8dc9a"/><stop offset="0.45" stop-color="#c38f3e"/><stop offset="1" stop-color="#6e4718"/></linearGradient></defs><circle cx="100" cy="100" r="92" fill="none" stroke="url(#b)" stroke-width="9"/><circle cx="100" cy="100" r="82" fill="none" stroke="url(#b)" stroke-width="1.6"/><path d="M53.33 146.67L46.26 153.74M48.17 140.86L40.32 147.05M43.73 134.48L35.20 139.71M40.06 127.63L30.98 131.82M37.23 120.40L27.72 123.49M35.27 112.88L25.46 114.83M34.20 105.18L24.23 105.96M34.05 97.41L24.06 97.02M34.81 89.68L24.94 88.11M36.48 82.08L26.85 79.37M39.02 74.74L29.79 70.92M42.42 67.75L33.69 62.86M46.60 61.21L38.51 55.33M51.53 55.20L44.19 48.41M57.14 49.81L50.64 42.21M63.33 45.12L57.78 36.81M70.04 41.19L65.50 32.28M77.16 38.08L73.70 28.70M84.59 35.82L82.26 26.10M92.24 34.46L91.07 24.53M100.00 34.00L100.00 24.00M107.76 34.46L108.93 24.53M115.41 35.82L117.74 26.10M122.84 38.08L126.30 28.70M129.96 41.19L134.50 32.28M136.67 45.12L142.22 36.81M142.86 49.81L149.36 42.21M148.47 55.20L155.81 48.41M153.40 61.21L161.49 55.33M157.58 67.75L166.31 62.86M160.98 74.74L170.21 70.92M163.52 82.08L173.15 79.37M165.19 89.68L175.06 88.11M165.95 97.41L175.94 97.02M165.80 105.18L175.77 105.96M164.73 112.88L174.54 114.83M162.77 120.40L172.28 123.49M159.94 127.63L169.02 131.82M156.27 134.48L164.80 139.71M151.83 140.86L159.68 147.05M146.67 146.67L153.74 153.74" stroke="url(#b)" stroke-width="1.6"/><path d="M60.40 139.60L46.26 153.74M45.08 110.93L25.46 114.83M48.26 78.57L29.79 70.92M68.89 53.44L57.78 36.81M100.00 44.00L100.00 24.00M131.11 53.44L142.22 36.81M151.74 78.57L170.21 70.92M154.92 110.93L174.54 114.83M139.60 139.60L153.74 153.74" stroke="url(#b)" stroke-width="4" stroke-linecap="round"/><path d="M100 100L136 64" stroke="url(#b)" stroke-width="5" stroke-linecap="round"/><circle cx="100" cy="100" r="10" fill="url(#b)"/><g fill="url(#b)"><circle cx="100.00" cy="8.00" r="4"/><circle cx="165.05" cy="34.95" r="4"/><circle cx="192.00" cy="100.00" r="4"/><circle cx="165.05" cy="165.05" r="4"/><circle cx="100.00" cy="192.00" r="4"/><circle cx="34.95" cy="165.05" r="4"/><circle cx="8.00" cy="100.00" r="4"/><circle cx="34.95" cy="34.95" r="4"/></g></svg>

package/web/skins/goblinville/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="#f8dc9a"/><stop offset="0.45" stop-color="#c38f3e"/><stop offset="1" stop-color="#6e4718"/></linearGradient><radialGradient id="w" cx="42%" cy="36%" r="70%"><stop offset="0" stop-color="#3c4440"/><stop offset="0.75" stop-color="#1c2220"/><stop offset="1" stop-color="#101412"/></radialGradient></defs><path d="M58.85 47.50L32.00 63.00L5.15 47.50L5.15 16.50L32.00 1.00L58.85 16.50Z" fill="url(#b)" stroke="#4f3210" stroke-width="1" stroke-linejoin="round"/><path d="M56.25 46.00L32.00 60.00L7.75 46.00L7.75 18.00L32.00 4.00L56.25 18.00Z" fill="none" stroke="#fff1c8" stroke-opacity="0.45" stroke-width="0.8" stroke-linejoin="round"/><circle cx="32" cy="32" r="19.5" fill="url(#w)" stroke="#f3d08a" stroke-width="1.6"/><circle cx="32" cy="32" r="16.5" fill="none" stroke="#7fc4a8" stroke-opacity="0.35" stroke-width="0.8" stroke-dasharray="2.2 2.2"/><g fill="#fff0c4" stroke="#6b4419" stroke-width="0.5"><circle cx="32.00" cy="6.00" r="1.4"/><circle cx="54.52" cy="19.00" r="1.4"/><circle cx="54.52" cy="45.00" r="1.4"/><circle cx="32.00" cy="58.00" r="1.4"/><circle cx="9.48" cy="45.00" r="1.4"/><circle cx="9.48" cy="19.00" r="1.4"/></g></svg>

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

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><defs><linearGradient id="c" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#f3b483"/><stop offset="0.5" stop-color="#b8693a"/><stop offset="1" stop-color="#6a3317"/></linearGradient><radialGradient id="v" cx="70%" cy="80%" r="60%"><stop offset="0" stop-color="#5fae8f" stop-opacity="0.75"/><stop offset="1" stop-color="#5fae8f" stop-opacity="0"/></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><rect x="2" y="2" width="36" height="36" rx="7" fill="url(#c)" stroke="#4a220c" stroke-width="1"/><rect x="2" y="2" width="36" height="36" rx="7" fill="url(#v)"/><rect x="4.6" y="4.6" width="30.8" height="30.8" rx="5" fill="none" stroke="#ffd9b8" stroke-opacity="0.35" stroke-width="0.7"/><g fill="#ffe1c4" stroke="#5a2a10" stroke-width="0.5"><circle cx="7.5" cy="7.5" r="1.3"/><circle cx="32.5" cy="7.5" r="1.3"/><circle cx="7.5" cy="32.5" r="1.3"/><circle cx="32.5" cy="32.5" r="1.3"/></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/goblinville/ui/nut.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="#f8dc9a"/><stop offset="0.45" stop-color="#c38f3e"/><stop offset="1" stop-color="#6e4718"/></linearGradient></defs><path d="M14.50 11.75L8.00 15.50L1.50 11.75L1.50 4.25L8.00 0.50L14.50 4.25Z" fill="url(#b)" stroke="#4f3210" stroke-width="0.5" stroke-linejoin="round"/><circle cx="8" cy="8" r="2.9" fill="#1c2220" stroke="#f3d08a" stroke-width="0.7"/></svg>

package/web/skins/goblinville/ui/tube.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><radialGradient id="g" cx="50%" cy="45%" r="60%"><stop offset="0" stop-color="#eaf5ff"/><stop offset="0.45" stop-color="#7ab4ff"/><stop offset="1" stop-color="#2f4fc8" stop-opacity="0.85"/></radialGradient><linearGradient id="b" x1="0" y1="0" x2="1" y2="0"><stop offset="0" stop-color="#7a5320"/><stop offset="0.5" stop-color="#f3d08a"/><stop offset="1" stop-color="#7a5320"/></linearGradient></defs><path d="M4.2 11V5.4a3.8 3.8 0 0 1 7.6 0V11z" fill="url(#g)" stroke="#dbe9ff" stroke-width="0.6"/><path d="M8 4.2v4.6M6.4 8.8h3.2" stroke="#fff" stroke-opacity="0.85" stroke-width="0.7" stroke-linecap="round"/><rect x="3.4" y="10.6" width="9.2" height="3.6" rx="0.8" fill="url(#b)" stroke="#4f3210" stroke-width="0.4"/></svg>

package/web/styles.css

@@ -418,6 +418,27 @@ body:has(#app[hidden]):has(#auth[hidden]):has(#stopped[hidden])::after {
 }
 .terminal-host { flex: 1; min-height: 0; padding: 8px 4px 4px 10px; }
 .terminal-host > div { height: 100%; }
+.terminal-copy {
+  width: min(880px, calc(100vw - 24px)); height: min(720px, calc(100dvh - 24px));
+  max-width: none; max-height: none; padding: 0; overflow: hidden;
+  color: var(--text); background: var(--surface); border: 1px solid var(--border);
+  border-radius: var(--radius); box-shadow: var(--shadow);
+}
+.terminal-copy[open] { display: flex; flex-direction: column; }
+.terminal-copy::backdrop { background: rgba(15, 17, 21, 0.5); }
+.terminal-copy-bar, .terminal-copy-footer { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
+.terminal-copy-heading { flex: 1; min-width: 0; }
+.terminal-copy-heading .sub { margin: 4px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 0.8rem; }
+.terminal-copy textarea {
+  flex: 1; min-height: 0; width: 100%; resize: none; margin: 0; padding: 14px 16px;
+  border: 0; border-block: 1px solid var(--border); border-radius: 0;
+  background: var(--term-bg); color: #e6e9ef; font: 14px/1.5 var(--font-mono);
+  white-space: pre; user-select: text; -webkit-user-select: text; touch-action: auto; overscroll-behavior: contain;
+}
+.terminal-copy textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
+.terminal-copy-footer p { flex: 1; margin: 0; color: var(--muted); font-size: 0.8rem; }
+.terminal-copy .btn { min-height: 44px; flex-shrink: 0; }
+.terminal-copy .btn:disabled { cursor: default; }
 @media (pointer: coarse) {
   /* A drag on the panel would otherwise scroll the page behind it. */
   body:has(#terminal-panel:not([hidden])) { overflow: hidden; }

package/web/terminal-copy.js

@@ -0,0 +1,128 @@
+// A frozen copy surface keeps native touch selection separate from terminal gestures.
+const SELECT_HINT = 'Touch and hold to select text.';
+
+export function captureTerminalText(term) {
+  const buffer = term.buffer.active;
+  const lines = [];
+  let viewportLine = 0;
+  let viewportPrefix = '';
+  for (let y = 0; y < buffer.length; y++) {
+    const line = buffer.getLine(y);
+    const text = line.translateToString(true, 0, term.cols);
+    const wrapped = line.isWrapped && lines.length > 0;
+    if (y === buffer.viewportY) {
+      viewportLine = wrapped ? lines.length - 1 : lines.length;
+      // The visible row can begin inside a joined line. Keep its actual text
+      // prefix: terminal cells and JavaScript character counts differ for Unicode.
+      viewportPrefix = wrapped ? lines[lines.length - 1] : '';
+    }
+    if (wrapped) lines[lines.length - 1] += text;
+    else lines.push(text);
+  }
+  return { text: lines.join('\n'), viewportLine, viewportPrefix };
+}
+
+export class TerminalCopy {
+  constructor({ opener, dialog, getCurrent }) {
+    this.dialog = dialog;
+    this.getCurrent = getCurrent;
+    this.text = dialog.querySelector('textarea');
+    this.copyButton = dialog.querySelector('[data-copy]');
+    this.status = dialog.querySelector('[role="status"]');
+    this.current = null;
+    this.attempt = null;
+    const touch = matchMedia('(any-pointer: coarse)');
+    const availability = () => { opener.hidden = !touch.matches && !navigator.maxTouchPoints; };
+    touch.addEventListener('change', availability);
+    availability();
+    opener.addEventListener('click', () => this.open());
+    this.copyButton.addEventListener('click', () => this.copy());
+    dialog.querySelector('[data-done]').addEventListener('click', () => this.close(true));
+    dialog.addEventListener('cancel', (event) => { event.preventDefault(); this.close(true); });
+    // A programmatic/native close can arrive after the sheet has already reopened.
+    dialog.addEventListener('close', () => { if (!dialog.open) this.clear(); });
+    this.text.addEventListener('select', () => this.selectionChanged());
+    document.addEventListener('selectionchange', () => {
+      if (dialog.open) this.selectionChanged();
+    });
+  }
+
+  open() {
+    if (this.dialog.open) return;
+    const current = this.getCurrent();
+    if (!current) return;
+    const snapshot = captureTerminalText(current.term);
+    this.current = current;
+    this.selection = '0:0';
+    this.text.value = snapshot.text;
+    this.dialog.querySelector('[data-session]').textContent = current.name;
+    this.status.textContent = SELECT_HINT;
+    this.copyButton.disabled = true;
+    this.dialog.showModal();
+    this.text.focus({ preventScroll: true });
+    this.text.setSelectionRange(0, 0);
+    const style = getComputedStyle(this.text);
+    this.text.scrollTop = snapshot.viewportLine * parseFloat(style.lineHeight);
+    this.text.scrollLeft = 0;
+    if (snapshot.viewportPrefix) {
+      const measure = document.createElement('canvas').getContext('2d');
+      measure.font = style.font;
+      this.text.scrollLeft = measure.measureText(snapshot.viewportPrefix).width;
+    }
+  }
+
+  selectionChanged() {
+    const selection = `${this.text.selectionStart}:${this.text.selectionEnd}`;
+    if (selection !== this.selection && this.status.textContent === 'Copied') {
+      this.status.textContent = SELECT_HINT;
+    }
+    this.selection = selection;
+    this.copyButton.disabled = Boolean(this.attempt) || this.text.selectionStart === this.text.selectionEnd;
+  }
+
+  async copy() {
+    const current = this.current;
+    if (!current || this.attempt) return;
+    const range = `${this.text.selectionStart}:${this.text.selectionEnd}`;
+    const selected = this.text.value.slice(this.text.selectionStart, this.text.selectionEnd);
+    if (!selected) return;
+    const attempt = this.attempt = {};
+    this.copyButton.disabled = true;
+    this.status.textContent = 'Copying…';
+    try {
+      // Stay in the user's click activation; no permission preflight or clipboard read.
+      // Textareas normalize newlines to LF; match xterm's Windows copy convention.
+      const text = /Win/.test(navigator.platform) ? selected.replace(/\n/g, '\r\n') : selected;
+      await navigator.clipboard.writeText(text);
+      if (this.current === current && this.attempt === attempt) {
+        this.status.textContent = range === `${this.text.selectionStart}:${this.text.selectionEnd}` ? 'Copied' : SELECT_HINT;
+      }
+    } catch {
+      if (this.current === current && this.attempt === attempt) {
+        this.status.textContent = 'Use Copy in the text selection menu.';
+        this.text.focus({ preventScroll: true });
+      }
+    } finally {
+      if (this.attempt === attempt) {
+        this.attempt = null;
+        this.selectionChanged();
+      }
+    }
+  }
+
+  close(restoreFocus = false) {
+    const current = this.current;
+    this.clear();
+    if (this.dialog.open) this.dialog.close();
+    if (restoreFocus && current && this.getCurrent()?.term === current.term) current.term.focus();
+  }
+
+  clear() {
+    this.current = null;
+    this.attempt = null;
+    this.text.value = '';
+    this.status.textContent = '';
+    this.dialog.querySelector('[data-session]').textContent = '';
+    this.copyButton.disabled = true;
+  }
+}

package/web/theme.js

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