From 13672d11562cf2a3ed07e92f005e5637af70af1b Mon Sep 17 00:00:00 2001
From: Song367 <601337784@qq.com>
Date: Sat, 21 Mar 2026 15:10:49 +0800
Subject: [PATCH] docs: capture browser title update

---
 docs/plans/2026-03-21-browser-title-design.md |  33 ++++++
 docs/plans/2026-03-21-browser-title.md        | 107 ++++++++++++++++++
 2 files changed, 140 insertions(+)
 create mode 100644 docs/plans/2026-03-21-browser-title-design.md
 create mode 100644 docs/plans/2026-03-21-browser-title.md

diff --git a/docs/plans/2026-03-21-browser-title-design.md b/docs/plans/2026-03-21-browser-title-design.md
new file mode 100644
index 0000000..5441a47
--- /dev/null
+++ b/docs/plans/2026-03-21-browser-title-design.md
@@ -0,0 +1,33 @@
+# Browser Title Design
+
+**Goal:** Replace the default browser tab title with a more professional product title: `AI Video Translation Studio`.
+
+## Context
+
+The current browser title still uses the starter text `My Google AI Studio App`, which looks unfinished and does not match the product's actual purpose. The user wants the browser tab to read as a real video translation product.
+
+The approved title is `AI Video Translation Studio`.
+
+## Approved Direction
+
+- change only the browser tab title
+- use `AI Video Translation Studio`
+- do not change page body copy or in-app product labels in this step
+
+## Recommended Implementation
+
+Update the static HTML shell title in `index.html`. The application does not currently set `document.title` dynamically, so the simplest and most reliable change is to replace the hard-coded `<title>` value.
+
+## Testing Strategy
+
+Add a small test that reads `index.html` and verifies the expected `<title>` string. This keeps the change covered without introducing runtime complexity.
+
+## Out of Scope
+
+- changing header branding inside the app
+- changing product copy across the UI
+- adding route-specific dynamic document titles
+
+## Success Criteria
+
+Success means the browser tab displays `AI Video Translation Studio` instead of the starter title everywhere the app loads.
diff --git a/docs/plans/2026-03-21-browser-title.md b/docs/plans/2026-03-21-browser-title.md
new file mode 100644
index 0000000..6160a48
--- /dev/null
+++ b/docs/plans/2026-03-21-browser-title.md
@@ -0,0 +1,107 @@
+# Browser Title Implementation Plan
+
+> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
+
+**Goal:** Set the browser tab title to `AI Video Translation Studio` and cover it with a minimal regression test.
+
+**Architecture:** Update the static `<title>` tag in `index.html` and add a lightweight Vitest file that reads the HTML shell from disk to assert the expected title string. Keep the change scoped to the browser tab only.
+
+**Tech Stack:** HTML, Vitest, Node.js fs/path utilities
+
+---
+
+### Task 1: Lock the approved title with a failing test
+
+**Files:**
+- Create: `src/browser-title.test.ts`
+- Reference: `index.html`
+
+**Step 1: Write the failing test**
+
+Create a test that reads `index.html` and expects the new title:
+
+```ts
+it('uses the approved browser title', () => {
+  expect(readFileSync(indexHtmlPath, 'utf8')).toContain(
+    '<title>AI Video Translation Studio</title>',
+  );
+});
+```
+
+**Step 2: Run test to verify it fails**
+
+Run:
+
+```bash
+node ./node_modules/vitest/vitest.mjs run src/browser-title.test.ts
+```
+
+Expected: FAIL because `index.html` still contains the starter title.
+
+**Step 3: Write minimal implementation**
+
+Replace the existing `<title>` in `index.html` with the approved title.
+
+**Step 4: Run test to verify it passes**
+
+Run:
+
+```bash
+node ./node_modules/vitest/vitest.mjs run src/browser-title.test.ts
+```
+
+Expected: PASS.
+
+**Step 5: Commit**
+
+```bash
+git add index.html src/browser-title.test.ts
+git commit -m "fix: update browser title"
+```
+
+### Task 2: Full verification and integration
+
+**Files:**
+- Modify: `index.html`
+- Create: `src/browser-title.test.ts`
+
+**Step 1: Write the failing test**
+
+If any regression appears during verification, add the smallest targeted test first.
+
+**Step 2: Run test to verify it fails**
+
+Run:
+
+```bash
+node ./node_modules/vitest/vitest.mjs run src/browser-title.test.ts
+```
+
+Expected: FAIL only if a real title regression exists.
+
+**Step 3: Write minimal implementation**
+
+Apply only the smallest change needed to restore the approved title behavior.
+
+**Step 4: Run test to verify it passes**
+
+Run:
+
+```bash
+npm.cmd test
+npm.cmd run lint
+npm.cmd run build
+```
+
+Expected:
+
+- all tests PASS
+- lint PASS
+- build PASS
+
+**Step 5: Commit**
+
+```bash
+git add index.html src/browser-title.test.ts docs/plans/2026-03-21-browser-title-design.md docs/plans/2026-03-21-browser-title.md
+git commit -m "test: verify browser title update"
+```