# 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"
```