ambient

1// Ambient: an animated strip above the prompt that moves with the work.
2//
3// turn.step: counts the streamed pieces (re-yielding each one untouched).
4// tool.call: marks a tool running, and a failed or denied call.
5// turn.complete: the turn settles; session.measure: the context fill.
6// ui.render (AbovePrompt): the strip is one Raster, the last rows of the band,
7// below whatever sibling mods draw there. $.ui.blit repaints it at about 14 fps
8// while something is happening; once it settles the timer stops.
9// /ambient picks a style, lists them, previews them all, or turns the strip off.
10//
11// scene.mjs holds the simulation and the drawing. The host reads on(...) and
12// $.noun.method(...) from source, so they are spelled literally, and helpers
13// that take $ are top-level functions.
14
15import {
16  FALLBACK,
17  INTENSITY,
18  PALETTES,
19  STYLES,
20  STYLE_INFO,
21  chunkSeen,
22  createScene,
23  drawFrame,
24  horizonSeen,
25  isSettled,
26  packCells,
27  rowsFor,
28  stepBegan,
29  stepEnded,
30  still,
31  tick,
32  toolBegan,
33  toolEnded,
34  turnCompleted,
35} from "./scene.mjs";
36
37const STRIP_KEY = "ambient";
38const FRAME_MS = 70;
39
40let enabled = true;
41let style = "network";
42let rowsWanted = 3;
43let paletteChoice = "auto";
44let paletteName = FALLBACK;
45let intensityName = "bright";
46let look = { palette: PALETTES[FALLBACK], intensity: INTENSITY.bright };
47
48// Where the strip is mounted, as the last render drew it: { requestId, columns, rows }.
49let mounted = null;
50let timer = null;
51const scene = createScene();
52
53// A running /ambient preview: which style, how far into its demo, what to go back to.
54const PREVIEW_SECONDS = 4.5;
55const PREVIEW_ONE_SECONDS = 6.5;
56let preview = null;
57
58export function register(on, options) {
59  rowsWanted = Math.max(1, Math.min(6, Number(options?.rows ?? 3) || 3));
60  paletteChoice = String(options?.palette ?? "auto");
61  style = STYLES.includes(String(options?.style)) ? String(options.style) : "network";
62  intensityName = INTENSITY[String(options?.intensity)] ? String(options.intensity) : "bright";
63  paletteName = PALETTES[paletteChoice] ? paletteChoice : FALLBACK;
64  look = { palette: PALETTES[paletteName], intensity: INTENSITY[intensityName] };
65
66  on("session.start", async ($, e, next) => {
67    try {
68      await $.command.register({ name: "ambient", description: "Pick the ambient strip's style, preview styles live, or turn it off", argumentHint: "[<style> | styles | preview [<style>] | on | off]", immediate: true });
69    } catch {
70      // the command is optional; the strip still works
71    }
72    try {
73      const saved = await $.store.get("enabled");
74      if (typeof saved === "boolean") enabled = saved;
75      const savedStyle = await $.store.get("style");
76      if (STYLES.includes(savedStyle)) style = savedStyle;
77    } catch {
78      // nothing stored yet
79    }
80    if (paletteChoice === "auto") {
81      paletteName = await themePalette($);
82      look = { ...look, palette: PALETTES[paletteName] };
83    }
84    return next(e);
85  });
86
87  on("command.run", { command: "ambient" }, async ($, e) => {
88    const arg = String(e.args ?? "").trim().toLowerCase();
89    const [word, rest = ""] = arg.split(/\s+/, 2);
90    if (word === "styles" || word === "list") {
91      return { text: stylesText() };
92    }
93    if (word === "preview") {
94      if (rest && !STYLES.includes(rest)) {
95        return { text: `Unknown style "${rest}".\n\n${stylesText()}` };
96      }
97      endPreview($, false);
98      enabled = true;
99      const order = rest ? [rest] : [...STYLES];
100      // One style gets time to settle after its demo turn; a tour keeps moving.
101      preview = { order, i: 0, t: 0, seconds: rest ? PREVIEW_ONE_SECONDS : PREVIEW_SECONDS, restore: style, step: null, tool: null };
102      style = order[0];
103      previewStatus($);
104      $.ui.invalidate("ui.render");
105      ensureTimer($);
106      return {
107        text: rest
108          ? `Previewing ${rest} through a demo turn: thinking, writing, a tool, a failed tool, done, then settling. Your style comes back after.`
109          : `Previewing all ${STYLES.length} styles, ${PREVIEW_SECONDS} seconds each, with a short demo turn. /ambient <style> keeps the one you like.`,
110      };
111    }
112    endPreview($, false);
113    if (arg === "off") {
114      enabled = false;
115    } else if (arg === "on") {
116      enabled = true;
117    } else if (STYLES.includes(arg)) {
118      style = arg;
119      enabled = true;
120    } else if (arg === "") {
121      // Cycle to the next style.
122      style = enabled ? STYLES[(STYLES.indexOf(style) + 1) % STYLES.length] : style;
123      enabled = true;
124    } else {
125      return { text: `Unknown style "${arg}".\n\n${stylesText()}` };
126    }
127    try {
128      await $.store.set("enabled", enabled);
129      await $.store.set("style", style);
130    } catch {
131      // stays set for this session even if the store refuses
132    }
133    if (!enabled) {
134      stopTimer();
135      still(scene);
136    }
137    $.ui.invalidate("ui.render");
138    return { text: enabled ? `Ambient strip: ${style}, ${STYLE_INFO[style]}.` : "Ambient strip off" };
139  });
140
141  on("turn.step", async function* ($, e, next) {
142    if (!enabled) {
143      return yield* next(e);
144    }
145    let token;
146    try {
147      token = stepBegan(scene, { sub: Boolean(e.agentId), model: e.model, effort: e.effort });
148      ensureTimer($);
149    } catch {
150      return yield* next(e);
151    }
152    const stream = next(e);
153    let done = false;
154    let observing = true;
155    try {
156      let sent;
157      while (true) {
158        const step = await stream.next(sent);
159        if (step.done) {
160          done = true;
161          return step.value;
162        }
163        if (observing) {
164          try {
165            const c = step.value;
166            chunkSeen(scene, token, c.kind, typeof c.text === "string" ? c.text.length : 0);
167          } catch {
168            observing = false; // stop watching, keep passing everything through
169          }
170        }
171        sent = yield step.value;
172      }
173    } finally {
174      stepEnded(scene, token);
175      if (!done) {
176        try {
177          await stream.return?.(undefined);
178        } catch {
179          // the stream beneath is already closed
180        }
181      }
182    }
183  });
184
185  on("tool.call", async ($, e, next) => {
186    if (!enabled) {
187      return next(e);
188    }
189    let token = null;
190    try {
191      token = toolBegan(scene, { sub: Boolean(e.agentId) });
192      ensureTimer($);
193    } catch {
194      token = null;
195    }
196    let result;
197    try {
198      result = await next(e);
199      return result;
200    } finally {
201      try {
202        const failed = result === undefined || result === null || typeof result.deny === "string" || result.isError === true;
203        if (token) toolEnded(scene, token, failed);
204      } catch {
205        // observe only
206      }
207    }
208  });
209
210  on("turn.complete", async ($, e, next) => {
211    const result = await next(e);
212    try {
213      if (!e.agentId && enabled) {
214        turnCompleted(scene);
215        ensureTimer($);
216      }
217    } catch {
218      // observe only
219    }
220    return result;
221  });
222
223  on("session.measure", async ($, e, next) => {
224    const result = await next(e);
225    try {
226      const c = e.context;
227      const fill = typeof c?.percent === "number" ? c.percent / 100 : c?.tokens && c?.window ? c.tokens / c.window : null;
228      if (fill !== null) {
229        horizonSeen(scene, fill);
230        if (enabled && timer === null) paint($);
231      }
232    } catch {
233      // observe only
234    }
235    return result;
236  });
237
238  on("session.end", async ($, e, next) => {
239    preview = null;
240    stopTimer();
241    still(scene);
242    return next(e);
243  });
244
245  // The styles list in the transcript, drawn as a list rather than as Markdown.
246  on("ui.render", { component: "CommandOutput", props: { command: "ambient" } }, async ($, e, next) => {
247    if (e.props.isErrored || !String(e.props.text ?? "").includes(STYLES_TITLE)) {
248      return next(e);
249    }
250    return stylesTree($, e);
251  });
252
253  on("ui.render", { component: "AbovePrompt" }, async ($, e, next) => {
254    if (!enabled || e.surface !== "terminal" || e.props.hasSurvey) {
255      mounted = null;
256      return next(e);
257    }
258    const theirs = await next(e);
259    const { Box, Raster } = $.ui.resolve(e);
260    const columns = Math.max(1, Math.min(512, Math.floor(e.props.bodyColumns || 80)));
261    const rows = rowsFor(style, rowsWanted);
262    mounted = { requestId: e.requestId, columns, rows };
263    const strip = Raster({ key: STRIP_KEY, columns, rows, cells: packCells(drawFrame(scene, style, columns, rows, look)) });
264    return Box({ flexDirection: "column", children: [theirs, strip] });
265  });
266}
267
268function ensureTimer($) {
269  if (timer !== null) {
270    return;
271  }
272  timer = $.clock.every(FRAME_MS, () => {
273    try {
274      if (preview !== null) {
275        previewTick($, FRAME_MS / 1000);
276      }
277      tick(scene, FRAME_MS / 1000, style);
278      if (preview === null && isSettled(scene)) {
279        stopTimer();
280        still(scene);
281      }
282      paint($);
283    } catch {
284      stopTimer();
285    }
286  });
287}
288
289// What /ambient styles prints: Markdown tables, which the transcript and a headless
290// run both show cleanly. In the terminal and desktop the CommandOutput hook below
291// draws the same content as a laid-out list instead.
292const STYLES_TITLE = "**Ambient styles**";
293const COMMANDS = [
294  ["/ambient <style>", "switch to a style, saved for new sessions"],
295  ["/ambient preview", "show every style for a few seconds"],
296  ["/ambient preview <style>", "play one style through a demo turn"],
297  ["/ambient", "next style"],
298  ["/ambient off, /ambient on", "hide or show the strip"],
299];
300
301function settingsLine() {
302  const palette = paletteChoice === "auto" ? `auto (${paletteName})` : paletteName;
303  return `Height ${rowsWanted} row${rowsWanted === 1 ? "" : "s"}, intensity ${intensityName}, palette ${palette}${enabled ? "" : ", strip off"}`;
304}
305
306function stylesText() {
307  return [
308    STYLES_TITLE,
309    "",
310    "| Style | What it shows |",
311    "| --- | --- |",
312    ...STYLES.map((s) => `| ${s === style ? `**${s}** (current)` : s} | ${STYLE_INFO[s]} |`),
313    "",
314    "| Command | Does |",
315    "| --- | --- |",
316    ...COMMANDS.map(([c, d]) => `| \`${c}\` | ${d} |`),
317    "",
318    `Settings: ${settingsLine()}`,
319  ].join("\n");
320}
321
322// Two colours that stand for each style in the list's swatch.
323const SWATCH = {
324  network: ["#76ea6a", "#a17af2"],
325  critter: ["#d77757", "#eba487"],
326  aurora: ["#a6e3a1", "#cba6f7"],
327  synthwave: ["#ff3d9a", "#2de2e6"],
328  warp: ["#8bbcff", "#e8e6ef"],
329  murmuration: ["#ff8a5c", "#4a2a6e"],
330  lava: ["#fab387", "#f38ba8"],
331  wave: ["#89dceb", "#a6e3a1"],
332};
333
334// The styles list as a tree, read back from the row's own text so an old row
335// keeps showing what was current when it was printed.
336function stylesTree($, e) {
337  const { Box, Text } = $.ui.resolve(e);
338  const text = e.props.text;
339  const notice = text.slice(0, text.indexOf(STYLES_TITLE)).trim();
340  const current = /\*\*([a-z]+)\*\* \(current\)/.exec(text)?.[1];
341  const settings = /^Settings: (.*)$/m.exec(text)?.[1];
342  const nameWidth = Math.max(...STYLES.map((s) => s.length)) + 2;
343  const commandWidth = Math.max(...COMMANDS.map(([c]) => c.length)) + 2;
344  const rows = STYLES.map((s) => {
345    const [a, b] = SWATCH[s] ?? ["#888888", "#888888"];
346    return Box({
347      flexDirection: "row",
348      children: [
349        Text(s === current ? { color: "#76ea6a", children: ["● "] } : { children: ["  "] }),
350        Text({ color: a, children: ["▆"] }),
351        Text({ color: b, children: ["▆ "] }),
352        Box({ width: nameWidth, flexShrink: 0, children: [Text({ bold: true, children: [s] })] }),
353        Text({ dimColor: true, wrap: "truncate-end", children: [STYLE_INFO[s] + (s === current ? "  (current)" : "")] }),
354      ],
355    });
356  });
357  const commands = COMMANDS.map(([c, d]) =>
358    Box({
359      flexDirection: "row",
360      children: [
361        Box({ width: commandWidth + 2, flexShrink: 0, children: [Text({ dimColor: true, children: ["  " + c] })] }),
362        Text({ dimColor: true, children: [d] }),
363      ],
364    }),
365  );
366  return Box({
367    flexDirection: "column",
368    children: [
369      ...(notice ? [Text({ color: "#ff7b75", children: [notice] }), Text({ children: [" "] })] : []),
370      Text({ bold: true, children: ["Ambient styles"] }),
371      ...rows,
372      Text({ children: [" "] }),
373      ...commands,
374      ...(settings ? [Text({ children: [" "] }), Text({ dimColor: true, children: [settings] })] : []),
375    ],
376  });
377}
378
379// The preview's demo turn for each style: think, write, run a tool, fail one, finish.
380function previewTick($, dt) {
381  const p = preview;
382  const before = p.t;
383  p.t += dt;
384  const at = (mark) => before < mark && p.t >= mark;
385  if (at(0.05)) p.step = stepBegan(scene, { sub: false, model: "", effort: "high" });
386  if (p.step && p.t < 1.2) chunkSeen(scene, p.step, "thinking", 30);
387  else if (p.step && p.t < 2.4) chunkSeen(scene, p.step, "text", 50);
388  if (at(2.4)) {
389    if (p.step) stepEnded(scene, p.step);
390    p.step = null;
391    p.tool = toolBegan(scene, { sub: false });
392  }
393  if (at(2.9)) {
394    toolEnded(scene, p.tool, false);
395    p.tool = toolBegan(scene, { sub: false });
396  }
397  if (at(3.25)) {
398    toolEnded(scene, p.tool, true);
399    p.tool = null;
400  }
401  if (at(3.5)) turnCompleted(scene);
402  if (p.t >= p.seconds) {
403    p.i += 1;
404    p.t = 0;
405    if (p.i >= p.order.length) {
406      endPreview($, true);
407      return;
408    }
409    style = p.order[p.i];
410    previewStatus($);
411    $.ui.invalidate("ui.render");
412  }
413}
414
415function previewStatus($) {
416  const of = preview.order.length > 1 ? ` (${preview.i + 1} of ${preview.order.length})` : "";
417  $.ui.status(`ambient preview: ${style}${of}`);
418}
419
420function endPreview($, restore) {
421  if (preview === null) {
422    return;
423  }
424  if (preview.step) stepEnded(scene, preview.step);
425  if (preview.tool) toolEnded(scene, preview.tool, false);
426  if (restore) {
427    style = preview.restore;
428    $.ui.invalidate("ui.render");
429  }
430  preview = null;
431  $.ui.status(undefined);
432}
433
434function stopTimer() {
435  if (timer !== null) {
436    try {
437      timer.cancel();
438    } catch {
439      // already gone
440    }
441    timer = null;
442  }
443}
444
445function paint($) {
446  if (mounted === null) {
447    return;
448  }
449  const { requestId, columns, rows } = mounted;
450  const cells = packCells(drawFrame(scene, style, columns, rows, look));
451  $.ui.blit({ requestId, key: STRIP_KEY, columns, rows, cells }).catch(() => {});
452}
453
454// The name of the palette ccs-theme last applied, read once per session start.
455async function themePalette($) {
456  try {
457    const home = await $.env.get("HOME");
458    if (!home) {
459      return FALLBACK;
460    }
461    const name = String(await $.fs.read(`${home}/.config/ccstatusline/.theme`)).trim();
462    return PALETTES[name] ? name : FALLBACK;
463  } catch {
464    return FALLBACK;
465  }
466}
467

