108 lines
2.4 KiB
Markdown
108 lines
2.4 KiB
Markdown
# 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"
|
|
```
|