video_translate/docs/plans/2026-03-21-browser-title.md

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:

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:

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:

node ./node_modules/vitest/vitest.mjs run src/browser-title.test.ts

Expected: PASS.

Step 5: Commit

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:

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:

npm.cmd test
npm.cmd run lint
npm.cmd run build

Expected:

• all tests PASS
• lint PASS
• build PASS

Step 5: Commit

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"