1// The strip's simulation, with no engine calls: ambient.mjs feeds it events and a
2// clock, and asks it for cells. Every style shares one scene, so a switch mid-turn
3// carries on where the last style was. The styles live in ./styles.
4
5import { CELEBRATE_TIME, CONFIRM_TIME, EFFORT, Frame, MESH, PALETTES, TRIP_TIME, clamp01, toBase64 } from "./lib.mjs";
6import { drawAurora } from "./styles/aurora.mjs";
7import { critterPose, drawCritter } from "./styles/critter.mjs";
8import { drawLava, lavaSettled, stepLava } from "./styles/lava.mjs";
9import { drawMurmuration, stepMurmuration } from "./styles/murmuration.mjs";
10import { drawNetwork, networkSettled, packet, stepNetwork } from "./styles/network.mjs";
11import { drawSynthwave, stepSynthwave } from "./styles/synthwave.mjs";
12import { drawWarp, stepWarp } from "./styles/warp.mjs";
13import { drawWave } from "./styles/wave.mjs";
14
15export { FALLBACK, INTENSITY, PALETTES } from "./lib.mjs";
16
17export const STYLE_INFO = {
18  network: "a mesh of nodes in depth with requests flying between them; each turn locks a block onto a chain",
19  critter: "a small orange creature that acts out the work, then naps",
20  aurora: "curtains of light drifting over a starfield",
21  synthwave: "a neon grid racing toward a striped sun, faster as the answer streams",
22  warp: "hyperspace streaks that stretch with the stream; a jump flash when a turn completes",
23  murmuration: "a flock of starlings over a sunset, circling while thinking and scattering on tool calls",
24  lava: "slow liquid blobs of colour, like a lava lamp",
25  wave: "a low flowing wave with sparks, the quietest",
26};
27export const STYLES = Object.keys(STYLE_INFO);
28
29// ---- Scene state and events -------------------------------------------------------
30
31export function createScene() {
32  return {
33    t: 0,
34    steps: new Set(),
35    tools: new Set(),
36    glow: 0,
37    flow: 0,
38    flowSub: 0,
39    linger: 0,
40    mode: "writing",
41    tint: 0,
42    lean: null,
43    horizon: null,
44    flare: 0,
45    flareX: 0.5,
46    particles: [],
47    pulses: [],
48    // network
49    packets: [],
50    bursts: [],
51    chain: 0,
52    confirmAge: Infinity,
53    layout: null,
54    // critter
55    cx: 0.3,
56    dir: 1,
57    walk: 0,
58    celebrate: 0,
59    trip: 0,
60    ink: [],
61    // network depth, comets, consensus
62    netDrift: 0,
63    netLit: new Map(),
64    arrivals: [],
65    consensus: Infinity,
66    // aurora
67    at: 0,
68    shocks: [],
69    // synthwave, warp, murmuration, lava
70    road: 0,
71    warpStars: null,
72    boids: null,
73    lava: null,
74    lavaT: 0,
75  };
76}
77
78export function isActive(s) {
79  return s.steps.size + s.tools.size > 0;
80}
81
82export function stepBegan(s, { sub, model, effort }) {
83  const token = { sub: Boolean(sub) };
84  s.steps.add(token);
85  if (!token.sub) {
86    s.tint = typeof effort === "number" ? clamp01(effort / 32000) : EFFORT[effort] ?? 0.3;
87    s.lean = /haiku/i.test(model ?? "") ? "a" : /opus|fable/i.test(model ?? "") ? "b" : null;
88  }
89  return token;
90}
91
92export function stepEnded(s, token) {
93  s.steps.delete(token);
94}
95
96export function chunkSeen(s, token, kind, length) {
97  s.linger = 0.6;
98  if (kind !== "text" && kind !== "thinking" && kind !== "tool") return;
99  const n = kind === "tool" ? 20 : Math.min(length, 60);
100  if (token.sub) {
101    s.flowSub = Math.min(1, s.flowSub + n / 260);
102  } else {
103    s.flow = Math.min(1, s.flow + n / 160);
104    if (kind !== "tool") s.mode = kind === "thinking" ? "thinking" : "writing";
105  }
106  // Roughly one particle or packet per 24 characters streamed.
107  const want = Math.floor(n / 24) + (Math.random() < (n % 24) / 24 ? 1 : 0);
108  for (let i = 0; i < want; i += 1) {
109    if (s.particles.length < 40) {
110      s.particles.push({ x: token.sub ? 1 : 0, v: (token.sub ? -1 : 1) * (0.12 + Math.random() * 0.22), life: 1, sub: token.sub, row: Math.random() });
111    }
112    if (s.packets.length < 16 && Math.random() < 0.5) s.packets.push(packet(s, token.sub ? MESH.cyan : s.mode === "thinking" ? MESH.lilac : MESH.green, 0.7 + Math.random() * 0.8));
113    if (!token.sub && kind === "text" && s.ink.length < 24) {
114      s.ink.push({ x: s.cx - s.dir * 0.02, y: Math.random(), vx: -s.dir * (0.03 + Math.random() * 0.05), life: 1 });
115    }
116  }
117}
118
119export function toolBegan(s, { sub }) {
120  const token = { sub: Boolean(sub) };
121  s.tools.add(token);
122  s.linger = 0.6;
123  s.pulses.push({ x: 0, speed: token.sub ? 0.5 : 0.75, sub: token.sub, token, done: false });
124  const node = s.layout ? Math.floor(Math.random() * s.layout.nodes.length) : 0;
125  s.bursts.push({ node, age: 0, token, color: token.sub ? MESH.cyan : MESH.yellow, done: false });
126  for (let i = 0; i < (token.sub ? 2 : 4); i += 1) s.packets.push(packet(s, token.sub ? MESH.cyan : MESH.yellow, 1.1, node));
127  s.shocks.push({ x: -0.05, speed: token.sub ? 0.45 : 0.6, color: "warn", life: 1 });
128  return token;
129}
130
131export function toolEnded(s, token, failed) {
132  s.tools.delete(token);
133  for (const p of s.pulses) if (p.token === token) p.done = true;
134  for (const b of s.bursts) if (b.token === token) b.done = true;
135  if (!failed) return;
136  s.flare = 1;
137  const pulse = s.pulses.find((p) => p.token === token);
138  s.flareX = pulse ? Math.min(1, pulse.x) : 0.5;
139  const burst = s.bursts.find((b) => b.token === token);
140  const node = burst ? burst.node : 0;
141  s.bursts.push({ node, age: 0, token: null, color: MESH.red, done: true });
142  for (let i = 0; i < 3; i += 1) s.packets.push(packet(s, MESH.red, 1.2, node));
143  s.shocks.push({ x: -0.05, speed: 0.9, color: "bad", life: 1 });
144  s.trip = TRIP_TIME;
145}
146
147export function turnCompleted(s) {
148  for (const t of s.steps) if (!t.sub) s.steps.delete(t);
149  for (const t of s.tools) if (!t.sub) s.tools.delete(t);
150  for (const p of s.pulses) if (!p.sub) p.done = true;
151  for (const b of s.bursts) if (b.token && !b.token.sub) b.done = true;
152  s.chain += 1;
153  s.confirmAge = 0;
154  s.consensus = 0;
155  s.celebrate = CELEBRATE_TIME;
156  // The last few requests settle into the new block.
157  for (let i = 0; i < 3; i += 1) {
158    const p = packet(s, MESH.green, 1.6, undefined, true);
159    p.p = -i * 0.3;
160    s.packets.push(p);
161  }
162}
163
164export function horizonSeen(s, fill) {
165  s.horizon = clamp01(fill);
166}
167
168// Drops all motion; the chain and the horizon stay.
169export function still(s) {
170  s.steps.clear();
171  s.tools.clear();
172  Object.assign(s, { glow: 0, flow: 0, flowSub: 0, linger: 0, flare: 0, particles: [], pulses: [], packets: [], bursts: [], confirmAge: Infinity, celebrate: 0, trip: 0, ink: [], shocks: [], arrivals: [], consensus: Infinity });
173  s.netLit.clear();
174  if (s.lava) s.lava = s.lava.filter((b) => !b.rise);
175}
176
177export function isSettled(s) {
178  return (
179    !isActive(s) && s.linger <= 0 && s.glow <= 0 && s.flare <= 0 && s.celebrate <= 0 && s.trip <= 0 && s.confirmAge >= CONFIRM_TIME &&
180    s.particles.length === 0 && s.pulses.length === 0 && s.packets.length === 0 && s.bursts.length === 0 && s.ink.length === 0 && s.shocks.length === 0 &&
181    networkSettled(s) && lavaSettled(s)
182  );
183}
184
185// ---- Time -------------------------------------------------------------------------
186
187export function tick(s, dt, style) {
188  s.t += dt;
189  const active = isActive(s) || s.linger > 0;
190  s.linger = Math.max(0, s.linger - dt);
191  s.glow = active ? Math.min(1, s.glow + dt / 0.4) : Math.max(0, s.glow - dt / 1.2);
192  const decay = Math.exp(-dt / 0.6);
193  s.flow *= decay;
194  s.flowSub *= decay;
195  s.flare = Math.max(0, s.flare - dt / 0.8);
196  s.celebrate = Math.max(0, s.celebrate - dt);
197  s.trip = Math.max(0, s.trip - dt);
198  if (s.confirmAge < CONFIRM_TIME) s.confirmAge += dt;
199
200  for (const p of s.particles) {
201    p.x += p.v * dt;
202    p.life -= dt / (p.sub ? 1.4 : 1.8);
203  }
204  s.particles = s.particles.filter((p) => p.life > 0 && p.x >= 0 && p.x <= 1);
205
206  for (const p of s.pulses) {
207    p.x += p.speed * dt;
208    if (p.x > 1.15 && !p.done) p.x = 0;
209  }
210  s.pulses = s.pulses.filter((p) => !(p.done && p.x > 1.15));
211
212  stepNetwork(s, dt);
213  if (style === "synthwave") stepSynthwave(s, dt);
214  else if (style === "warp") stepWarp(s, dt);
215  else if (style === "murmuration") stepMurmuration(s, dt);
216  else if (style === "lava") stepLava(s, dt);
217  for (const p of s.packets) p.p += p.speed * dt;
218  s.packets = s.packets.filter((p) => p.p < 1);
219  // Keep a trickle of requests while working, more as the stream speeds up.
220  if (active && Math.random() < dt * (0.8 + 12 * Math.max(s.flow, s.flowSub)) && s.packets.length < 16) {
221    s.packets.push(packet(s, s.mode === "thinking" ? MESH.lilac : MESH.green, 0.7 + Math.random() * 0.8));
222  }
223
224  for (const b of s.bursts) b.age += dt;
225  s.bursts = s.bursts.filter((b) => !(b.done && b.age > 0.8) && b.age < 120);
226
227  for (const k of s.shocks) {
228    k.x += k.speed * dt;
229    k.life = Math.min(1, (k.x + 0.05) / 0.15, (1.15 - k.x) / 0.25);
230  }
231  s.shocks = s.shocks.filter((k) => k.x < 1.15);
232  s.at += dt * (0.5 + 2.5 * Math.max(s.flow, s.flowSub * 0.6)) * (0.3 + 0.7 * s.glow);
233
234  // The critter walks while the answer streams.
235  if (critterPose(s) === "walk") {
236    s.walk += dt * (4 + 8 * s.flow);
237    s.cx += s.dir * dt * (0.03 + 0.07 * s.flow);
238    if (s.cx > 0.9) s.dir = -1;
239    if (s.cx < 0.05) s.dir = 1;
240  } else {
241    s.walk += dt * 6;
242  }
243  for (const k of s.ink) {
244    k.x += k.vx * dt;
245    k.life -= dt / 1.6;
246  }
247  s.ink = s.ink.filter((k) => k.life > 0);
248}
249
250// ---- Drawing ----------------------------------------------------------------------
251
252// Rows the strip needs for a style, from the rows asked for.
253export function rowsFor(style, rows) {
254  const r = Math.max(1, Math.min(6, Math.round(rows) || 3));
255  // The critter needs three rows to stand in, synthwave four for its sun and road.
256  return style === "critter" ? Math.max(3, r) : style === "synthwave" ? Math.max(4, r) : r;
257}
258
259// One frame as cells: { columns, rows, glyph, fg, bg }.
260export function drawFrame(s, style, columns, rows, look) {
261  const palette = style === "network" ? PALETTES.nightshade : look.palette;
262  const f = new Frame(columns, rows, { ...look, palette });
263  if (style === "network") drawNetwork(s, f);
264  else if (style === "critter") drawCritter(s, f);
265  else if (style === "aurora") drawAurora(s, f);
266  else if (style === "synthwave") drawSynthwave(s, f);
267  else if (style === "warp") drawWarp(s, f);
268  else if (style === "murmuration") drawMurmuration(s, f);
269  else if (style === "lava") drawLava(s, f);
270  else drawWave(s, f);
271  return f.resolve();
272}
273
274// Raster `cells`: base64 of little-endian u32 triplets.
275export function packCells(frame) {
276  const n = frame.columns * frame.rows;
277  const words = new Uint32Array(n * 3);
278  for (let i = 0; i < n; i += 1) {
279    words[i * 3] = frame.glyph[i];
280    words[i * 3 + 1] = frame.fg[i];
281    words[i * 3 + 2] = frame.bg[i];
282  }
283  return toBase64(new Uint8Array(words.buffer));
284}
285

