mulmoclaude 0.1.0

package/src/composables/useAppApi.ts

@@ -0,0 +1,45 @@
+// Vue provide/inject contract that lets plugin Views call back into
+// App.vue without going through window-level CustomEvents.
+//
+// Background: plugins like manageRoles and manageSkills used to
+// dispatch `roles-updated` / `skill-run` on `window` and App.vue
+// listened with `addEventListener`. That worked but routed
+// component-to-component communication through a global side channel,
+// which got hard to follow as more plugins came online (#227).
+//
+// `provide` / `inject` is the Vue-native equivalent: App.vue provides
+// a small typed API surface, plugins inject and call methods directly.
+// No string event names, full type-checking, no chance of a typo
+// silently failing.
+
+import { inject, provide } from "vue";
+
+/** API surface that plugin Views can call on App.vue. */
+export interface AppApi {
+  /** Refresh the role dropdown — call after the roles list changes. */
+  refreshRoles: () => void | Promise<void>;
+  /** Send a chat message through App.vue's normal sendMessage pipeline. */
+  sendMessage: (message: string) => void;
+}
+
+const APP_API_KEY = Symbol("appApi");
+
+/** Called once in App.vue setup to expose the API to descendants. */
+export function provideAppApi(api: AppApi): void {
+  provide(APP_API_KEY, api);
+}
+
+/**
+ * Called by plugin Views (any descendant of App.vue) to access the API.
+ *
+ * Throws if used outside an App.vue subtree — if you need a no-op
+ * fallback (e.g. a plugin rendered in isolation in a test), pass a
+ * default-returning callback to `inject` directly instead.
+ */
+export function useAppApi(): AppApi {
+  const api = inject<AppApi>(APP_API_KEY);
+  if (!api) {
+    throw new Error("useAppApi() called outside an App.vue subtree — provideAppApi must run first.");
+  }
+  return api;
+}

package/src/composables/useCanvasViewMode.ts

