# mizcausevic-dev/sveska architecture

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

- Interactive diagram: https://gitdiagram.com/mizcausevic-dev/sveska
- Repository: https://github.com/mizcausevic-dev/sveska

## Overview

Purpose and principal workflow: Sveska is a local-first notebook PWA, with a separate browser-extension side panel for lightweight notebook and task-list editing. In the main PWA workflow, a person opens the web app and edits or creates a note; the React application persists note state in browser storage and can render Markdown, export content, or request streamed AI assistance. The extension is a distinct entry point and uses Chrome local storage rather than the PWA’s IndexedDB store.

Components

**PWA application**
- **PWA bootstrap** — `src/main.tsx`: Hydrates theme, UI, editor preferences and tabs before mounting the app, and installs lazy-chunk recovery.
- **Application shell and routes** — `src/app/App.tsx`: Defines browser routes, shared modal hosts and global UI, and handles URL-hash note imports.
- **Person using Sveska** — `null`: Opens the web app, edits notes, and initiates actions such as exports or AI requests.
- **Editor and writing workspace** — `src/editor/Editor.tsx`: Provides the note-editing workflow; the editor subsystem also covers autosave, draft recovery, Markdown modes, snapshots, search and writing tools.
- **Note storage and navigation** — `src/notes/noteRepo.ts`: Implements note persistence and note operations; the notes subsystem also contains the database, attachment, draft, snapshot, directory and tab repositories and stores.
- **Markdown processing** — `src/markdown/render.ts`: Renders Markdown for the application; the Markdown subsystem also provides AST and export functionality.
- **Canvas workspace** — `src/canvas/ExcalidrawCanvas.tsx`: Provides the Excalidraw drawing surface; the README documents per-note canvas use and PNG export.
- **AI client and result UI** — `src/ai/aiClient.ts`: Calls the `/api/ai` endpoint and parses streamed text deltas for AI consumers; the AI subsystem includes prompts and result presentation.
- **AI edge endpoint** — `functions/api/ai.ts`: Implements the documented Cloudflare Pages Function endpoint used as the Anthropic proxy. Its implementation details were not sampled.
- **Anthropic API** — `null`: External model provider documented by the AI client and README.
- **Platform and content surfaces** — `src/platform/content.ts`: Supports the platform surface, including documented glossary, blog and changelog content, consent, SEO and lead capture.
- **PWA/browser storage** — `null`: Browser IndexedDB is the persistence medium documented for local notes and attachments; this is not an external cloud storage service.

**Browser extension**
- **Extension panel bootstrap and app** — `extension/src/main.tsx`: Mounts the extension’s React side panel; `extension/src/App.tsx` hydrates extension state and selects the Tasks or Notebook panel.
- **Extension note storage** — `extension/src/storage/notesStorage.ts`: Reads and writes notes and active-note, tab and theme preferences in `chrome.storage.local`, serializing note mutations through a promise chain.
- **Extension task-list UI** — `extension/src/panels/TasksPanel.tsx`: Presents checklist-mode notes and uses checklist parsing and serialization for interactive task edits.
- **Chrome extension runtime** — `null`: Supplies the side-panel host and `chrome.storage.local` API used by the extension.

Relationships
- **Person using Sveska -> PWA bootstrap**: Opens the web app; bootstrap hydrates persisted preferences and tabs before mounting the application.
- **PWA bootstrap -> Application shell and routes**: Mounts the React application after bootstrap.
- **Application shell and routes -> Editor and writing workspace**: Renders the home route within the shared layout; the route defines the page, while the editor subsystem supplies note-editing behavior.
- **Editor and writing workspace -> Note storage and navigation**: Autosave calls `saveNoteBody`; image paste persists attachments through the attachment repository.
- **Note storage and navigation -> PWA/browser storage**: Persists local application state in IndexedDB, as documented and reflected by the database/repository subsystem.
- **Editor and writing workspace -> Markdown processing**: Uses Markdown rendering/export functionality; the README documents edit, split and preview modes.
- **Editor and writing workspace -> Canvas workspace**: Offers the per-note drawing surface documented by the README; exact invocation wiring was not sampled.
- **Editor and writing workspace -> AI client and result UI**: AI actions use the client to request streamed completion text; individual slash-command call sites were not sampled.
- **AI client and result UI -> AI edge endpoint**: Sends a POST to `/api/ai` and parses the response as an SSE stream.
- **AI edge endpoint -> Anthropic API**: Acts as the documented Anthropic proxy; direct implementation details and request behavior were not sampled.
- **Person using Sveska -> Chrome extension runtime**: Opens the extension side panel; the specific browser action or event that opens it is not established.
- **Chrome extension runtime -> Extension panel bootstrap and app**: Hosts the extension panel entry point.
- **Extension panel bootstrap and app -> Extension note storage**: Hydrates notes and preferences, then invokes storage operations for user edits and selection.
- **Extension panel bootstrap and app -> Extension task-list UI**: Renders the task panel when the active tab is Tasks.
- **Extension task-list UI -> Extension panel bootstrap and app**: Calls the app’s callbacks to create, select, edit and delete notes.
- **Extension note storage -> Chrome extension runtime**: Reads and writes persisted extension data using `chrome.storage.local`.