1// Shared drawing pieces: palettes, glyphs, the cell and pixel frame, and color math.
2
3export const INTENSITY = { soft: 0.6, bright: 0.85, vivid: 1 };
4
5export const DEFAULT_COLOR = 0x01000000;
6export const BLANK = 0x20;
7
8// Mirrors the themes ccs-theme switches between (claude-rig/claude/bin/ccs-theme).
9export const PALETTES = {
10  nightshade: { bg: 0x24222c, fg: 0xe8e6ef, a: 0x76ea6a, b: 0xa17af2, c: 0x7de8e1, warn: 0xf2d57f, bad: 0xff7b75 },
11  "rose-pine": { bg: 0x191724, fg: 0xe0def4, a: 0x9ccfd8, b: 0xc4a7e7, c: 0xebbcba, warn: 0xf6c177, bad: 0xeb6f92 },
12  "kanagawa-wave": { bg: 0x1f1f28, fg: 0xdcd7ba, a: 0x7e9cd8, b: 0x957fb8, c: 0x7fb4ca, warn: 0xe6c384, bad: 0xff5d62 },
13  "kanagawa-dragon": { bg: 0x181616, fg: 0xc5c9c5, a: 0x87a987, b: 0x8992a7, c: 0x8ea4a2, warn: 0xe6c384, bad: 0xe46876 },
14  "catppuccin-mocha": { bg: 0x1e1e2e, fg: 0xcdd6f4, a: 0xa6e3a1, b: 0xcba6f7, c: 0x89dceb, warn: 0xfab387, bad: 0xf38ba8 },
15  "catppuccin-latte": { bg: 0xeff1f5, fg: 0x4c4f69, a: 0x40a02b, b: 0x8839ef, c: 0x04a5e5, warn: 0xdf8e1d, bad: 0xd20f39 },
16  dusk: { bg: 0x1a1b26, fg: 0xc0caf5, a: 0x7dcfff, b: 0xbb9af7, c: 0x73daca, warn: 0xe0af68, bad: 0xf7768e },
17};
18export const FALLBACK = "dusk";
19
20// The network style always wears the Nightshade theme's own colors.
21export const MESH = { bg: 0x24222c, fg: 0xe8e6ef, dim: 0x736d82, green: 0x76ea6a, green2: 0x5fcf55, purple: 0xa17af2, lilac: 0xb995ff, cyan: 0x7de8e1, blue: 0x8bbcff, yellow: 0xf2d57f, red: 0xff7b75 };
22
23// The critter's orange.
24export const CLAWD = 0xd77757;
25export const CLAWD_KID = 0xeba487;
26
27export const EFFORT = { low: 0.1, medium: 0.35, high: 0.6, xhigh: 0.8, max: 1 };
28export const CONFIRM_TIME = 1.4;
29export const CELEBRATE_TIME = 1.8;
30export const TRIP_TIME = 0.9;
31
32export const WAVE = ["▁", "▂", "▃", "▄", "▅", "▆", "▇", "█"].map(cp);
33export const SPARK_MAIN = ["⠂", "⠒", "⠖", "⠶"].map(cp);
34export const SPARK_SUB = ["⠁", "⠂"].map(cp);
35export const INK = ["⠁", "⠃", "⠇", "⠏", "⠟", "⠿"].map(cp);
36export const PULSE_HEAD = cp("━");
37export const PULSE_TRAIL = cp("─");
38export const HORIZON = cp("▁");
39export const UPPER = cp("▀");
40export const LOWER = cp("▄");
41// Quadrant glyphs by bits: 1 upper left, 2 upper right, 4 lower left, 8 lower right.
42export const QUAD = [" ", "▘", "▝", "▀", "▖", "▌", "▞", "▛", "▗", "▚", "▐", "▜", "▄", "▙", "▟", "█"].map(cp);
43
44export function cp(c) {
45  return c.codePointAt(0);
46}
47
48export class Frame {
49  constructor(columns, rows, look) {
50    this.columns = columns;
51    this.rows = rows;
52    this.W = columns;
53    this.H = rows * 2;
54    this.pal = look.palette;
55    this.k = look.intensity;
56    const n = columns * rows;
57    this.glyph = new Uint32Array(n);
58    this.fg = new Uint32Array(n).fill(DEFAULT_COLOR);
59    this.bg = new Uint32Array(n).fill(DEFAULT_COLOR);
60    this.px = new Int32Array(this.W * this.H).fill(-1);
61    this.quad = new Uint8Array(n);
62    this.quadColor = new Uint32Array(n);
63  }
64
65  // A half-block pixel (W x 2*rows grid); -1 leaves the terminal's background.
66  dot(x, y, color) {
67    x = Math.round(x);
68    y = Math.round(y);
69    if (x < 0 || y < 0 || x >= this.W || y >= this.H) return;
70    this.px[y * this.W + x] = color;
71  }
72
73  // Adds light to a pixel, over the background color.
74  glow(x, y, color, amount) {
75    x = Math.round(x);
76    y = Math.round(y);
77    if (x < 0 || y < 0 || x >= this.W || y >= this.H || amount <= 0.02) return;
78    const i = y * this.W + x;
79    const under = this.px[i] < 0 ? this.pal.bg : this.px[i];
80    this.px[i] = add(under, color, amount);
81  }
82
83  // Blends a pixel toward a color, over the background color when empty.
84  tint(x, y, color, amount) {
85    x = Math.round(x);
86    y = Math.round(y);
87    if (x < 0 || y < 0 || x >= this.W || y >= this.H || amount <= 0.02) return;
88    const i = y * this.W + x;
89    this.px[i] = mix(this.px[i] < 0 ? this.pal.bg : this.px[i], color, amount);
90  }
91
92  getPx(x, y) {
93    if (x < 0 || y < 0 || x >= this.W || y >= this.H) return 0;
94    return this.px[y * this.W + x];
95  }
96
97  // A quadrant pixel (2W x 2*rows grid), one color per cell.
98  q(x, y, color) {
99    x = Math.round(x);
100    y = Math.round(y);
101    if (x < 0 || y < 0 || x >= this.W * 2 || y >= this.H) return;
102    const i = (y >> 1) * this.columns + (x >> 1);
103    this.quad[i] |= 1 << ((y & 1) * 2 + (x & 1));
104    this.quadColor[i] = color;
105  }
106
107  // A whole cell's glyph; wins over pixels.
108  cell(cx, cy, glyph, fg, bg) {
109    cx = Math.round(cx);
110    cy = Math.round(cy);
111    if (cx < 0 || cy < 0 || cx >= this.columns || cy >= this.rows) return;
112    const i = cy * this.columns + cx;
113    this.glyph[i] = glyph;
114    this.fg[i] = fg;
115    if (bg !== undefined) this.bg[i] = bg;
116  }
117
118  hasCell(cx, cy) {
119    return this.glyph[cy * this.columns + cx] !== 0 || this.quad[cy * this.columns + cx] !== 0;
120  }
121
122  resolve() {
123    const { columns, rows } = this;
124    for (let cy = 0; cy < rows; cy += 1) {
125      for (let cx = 0; cx < columns; cx += 1) {
126        const i = cy * columns + cx;
127        const top = this.px[cy * 2 * this.W + cx];
128        const bottom = this.px[(cy * 2 + 1) * this.W + cx];
129        if (this.glyph[i] !== 0) {
130          if (this.bg[i] === DEFAULT_COLOR && (top >= 0 || bottom >= 0)) this.bg[i] = quantize(top >= 0 ? top : bottom);
131          continue;
132        }
133        if (this.quad[i] !== 0) {
134          this.glyph[i] = QUAD[this.quad[i]];
135          this.fg[i] = this.quadColor[i];
136          continue;
137        }
138        if (top < 0 && bottom < 0) {
139          this.glyph[i] = BLANK;
140        } else if (bottom < 0) {
141          this.glyph[i] = UPPER;
142          this.fg[i] = quantize(top);
143        } else if (top < 0) {
144          this.glyph[i] = LOWER;
145          this.fg[i] = quantize(bottom);
146        } else {
147          this.glyph[i] = UPPER;
148          this.fg[i] = quantize(top);
149          this.bg[i] = quantize(bottom);
150        }
151      }
152    }
153    return { columns, rows, glyph: this.glyph, fg: this.fg, bg: this.bg };
154  }
155}
156
157export function flareBackground(s, f) {
158  if (s.flare <= 0) return;
159  const spread = 0.12 + (1 - s.flare) * 0.5;
160  for (let x = 0; x < f.columns; x += 1) {
161    const d = ((x + 0.5) / f.columns - s.flareX) / spread;
162    const a = s.flare * Math.exp(-d * d) * 0.6;
163    if (a < 0.03) continue;
164    for (let r = 0; r < f.rows; r += 1) {
165      const i = r * f.columns + x;
166      f.bg[i] = mix(f.pal.bg, f.pal.bad, a);
167    }
168  }
169}
170
171
172export function horizonLine(s, f, color) {
173  if (s.horizon === null) return;
174  const fillTo = Math.round(s.horizon * f.W);
175  const y = f.H - 1;
176  for (let x = 0; x < fillTo; x += 1) if (f.getPx(x, y) < 0) f.dot(x, y, mix(f.pal.bg, color, 0.28));
177}
178
179// ---- Helpers -----------------------------------------------------------------------
180
181export function line(x0, y0, x1, y1, plot) {
182  const n = Math.max(1, Math.ceil(Math.max(Math.abs(x1 - x0), Math.abs(y1 - y0))));
183  for (let i = 0; i <= n; i += 1) plot(x0 + ((x1 - x0) * i) / n, y0 + ((y1 - y0) * i) / n);
184}
185
186export function modeColor(s, pal) {
187  let c = s.mode === "thinking" ? pal.b : pal.a;
188  if (s.lean) c = mix(c, pal[s.lean], 0.2);
189  return mix(c, pal.fg, s.tint * 0.3);
190}
191
192export function mix(c1, c2, f) {
193  const k = clamp01(f);
194  const r = ((c1 >> 16) & 255) + (((c2 >> 16) & 255) - ((c1 >> 16) & 255)) * k;
195  const g = ((c1 >> 8) & 255) + (((c2 >> 8) & 255) - ((c1 >> 8) & 255)) * k;
196  const b = (c1 & 255) + ((c2 & 255) - (c1 & 255)) * k;
197  return (Math.round(r) << 16) | (Math.round(g) << 8) | Math.round(b);
198}
199
200export function add(c1, c2, f) {
201  const k = clamp01(f);
202  const r = Math.min(255, ((c1 >> 16) & 255) + ((c2 >> 16) & 255) * k);
203  const g = Math.min(255, ((c1 >> 8) & 255) + ((c2 >> 8) & 255) * k);
204  const b = Math.min(255, (c1 & 255) + (c2 & 255) * k);
205  return (Math.round(r) << 16) | (Math.round(g) << 8) | Math.round(b);
206}
207
208// Fewer distinct colors keeps the terminal's color pairs in budget.
209export function quantize(c) {
210  return c & 0xf8f8f8;
211}
212
213export function hash(n) {
214  const x = Math.sin(n * 127.1 + 311.7) * 43758.5453;
215  return x - Math.floor(x);
216}
217
218export function clamp01(v) {
219  return Math.max(0, Math.min(1, v));
220}
221
222export function clampInt(v, lo, hi) {
223  return Math.max(lo, Math.min(hi, v));
224}
225
226export const B64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
227
228export function toBase64(bytes) {
229  if (typeof bytes.toBase64 === "function") return bytes.toBase64();
230  let out = "";
231  let i = 0;
232  for (; i + 2 < bytes.length; i += 3) {
233    const v = (bytes[i] << 16) | (bytes[i + 1] << 8) | bytes[i + 2];
234    out += B64[(v >> 18) & 63] + B64[(v >> 12) & 63] + B64[(v >> 6) & 63] + B64[v & 63];
235  }
236  const rest = bytes.length - i;
237  if (rest === 1) {
238    const v = bytes[i] << 16;
239    out += B64[(v >> 18) & 63] + B64[(v >> 12) & 63] + "==";
240  } else if (rest === 2) {
241    const v = (bytes[i] << 16) | (bytes[i + 1] << 8);
242    out += B64[(v >> 18) & 63] + B64[(v >> 12) & 63] + B64[(v >> 6) & 63] + "=";
243  }
244  return out;
245}
246

