mulmoclaude 0.1.2 → 0.4.0

package/src/composables/useDynamicFavicon.ts

@@ -1,11 +1,21 @@
 // Dynamic favicon that changes color based on agent state (#470).
 //
-// Uses Canvas API to draw a rounded-square icon with the letter "M"
-// in the center. Color reflects the current state:
+// Renders the MulmoClaude mascot on a colored rounded square. The
+// background color reflects state, and the mascot floats on top:
 //   idle (gray) → running (blue, pulse) → done (green) → error (red)
 //   notification badge (orange dot) overlaid when unread count > 0.
+//
+// The logo PNG has an opaque white background, which would otherwise
+// hide the state color. On first load we pre-process the pixels,
+// punching out near-white pixels to transparency so the colored
+// backing shows through. The processed image is cached as an
+// offscreen canvas for the lifetime of the page.
+//
+// If the logo fails to load we fall back to the earlier "M"-letter
+// variant so the tab icon never disappears entirely.
 
 import { watch, type Ref, type ComputedRef } from "vue";
+import logoUrl from "../assets/mulmo_bw.png";
 
 export const FAVICON_STATES = {
   idle: "idle",
@@ -23,9 +33,88 @@ const STATE_COLORS: Record<FaviconState, string> = {
   error: "#EF4444", // red-500
 };
 
-const NOTIFICATION_DOT_COLOR = "#F97316"; // orange-500
+const NOTIFICATION_DOT_COLOR = "#DC2626"; // red-600 — stands out against the gray/blue/green state backgrounds
 const SIZE = 32;
 const RADIUS = 6;
+// How much of the inner rounded square the mascot fills. 2 px of
+// padding on each side keeps it off the rounded corners and leaves
+// room for the colored backing to peek around the outline.
+const MASCOT_INSET = 2;
+
+// Pixels whose RGB channels are all above this are treated as the
+// PNG's white backing and punched to transparent. The PNG uses a soft
+// pastel palette so the mascot itself never hits all three channels
+// this high.
+const WHITE_TO_ALPHA_THRESHOLD = 235;
+// Pixels in the [FEATHER_LOW, WHITE_TO_ALPHA_THRESHOLD] band get a
+// partial-alpha ramp so the mascot's anti-aliased outline blends with
+// the colored background instead of showing a hard seam.
+const FEATHER_LOW = 205;
+
+// ── Asset loading ──────────────────────────────────────────────
+
+let logoCanvas: HTMLCanvasElement | null = null;
+let logoLoadFailed = false;
+let logoLoadPromise: Promise<HTMLCanvasElement> | null = null;
+
+function loadLogo(): Promise<HTMLCanvasElement> {
+  if (logoCanvas) return Promise.resolve(logoCanvas);
+  if (logoLoadPromise) return logoLoadPromise;
+  logoLoadPromise = decodeAndPunchOutWhite();
+  return logoLoadPromise;
+}
+
+function decodeAndPunchOutWhite(): Promise<HTMLCanvasElement> {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => {
+      try {
+        logoCanvas = buildTransparentLogoCanvas(img);
+        resolve(logoCanvas);
+      } catch (err) {
+        logoLoadFailed = true;
+        reject(err instanceof Error ? err : new Error(String(err)));
+      }
+    };
+    img.onerror = (err) => {
+      logoLoadFailed = true;
+      reject(err instanceof Error ? err : new Error("favicon logo failed to load"));
+    };
+    img.src = logoUrl;
+  });
+}
+
+// Copy the decoded <img> into an offscreen canvas and scan every
+// pixel, replacing near-white with transparency. The PNG is opaque so
+// the background would otherwise cover the state color backing.
+function buildTransparentLogoCanvas(img: HTMLImageElement): HTMLCanvasElement {
+  const canvas = document.createElement("canvas");
+  canvas.width = img.naturalWidth;
+  canvas.height = img.naturalHeight;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) throw new Error("2d context unavailable");
+  ctx.drawImage(img, 0, 0);
+  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+  const pixels = imageData.data;
+  for (let i = 0; i < pixels.length; i += 4) {
+    const red = pixels[i];
+    const green = pixels[i + 1];
+    const blue = pixels[i + 2];
+    const minChannel = Math.min(red, green, blue);
+    if (minChannel >= WHITE_TO_ALPHA_THRESHOLD) {
+      pixels[i + 3] = 0; // fully transparent
+    } else if (minChannel >= FEATHER_LOW) {
+      // Linear ramp across the feather band. At minChannel = FEATHER_LOW
+      // alpha stays 255; at threshold it drops to 0.
+      const ratio = (minChannel - FEATHER_LOW) / (WHITE_TO_ALPHA_THRESHOLD - FEATHER_LOW);
+      pixels[i + 3] = Math.round(255 * (1 - ratio));
+    }
+  }
+  ctx.putImageData(imageData, 0, 0);
+  return canvas;
+}
+
+// ── Drawing primitives ─────────────────────────────────────────
 
 function drawRoundedRect(ctx: CanvasRenderingContext2D, posX: number, posY: number, width: number, height: number, radius: number): void {
   ctx.beginPath();
@@ -41,54 +130,94 @@ function drawRoundedRect(ctx: CanvasRenderingContext2D, posX: number, posY: numb
   ctx.closePath();
 }
 
-function renderFavicon(state: FaviconState, hasNotification: boolean): string {
-  const canvas = document.createElement("canvas");
-  canvas.width = SIZE;
-  canvas.height = SIZE;
-  const ctx = canvas.getContext("2d");
-  if (!ctx) return "";
+// Aspect-preserving letterbox: scale the logo to fit the inner area
+// without distorting the mascot, then center the leftover space.
+function drawLogoCentered(ctx: CanvasRenderingContext2D, source: HTMLCanvasElement, inset: number): void {
+  const available = SIZE - inset * 2;
+  const aspect = source.width / source.height;
+  const drawW = aspect >= 1 ? available : available * aspect;
+  const drawH = aspect >= 1 ? available / aspect : available;
+  const drawX = inset + (available - drawW) / 2;
+  const drawY = inset + (available - drawH) / 2;
+  ctx.drawImage(source, drawX, drawY, drawW, drawH);
+}
 
-  // Background: rounded square
-  const color = STATE_COLORS[state];
-  drawRoundedRect(ctx, 1, 1, SIZE - 2, SIZE - 2, RADIUS);
-  ctx.fillStyle = color;
+function drawNotificationDot(ctx: CanvasRenderingContext2D): void {
+  const dotR = 5;
+  const dotX = SIZE - dotR - 1;
+  const dotY = dotR + 1;
+  ctx.beginPath();
+  ctx.arc(dotX, dotY, dotR, 0, Math.PI * 2);
+  ctx.fillStyle = NOTIFICATION_DOT_COLOR;
   ctx.fill();
+  ctx.strokeStyle = "white";
+  ctx.lineWidth = 1.5;
+  ctx.stroke();
+}
+
+// ── Composition ────────────────────────────────────────────────
 
-  // Subtle shadow/depth
-  ctx.strokeStyle = "rgba(0,0,0,0.15)";
-  ctx.lineWidth = 1;
+// Fallback for when the logo PNG fails to decode (or before the first
+// decode completes). Mirrors the earlier "M"-on-colored-square design
+// so the favicon always has a valid first paint.
+function renderFallbackFavicon(ctx: CanvasRenderingContext2D, state: FaviconState, hasNotification: boolean): void {
   drawRoundedRect(ctx, 1, 1, SIZE - 2, SIZE - 2, RADIUS);
-  ctx.stroke();
+  ctx.fillStyle = STATE_COLORS[state];
+  ctx.fill();
 
-  // "M" letter
   ctx.fillStyle = "white";
   ctx.font = "bold 20px -apple-system, BlinkMacSystemFont, sans-serif";
   ctx.textAlign = "center";
   ctx.textBaseline = "middle";
   ctx.fillText("M", SIZE / 2, SIZE / 2 + 1);
 
-  // Running state: subtle glow ring
+  if (hasNotification) drawNotificationDot(ctx);
+}
+
+function renderLogoFavicon(ctx: CanvasRenderingContext2D, logo: HTMLCanvasElement, state: FaviconState, hasNotification: boolean): void {
+  // Colored rounded-square backing — the dynamic cue.
+  drawRoundedRect(ctx, 0, 0, SIZE, SIZE, RADIUS);
+  ctx.fillStyle = STATE_COLORS[state];
+  ctx.fill();
+
+  // Clip subsequent draws to the rounded square so the mascot's
+  // anti-aliased edges don't spill past the corners.
+  ctx.save();
+  drawRoundedRect(ctx, 0, 0, SIZE, SIZE, RADIUS);
+  ctx.clip();
+  drawLogoCentered(ctx, logo, MASCOT_INSET);
+  ctx.restore();
+
+  // Running state: subtle inner glow ring reinforces the pulse cue
+  // without overpowering the colored backing.
   if (state === FAVICON_STATES.running) {
-    ctx.strokeStyle = "rgba(255,255,255,0.4)";
-    ctx.lineWidth = 2;
-    drawRoundedRect(ctx, 3, 3, SIZE - 6, SIZE - 6, RADIUS - 1);
+    ctx.strokeStyle = "rgba(255, 255, 255, 0.55)";
+    ctx.lineWidth = 1.5;
+    drawRoundedRect(ctx, 2.25, 2.25, SIZE - 4.5, SIZE - 4.5, Math.max(RADIUS - 1, 2));
     ctx.stroke();
   }
 
-  // Notification badge (orange dot, top-right)
-  if (hasNotification) {
-    const dotR = 5;
-    const dotX = SIZE - dotR - 1;
-    const dotY = dotR + 1;
-    ctx.beginPath();
-    ctx.arc(dotX, dotY, dotR, 0, Math.PI * 2);
-    ctx.fillStyle = NOTIFICATION_DOT_COLOR;
-    ctx.fill();
-    ctx.strokeStyle = "white";
-    ctx.lineWidth = 1.5;
-    ctx.stroke();
+  if (hasNotification) drawNotificationDot(ctx);
+}
+
+async function renderFavicon(state: FaviconState, hasNotification: boolean): Promise<string> {
+  const canvas = document.createElement("canvas");
+  canvas.width = SIZE;
+  canvas.height = SIZE;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return "";
+
+  if (!logoLoadFailed) {
+    try {
+      const logo = await loadLogo();
+      renderLogoFavicon(ctx, logo, state, hasNotification);
+      return canvas.toDataURL("image/png");
+    } catch {
+      // fall through — renderFallbackFavicon below handles it.
+    }
   }
 
+  renderFallbackFavicon(ctx, state, hasNotification);
   return canvas.toDataURL("image/png");
 }
 
@@ -106,10 +235,16 @@ function applyFavicon(dataUrl: string): void {
 }
 
 export function useDynamicFavicon(opts: { state: Ref<FaviconState> | ComputedRef<FaviconState>; hasNotification: Ref<boolean> | ComputedRef<boolean> }): void {
-  function update(): void {
-    const dataUrl = renderFavicon(opts.state.value, opts.hasNotification.value);
+  async function update(): Promise<void> {
+    const dataUrl = await renderFavicon(opts.state.value, opts.hasNotification.value);
     applyFavicon(dataUrl);
   }
 
-  watch([opts.state, opts.hasNotification], update, { immediate: true });
+  watch(
+    [opts.state, opts.hasNotification],
+    () => {
+      update().catch((err) => console.warn("[favicon] render failed", err));
+    },
+    { immediate: true },
+  );
 }

package/src/composables/useEventListeners.ts

@@ -1,13 +1,16 @@
 // Composable that wires the window-level event listeners used by
-// App.vue (click-outside handlers for 3 popups + global keydown for
-// navigation + view-mode shortcuts) and tears them down on unmount.
+// App.vue (global keydown for navigation + view-mode shortcuts) and
+// tears them down on unmount.
 //
 // Plugin → App.vue communication used to live here too via
 // `roles-updated` / `skill-run` CustomEvents on `window`. That now
 // flows through `useAppApi` (provide/inject) — see #227. Anything
 // remaining in this composable is genuinely a window-level concern
-// (keyboard / mouse events that don't have a single "owning"
-// component).
+// (keyboard events that don't have a single "owning" component).
+//
+// The click-outside handler for the history popup was dropped when
+// the popup became a real page at /history (see
+// plans/feat-history-url-route.md).
 //
 // Each listener is supplied as an option so the composable stays
 // independent of App.vue's local state; the caller passes the
@@ -20,8 +23,6 @@ export interface EventListenerHandlers {
   onKeyNavigation: (e: KeyboardEvent) => void;
   /** Global keydown for Cmd/Ctrl+1/2/3 view-mode shortcut. */
   onViewModeShortcut: (e: KeyboardEvent) => void;
-  /** mousedown click-outside handlers for each popup. */
-  onClickOutsideHistory: (e: MouseEvent) => void;
   /** Called in onUnmounted after all window listeners are removed. */
   onTeardown?: () => void;
 }
@@ -30,13 +31,11 @@ export function useEventListeners(handlers: EventListenerHandlers): void {
   onMounted(() => {
     window.addEventListener("keydown", handlers.onKeyNavigation);
     window.addEventListener("keydown", handlers.onViewModeShortcut);
-    window.addEventListener("mousedown", handlers.onClickOutsideHistory);
   });
 
   onUnmounted(() => {
     window.removeEventListener("keydown", handlers.onKeyNavigation);
     window.removeEventListener("keydown", handlers.onViewModeShortcut);
-    window.removeEventListener("mousedown", handlers.onClickOutsideHistory);
     handlers.onTeardown?.();
   });
 }

package/src/composables/useFaviconState.ts

@@ -10,8 +10,13 @@ export function useFaviconState(opts: {
   isRunning: ComputedRef<boolean>;
   currentSummary: ComputedRef<SessionSummary | undefined>;
   activeSession: ComputedRef<ActiveSession | undefined>;
+  // Number of sessions (across all tabs) with unread messages. We
+  // light the badge dot when any session is unread, even if it's not
+  // the currently-focused one, so background replies still surface in
+  // the tab bar.
+  sessionsUnreadCount: ComputedRef<number>;
 }) {
-  const { isRunning, currentSummary, activeSession } = opts;
+  const { isRunning, currentSummary, activeSession, sessionsUnreadCount } = opts;
 
   const faviconState = computed<FaviconState>(() => {
     if (isRunning.value) return FAVICON_STATES.running;
@@ -21,7 +26,13 @@ export function useFaviconState(opts: {
   });
 
   const { unreadCount: notificationUnreadCount } = useNotifications();
-  const hasNotificationBadge = computed(() => notificationUnreadCount.value > 0);
+  // Badge dot covers two independent signals:
+  //   1. Pub-sub notifications (scheduled tasks, etc.)
+  //   2. Any session with unread chat messages (including background
+  //      tabs the user isn't currently viewing).
+  // Either one flips the dot on — the dot doesn't distinguish source,
+  // just tells the user "there's something to look at".
+  const hasNotificationBadge = computed(() => notificationUnreadCount.value > 0 || sessionsUnreadCount.value > 0);
 
   useDynamicFavicon({
     state: faviconState,

package/src/composables/useFileSelection.ts

@@ -32,12 +32,27 @@ export function isValidFilePath(value: unknown): value is string {
   return !value.split("/").some((seg) => seg === "..");
 }
 
+/**
+ * Extract the logical file path from a route's `pathMatch` param.
+ * Vue Router hands the repeatable catch-all back as an array, a
+ * single string, or `undefined` depending on what matched — normalise
+ * to a `string | null` so the rest of the composable doesn't care.
+ */
+export function readPathMatch(raw: unknown): string | null {
+  if (Array.isArray(raw)) {
+    if (raw.length === 0) return null;
+    return raw.join("/");
+  }
+  if (typeof raw === "string" && raw.length > 0) return raw;
+  return null;
+}
+
 export function useFileSelection() {
   const route = useRoute();
   const router = useRouter();
 
-  const urlPath = route.query.path;
-  const selectedPath = ref<string | null>(isValidFilePath(urlPath) ? urlPath : null);
+  const pathFromRoute = readPathMatch(route.params.pathMatch);
+  const selectedPath = ref<string | null>(isValidFilePath(pathFromRoute) ? pathFromRoute : null);
   const content = ref<FileContent | null>(null);
   const contentLoading = ref(false);
   const contentError = ref<string | null>(null);
@@ -71,8 +86,12 @@ export function useFileSelection() {
   function selectFile(filePath: string): void {
     selectedPath.value = filePath;
     loadContent(filePath);
-    const { path: __path, ...restQuery } = route.query;
-    router.push({ query: { ...restQuery, path: filePath } }).catch((err: unknown) => {
+    // Pass segments as an array so Vue Router encodes each segment
+    // independently (spaces / multi-byte / `?#%` get UTF-8 percent-
+    // encoding), while slashes stay as path separators. Passing the
+    // joined string would urlencode `/` → `%2F` and collapse the
+    // visible path shape.
+    router.push({ name: "files", params: { pathMatch: filePath.split("/") }, query: route.query }).catch((err: unknown) => {
       if (!isNavigationFailure(err)) {
         // Frontend composable — server logger not available.
         // console.error is the standard pattern in Vue composables.
@@ -88,8 +107,7 @@ export function useFileSelection() {
     content.value = null;
     contentLoading.value = false;
     contentError.value = null;
-    const { path: __path, ...restQuery } = route.query;
-    router.replace({ query: restQuery }).catch((err: unknown) => {
+    router.replace({ name: "files", params: { pathMatch: [] }, query: route.query }).catch((err: unknown) => {
       if (!isNavigationFailure(err)) {
         console.error("[deselectFile] navigation failed:", err);
       }

package/src/composables/useFreshPluginData.ts

@@ -70,9 +70,9 @@ export function useFreshPluginData<T>(opts: UseFreshPluginDataOptions<T>): UseFr
 
   async function refresh(): Promise<boolean> {
     controller?.abort();
-    const c = new AbortController();
-    controller = c;
-    return refreshOnce(opts, c.signal);
+    const ctrl = new AbortController();
+    controller = ctrl;
+    return refreshOnce(opts, ctrl.signal);
   }
 
   function abort(): void {

package/src/composables/useKeyNavigation.ts

@@ -18,7 +18,7 @@ function isVerticalArrow(key: string): key is "ArrowUp" | "ArrowDown" {
 
 function resolveNextUuid(results: ToolResultComplete[], currentUuid: string | null, direction: "ArrowUp" | "ArrowDown"): string | null {
   if (results.length === 0) return null;
-  const idx = results.findIndex((r) => r.uuid === currentUuid);
+  const idx = results.findIndex((result) => result.uuid === currentUuid);
   if (idx === -1) {
     return direction === "ArrowDown" ? results[0].uuid : results[results.length - 1].uuid;
   }
@@ -36,23 +36,23 @@ export function useKeyNavigation(opts: {
 }) {
   const { canvasRef, activePane, sidebarResults, selectedResultUuid } = opts;
 
-  function handleCanvasKeydown(e: KeyboardEvent): void {
-    if (!isVerticalArrow(e.key)) return;
-    if (isEditableTarget(e.target)) return;
+  function handleCanvasKeydown(event: KeyboardEvent): void {
+    if (!isVerticalArrow(event.key)) return;
+    if (isEditableTarget(event.target)) return;
     if (!canvasRef.value) return;
     const scrollable = findScrollableChild(canvasRef.value);
     if (!scrollable) return;
-    e.preventDefault();
-    const delta = e.key === "ArrowDown" ? SCROLL_AMOUNT : -SCROLL_AMOUNT;
+    event.preventDefault();
+    const delta = event.key === "ArrowDown" ? SCROLL_AMOUNT : -SCROLL_AMOUNT;
     scrollable.scrollBy({ top: delta, behavior: "smooth" });
   }
 
-  function handleKeyNavigation(e: KeyboardEvent): void {
+  function handleKeyNavigation(event: KeyboardEvent): void {
     if (activePane.value !== "sidebar") return;
-    if (isEditableTarget(e.target)) return;
-    if (!isVerticalArrow(e.key)) return;
-    e.preventDefault();
-    const nextUuid = resolveNextUuid(sidebarResults.value, selectedResultUuid.value, e.key);
+    if (isEditableTarget(event.target)) return;
+    if (!isVerticalArrow(event.key)) return;
+    event.preventDefault();
+    const nextUuid = resolveNextUuid(sidebarResults.value, selectedResultUuid.value, event.key);
     if (nextUuid) selectedResultUuid.value = nextUuid;
   }
 

package/src/composables/useLayoutMode.ts

@@ -0,0 +1,32 @@
+// Layout preference (single vs. stack) for the /chat page, persisted
+// in localStorage. Independent of which page the user is on — pages
+// like Files/Todos/Wiki live in the router, not here.
+//
+// One-time cleanup: deletes the legacy `canvas_view_mode` key that
+// conflated layout with page navigation. The value is intentionally
+// not migrated — users land on "single" on first load after the
+// split.
+
+import { ref, type Ref } from "vue";
+import { LAYOUT_MODES, LAYOUT_MODE_STORAGE_KEY, LEGACY_VIEW_MODE_STORAGE_KEY, parseStoredLayoutMode, type LayoutMode } from "../utils/canvas/layoutMode";
+
+export function useLayoutMode(): {
+  layoutMode: Ref<LayoutMode>;
+  setLayoutMode: (mode: LayoutMode) => void;
+  toggleLayoutMode: () => void;
+} {
+  localStorage.removeItem(LEGACY_VIEW_MODE_STORAGE_KEY);
+
+  const layoutMode = ref<LayoutMode>(parseStoredLayoutMode(localStorage.getItem(LAYOUT_MODE_STORAGE_KEY)));
+
+  function setLayoutMode(mode: LayoutMode): void {
+    layoutMode.value = mode;
+    localStorage.setItem(LAYOUT_MODE_STORAGE_KEY, mode);
+  }
+
+  function toggleLayoutMode(): void {
+    setLayoutMode(layoutMode.value === LAYOUT_MODES.stack ? LAYOUT_MODES.single : LAYOUT_MODES.stack);
+  }
+
+  return { layoutMode, setLayoutMode, toggleLayoutMode };
+}

package/src/composables/useMcpTools.ts

@@ -56,8 +56,8 @@ export function useMcpTools(opts: UseMcpToolsOptions) {
     }
     mcpToolsError.value = null;
     const tools = result.data;
-    disabledMcpTools.value = new Set(tools.filter((t) => !t.enabled).map((t) => t.name));
-    mcpToolDescriptions.value = Object.fromEntries(tools.filter(hasPrompt).map((t) => [t.name, t.prompt]));
+    disabledMcpTools.value = new Set(tools.filter((tool) => !tool.enabled).map((tool) => tool.name));
+    mcpToolDescriptions.value = Object.fromEntries(tools.filter(hasPrompt).map((tool) => [tool.name, tool.prompt]));
   }
 
   return {

package/src/composables/useNotifications.ts

@@ -73,7 +73,7 @@ export function useNotifications(): {
 
   const unreadCount = computed(() => {
     if (!readAt.value) return notifications.value.length;
-    return notifications.value.filter((n) => n.firedAt > readAt.value!).length;
+    return notifications.value.filter((notif) => notif.firedAt > readAt.value!).length;
   });
 
   function markAllRead(): void {
@@ -82,8 +82,8 @@ export function useNotifications(): {
     }
   }
 
-  function dismiss(id: string): void {
-    notifications.value = notifications.value.filter((n) => n.id !== id);
+  function dismiss(notifId: string): void {
+    notifications.value = notifications.value.filter((notif) => notif.id !== notifId);
   }
 
   return { notifications, latest, unreadCount, markAllRead, dismiss };

package/src/composables/usePdfDownload.ts

@@ -42,10 +42,10 @@ export function usePdfDownload(): UsePdfDownloadHandle {
       }
       const blob = await response.blob();
       url = URL.createObjectURL(blob);
-      const a = document.createElement("a");
-      a.href = url;
-      a.download = filename;
-      a.click();
+      const anchor = document.createElement("a");
+      anchor.href = url;
+      anchor.download = filename;
+      anchor.click();
     } catch (err) {
       pdfError.value = errorMessage(err);
     } finally {

package/src/composables/usePendingCalls.ts

@@ -59,7 +59,7 @@ export function usePendingCalls(opts: UsePendingCallsOptions) {
     // unused.
     const __tickDep = displayTick.value;
     const now = Date.now();
-    return opts.toolCallHistory.value.filter((c) => __tickDep >= 0 && isCallStillPending(c, now));
+    return opts.toolCallHistory.value.filter((entry) => __tickDep >= 0 && isCallStillPending(entry, now));
   });
 
   function teardown(): void {

package/src/composables/usePubSub.ts

@@ -21,16 +21,16 @@ let socket: Socket | null = null;
 
 const listeners = new Map<string, Set<Callback>>();
 
-function resendSubscriptions(s: Socket): void {
+function resendSubscriptions(sock: Socket): void {
   for (const channel of listeners.keys()) {
-    s.emit("subscribe", channel);
+    sock.emit("subscribe", channel);
   }
 }
 
 function connect(): Socket {
   if (socket) return socket;
 
-  const s = io({
+  const sock = io({
     path: "/ws/pubsub",
     // Match the server. Long-polling is fine as a fallback but
     // the server refuses it, so don't negotiate it here either —
@@ -38,17 +38,17 @@ function connect(): Socket {
     transports: ["websocket"],
   });
 
-  s.on("connect", () => resendSubscriptions(s));
+  sock.on("connect", () => resendSubscriptions(sock));
 
-  s.on("data", (msg: PubSubMessage) => {
+  sock.on("data", (msg: PubSubMessage) => {
     const cbs = listeners.get(msg.channel);
     if (cbs) {
-      for (const cb of cbs) cb(msg.data);
+      for (const handler of cbs) handler(msg.data);
     }
   });
 
-  socket = s;
-  return s;
+  socket = sock;
+  return sock;
 }
 
 function maybeDisconnect(): void {
@@ -63,8 +63,8 @@ export function usePubSub() {
     if (!listeners.has(channel)) listeners.set(channel, new Set());
     listeners.get(channel)!.add(callback);
 
-    const s = connect();
-    if (s.connected) s.emit("subscribe", channel);
+    const sock = connect();
+    if (sock.connected) sock.emit("subscribe", channel);
     // If not yet connected, the "connect" handler replays every
     // listener's subscription, so newly-added channels are
     // covered without extra bookkeeping.

package/src/composables/useRoles.ts

@@ -17,7 +17,7 @@ export function useRoles(): {
 } {
   const roles = ref<Role[]>(ROLES);
   const currentRoleId = ref(ROLES[0].id);
-  const currentRole = computed(() => roles.value.find((r) => r.id === currentRoleId.value) ?? roles.value[0]);
+  const currentRole = computed(() => roles.value.find((role) => role.id === currentRoleId.value) ?? roles.value[0]);
 
   async function refreshRoles(): Promise<void> {
     const result = await apiGet<Role[]>(API_ROUTES.roles.list);

package/src/composables/useSandboxStatus.ts

@@ -29,7 +29,7 @@ function isSandboxStatus(raw: RawResponse): raw is {
 } {
   if (typeof raw.sshAgent !== "boolean") return false;
   if (!Array.isArray(raw.mounts)) return false;
-  return raw.mounts.every((m) => typeof m === "string");
+  return raw.mounts.every((mount) => typeof mount === "string");
 }
 
 export interface UseSandboxStatusHandle {

package/src/composables/useSessionDerived.ts

@@ -16,7 +16,7 @@ export function useSessionDerived(opts: { sessionMap: Map<string, ActiveSession>
 
   const sidebarResults = computed(() => deduplicateResults(toolResults.value));
 
-  const currentSummary = computed(() => sessions.value.find((s) => s.id === currentSessionId.value));
+  const currentSummary = computed(() => sessions.value.find((summary) => summary.id === currentSessionId.value));
 
   // The server-side summary already merges pendingGenerations into
   // `isRunning` (see server/api/routes/sessions.ts), but pub/sub events
@@ -33,9 +33,9 @@ export function useSessionDerived(opts: { sessionMap: Map<string, ActiveSession>
 
   const toolCallHistory = computed<ToolCallHistoryItem[]>(() => activeSession.value?.toolCallHistory ?? []);
 
-  const activeSessionCount = computed(() => sessions.value.filter((s) => s.isRunning).length);
+  const activeSessionCount = computed(() => sessions.value.filter((session) => session.isRunning).length);
 
-  const unreadCount = computed(() => sessions.value.filter((s) => s.hasUnread).length);
+  const unreadCount = computed(() => sessions.value.filter((session) => session.hasUnread).length);
 
   return {
     activeSession,