fix: update browser title

docs: capture browser title update
2026-03-21 15:12:19 +08:00 · 2026-03-21 15:10:49 +08:00
4 changed files with 156 additions and 1 deletions
--- a/docs/plans/2026-03-21-browser-title-design.md
+++ 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.
--- a/docs/plans/2026-03-21-browser-title.md
+++ 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"
+```
--- a/index.html
+++ b/index.html
@ -3,7 +3,7 @@
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>My Google AI Studio App</title>
+    <title>AI Video Translation Studio</title>
  </head>
  <body>
    <div id="root"></div>
--- a/src/browser-title.test.ts
+++ b/src/browser-title.test.ts
@ -0,0 +1,15 @@
+import { readFileSync } from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { describe, expect, it } from 'vitest';
+
+const currentDir = path.dirname(fileURLToPath(import.meta.url));
+const indexHtmlPath = path.resolve(currentDir, '../index.html');
+
+describe('browser title', () => {
+  it('uses the approved browser title', () => {
+    expect(readFileSync(indexHtmlPath, 'utf8')).toContain(
+      '<title>AI Video Translation Studio</title>',
+    );
+  });
+});
Author	SHA1	Message	Date
Song367	baba71e73d	fix: update browser title All checks were successful Gitea Actions Demo / Explore-Gitea-Actions (push) Successful in 1m5s Details	2026-03-21 15:12:19 +08:00
Song367	13672d1156	docs: capture browser title update	2026-03-21 15:10:49 +08:00