1// aurora: curtains of light drifting over a sparse starfield.
2
3import {
4  B64,
5  BLANK,
6  CELEBRATE_TIME,
7  CLAWD,
8  CLAWD_KID,
9  CONFIRM_TIME,
10  DEFAULT_COLOR,
11  EFFORT,
12  FALLBACK,
13  Frame,
14  HORIZON,
15  INK,
16  INTENSITY,
17  LOWER,
18  MESH,
19  PALETTES,
20  PULSE_HEAD,
21  PULSE_TRAIL,
22  QUAD,
23  SPARK_MAIN,
24  SPARK_SUB,
25  TRIP_TIME,
26  UPPER,
27  WAVE,
28  add,
29  clamp01,
30  clampInt,
31  cp,
32  flareBackground,
33  hash,
34  horizonLine,
35  line,
36  mix,
37  modeColor,
38  quantize,
39  toBase64,
40} from "../lib.mjs";
41
42
43export function drawAurora(s, f) {
44  const { W, H, pal, k } = f;
45  const live = 0.22 + 0.78 * s.glow;
46  const energy = Math.max(s.flow, s.flowSub * 0.6);
47  const t = s.at;
48  // Bottom edge, body, crown: green to cyan to violet; thinking shifts it all toward violet.
49  const thinking = s.mode === "thinking";
50  const edgeC = mix(thinking ? pal.b : pal.a, pal.fg, 0.15 + s.tint * 0.15);
51  const bodyC = thinking ? mix(pal.b, pal.bad, 0.35) : pal.c ?? pal.a;
52  const crownC = thinking ? mix(pal.b, pal.bg, 0.2) : pal.b;
53  const lit = new Float32Array(W * H);
54  const rise = new Float32Array(W * H); // how far above the lower edge the light mostly is, 0..1
55
56  // Two curtains, each a drifting patch with a wavy lower edge and light fading upward.
57  for (let r = 0; r < 2; r += 1) {
58    const ph = r * 2.7;
59    for (let x = 0; x < W; x += 1) {
60      const u = x / W;
61      const patch = Math.max(0, Math.sin(u * (2.2 + r * 0.9) * Math.PI - t * (0.12 + 0.05 * r) + ph));
62      const reach = patch * patch;
63      if (reach < 0.02) continue;
64      const ray = 0.72 + 0.28 * Math.sin(u * (47 + 13 * r) + 2.2 * Math.sin(u * 7 + t * 0.4 + ph) + t * 0.8);
65      const edge = (H - 1) * (0.78 - 0.12 * r + 0.14 * Math.sin(u * 6.5 + t * 0.35 + ph));
66      const fall = H * (0.42 + 0.3 * energy + 0.08 * r);
67      for (let y = 0; y < H; y += 1) {
68        const above = edge - y;
69        const a = above >= 0 ? Math.exp(-above / fall) : Math.exp(-((above / 0.7) ** 2));
70        const i = y * W + x;
71        const add = a * reach * ray * (r === 0 ? 1 : 0.8);
72        if (add > 0) rise[i] = (rise[i] * lit[i] + clamp01(above / (fall * 2)) * add) / (lit[i] + add);
73        lit[i] = 1 - (1 - lit[i]) * (1 - add);
74      }
75    }
76  }
77
78  // Sparse twinkling stars, only where the sky is dark.
79  const stars = Math.max(3, Math.round((W * H) / 70));
80  for (let i = 0; i < stars; i += 1) {
81    const x = Math.floor(hash(i * 2.3) * W);
82    const y = Math.floor(hash(i * 4.1) * H);
83    const tw = 0.5 + 0.5 * Math.sin(s.t * (1.5 + hash(i) * 3) + i * 1.7);
84    if (lit[y * W + x] < 0.15) f.dot(x, y, mix(pal.bg, pal.fg, (0.2 + 0.55 * tw * tw) * (0.5 + 0.5 * live) * k));
85  }
86
87  for (let y = 0; y < H; y += 1) {
88    for (let x = 0; x < W; x += 1) {
89      const h = rise[y * W + x];
90      const ramp = h < 0.35 ? mix(edgeC, bodyC, h / 0.35) : mix(bodyC, crownC, (h - 0.35) / 0.65);
91      const l = lit[y * W + x];
92      const a = Math.min(1, l * live * (1.15 + 0.5 * energy) * (0.8 + 0.3 * k));
93      if (a > 0.07) f.dot(x, y, mix(pal.bg, l > 0.85 ? mix(ramp, pal.fg, (l - 0.85) * 2) : ramp, a));
94    }
95  }
96
97  // A tool call is a soft pillar of light gliding across; a failure, a red one.
98  for (const sh of s.shocks) {
99    const color = sh.color === "bad" ? pal.bad : pal.warn;
100    const cx = sh.x * W;
101    for (let x = Math.floor(cx - 6); x <= cx + 6; x += 1) {
102      const d = (x - cx) / 2.4;
103      const a = Math.exp(-d * d) * sh.life * (0.55 + 0.35 * k);
104      if (a < 0.04) continue;
105      for (let y = 0; y < H; y += 1) {
106        const height = H === 1 ? 1 : y / (H - 1);
107        f.tint(x, y, color, a * (0.35 + 0.65 * height));
108      }
109    }
110  }
111  if (s.flare > 0) for (let x = 0; x < W; x += 1) for (let y = 0; y < H; y += 1) if (f.getPx(x, y) >= 0) f.tint(x, y, pal.bad, s.flare * 0.25);
112
113  horizonLine(s, f, pal.fg);
114}
115
116

