# andyxueanan-dot/codex-highlighter architecture

> Architecture diagram of the GitHub repository andyxueanan-dot/codex-highlighter, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-29). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/andyxueanan-dot/codex-highlighter
- Repository: https://github.com/andyxueanan-dot/codex-highlighter

## Overview

Codex Highlighter is a Windows companion for persistent, locally stored highlights in Codex conversations. The primary workflow is selecting transcript text, choosing a color, and later seeing the highlight re-anchored as the page changes. A native launcher enables loopback CDP and injects the renderer script; a background monitor synchronizes data to disk. Tray data management supports search, deletion, clearing, and JSON import/export. The source excerpts show the launcher, monitor, store, and manager, while renderer capabilities are documented in the README; some internal wiring is therefore omitted.

Main entry points: [`src/CodexHighlighter.cs`](https://github.com/andyxueanan-dot/codex-highlighter/blob/main/src/CodexHighlighter.cs) (CDP Monitor), [`src/HighlightManagerForm.cs`](https://github.com/andyxueanan-dot/codex-highlighter/blob/main/src/HighlightManagerForm.cs) (Data Manager), [`src/CodexLauncher.cs`](https://github.com/andyxueanan-dot/codex-highlighter/blob/main/src/CodexLauncher.cs) (Launch Coordinator), [`src/highlighter.js`](https://github.com/andyxueanan-dot/codex-highlighter/blob/main/src/highlighter.js) (Anchor Resolution)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_launch["Launch and Monitor"]
  node_codex_main["Native Host"]
  node_launcher["Launch Coordinator<br/>[CodexLauncher.cs]"]
  node_monitor["CDP Monitor"]
end

subgraph group_renderer["Transcript Highlighting"]
  node_runtime["Injected Runtime<br/>[highlighter.js]"]
  node_selection["Selection Palette<br/>[highlighter.js]"]
  node_anchors["Anchor Resolution<br/>[highlighter.js]"]
  node_observer["Transcript Observers<br/>[highlighter.js]"]
end

subgraph group_storage["Local Data"]
  node_store[("Highlight Store")]
  node_backup[("Prune Backups")]
end

subgraph group_management["Tray Management"]
  node_tray["Tray Interface"]
  node_manager["Data Manager"]
end

node_user(("User"))
node_codex["Codex Desktop"]
node_cdp["Loopback CDP"]
node_css["CSS Highlights"]
node_browser_data[("Page Data")]
node_json_files[("JSON Backup Files")]

node_user -->|"opens"| node_launcher
node_codex_main -->|"delegates launch"| node_launcher
node_launcher -->|"starts or focuses"| node_codex
node_monitor -->|"connects"| node_cdp
node_cdp -->|"accesses renderer"| node_codex
node_monitor -->|"injects script"| node_runtime
node_user -->|"selects text"| node_selection
node_selection -->|"creates or edits"| node_anchors
node_runtime -->|"reads and writes"| node_browser_data
node_anchors -->|"renders ranges"| node_css
node_observer -->|"schedules re-anchoring"| node_anchors
node_monitor -->|"loads and saves"| node_store
node_monitor -->|"synchronizes data"| node_cdp
node_monitor -->|"writes pruned records"| node_backup
node_user -->|"uses"| node_tray
node_tray -->|"opens"| node_manager
node_manager -->|"reads and replaces"| node_store
node_manager -->|"imports or exports"| node_json_files

click node_codex_main "https://github.com/andyxueanan-dot/codex-highlighter/blob/main/src/CodexHighlighter.cs"
click node_launcher "https://github.com/andyxueanan-dot/codex-highlighter/blob/main/src/CodexLauncher.cs"
click node_monitor "https://github.com/andyxueanan-dot/codex-highlighter/blob/main/src/CodexHighlighter.cs"
click node_runtime "https://github.com/andyxueanan-dot/codex-highlighter/blob/main/src/highlighter.js"
click node_selection "https://github.com/andyxueanan-dot/codex-highlighter/blob/main/src/highlighter.js"
click node_anchors "https://github.com/andyxueanan-dot/codex-highlighter/blob/main/src/highlighter.js"
click node_observer "https://github.com/andyxueanan-dot/codex-highlighter/blob/main/src/highlighter.js"
click node_store "https://github.com/andyxueanan-dot/codex-highlighter/blob/main/src/CodexHighlighter.cs"
click node_backup "https://github.com/andyxueanan-dot/codex-highlighter/blob/main/src/CodexHighlighter.cs"
click node_tray "https://github.com/andyxueanan-dot/codex-highlighter/blob/main/src/CodexHighlighter.cs"
click node_manager "https://github.com/andyxueanan-dot/codex-highlighter/blob/main/src/HighlightManagerForm.cs"

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_codex_main,node_launcher,node_monitor,node_user toneBlue
class node_runtime,node_selection,node_anchors,node_observer,node_browser_data,node_json_files toneAmber
class node_store,node_backup toneMint
class node_tray,node_manager toneRose
class node_codex,node_cdp,node_css toneIndigo
```

## Components

### Launch and Monitor

- [Native Host](https://github.com/andyxueanan-dot/codex-highlighter/blob/main/src/CodexHighlighter.cs): `src/CodexHighlighter.cs`
- [Launch Coordinator](https://github.com/andyxueanan-dot/codex-highlighter/blob/main/src/CodexLauncher.cs): `src/CodexLauncher.cs`
- [CDP Monitor](https://github.com/andyxueanan-dot/codex-highlighter/blob/main/src/CodexHighlighter.cs): `src/CodexHighlighter.cs`

### Transcript Highlighting

- [Injected Runtime](https://github.com/andyxueanan-dot/codex-highlighter/blob/main/src/highlighter.js): `src/highlighter.js`
- [Selection Palette](https://github.com/andyxueanan-dot/codex-highlighter/blob/main/src/highlighter.js): `src/highlighter.js`
- [Anchor Resolution](https://github.com/andyxueanan-dot/codex-highlighter/blob/main/src/highlighter.js): `src/highlighter.js`
- [Transcript Observers](https://github.com/andyxueanan-dot/codex-highlighter/blob/main/src/highlighter.js): `src/highlighter.js`

### Local Data

- [Highlight Store](https://github.com/andyxueanan-dot/codex-highlighter/blob/main/src/CodexHighlighter.cs): `src/CodexHighlighter.cs`
- [Prune Backups](https://github.com/andyxueanan-dot/codex-highlighter/blob/main/src/CodexHighlighter.cs): `src/CodexHighlighter.cs`

### Tray Management

- [Tray Interface](https://github.com/andyxueanan-dot/codex-highlighter/blob/main/src/CodexHighlighter.cs): `src/CodexHighlighter.cs`
- [Data Manager](https://github.com/andyxueanan-dot/codex-highlighter/blob/main/src/HighlightManagerForm.cs): `src/HighlightManagerForm.cs`

### Other components

- **User**
- **Codex Desktop**
- **Loopback CDP**
- **CSS Highlights**
- **Page Data**
- **JSON Backup Files**

## Connections

- User → Launch Coordinator: opens
- Native Host → Launch Coordinator: delegates launch
- Launch Coordinator → Codex Desktop: starts or focuses
- CDP Monitor → Loopback CDP: connects
- Loopback CDP → Codex Desktop: accesses renderer
- CDP Monitor → Injected Runtime: injects script
- User → Selection Palette: selects text
- Selection Palette → Anchor Resolution: creates or edits
- Injected Runtime → Page Data: reads and writes
- Anchor Resolution → CSS Highlights: renders ranges
- Transcript Observers → Anchor Resolution: schedules re-anchoring
- CDP Monitor → Highlight Store: loads and saves
- CDP Monitor → Loopback CDP: synchronizes data
- CDP Monitor → Prune Backups: writes pruned records
- User → Tray Interface: uses
- Tray Interface → Data Manager: opens
- Data Manager → Highlight Store: reads and replaces
- Data Manager → JSON Backup Files: imports or exports