@yancyyu/openhermit 1.6.38 → 1.6.40

package/src/renderer/components/splash/splashScene.ts

@@ -1,4 +1,9 @@
-import { PARTICIPANT_AVATAR_URLS } from '@renderer/utils/memberAvatarCatalog';
+/**
+ * splashScene — Terminal-style loading splash.
+ *
+ * Replaces the heavy canvas robot animation with a clean,
+ * Yume-inspired terminal boot sequence.
+ */
 
 export interface SplashSceneHandle {
   stop: () => void;
@@ -16,964 +21,151 @@ declare global {
   }
 }
 
-interface Point {
-  x: number;
-  y: number;
-}
-
-interface RobotNode extends Point {
-  teamIndex: number;
-  robotIndex: number;
-  color: string;
-  size: number;
-  bob: number;
-  receivePulse: number;
-  avatarUrl: string;
-}
-
-interface TeamNode {
-  index: number;
-  center: Point;
-  color: string;
-  radius: number;
-  robots: RobotNode[];
-}
-
-interface MessageFlightState {
-  progress: number;
-  motionSpeed: number;
-  bubbleScale: number;
-  bubbleAlpha: number;
-}
-
-interface DepthParticle {
-  x: number;
-  y: number;
-  size: number;
-  speed: number;
-  phase: number;
-  alpha: number;
-}
-
-interface Palette {
-  isLight: boolean;
-  centerGlow: string;
-  teamColors: string[];
-  robotBody: string;
-  robotShade: string;
-  robotEye: string;
-  messageAccent: string;
-  particle: string;
-}
-
-const TAU = Math.PI * 2;
-const TEAM_MEMBER_COUNTS = [4, 3, 5] as const;
-const TEAM_MEMBER_OFFSETS = [0, 4, 7] as const;
-const TEAM_LABELS = ['Marketing', 'Researchers', 'Coding'] as const;
-const MAX_DPR = 2;
-const avatarCache = new Map<string, HTMLImageElement>();
-const avatarLoading = new Map<string, Promise<HTMLImageElement | null>>();
+const BOOT_LINES = [
+  '🦀 hermit v1.6.38',
+  'connecting harness…',
+  'loading team configs…',
+  'scanning session history…',
+  'indexing project files…',
+  'ready.',
+];
 
 export function startSplashScene(
   splash: HTMLElement,
   options: SplashSceneOptions = {}
 ): SplashSceneHandle {
   const existingScene = window.__claudeTeamsSplashScene;
-  if (existingScene && splash.querySelector('#splash-enhanced-canvas')) {
+  if (existingScene && splash.querySelector('#splash-terminal')) {
     return existingScene;
   }
 
-  const ready = preloadAvatarImages();
-  const previousCanvas = splash.querySelector<HTMLCanvasElement>('#splash-enhanced-canvas');
-  previousCanvas?.remove();
-
-  const canvas = document.createElement('canvas');
-  canvas.id = 'splash-enhanced-canvas';
-  canvas.setAttribute('aria-hidden', 'true');
-  splash.appendChild(canvas);
-
-  const ctx = canvas.getContext('2d', { alpha: true });
-  if (!ctx) {
-    const emptyHandle = {
-      stop: () => {
-        canvas.remove();
-      },
-      ready,
-    };
-    return emptyHandle;
-  }
-
   const reducedMotion =
     options.reducedMotion ?? window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-  const state = {
-    width: 1,
-    height: 1,
-    dpr: 1,
-    particles: [] as DepthParticle[],
-    running: true,
-    frameId: 0,
-    startedAt: performance.now(),
-  };
 
-  const resize = (): void => {
-    const rect = splash.getBoundingClientRect();
-    const width = Math.max(1, Math.round(rect.width));
-    const height = Math.max(1, Math.round(rect.height));
-    const dpr = Math.min(MAX_DPR, window.devicePixelRatio || 1);
-
-    if (state.width === width && state.height === height && state.dpr === dpr) {
-      return;
+  // Remove old canvas if present
+  splash.querySelector('#splash-enhanced-canvas')?.remove();
+
+  // Hide the original HTML splash content (logo, text, tagline)
+  const splashCopy = splash.querySelector('#splash-copy');
+  if (splashCopy instanceof HTMLElement) {
+    splashCopy.style.display = 'none';
+  }
+
+  const container = document.createElement('div');
+  container.id = 'splash-terminal';
+  container.style.cssText = `
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
+    font-size: 13px;
+    line-height: 1.8;
+    color: rgba(148, 163, 184, 0.8);
+    padding: 24px;
+    opacity: 0;
+    z-index: 5;
+    animation: splash-term-in 0.4s ease-out 0.1s forwards;
+  `;
+
+  // Boot lines appear one by one
+  const linesContainer = document.createElement('div');
+  linesContainer.style.cssText = 'text-align: left; width: 100%; max-width: 320px;';
+  container.appendChild(linesContainer);
+
+  // Cursor
+  const cursor = document.createElement('span');
+  cursor.textContent = '█';
+  cursor.style.cssText = reducedMotion
+    ? 'opacity: 0.6;'
+    : 'animation: splash-cursor-blink 1s step-end infinite;';
+  cursor.setAttribute('aria-hidden', 'true');
+
+  splash.appendChild(container);
+
+  let running = true;
+  let lineIndex = 0;
+
+  function addNextLine(): void {
+    if (!running || lineIndex >= BOOT_LINES.length) return;
+
+    const line = BOOT_LINES[lineIndex];
+    if (!line) return;
+
+    const lineEl = document.createElement('div');
+    lineEl.style.cssText = 'opacity: 0; transform: translateY(4px); transition: opacity 0.3s, transform 0.3s;';
+
+    if (lineIndex === 0) {
+      // First line — brand with crab
+      const brand = document.createElement('span');
+      brand.textContent = '> ';
+      brand.style.color = 'rgba(148, 163, 184, 0.4)';
+      lineEl.appendChild(brand);
+
+      const cmd = document.createElement('span');
+      cmd.textContent = line;
+      cmd.style.color = 'rgba(226, 232, 240, 0.9)';
+      cmd.style.fontWeight = '500';
+      lineEl.appendChild(cmd);
+    } else if (line === 'ready.') {
+      const ready = document.createElement('span');
+      ready.textContent = '✓ ';
+      ready.style.color = 'rgba(52, 211, 153, 0.7)';
+      lineEl.appendChild(ready);
+
+      const text = document.createElement('span');
+      text.textContent = line;
+      text.style.color = 'rgba(52, 211, 153, 0.6)';
+      lineEl.appendChild(text);
+    } else {
+      const arrow = document.createElement('span');
+      arrow.textContent = '  ';
+      lineEl.appendChild(arrow);
+
+      const text = document.createElement('span');
+      text.textContent = line;
+      lineEl.appendChild(text);
     }
 
-    state.width = width;
-    state.height = height;
-    state.dpr = dpr;
-    canvas.width = Math.ceil(width * dpr);
-    canvas.height = Math.ceil(height * dpr);
-    canvas.style.width = `${width}px`;
-    canvas.style.height = `${height}px`;
-    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
-    state.particles = createDepthParticles(width, height);
-  };
+    linesContainer.appendChild(lineEl);
 
-  const render = (now: number): void => {
-    if (!state.running) return;
+    // Animate in
+    requestAnimationFrame(() => {
+      lineEl.style.opacity = '1';
+      lineEl.style.transform = 'translateY(0)';
+    });
 
-    resize();
-    const time = (now - state.startedAt) / 1000;
-    drawScene(ctx, state.width, state.height, time, state.particles, reducedMotion);
+    lineIndex++;
 
-    if (!reducedMotion) {
-      state.frameId = window.requestAnimationFrame(render);
+    if (lineIndex < BOOT_LINES.length) {
+      setTimeout(addNextLine, reducedMotion ? 80 : 280);
+    } else {
+      // Append cursor after last line
+      const lastLine = linesContainer.lastElementChild;
+      if (lastLine) {
+        lastLine.appendChild(cursor);
+      }
     }
-  };
+  }
 
-  const onResize = (): void => resize();
-  window.addEventListener('resize', onResize);
-  resize();
-  render(performance.now());
+  // Start boot sequence after a brief delay
+  setTimeout(addNextLine, reducedMotion ? 50 : 120);
 
   const handle: SplashSceneHandle = {
     stop: () => {
-      state.running = false;
-      window.cancelAnimationFrame(state.frameId);
-      window.removeEventListener('resize', onResize);
-      canvas.remove();
+      running = false;
+      container.remove();
       if (window.__claudeTeamsSplashScene === handle) {
         window.__claudeTeamsSplashScene = undefined;
         window.__claudeTeamsSplashEnhancedStartedAt = undefined;
       }
     },
-    ready,
   };
   window.__claudeTeamsSplashScene = handle;
   window.__claudeTeamsSplashEnhancedStartedAt = performance.now();
 
   return handle;
 }
-
-function drawScene(
-  ctx: CanvasRenderingContext2D,
-  width: number,
-  height: number,
-  time: number,
-  particles: DepthParticle[],
-  reducedMotion: boolean
-): void {
-  ctx.clearRect(0, 0, width, height);
-  const palette = resolvePalette();
-  const mobile = width < 560 || height < 620;
-  const sceneTime = reducedMotion ? 1.2 : time;
-  const teams = buildTeams(width, height, sceneTime, mobile, palette);
-  const center = getCenter(width, height, mobile);
-
-  drawAmbientField(ctx, width, height, sceneTime, particles, palette, mobile);
-  drawCenterAura(ctx, center, sceneTime, palette, mobile);
-  drawCrossTeamGuides(ctx, teams, sceneTime, palette);
-
-  for (const team of teams) {
-    drawTeamHalo(ctx, team, sceneTime, palette);
-  }
-
-  drawMessages(ctx, teams, sceneTime, palette, mobile);
-
-  for (const team of teams) {
-    for (const robot of team.robots) {
-      drawRobot(ctx, robot, sceneTime, palette);
-    }
-  }
-
-  for (const team of teams) {
-    drawTeamLabel(ctx, team, palette, mobile);
-  }
-}
-
-function resolvePalette(): Palette {
-  const isLight = document.documentElement.classList.contains('light');
-  return isLight
-    ? {
-        isLight,
-        centerGlow: '#4f46e5',
-        teamColors: ['#0369a1', '#047857', '#b45309'],
-        robotBody: '#eef2ff',
-        robotShade: '#dbe4ff',
-        robotEye: '#ffffff',
-        messageAccent: '#7c3aed',
-        particle: '#312e81',
-      }
-    : {
-        isLight,
-        centerGlow: '#7c83f7',
-        teamColors: ['#24a8d8', '#23b488', '#d58a19'],
-        robotBody: '#0f1724',
-        robotShade: '#1a2438',
-        robotEye: '#d8f3ff',
-        messageAccent: '#8b5cf6',
-        particle: '#a6a4d6',
-      };
-}
-
-function getCenter(width: number, height: number, mobile: boolean): Point {
-  return {
-    x: width / 2,
-    y: height * (mobile ? 0.47 : 0.49),
-  };
-}
-
-function buildTeams(
-  width: number,
-  height: number,
-  time: number,
-  mobile: boolean,
-  palette: Palette
-): TeamNode[] {
-  const center = getCenter(width, height, mobile);
-  const spreadX = mobile ? Math.min(width * 0.36, 148) : Math.min(width * 0.34, 380);
-  const spreadY = mobile ? Math.min(height * 0.22, 154) : Math.min(height * 0.22, 220);
-  const teamRadius = mobile
-    ? clamp(Math.min(width, height) * 0.092, 31, 42)
-    : clamp(Math.min(width, height) * 0.072, 42, 62);
-  const robotSize = mobile ? 9.8 : 11.8;
-  const centers: Point[] = [
-    {
-      x: center.x - spreadX,
-      y: center.y - spreadY * (mobile ? 0.66 : 0.58),
-    },
-    {
-      x: center.x + spreadX,
-      y: center.y - spreadY * (mobile ? 0.66 : 0.58),
-    },
-    {
-      x: center.x,
-      y: center.y + spreadY * (mobile ? 1.34 : 1.18),
-    },
-  ];
-
-  return centers.map((teamCenter, teamIndex) => {
-    const drift = Math.sin(time * 0.75 + teamIndex * 1.7) * (mobile ? 2.2 : 4.2);
-    const centerWithDrift = {
-      x: teamCenter.x + Math.cos(teamIndex * 2.1 + time * 0.35) * (mobile ? 1.4 : 2.8),
-      y: teamCenter.y + drift,
-    };
-    const color = palette.teamColors[teamIndex % palette.teamColors.length] ?? palette.centerGlow;
-    const memberCount = TEAM_MEMBER_COUNTS[teamIndex] ?? 3;
-    const robots = Array.from({ length: memberCount }, (_, robotIndex) => {
-      const baseAngle =
-        -Math.PI / 2 + robotIndex * (TAU / memberCount) + (teamIndex === 2 ? TAU / 20 : 0);
-      const orbit = baseAngle + Math.sin(time * 0.55 + teamIndex + robotIndex) * 0.07;
-      const orbitRadius =
-        teamRadius * (0.94 + (memberCount > 4 ? 0.07 : 0) + 0.03 * Math.sin(time + robotIndex));
-      return {
-        teamIndex,
-        robotIndex,
-        color,
-        size: memberCount > 4 ? robotSize * 0.88 : robotSize,
-        bob: Math.sin(time * 2.2 + teamIndex * 0.8 + robotIndex * 1.1),
-        receivePulse: 0,
-        avatarUrl:
-          PARTICIPANT_AVATAR_URLS[(TEAM_MEMBER_OFFSETS[teamIndex] ?? 0) + robotIndex] ??
-          PARTICIPANT_AVATAR_URLS[0],
-        x: centerWithDrift.x + Math.cos(orbit) * orbitRadius,
-        y: centerWithDrift.y + Math.sin(orbit) * orbitRadius,
-      };
-    });
-
-    return {
-      index: teamIndex,
-      center: centerWithDrift,
-      color,
-      radius: teamRadius,
-      robots,
-    };
-  });
-}
-
-function drawAmbientField(
-  ctx: CanvasRenderingContext2D,
-  width: number,
-  height: number,
-  time: number,
-  particles: DepthParticle[],
-  palette: Palette,
-  mobile: boolean
-): void {
-  const visibleParticles = mobile ? Math.floor(particles.length * 0.6) : particles.length;
-  for (let i = 0; i < visibleParticles; i++) {
-    const particle = particles[i];
-    if (!particle) continue;
-    const y = (particle.y + time * particle.speed) % (height + 24);
-    const x = particle.x + Math.sin(time * 0.45 + particle.phase) * 8;
-    const pulse = 0.78 + Math.sin(time * 1.8 + particle.phase) * 0.22;
-    ctx.beginPath();
-    ctx.fillStyle = withAlpha(palette.particle, particle.alpha * pulse);
-    ctx.arc(x, y - 12, particle.size, 0, TAU);
-    ctx.fill();
-  }
-}
-
-function drawCenterAura(
-  ctx: CanvasRenderingContext2D,
-  center: Point,
-  time: number,
-  palette: Palette,
-  mobile: boolean
-): void {
-  const radius = mobile ? 86 : 128;
-  const glow = ctx.createRadialGradient(center.x, center.y, 20, center.x, center.y, radius);
-  glow.addColorStop(0, withAlpha(palette.centerGlow, palette.isLight ? 0.1 : 0.14));
-  glow.addColorStop(0.48, withAlpha(palette.messageAccent, palette.isLight ? 0.04 : 0.07));
-  glow.addColorStop(1, withAlpha(palette.centerGlow, 0));
-  ctx.fillStyle = glow;
-  ctx.beginPath();
-  ctx.arc(center.x, center.y, radius, 0, TAU);
-  ctx.fill();
-
-  for (let i = 0; i < 3; i++) {
-    const ringRadius = radius * (0.42 + i * 0.18) + Math.sin(time * 1.1 + i) * 3;
-    ctx.beginPath();
-    ctx.strokeStyle = withAlpha(palette.centerGlow, 0.07 - i * 0.014);
-    ctx.lineWidth = 1;
-    ctx.setLineDash([8 + i * 2, 12 + i * 3]);
-    ctx.lineDashOffset = -time * (18 + i * 8);
-    ctx.arc(center.x, center.y, ringRadius, 0, TAU);
-    ctx.stroke();
-  }
-  ctx.setLineDash([]);
-}
-
-function drawCrossTeamGuides(
-  ctx: CanvasRenderingContext2D,
-  teams: TeamNode[],
-  time: number,
-  palette: Palette
-): void {
-  for (let i = 0; i < teams.length; i++) {
-    const from = teams[i];
-    const to = teams[(i + 1) % teams.length];
-    if (!from || !to) continue;
-    ctx.beginPath();
-    ctx.moveTo(from.center.x, from.center.y);
-    ctx.lineTo(to.center.x, to.center.y);
-    ctx.strokeStyle = withAlpha(palette.messageAccent, palette.isLight ? 0.14 : 0.18);
-    ctx.lineWidth = 1.05;
-    ctx.setLineDash([7, 12]);
-    ctx.lineDashOffset = -time * 34;
-    ctx.stroke();
-  }
-  ctx.setLineDash([]);
-}
-
-function drawTeamHalo(
-  ctx: CanvasRenderingContext2D,
-  team: TeamNode,
-  time: number,
-  palette: Palette
-): void {
-  const pulse = 1 + Math.sin(time * 1.8 + team.index) * 0.035;
-  const radiusX = team.radius * 1.56 * pulse;
-  const radiusY = team.radius * 1.14 * pulse;
-  const glow = ctx.createRadialGradient(
-    team.center.x,
-    team.center.y,
-    team.radius * 0.35,
-    team.center.x,
-    team.center.y,
-    team.radius * 2
-  );
-  glow.addColorStop(0, withAlpha(team.color, palette.isLight ? 0.045 : 0.065));
-  glow.addColorStop(1, withAlpha(team.color, 0));
-  ctx.fillStyle = glow;
-  ctx.beginPath();
-  ctx.ellipse(team.center.x, team.center.y, team.radius * 1.82, team.radius * 1.36, 0, 0, TAU);
-  ctx.fill();
-
-  ctx.beginPath();
-  ctx.ellipse(team.center.x, team.center.y, radiusX, radiusY, time * 0.08, 0, TAU);
-  ctx.strokeStyle = withAlpha(team.color, palette.isLight ? 0.2 : 0.24);
-  ctx.lineWidth = 1;
-  ctx.setLineDash([12, 10]);
-  ctx.lineDashOffset = -time * (22 + team.index * 4);
-  ctx.stroke();
-  ctx.setLineDash([]);
-}
-
-function drawMessages(
-  ctx: CanvasRenderingContext2D,
-  teams: TeamNode[],
-  time: number,
-  palette: Palette,
-  mobile: boolean
-): void {
-  for (const team of teams) {
-    drawLocalMessages(ctx, team, time, palette, mobile);
-  }
-  drawCrossTeamMessages(ctx, teams, time, palette, mobile);
-}
-
-function drawLocalMessages(
-  ctx: CanvasRenderingContext2D,
-  team: TeamNode,
-  time: number,
-  palette: Palette,
-  mobile: boolean
-): void {
-  const pairs = getLocalMessagePairs(team.index, team.robots.length);
-  const activeWindow = 0.76;
-  const period = 2.15 + team.index * 0.12;
-
-  for (let pairIndex = 0; pairIndex < pairs.length; pairIndex++) {
-    const [fromIndex, toIndex] = pairs[pairIndex] ?? [0, 1];
-    const from = team.robots[fromIndex];
-    const to = team.robots[toIndex];
-    if (!from || !to) continue;
-    const raw = positiveModulo(time + team.index * 0.7 + pairIndex * 0.36, period) / period;
-    applyReceivePulse(to, getReceivePulse(raw, activeWindow));
-    const flightState = getMessageFlightState(raw, activeWindow, 0.12);
-    if (!flightState) continue;
-    const curve = makeLocalCurve(from, to, team.center, team.radius * 0.42);
-    drawMessageFlight(ctx, curve, flightState, team.color, mobile ? 4.6 : 5.8, palette);
-  }
-}
-
-function drawCrossTeamMessages(
-  ctx: CanvasRenderingContext2D,
-  teams: TeamNode[],
-  time: number,
-  palette: Palette,
-  mobile: boolean
-): void {
-  const activeWindow = 0.64;
-  const period = 4.25;
-  const routes = [
-    { fromTeam: 0, fromRobot: 3, toTeam: 1, toRobot: 1, delay: 0 },
-    { fromTeam: 1, fromRobot: 2, toTeam: 2, toRobot: 0, delay: 1.34, accent: true },
-    { fromTeam: 2, fromRobot: 4, toTeam: 0, toRobot: 1, delay: 2.68 },
-  ];
-
-  for (const route of routes) {
-    const fromTeam = teams[route.fromTeam];
-    const toTeam = teams[route.toTeam];
-    if (!fromTeam || !toTeam) continue;
-    const raw = positiveModulo(time + route.delay, period) / period;
-
-    const from = fromTeam.robots[route.fromRobot % fromTeam.robots.length];
-    const to = toTeam.robots[route.toRobot % toTeam.robots.length];
-    if (!from || !to) continue;
-    applyReceivePulse(to, getReceivePulse(raw, activeWindow) * 0.88);
-    const flightState = getMessageFlightState(raw, activeWindow, 0.1);
-    if (!flightState) continue;
-    const curve = makeStraightCurve(from, to);
-    drawMessageFlight(
-      ctx,
-      curve,
-      flightState,
-      route.accent ? palette.messageAccent : fromTeam.color,
-      mobile ? 5.2 : 6.8,
-      palette,
-      true
-    );
-  }
-}
-
-function drawMessageFlight(
-  ctx: CanvasRenderingContext2D,
-  curve: [Point, Point, Point, Point],
-  state: MessageFlightState,
-  color: string,
-  size: number,
-  palette: Palette,
-  crossTeam = false
-): void {
-  const [p0, p1, p2, p3] = curve;
-  ctx.save();
-
-  const progress = state.progress;
-  const speed = clamp(state.motionSpeed, 0, 1);
-  if (speed > 0.045) {
-    drawSpeedTrail(ctx, curve, progress, speed, color, size, palette, crossTeam);
-  }
-
-  const position = cubicPoint(p0, p1, p2, p3, progress);
-  const tangent = cubicTangent(p0, p1, p2, p3, progress);
-  const angle = Math.atan2(tangent.y, tangent.x);
-  drawMessageBubble(
-    ctx,
-    position,
-    angle,
-    size,
-    color,
-    palette,
-    crossTeam,
-    state.bubbleScale,
-    state.bubbleAlpha
-  );
-  ctx.restore();
-}
-
-function drawSpeedTrail(
-  ctx: CanvasRenderingContext2D,
-  curve: [Point, Point, Point, Point],
-  progress: number,
-  speed: number,
-  color: string,
-  size: number,
-  palette: Palette,
-  crossTeam: boolean
-): void {
-  const [p0, p1, p2, p3] = curve;
-  const trailLength = (crossTeam ? 0.26 : 0.21) * (0.24 + speed * 1.08);
-  const segmentCount = Math.round(9 + speed * 10);
-  const alphaBase = (palette.isLight ? 0.22 : 0.32) * speed;
-
-  ctx.save();
-  ctx.lineCap = 'round';
-  ctx.lineJoin = 'round';
-  ctx.shadowColor = withAlpha(color, alphaBase * 0.58);
-  ctx.shadowBlur = size * (0.78 + speed * 1.28);
-
-  for (let segment = 0; segment < segmentCount; segment++) {
-    const startRatio = segment / segmentCount;
-    const endRatio = (segment + 1) / segmentCount;
-    const t0 = progress - trailLength * (1 - startRatio);
-    const t1 = progress - trailLength * (1 - endRatio);
-    if (t1 <= 0) continue;
-
-    const from = cubicPoint(p0, p1, p2, p3, Math.max(0, t0));
-    const to = cubicPoint(p0, p1, p2, p3, Math.max(0, t1));
-    const headWeight = endRatio * endRatio;
-    const width = size * (0.12 + headWeight * 0.48) * (0.9 + speed * 0.45);
-    const alpha = alphaBase * headWeight;
-
-    ctx.beginPath();
-    ctx.moveTo(from.x, from.y);
-    ctx.lineTo(to.x, to.y);
-    ctx.strokeStyle = withAlpha(color, alpha * 0.34);
-    ctx.lineWidth = width * 2.35;
-    ctx.stroke();
-
-    ctx.beginPath();
-    ctx.moveTo(from.x, from.y);
-    ctx.lineTo(to.x, to.y);
-    ctx.strokeStyle = withAlpha(color, alpha);
-    ctx.lineWidth = width;
-    ctx.stroke();
-  }
-
-  ctx.restore();
-}
-
-function getMessageFlightState(
-  raw: number,
-  activeWindow: number,
-  settleWindow: number
-): MessageFlightState | null {
-  if (raw > activeWindow + settleWindow) return null;
-
-  if (raw <= activeWindow) {
-    const phase = raw / activeWindow;
-    return {
-      progress: easeInOutCubic(phase),
-      motionSpeed: getEasedMotionSpeed(phase),
-      bubbleScale: 1,
-      bubbleAlpha: 1,
-    };
-  }
-
-  const settlePhase = (raw - activeWindow) / settleWindow;
-  const eased = easeOutCubic(settlePhase);
-  return {
-    progress: 1,
-    motionSpeed: 0,
-    bubbleScale: Math.max(0.12, 1 - eased * 0.88),
-    bubbleAlpha: Math.max(0, 1 - eased),
-  };
-}
-
-function applyReceivePulse(robot: RobotNode, pulse: number): void {
-  robot.receivePulse = Math.max(robot.receivePulse, pulse);
-}
-
-function getReceivePulse(raw: number, activeWindow: number): number {
-  const previousStart = activeWindow * 0.78;
-  const previousEnd = Math.min(0.96, activeWindow + 0.11);
-  const duration = (previousEnd - previousStart) / 3;
-  const start = activeWindow - duration * 0.62;
-  const end = activeWindow + duration * 0.38;
-  if (raw < start || raw > end) return 0;
-
-  const phase = (raw - start) / (end - start);
-  return Math.sin(phase * Math.PI) * (1 - phase * 0.28);
-}
-
-function getEasedMotionSpeed(value: number): number {
-  const t = clamp(value, 0, 1);
-  const derivative = t < 0.5 ? 12 * t * t : 12 * (1 - t) * (1 - t);
-  return clamp(derivative / 3, 0, 1);
-}
-
-function easeOutCubic(value: number): number {
-  const t = clamp(value, 0, 1);
-  return 1 - Math.pow(1 - t, 3);
-}
-
-function drawMessageBubble(
-  ctx: CanvasRenderingContext2D,
-  position: Point,
-  angle: number,
-  size: number,
-  color: string,
-  palette: Palette,
-  crossTeam: boolean,
-  scale = 1,
-  alpha = 1
-): void {
-  if (scale <= 0.02 || alpha <= 0.01) return;
-
-  ctx.save();
-  ctx.translate(position.x, position.y);
-  ctx.rotate(angle * 0.08);
-  ctx.scale(scale, scale);
-  ctx.globalAlpha = alpha;
-  ctx.shadowColor = withAlpha(color, (palette.isLight ? 0.16 : 0.3) * alpha);
-  ctx.shadowBlur = (crossTeam ? 12 : 8) * (0.5 + scale * 0.5);
-
-  const width = size * (crossTeam ? 2.28 : 2.06);
-  const height = size * 1.42;
-  roundRectPath(ctx, -width / 2, -height / 2, width, height, size * 0.28);
-  ctx.fillStyle = withAlpha(color, palette.isLight ? 0.82 : 0.9);
-  ctx.fill();
-
-  ctx.beginPath();
-  ctx.moveTo(-width * 0.24, height * 0.42);
-  ctx.lineTo(-width * 0.32, height * 0.68);
-  ctx.lineTo(-width * 0.03, height * 0.42);
-  ctx.closePath();
-  ctx.fill();
-
-  ctx.shadowBlur = 0;
-  ctx.fillStyle = palette.robotEye;
-  for (let i = -1; i <= 1; i++) {
-    ctx.beginPath();
-    ctx.arc(i * size * 0.4, -size * 0.02, size * 0.095, 0, TAU);
-    ctx.fill();
-  }
-  ctx.restore();
-}
-
-function drawTeamLabel(
-  ctx: CanvasRenderingContext2D,
-  team: TeamNode,
-  palette: Palette,
-  mobile: boolean
-): void {
-  const label = TEAM_LABELS[team.index] ?? '';
-  if (!label) return;
-
-  const fontSize = mobile ? 7.5 : 8.5;
-  const y = team.center.y + team.radius * (mobile ? 1.65 : 1.58);
-  ctx.save();
-  ctx.font = `600 ${fontSize}px ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`;
-  ctx.textAlign = 'center';
-  ctx.textBaseline = 'middle';
-
-  const metrics = ctx.measureText(label);
-  const paddingX = mobile ? 4 : 5;
-  const paddingY = mobile ? 2 : 2.5;
-  const width = metrics.width + paddingX * 2;
-  const height = fontSize + paddingY * 2;
-  const x = team.center.x - width / 2;
-  const rectY = y - height / 2;
-
-  roundRectPath(ctx, x, rectY, width, height, height / 2);
-  ctx.fillStyle = withAlpha(palette.isLight ? '#ffffff' : '#090a14', palette.isLight ? 0.36 : 0.24);
-  ctx.fill();
-  ctx.strokeStyle = withAlpha(team.color, palette.isLight ? 0.18 : 0.24);
-  ctx.lineWidth = 0.75;
-  ctx.stroke();
-
-  ctx.shadowColor = withAlpha(team.color, palette.isLight ? 0.12 : 0.22);
-  ctx.shadowBlur = mobile ? 4 : 6;
-  ctx.fillStyle = withAlpha(palette.isLight ? '#3f3f46' : '#e4e4e7', palette.isLight ? 0.58 : 0.66);
-  ctx.fillText(label, team.center.x, y + 0.2);
-  ctx.restore();
-}
-
-function drawRobot(
-  ctx: CanvasRenderingContext2D,
-  robot: RobotNode,
-  time: number,
-  palette: Palette
-): void {
-  const size = robot.size;
-  const x = robot.x;
-  const y = robot.y + robot.bob * 0.9 - robot.receivePulse * size * 0.24;
-  const tilt = Math.sin(time * 1.5 + robot.teamIndex + robot.robotIndex * 0.8) * 0.045;
-  const img = getAvatarImage(robot.avatarUrl);
-  const avatarSize = size * 2.65;
-
-  ctx.save();
-  ctx.translate(x, y);
-  ctx.rotate(tilt);
-  ctx.scale(1 + robot.receivePulse * 0.065, 1 + robot.receivePulse * 0.065);
-  ctx.shadowColor = withAlpha(robot.color, palette.isLight ? 0.2 : 0.34);
-  ctx.shadowBlur = size * (1.25 + robot.receivePulse * 0.72);
-
-  if (img) {
-    ctx.globalAlpha = palette.isLight ? 0.92 : 0.86;
-    ctx.drawImage(img, -avatarSize / 2, -avatarSize / 2, avatarSize, avatarSize);
-    ctx.globalAlpha = 1;
-  } else {
-    drawAvatarFallback(ctx, size, robot.color, palette);
-  }
-  ctx.restore();
-}
-
-function getAvatarImage(url: string): HTMLImageElement | null {
-  const cached = avatarCache.get(url);
-  if (cached) {
-    avatarCache.delete(url);
-    avatarCache.set(url, cached);
-    return cached;
-  }
-
-  void loadAvatarImage(url);
-  return null;
-}
-
-function preloadAvatarImages(): Promise<void> {
-  return Promise.allSettled(PARTICIPANT_AVATAR_URLS.map((url) => loadAvatarImage(url))).then(
-    () => undefined
-  );
-}
-
-function loadAvatarImage(url: string): Promise<HTMLImageElement | null> {
-  const cached = avatarCache.get(url);
-  if (cached) return Promise.resolve(cached);
-
-  const loading = avatarLoading.get(url);
-  if (loading) return loading;
-
-  const promise = new Promise<HTMLImageElement | null>((resolve) => {
-    const img = new Image();
-    img.decoding = 'async';
-    img.onload = () => {
-      const finish = (): void => {
-        avatarCache.set(url, img);
-        avatarLoading.delete(url);
-        resolve(img);
-      };
-
-      if (typeof img.decode === 'function') {
-        void img.decode().then(finish, finish);
-      } else {
-        finish();
-      }
-    };
-    img.onerror = () => {
-      avatarLoading.delete(url);
-      resolve(null);
-    };
-    img.src = url;
-  });
-
-  avatarLoading.set(url, promise);
-  return promise;
-}
-
-function drawAvatarFallback(
-  ctx: CanvasRenderingContext2D,
-  size: number,
-  color: string,
-  palette: Palette
-): void {
-  ctx.strokeStyle = withAlpha(color, palette.isLight ? 0.44 : 0.56);
-  ctx.lineWidth = Math.max(1, size * 0.08);
-  ctx.beginPath();
-  ctx.moveTo(0, -size * 0.72);
-  ctx.lineTo(0, -size * 1.0);
-  ctx.stroke();
-  ctx.fillStyle = withAlpha(color, palette.isLight ? 0.64 : 0.78);
-  ctx.beginPath();
-  ctx.arc(0, -size * 1.08, size * 0.13, 0, TAU);
-  ctx.fill();
-  ctx.fillStyle = palette.robotEye;
-  ctx.beginPath();
-  ctx.arc(-size * 0.24, -size * 0.13, size * 0.095, 0, TAU);
-  ctx.arc(size * 0.24, -size * 0.13, size * 0.095, 0, TAU);
-  ctx.fill();
-}
-
-function getLocalMessagePairs(teamIndex: number, memberCount: number): [number, number][] {
-  const routeMap: [number, number][][] = [
-    [
-      [0, 2],
-      [3, 1],
-      [1, 0],
-    ],
-    [
-      [2, 0],
-      [0, 1],
-      [1, 2],
-    ],
-    [
-      [4, 1],
-      [0, 3],
-      [2, 4],
-      [3, 0],
-    ],
-  ];
-  return (routeMap[teamIndex] ?? routeMap[0]).filter(
-    ([fromIndex, toIndex]) => fromIndex < memberCount && toIndex < memberCount
-  );
-}
-
-function makeLocalCurve(
-  from: Point,
-  to: Point,
-  center: Point,
-  lift: number
-): [Point, Point, Point, Point] {
-  const mid = mix(from, to, 0.5);
-  const away = normalize({ x: mid.x - center.x, y: mid.y - center.y });
-  const control = {
-    x: mid.x + away.x * lift,
-    y: mid.y + away.y * lift,
-  };
-  return [from, mix(from, control, 0.72), mix(to, control, 0.72), to];
-}
-
-function makeStraightCurve(from: Point, to: Point): [Point, Point, Point, Point] {
-  return [from, mix(from, to, 0.33), mix(from, to, 0.66), to];
-}
-
-function createDepthParticles(width: number, height: number): DepthParticle[] {
-  const count = width < 560 ? 46 : 78;
-  return Array.from({ length: count }, (_, index) => {
-    const seed = index * 97.13;
-    return {
-      x: pseudoRandom(seed) * width,
-      y: pseudoRandom(seed + 12.4) * (height + 24),
-      size: 0.45 + pseudoRandom(seed + 22.8) * 1.15,
-      speed: 8 + pseudoRandom(seed + 31.2) * 18,
-      phase: pseudoRandom(seed + 48.7) * TAU,
-      alpha: 0.06 + pseudoRandom(seed + 72.1) * 0.16,
-    };
-  });
-}
-
-function pseudoRandom(seed: number): number {
-  const value = Math.sin(seed * 12.9898) * 43758.5453;
-  return value - Math.floor(value);
-}
-
-function cubicPoint(p0: Point, p1: Point, p2: Point, p3: Point, t: number): Point {
-  const clamped = clamp(t, 0, 1);
-  const mt = 1 - clamped;
-  const mt2 = mt * mt;
-  const t2 = clamped * clamped;
-  return {
-    x: mt2 * mt * p0.x + 3 * mt2 * clamped * p1.x + 3 * mt * t2 * p2.x + t2 * clamped * p3.x,
-    y: mt2 * mt * p0.y + 3 * mt2 * clamped * p1.y + 3 * mt * t2 * p2.y + t2 * clamped * p3.y,
-  };
-}
-
-function cubicTangent(p0: Point, p1: Point, p2: Point, p3: Point, t: number): Point {
-  const clamped = clamp(t, 0, 1);
-  const mt = 1 - clamped;
-  return {
-    x:
-      3 * mt * mt * (p1.x - p0.x) +
-      6 * mt * clamped * (p2.x - p1.x) +
-      3 * clamped * clamped * (p3.x - p2.x),
-    y:
-      3 * mt * mt * (p1.y - p0.y) +
-      6 * mt * clamped * (p2.y - p1.y) +
-      3 * clamped * clamped * (p3.y - p2.y),
-  };
-}
-
-function mix(from: Point, to: Point, amount: number): Point {
-  return {
-    x: from.x + (to.x - from.x) * amount,
-    y: from.y + (to.y - from.y) * amount,
-  };
-}
-
-function normalize(point: Point): Point {
-  const length = Math.hypot(point.x, point.y) || 1;
-  return {
-    x: point.x / length,
-    y: point.y / length,
-  };
-}
-
-function easeInOutCubic(value: number): number {
-  const t = clamp(value, 0, 1);
-  return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
-}
-
-function positiveModulo(value: number, divisor: number): number {
-  return ((value % divisor) + divisor) % divisor;
-}
-
-function clamp(value: number, min: number, max: number): number {
-  return Math.min(max, Math.max(min, value));
-}
-
-function roundRectPath(
-  ctx: CanvasRenderingContext2D,
-  x: number,
-  y: number,
-  width: number,
-  height: number,
-  radius: number
-): void {
-  const r = Math.min(radius, width / 2, height / 2);
-  ctx.beginPath();
-  ctx.moveTo(x + r, y);
-  ctx.lineTo(x + width - r, y);
-  ctx.quadraticCurveTo(x + width, y, x + width, y + r);
-  ctx.lineTo(x + width, y + height - r);
-  ctx.quadraticCurveTo(x + width, y + height, x + width - r, y + height);
-  ctx.lineTo(x + r, y + height);
-  ctx.quadraticCurveTo(x, y + height, x, y + height - r);
-  ctx.lineTo(x, y + r);
-  ctx.quadraticCurveTo(x, y, x + r, y);
-  ctx.closePath();
-}
-
-function withAlpha(hex: string, alpha: number): string {
-  const normalized = normalizeHex(hex);
-  const r = Number.parseInt(normalized.slice(1, 3), 16);
-  const g = Number.parseInt(normalized.slice(3, 5), 16);
-  const b = Number.parseInt(normalized.slice(5, 7), 16);
-  return `rgba(${r}, ${g}, ${b}, ${clamp(alpha, 0, 1)})`;
-}
-
-function normalizeHex(hex: string): string {
-  if (/^#[0-9a-fA-F]{6}$/.test(hex)) return hex;
-  if (/^#[0-9a-fA-F]{3}$/.test(hex)) {
-    return `#${hex[1]}${hex[1]}${hex[2]}${hex[2]}${hex[3]}${hex[3]}`;
-  }
-  return '#ffffff';
-}