fix(chatbot): disambiguate panel focus check and avoid color-mix on canvas (#325)

Address the fifth Copilot review:

- isViewingChat keyed on `.filigran-chatbot`, which the toggle button also
  carries, so focusing the toggle was mistaken for viewing the chat and
  suppressed the completion notice. Key on `.filigran-chatbot.fixed` instead -
  the panel root carries both classes in every mode, the toggle button does not.
- The waiting game set the canvas fillStyle to a color-mix() string, which is
  not reliably accepted as a canvas colour (some browsers fall back to opaque
  black). Use a single solid accent fillStyle and vary opacity via globalAlpha.

Author: SamuelHassine

packages/filigran-chatbot/src/components/ChatPanel.tsx

@@ -184,7 +184,10 @@ export const ChatPanel: FunctionComponent<ChatPanelProps> = ({
     t,
     enabled: notifyOnComplete,
     onComplete: onTaskComplete,
-    isViewingChat: () => typeof document !== 'undefined' && !!document.activeElement?.closest('.filigran-chatbot'),
+    // Key on `.filigran-chatbot.fixed` (the panel root carries both in every
+    // mode) rather than `.filigran-chatbot` alone, which the toggle button also
+    // uses — otherwise focusing the toggle would be mistaken for viewing the chat.
+    isViewingChat: () => typeof document !== 'undefined' && !!document.activeElement?.closest('.filigran-chatbot.fixed'),
   });
 
   // Download an agent-generated file. The URL is resolved against the host

packages/filigran-chatbot/src/components/ChatWaitingGame.tsx

@@ -232,33 +232,34 @@ function createInvaderGame(canvas: HTMLCanvasElement, messages: string[], onMess
     }
   }
 
-  function withAlpha(a: number): string {
-    return `color-mix(in srgb, ${accent} ${Math.round(a * 100)}%, transparent)`;
-  }
-
   function draw(): void {
     ctx.clearRect(0, 0, cssW, cssH);
 
+    // Single solid fill colour throughout; vary opacity via globalAlpha rather
+    // than CSS color-mix() strings, which are not reliably accepted as a canvas
+    // fillStyle on every browser (some fall back to opaque black).
+    ctx.fillStyle = accent;
+
     ctx.font = arcadeFont(fontPx);
     ctx.textBaseline = 'middle';
-    ctx.fillStyle = withAlpha(0.85);
+    ctx.globalAlpha = 0.85;
     for (const l of letters) {
       if (l.alive) ctx.fillText(l.char, l.x, letterY);
     }
 
-    ctx.fillStyle = accent;
+    ctx.globalAlpha = 1;
     for (const b of bullets) {
       ctx.fillRect(b.x - 1, b.y, 2, 7);
     }
 
     for (const p of particles) {
-      ctx.fillStyle = withAlpha(Math.max(p.life, 0) * 0.9);
+      ctx.globalAlpha = Math.max(p.life, 0) * 0.9;
       ctx.fillRect(p.x - 1.5, p.y - 1.5, 3, 3);
     }
 
+    ctx.globalAlpha = 1;
     const frame = INVADER_FRAMES[legFrame];
     const ox = Math.round(shipX - SPRITE_W / 2);
-    ctx.fillStyle = accent;
     for (let r = 0; r < frame.length; r++) {
       const row = frame[r];
       for (let c = 0; c < row.length; c++) {