songjvcheng/video_translate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: songjvcheng:baba71e73d4cbc34b97bc8feb8803a6e4a259e08
Branches Tags
songjvcheng:main
..
compare: songjvcheng:02f917ba760301a9917e7ce1f37be18afc02179f
Branches Tags
songjvcheng:main

No commits in common. "baba71e73d4cbc34b97bc8feb8803a6e4a259e08" and "02f917ba760301a9917e7ce1f37be18afc02179f" have entirely different histories.
baba71e73d ... 02f917ba76

4 changed files with 1 additions and 156 deletions
Show Stats Expand all files Collapse all files

33
docs/plans/2026-03-21-browser-title-design.md
View File

@ -1,33 +0,0 @@
# 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.

107
docs/plans/2026-03-21-browser-title.md
View File

@ -1,107 +0,0 @@
# 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"
```

2
index.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>AI Video Translation Studio</title> <title>My Google AI Studio App</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

15
src/browser-title.test.ts
View File

@ -1,15 +0,0 @@
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>',
);
});
});