1// critter: a small orange creature acting out the work.
2
3import {
4  B64,
5  BLANK,
6  CELEBRATE_TIME,
7  CLAWD,
8  CLAWD_KID,
9  CONFIRM_TIME,
10  DEFAULT_COLOR,
11  EFFORT,
12  FALLBACK,
13  Frame,
14  HORIZON,
15  INK,
16  INTENSITY,
17  LOWER,
18  MESH,
19  PALETTES,
20  PULSE_HEAD,
21  PULSE_TRAIL,
22  QUAD,
23  SPARK_MAIN,
24  SPARK_SUB,
25  TRIP_TIME,
26  UPPER,
27  WAVE,
28  add,
29  clamp01,
30  clampInt,
31  cp,
32  flareBackground,
33  hash,
34  horizonLine,
35  line,
36  mix,
37  modeColor,
38  quantize,
39  toBase64,
40} from "../lib.mjs";
41
42
43// Quadrant pixels, 17 wide: the startup logo's creature.
44const BODY = [
45  "...############..",
46  "...##.######.##..",
47  ".################",
48  "...############..",
49];
50const LEGS = ["....#.#....#.#...", "...#.#......#.#.."];
51
52export function critterPose(s) {
53  if (s.trip > 0) return "trip";
54  if (s.celebrate > 0) return "celebrate";
55  if ([...s.tools].some((t) => !t.sub)) return "hammer";
56  if ([...s.steps].some((t) => !t.sub) || s.linger > 0) return s.mode === "thinking" ? "think" : "walk";
57  if (s.glow > 0) return "stand";
58  return "nap";
59}
60
61export function drawCritter(s, f) {
62  const { W, H, k, pal } = f;
63  const QW = W * 2;
64  const pose = critterPose(s);
65  const frame = Math.floor(s.walk) % 2;
66  const dir = s.dir;
67  // Snap to whole cells so the eyes line up with the logo's.
68  let ox = Math.round((s.cx * (QW - 18)) / 2) * 2;
69  let oy = H - 5;
70  const body = BODY.map((r) => r.split(""));
71  let legs = LEGS[0];
72  let lean = 0;
73
74  if (pose === "walk") {
75    legs = LEGS[frame];
76  } else if (pose === "celebrate") {
77    oy -= frame;
78    body[2][1] = body[2][2] = body[2][15] = body[2][16] = ".";
79  } else if (pose === "think") {
80    body[2][15] = body[2][16] = ".";
81  } else if (pose === "hammer") {
82    body[2][16] = frame ? "#" : ".";
83  } else if (pose === "trip") {
84    ox += frame ? 1 : -1;
85    lean = 1;
86  } else if (pose === "nap") {
87    oy += 1;
88    body[1][5] = body[1][12] = "#";
89    legs = null;
90  }
91  const flip = (x) => (dir >= 0 ? x : 16 - x);
92  const color = pose === "nap" ? mix(pal.bg, CLAWD, 0.75 + 0.15 * k) : mix(pal.bg, CLAWD, 0.85 + 0.15 * k);
93
94  body.forEach((row, y) => row.forEach((c, x) => c === "#" && f.q(ox + flip(x) + (y < 2 ? lean : 0), oy + y, color)));
95  if (legs) legs.split("").forEach((c, x) => c === "#" && f.q(ox + flip(x), oy + 4, color));
96
97  const cellX = (qx) => Math.floor((ox + flip(qx)) / 2);
98  const topRow = Math.floor(oy / 2);
99  const aboveRow = topRow - 1 >= 0 ? topRow - 1 : null;
100  const side = (n) => cellX(dir >= 0 ? 17 + n * 2 : -1 - n * 2);
101  const accent = (c, a) => mix(pal.bg, c, a * k + (1 - k) * 0.4);
102
103  if (pose === "celebrate") {
104    // Arms up and confetti.
105    for (const [x, y] of [[1, 1], [2, 0], [15, 0], [16, 1]]) f.q(ox + flip(x), oy + y, color);
106    const bits = ["*", "+", ".", "*"].map(cp);
107    const colors = [pal.a, pal.b, pal.warn, pal.c ?? pal.a];
108    for (let j = 0; j < 6; j += 1) {
109      const cx = cellX(0) - 2 + Math.floor(hash(j * 3.3 + Math.floor(s.t * 5)) * 13);
110      const cy = Math.floor(hash(j * 7.7 + Math.floor(s.t * 5)) * Math.max(1, topRow + 1));
111      if (!f.hasCell(cx, cy)) f.cell(cx, cy, bits[j % 4], accent(colors[j % 4], 1));
112    }
113  } else if (pose === "think") {
114    // A hand scratching the head, and a question.
115    const up = frame ? [[15, 1], [16, 0]] : [[16, 1], [16, 0]];
116    for (const [x, y] of up) f.q(ox + flip(x), oy + y, color);
117    const qx = side(1);
118    const qy = aboveRow ?? topRow;
119    f.cell(qx, qy, cp("?"), accent(pal.b, 1));
120    if (aboveRow !== null) f.cell(dir >= 0 ? qx - 1 : qx + 1, topRow, cp("o"), accent(pal.b, 0.6));
121  } else if (pose === "hammer") {
122    // A hammer in the forward hand, sparks on the strike.
123    const steel = accent(pal.fg, 0.8);
124    const pts = frame
125      ? [[18, 2], [19, 2], [20, 2], [21, 1], [21, 2], [21, 3], [22, 1], [22, 2], [22, 3]]
126      : [[18, 1], [18, 0], [19, -1], [20, -1], [19, 0], [20, 0], [21, -1], [21, 0]];
127    for (const [x, y] of pts) f.q(ox + flip(x), oy + y, steel);
128    if (frame) {
129      const sx = side(3);
130      f.cell(sx, Math.floor((oy + 4) / 2), cp("*"), accent(pal.warn, 1));
131      f.cell(sx + dir, Math.floor((oy + 2) / 2), cp("+"), accent(pal.warn, 0.7));
132    }
133  } else if (pose === "trip") {
134    f.cell(side(1), aboveRow ?? topRow, cp("!"), accent(pal.bad, 1));
135    f.cell(side(2), Math.floor((oy + 4) / 2), cp("*"), accent(pal.bad, 0.9));
136    f.cell(cellX(0) - dir * 2, Math.floor((oy + 4) / 2), cp("*"), accent(pal.warn, 0.8));
137  } else if (pose === "nap") {
138    const zx = side(0);
139    f.cell(zx, topRow, cp("z"), accent(pal.b, 0.55));
140    f.cell(zx + dir, aboveRow ?? topRow, cp("Z"), accent(pal.b, 0.75));
141  }
142
143  // Ink: what it writes floats off behind it.
144  for (const p of s.ink) {
145    const cx = Math.floor(p.x * W);
146    const cy = Math.floor(p.y * Math.max(1, f.rows - 1));
147    if (cx >= 0 && cx < W && !f.hasCell(cx, cy)) f.cell(cx, cy, INK[Math.min(INK.length - 1, Math.floor(p.life * INK.length))], mix(pal.bg, pal.a, (0.3 + 0.7 * p.life) * k));
148  }
149
150  // A small companion trots along while subagents work.
151  if (s.flowSub > 0.04 || [...s.steps].some((t) => t.sub)) {
152    const kid = ["######", "#.##.#", frame ? ".#..#." : "#....#"];
153    const kx = ox - dir * 12 + (dir >= 0 ? 0 : 10);
154    kid.forEach((row, y) => row.split("").forEach((c, x) => c === "#" && f.q(kx + x, H - 3 + y, mix(pal.bg, CLAWD_KID, 0.9 * k + 0.1))));
155  }
156
157  // The ground: context fill along the bottom row.
158  if (s.horizon !== null) {
159    const fillTo = Math.round(s.horizon * W);
160    for (let x = 0; x < fillTo; x += 1) if (!f.hasCell(x, f.rows - 1)) f.cell(x, f.rows - 1, HORIZON, mix(pal.bg, pal.fg, 0.2));
161  }
162  flareBackground(s, f);
163}
164
165

1// lava: slow liquid blobs of colour, like a lava lamp laid on its side. They speed
2// up and merge with the stream, a tool call bubbles a new blob up from below.
3
4import { CONFIRM_TIME, clamp01, mix } from "../lib.mjs";
5
6function blobs(s) {
7  if (!s.lava) {
8    s.lava = Array.from({ length: 6 }, (_, i) => ({
9      x: (i + 0.5) / 6 + (Math.random() - 0.5) * 0.08,
10      y: Math.random(),
11      r: 0.55 + Math.random() * 0.4,
12      fx: 0.05 + Math.random() * 0.08,
13      fy: 0.25 + Math.random() * 0.3,
14      ph: Math.random() * 6.28,
15      life: Infinity,
16    }));
17    s.lavaT = 0;
18  }
19  return s.lava;
20}
21
22export function stepLava(s, dt) {
23  const list = blobs(s);
24  s.lavaT += dt * (0.25 + 1.6 * Math.max(s.flow, s.flowSub * 0.6) + (s.tools.size ? 0.3 : 0)) * s.glow;
25  for (const b of s.bursts) {
26    if (b.lava) continue;
27    b.lava = true;
28    list.push({ x: 0.1 + Math.random() * 0.8, y: 1.3, r: 0.45, fx: 0.02, fy: 0, ph: 0, life: 2.5, rise: true, color: b.color });
29  }
30  for (const b of list) {
31    if (b.rise) {
32      b.y -= dt * 0.9;
33      b.life -= dt;
34    }
35  }
36  s.lava = list.filter((b) => b.life > 0);
37}
38
39export function lavaSettled(s) {
40  return !s.lava || s.lava.every((b) => !b.rise);
41}
42
43export function drawLava(s, f) {
44  const { W, H, pal, k } = f;
45  const list = blobs(s);
46  const live = 0.45 + 0.55 * s.glow;
47  const t = s.lavaT;
48  const think = s.mode === "thinking";
49  const fresh = s.confirmAge < CONFIRM_TIME ? 1 - s.confirmAge / CONFIRM_TIME : 0;
50  // Rim, body and core: deep magenta to orange to gold while writing; violet to cyan while thinking.
51  const rim = mix(think ? pal.b : mix(pal.bad, pal.b, 0.35), pal.bg, 0.35);
52  const body = think ? pal.b : mix(pal.warn, pal.bad, 0.55);
53  const core = think ? mix(pal.c ?? pal.a, pal.fg, 0.15) : mix(pal.warn, 0xffe7a3, 0.5);
54  const placed = list.map((b) => ({
55    x: (b.rise ? b.x : b.x + 0.06 * Math.sin(t * b.fx * 6 + b.ph)) * W,
56    y: (b.rise ? b.y : 0.5 + 0.5 * Math.sin(t * b.fy + b.ph)) * H,
57    // Reach of the blob's pull, in rows; columns count 2.2 to a row.
58    reach: Math.max(1.6, b.r * H * 0.62) * (0.9 + 0.12 * Math.sin(t * 0.7 + b.ph)),
59    tool: Boolean(b.color),
60  }));
61  for (let y = 0; y < H; y += 1) {
62    for (let x = 0; x < W; x += 1) {
63      let field = 0;
64      let tool = 0;
65      for (const b of placed) {
66        const dx = (x - b.x) / 2.2;
67        const dy = y + 0.5 - b.y;
68        const q = 1 - (dx * dx + dy * dy) / (b.reach * b.reach);
69        if (q <= 0) continue;
70        const v = q * q;
71        field += v;
72        if (b.tool) tool += v;
73      }
74      if (field < 0.08) continue;
75      let color;
76      let a;
77      if (field < 0.3) {
78        // Warm light spilling just outside a blob.
79        color = rim;
80        a = (field - 0.08) * 0.9;
81      } else {
82        const inside = clamp01((field - 0.3) / 0.2);
83        const depth = clamp01((field - 0.45) / 0.35);
84        color = depth > 0 ? mix(body, core, depth) : mix(rim, body, inside);
85        a = 0.55 + 0.4 * inside;
86      }
87      if (tool > 0.1) color = mix(color, pal.warn, clamp01(tool / field));
88      if (s.flare > 0) color = mix(color, pal.bad, s.flare * 0.8);
89      a = clamp01(a * live * (0.8 + 0.25 * k) + fresh * 0.3 * clamp01(field));
90      if (a > 0.05) f.dot(x, y, mix(pal.bg, color, a));
91    }
92  }
93}
94

