merge mv2

Author: KentoNishi

AGENTS.md

@@ -13,6 +13,7 @@
   - command: `npx -y chrome-devtools-mcp@latest --browserUrl=http://127.0.0.1:9222`
 - Use `scripts/codex-dev.sh watch` once per session to keep Chrome extension builds live in the background.
 - On `main`, this resolves to MV3 scripts (`dev:chrome`/`build:chrome`) and `build/chrome` output automatically.
+- On `mv2`, watcher mode prefers `npm run start:none` so build watch stays alive without separate browser autolaunch.
 - Start headless browser testing only when explicitly requested (for example: "go test", "test this", "run browser test").
 - For test runs, use `scripts/codex-dev.sh go-test`. This guarantees:
   - MCP configuration is present
@@ -31,6 +32,16 @@
   - settings/storage/messaging code under `src/ts/**`
 - The reload is intentionally hard (full browser restart) to avoid stale MV3 service-worker state, extension cache artifacts, and mixed-profile debugging drift.
 
+## 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.
+
+## 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.
+
 ## Operational Commands
 
 - `scripts/codex-dev.sh status` shows watcher/MCP/browser states.

scripts/codex-dev.sh

@@ -7,6 +7,7 @@ STATE_DIR="$REPO_ROOT/.codex-runtime"
 PROFILE_DIR="${USER_DATA_DIR:-$REPO_ROOT/.codex-profile}"
 REMOTE_DEBUGGING_PORT="${REMOTE_DEBUGGING_PORT:-9222}"
 CHROME_BIN="${CHROME_BIN:-google-chrome}"
+TEST_URL="${TEST_URL:-}"
 
 WATCH_PID_FILE="$STATE_DIR/watch.pid"
 WATCH_LOG_FILE="$STATE_DIR/watch.log"
@@ -16,6 +17,7 @@ WATCH_NPM_SCRIPT=""
 BUILD_NPM_SCRIPT=""
 EXT_PATH=""
 MODE_LABEL=""
+DEFAULT_TEST_URL=""
 
 mkdir -p "$STATE_DIR"
 