Coverage limits: The README describes additional features and integrations, but their concrete runtime wiring was not established from the sampled source. In particular, the Cloudflare Function implementation, canvas provider flow and the extension’s browser manifest/launch configuration were not supplied; no further relationships are asserted for them.

Main entry points: [`src/editor/Editor.tsx`](https://github.com/mizcausevic-dev/sveska/blob/main/src/editor/Editor.tsx) (Editor workspace), [`extension/src/main.tsx`](https://github.com/mizcausevic-dev/sveska/blob/main/extension/src/main.tsx) (Extension panel app), [`src/main.tsx`](https://github.com/mizcausevic-dev/sveska/blob/main/src/main.tsx) (PWA bootstrap), [`src/app/App.tsx`](https://github.com/mizcausevic-dev/sveska/blob/main/src/app/App.tsx) (App shell and routes)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_pwa["PWA"]
  node_pwa_bootstrap["PWA bootstrap<br/>[main.tsx]"]
  node_app_shell["App shell and routes<br/>[App.tsx]"]
end

subgraph group_notes["Notes and content"]
  node_editor["Editor workspace<br/>[Editor.tsx]"]
  node_note_storage["Note storage and navigation<br/>[noteRepo.ts]"]
  node_markdown["Markdown processing<br/>Renderer"]
  node_canvas["Canvas workspace"]
end

subgraph group_ai["AI assistance"]
  node_ai_client["AI client and results<br/>[aiClient.ts]"]
  node_ai_endpoint["AI edge endpoint<br/>API endpoint"]
end

subgraph group_extension["Browser extension"]
  node_extension_app["Extension panel app<br/>[main.tsx]"]
  node_extension_storage["Extension note storage<br/>[notesStorage.ts]"]
  node_tasks_panel["Extension task panel<br/>Task UI"]
end

subgraph group_external["External actors and stores"]
  node_person(("Person<br/>User"))
  node_indexeddb[("PWA browser storage<br/>IndexedDB")]
  node_anthropic["Anthropic API<br/>Model provider"]
  node_chrome_runtime["Chrome extension runtime<br/>Browser runtime"]
end

node_person -->|"opens"| node_pwa_bootstrap
node_pwa_bootstrap -->|"mounts"| node_app_shell
node_app_shell -->|"renders"| node_editor
node_editor -->|"saves notes"| node_note_storage
node_note_storage -->|"persists state"| node_indexeddb
node_editor -->|"renders and exports"| node_markdown
node_editor -.->|"offers drawing"| node_canvas
node_editor -.->|"requests completion"| node_ai_client
node_ai_client -->|"posts request"| node_ai_endpoint
node_ai_endpoint -->|"proxies to"| node_anthropic
node_person -->|"opens side panel"| node_chrome_runtime
node_chrome_runtime -->|"hosts"| node_extension_app
node_extension_app -->|"hydrates and updates"| node_extension_storage
node_extension_app -->|"renders Tasks"| node_tasks_panel
node_tasks_panel -->|"calls callbacks"| node_extension_app
node_extension_storage -->|"reads and writes"| node_chrome_runtime

click node_pwa_bootstrap "https://github.com/mizcausevic-dev/sveska/blob/main/src/main.tsx"
click node_app_shell "https://github.com/mizcausevic-dev/sveska/blob/main/src/app/App.tsx"
click node_editor "https://github.com/mizcausevic-dev/sveska/blob/main/src/editor/Editor.tsx"
click node_note_storage "https://github.com/mizcausevic-dev/sveska/blob/main/src/notes/noteRepo.ts"
click node_markdown "https://github.com/mizcausevic-dev/sveska/blob/main/src/markdown/render.ts"
click node_canvas "https://github.com/mizcausevic-dev/sveska/blob/main/src/canvas/ExcalidrawCanvas.tsx"
click node_ai_client "https://github.com/mizcausevic-dev/sveska/blob/main/src/ai/aiClient.ts"
click node_ai_endpoint "https://github.com/mizcausevic-dev/sveska/blob/main/functions/api/ai.ts"
click node_extension_app "https://github.com/mizcausevic-dev/sveska/blob/main/extension/src/main.tsx"
click node_extension_storage "https://github.com/mizcausevic-dev/sveska/blob/main/extension/src/storage/notesStorage.ts"
click node_tasks_panel "https://github.com/mizcausevic-dev/sveska/blob/main/extension/src/panels/TasksPanel.tsx"

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_pwa_bootstrap,node_app_shell toneBlue
class node_editor,node_note_storage,node_markdown,node_canvas toneAmber
class node_ai_client,node_ai_endpoint toneMint
class node_extension_app,node_extension_storage,node_tasks_panel toneRose
class node_person,node_indexeddb,node_anthropic,node_chrome_runtime toneIndigo
```

## Components

### PWA

Main notebook application

- [PWA bootstrap](https://github.com/mizcausevic-dev/sveska/blob/main/src/main.tsx): Bootstrap · Hydrates preferences and tabs before mounting the app · `src/main.tsx`
- [App shell and routes](https://github.com/mizcausevic-dev/sveska/blob/main/src/app/App.tsx): Application · `src/app/App.tsx`

### Notes and content

Note editing, persistence, and rendering

- [Editor workspace](https://github.com/mizcausevic-dev/sveska/blob/main/src/editor/Editor.tsx): Editor · Note editing, autosave, and writing tools · `src/editor/Editor.tsx`
- [Note storage and navigation](https://github.com/mizcausevic-dev/sveska/blob/main/src/notes/noteRepo.ts): Repository · Note operations and related repositories and stores · `src/notes/noteRepo.ts`
- [Markdown processing](https://github.com/mizcausevic-dev/sveska/blob/main/src/markdown/render.ts): Renderer · `src/markdown/render.ts`
- [Canvas workspace](https://github.com/mizcausevic-dev/sveska/blob/main/src/canvas/ExcalidrawCanvas.tsx): Canvas · Per-note drawing surface · `src/canvas/ExcalidrawCanvas.tsx`

### AI assistance

Streamed AI request path

- [AI client and results](https://github.com/mizcausevic-dev/sveska/blob/main/src/ai/aiClient.ts): AI client · Requests streamed completions and parses text deltas · `src/ai/aiClient.ts`
- [AI edge endpoint](https://github.com/mizcausevic-dev/sveska/blob/main/functions/api/ai.ts): API endpoint · Cloudflare Pages Function Anthropic proxy · `functions/api/ai.ts`

### Browser extension

Side-panel notebook and task editing

- [Extension panel app](https://github.com/mizcausevic-dev/sveska/blob/main/extension/src/main.tsx): Application · Mounts the side panel and selects its active panel · `extension/src/main.tsx`
- [Extension note storage](https://github.com/mizcausevic-dev/sveska/blob/main/extension/src/storage/notesStorage.ts): Storage · Serializes note mutations and stores extension preferences · `extension/src/storage/notesStorage.ts`
- [Extension task panel](https://github.com/mizcausevic-dev/sveska/blob/main/extension/src/panels/TasksPanel.tsx): Task UI · Edits checklist-mode notes · `extension/src/panels/TasksPanel.tsx`

### External actors and stores

- **Person**: User
- **PWA browser storage**: IndexedDB · Local persistence for notes and attachments
- **Anthropic API**: Model provider
- **Chrome extension runtime**: Browser runtime · Hosts the side panel and provides chrome.storage.local

## Connections

- Person → PWA bootstrap: opens
- PWA bootstrap → App shell and routes: mounts
- App shell and routes → Editor workspace: renders
- Editor workspace → Note storage and navigation: saves notes
- Note storage and navigation → PWA browser storage: persists state
- Editor workspace → Markdown processing: renders and exports
- Editor workspace → Canvas workspace: offers drawing
- Editor workspace → AI client and results: requests completion
- AI client and results → AI edge endpoint: posts request · Receives streamed response text
- AI edge endpoint → Anthropic API: proxies to
- Person → Chrome extension runtime: opens side panel
- Chrome extension runtime → Extension panel app: hosts
- Extension panel app → Extension note storage: hydrates and updates
- Extension panel app → Extension task panel: renders Tasks
- Extension task panel → Extension panel app: calls callbacks · Creates, selects, edits, and deletes notes
- Extension note storage → Chrome extension runtime: reads and writes · Uses chrome.storage.local