1// murmuration: a flock of starlings swirling over a sunset; they gather with the
2// stream, circle while thinking, scatter on tool calls and roost when done.
3
4import { CONFIRM_TIME, clamp01, mix } from "../lib.mjs";
5
6const SKY_LOW = 0xff8a5c;
7const SKY_MID = 0xd2557a;
8const SKY_TOP = 0x4a2a6e;
9const BIRD = 0x0d0a14;
10
11function flock(s, W, H) {
12  const n = Math.max(50, Math.min(160, Math.round((W * H) / 9)));
13  if (!s.boids || s.boids.n !== n) {
14    // A loose ribbon of specks across the middle of the strip, one bird to a spot.
15    const birds = Array.from({ length: n }, (_, i) => {
16      const u = (i + Math.random()) / n;
17      return {
18        x: W * (0.12 + 0.76 * u),
19        y: H * (0.5 + 0.22 * Math.sin(u * 9.4) + (Math.random() - 0.5) * 0.3),
20        vx: 2 + Math.random(),
21        vy: (Math.random() - 0.5) * 0.5,
22      };
23    });
24    s.boids = { n, birds, W, H };
25  }
26  if (s.boids.W !== W || s.boids.H !== H) {
27    for (const b of s.boids.birds) {
28      b.x *= W / s.boids.W;
29      b.y *= H / s.boids.H;
30    }
31    s.boids.W = W;
32    s.boids.H = H;
33  }
34  return s.boids;
35}
36
37export function stepMurmuration(s, dt) {
38  if (!s.boids) return;
39  const { birds, W, H } = s.boids;
40  const energy = Math.max(s.flow, s.flowSub * 0.6);
41  const pace = s.glow;
42  if (pace <= 0) return;
43  const t = s.t;
44  const think = s.mode === "thinking" && s.tools.size === 0;
45  const done = s.confirmAge < CONFIRM_TIME || (!s.steps.size && !s.tools.size);
46  // Where the flock is drawn: a wandering point, a roost once the turn is over.
47  // A figure of eight across the whole strip; once the turn is over, a lazy drift.
48  const ax = W * (0.5 + 0.42 * Math.sin(t * (done ? 0.08 : 0.21)));
49  const ay = H * (0.5 + 0.25 * Math.sin(t * (done ? 0.16 : 0.42)));
50  const vmax = (done ? 4 : 7 + 22 * energy + (think ? 6 : 0)) * pace;
51
52  // Tool calls: scatter the birds away from a point.
53  for (const b of s.bursts) {
54    if (b.flock) continue;
55    b.flock = true;
56    const px = W * (0.2 + Math.random() * 0.6);
57    const py = H * 0.5;
58    for (const bird of birds) {
59      const dx = bird.x - px;
60      const dy = (bird.y - py) * 2;
61      const d = Math.hypot(dx, dy) + 0.5;
62      if (d < W * 0.25) {
63        bird.vx += (dx / d) * 30;
64        bird.vy += (dy / d) * 8;
65      }
66    }
67  }
68
69  for (let i = 0; i < birds.length; i += 1) {
70    const b = birds[i];
71    let cx = 0;
72    let cy = 0;
73    let avx = 0;
74    let avy = 0;
75    let sx = 0;
76    let sy = 0;
77    let n = 0;
78    for (let j = 0; j < birds.length; j += 1) {
79      if (i === j) continue;
80      const o = birds[j];
81      const dx = o.x - b.x;
82      const dy = (o.y - b.y) * 2;
83      const d2 = dx * dx + dy * dy;
84      if (d2 > 160) continue;
85      n += 1;
86      cx += o.x;
87      cy += o.y;
88      avx += o.vx;
89      avy += o.vy;
90      if (d2 < 14) {
91        sx -= dx;
92        sy -= dy / 2;
93      }
94    }
95    if (n) {
96      b.vx += ((cx / n - b.x) * 0.25 + (avx / n - b.vx) * 1.2) * dt;
97      b.vy += ((cy / n - b.y) * 0.25 + (avy / n - b.vy) * 1.2) * dt;
98    }
99    b.vx += sx * 6 * dt + (ax - b.x) * 0.12 * dt;
100    b.vy += sy * 4 * dt + (ay - b.y) * 0.7 * dt;
101    // A slow swirl about the gathering point keeps the flock rolling.
102    b.vx += -(b.y - ay) * 0.9 * dt;
103    b.vy += ((b.x - ax) / W) * H * 0.5 * dt;
104    if (think) {
105      // Circling: a swirl around the gathering point.
106      b.vx += -(b.y - ay) * 2.2 * dt;
107      b.vy += ((b.x - ax) / W) * H * 1.6 * dt;
108    }
109    // Soft walls: turn back well before the edges of the strip.
110    if (b.y < 1.5) b.vy += 18 * dt;
111    if (b.y > H - 2.5) b.vy -= 18 * dt;
112    if (b.x < 2) b.vx += 12 * dt;
113    if (b.x > W - 3) b.vx -= 12 * dt;
114    const sp = Math.hypot(b.vx, b.vy * 2);
115    if (sp > vmax) {
116      b.vx *= vmax / sp;
117      b.vy *= vmax / sp;
118    }
119    b.x += b.vx * dt;
120    b.y += b.vy * dt;
121    if (b.x < 0 || b.x > W - 1) {
122      b.x = Math.max(0, Math.min(W - 1, b.x));
123      b.vx = -b.vx * 0.5;
124    }
125    if (b.y < 0 || b.y > H - 1) {
126      b.y = Math.max(0, Math.min(H - 1, b.y));
127      b.vy = -b.vy * 0.5;
128    }
129  }
130}
131
132export function drawMurmuration(s, f) {
133  const { W, H, pal, k } = f;
134  const live = 0.6 + 0.4 * s.glow;
135  const { birds } = flock(s, W, H);
136  const fresh = s.confirmAge < CONFIRM_TIME ? 1 - s.confirmAge / CONFIRM_TIME : 0;
137  const think = s.mode === "thinking";
138
139  // A sunset: warm low, violet high; it warms further when a turn completes.
140  const sky = (y) => {
141    const t = H === 1 ? 0.5 : y / (H - 1);
142    const low = think ? mix(SKY_MID, pal.b, 0.5) : SKY_LOW;
143    return t > 0.55 ? mix(SKY_MID, low, (t - 0.55) / 0.45) : mix(SKY_TOP, SKY_MID, t / 0.55);
144  };
145  for (let y = 0; y < H; y += 1) {
146    const color = s.flare > 0 ? mix(sky(y), pal.bad, s.flare * 0.7) : sky(y);
147    const a = (0.62 + 0.3 * (y / H) + 0.1 * fresh) * live * (0.85 + 0.2 * k);
148    for (let x = 0; x < W; x += 1) {
149      const sun = Math.exp(-(((x - W * 0.82) / (W * 0.12)) ** 2) - (((y - H) / (H * 0.6)) ** 2));
150      f.dot(x, y, mix(pal.bg, mix(color, 0xffd27a, sun * 0.6), clamp01(a + sun * 0.25)));
151    }
152  }
153
154  // The birds: dark points; denser spots read darker.
155  for (const b of birds) {
156    const x = Math.round(b.x);
157    const y = Math.round(b.y);
158    if (x < 0 || y < 0 || x >= W || y >= H) continue;
159    // One speck per bird, dark against the sky.
160    f.dot(x, y, mix(sky(y), BIRD, 0.88));
161  }
162}
163

