# antonie-riziki/viable-public---might-delete-later architecture

> Architecture diagram of the GitHub repository antonie-riziki/viable-public---might-delete-later, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-11). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/antonie-riziki/viable-public---might-delete-later
- Repository: https://github.com/antonie-riziki/viable-public---might-delete-later

## Overview

ViAble is a voice-first browser accessibility assistant. A user asks about the active page by voice or text; the side panel obtains page context through the extension boundary, then presents spoken or typed guidance. Separate capabilities cover page reading, OCR, accessibility adaptations, and user-approved form or button actions. The graph reflects documented and excerpted calls; several runtime details are unsampled, so uncertain internal links are omitted.

Main entry points: [`public/background/service-worker.js`](https://github.com/antonie-riziki/viable-public---might-delete-later/blob/main/public/background/service-worker.js) (Background Worker), [`src/App.tsx`](https://github.com/antonie-riziki/viable-public---might-delete-later/blob/main/src/App.tsx) (Side Panel), [`src/lib/extension.ts`](https://github.com/antonie-riziki/viable-public---might-delete-later/blob/main/src/lib/extension.ts) (Settings Boundary), [`src/lib/voice.ts`](https://github.com/antonie-riziki/viable-public---might-delete-later/blob/main/src/lib/voice.ts) (Voice Interaction)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["User Experience"]
  node_panel["Side Panel<br/>[App.tsx]"]
  node_options["Preferences<br/>[OptionsApp.tsx]"]
  node_domain["Interaction Types<br/>[domain.ts]"]
  node_language["Language Support<br/>[language.ts]"]
end

subgraph group_extension["Browser Extension"]
  node_settings["Settings Boundary<br/>[extension.ts]"]
  node_accessibility["Accessibility Settings<br/>[accessibility.ts]"]
  node_worker["Background Worker<br/>[service-worker.js]"]
end

subgraph group_page["Page Interaction"]
  node_content["Page Content Script<br/>[page-context.js]"]
  node_extractor["Semantic Extractor<br/>[extractor.ts]"]
end

subgraph group_voice["Voice Services"]
  node_voice["Voice Interaction<br/>[voice.ts]"]
  node_offscreen["Audio Playback<br/>[offscreen.js]"]
  node_proxy["Voice Proxy<br/>[voice-proxy.mjs]"]
  node_gemini["Gemini"]
  node_elevenlabs["ElevenLabs"]
end

node_user(("User"))

node_user -->|"asks or acts"| node_panel
node_user -->|"sets preferences"| node_options
node_panel -->|"requests page and settings"| node_settings
node_options -->|"loads and saves"| node_settings
node_panel -->|"speaks and listens"| node_voice
node_panel -->|"saves adaptations"| node_accessibility
node_panel -->|"uses language analysis"| node_language
node_voice -->|"builds responses"| node_language
node_voice -->|"sends voice requests"| node_settings
node_settings -->|"messages extension"| node_worker
node_accessibility -->|"applies settings"| node_worker
node_worker -->|"requests page context"| node_content
node_worker -->|"applies page settings"| node_content
node_worker -->|"forwards OCR requests"| node_proxy
node_worker -->|"creates audio document"| node_offscreen
node_proxy -->|"requests reasoning"| node_gemini
node_proxy -->|"requests speech"| node_elevenlabs

click node_panel "https://github.com/antonie-riziki/viable-public---might-delete-later/blob/main/src/App.tsx"
click node_options "https://github.com/antonie-riziki/viable-public---might-delete-later/blob/main/src/options/OptionsApp.tsx"
click node_domain "https://github.com/antonie-riziki/viable-public---might-delete-later/blob/main/src/lib/domain.ts"
click node_language "https://github.com/antonie-riziki/viable-public---might-delete-later/blob/main/src/lib/language.ts"
click node_settings "https://github.com/antonie-riziki/viable-public---might-delete-later/blob/main/src/lib/extension.ts"
click node_accessibility "https://github.com/antonie-riziki/viable-public---might-delete-later/blob/main/src/lib/accessibility.ts"
click node_worker "https://github.com/antonie-riziki/viable-public---might-delete-later/blob/main/public/background/service-worker.js"
click node_content "https://github.com/antonie-riziki/viable-public---might-delete-later/blob/main/public/content/page-context.js"
click node_extractor "https://github.com/antonie-riziki/viable-public---might-delete-later/blob/main/src/content/extractor.ts"
click node_voice "https://github.com/antonie-riziki/viable-public---might-delete-later/blob/main/src/lib/voice.ts"
click node_offscreen "https://github.com/antonie-riziki/viable-public---might-delete-later/blob/main/public/offscreen.js"
click node_proxy "https://github.com/antonie-riziki/viable-public---might-delete-later/blob/main/server/voice-proxy.mjs"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_panel,node_options,node_domain,node_language,node_user toneBlue
class node_settings,node_accessibility,node_worker toneAmber
class node_content,node_extractor toneMint
class node_voice,node_offscreen,node_proxy,node_gemini,node_elevenlabs toneRose
```

## Components

### User Experience

- [Side Panel](https://github.com/antonie-riziki/viable-public---might-delete-later/blob/main/src/App.tsx): `src/App.tsx`
- [Preferences](https://github.com/antonie-riziki/viable-public---might-delete-later/blob/main/src/options/OptionsApp.tsx): `src/options/OptionsApp.tsx`
- [Interaction Types](https://github.com/antonie-riziki/viable-public---might-delete-later/blob/main/src/lib/domain.ts): `src/lib/domain.ts`
- [Language Support](https://github.com/antonie-riziki/viable-public---might-delete-later/blob/main/src/lib/language.ts): `src/lib/language.ts`

### Browser Extension

- [Settings Boundary](https://github.com/antonie-riziki/viable-public---might-delete-later/blob/main/src/lib/extension.ts): `src/lib/extension.ts`
- [Accessibility Settings](https://github.com/antonie-riziki/viable-public---might-delete-later/blob/main/src/lib/accessibility.ts): `src/lib/accessibility.ts`
- [Background Worker](https://github.com/antonie-riziki/viable-public---might-delete-later/blob/main/public/background/service-worker.js): `public/background/service-worker.js`

### Page Interaction

- [Page Content Script](https://github.com/antonie-riziki/viable-public---might-delete-later/blob/main/public/content/page-context.js): `public/content/page-context.js`
- [Semantic Extractor](https://github.com/antonie-riziki/viable-public---might-delete-later/blob/main/src/content/extractor.ts): `src/content/extractor.ts`

### Voice Services

- [Voice Interaction](https://github.com/antonie-riziki/viable-public---might-delete-later/blob/main/src/lib/voice.ts): `src/lib/voice.ts`
- [Audio Playback](https://github.com/antonie-riziki/viable-public---might-delete-later/blob/main/public/offscreen.js): `public/offscreen.js`
- [Voice Proxy](https://github.com/antonie-riziki/viable-public---might-delete-later/blob/main/server/voice-proxy.mjs): `server/voice-proxy.mjs`
- **Gemini**
- **ElevenLabs**

### Other components

- **User**

## Connections

- User → Side Panel: asks or acts (evidence: `README.md`)
- User → Preferences: sets preferences (evidence: `README.md`)
- Side Panel → Settings Boundary: requests page and settings (evidence: `src/App.tsx`)
- Preferences → Settings Boundary: loads and saves (evidence: `src/options/OptionsApp.tsx`)
- Side Panel → Voice Interaction: speaks and listens (evidence: `src/App.tsx`)
- Side Panel → Accessibility Settings: saves adaptations (evidence: `src/App.tsx`)
- Side Panel → Language Support: uses language analysis (evidence: `src/App.tsx`)
- Voice Interaction → Language Support: builds responses (evidence: `src/lib/voice.ts`)
- Voice Interaction → Settings Boundary: sends voice requests (evidence: `src/lib/voice.ts`)
- Settings Boundary → Background Worker: messages extension (evidence: `src/lib/extension.ts`)
- Accessibility Settings → Background Worker: applies settings (evidence: `src/lib/accessibility.ts`)
- Background Worker → Page Content Script: requests page context (evidence: `public/background/service-worker.js`)
- Background Worker → Page Content Script: applies page settings (evidence: `public/background/service-worker.js`)
- Background Worker → Voice Proxy: forwards OCR requests (evidence: `public/background/service-worker.js`)
- Background Worker → Audio Playback: creates audio document (evidence: `public/background/service-worker.js`)
- Voice Proxy → Gemini: requests reasoning (evidence: `README.md`)
- Voice Proxy → ElevenLabs: requests speech (evidence: `README.md`)