@@ -0,0 +1,121 @@
+// Composable for the canvas view mode values defined in
+// src/utils/canvas/viewMode.ts:
+// owns the reactive ref, syncs to the URL via vue-router, persists
+// to localStorage as fallback, hooks the "refresh files tree after
+// each agent run" side effect, and exposes the Cmd/Ctrl+digit
+// keydown handler. The pure parsing helpers live in
+// src/utils/canvas/viewMode.ts so the rules are unit-testable.
+
+import { ref, watch, type ComputedRef, type Ref } from "vue";
+import { useRoute, useRouter, isNavigationFailure } from "vue-router";
+import {
+  type CanvasViewMode,
+  CANVAS_VIEW,
+  VIEW_MODE_STORAGE_KEY,
+  parseStoredViewMode,
+  viewModeForShortcutKey,
+  isCanvasViewMode,
+} from "../utils/canvas/viewMode";
+import type { LocationQuery } from "vue-router";
+
+interface UseCanvasViewModeOptions {
+  // Watched so the file tree can be refreshed when the agent run
+  // ends — newly written files appear without a manual reload.
+  isRunning: ComputedRef<boolean> | Ref<boolean>;
+}
+
+/**
+ * Build a query object that reflects the given view mode.
+ * "single" (the default) omits `?view=` for cleaner URLs;
+ * other modes set it explicitly.
+ */
+function applyViewToQuery(currentQuery: LocationQuery, mode: CanvasViewMode): LocationQuery {
+  const rest: LocationQuery = { ...currentQuery };
+  delete rest.view;
+  // Remove ?path= when leaving the files view — it's only meaningful
+  // in files mode and would cause a stale file selection on reload.
+  if (mode !== CANVAS_VIEW.files) delete rest.path;
+  if (mode === CANVAS_VIEW.single) return rest;
+  return { ...rest, view: mode };
+}
+
+export function useCanvasViewMode(opts: UseCanvasViewModeOptions): {
+  canvasViewMode: Ref<CanvasViewMode>;
+  setCanvasViewMode: (mode: CanvasViewMode) => void;
+  buildViewQuery: () => LocationQuery;
+  filesRefreshToken: Ref<number>;
+  handleViewModeShortcut: (e: KeyboardEvent) => void;
+  onPluginNavigate: (target: { key: string }) => void;
+} {
+  const route = useRoute();
+  const router = useRouter();
+
+  // Initialise from URL if ?view= is present, otherwise fall back to
+  // localStorage (the user's last-chosen mode), then to "single".
+  const urlView = typeof route.query.view === "string" ? route.query.view : null;
+  const canvasViewMode = ref<CanvasViewMode>(parseStoredViewMode(urlView ?? localStorage.getItem(VIEW_MODE_STORAGE_KEY)));
+  const filesRefreshToken = ref(0);
+
+  function setCanvasViewMode(mode: CanvasViewMode): void {
+    canvasViewMode.value = mode;
+    localStorage.setItem(VIEW_MODE_STORAGE_KEY, mode);
+    router.push({ query: applyViewToQuery(route.query, mode) }).catch((err: unknown) => {
+      if (!isNavigationFailure(err)) {
+        console.error("[setCanvasViewMode] navigation failed:", err);
+      }
+    });
+  }
+
+  /** Return a query object with the current view mode applied.
+   *  Used by App.vue's navigateToSession so the URL always reflects
+   *  the latest canvasViewMode.value (which may be more recent than
+   *  route.query.view when setCanvasViewMode was just called). */
+  function buildViewQuery(): LocationQuery {
+    return applyViewToQuery(route.query, canvasViewMode.value);
+  }
+
+  // External URL changes (back/forward button, typed URL) → update ref.
+  watch(
+    () => route.query.view,
+    (newView) => {
+      const parsed = parseStoredViewMode(typeof newView === "string" ? newView : null);
+      if (parsed !== canvasViewMode.value) {
+        canvasViewMode.value = parsed;
+        localStorage.setItem(VIEW_MODE_STORAGE_KEY, parsed);
+      }
+    },
+  );
+
+  // After each run completes, bump filesRefreshToken so any open
+  // FilesView re-fetches the workspace tree.
+  watch(opts.isRunning, (running, prev) => {
+    if (prev && !running) {
+      filesRefreshToken.value++;
+    }
+  });
+
+  function handleViewModeShortcut(e: KeyboardEvent): void {
+    if (!(e.metaKey || e.ctrlKey)) return;
+    if (e.altKey || e.shiftKey) return;
+    const target = viewModeForShortcutKey(e.key);
+    if (target === null) return;
+    setCanvasViewMode(target);
+    e.preventDefault();
+  }
+
+  /** Plugin-launcher click: switch canvas to the matching view mode. */
+  function onPluginNavigate(target: { key: string }): void {
+    if (isCanvasViewMode(target.key)) {
+      setCanvasViewMode(target.key);
+    }
+  }
+
+  return {
+    canvasViewMode,
+    setCanvasViewMode,
+    buildViewQuery,
+    filesRefreshToken,
+    handleViewModeShortcut,
+    onPluginNavigate,
+  };
+}

package/src/composables/useChatScroll.ts

@@ -0,0 +1,47 @@
+// Auto-scroll the sidebar chat list to the bottom when new results
+// arrive or a run starts. Also re-focuses the chat input when a run
+// finishes.
+
+import { computed, nextTick, watch, type ComputedRef, type Ref } from "vue";
+import type { ToolResultComplete } from "gui-chat-protocol/vue";
+
+export function useChatScroll(opts: {
+  toolResultsPanelRef: Ref<{ root: HTMLDivElement | null } | null>;
+  toolResults: ComputedRef<ToolResultComplete[]>;
+  isRunning: ComputedRef<boolean>;
+  chatInputRef: Ref<{ focus: () => void } | null>;
+}) {
+  const { toolResultsPanelRef, toolResults, isRunning, chatInputRef } = opts;
+
+  const chatListRef = computed(() => toolResultsPanelRef.value?.root ?? null);
+  // Key that changes both on new results AND on streaming updates to
+  // the last text card (which appends in place, leaving length stable).
+  const latestResultScrollKey = computed(() => {
+    const list = toolResults.value;
+    const last = list[list.length - 1];
+    return `${list.length}:${last?.uuid ?? ""}:${last?.message?.length ?? 0}`;
+  });
+
+  function scrollChatToBottom(): void {
+    nextTick(() => {
+      if (chatListRef.value) {
+        chatListRef.value.scrollTop = chatListRef.value.scrollHeight;
+      }
+    });
+  }
+
+  function focusChatInput(): void {
+    chatInputRef.value?.focus();
+  }
+
+  watch(latestResultScrollKey, scrollChatToBottom);
+  watch(isRunning, (running) => {
+    if (running) {
+      scrollChatToBottom();
+    } else {
+      nextTick(() => focusChatInput());
+    }
+  });
+
+  return { scrollChatToBottom, focusChatInput };
+}