1// network: a mesh of nodes in three layers of depth, requests flying between them
2// as comets, and a block chain that locks in a block when a turn completes.
3
4import { CONFIRM_TIME, MESH, clamp01, clampInt, cp, hash, line, mix } from "../lib.mjs";
5
6const LINK_H = cp("─");
7const LINK_UP = cp("╱");
8const LINK_DOWN = cp("╲");
9const LINK_DOT = cp("┄");
10const NODE = cp("◆");
11const HEAD = cp("•");
12const BLOCK = [cp("▐"), cp("█"), cp("▌")];
13
14// ---- Layout -------------------------------------------------------------------------
15
16export function layoutFor(s, columns, rows) {
17  if (s.layout && s.layout.columns === columns && s.layout.rows === rows) return s.layout;
18  const chainW = Math.max(10, Math.round(columns * 0.2));
19  const meshW = Math.max(8, columns - chainW - 3);
20  const count = clampInt(Math.round(meshW / 12), 3, 9);
21  const spacing = meshW / count;
22  const nodes = [];
23  for (let i = 0; i < count; i += 1) {
24    const x = Math.round((i + 0.5) * spacing + (hash(i * 7.1) - 0.5) * spacing * 0.35);
25    let y = rows === 1 ? 0 : Math.round(hash(i * 3.7 + 1) * (rows - 1));
26    if (i > 0 && rows > 1 && y === nodes[i - 1].y && hash(i * 1.3) > 0.35) y = y === 0 ? 1 : y - 1;
27    nodes.push({ x, y, phase: hash(i * 5.3) * 6.28 });
28  }
29  const chainRow = rows === 1 ? 0 : Math.floor((rows - 1) / 2);
30  const chainX = columns - chainW;
31  const edges = [];
32  for (let i = 0; i + 1 < count; i += 1) edges.push({ a: i, b: i + 1, cells: linkPath(nodes[i], nodes[i + 1], LINK_H) });
33  const last = nodes[count - 1];
34  const chainLink = { a: count - 1, b: -1, cells: linkPath(last, { x: chainX - 1, y: chainRow }, LINK_DOT).concat([{ x: chainX - 1, y: chainRow, g: LINK_DOT }]) };
35  // Depth: two layers of small pixel nodes behind the mesh.
36  const H = rows * 2;
37  const layer = (n, seed) => Array.from({ length: n }, (_, i) => ({ x: hash(i * 2.9 + seed) * meshW, y: hash(i * 6.1 + seed) * (H - 1), tw: hash(i * 1.1 + seed) * 6.28 }));
38  const far = layer(Math.round(meshW / 5), 11);
39  const mid = layer(Math.round(meshW / 9), 37);
40  s.layout = { columns, rows, nodes, edges, chainLink, chainX, chainW, chainRow, meshW, far, mid };
41  return s.layout;
42}
43
44// The cells between two nodes: flat runs with the row changes in the middle.
45function linkPath(a, b, flat) {
46  const cells = [];
47  const n = b.x - a.x - 1;
48  const dy = b.y - a.y;
49  const steps = Math.min(Math.abs(dy), Math.max(0, n));
50  const first = a.x + 1 + Math.floor((n - steps) / 2);
51  let y = a.y;
52  for (let x = a.x + 1; x < b.x; x += 1) {
53    if (x >= first && x < first + steps) {
54      cells.push({ x, y, g: dy > 0 ? LINK_DOWN : LINK_UP });
55      y += Math.sign(dy);
56    } else {
57      cells.push({ x, y, g: flat });
58    }
59  }
60  return cells;
61}
62
63// ---- Requests -----------------------------------------------------------------------
64
65// A request along a link: any link, one out of a node, or into the chain.
66export function packet(s, color, speed, fromNode, toChain) {
67  if (toChain) return { e: -1, rev: false, p: 0, speed, color };
68  const lay = s.layout;
69  if (fromNode !== undefined && lay) {
70    const mine = lay.edges.map((e, i) => [e, i]).filter(([e]) => e.a === fromNode || e.b === fromNode);
71    if (mine.length) {
72      const [e, i] = mine[Math.floor(Math.random() * mine.length)];
73      return { e: i, rev: e.b === fromNode, p: 0, speed, color };
74    }
75  }
76  return { e: Math.floor(Math.random() * 64), rev: Math.random() < 0.5, p: 0, speed, color };
77}
78
79export function stepNetwork(s, dt) {
80  const lay = s.layout;
81  s.netDrift += dt * (0.4 + 2.2 * Math.max(s.flow, s.flowSub)) * s.glow;
82  for (const [key, lit] of s.netLit) {
83    lit.v -= dt / 0.7;
84    if (lit.v <= 0) s.netLit.delete(key);
85  }
86  for (const p of s.packets) {
87    if (p.p < 0 || !lay) continue;
88    const key = p.e < 0 ? -1 : p.e % lay.edges.length;
89    const lit = s.netLit.get(key) ?? { v: 0, color: p.color };
90    lit.v = Math.min(1, lit.v + dt * 3);
91    lit.color = p.color;
92    s.netLit.set(key, lit);
93    if (p.p + p.speed * dt >= 1) {
94      const edge = p.e < 0 ? lay.chainLink : lay.edges[key];
95      s.arrivals.push({ node: p.e < 0 ? -1 : p.rev ? edge.a : edge.b, age: 0, color: p.color });
96    }
97  }
98  for (const a of s.arrivals) a.age += dt;
99  s.arrivals = s.arrivals.filter((a) => a.age < 0.45);
100  if (s.consensus !== Infinity) {
101    s.consensus += dt;
102    if (s.consensus > 1.6) s.consensus = Infinity;
103  }
104  // Now and then while working, the nodes agree: a pulse runs along the mesh.
105  if ((s.steps.size > 0 || s.tools.size > 0) && s.consensus === Infinity && Math.random() < dt / 5) s.consensus = 0;
106}
107
108export function networkSettled(s) {
109  return s.arrivals.length === 0 && s.consensus === Infinity;
110}
111
112// ---- Drawing ------------------------------------------------------------------------
113
114export function drawNetwork(s, f) {
115  const { k, W, H } = f;
116  const lay = layoutFor(s, f.columns, f.rows);
117  const live = s.glow;
118  const nodePx = (n) => [n.x, n.y * 2 + 0.5];
119
120  // Far and middle layers: small pixel nodes drifting at two speeds, faint links between neighbours.
121  const drawLayer = (pts, speed, bright, linked) => {
122    const placed = pts.map((p) => ({ x: (((p.x - s.netDrift * speed) % lay.meshW) + lay.meshW) % lay.meshW, y: p.y, tw: p.tw })).sort((a, b) => a.x - b.x);
123    if (linked) {
124      for (let i = 0; i + 1 < placed.length; i += 1) {
125        const a = placed[i];
126        const b = placed[i + 1];
127        if (b.x - a.x < 9) line(a.x, a.y, b.x, b.y, (x, y) => f.glow(x, y, MESH.purple, bright * 0.35 * k));
128      }
129    }
130    for (const p of placed) {
131      const tw = 0.65 + 0.35 * Math.sin(s.t * 1.3 + p.tw);
132      f.glow(p.x, p.y, mix(MESH.purple, MESH.blue, 0.4), bright * tw * k * (0.7 + 0.3 * live));
133    }
134  };
135  // Depth needs room: at three rows or fewer the back layers would read as noise.
136  if (f.rows >= 4) {
137    drawLayer(lay.far, 0.5, 0.14, true);
138    drawLayer(lay.mid, 1.2, 0.26, false);
139  }
140
141  // Halos: a soft falloff around each mesh node, brighter while busy or pulsing.
142  const pulseOf = (n) => (s.consensus === Infinity ? 0 : Math.exp(-(((s.consensus - n * 0.09) / 0.11) ** 2)));
143  lay.nodes.forEach((node, n) => {
144    const [cx, cy] = nodePx(node);
145    const breathe = 0.5 + 0.5 * Math.sin(s.t * 1.6 + node.phase);
146    let strength = (0.07 + 0.12 * live * breathe) * k + 0.35 * pulseOf(n);
147    let color = live > 0.05 ? MESH.green : MESH.purple;
148    for (const a of s.arrivals) if (a.node === n) { strength += 0.3 * (1 - a.age / 0.45); color = a.color; }
149    for (const b of s.bursts) if (b.node % lay.nodes.length === n) { strength += 0.22; color = b.color; }
150    halo(f, cx, cy, 2.2, 0.85, color, strength);
151  });
152
153  // Links: thin and dim, lit up for a moment along a request's path.
154  const base = mix(MESH.bg, MESH.purple, 0.28 + 0.1 * k + 0.1 * live);
155  lay.edges.forEach((e, i) => {
156    const lit = s.netLit.get(i);
157    const color = lit ? mix(base, lit.color, 0.45 * lit.v) : base;
158    for (const c of e.cells) f.cell(c.x, c.y, c.g, color);
159  });
160  const chainLit = s.netLit.get(-1);
161  const chainBase = mix(MESH.bg, MESH.purple, 0.22 + 0.1 * k);
162  for (const c of lay.chainLink.cells) f.cell(c.x, c.y, c.g, chainLit ? mix(chainBase, chainLit.color, 0.5 * chainLit.v) : chainBase);
163
164  // Requests: comets with a bright head and a long gradient tail.
165  for (const p of s.packets) {
166    if (p.p < 0) continue;
167    const edge = p.e < 0 ? lay.chainLink : lay.edges[p.e % lay.edges.length];
168    const cells = p.rev ? [...edge.cells].reverse() : edge.cells;
169    if (!cells.length) continue;
170    const head = Math.min(cells.length - 1, Math.floor(p.p * cells.length));
171    const tail = 5;
172    for (let j = tail; j >= 1; j -= 1) {
173      const c = cells[head - j];
174      if (c) f.cell(c.x, c.y, c.g, mix(base, p.color, 0.9 * (1 - j / (tail + 1)) ** 1.3));
175    }
176    const c = cells[head];
177    halo(f, c.x, c.y * 2 + 0.5, 1.1, 0.55, p.color, 0.28 * k);
178    f.cell(c.x, c.y, HEAD, mix(p.color, MESH.fg, 0.35));
179  }
180
181  // Tool bursts: short sparks flying out from the working node, in the empty
182  // cells only, so the wires keep their own colour.
183  for (const b of s.bursts) {
184    const node = lay.nodes[b.node % lay.nodes.length];
185    const [cx, cy] = nodePx(node);
186    const age = b.done ? b.age : b.age % 0.7;
187    const fade = b.done ? Math.max(0, 1 - b.age / 0.8) : 1 - age / 0.7;
188    const r = 1.5 + age * 9;
189    for (let a = 0; a < 12; a += 1) {
190      const t = (a / 12) * Math.PI * 2 + 0.26;
191      for (let j = 0; j < 2; j += 1) {
192        const x = Math.round(cx + Math.cos(t) * (r - j * 1.2) * 2.2);
193        const y = Math.round(cy + Math.sin(t) * (r - j * 1.2));
194        if (x < 0 || y < 0 || x >= W || y >= H || f.hasCell(x, y >> 1)) continue;
195        f.glow(x, y, b.color, (j === 0 ? 0.85 : 0.4) * fade * k);
196      }
197    }
198  }
199
200  // Nodes: diamonds; idle lilac, busy green, white at the crest of a pulse.
201  lay.nodes.forEach((node, n) => {
202    const breathe = 0.5 + 0.5 * Math.sin(s.t * 1.6 + node.phase);
203    let color = mix(mix(MESH.bg, MESH.lilac, 0.68 + 0.2 * k), MESH.green, live * (0.75 + 0.25 * breathe));
204    color = mix(color, MESH.fg, pulseOf(n) * 0.8);
205    for (const a of s.arrivals) if (a.node === n) color = mix(color, MESH.fg, 0.7 * (1 - a.age / 0.45));
206    for (const b of s.bursts) {
207      if (b.node % lay.nodes.length !== n) continue;
208      const fade = b.done ? Math.max(0, 1 - b.age / 0.8) : 0.8 + 0.2 * Math.sin(b.age * 10);
209      color = mix(color, b.color, fade);
210    }
211    f.cell(node.x, node.y, NODE, color);
212  });
213
214  drawChain(s, f, lay);
215}
216
217// The chain: a genesis block plus one per finished turn. The newest locks in with a
218// white flash, a ring, and a shockwave running back along the older blocks.
219function drawChain(s, f, lay) {
220  const { k } = f;
221  const tall = f.rows >= 5;
222  const slots = Math.max(1, Math.floor((lay.chainW + 1) / 4));
223  const shown = Math.min(s.chain + 1, slots);
224  const age = s.confirmAge;
225  const fresh = age < CONFIRM_TIME;
226  const settled = mix(MESH.bg, MESH.purple, 0.62 + 0.25 * k);
227  for (let j = 0; j < shown; j += 1) {
228    const x = lay.chainX + j * 4;
229    const isNew = j === shown - 1 && fresh;
230    let color = settled;
231    if (isNew) {
232      color = age < 0.18 ? MESH.fg : mix(MESH.green, settled, clamp01((age - 0.18) / (CONFIRM_TIME - 0.18)) ** 2);
233      halo(f, x + 1, lay.chainRow * 2 + (tall ? 1.5 : 0.5), 2 + age * 7, 0.9 + age * 1.6, MESH.green, 0.55 * (1 - age / CONFIRM_TIME) ** 2);
234    } else if (fresh) {
235      // Shockwave: older blocks brighten as the wave passes them.
236      const dist = shown - 1 - j;
237      const wave = Math.exp(-(((age * 9 - dist) / 0.8) ** 2));
238      color = mix(settled, MESH.green, 0.75 * wave);
239    }
240    for (let r = 0; r < (tall ? 2 : 1); r += 1) BLOCK.forEach((g, d) => f.cell(x + d, lay.chainRow + r, g, color));
241    if (j > 0) f.cell(x - 1, lay.chainRow + (tall ? 1 : 0), LINK_H, mix(MESH.bg, MESH.dim, 0.8));
242  }
243}
244
245function halo(f, cx, cy, rx, ry, color, strength) {
246  if (strength <= 0.02) return;
247  for (let y = Math.floor(cy - ry * 2); y <= cy + ry * 2; y += 1) {
248    for (let x = Math.floor(cx - rx * 2); x <= cx + rx * 2; x += 1) {
249      const d = ((x - cx) / rx) ** 2 + ((y - cy) / ry) ** 2;
250      f.glow(x, y, color, strength * Math.exp(-d));
251    }
252  }
253}
254