@@ -28,6 +30,19 @@ detect_repo_scripts() {
     BUILD_NPM_SCRIPT="build:chrome"
     EXT_PATH="$REPO_ROOT/build/chrome"
     MODE_LABEL="mv3"
+    DEFAULT_TEST_URL="https://www.youtube.com/watch?v=jfKfPfyJRdk"
+    return 0
+  fi
+
+  if (
+    cd "$REPO_ROOT" &&
+    node -e 'const s=require("./package.json").scripts||{}; process.exit(s["start:none"] && s["build"] ? 0 : 1);'
+  ); then
+    WATCH_NPM_SCRIPT="start:none"
+    BUILD_NPM_SCRIPT="build"
+    EXT_PATH="$REPO_ROOT/build"
+    MODE_LABEL="mv2"
+    DEFAULT_TEST_URL="https://www.youtube.com/watch?v=5qap5aO4i9A"
     return 0
   fi
 
@@ -39,6 +54,7 @@ detect_repo_scripts() {
     BUILD_NPM_SCRIPT="build"
     EXT_PATH="$REPO_ROOT/build"
     MODE_LABEL="mv2"
+    DEFAULT_TEST_URL="https://www.youtube.com/watch?v=5qap5aO4i9A"
     return 0
   fi
 
@@ -116,6 +132,9 @@ setup_mcp() {
 start_browser() {
   detect_repo_scripts
   resolve_chrome_bin
+  if [[ -z "$TEST_URL" ]]; then
+    TEST_URL="$DEFAULT_TEST_URL"
+  fi
   if [[ ! -f "$EXT_PATH/manifest.json" ]]; then
     echo "browser: extension build not found, running npm run $BUILD_NPM_SCRIPT"
     (
@@ -127,32 +146,37 @@ start_browser() {
   rm -rf "$PROFILE_DIR"
   mkdir -p "$PROFILE_DIR"
 
-  echo "browser: starting headless Chrome with extension"
-  nohup "$CHROME_BIN" \
-    --user-data-dir="$PROFILE_DIR" \
-    --remote-debugging-port="$REMOTE_DEBUGGING_PORT" \
-    --disable-gpu \
-    --headless=new \
-    --disable-extensions-except="$EXT_PATH" \
-    --load-extension="$EXT_PATH" \
-    --no-first-run \
-    --no-default-browser-check \
-    --disable-background-timer-throttling \
-    --disable-renderer-backgrounding \
-    --disable-dev-shm-usage \
-    --disable-features=IsolateOrigins,site-per-process,TranslateUI \
-    --disable-web-security \
-    --allow-running-insecure-content \
-    --allow-insecure-localhost \
-    --no-sandbox \
-    --disable-setuid-sandbox \
-    --noerrdialogs \
-    --disable-notifications \
-    --disable-translate \
-    --disable-infobars \
-    --autoplay-policy=no-user-gesture-required \
-    --enable-automation \
-    >"$BROWSER_LOG_FILE" 2>&1 &
+  local browser_args=(
+    --user-data-dir="$PROFILE_DIR"
+    --remote-debugging-port="$REMOTE_DEBUGGING_PORT"
+    --disable-gpu
+    --headless=new
+    --disable-extensions-except="$EXT_PATH"
+    --load-extension="$EXT_PATH"
+    --no-first-run
+    --no-default-browser-check
+    --disable-background-timer-throttling
+    --disable-renderer-backgrounding
+    --disable-dev-shm-usage
+    --disable-features=IsolateOrigins,site-per-process,TranslateUI
+    --disable-web-security
+    --allow-running-insecure-content
+    --allow-insecure-localhost
+    --no-sandbox
+    --disable-setuid-sandbox
+    --noerrdialogs
+    --disable-notifications
+    --disable-translate
+    --disable-infobars
+    --autoplay-policy=no-user-gesture-required
+    --enable-automation
+  )
+  if [[ -n "$TEST_URL" ]]; then
+    browser_args+=("$TEST_URL")
+  fi
+
+  echo "browser: starting headless Chrome with extension (url: $TEST_URL)"
+  nohup "$CHROME_BIN" "${browser_args[@]}" >"$BROWSER_LOG_FILE" 2>&1 &
 
   echo $! >"$BROWSER_PID_FILE"
   local pid
@@ -193,6 +217,10 @@ status() {
     echo "watch: stopped"
   fi
   echo "mode: $MODE_LABEL (watch=$WATCH_NPM_SCRIPT build=$BUILD_NPM_SCRIPT ext=$EXT_PATH)"
+  if [[ -z "$TEST_URL" ]]; then
+    TEST_URL="$DEFAULT_TEST_URL"
+  fi
+  echo "test-url: $TEST_URL"
   if codex mcp list 2>/dev/null | rg -q '^chrome-devtools'; then
     echo "mcp: configured in Codex as chrome-devtools"
   else
@@ -218,6 +246,9 @@ Commands:
   stop       Stop browser and watcher.
   status     Show process status and log directory.
   logs       Print paths for watch/browser logs.
+
+Environment:
+  TEST_URL   Optional override for the page opened in headless test browser.
 EOF
 }
 

src/components/MembershipItem.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import Message from './Message.svelte';
   import MessageRun from './MessageRuns.svelte';
+  import { formatAuthorName } from '../ts/author-name';
   import { showProfileIcons } from '../ts/storage';
   import { membershipBackground, milestoneChatBackground } from '../ts/chat-constants';
 
@@ -14,6 +15,7 @@
     console.error('Not a membership item', { message });
   }
   $: isMilestoneChat = message.message.length > 0;
+  $: displayAuthorName = formatAuthorName(message.author.name);
 
   $: primaryText = (membership ?? membershipGift)?.headerPrimaryText;
 </script>
@@ -32,7 +34,7 @@
         />
       {/if}
       <span class="font-bold tracking-wide align-middle mr-3">
-        {message.author.name}
+        {displayAuthorName}
       </span>
       {#if primaryText && primaryText.length > 0}
         <MessageRun

src/components/Message.svelte

@@ -14,6 +14,7 @@
   } from '../ts/storage';
   import { chatUserActionsItems, Theme } from '../ts/chat-constants';
   import { useBanHammer } from '../ts/chat-actions';
+  import { formatAuthorName } from '../ts/author-name';
   import type { Chat } from '../ts/typings/chat';
 
   export let message: Ytc.ParsedMessage;
@@ -58,6 +59,7 @@
   $: if (deleted != null) {
     message.message = deleted.replace;
   }
+  $: displayAuthorName = formatAuthorName(message.author.name);
 
   $: showUserMargin = $showProfileIcons || $showUsernames || $showTimestamps ||
     ($showUserBadges && (moderator || verified || member));
@@ -107,7 +109,7 @@
           class="{nameClass} {nameColorClass}"
           class:hidden={!$showUsernames}
         >
-          {message.author.name}
+          {displayAuthorName}
         </span>
       </a>
       <span class="align-middle" class:hidden={!$showUserBadges}>

src/components/PaidMessage.svelte

@@ -2,6 +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 { showProfileIcons } from '../ts/storage';
 
   export let message: Ytc.ParsedMessage;
@@ -22,6 +23,7 @@
   }
 
   const classes = 'inline-flex flex-col rounded break-words overflow-hidden w-full';
+  $: displayAuthorName = formatAuthorName(message.author.name);
 
   $: if (!paid) {
     console.error('Not a paid message', { message });
@@ -44,7 +46,7 @@
       {/if}
       <span class="mr-1 underline font-bold">{amount}</span>
       <span class="font-bold tracking-wide" style={nameColor}>
-        {message.author.name}
+        {displayAuthorName}
       </span>
       {#if message.superSticker}
         <img

src/ts/author-name.ts

@@ -0,0 +1,4 @@
+export const formatAuthorName = (name: string): string => {
+  if (!name.startsWith('@')) return name;
+  return name.slice(1);
+};