package/src/composables/useClickOutside.ts

@@ -0,0 +1,26 @@
+// Composable that builds a `mousedown` handler which closes a
+// boolean ref (`isOpen`) when the click happened outside both the
+// trigger button and the popup body. Three popups in App.vue
+// (history, sandbox lock, role dropdown) all share this exact
+// pattern.
+
+import type { Ref } from "vue";
+import { isClickOutside } from "../utils/dom/clickOutside";
+
+interface UseClickOutsideOptions {
+  isOpen: Ref<boolean>;
+  buttonRef: Ref<HTMLElement | null>;
+  popupRef: Ref<HTMLElement | null>;
+}
+
+export function useClickOutside(opts: UseClickOutsideOptions): {
+  handler: (e: MouseEvent) => void;
+} {
+  function handler(e: MouseEvent): void {
+    if (!opts.isOpen.value) return;
+    if (isClickOutside(e.target as Node | null, opts.buttonRef.value, opts.popupRef.value)) {
+      opts.isOpen.value = false;
+    }
+  }
+  return { handler };
+}

package/src/composables/useClipboardCopy.ts

@@ -0,0 +1,44 @@
+// "Copy to clipboard with a transient confirmation flag" — the
+// same 9-line pattern was copied into 3 plugin views
+// (markdown / presentMulmoScript / textResponse) before this
+// composable existed.
+//
+// Usage:
+//
+//   const { copied, copy } = useClipboardCopy();
+//
+//   async function copyText() {
+//     await copy(textToCopy.value);
+//   }
+//
+// `copied` flips to true on success and back to false after
+// `resetMs` (default 2000ms) so the UI can show a ✓ / "Copied!"
+// hint. Clipboard failures (permissions, insecure context) are
+// swallowed on purpose — there's no useful UI action beyond letting
+// the hint stay off, which is exactly what the ref signals.
+
+import { ref, type Ref } from "vue";
+
+export interface UseClipboardCopyHandle {
+  copied: Ref<boolean>;
+  copy: (text: string) => Promise<void>;
+}
+
+export function useClipboardCopy(resetMs = 2000): UseClipboardCopyHandle {
+  const copied = ref(false);
+
+  async function copy(text: string): Promise<void> {
+    try {
+      await navigator.clipboard.writeText(text);
+      copied.value = true;
+      setTimeout(() => {
+        copied.value = false;
+      }, resetMs);
+    } catch {
+      // Clipboard API may be blocked in some contexts (e.g. iframe
+      // without permissions, non-HTTPS origin). Leave `copied` false.
+    }
+  }
+
+  return { copied, copy };
+}

package/src/composables/useContentDisplay.ts

@@ -0,0 +1,52 @@
+// Composable: derive content-type flags and formatted views from the
+// current selection. Extracted from FilesView.vue (#507 step 5).
+
+import { computed, type Ref } from "vue";
+import type { FileContent } from "./useFileSelection";
+import { wrapHtmlWithPreviewCsp } from "../utils/html/previewCsp";
+import { tokenizeJson, tokenizeJsonl, prettyJson } from "../utils/format/jsonSyntax";
+import { extractFrontmatter } from "../utils/format/frontmatter";
+
+function hasExt(filePath: string | null, exts: string[]): boolean {
+  if (!filePath) return false;
+  const lower = filePath.toLowerCase();
+  return exts.some((ext) => lower.endsWith(ext));
+}
+
+export function useContentDisplay(selectedPath: Ref<string | null>, content: Ref<FileContent | null>) {
+  const isMarkdown = computed(() => hasExt(selectedPath.value, [".md", ".markdown"]));
+  const isHtml = computed(() => hasExt(selectedPath.value, [".html", ".htm"]));
+  const isJson = computed(() => hasExt(selectedPath.value, [".json"]));
+  const isJsonl = computed(() => hasExt(selectedPath.value, [".jsonl", ".ndjson"]));
+
+  const sandboxedHtml = computed(() => (content.value?.kind === "text" && isHtml.value ? wrapHtmlWithPreviewCsp(content.value.content) : ""));
+
+  const jsonTokens = computed(() => {
+    if (!content.value || content.value.kind !== "text") return [];
+    if (!isJson.value) return [];
+    return tokenizeJson(prettyJson(content.value.content));
+  });
+
+  const jsonlLines = computed(() => {
+    if (!content.value || content.value.kind !== "text") return [];
+    if (!isJsonl.value) return [];
+    return tokenizeJsonl(content.value.content);
+  });
+
+  const mdFrontmatter = computed(() => {
+    if (!content.value || content.value.kind !== "text") return null;
+    if (!isMarkdown.value) return null;
+    return extractFrontmatter(content.value.content);
+  });
+
+  return {
+    isMarkdown,
+    isHtml,
+    isJson,
+    isJsonl,
+    sandboxedHtml,
+    jsonTokens,
+    jsonlLines,
+    mdFrontmatter,
+  };
+}

