@g3nomaly/g3n-mods 0.1.7 → 0.1.8

package/mods/agent-adventure/view/view.css

@@ -0,0 +1,230 @@
+/* packages/g3n-mods/mods/agent-adventure/view/view.css */
+.aa {
+  --dim: var(--vscode-descriptionForeground, #9d9d9d);
+  --line: color-mix(in srgb, var(--vscode-foreground, #ccc) 12%, transparent);
+  --mono: var(--vscode-editor-font-family, ui-monospace, monospace);
+  --ok: #3fa66b;
+  --warn: #e0a030;
+  --low: #e05a4f;
+  --gold: #f2c14e;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+/* The view hides parts with the hidden attribute; a display rule below must not show them again. */
+.aa [hidden] { display: none !important; }
+
+/* Header: what the party is doing, where, and the calm switch. */
+.aa-head { display: flex; align-items: baseline; gap: 10px; }
+.aa-caption { font-weight: 600; font-size: 14px; }
+.aa-meta { flex: 1; min-width: 0; color: var(--dim); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.aa-calm {
+  flex-shrink: 0; padding: 1px 8px; border: 1px solid var(--line); border-radius: 10px;
+  background: transparent; color: var(--dim); font: inherit; font-size: 11px; cursor: pointer;
+}
+.aa-calm:hover { color: var(--vscode-foreground); border-color: var(--dim); }
+.aa-calm.is-on { color: var(--vscode-foreground); background: color-mix(in srgb, var(--vscode-foreground) 10%, transparent); }
+.aa-calm:focus-visible { outline: 1px solid var(--vscode-focusBorder); }
+
+/* The run's path: one icon per stop. */
+.aa-path { display: flex; flex-wrap: wrap; gap: 4px; font-size: 13px; }
+.aa-stop { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; background: var(--line); color: var(--dim); }
+.aa-stop[data-state="done"] { opacity: 0.45; }
+.aa-stop[data-state="here"] { background: color-mix(in srgb, var(--gold) 30%, transparent); color: var(--vscode-foreground); box-shadow: 0 0 0 1px var(--gold); }
+.aa-stop[data-kind="boss"] { color: var(--low); }
+.aa-stop[data-kind="elite"] { color: var(--gold); }
+
+/* The stage: scenery behind, heroes on the left, enemies on the right. */
+.aa-stage {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  gap: 12px;
+  min-height: 190px;
+  padding: 44px 14px 12px;
+  border-radius: 10px;
+  overflow: hidden;
+  isolation: isolate;
+}
+.aa-scenery { position: absolute; inset: 0; z-index: -1; }
+
+.aa-stage[data-region="tavern"] .aa-scenery {
+  background:
+    linear-gradient(to bottom, transparent 72%, #4a2f1c 72%, #3b2415 100%),
+    repeating-linear-gradient(90deg, #6b4428 0 46px, #5e3a22 46px 48px),
+    #6b4428;
+}
+/* The fireplace: a stone arch with a fire in it. */
+.aa-stage[data-region="tavern"] .aa-scenery::before {
+  content: ''; position: absolute; right: 18px; bottom: 28%; width: 74px; height: 66px;
+  border-radius: 36px 36px 0 0;
+  background: radial-gradient(ellipse at 50% 100%, #1b120c 55%, transparent 56%), #8a8f98;
+  box-shadow: inset 0 0 0 6px #6f747c;
+}
+.aa-stage[data-region="tavern"] .aa-scenery::after {
+  content: ''; position: absolute; right: 40px; bottom: 28%; width: 30px; height: 30px;
+  border-radius: 50% 50% 40% 40%;
+  background: radial-gradient(ellipse at 50% 80%, #fff3b0 0 20%, #f2c14e 35%, #e0773a 60%, transparent 70%);
+  animation: aa-flicker 0.9s ease-in-out infinite alternate;
+  transform-origin: 50% 100%;
+}
+@keyframes aa-flicker { from { transform: scale(1, 1); opacity: 0.9; } to { transform: scale(0.9, 1.15); opacity: 1; } }
+
+.aa-stage[data-region="woods"] .aa-scenery {
+  background:
+    radial-gradient(circle at 12% 62%, #2f6b44 0 26px, transparent 27px),
+    radial-gradient(circle at 30% 58%, #3b7d52 0 34px, transparent 35px),
+    radial-gradient(circle at 72% 60%, #2f6b44 0 30px, transparent 31px),
+    radial-gradient(circle at 90% 56%, #3b7d52 0 38px, transparent 39px),
+    linear-gradient(to bottom, #9fd3e0 0%, #cfe9d8 55%, #5c9a5a 70%, #3f7a42 100%);
+}
+.aa-stage[data-region="caves"] .aa-scenery {
+  background:
+    radial-gradient(circle at 18% 30%, #6fd3e0 0 2px, transparent 3px),
+    radial-gradient(circle at 46% 18%, #b07ad8 0 2px, transparent 3px),
+    radial-gradient(circle at 80% 26%, #6fd3e0 0 3px, transparent 4px),
+    radial-gradient(circle at 64% 40%, #b07ad8 0 2px, transparent 3px),
+    linear-gradient(to bottom, #2b2540 0%, #221d35 70%, #18142a 70%, #120f20 100%);
+}
+.aa-stage[data-region="crypt"] .aa-scenery {
+  background:
+    linear-gradient(to bottom, transparent 70%, #22252d 70%),
+    repeating-linear-gradient(0deg, #3f444f 0 22px, #353a44 22px 24px),
+    #3f444f;
+}
+
+.aa-side { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 10px; min-width: 0; }
+.aa-side.is-heroes { flex: 1; justify-content: flex-start; }
+.aa-side.is-enemies { flex: 1; justify-content: flex-end; }
+.aa-stage[data-scene="tavern"] .aa-side.is-heroes { justify-content: flex-start; padding-right: 90px; }
+
+/* One fighter: speech bubble, sprite, name plate. */
+.aa-unit { position: relative; display: flex; flex-direction: column; align-items: center; width: 92px; transition: transform 160ms ease; }
+.aa-unit[data-rank="boss"] { width: 120px; }
+.aa-sprite { display: flex; align-items: flex-end; justify-content: center; min-height: 56px; }
+.aa-sprite svg { display: block; image-rendering: pixelated; animation: aa-bob 1.1s steps(2, jump-none) infinite; }
+.aa-unit:nth-child(2n) .aa-sprite svg { animation-delay: -0.4s; }
+.aa-unit:nth-child(3n) .aa-sprite svg { animation-delay: -0.8s; }
+.aa-stage[data-scene="tavern"] .aa-sprite svg { animation-duration: 2.4s; }
+@keyframes aa-bob { from { transform: translateY(0); } to { transform: translateY(-2px); } }
+
+.aa-unit.is-acting[data-side="hero"] { transform: translateX(12px); }
+.aa-unit.is-acting[data-side="enemy"] { transform: translateX(-12px); }
+.aa-unit.is-hit .aa-sprite { animation: aa-hit 300ms ease; }
+@keyframes aa-hit {
+  0% { filter: brightness(2.2); transform: translateX(0); }
+  30% { transform: translateX(-3px); }
+  60% { transform: translateX(3px); }
+  100% { filter: none; transform: translateX(0); }
+}
+.aa-unit.is-down .aa-sprite svg { animation: none; transform: rotate(90deg) translateX(18%); }
+.aa-unit.is-down .aa-plate { opacity: 0.55; }
+.aa-unit.is-recruit .aa-sprite svg { opacity: 0.75; }
+
+.aa-plate {
+  display: flex; flex-direction: column; gap: 2px; width: 100%; margin-top: 4px; padding: 3px 5px;
+  border-radius: 6px; background: rgba(15, 17, 22, 0.72); color: #e8e8e8;
+}
+.aa-label { display: flex; justify-content: space-between; gap: 4px; font-size: 11px; line-height: 1.2; }
+.aa-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; }
+.aa-level { flex-shrink: 0; color: #b8bec8; font-family: var(--mono); font-size: 10px; }
+.aa-unit[data-rank="elite"] .aa-name { color: var(--gold); }
+.aa-unit[data-rank="boss"] .aa-name { color: #ff8a7a; }
+.aa-hp, .aa-xp { position: relative; height: 4px; border-radius: 2px; background: #2b3240; overflow: hidden; }
+.aa-xp { height: 2px; }
+.aa-hp-fill, .aa-xp-fill { position: absolute; inset: 0 auto 0 0; border-radius: 2px; transition: width 300ms ease; }
+.aa-hp-fill[data-tone="ok"] { background: var(--ok); }
+.aa-hp-fill[data-tone="warn"] { background: var(--warn); }
+.aa-hp-fill[data-tone="low"] { background: var(--low); }
+.aa-xp-fill { background: #8e7ad8; }
+.aa-tags { min-height: 0; color: #9fb8d8; font-size: 9px; line-height: 1.1; }
+.aa-tags:empty { display: none; }
+.aa-stage[data-scene="tavern"] .aa-hp { display: none; }
+
+/* Numbers and words that float up from a fighter. */
+.aa-float {
+  position: absolute; left: 50%; top: 18px; z-index: 2; pointer-events: none;
+  font-family: var(--mono); font-size: 12px; font-weight: 700; white-space: nowrap;
+  text-shadow: 0 1px 0 #000, 0 0 3px #000;
+  animation: aa-float 1.3s ease-out forwards;
+}
+@keyframes aa-float { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, -30px); } }
+.aa-float.is-hit { color: #ffffff; }
+.aa-float.is-crit { color: #ffb347; font-size: 14px; }
+.aa-float.is-miss { color: #9aa3b0; font-style: italic; }
+.aa-float.is-heal { color: #7cf09a; }
+.aa-float.is-buff { color: #9fd3ff; font-size: 10px; }
+.aa-float.is-skill { top: -2px; color: var(--gold); font-size: 10px; }
+.aa-float.is-level { top: -6px; color: var(--gold); font-size: 13px; }
+
+/* A line of speech over a fighter or a hero in the tavern. */
+.aa-bubble {
+  position: absolute; bottom: calc(100% - 14px); left: 50%; z-index: 3; max-width: 170px; width: max-content;
+  padding: 4px 8px; border-radius: 8px; background: #fbf7ee; color: #2a2620;
+  font-size: 11px; line-height: 1.3; text-align: center;
+  opacity: 0; transform: translate(-50%, 4px); transition: opacity 200ms ease, transform 200ms ease; pointer-events: none;
+}
+.aa-bubble::after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -4px; border: 4px solid transparent; border-top-color: #fbf7ee; }
+.aa-bubble.is-open { opacity: 1; transform: translate(-50%, 0); }
+
+.aa-banner {
+  position: absolute; left: 50%; top: 40%; z-index: 4; pointer-events: none;
+  font-size: 22px; font-weight: 800; letter-spacing: 0.04em; color: var(--gold);
+  text-shadow: 0 2px 0 #000, 0 0 8px rgba(0, 0, 0, 0.7);
+  opacity: 0; transform: translate(-50%, -50%) scale(0.9);
+}
+.aa-banner[data-tone="wipe"] { color: #ff8a7a; }
+.aa-banner.is-shown { animation: aa-banner 2.6s ease forwards; }
+@keyframes aa-banner {
+  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
+  15%, 75% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
+  100% { opacity: 0; transform: translate(-50%, -60%) scale(1); }
+}
+.aa-stage.is-quake { animation: aa-quake 600ms ease; }
+@keyframes aa-quake { 20%, 60% { transform: translateX(-3px); } 40%, 80% { transform: translateX(3px); } }
+
+.aa-notices { position: absolute; top: 8px; right: 8px; z-index: 5; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; pointer-events: none; }
+.aa-notice { padding: 3px 8px; border-radius: 6px; background: rgba(15, 17, 22, 0.82); color: #e8e8e8; font-size: 11px; animation: aa-notice 3.5s ease forwards; }
+.aa-notice.is-level { box-shadow: inset 2px 0 0 var(--gold); }
+.aa-notice.is-learn { box-shadow: inset 2px 0 0 #8e7ad8; }
+@keyframes aa-notice { 0% { opacity: 0; transform: translateY(-4px); } 10%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }
+
+/* The run's loot and the log. */
+.aa-loot { color: var(--dim); font-size: 12px; }
+.aa-log { display: flex; flex-direction: column; gap: 1px; margin: 0; padding: 0; list-style: none; font-size: 12px; }
+.aa-line { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--dim); }
+.aa-line:last-child { color: var(--vscode-foreground); }
+.aa-line[data-tone="good"] { color: #7cc47f; }
+.aa-line[data-tone="bad"] { color: #e06c6c; }
+.aa-line[data-tone="loot"] { color: #e5b567; }
+.aa-line[data-tone="level"] { color: #b48ead; }
+
+/* The guild: every hero, its level, skills and record. */
+.aa-roster-label { cursor: pointer; color: var(--dim); font-size: 12px; padding: 2px; list-style: none; }
+.aa-roster-label::before { content: '▸'; display: inline-block; width: 1.2em; transition: transform 120ms ease; }
+.aa-roster[open] > .aa-roster-label::before { transform: rotate(90deg); }
+.aa-roster-label::-webkit-details-marker { display: none; }
+.aa-roster-list { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; }
+.aa-hero { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 10px; padding: 4px 6px; border-radius: 8px; }
+.aa-hero.is-active { background: color-mix(in srgb, var(--vscode-foreground) 6%, transparent); }
+.aa-hero-sprite svg { display: block; image-rendering: pixelated; }
+.aa-hero-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+.aa-hero-top { display: flex; gap: 8px; align-items: baseline; font-size: 12px; }
+.aa-hero-name { font-weight: 600; }
+.aa-hero-level { color: var(--dim); font-size: 11px; }
+.aa-hero-skills, .aa-hero-record { color: var(--dim); font-size: 11px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.aa-hero .aa-xp { max-width: 180px; }
+
+/* Calm: nothing bobs, lunges or shakes; numbers still fade. */
+.aa.is-calm .aa-sprite svg,
+.aa.is-calm .aa-unit.is-hit .aa-sprite,
+.aa.is-calm .aa-stage.is-quake,
+.aa.is-calm .aa-stage .aa-scenery::after { animation: none; }
+.aa.is-calm .aa-unit.is-acting { transform: none; }
+@media (prefers-reduced-motion: reduce) {
+  .aa-sprite svg, .aa-unit.is-hit .aa-sprite, .aa-stage.is-quake, .aa-stage .aa-scenery::after { animation: none; }
+  .aa-unit.is-acting { transform: none; }
+  .aa-float { animation-name: aa-fade; }
+  @keyframes aa-fade { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, 0); } }
+}

package/mods/agent-adventure/view/view.ts

@@ -0,0 +1,308 @@
+// packages/g3n-mods/mods/agent-adventure/view/view.ts
+import { RANK_SCALE, eliteTint, spriteSvg } from '../hooks/sprite'
+import type { Fx, RosterEntry, StopKind, UnitView, ViewData } from '../types'
+
+/** What the viewer hands a view: a way to send the mod an action and to open a link. */
+type ViewApi = { act: (name: string, arg?: unknown) => void; openLink: (href: string) => void }
+
+/** Size of a sprite pixel on the stage, in CSS pixels, before a rank's scale. */
+const STAGE_PIXEL = 4
+/** Most milliseconds between the visual events of one update, so a tick's hits play one after another within it. */
+const FX_STAGGER = 220
+/** How long a speech bubble stays up. */
+const BUBBLE_MS = 3800
+/** How long a notice stays in the corner. */
+const NOTICE_MS = 3500
+
+const STOP_ICONS: Readonly<Record<StopKind, string>> = { fight: '⚔', elite: '★', fork: '⑂', camp: '⛺', boss: '☠' }
+const STOP_NAMES: Readonly<Record<StopKind, string>> = { fight: 'Fight', elite: 'Elite fight', fork: 'Fork in the path', camp: 'Camp', boss: 'Boss' }
+
+/** Makes an element with a class, and text when given. */
+function el<K extends keyof HTMLElementTagNameMap>(tag: K, className: string, text?: string): HTMLElementTagNameMap[K] {
+  const node = document.createElement(tag)
+  node.className = className
+  if (text !== undefined) node.textContent = text
+  return node
+}
+
+/** Sets an element's text only when it changed. */
+function setText(node: Element, text: string): void {
+  if (node.textContent !== text) node.textContent = text
+}
+
+/** Moves `children` into `parent` in this order, touching only those out of place, and drops the rest. */
+function arrange(parent: HTMLElement, children: HTMLElement[]): void {
+  children.forEach((child, index) => {
+    if (parent.children[index] !== child) parent.insertBefore(child, parent.children[index] ?? null)
+  })
+  while (parent.children.length > children.length) parent.lastElementChild?.remove()
+}
+
+/** Puts a sprite in its slot, only when its look changed, so a redraw does not restart its animations. */
+function setSprite(slot: HTMLElement, look: string, pixel: number, isDown: boolean, tint: string | undefined): void {
+  const key = `${look}:${pixel}:${isDown}:${tint ?? ''}`
+  if (slot.dataset.look === key) return
+  slot.dataset.look = key
+  slot.innerHTML = spriteSvg(look, { pixel, isDown, ...(tint === undefined ? {} : { tint }) })
+}
+
+/** Adds a class for `ms`, restarting its animation when it is already on. */
+function flash(node: HTMLElement, className: string, ms: number): void {
+  node.classList.remove(className)
+  void node.offsetWidth
+  node.classList.add(className)
+  window.setTimeout(() => node.classList.remove(className), ms)
+}
+
+/** HP bar tone by how full it is. */
+function hpTone(share: number): string {
+  return share > 0.5 ? 'ok' : share > 0.25 ? 'warn' : 'low'
+}
+
+/** One hero or enemy on the stage. */
+type UnitNode = { root: HTMLElement; sprite: HTMLElement; name: HTMLElement; level: HTMLElement; fill: HTMLElement; xp: HTMLElement; tags: HTMLElement; bubble: HTMLElement; bubbleTimer?: number }
+
+/**
+ * @brief Mounts the adventure: a header with the scene and the run's path, a stage that is the tavern when nobody
+ * works and the dungeon while agents do, the run's loot, the log, and the guild's roster. Every hit, heal, level-up
+ * and line of speech plays once, by its id, so redraws never replay them.
+ *
+ * @param root - The shadow root the viewer gives this view.
+ * @param api - Sends `calm` to the mod.
+ * @returns The instance the viewer hands each update to.
+ */
+export function mount(root: ShadowRoot, api: ViewApi): { update: (data: unknown) => void } {
+  const frame = el('div', 'aa')
+  const head = el('header', 'aa-head')
+  const caption = el('span', 'aa-caption')
+  const meta = el('span', 'aa-meta')
+  const calm = el('button', 'aa-calm', 'calm')
+  calm.type = 'button'
+  calm.title = 'Calmer animations: no bobbing, lunging or shaking'
+  calm.addEventListener('click', () => api.act('calm'))
+  head.append(caption, meta, calm)
+
+  const path = el('div', 'aa-path')
+  const stage = el('div', 'aa-stage')
+  const scenery = el('div', 'aa-scenery')
+  const heroesSide = el('div', 'aa-side is-heroes')
+  const enemiesSide = el('div', 'aa-side is-enemies')
+  const banner = el('div', 'aa-banner')
+  const notices = el('div', 'aa-notices')
+  stage.append(scenery, heroesSide, enemiesSide, banner, notices)
+
+  const loot = el('div', 'aa-loot')
+  const log = el('ol', 'aa-log')
+  const roster = el('details', 'aa-roster')
+  const rosterLabel = el('summary', 'aa-roster-label')
+  const rosterList = el('div', 'aa-roster-list')
+  roster.append(rosterLabel, rosterList)
+  frame.append(head, path, stage, loot, log, roster)
+  root.append(frame)
+
+  const units = new Map<string, UnitNode>()
+  const rosterRows = new Map<string, HTMLElement>()
+  const seen = new Set<number>()
+  let isFirst = true
+  let lastBanner = ''
+
+  /** Builds a unit's nodes once. */
+  const makeUnit = (id: string): UnitNode => {
+    const node: UnitNode = {
+      root: el('div', 'aa-unit'),
+      sprite: el('div', 'aa-sprite'),
+      name: el('span', 'aa-name'),
+      level: el('span', 'aa-level'),
+      fill: el('span', 'aa-hp-fill'),
+      xp: el('span', 'aa-xp-fill'),
+      tags: el('span', 'aa-tags'),
+      bubble: el('div', 'aa-bubble'),
+    }
+    node.root.dataset.id = id
+    const plate = el('div', 'aa-plate')
+    const label = el('div', 'aa-label')
+    label.append(node.name, node.level)
+    const hp = el('span', 'aa-hp')
+    hp.append(node.fill)
+    const xp = el('span', 'aa-xp')
+    xp.append(node.xp)
+    plate.append(label, hp, xp, node.tags)
+    node.root.append(node.bubble, node.sprite, plate)
+    return node
+  }
+
+  /** Brings a unit up to date. */
+  const fillUnit = (unit: UnitView): HTMLElement => {
+    let node = units.get(unit.id)
+    if (node === undefined) {
+      node = makeUnit(unit.id)
+      units.set(unit.id, node)
+    }
+    const share = unit.maxHp > 0 ? unit.hp / unit.maxHp : 0
+    node.root.dataset.side = unit.side
+    node.root.dataset.rank = unit.rank
+    node.root.classList.toggle('is-down', unit.isDown)
+    node.root.classList.toggle('is-recruit', unit.look === 'recruit')
+    node.root.title = [unit.title, unit.motto === undefined ? '' : `“${unit.motto}”`, unit.skills?.length ? `Skills: ${unit.skills.join(', ')}` : ''].filter(Boolean).join('\n')
+    setSprite(node.sprite, unit.look, Math.round(STAGE_PIXEL * RANK_SCALE[unit.rank]), unit.isDown, eliteTint(unit.rank))
+    setText(node.name, unit.name)
+    setText(node.level, unit.look === 'recruit' ? unit.title : `Lv ${unit.level}`)
+    node.fill.style.width = `${(Math.max(0, Math.min(1, share)) * 100).toFixed(1)}%`
+    node.fill.dataset.tone = hpTone(share)
+    node.xp.style.width = `${(Math.max(0, Math.min(1, unit.xpShare ?? 0)) * 100).toFixed(1)}%`
+    node.xp.parentElement?.toggleAttribute('hidden', unit.xpShare === undefined)
+    setText(node.tags, unit.tags.join(' · '))
+    return node.root
+  }
+
+  /** Floats a number or word up from a unit. */
+  const float = (at: string, text: string, tone: string): void => {
+    const node = units.get(at)
+    if (node === undefined) return
+    const pop = el('span', `aa-float is-${tone}`, text)
+    node.root.append(pop)
+    window.setTimeout(() => pop.remove(), 1400)
+  }
+
+  /** Shows a line of speech over a unit. */
+  const say = (at: string, text: string): void => {
+    const node = units.get(at)
+    if (node === undefined) return
+    setText(node.bubble, text)
+    node.bubble.classList.add('is-open')
+    if (node.bubbleTimer !== undefined) window.clearTimeout(node.bubbleTimer)
+    node.bubbleTimer = window.setTimeout(() => node.bubble.classList.remove('is-open'), BUBBLE_MS)
+  }
+
+  /** Shows a short notice in the stage's corner. */
+  const notice = (text: string, tone: string): void => {
+    const item = el('div', `aa-notice is-${tone}`, text)
+    notices.append(item)
+    window.setTimeout(() => item.remove(), NOTICE_MS)
+    while (notices.children.length > 3) notices.firstElementChild?.remove()
+  }
+
+  /** Plays one visual event. */
+  const play = (event: Fx): void => {
+    const node = units.get(event.at)
+    switch (event.kind) {
+      case 'act':
+        if (node !== undefined) flash(node.root, 'is-acting', 380)
+        if (event.text !== undefined) float(event.at, event.text, 'skill')
+        break
+      case 'hit':
+        if (node !== undefined) flash(node.root, 'is-hit', 320)
+        float(event.at, event.isCrit === true ? `${event.amount} crit!` : String(event.amount ?? ''), event.isCrit === true ? 'crit' : 'hit')
+        break
+      case 'miss': float(event.at, 'miss', 'miss'); break
+      case 'heal': float(event.at, `+${event.amount ?? ''}`, 'heal'); break
+      case 'buff': float(event.at, event.text ?? '', 'buff'); break
+      case 'down': break
+      case 'level':
+        float(event.at, event.text ?? 'Level up!', 'level')
+        notice(`${units.get(event.at)?.name.textContent ?? 'A hero'} reached ${event.text?.replace('!', '') ?? 'a new level'}`, 'level')
+        break
+      case 'learn': notice(`${units.get(event.at)?.name.textContent ?? 'A hero'} learned ${event.text ?? 'a skill'}`, 'learn'); break
+      case 'phase': if (node !== undefined) flash(stage, 'is-quake', 600); break
+      case 'say': say(event.at, event.text ?? ''); break
+    }
+  }
+
+  /** Builds or updates a hero's row in the roster. */
+  const rosterRow = (entry: RosterEntry): HTMLElement => {
+    let row = rosterRows.get(entry.id)
+    if (row === undefined) {
+      row = el('div', 'aa-hero')
+      const sprite = el('span', 'aa-hero-sprite')
+      const body = el('div', 'aa-hero-body')
+      const top = el('div', 'aa-hero-top')
+      top.append(el('span', 'aa-hero-name'), el('span', 'aa-hero-level'))
+      const xp = el('span', 'aa-xp')
+      xp.append(el('span', 'aa-xp-fill'))
+      body.append(top, el('div', 'aa-hero-skills'), xp, el('div', 'aa-hero-record'))
+      row.append(sprite, body)
+      rosterRows.set(entry.id, row)
+    }
+    row.classList.toggle('is-active', entry.isActive)
+    setSprite(row.querySelector('.aa-hero-sprite') as HTMLElement, entry.look, 3, false, undefined)
+    setText(row.querySelector('.aa-hero-name') as HTMLElement, entry.name)
+    setText(row.querySelector('.aa-hero-level') as HTMLElement, `Lv ${entry.level} ${entry.title}${entry.isActive ? ' · adventuring' : ''}`)
+    setText(row.querySelector('.aa-hero-skills') as HTMLElement, [entry.skills.length > 0 ? entry.skills.join(' · ') : 'No skills yet (one every 10 levels)', entry.motto === undefined ? '' : `“${entry.motto}”`].filter(Boolean).join('  '))
+    ;(row.querySelector('.aa-xp-fill') as HTMLElement).style.width = `${(Math.max(0, Math.min(1, entry.xpShare)) * 100).toFixed(1)}%`
+    setText(row.querySelector('.aa-hero-record') as HTMLElement, `${entry.record}${entry.trophies > 0 ? ` · 🏆 ${entry.trophies}` : ''}`)
+    return row
+  }
+
+  return {
+    update: (raw: unknown) => {
+      const data = raw as ViewData | null
+      if (data === null || typeof data !== 'object' || !Array.isArray(data.heroes)) return
+      frame.classList.toggle('is-calm', data.isCalm)
+      calm.classList.toggle('is-on', data.isCalm)
+      calm.setAttribute('aria-pressed', String(data.isCalm))
+
+      const isTavern = data.scene === 'tavern'
+      stage.dataset.scene = data.scene
+      stage.dataset.region = isTavern ? 'tavern' : data.region?.id ?? 'tavern'
+      setText(caption, data.caption)
+      setText(meta, isTavern
+        ? `${data.roster.length} hero${data.roster.length === 1 ? '' : 'es'} · 🏆 ${data.trophies}`
+        : `${data.region?.name ?? ''} · run ${data.runNumber} · threat ${data.threat}%`)
+
+      // The run's path: done stops dim, the current one lit.
+      path.hidden = data.stops.length === 0 || isTavern
+      arrange(path, data.stops.map((stop, i) => {
+        const dot = (path.children[i] as HTMLElement | undefined) ?? el('span', 'aa-stop')
+        dot.dataset.state = stop.state
+        dot.dataset.kind = stop.kind
+        dot.title = STOP_NAMES[stop.kind]
+        setText(dot, STOP_ICONS[stop.kind])
+        return dot
+      }))
+
+      for (const [id, node] of units) {
+        if (!data.heroes.some(u => u.id === id) && !data.enemies.some(u => u.id === id)) {
+          node.root.remove()
+          units.delete(id)
+        }
+      }
+      arrange(heroesSide, data.heroes.map(fillUnit))
+      arrange(enemiesSide, data.enemies.map(fillUnit))
+      enemiesSide.hidden = data.enemies.length === 0
+
+      const bannerText = data.scene === 'victory' ? 'Victory!' : data.scene === 'wipe' ? 'Defeated…' : data.scene === 'cleared' ? 'Run cleared!' : ''
+      if (bannerText !== lastBanner) {
+        lastBanner = bannerText
+        setText(banner, bannerText)
+        banner.dataset.tone = data.scene
+        if (bannerText !== '') flash(banner, 'is-shown', 2600)
+      }
+
+      setText(loot, [data.potions > 0 ? `🧪 ${data.potions} potion${data.potions === 1 ? '' : 's'}` : '', ...data.relics.map(relic => `${relic.icon} ${relic.name}`)].filter(Boolean).join('   '))
+      loot.title = data.relics.map(relic => `${relic.name}: ${relic.blurb}`).join('\n')
+      loot.hidden = isTavern || loot.textContent === ''
+
+      arrange(log, data.log.map(line => {
+        const item = (log.querySelector(`[data-id="${line.id}"]`) as HTMLElement | null) ?? el('li', 'aa-line', line.text)
+        item.dataset.id = String(line.id)
+        item.dataset.tone = line.tone
+        return item
+      }))
+
+      setText(rosterLabel, `Guild · ${data.roster.length} hero${data.roster.length === 1 ? '' : 'es'}`)
+      for (const id of [...rosterRows.keys()]) if (!data.roster.some(entry => entry.id === id)) rosterRows.delete(id)
+      arrange(rosterList, data.roster.map(rosterRow))
+
+      // Visual events play once each; on the first update they are history, not news.
+      const fresh = data.fx.filter(event => !seen.has(event.id))
+      for (const event of data.fx) seen.add(event.id)
+      if (seen.size > 400) for (const id of [...seen].slice(0, seen.size - 200)) seen.delete(id)
+      if (isFirst) {
+        isFirst = false
+        return
+      }
+      const gap = Math.min(FX_STAGGER, 900 / Math.max(1, fresh.length))
+      fresh.forEach((event, i) => window.setTimeout(() => play(event), i * gap))
+    },
+  }
+}

package/mods/agents-panel/.claude-plugin/plugin.json

@@ -5,5 +5,13 @@
   "author": {
     "name": "g3ntrovert"
   },
-  "types": "./types/index.d.ts"
+  "types": "./types/index.d.ts",
+  "userConfig": {
+    "showInClaudeCode": {
+      "type": "boolean",
+      "title": "Show in Claude Code",
+      "default": false,
+      "description": "Open this mod's pane in the Claude Code chat when a session starts. The mods viewer shows it either way."
+    }
+  }
 }

package/mods/agents-panel/hooks/register.tsx

@@ -17,6 +17,19 @@ const NAMED_COLORS: Readonly<Record<string, string>> = {
   purple: '#b48ead', orange: '#e0775a', pink: '#f09bb5', cyan: '#5fb3c4',
 }
 const SPINNER = ['◐', '◓', '◑', '◒']
+
+/** Prop the mods viewer adds to every pane it draws; the Claude Code extension draws on the `vscode` surface too, without it. */
+const VIEWER_PROP = 'g3nViewer'
+
+/**
+ * Tells whether the mods viewer asked for this drawing, rather than the Claude Code extension on the same surface.
+ *
+ * @param props - The `Pane` props of the `ui.render` argument.
+ * @returns `true` when the viewer's prop is set.
+ */
+function isViewer(props: object): boolean {
+  return (props as Readonly<Record<string, unknown>>)[VIEWER_PROP] === true
+}
 const DONE_STATUSES = new Set(['completed', 'failed', 'killed', 'idle'])
 
 /** Key prefix of the panel's own elements; an add-on looks for it to find the panel's tree. */
@@ -191,12 +204,13 @@ async function act($: EngineInterface, value: string): Promise<void> {
  * Registers this mod's `agents-panel` command, its session and turn hooks, and its pane.
  *
  * @param on - Hook registration function the engine passes in.
+ * @param options - Plugin options; `showInClaudeCode` opens the pane in the Claude Code chat at session start.
  */
-export const register: Register = on => {
+export const register: Register = (on, options) => {
   on('session.start', async ($, e, next) => {
-    await $.command.register({ name: 'agents-panel', description: 'Show or hide the agents panel' })
+    await $.command.register({ name: 'agents-panel', description: 'Show or hide the agents panel in the Claude Code chat' })
     await loadAgents($)
-    void $.ui.open({ id: PANE, title: TITLE })
+    if (options.showInClaudeCode === true) void $.ui.open({ id: PANE, title: TITLE })
     $.clock.every(1000, () => void pollRunning($))
     return next(e)
   })
@@ -236,7 +250,7 @@ export const register: Register = on => {
     const frame = SPINNER[Math.floor(now / 250) % SPINNER.length] ?? '◐'
 
     // The viewer draws the panel with the mod's own view: hand it the agents as data, inside the key an add-on looks for.
-    if (e.surface === 'vscode') {
+    if (e.surface === 'vscode' && isViewer(e.props)) {
       const { Input } = $.ui.resolve(e)
       const data: AgentsViewData = {
         agents: list.map((agent, index) => {

package/mods/agents-panel/view/panes.json

@@ -0,0 +1,8 @@
+{
+  "panes": [
+    {
+      "id": "agents-panel",
+      "title": "Agents"
+    }
+  ]
+}

package/mods/context-bar/.claude-plugin/plugin.json

@@ -5,5 +5,13 @@
   "author": {
     "name": "g3ntrovert"
   },
-  "types": "./types/index.d.ts"
+  "types": "./types/index.d.ts",
+  "userConfig": {
+    "showInClaudeCode": {
+      "type": "boolean",
+      "title": "Show in Claude Code",
+      "default": true,
+      "description": "Open this mod's pane in the Claude Code chat when a session starts. The mods viewer shows it either way."
+    }
+  }
 }

package/mods/context-bar/hooks/register.tsx

@@ -134,11 +134,12 @@ async function refresh($: EngineInterface): Promise<void> {
  * Registers this mod's `context-bar` command, its session, measure and turn hooks, and its pane.
  *
  * @param on - Hook registration function the engine passes in.
+ * @param options - Plugin options; `showInClaudeCode` opens the pane in the Claude Code chat at session start.
  */
-export const register: Register = on => {
+export const register: Register = (on, options) => {
   on('session.start', async ($, e, next) => {
-    await $.command.register({ name: 'context-bar', description: 'Show or hide the context window bar' })
-    void $.ui.open({ id: PANE, title: TITLE })
+    await $.command.register({ name: 'context-bar', description: 'Show or hide the context window bar in the Claude Code chat' })
+    if (options.showInClaudeCode === true) void $.ui.open({ id: PANE, title: TITLE })
     void refresh($)
     return next(e)
   })

package/mods/context-bar/view/panes.json

@@ -0,0 +1,8 @@
+{
+  "panes": [
+    {
+      "id": "context-bar",
+      "title": "Context"
+    }
+  ]
+}