From bd2ab602e0ca7c3cf6105b3085d1cbb0d4c29d5f Mon Sep 17 00:00:00 2001
From: Meta Vens <rwvens@hotmail.com>
Date: Tue, 5 May 2026 01:50:36 +0100
Subject: [PATCH] Separate sharp aquarium overlay from fluid ink

---
 apps/epiphany-gui/src/App.tsx          |   9 +-
 apps/epiphany-gui/src/aquariumFluid.ts | 236 ++++++++++++++++++++-----
 apps/epiphany-gui/src/styles.css       |   7 +
 3 files changed, 203 insertions(+), 49 deletions(-)

diff --git a/apps/epiphany-gui/src/App.tsx b/apps/epiphany-gui/src/App.tsx
index 14a33d19..2844d279 100644
--- a/apps/epiphany-gui/src/App.tsx
+++ b/apps/epiphany-gui/src/App.tsx
@@ -1216,6 +1216,7 @@ function AgentConstellation({
   isActionBlocked?: (action: OperatorAction) => boolean;
 }) {
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
+  const crispCanvasRef = useRef<HTMLCanvasElement | null>(null);
   const optionByKeyRef = useRef(new globalThis.Map<string, AquariumOption>());
   const rendererRef = useRef<AquariumRenderer | null>(null);
   const [selectedAgentId, setSelectedAgentId] = useState("coordinator");
@@ -1297,8 +1298,9 @@ function AgentConstellation({
 
   useEffect(() => {
     const canvas = canvasRef.current;
+    const crispCanvas = crispCanvasRef.current;
     if (!canvas) return;
-    const renderer = createAquariumRenderer(canvas);
+    const renderer = createAquariumRenderer(canvas, crispCanvas);
     rendererRef.current = renderer;
     return () => {
       renderer.dispose();
@@ -1361,6 +1363,11 @@ function AgentConstellation({
           onPointerLeave={handlePointerLeave}
           onClick={handleCanvasClick}
         />
+        <canvas
+          ref={crispCanvasRef}
+          className="agentCrispCanvas"
+          aria-hidden="true"
+        />
         <div className="agentStageVignette" aria-hidden="true" />
         {variant === "band" ? (
           agents.map((agent) => (
diff --git a/apps/epiphany-gui/src/aquariumFluid.ts b/apps/epiphany-gui/src/aquariumFluid.ts
index ec000521..b21e9994 100644
--- a/apps/epiphany-gui/src/aquariumFluid.ts
+++ b/apps/epiphany-gui/src/aquariumFluid.ts
@@ -129,16 +129,16 @@ uniform float uActivity[7];
 uniform int uCount;
 uniform float uAspect;
 void main() {
-  vec2 velocity = texture(uVelocity, vUv).xy * 0.982;
+  vec2 velocity = texture(uVelocity, vUv).xy * 0.994;
   for (int i = 0; i < 7; i += 1) {
     if (i >= uCount) break;
     vec2 agent = uAgents[i].xy;
     vec2 delta = vUv - agent;
     delta.x *= uAspect;
-    float influence = exp(-dot(delta, delta) * 58.0);
-    vec2 tangent = normalize(vec2(-delta.y, delta.x) + 0.0001) * (0.55 + uActivity[i] * 1.15);
-    vec2 push = uAgents[i].zw * 0.16 + tangent;
-    velocity += push * influence * (0.045 + uActivity[i] * 0.075);
+    float influence = exp(-dot(delta, delta) * 42.0);
+    vec2 tangent = normalize(vec2(-delta.y, delta.x) + 0.0001) * (28.0 + uActivity[i] * 42.0);
+    vec2 push = uAgents[i].zw * 2.8 + tangent;
+    velocity += push * influence * (0.18 + uActivity[i] * 0.24);
   }
   outColor = vec4(velocity, 0.0, 1.0);
 }`;
@@ -240,7 +240,7 @@ void main() {
   vec4 source = texture(uSource, vUv);
   vec3 base = max(dye.rgb, vec3(0.004, 0.008, 0.006));
   vec3 color = base + source.rgb * source.a * uGain;
-  outColor = vec4(min(color, vec3(0.72)), 1.0);
+  outColor = vec4(min(color, vec3(0.86)), 1.0);
 }`;
 
 const displayShader = `#version 300 es
@@ -255,12 +255,14 @@ void main() {
   outColor = vec4(color * 0.92, 1.0);
 }`;
 
-export function createAquariumRenderer(canvas: HTMLCanvasElement): AquariumRenderer {
+export function createAquariumRenderer(canvas: HTMLCanvasElement): AquariumRenderer;
+export function createAquariumRenderer(canvas: HTMLCanvasElement, crispCanvas: HTMLCanvasElement | null): AquariumRenderer;
+export function createAquariumRenderer(canvas: HTMLCanvasElement, crispCanvas: HTMLCanvasElement | null = null): AquariumRenderer {
   const gl = canvas.getContext("webgl2", { alpha: false, antialias: false, preserveDrawingBuffer: true });
   if (!gl || !gl.getExtension("EXT_color_buffer_float")) {
-    return new CanvasAquariumRenderer(canvas);
+    return new CanvasAquariumRenderer(canvas, crispCanvas);
   }
-  return new WebglAquariumRenderer(canvas, gl);
+  return new WebglAquariumRenderer(canvas, gl, crispCanvas);
 }
 
 class WebglAquariumRenderer implements AquariumRenderer {
@@ -284,12 +286,15 @@ class WebglAquariumRenderer implements AquariumRenderer {
   private sourceTexture: WebGLTexture | null = null;
   private velocity: DoubleTarget | null = null;
 
-  constructor(private canvas: HTMLCanvasElement, private gl: WebGL2RenderingContext) {
+  private crispContext: CanvasRenderingContext2D | null = null;
+
+  constructor(private canvas: HTMLCanvasElement, private gl: WebGL2RenderingContext, private crispCanvas: HTMLCanvasElement | null) {
     const sourceContext = this.sourceCanvas.getContext("2d");
     if (!sourceContext) {
       throw new Error("Aquarium source canvas could not be created.");
     }
     this.sourceContext = sourceContext;
+    this.crispContext = crispCanvas?.getContext("2d") ?? null;
     this.programs = {
       advect: compileProgram(gl, vertexShader, advectShader),
       curl: compileProgram(gl, vertexShader, curlShader),
@@ -346,6 +351,7 @@ class WebglAquariumRenderer implements AquariumRenderer {
     this.uploadSource();
     this.stepFluid(projected);
     this.display();
+    this.drawCrispOverlay(projected, activeAgent);
     this.raf = requestAnimationFrame(this.render);
   };
 
@@ -358,6 +364,10 @@ class WebglAquariumRenderer implements AquariumRenderer {
       this.canvas.width = displayWidth;
       this.canvas.height = displayHeight;
     }
+    if (this.crispCanvas && (this.crispCanvas.width !== displayWidth || this.crispCanvas.height !== displayHeight)) {
+      this.crispCanvas.width = displayWidth;
+      this.crispCanvas.height = displayHeight;
+    }
     const scale = this.frame.variant === "fullscreen" ? 0.56 : 0.7;
     const width = Math.max(256, Math.min(960, Math.floor(displayWidth * scale)));
     const height = Math.max(192, Math.min(640, Math.floor(displayHeight * scale)));
@@ -513,18 +523,36 @@ class WebglAquariumRenderer implements AquariumRenderer {
     ctx.save();
     ctx.translate(agent.x, agent.y);
     ctx.rotate(Math.atan2(agent.vy, agent.vx || 0.001) * 0.12);
-    ctx.globalAlpha = 0.045 + agent.activity * 0.032 + (hot ? 0.032 : 0);
+    ctx.globalCompositeOperation = "lighter";
+    for (let index = 0; index < 3; index += 1) {
+      const lag = 11 + index * 9;
+      const radius = size * (0.42 - index * 0.06);
+      ctx.globalAlpha = 0.075 + agent.activity * 0.045 - index * 0.014;
+      ctx.fillStyle = index === 0 ? agent.color : agent.glow;
+      ctx.beginPath();
+      ctx.arc(-agent.vx * lag - index * 3, -agent.vy * lag + index * 2, radius, 0, Math.PI * 2);
+      ctx.fill();
+    }
+    ctx.globalAlpha = 0.04 + agent.activity * 0.024;
+    ctx.strokeStyle = agent.glow;
+    ctx.lineWidth = 1.8 + agent.activity * 1.2;
+    ctx.beginPath();
+    ctx.moveTo(-agent.vx * 7, -agent.vy * 7);
+    ctx.quadraticCurveTo(-agent.vx * 16, -agent.vy * 8, -agent.vx * 24, -agent.vy * 18);
+    ctx.stroke();
+    ctx.globalCompositeOperation = "source-over";
+    ctx.globalAlpha = 0.025 + agent.activity * 0.018 + (hot ? 0.016 : 0);
     ctx.shadowColor = agent.glow;
-    ctx.shadowBlur = 10 + agent.activity * 12;
+    ctx.shadowBlur = 8 + agent.activity * 10;
     ctx.fillStyle = agent.color;
     drawAgentPath(ctx, agent.shape, size);
     ctx.fill();
     ctx.shadowBlur = 0;
-    ctx.globalAlpha = hot ? 0.14 : 0.075;
+    ctx.globalAlpha = hot ? 0.09 : 0.045;
     ctx.strokeStyle = "#ffffff";
     ctx.lineWidth = hot ? 1.8 : 1;
     ctx.stroke();
-    ctx.globalAlpha = hot ? 0.24 : 0.13;
+    ctx.globalAlpha = hot ? 0.095 : 0.042;
     ctx.fillStyle = "#fffaf0";
     ctx.font = `900 ${Math.max(10, size * 0.42)}px Inter, system-ui, sans-serif`;
     ctx.textAlign = "center";
@@ -533,13 +561,13 @@ class WebglAquariumRenderer implements AquariumRenderer {
     ctx.restore();
 
     ctx.save();
-    ctx.globalAlpha = hot ? 0.105 : 0.055;
-    ctx.fillStyle = "rgba(5, 12, 9, 0.8)";
-    ctx.strokeStyle = hexAlpha(agent.color, hot ? 0.6 : 0.32);
+    ctx.globalAlpha = hot ? 0.038 : 0.018;
+    ctx.fillStyle = agent.color;
+    ctx.strokeStyle = hexAlpha(agent.glow, hot ? 0.5 : 0.26);
     roundedRect(ctx, agent.x - 40, agent.y + size * 0.72, 80, 34, 7);
     ctx.fill();
     ctx.stroke();
-    ctx.fillStyle = "#ffffff";
+    ctx.fillStyle = agent.glow;
     ctx.font = "900 10px Inter, system-ui, sans-serif";
     ctx.textAlign = "center";
     ctx.fillText(agent.name, agent.x, agent.y + size * 0.72 + 13);
@@ -553,23 +581,13 @@ class WebglAquariumRenderer implements AquariumRenderer {
     const x = clamp(agent.x + (agent.x > this.simWidth * 0.68 ? -boxWidth - 36 : 36), 14, this.simWidth - boxWidth - 14);
     const y = clamp(agent.y - 78, 12, this.simHeight - 116);
     ctx.save();
-    ctx.globalAlpha = 0.055;
-    ctx.fillStyle = "#f8fcf2";
-    ctx.strokeStyle = agent.color;
+    ctx.globalAlpha = 0.018;
+    ctx.strokeStyle = agent.glow;
     ctx.shadowColor = agent.glow;
-    ctx.shadowBlur = 6;
+    ctx.shadowBlur = 5;
     roundedRect(ctx, x, y, boxWidth, 82, 9);
-    ctx.fill();
     ctx.stroke();
     ctx.shadowBlur = 0;
-    ctx.globalAlpha = 0.16;
-    ctx.fillStyle = agent.color;
-    ctx.font = "900 10px Inter, system-ui, sans-serif";
-    ctx.fillText(agent.name.toUpperCase(), x + 10, y + 10);
-    ctx.globalAlpha = 0.12;
-    ctx.fillStyle = "#172018";
-    ctx.font = "800 12px Inter, system-ui, sans-serif";
-    wrapCanvasText(ctx, agent.thought, x + 10, y + 27, boxWidth - 20, 15, 3);
     ctx.restore();
   }
 
@@ -592,15 +610,12 @@ class WebglAquariumRenderer implements AquariumRenderer {
       if (!option.disabled) {
         this.hotOptions.push({ x, y, radius: 32, key: option.key });
       }
-      ctx.globalAlpha = option.disabled ? 0.028 : hot ? 0.125 : 0.065;
-      ctx.fillStyle = option.disabled ? "rgba(8, 14, 12, 0.6)" : hot ? agent.color : "rgba(8, 14, 12, 0.82)";
-      ctx.strokeStyle = option.disabled ? "rgba(226, 245, 225, 0.14)" : hexAlpha(agent.glow, hot ? 0.78 : 0.48);
+      ctx.globalAlpha = option.disabled ? 0.008 : hot ? 0.04 : 0.018;
+      ctx.fillStyle = option.disabled ? agent.glow : agent.color;
+      ctx.strokeStyle = option.disabled ? hexAlpha(agent.glow, 0.12) : hexAlpha(agent.glow, hot ? 0.62 : 0.32);
       roundedRect(ctx, x - 37, y - 15, 74, 30, 15);
       ctx.fill();
       ctx.stroke();
-      ctx.globalAlpha = option.disabled ? 0.055 : hot ? 0.23 : 0.145;
-      ctx.fillStyle = "#ffffff";
-      ctx.fillText(option.label.toUpperCase(), x, y + 1);
     }
     ctx.restore();
   }
@@ -608,7 +623,7 @@ class WebglAquariumRenderer implements AquariumRenderer {
   private drawDeckSource(ctx: CanvasRenderingContext2D) {
     if (!this.frame.activeLabel) return;
     ctx.save();
-    ctx.globalAlpha = 0.022;
+    ctx.globalAlpha = 0.005;
     ctx.fillStyle = "#f7bd58";
     ctx.font = `900 ${Math.max(30, Math.min(this.simWidth, this.simHeight) * 0.1)}px Inter, system-ui, sans-serif`;
     ctx.textAlign = "right";
@@ -628,8 +643,8 @@ class WebglAquariumRenderer implements AquariumRenderer {
 
   private stepFluid(projected: ProjectedAgent[]) {
     if (!this.velocity || !this.dye || !this.pressure || !this.divergence || !this.curl || !this.sourceTexture) return;
-    const dt = 0.046;
-    this.runAdvect(this.velocity.read.texture, this.velocity.read.texture, this.velocity.write, dt, 0.986);
+    const dt = 0.021;
+    this.runAdvect(this.velocity.read.texture, this.velocity.read.texture, this.velocity.write, dt, 0.993);
     this.velocity.swap();
     this.runVelocitySplat(projected);
     this.runCurl();
@@ -637,7 +652,7 @@ class WebglAquariumRenderer implements AquariumRenderer {
     this.runDivergence();
     this.runPressure();
     this.runGradientSubtract();
-    this.runAdvect(this.velocity.read.texture, this.dye.read.texture, this.dye.write, dt, 0.982);
+    this.runAdvect(this.velocity.read.texture, this.dye.read.texture, this.dye.write, dt, 0.9991);
     this.dye.swap();
     this.runInject();
   }
@@ -662,8 +677,8 @@ class WebglAquariumRenderer implements AquariumRenderer {
       const agent = projected[index];
       this.agentsUniform[index * 4] = agent.x / this.simWidth;
       this.agentsUniform[index * 4 + 1] = 1 - agent.y / this.simHeight;
-      this.agentsUniform[index * 4 + 2] = agent.vx * 0.07;
-      this.agentsUniform[index * 4 + 3] = -agent.vy * 0.07;
+      this.agentsUniform[index * 4 + 2] = agent.vx * 1.45;
+      this.agentsUniform[index * 4 + 3] = -agent.vy * 1.45;
       this.activity[index] = agent.activity;
     }
     this.drawTo(this.velocity.write, this.programs.velocitySplat, (gl, program) => {
@@ -694,7 +709,7 @@ class WebglAquariumRenderer implements AquariumRenderer {
       gl.uniform1i(gl.getUniformLocation(program, "uVelocity"), 0);
       gl.uniform1i(gl.getUniformLocation(program, "uCurl"), 1);
       gl.uniform2f(gl.getUniformLocation(program, "uTexelSize"), 1 / this.simWidth, 1 / this.simHeight);
-      gl.uniform1f(gl.getUniformLocation(program, "uCurlStrength"), 1.15);
+      gl.uniform1f(gl.getUniformLocation(program, "uCurlStrength"), 24.0);
       gl.uniform1f(gl.getUniformLocation(program, "uDt"), dt);
     });
     this.velocity.swap();
@@ -711,7 +726,7 @@ class WebglAquariumRenderer implements AquariumRenderer {
 
   private runPressure() {
     if (!this.pressure || !this.divergence) return;
-    for (let index = 0; index < 14; index += 1) {
+    for (let index = 0; index < 24; index += 1) {
       this.drawTo(this.pressure.write, this.programs.pressure, (gl, program) => {
         this.bindTexture(0, this.pressure?.read.texture ?? null);
         this.bindTexture(1, this.divergence?.texture ?? null);
@@ -742,8 +757,8 @@ class WebglAquariumRenderer implements AquariumRenderer {
       this.bindTexture(1, this.sourceTexture);
       gl.uniform1i(gl.getUniformLocation(program, "uDye"), 0);
       gl.uniform1i(gl.getUniformLocation(program, "uSource"), 1);
-      gl.uniform1f(gl.getUniformLocation(program, "uGain"), 0.13);
-      gl.uniform1f(gl.getUniformLocation(program, "uDissipation"), 0.983);
+      gl.uniform1f(gl.getUniformLocation(program, "uGain"), 0.055);
+      gl.uniform1f(gl.getUniformLocation(program, "uDissipation"), 0.9988);
     });
     this.dye.swap();
   }
@@ -759,6 +774,131 @@ class WebglAquariumRenderer implements AquariumRenderer {
     gl.drawArrays(gl.TRIANGLES, 0, 3);
   }
 
+  private drawCrispOverlay(projected: ProjectedAgent[], activeAgent?: ProjectedAgent) {
+    if (!this.crispCanvas || !this.crispContext || !this.simWidth || !this.simHeight) return;
+    const ctx = this.crispContext;
+    const scaleX = this.crispCanvas.width / this.simWidth;
+    const scaleY = this.crispCanvas.height / this.simHeight;
+    ctx.save();
+    ctx.setTransform(1, 0, 0, 1, 0, 0);
+    ctx.clearRect(0, 0, this.crispCanvas.width, this.crispCanvas.height);
+    ctx.scale(scaleX, scaleY);
+    for (const agent of projected) {
+      const hot = agent.id === activeAgent?.id || agent.id === this.frame.selectedAgentId;
+      this.drawCrispAgent(ctx, agent, hot);
+    }
+    if (activeAgent) {
+      this.drawCrispThought(ctx, activeAgent);
+      this.drawCrispOptions(ctx, activeAgent);
+    }
+    this.drawCrispDeck(ctx);
+    ctx.restore();
+  }
+
+  private drawCrispAgent(ctx: CanvasRenderingContext2D, agent: ProjectedAgent, hot: boolean) {
+    const size = 24 + agent.activity * 13 + (hot ? 5 : 0);
+    ctx.save();
+    ctx.translate(agent.x, agent.y);
+    ctx.rotate(Math.atan2(agent.vy, agent.vx || 0.001) * 0.14);
+    ctx.globalAlpha = hot ? 0.92 : 0.74;
+    ctx.shadowColor = agent.glow;
+    ctx.shadowBlur = hot ? 18 : 10;
+    ctx.fillStyle = agent.color;
+    drawAgentPath(ctx, agent.shape, size);
+    ctx.fill();
+    ctx.shadowBlur = 0;
+    ctx.strokeStyle = hot ? "rgba(255, 255, 255, 0.84)" : "rgba(255, 255, 255, 0.54)";
+    ctx.lineWidth = hot ? 1.9 : 1.1;
+    ctx.stroke();
+    ctx.fillStyle = "#fffaf0";
+    ctx.font = `900 ${Math.max(10, size * 0.43)}px Inter, system-ui, sans-serif`;
+    ctx.textAlign = "center";
+    ctx.textBaseline = "middle";
+    ctx.fillText(agent.glyph, 0, 1);
+    ctx.restore();
+
+    ctx.save();
+    ctx.globalAlpha = hot ? 0.82 : 0.62;
+    ctx.fillStyle = "rgba(5, 12, 9, 0.72)";
+    ctx.strokeStyle = hexAlpha(agent.color, hot ? 0.76 : 0.42);
+    roundedRect(ctx, agent.x - 42, agent.y + size * 0.74, 84, 34, 7);
+    ctx.fill();
+    ctx.stroke();
+    ctx.fillStyle = "rgba(247, 255, 247, 0.94)";
+    ctx.font = "900 10px Inter, system-ui, sans-serif";
+    ctx.textAlign = "center";
+    ctx.fillText(agent.name, agent.x, agent.y + size * 0.74 + 13);
+    ctx.fillStyle = "rgba(226, 245, 225, 0.74)";
+    ctx.font = "900 8px Inter, system-ui, sans-serif";
+    ctx.fillText(agent.status.slice(0, 16).toUpperCase(), agent.x, agent.y + size * 0.74 + 26);
+    ctx.restore();
+  }
+
+  private drawCrispThought(ctx: CanvasRenderingContext2D, agent: ProjectedAgent) {
+    const boxWidth = Math.min(260, Math.max(160, this.simWidth * 0.23));
+    const x = clamp(agent.x + (agent.x > this.simWidth * 0.68 ? -boxWidth - 36 : 36), 14, this.simWidth - boxWidth - 14);
+    const y = clamp(agent.y - 78, 12, this.simHeight - 116);
+    ctx.save();
+    ctx.globalAlpha = 0.78;
+    ctx.fillStyle = "rgba(248, 252, 242, 0.82)";
+    ctx.strokeStyle = hexAlpha(agent.color, 0.72);
+    ctx.shadowColor = agent.glow;
+    ctx.shadowBlur = 12;
+    roundedRect(ctx, x, y, boxWidth, 82, 9);
+    ctx.fill();
+    ctx.stroke();
+    ctx.shadowBlur = 0;
+    ctx.fillStyle = agent.color;
+    ctx.font = "900 10px Inter, system-ui, sans-serif";
+    ctx.textAlign = "left";
+    ctx.textBaseline = "top";
+    ctx.fillText(agent.name.toUpperCase(), x + 10, y + 10);
+    ctx.fillStyle = "#172018";
+    ctx.font = "800 12px Inter, system-ui, sans-serif";
+    wrapCanvasText(ctx, agent.thought, x + 10, y + 27, boxWidth - 20, 15, 3);
+    ctx.restore();
+  }
+
+  private drawCrispOptions(ctx: CanvasRenderingContext2D, agent: ProjectedAgent) {
+    const options = agent.options ?? [];
+    if (!options.length) return;
+    const radius = this.simWidth < 540 ? 64 : 86;
+    const arc = Math.min(Math.PI * 1.2, Math.max(Math.PI * 0.7, options.length * 0.34));
+    const start = -Math.PI / 2 - arc / 2;
+    ctx.save();
+    ctx.font = "900 9px Inter, system-ui, sans-serif";
+    ctx.textAlign = "center";
+    ctx.textBaseline = "middle";
+    for (let index = 0; index < options.length; index += 1) {
+      const option = options[index];
+      const angle = start + (arc * (index + 0.5)) / options.length;
+      const x = clamp(agent.x + Math.cos(angle) * radius, 42, this.simWidth - 42);
+      const y = clamp(agent.y + Math.sin(angle) * radius, 48, this.simHeight - 48);
+      const hot = this.pointer.active && distance(this.pointer.x, this.pointer.y, x, y) < 32;
+      ctx.globalAlpha = option.disabled ? 0.34 : hot ? 0.9 : 0.72;
+      ctx.fillStyle = option.disabled ? "rgba(8, 14, 12, 0.68)" : hot ? agent.color : "rgba(8, 14, 12, 0.78)";
+      ctx.strokeStyle = option.disabled ? "rgba(226, 245, 225, 0.22)" : hexAlpha(agent.glow, hot ? 0.9 : 0.58);
+      roundedRect(ctx, x - 37, y - 15, 74, 30, 15);
+      ctx.fill();
+      ctx.stroke();
+      ctx.fillStyle = option.disabled ? "rgba(236, 246, 235, 0.42)" : "#ffffff";
+      ctx.fillText(option.label.toUpperCase(), x, y + 1);
+    }
+    ctx.restore();
+  }
+
+  private drawCrispDeck(ctx: CanvasRenderingContext2D) {
+    if (!this.frame.activeLabel) return;
+    ctx.save();
+    ctx.globalAlpha = 0.16;
+    ctx.fillStyle = "#f7bd58";
+    ctx.font = `900 ${Math.max(30, Math.min(this.simWidth, this.simHeight) * 0.1)}px Inter, system-ui, sans-serif`;
+    ctx.textAlign = "right";
+    ctx.textBaseline = "bottom";
+    ctx.fillText(this.frame.activeLabel.toUpperCase(), this.simWidth - 14, this.simHeight - 10);
+    ctx.restore();
+  }
+
   private drawTo(target: FluidTarget, program: WebGLProgram, uniforms: (gl: WebGL2RenderingContext, program: WebGLProgram) => void) {
     const gl = this.gl;
     gl.bindFramebuffer(gl.FRAMEBUFFER, target.fbo);
@@ -782,7 +922,7 @@ class CanvasAquariumRenderer implements AquariumRenderer {
   private pointer = { active: false, x: 0, y: 0 };
   private raf = 0;
 
-  constructor(private canvas: HTMLCanvasElement) {
+  constructor(private canvas: HTMLCanvasElement, private crispCanvas: HTMLCanvasElement | null = null) {
     this.raf = requestAnimationFrame(this.render);
   }
 
diff --git a/apps/epiphany-gui/src/styles.css b/apps/epiphany-gui/src/styles.css
index fcf95477..c205b0e2 100644
--- a/apps/epiphany-gui/src/styles.css
+++ b/apps/epiphany-gui/src/styles.css
@@ -821,6 +821,7 @@ body:has(.immersiveShell) {
 }
 
 .agentSmokeCanvas,
+.agentCrispCanvas,
 .agentStageVignette {
   position: absolute;
   inset: 0;
@@ -834,6 +835,12 @@ body:has(.immersiveShell) {
   cursor: crosshair;
 }
 
+.agentCrispCanvas {
+  z-index: 2;
+  display: block;
+  pointer-events: none;
+}
+
 .simulationOnlyControls {
   position: absolute;
   width: 1px;