package/src/composables/useDebugBeat.ts

@@ -0,0 +1,23 @@
+// Debug beat indicator — toggles the app title color when the server
+// emits debug-beat events via pub/sub. Only active in --debug mode.
+
+import { ref, computed, type CSSProperties } from "vue";
+import { usePubSub } from "./usePubSub";
+import { PUBSUB_CHANNELS } from "../config/pubsubChannels";
+
+export function useDebugBeat() {
+  const debugBeatColor = ref<string | null>(null);
+  const debugTitleStyle = computed<CSSProperties>(() => (debugBeatColor.value ? { color: debugBeatColor.value } : {}));
+
+  const { subscribe } = usePubSub();
+  subscribe(PUBSUB_CHANNELS.debugBeat, (data) => {
+    const msg = data as { count: number; last?: boolean };
+    if (msg.last) {
+      debugBeatColor.value = null;
+    } else {
+      debugBeatColor.value = msg.count % 2 === 0 ? "#3b82f6" : "#ef4444";
+    }
+  });
+
+  return { debugTitleStyle };
+}

package/src/composables/useDynamicFavicon.ts

@@ -0,0 +1,115 @@
+// 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:
+//   idle (gray) → running (blue, pulse) → done (green) → error (red)
+//   notification badge (orange dot) overlaid when unread count > 0.
+
+import { watch, type Ref, type ComputedRef } from "vue";
+
+export const FAVICON_STATES = {
+  idle: "idle",
+  running: "running",
+  done: "done",
+  error: "error",
+} as const;
+
+export type FaviconState = (typeof FAVICON_STATES)[keyof typeof FAVICON_STATES];
+
+const STATE_COLORS: Record<FaviconState, string> = {
+  idle: "#6B7280", // gray-500
+  running: "#3B82F6", // blue-500
+  done: "#22C55E", // green-500
+  error: "#EF4444", // red-500
+};
+
+const NOTIFICATION_DOT_COLOR = "#F97316"; // orange-500
+const SIZE = 32;
+const RADIUS = 6;
+
+function drawRoundedRect(ctx: CanvasRenderingContext2D, posX: number, posY: number, width: number, height: number, radius: number): void {
+  ctx.beginPath();
+  ctx.moveTo(posX + radius, posY);
+  ctx.lineTo(posX + width - radius, posY);
+  ctx.quadraticCurveTo(posX + width, posY, posX + width, posY + radius);
+  ctx.lineTo(posX + width, posY + height - radius);
+  ctx.quadraticCurveTo(posX + width, posY + height, posX + width - radius, posY + height);
+  ctx.lineTo(posX + radius, posY + height);
+  ctx.quadraticCurveTo(posX, posY + height, posX, posY + height - radius);
+  ctx.lineTo(posX, posY + radius);
+  ctx.quadraticCurveTo(posX, posY, posX + radius, posY);
+  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 "";
+
+  // Background: rounded square
+  const color = STATE_COLORS[state];
+  drawRoundedRect(ctx, 1, 1, SIZE - 2, SIZE - 2, RADIUS);
+  ctx.fillStyle = color;
+  ctx.fill();
+
+  // Subtle shadow/depth
+  ctx.strokeStyle = "rgba(0,0,0,0.15)";
+  ctx.lineWidth = 1;
+  drawRoundedRect(ctx, 1, 1, SIZE - 2, SIZE - 2, RADIUS);
+  ctx.stroke();
+
+  // "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 (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.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();
+  }
+
+  return canvas.toDataURL("image/png");
+}
+
+function applyFavicon(dataUrl: string): void {
+  if (!dataUrl) return;
+  let link = document.querySelector("link[rel='icon']") as HTMLLinkElement | null;
+  if (!link) {
+    link = document.createElement("link");
+    link.rel = "icon";
+    link.type = "image/png";
+    document.head.appendChild(link);
+  }
+  link.type = "image/png";
+  link.href = dataUrl;
+}
+
+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);
+    applyFavicon(dataUrl);
+  }
+
+  watch([opts.state, opts.hasNotification], update, { immediate: true });
+}