1// synthwave: a perspective neon grid racing toward a striped sun on the horizon.
2// States show in the grid's colour, the sun's glow and how fast the road scrolls.
3
4import { CONFIRM_TIME, clamp01, hash, mix } from "../lib.mjs";
5
6const SKY_TOP = 0x12082a;
7const SKY_LOW = 0x5a1a58;
8const SUN_TOP = 0xffd34e;
9const SUN_LOW = 0xff2a7a;
10const MAGENTA = 0xff3d9a;
11const VIOLET = 0x9a6bff;
12const CYAN = 0x2de2e6;
13const MOUNTAIN = 0x24113c;
14const FLOOR = 0x0d0618;
15
16export function stepSynthwave(s, dt) {
17  const think = s.mode === "thinking" && s.tools.size === 0;
18  s.road += dt * (think ? 0.3 : 0.6 + 3.2 * Math.max(s.flow, s.flowSub * 0.6)) * s.glow;
19}
20
21export function drawSynthwave(s, f) {
22  const { W, H, pal, k } = f;
23  const live = 0.45 + 0.55 * s.glow;
24  const hy = Math.max(2, Math.round(H * 0.4));
25  const depth = H - 1 - hy;
26  const think = s.mode === "thinking" && s.tools.size === 0;
27  const fresh = s.confirmAge < CONFIRM_TIME ? 1 - s.confirmAge / CONFIRM_TIME : 0;
28  const put = (x, y, color, a) => f.dot(x, y, mix(pal.bg, color, clamp01(a * live * (0.8 + 0.25 * k))));
29  let grid = s.tools.size > 0 ? CYAN : think ? VIOLET : MAGENTA;
30  if (s.flare > 0) grid = mix(grid, pal.bad, s.flare);
31  const vx = Math.round(W * 0.5);
32
33  // Sky: deep violet down to magenta at the horizon.
34  for (let y = 0; y < hy; y += 1) {
35    const t = hy === 1 ? 1 : y / (hy - 1);
36    for (let x = 0; x < W; x += 1) put(x, y, mix(SKY_TOP, think ? 0x35266e : SKY_LOW, t * t), 0.6 + 0.3 * t);
37  }
38
39  // Sun on the vanishing point, yellow to pink, cut by scanlines in its lower half.
40  const r = Math.max(2.5, hy * 1.2);
41  for (let y = Math.max(0, Math.floor(hy - r)); y < hy; y += 1) {
42    const dy = hy - 0.5 - y;
43    const half = Math.sqrt(Math.max(0, r * r - dy * dy)) * 1.6;
44    const t = 1 - dy / r;
45    if (t > 0.4 && (hy - y) % 2 === 1) continue;
46    for (let x = Math.floor(vx - half); x <= vx + half; x += 1) put(x, y, mix(SUN_TOP, SUN_LOW, t), 1);
47  }
48  // Its glow; a finished turn flares it.
49  for (let y = 0; y <= hy; y += 1) {
50    for (let x = Math.floor(vx - r * 6); x <= vx + r * 6; x += 1) {
51      const d = Math.hypot((x - vx) / (r * (3 + 2 * fresh)), (y - hy) / (r * 1.4));
52      if (d < 1) f.glow(x, y, SUN_LOW, (0.14 + 0.45 * fresh) * (1 - d) * live);
53    }
54  }
55
56  // A dark ridge on the horizon, low in front of the sun.
57  for (let x = 0; x < W; x += 1) {
58    const u = x / W;
59    const ridge = (0.5 + 0.5 * Math.sin(u * 13 + 1.3)) * (0.5 + 0.5 * Math.sin(u * 5.1 + 0.4)) + 0.25 * hash(Math.floor(x / 3));
60    const h = Math.round(ridge * (hy - 1) * 0.55 * clamp01(Math.abs(x - vx) / (r * 2.2)));
61    for (let y = hy - h; y < hy; y += 1) put(x, y, MOUNTAIN, 1);
62  }
63
64  // The floor: dark, the grid drawn over it in single-pixel lines.
65  for (let y = hy; y < H; y += 1) for (let x = 0; x < W; x += 1) put(x, y, FLOOR, 0.92);
66
67  // Lines running back to a vanishing point behind the sun, fanning out toward the
68  // viewer. Only lines steep enough to read as lines are drawn; in a strip this
69  // wide the shallower ones would smear into stripes.
70  // Far enough above the horizon that the steepest drawable lines still reach both edges.
71  const lift = Math.max(depth * 2.5, Math.max(vx, W - vx) / 2.4 - depth);
72  const spacing = Math.max(5, depth * 1.1);
73  for (let kx = -30; kx <= 30; kx += 1) {
74    const bx = vx + kx * spacing;
75    const slope = Math.abs(bx - vx) / (lift + depth);
76    if (slope > 2.4) continue;
77    const x0 = vx + (bx - vx) * (lift / (lift + depth));
78    const y0 = hy + 1;
79    const y1 = H - 1;
80    const steps = Math.ceil(Math.max(Math.abs(bx - x0), y1 - y0));
81    for (let i = 0; i <= steps; i += 1) {
82      const t = i / steps;
83      const x = Math.round(x0 + (bx - x0) * t);
84      const y = Math.round(y0 + (y1 - y0) * t);
85      if (x < 0 || x >= W) continue;
86      put(x, y, grid, 0.25 + 0.7 * ((y - hy) / depth));
87    }
88  }
89
90  // Lines across, closer together toward the horizon, scrolling toward the viewer.
91  const phase = s.road % 1;
92  let last = H;
93  for (let i = 0; i < 12; i += 1) {
94    const d = i + 1 - phase;
95    const y = Math.round(hy + depth / d);
96    if (y >= H) continue;
97    if (y <= hy || last - y < 2) break;
98    last = y;
99    for (let x = 0; x < W; x += 1) put(x, y, grid, 0.3 + 0.65 * clamp01(1.3 / d));
100  }
101
102  // The horizon: one bright line, whiter as the sun flares.
103  for (let x = 0; x < W; x += 1) put(x, hy, mix(grid, 0xffffff, 0.2 + 0.5 * fresh), 0.9);
104}
105

1// warp: a hyperspace starfield; streaks stretch with the stream, and a completed
2// turn is a jump flash.
3
4import { CONFIRM_TIME, clamp01, line, mix } from "../lib.mjs";
5
6
7function spawn(star, far) {
8  // Wide in x so the field fills a strip far wider than it is tall.
9  star.x = (Math.random() * 2 - 1) * 3.2;
10  star.y = (Math.random() * 2 - 1) * 1.2;
11  star.z = far ? 1 : 0.15 + Math.random() * 0.85;
12  star.pz = star.z;
13  star.hue = Math.random();
14}
15
16function stars(s) {
17  // Sparse enough that each streak reads on its own: about one star per 9 pixels.
18  const count = s.warpDims ? Math.max(24, Math.min(160, Math.round((s.warpDims.W * s.warpDims.H) / 9))) : 60;
19  if (!s.warpStars || s.warpStars.length !== count) {
20    s.warpStars = Array.from({ length: count }, () => {
21      const star = {};
22      spawn(star, false);
23      return star;
24    });
25  }
26  return s.warpStars;
27}
28
29function speedOf(s) {
30  const jump = s.confirmAge < CONFIRM_TIME ? Math.max(0, 1 - s.confirmAge / 0.9) : 0;
31  const tool = s.tools.size > 0 ? 0.25 : 0;
32  return (0.06 + 1.3 * Math.max(s.flow, s.flowSub * 0.6) + tool + 3 * jump) * s.glow;
33}
34
35export function stepWarp(s, dt) {
36  const v = speedOf(s);
37  for (const star of stars(s)) {
38    star.pz = star.z;
39    star.z -= v * dt;
40    // Gone past the edge of the strip, or past the viewer: start again far away.
41    const off = s.warpDims && Math.abs((star.x / star.z) * s.warpDims.W * 0.16) > s.warpDims.W * 0.55;
42    if (star.z <= 0.04 || off) spawn(star, true);
43  }
44}
45
46export function drawWarp(s, f) {
47  const { W, H, pal, k } = f;
48  const live = 0.35 + 0.65 * s.glow;
49  const cx = (W - 1) / 2;
50  const cy = (H - 1) / 2;
51  s.warpDims = { W, H };
52  const v = speedOf(s);
53  const think = s.mode === "thinking";
54  const tool = s.tools.size > 0;
55  const cool = think ? pal.b : pal.c ?? pal.fg;
56  const proj = (x, y, z) => [cx + (x / z) * W * 0.16, cy + (y / z) * H * 0.42];
57
58  // A faint tunnel glow at the centre, stronger at speed.
59  for (let y = 0; y < H; y += 1) {
60    for (let x = 0; x < W; x += 1) {
61      const d = Math.hypot((x - cx) / (W * 0.22), (y - cy) / (H * 0.9));
62      if (d < 1) f.glow(x, y, think ? pal.b : 0x3a4cff, (1 - d) ** 2 * (0.08 + 0.35 * clamp01(v)) * live);
63    }
64  }
65
66  for (const star of stars(s)) {
67    const [x1, y1] = proj(star.x, star.y, star.z);
68    if (x1 < -2 || x1 > W + 1 || y1 < -1 || y1 > H) continue;
69    const near = clamp01(1.15 - star.z);
70    let color = mix(pal.fg, cool, 0.35 + 0.4 * star.hue);
71    if (tool) color = mix(color, pal.warn, 0.55);
72    if (s.flare > 0) color = mix(color, pal.bad, s.flare);
73    const bright = (0.12 + 0.88 * near * near) * live * (0.75 + 0.25 * k);
74    // Streak from where the star was a moment ago; longer the faster we go.
75    const back = Math.min(1, star.z + v * 0.18 + 0.004);
76    const [x0, y0] = proj(star.x, star.y, back);
77    const len = Math.max(1, Math.hypot(x1 - x0, y1 - y0));
78    let i = 0;
79    line(x0, y0, x1, y1, (x, y) => {
80      i += 1;
81      f.glow(x, y, color, bright * (0.15 + 0.85 * (i / (len + 1))));
82    });
83    f.glow(x1, y1, mix(color, 0xffffff, 0.4), bright);
84  }
85
86  // The jump: a white flash from the centre that fades out.
87  if (s.confirmAge < 0.6) {
88    const a = 1 - s.confirmAge / 0.6;
89    for (let y = 0; y < H; y += 1) {
90      for (let x = 0; x < W; x += 1) {
91        const d = Math.abs(x - cx) / (W * 0.5);
92        f.tint(x, y, 0xffffff, a * a * (0.85 - 0.6 * d));
93      }
94    }
95  }
96}
97

1// wave: a low flowing wave with sparks, the original strip.
2
3import {
4  B64,
5  BLANK,
6  CELEBRATE_TIME,
7  CLAWD,
8  CLAWD_KID,
9  CONFIRM_TIME,
10  DEFAULT_COLOR,
11  EFFORT,
12  FALLBACK,
13  Frame,
14  HORIZON,
15  INK,
16  INTENSITY,
17  LOWER,
18  MESH,
19  PALETTES,
20  PULSE_HEAD,
21  PULSE_TRAIL,
22  QUAD,
23  SPARK_MAIN,
24  SPARK_SUB,
25  TRIP_TIME,
26  UPPER,
27  WAVE,
28  add,
29  clamp01,
30  clampInt,
31  cp,
32  flareBackground,
33  hash,
34  horizonLine,
35  line,
36  mix,
37  modeColor,
38  quantize,
39  toBase64,
40} from "../lib.mjs";
41
42
43export function drawWave(s, f) {
44  const { columns, rows, pal, k } = f;
45  const base = pal.bg;
46  const bottom = rows - 1;
47  if (s.horizon !== null) {
48    const fillTo = Math.round(s.horizon * columns);
49    for (let x = 0; x < fillTo; x += 1) f.cell(x, bottom, HORIZON, mix(base, pal.fg, 0.22 * k + 0.05));
50  }
51  const color = modeColor(s, pal);
52  if (s.glow > 0) {
53    const amp = s.glow * (0.2 + 0.8 * Math.max(s.flow, s.flowSub * 0.6));
54    const levels = Math.max(5, Math.round(rows * 8 * 0.8));
55    for (let x = 0; x < columns; x += 1) {
56      const h = amp * waveHeight(s.t, (x + 0.5) / columns);
57      let level = Math.round(h * levels);
58      const shade = mix(base, color, (0.35 + 0.65 * h) * k);
59      for (let r = bottom; r >= 0 && level > 0; r -= 1) {
60        f.cell(x, r, WAVE[Math.min(8, level) - 1], shade);
61        level -= 8;
62      }
63    }
64    const subColor = mix(pal.b, pal.fg, 0.4);
65    for (const p of s.particles) {
66      const x = clampInt(Math.floor(p.x * columns), 0, columns - 1);
67      const r = Math.min(rows - 1, Math.floor(p.row * rows));
68      const set = p.sub ? SPARK_SUB : SPARK_MAIN;
69      f.cell(x, r, set[Math.min(set.length - 1, Math.floor(p.life * set.length))], mix(base, p.sub ? subColor : color, (0.45 + 0.55 * p.life) * s.glow * k));
70    }
71  }
72  for (const p of s.pulses) {
73    const head = Math.floor(p.x * columns);
74    const trail = p.sub ? 4 : 9;
75    const c = p.sub ? mix(pal.warn, pal.fg, 0.35) : pal.warn;
76    for (let j = 0; j <= trail; j += 1) {
77      const x = head - j;
78      if (x >= 0 && x < columns) f.cell(x, bottom, j === 0 ? PULSE_HEAD : PULSE_TRAIL, mix(base, c, j === 0 ? 1 : 0.85 * (1 - j / (trail + 1)) * k));
79    }
80  }
81  flareBackground(s, f);
82}
83
84function waveHeight(t, u) {
85  const a = 0.5 + 0.5 * Math.sin(u * 11 + t * 2.1);
86  const b = 0.6 + 0.4 * Math.sin(u * 29 - t * 3.3);
87  const c = 0.75 + 0.25 * Math.sin(u * 5 - t * 0.9);
88  return a * b * c;
89}
90
91