@ begone

Author: KentoNishi

AGENTS.md

@@ -34,13 +34,31 @@
 ## UI Name Formatting
 
 - For chat author display, hide a leading `@` in UI text while keeping underlying identity data unchanged.
-- Use `src/ts/author-name.ts` (`formatAuthorName`) for this transformation and apply it at render points.
+- Use `src/ts/component-utils.ts` (`formatAuthorName`) for this transformation and apply it at render points.
 
 ## Testbed URL
 
 - Headless validation should open the same `startUrl` used by `vite.config.ts`.
 - `scripts/codex-dev.sh go-test` now does this automatically (defaulting by detected mode), and `TEST_URL` can override when needed.
 
+## Cross-Browser Headless Validation Notes
+
+- Always rebuild for the target browser before runtime validation:
+  - `yarn build:chrome`
+  - `yarn build:firefox`
+- Chromium extension validation is most reliable in CI/headless shells with:
+  - Playwright Chromium persistent context
+  - `headless=false` plus `--ozone-platform=headless`
+  - extension args: `--disable-extensions-except=<build>` and `--load-extension=<build>`
+- Firefox validation in this environment must set `HOME=/root` before launching browser automation as root, or Firefox exits early with a root/session ownership error.
+- For Firefox runtime checks, prefer `https://www.youtube.com/live_chat?v=jfKfPfyJRdk&is_popout=1` for deterministic chat-frame loading in headless mode.
+
+## Embed 404 Notes (MV3)
+
+- The MV3 embed fallback page (`/embed/hyperchat_embed`) can render a centered YouTube logo/error artifact if page elements are not fully removed.
+- In `src/scripts/chat-mounter.ts`, treat the HyperChat mount root as the only allowed direct `body` child and aggressively remove fallback embed artifacts.
+- If the logo reappears in browser tests, prioritize checking `chat-mounter.ts` cleanup selectors and page timing behavior before touching parser/UI code.
+
 ## Operational Commands
 
 - `scripts/codex-dev.sh status` shows watcher/MCP/browser states.

src/components/MembershipItem.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import Message from './Message.svelte';
   import MessageRun from './MessageRuns.svelte';
-  import { formatAuthorName } from '../ts/author-name';
+  import { formatAuthorName } from '../ts/component-utils';
   import { showProfileIcons } from '../ts/storage';
   import { membershipBackground, milestoneChatBackground } from '../ts/chat-constants';
 

src/components/Message.svelte

@@ -13,7 +13,7 @@
   } from '../ts/storage';
   import { chatUserActionsItems, Theme } from '../ts/chat-constants';
   import { useBanHammer } from '../ts/chat-actions';
-  import { formatAuthorName } from '../ts/author-name';
+  import { formatAuthorName } from '../ts/component-utils';
   import { mdiGift } from '@mdi/js';
 
   export let message: Ytc.ParsedMessage;

src/components/PaidMessage.svelte

@@ -2,7 +2,7 @@
   import Message from './Message.svelte';
   import isDarkColor from 'is-dark-color';
   import { Theme } from '../ts/chat-constants';
-  import { formatAuthorName } from '../ts/author-name';
+  import { formatAuthorName } from '../ts/component-utils';
   import { showProfileIcons } from '../ts/storage';
 
   export let message: Ytc.ParsedMessage;

src/ts/author-name.ts

@@ -30,3 +30,8 @@ export const getDropdownOffsetY = async (div: HTMLElement, boundingDiv: HTMLElem
     return 'top-12';
   }
 };
+
+export const formatAuthorName = (name: string): string => {
+  if (!name.startsWith('@')) return name;
+  return name.slice(1);
+};