Merge pull request #78 from httpsphl/perf/app-calm

perf(app): keep still what nobody watches

Author: httpsphl

app/src/features/bots/BotAvatar.tsx

@@ -77,11 +77,14 @@ export function BotAvatar({
   size = 28,
   framed = false,
   mood,
+  still = false,
 }: {
   color: string;
   size?: number;
   framed?: boolean;
   mood?: Mood | undefined;
+  /** Shows the mood without moving. */
+  still?: boolean;
 }) {
   // Every avatar on the page needs its own clip, blur and gradients.
   const unique = useId().replace(/[^\w-]/g, "");
@@ -106,6 +109,7 @@ export function BotAvatar({
       viewBox={box.join(" ")}
       className={`shrink-0 overflow-visible ${framed ? "rounded-lg bg-[#0b0b0b]" : ""}`}
       data-mood={mood}
+      data-still={still || undefined}
       style={style}
     >
       <defs>
@@ -203,3 +207,22 @@ function Eye({ eye, side, fill }: { eye: Ellipse; side: "l" | "r"; fill: string
     </g>
   );
 }
+
+/**
+ * A bot's mascot in a list (the sidebar, a crew's cards): it moves only
+ * while the bot does something. One idle mascot per bot, all moving, cost
+ * a repaint every frame even with nothing going on.
+ */
+export function ListAvatar({
+  bot,
+  crewPaused,
+  size,
+}: {
+  bot: Pick<Bot, "color" | "state" | "paused">;
+  crewPaused: boolean;
+  size: number;
+}) {
+  const mood = moodOf(bot, crewPaused);
+  const still = mood === "idle" || mood === "sleeping";
+  return <BotAvatar color={bot.color} size={size} mood={mood} still={still} />;
+}

app/src/features/bots/BotView.tsx

@@ -61,7 +61,7 @@ export function BotView({ bot, crew }: { bot: Bot; crew: Crew }) {
     [side, leaving],
   );
   const [pane, setPane] = useState<Pane>("chat");
-  const files = useBotFiles(bot);
+  const files = useBotFiles(bot, side === "files");
   // What the owner has seen: files newer than this are new to them.
   const [seenAt, setSeenAt] = useState(() => Date.now());
   const [since, setSince] = useState(seenAt);

app/src/features/bots/avatar.test.tsx

@@ -1,7 +1,7 @@
 import { cleanup, render } from "@testing-library/react";
 import { afterEach, describe, expect, test } from "vitest";
 import flameFrames from "../../mascot-flame.css?raw";
-import { BOTLOFT_COLOR, BotAvatar } from "./BotAvatar";
+import { BOTLOFT_COLOR, BotAvatar, ListAvatar } from "./BotAvatar";
 import { BotStateBadge } from "./BotStateBadge";
 import { BODY, DRAWN_IN, OUTLINE, SHADES } from "./mascotArt";
 import { retint, toHex, toHsl } from "./retint";
@@ -116,3 +116,28 @@ describe("state badge", () => {
     expect(container.querySelector(".state-trace")?.getAttribute("pathLength")).toBe("100");
   });
 });
+
+describe("ListAvatar", () => {
+  const bot = (state: "idle" | "busy" | "offline") => ({
+    color: BOTLOFT_COLOR,
+    state,
+    paused: false,
+  });
+
+  test("a bot at rest keeps its look but does not move; a working one moves", () => {
+    const { container, rerender } = render(
+      <ListAvatar bot={bot("idle")} crewPaused={false} size={32} />,
+    );
+    const svg = () => container.querySelector("svg") as SVGElement;
+    expect(svg().dataset.mood).toBe("idle");
+    expect(svg().hasAttribute("data-still")).toBe(true);
+
+    rerender(<ListAvatar bot={bot("offline")} crewPaused={false} size={32} />);
+    expect(svg().dataset.mood).toBe("sleeping");
+    expect(svg().hasAttribute("data-still")).toBe(true);
+
+    rerender(<ListAvatar bot={bot("busy")} crewPaused={false} size={32} />);
+    expect(svg().dataset.mood).toBe("working");
+    expect(svg().hasAttribute("data-still")).toBe(false);
+  });
+});

app/src/features/crews/CrewBots.tsx

@@ -3,7 +3,7 @@ import { useT } from "../../i18n";
 import type { Bot, Crew } from "../../lib/protocol.gen";
 import { useApp } from "../../store/context";
 import { Button } from "../../ui/Button";
-import { BotAvatar, moodOf } from "../bots/BotAvatar";
+import { ListAvatar } from "../bots/BotAvatar";
 import { BotStateBadge } from "../bots/BotStateBadge";
 import { ChiefBadge, isChief } from "../bots/ChiefBadge";
 
@@ -32,7 +32,7 @@ export function CrewBots({ crew, bots, onNewBot }: { crew: Crew; bots: Bot[]; on
             className="flex h-full w-full flex-col gap-2 rounded-xl border border-line bg-panel p-3.5 text-left transition-[border-color,transform,box-shadow] duration-200 hover:-translate-y-0.5 hover:border-line-strong hover:shadow-sm"
           >
             <div className="flex w-full items-center gap-2.5">
-              <BotAvatar color={bot.color} size={32} mood={moodOf(bot, crew.paused)} />
+              <ListAvatar bot={bot} crewPaused={crew.paused} size={32} />
               <div className="min-w-0 flex-1">
                 <p className="flex items-center gap-1.5">
                   <span className="truncate font-semibold">{bot.name}</span>

app/src/features/crews/Sidebar.tsx

@@ -11,7 +11,7 @@ import { Button } from "../../ui/Button";
 import { ContextMenu, menuPoint, type Point } from "../../ui/ContextMenu";
 import { APP_OPENED } from "../../ui/motion";
 import { AccountArea } from "../account/AccountArea";
-import { BotAvatar, moodOf } from "../bots/BotAvatar";
+import { ListAvatar } from "../bots/BotAvatar";
 import { BotStateBadge, stateView } from "../bots/BotStateBadge";
 import { useBotActions } from "../bots/botActions";
 import { ChiefBadge, isChief } from "../bots/ChiefBadge";
@@ -107,7 +107,7 @@ const Conversation = memo(function Conversation({ bot, crew }: { bot: Bot; crew:
         }}
         className={`${row} gap-2.5 px-2.5 py-2 ${selected || menuAt ? "bg-sunken" : ""}`}
       >
-        <BotAvatar color={bot.color} size={32} mood={moodOf(bot, crew.paused)} />
+        <ListAvatar bot={bot} crewPaused={crew.paused} size={32} />
         <span className="min-w-0 flex-1">
           <span className="flex items-baseline gap-2">
             <span className="flex min-w-0 flex-1 items-center gap-1">

app/src/features/files/useBotFiles.ts

@@ -1,13 +1,16 @@
 // The files a bot made, kept current (spec 8.5, 15.1): read when the bot is
-// opened, and again while it works and when it stops, since a scan of its
-// folders is the only way to see what a script or a command made.
+// opened, again while it works with the files panel in sight, and when it
+// stops, since a scan of its folders is the only way to see what a script
+// or a command made. Each read walks the folders, so nobody pays for it
+// while the list is out of sight.
 
 import { useCallback, useEffect, useRef, useState } from "react";
 import { errorText } from "../../lib/api";
 import type { Bot, BotFile } from "../../lib/protocol.gen";
+import { useWindowVisible } from "../../shell/visibility";
 import { useApi, useApp } from "../../store/context";
 
-/** How often the list is read while the bot works. */
+/** How often the list is read while the bot works and the panel is in sight. */
 const WHILE_WORKING_MS = 4000;
 
 export interface BotFiles {
@@ -18,7 +21,8 @@ export interface BotFiles {
   refresh(): Promise<void>;
 }
 
-export function useBotFiles(bot: Pick<Bot, "id" | "state">): BotFiles {
+/** `watching`: the files panel is open. */
+export function useBotFiles(bot: Pick<Bot, "id" | "state">, watching: boolean): BotFiles {
   const api = useApi();
   const open = useApp((state) => state.connection.kind === "open");
   const [files, setFiles] = useState<BotFile[]>([]);
@@ -60,6 +64,7 @@ export function useBotFiles(bot: Pick<Bot, "id" | "state">): BotFiles {
 
   const working = bot.state === "busy" || bot.state === "needs_approval";
   const wasWorking = useRef(working);
+  const inSight = useWindowVisible() && watching;
   useEffect(() => {
     if (!open) {
       return;
@@ -69,12 +74,14 @@ export function useBotFiles(bot: Pick<Bot, "id" | "state">): BotFiles {
       void refresh();
     }
     wasWorking.current = working;
-    if (!working) {
+    if (!working || !inSight) {
       return;
     }
+    // Coming into sight mid-turn shows what was made meanwhile.
+    void refresh();
     const timer = setInterval(() => void refresh(), WHILE_WORKING_MS);
     return () => clearInterval(timer);
-  }, [open, working, refresh]);
+  }, [open, working, inSight, refresh]);
 
   return { files, loading, error, refresh };
 }

app/src/index.css

@@ -10,6 +10,7 @@
 @import "./panels.css";
 @import "./effort.css";
 @import "./motion-less.css";
+@import "./paused.css";
 
 /* Colors are tokens so the light and dark themes swap in one place
    (spec 15.3). State colors always go with an icon and a label. */

app/src/main.tsx

@@ -7,6 +7,7 @@ import { connect, rpcUrl } from "./lib/client";
 import type { Host } from "./lib/host";
 import { tauriHost } from "./lib/tauriHost";
 import { prefs } from "./shell/prefs";
+import { markHidden, watchVisibility } from "./shell/visibility";
 import { currentZoom } from "./shell/zoom";
 import "./index.css";
 
@@ -37,6 +38,12 @@ props().then(({ host, connect: open }) => {
   if (prefs.lessMotion.get()) {
     document.documentElement.dataset.motion = "less";
   }
+  watchVisibility();
+  // Opened at sign-in, the window stays hidden until the owner opens it.
+  host.launchedAtSignIn().then(
+    (hidden) => hidden && !document.hasFocus() && markHidden(true),
+    () => {},
+  );
   createRoot(root).render(
     <StrictMode>
       <App host={host} connect={open} />

app/src/mascot.css

@@ -97,6 +97,13 @@
     animation: spark 1.5s ease-out infinite;
     animation-delay: var(--spark-delay, 0s);
   }
+
+  /* In a list, a bot at rest keeps its look (shut eyes, low flame) but
+     does not move: a morphing clip path repaints every frame, one per
+     mascot on screen. */
+  [data-mood][data-still] * {
+    animation: none;
+  }
 }
 
 @keyframes eye-blink {

app/src/paused.css

@@ -0,0 +1,10 @@
+/* The window is out of sight (shell/visibility.ts): nothing animates for
+   nobody. Paused, not stopped, so each animation goes on where it was. */
+
+/* biome-ignore-start lint/complexity/noImportantStyles: a hidden window must pause every animation, inline ones included */
+:root[data-hidden] *,
+:root[data-hidden] *::before,
+:root[data-hidden] *::after {
+  animation-play-state: paused !important;
+}
+/* biome-ignore-end lint/complexity/noImportantStyles: a hidden window must pause every animation, inline ones included */