package/src/composables/useEventListeners.ts

@@ -0,0 +1,42 @@
+// 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.
+//
+// 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).
+//
+// Each listener is supplied as an option so the composable stays
+// independent of App.vue's local state; the caller passes the
+// already-bound handlers.
+
+import { onMounted, onUnmounted } from "vue";
+
+export interface EventListenerHandlers {
+  /** Global keydown for arrow-key navigation / Esc handling. */
+  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;
+}
+
+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/useExpandedDirs.ts

@@ -0,0 +1,64 @@
+// Composable for the FileTree expand/collapse state. Owns a
+// module-level reactive Set so every recursive FileTree instance
+// shares the same state, and persists changes to localStorage.
+//
+// The pure parsing helpers live in src/utils/files/expandedDirs.ts
+// so the rules are unit-testable without a Vue runtime.
+
+import { ref, watch, type Ref } from "vue";
+import { EXPANDED_DIRS_STORAGE_KEY, parseStoredExpandedDirs, serializeExpandedDirs } from "../utils/files/expandedDirs";
+
+function loadInitial(): Set<string> {
+  if (typeof localStorage === "undefined") {
+    return parseStoredExpandedDirs(null);
+  }
+  try {
+    return parseStoredExpandedDirs(localStorage.getItem(EXPANDED_DIRS_STORAGE_KEY));
+  } catch {
+    return parseStoredExpandedDirs(null);
+  }
+}
+
+// Module-level singleton: every FileTree instance imports this
+// composable and reads/writes the same Set.
+const expandedDirs: Ref<Set<string>> = ref(loadInitial());
+
+watch(expandedDirs, (val) => {
+  try {
+    localStorage.setItem(EXPANDED_DIRS_STORAGE_KEY, serializeExpandedDirs(val));
+  } catch {
+    // localStorage may be disabled (private mode) or full; ignore
+    // and keep the in-memory state working for this session.
+  }
+});
+
+export function useExpandedDirs(): {
+  isExpanded: (path: string) => boolean;
+  toggle: (path: string) => void;
+  expand: (path: string) => void;
+  expandedPaths: () => string[];
+} {
+  function isExpanded(path: string): boolean {
+    return expandedDirs.value.has(path);
+  }
+  function toggle(path: string): void {
+    // Replace the Set so the watch fires — Set mutations aren't
+    // tracked by Vue's reactivity.
+    const next = new Set(expandedDirs.value);
+    if (next.has(path)) next.delete(path);
+    else next.add(path);
+    expandedDirs.value = next;
+  }
+  // Idempotently mark a path as expanded (used by deep-link auto-
+  // expand where we want to reveal ancestors without toggling).
+  function expand(path: string): void {
+    if (expandedDirs.value.has(path)) return;
+    const next = new Set(expandedDirs.value);
+    next.add(path);
+    expandedDirs.value = next;
+  }
+  function expandedPaths(): string[] {
+    return Array.from(expandedDirs.value);
+  }
+  return { isExpanded, toggle, expand, expandedPaths };
+}

package/src/composables/useFaviconState.ts

@@ -0,0 +1,30 @@
+// Dynamic favicon state: running → done (unread) → idle.
+// Also drives the notification badge dot on the favicon.
+
+import { computed, type ComputedRef } from "vue";
+import { FAVICON_STATES, type FaviconState, useDynamicFavicon } from "./useDynamicFavicon";
+import { useNotifications } from "./useNotifications";
+import type { ActiveSession, SessionSummary } from "../types/session";
+
+export function useFaviconState(opts: {
+  isRunning: ComputedRef<boolean>;
+  currentSummary: ComputedRef<SessionSummary | undefined>;
+  activeSession: ComputedRef<ActiveSession | undefined>;
+}) {
+  const { isRunning, currentSummary, activeSession } = opts;
+
+  const faviconState = computed<FaviconState>(() => {
+    if (isRunning.value) return FAVICON_STATES.running;
+    const hasUnread = currentSummary.value?.hasUnread ?? activeSession.value?.hasUnread ?? false;
+    if (hasUnread) return FAVICON_STATES.done;
+    return FAVICON_STATES.idle;
+  });
+
+  const { unreadCount: notificationUnreadCount } = useNotifications();
+  const hasNotificationBadge = computed(() => notificationUnreadCount.value > 0);
+
+  useDynamicFavicon({
+    state: faviconState,
+    hasNotification: hasNotificationBadge,
+  });
+}