···11+## Design Context
22+33+_Sourced from the Lede **extension** design context, aligned with [`brand-guidelines.md`](brand-guidelines.md) for this **marketing site**. The extension repo remains canonical for in-product UI; this file adapts it for a full-page landing._
44+55+### Users
66+77+- **Anyone** who wants to **quickly grasp the main points** of a webpage—especially to **decide if it is worth reading** and to **dig deeper** with questions **without leaving the tab**.
88+- Mix of **casual readers** and **power users**; some run **local models (Ollama)** and care where page text goes, others use **configured OpenAI-compatible APIs**.
99+- **Extension** primary surface: a **small popup** (toolbar or shortcut), mid-read, limited space and attention.
1010+- **This site** primary surface: a **browser window** for evaluation and **beta install** (source / dev load)—copy should still feel page-grounded and honest about beta and stores.
1111+1212+### Brand Personality
1313+1414+- **Warm, direct, and friendly**—grounded in the journalism *lede* (important thing first). **Approachable and human**, not cold or corporate: clear labels, honest limits, **occasional light wit** only where it reduces friction.
1515+- **Tone references** (hierarchy and calm, not visual mimicry): **Claude**, **Perplexity**, **Notion**.
1616+- **Anti-references**—avoid the generic “AI assistant” vibe of **ChatGPT**, **Gemini**, and **Apple Intelligence**: no interchangeable chat-shell aesthetics, no glossy minimal void, no anonymous assistant theater.
1717+- **Also avoid** on the landing: undifferentiated purple gradients, neon-on-dark “AI product” chrome, and endless same-shaped feature cards.
1818+1919+### Aesthetic Direction
2020+2121+- **Editorial / newsprint utility with warmth**: paper-like surfaces (`#f5f0e8` family), ink-like text, **one confident accent** (default orange `#F15B2F`)—highlighter or section rule, not rainbow accents.
2222+- **Product UI** supports **light, dark, and system**; default in-app follows **OS**. **Marketing site** (per [`brand-guidelines.md`](brand-guidelines.md)): default **warm light** canvas reads as the same brand; optional dark sections or a later theme toggle are fine if they reuse dark tokens from the guidelines.
2323+- **Typography for this site**: Use **Sora + system-ui stacks** from [`brand-guidelines.md`](brand-guidelines.md) so the landing matches shipped chrome and wordmark. Favor **intentional scale, rhythm, and restrained motion**—compact-feeling sections where it helps, not marketing bloat.
2424+- **Accessibility**: **Reasonable defaults**—legible contrast, visible focus, **respect `prefers-reduced-motion`**. No separate formal WCAG tier is required unless product scope changes (aligns with extension); still avoid careless contrast on orange CTAs and links.
2525+2626+### Design Principles
2727+2828+1. **Answer “is this worth my time?” first**—hero and hierarchy make the verdict and the lede obvious before optional depth.
2929+2. **Warm, direct, friendly**—invite; explain limits plainly; avoid stiff or robotic tone.
3030+3. **Respect the surface**—in the app that’s the **popup** (density, scanability, predictable chrome); on the **site** that’s **scannable sections**, predictable nav, and no walls of filler.
3131+4. **Privacy posture stays visible**—local vs cloud and when text leaves the machine stay easy to find, not buried.
3232+5. **Warm neutrals over cold gray**—tint surfaces and type toward brand warmth so the UI feels cohesive, not template-default.
3333+6. **Personality in the right layer**—microcopy and empty-state-style moments can have voice; wayfinding, install steps, and errors stay clear and calm.
3434+7. **Obvious selection**—any exclusive choices on the site (e.g. theme or accent demos if shown) need glanceable selected states (e.g. ink + surface rings), not a single 1px border that disappears on the swatch hue.
3535+8. **Same product, same room**—bolt, wordmark, palette, and CTA patterns match the extension docs; craft shows in **composition**, not a re-skinned “generic SaaS” look.
3636+9. **Honesty about beta**—no store badges until shipped; CTAs match real install paths.
3737+3838+### Decisions log
3939+4040+- **Copilot instructions**: Declined — `.impeccable.md` only unless you ask to sync elsewhere.
4141+- **Typography (resolved)**: Extension context does **not** override [`brand-guidelines.md`](brand-guidelines.md) stacks for the landing; **Sora + system body** stay the default pairing. Editorial warmth comes from **color, spacing, and copy**, not from swapping to a conflicting display face.
···11+- Open source on Tangled -- https://tangled.org/ellioth.co/summarizer-extension
+128
info on the extension/project-readme.md
···11+# Lede — page summarizer & chat (WIP)
22+33+A browser extension for Chrome and Firefox that lets you ask questions and summarize any webpage using AI (using Ollama or any OpenAI-compatible API). Works best with the GPT-OSS-20b model.
44+55+In **Beta**. Not yet in the Chrome Web Store or Firefox Addons.
66+77+## Features
88+99+- 📄 **One-Click Summaries** - Summarize page content efficiently
1010+- 🤖 **Follow Up Questions** - Ask questions about the current webpage and summary
1111+- 🔌 **OpenAI-Compatible** - Works with Ollama, OpenAI, Groq, and LM Studio
1212+- ⚙️ **Configurable** - Choose your own model and API endpoint
1313+- 🔒 **Privacy-first** - Keep summaries local with Ollama, or use a cloud provider when you choose one.
1414+- ⌨️ **Quick access** - Keyboard shortcut of `Ctrl/Cmd+Shift+U`, use the right click menu, or click the extension icon.
1515+1616+## About
1717+Made to solve a very simple problem I had as a user of the Helium web browser.
1818+1919+## Installation (in dev mode)
2020+2121+### Chrome
2222+2323+1. Open Chrome and navigate to `chrome://extensions/`
2424+2. Enable **Developer mode** (toggle in top right)
2525+3. Click **Load unpacked**
2626+4. Select the `webai-summarizer` folder
2727+5. The extension icon should appear in your toolbar
2828+6. Optionally set up the keyboard shortcut at `chrome://extensions/shortcuts`
2929+3030+### Firefox
3131+3232+1. Open Firefox and navigate to `about:debugging#/runtime/this-firefox`
3333+2. Click **Load Temporary Add-on**
3434+3. Select the `manifest.json` file in the `webai-summarizer` folder
3535+4. The extension icon should appear in your toolbar
3636+3737+**Note:** Firefox requires you to manually enable the keyboard shortcut:
3838+1. Type `about:addons` in the address bar
3939+2. Click the gear icon (⚙️) → **Manage Extension Shortcuts**
4040+4141+## TODO
4242+4343+- [x] Better branding / icon / logo
4444+- [ ] Similar to "branding" -- Rename extension to something more unique and not placeholder-y
4545+- [ ] Publish to Chrome Web Store
4646+- [ ] Publish to Firefox Add-ons
4747+4848+### Build for Specific Browser
4949+5050+If needed, you can build for a specific browser:
5151+5252+```bash
5353+# For Chrome
5454+./build.sh chrome
5555+5656+# For Firefox
5757+./build.sh firefox
5858+```
5959+6060+## Usage
6161+6262+1. **Navigate to any webpage**
6363+2. **Click the extension icon** in your toolbar, **or press `Ctrl/Cmd+Shift+U`**
6464+3. **Click "Summarize Page"** for an instant summary, **or**
6565+4. **Type a question** about the page content and press Enter
6666+6767+6868+## API Mode Explained
6969+7070+### Ollama Native Mode
7171+- Uses Ollama's native `/api/generate` endpoint
7272+- Works out of the box if Ollama is installed
7373+- Recommended for local Ollama installations
7474+- Base URL should NOT include `/v1`
7575+7676+### OpenAI-Compatible Mode
7777+- Uses the `/v1/chat/completions` endpoint
7878+- Required for OpenAI, Groq, and other cloud providers
7979+- Can work with Ollama if you set the `OPENAI_API_BASE` environment variable
8080+- Base URL MUST include `/v1` for Ollama compatibility mode
8181+8282+## Privacy Notes
8383+8484+- In **Ollama Native** mode, your content stays on your machine (local model/server).
8585+- In **OpenAI-compatible** mode, page content is sent to the provider endpoint you configure.
8686+- The extension now extracts page text on-demand when you trigger summarize/chat, rather than running a persistent content script on all pages.
8787+8888+## Troubleshooting
8989+9090+### "Cannot connect to localhost:11434"
9191+1. Make sure Ollama is running: `ollama serve`
9292+2. Check that you pulled the model: `ollama list`
9393+3. If using Ollama, make sure your URL doesn't have `/v1` in Native mode
9494+4. Check browser console for detailed error messages
9595+9696+### "HTTP 403" or "HTTP 405"
9797+This means the API endpoint is wrong. Try:
9898+1. Switch API Mode from settings
9999+2. For Ollama Native: use `http://localhost:11434` (no /v1)
100100+3. For OpenAI mode: use `http://localhost:11434/v1` (with /v1)
101101+102102+## File Structure
103103+104104+```
105105+webai-summarizer/
106106+├── manifest.json # Extension configuration (active)
107107+├── manifest-chrome.json # Chrome-specific manifest
108108+├── manifest-firefox.json # Firefox-specific manifest
109109+├── build.sh # Build script for browser switching
110110+├── BROWSER_SUPPORT.md # Browser compatibility documentation
111111+├── popup/
112112+│ ├── popup.html # Chat interface
113113+│ ├── popup.css # Styling
114114+│ ├── popup.js # Popup logic
115115+│ └── marked.min.js # Markdown parser
116116+├── scripts/
117117+│ ├── content.js # Webpage text extraction
118118+│ └── background.js # API communication
119119+├── options/
120120+│ ├── options.html # Settings page
121121+│ ├── options.css
122122+│ └── options.js
123123+└── icons/
124124+ ├── icon16.png
125125+ ├── icon32.png
126126+ ├── icon48.png
127127+ └── icon128.png
128128+```