# Brand And Share Assets Implementation Plan

> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** Add a category-neutral product logo, favicon, extension icons, and WeChat-friendly social sharing metadata and image.

**Architecture:** Keep deterministic brand sources as SVG files under `public/assets`, derive raster formats with ImageMagick, and dynamically render absolute Open Graph URLs when serving HTML. Reuse the same logo across the landing page, authenticated shell, startup state, and extension.

**Tech Stack:** HTML, CSS, SVG, PNG/ICO, Node.js HTTP server, Node test runner, ImageMagick.

---

### Task 1: Add metadata regression coverage

**Files:**
- Modify: `tests/server.test.js`

- [ ] Add a server test that requests `/` and verifies title, description, favicon, Open Graph fields, absolute share image URL, and share image availability.
- [ ] Run `npm test -- tests/server.test.js` and verify the new test fails before implementation.

### Task 2: Create brand assets

**Files:**
- Create: `public/assets/brand-mark.svg`
- Create: `public/assets/brand-lockup.svg`
- Create: `public/assets/share-card.svg`
- Create: `public/assets/share-card.png`
- Create: `public/favicon.ico`
- Create: `extension/icons/icon16.png`
- Create: `extension/icons/icon32.png`
- Create: `extension/icons/icon48.png`
- Create: `extension/icons/icon128.png`

- [ ] Build the vector logo and share card from the approved jade, paper, brass, and cinnabar visual system.
- [ ] Rasterize the share image, favicon, and extension icon sizes with ImageMagick.
- [ ] Inspect dimensions and file formats.

### Task 3: Connect metadata and brand UI

**Files:**
- Modify: `public/index.html`
- Modify: `public/styles.css`
- Modify: `src/server.js`
- Modify: `extension/manifest.json`
- Modify: `extension/popup.html`
- Modify: `extension/popup.css`

- [ ] Add SEO, Open Graph, Twitter Card, favicon, and application icon metadata.
- [ ] Replace text-only brand marks with the reusable SVG mark.
- [ ] Render HTML share-origin placeholders to absolute URLs in the server.
- [ ] Add extension icons and generic product naming.

### Task 4: Verify

- [ ] Run `npm test`.
- [ ] Run syntax checks for server, frontend, and extension JavaScript.
- [ ] Start the server and verify metadata/assets over HTTP.
- [ ] Inspect the rendered homepage and share image.