# thanycodes/streaks architecture

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

- Interactive diagram: https://gitdiagram.com/thanycodes/streaks
- Repository: https://github.com/thanycodes/streaks

## Overview

Streaks is a browser-based habit tracker: users add habits, mark days complete, and see recent activity and streaks. The UI delegates habit changes and persistence to the store, which uses local dates and streak rules for display. Optional cross-device sync uses a private code and HTTP transport to merge local data with a Worker-backed KV copy. The README also documents offline and home-screen use; the shown sources confirm service-worker registration and a manifest, but not the generated worker’s caching behavior.

Main entry points: [`src/sync.ts`](https://github.com/thanycodes/streaks/blob/main/src/sync.ts) (Sync engine), [`worker/src/handler.ts`](https://github.com/thanycodes/streaks/blob/main/worker/src/handler.ts) (Sync HTTP API), [`src/main.ts`](https://github.com/thanycodes/streaks/blob/main/src/main.ts) (App startup), [`src/ui.ts`](https://github.com/thanycodes/streaks/blob/main/src/ui.ts) (Habit interface)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_browser["Browser app"]
  node_app["App startup<br/>[main.ts]"]
  node_habit_ui["Habit interface<br/>[ui.ts]"]
  node_sync_panel["Sync controls<br/>[syncPanel.ts]"]
  node_manifest["Install metadata"]
end

subgraph group_domain["Habit domain"]
  node_dates["Local date rules<br/>[dates.ts]"]
  node_streak_rules["Streak rules<br/>[streaks.ts]"]
  node_habit_store["Habit state<br/>[store.ts]"]
  node_merge_rules["Conflict merge<br/>[merge.ts]"]
end

subgraph group_sync["Cross-device sync"]
  node_sync_engine["Sync engine<br/>[sync.ts]"]
  node_sync_codes["Sync code rules<br/>[syncCode.ts]"]
end

subgraph group_server["Sync service"]
  node_sync_api["Sync HTTP API<br/>[handler.ts]"]
  node_worker_entry["Worker entry<br/>[index.ts]"]
  node_kv_store[("Workers KV<br/>[wrangler.toml]")]
end

node_user(("Habit tracker user"))
node_local_storage[("Browser storage")]

node_user -->|"uses"| node_habit_ui
node_app -->|"creates"| node_habit_ui
node_app -->|"creates"| node_sync_engine
node_app -->|"creates"| node_sync_panel
node_app -->|"gets today"| node_dates
node_app -->|"provides storage"| node_local_storage
node_habit_ui -->|"changes and reads"| node_habit_store
node_habit_ui -->|"calculates streaks"| node_streak_rules
node_habit_ui -->|"renders date range"| node_dates
node_habit_store -->|"loads and saves"| node_local_storage
node_habit_store -->|"merges day marks"| node_merge_rules
node_streak_rules -->|"steps days"| node_dates
node_sync_panel -->|"controls"| node_sync_engine
node_sync_panel -->|"formats code"| node_sync_codes
node_sync_engine -->|"validates habits"| node_habit_store
node_sync_engine -->|"merges copies"| node_merge_rules
node_sync_engine -->|"normalizes codes"| node_sync_codes
node_sync_engine -.->|"sends HTTP sync"| node_sync_api
node_worker_entry -->|"dispatches requests"| node_sync_api
node_sync_api -->|"parses habits"| node_habit_store
node_sync_api -->|"merges copies"| node_merge_rules
node_sync_api -->|"normalizes code"| node_sync_codes
node_sync_api -->|"reads and writes"| node_kv_store

click node_app "https://github.com/thanycodes/streaks/blob/main/src/main.ts"
click node_habit_ui "https://github.com/thanycodes/streaks/blob/main/src/ui.ts"
click node_sync_panel "https://github.com/thanycodes/streaks/blob/main/src/syncPanel.ts"
click node_manifest "https://github.com/thanycodes/streaks/blob/main/public/manifest.webmanifest"
click node_dates "https://github.com/thanycodes/streaks/blob/main/src/dates.ts"
click node_streak_rules "https://github.com/thanycodes/streaks/blob/main/src/streaks.ts"
click node_habit_store "https://github.com/thanycodes/streaks/blob/main/src/store.ts"
click node_merge_rules "https://github.com/thanycodes/streaks/blob/main/src/merge.ts"
click node_sync_engine "https://github.com/thanycodes/streaks/blob/main/src/sync.ts"
click node_sync_codes "https://github.com/thanycodes/streaks/blob/main/src/syncCode.ts"
click node_sync_api "https://github.com/thanycodes/streaks/blob/main/worker/src/handler.ts"
click node_worker_entry "https://github.com/thanycodes/streaks/blob/main/worker/src/index.ts"
click node_kv_store "https://github.com/thanycodes/streaks/blob/main/worker/wrangler.toml"

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_app,node_habit_ui,node_sync_panel,node_manifest,node_user toneBlue
class node_dates,node_streak_rules,node_habit_store,node_merge_rules,node_local_storage toneAmber
class node_sync_engine,node_sync_codes toneMint
class node_sync_api,node_worker_entry,node_kv_store toneRose
```

## Components

### Browser app

- [App startup](https://github.com/thanycodes/streaks/blob/main/src/main.ts): `src/main.ts`
- [Habit interface](https://github.com/thanycodes/streaks/blob/main/src/ui.ts): `src/ui.ts`
- [Sync controls](https://github.com/thanycodes/streaks/blob/main/src/syncPanel.ts): `src/syncPanel.ts`
- [Install metadata](https://github.com/thanycodes/streaks/blob/main/public/manifest.webmanifest): `public/manifest.webmanifest`

### Habit domain

- [Local date rules](https://github.com/thanycodes/streaks/blob/main/src/dates.ts): `src/dates.ts`
- [Streak rules](https://github.com/thanycodes/streaks/blob/main/src/streaks.ts): `src/streaks.ts`
- [Habit state](https://github.com/thanycodes/streaks/blob/main/src/store.ts): `src/store.ts`
- [Conflict merge](https://github.com/thanycodes/streaks/blob/main/src/merge.ts): `src/merge.ts`

### Cross-device sync

- [Sync engine](https://github.com/thanycodes/streaks/blob/main/src/sync.ts): `src/sync.ts`
- [Sync code rules](https://github.com/thanycodes/streaks/blob/main/src/syncCode.ts): `src/syncCode.ts`

### Sync service

- [Sync HTTP API](https://github.com/thanycodes/streaks/blob/main/worker/src/handler.ts): `worker/src/handler.ts`
- [Worker entry](https://github.com/thanycodes/streaks/blob/main/worker/src/index.ts): `worker/src/index.ts`
- [Workers KV](https://github.com/thanycodes/streaks/blob/main/worker/wrangler.toml): `worker/wrangler.toml`

### Other components

- **Habit tracker user**
- **Browser storage**

## Connections

- Habit tracker user → Habit interface: uses
- App startup → Habit interface: creates (evidence: `src/main.ts`)
- App startup → Sync engine: creates (evidence: `src/main.ts`)
- App startup → Sync controls: creates (evidence: `src/main.ts`)
- App startup → Local date rules: gets today (evidence: `src/main.ts`)
- App startup → Browser storage: provides storage (evidence: `src/main.ts`)
- Habit interface → Habit state: changes and reads (evidence: `src/ui.ts`)
- Habit interface → Streak rules: calculates streaks (evidence: `src/ui.ts`)
- Habit interface → Local date rules: renders date range (evidence: `src/ui.ts`)
- Habit state → Browser storage: loads and saves (evidence: `src/store.ts`)
- Habit state → Conflict merge: merges day marks (evidence: `src/store.ts`)
- Streak rules → Local date rules: steps days (evidence: `src/streaks.ts`)
- Sync controls → Sync engine: controls (evidence: `src/syncPanel.ts`)
- Sync controls → Sync code rules: formats code (evidence: `src/syncPanel.ts`)
- Sync engine → Habit state: validates habits (evidence: `src/sync.ts`)
- Sync engine → Conflict merge: merges copies (evidence: `src/sync.ts`)
- Sync engine → Sync code rules: normalizes codes (evidence: `src/sync.ts`)
- Sync engine → Sync HTTP API: sends HTTP sync (evidence: `src/sync.ts`)
- Worker entry → Sync HTTP API: dispatches requests (evidence: `worker/src/index.ts`)
- Sync HTTP API → Habit state: parses habits (evidence: `worker/src/handler.ts`)
- Sync HTTP API → Conflict merge: merges copies (evidence: `worker/src/handler.ts`)
- Sync HTTP API → Sync code rules: normalizes code (evidence: `worker/src/handler.ts`)
- Sync HTTP API → Workers KV: reads and writes (evidence: `worker/src/handler.ts`)