# mavrk-mose/konglish architecture

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

- Interactive diagram: https://gitdiagram.com/mavrk-mose/konglish
- Repository: https://github.com/mavrk-mose/konglish

## Overview

Konglish is a single-screen, mobile-first Korean↔English live translator. The main workflow runs from direction and listening controls through speech recognition, translation, and live display, then saves completed pairs for review, editing, deletion, and text export. Model provisioning gates offline translation; transcript storage is local. The graph follows the documented composition and sampled call sites. Several UI and runtime details are documented but their implementation was not sampled, so those relationships use README evidence.

Main entry points: [`app/index.tsx`](https://github.com/mavrk-mose/konglish/blob/master/app/index.tsx) (Home screen), [`hooks/use-transcript.ts`](https://github.com/mavrk-mose/konglish/blob/master/hooks/use-transcript.ts) (Transcript actions), [`hooks/use-speech-translation.ts`](https://github.com/mavrk-mose/konglish/blob/master/hooks/use-speech-translation.ts) (Speech workflow), [`components/live-controls.tsx`](https://github.com/mavrk-mose/konglish/blob/master/components/live-controls.tsx) (Live controls)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App experience"]
  node_shell["Router shell<br/>[_layout.tsx]"]
  node_home["Home screen<br/>[index.tsx]"]
  node_controls["Live controls<br/>[live-controls.tsx]"]
  node_liveview["Live transcript"]
  node_status["Speech status"]
  node_setupui["Offline setup UI<br/>[offline-setup.tsx]"]
  node_editor["Transcript editor"]
end

subgraph group_speech["Speech and translation"]
  node_speechhook["Speech workflow"]
  node_recognition["Speech recognition"]
  node_models["Model provisioning"]
  node_ml["On-device translation"]
end

subgraph group_history["Transcript history"]
  node_transcripthook["Transcript actions<br/>[use-transcript.ts]"]
  node_historylist["History review<br/>[index.tsx]"]
  node_storage[("Transcript store<br/>[use-transcript.ts]")]
  node_export["Text export and sharing<br/>[use-transcript.ts]"]
end

subgraph group_foundation["Shared foundations"]
  node_entrytype["Transcript entries<br/>[transcript.ts]"]
  node_directiontype["Translation direction<br/>[translation.ts]"]
  node_theme["Theme tokens<br/>[theme.ts]"]
end

node_user(("User"))

node_user -->|"opens"| node_home
node_shell -->|"routes to"| node_home
node_home -->|"configures"| node_speechhook
node_home -->|"checks readiness"| node_models
node_home -->|"loads history"| node_transcripthook
node_home -->|"renders"| node_controls
node_home -->|"renders"| node_liveview
node_home -->|"renders"| node_status
node_home -->|"shows gate"| node_setupui
node_home -->|"opens"| node_editor
node_controls -->|"changes direction"| node_home
node_controls -->|"toggles listening"| node_speechhook
node_speechhook -->|"starts capture"| node_recognition
node_recognition -->|"emits results"| node_speechhook
node_speechhook -->|"translates text"| node_ml
node_models -->|"provisions packs"| node_ml
node_home -->|"provides live state"| node_liveview
node_speechhook -->|"completes entries"| node_transcripthook
node_transcripthook -->|"reads and writes"| node_storage
node_transcripthook -->|"retranslates edits"| node_ml
node_home -->|"renders history"| node_historylist
node_historylist -->|"edits or deletes"| node_transcripthook
node_transcripthook -->|"creates export"| node_export
node_user -->|"selects direction"| node_controls
node_user -->|"edits entries"| node_editor
node_home -->|"uses colors"| node_theme
node_transcripthook -->|"stores typed entries"| node_entrytype
node_home -->|"sets direction"| node_directiontype

click node_shell "https://github.com/mavrk-mose/konglish/blob/master/app/_layout.tsx"
click node_home "https://github.com/mavrk-mose/konglish/blob/master/app/index.tsx"
click node_controls "https://github.com/mavrk-mose/konglish/blob/master/components/live-controls.tsx"
click node_liveview "https://github.com/mavrk-mose/konglish/blob/master/components/live-transcript.tsx"
click node_status "https://github.com/mavrk-mose/konglish/blob/master/components/speech-status-footer.tsx"
click node_setupui "https://github.com/mavrk-mose/konglish/blob/master/components/offline-setup.tsx"
click node_editor "https://github.com/mavrk-mose/konglish/blob/master/components/transcript-editor-modal.tsx"
click node_speechhook "https://github.com/mavrk-mose/konglish/blob/master/hooks/use-speech-translation.ts"
click node_models "https://github.com/mavrk-mose/konglish/blob/master/hooks/use-translation-models.ts"
click node_transcripthook "https://github.com/mavrk-mose/konglish/blob/master/hooks/use-transcript.ts"
click node_historylist "https://github.com/mavrk-mose/konglish/blob/master/app/index.tsx"
click node_storage "https://github.com/mavrk-mose/konglish/blob/master/hooks/use-transcript.ts"
click node_export "https://github.com/mavrk-mose/konglish/blob/master/hooks/use-transcript.ts"
click node_entrytype "https://github.com/mavrk-mose/konglish/blob/master/types/transcript.ts"
click node_directiontype "https://github.com/mavrk-mose/konglish/blob/master/types/translation.ts"
click node_theme "https://github.com/mavrk-mose/konglish/blob/master/constants/theme.ts"

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_shell,node_home,node_controls,node_liveview,node_status,node_setupui,node_editor,node_user toneBlue
class node_speechhook,node_recognition,node_models,node_ml toneAmber
class node_transcripthook,node_historylist,node_storage,node_export toneMint
class node_entrytype,node_directiontype,node_theme toneRose
```

## Components

### App experience

- [Router shell](https://github.com/mavrk-mose/konglish/blob/master/app/_layout.tsx): `app/_layout.tsx`
- [Home screen](https://github.com/mavrk-mose/konglish/blob/master/app/index.tsx): `app/index.tsx`
- [Live controls](https://github.com/mavrk-mose/konglish/blob/master/components/live-controls.tsx): `components/live-controls.tsx`
- [Live transcript](https://github.com/mavrk-mose/konglish/blob/master/components/live-transcript.tsx): `components/live-transcript.tsx`
- [Speech status](https://github.com/mavrk-mose/konglish/blob/master/components/speech-status-footer.tsx): `components/speech-status-footer.tsx`
- [Offline setup UI](https://github.com/mavrk-mose/konglish/blob/master/components/offline-setup.tsx): `components/offline-setup.tsx`
- [Transcript editor](https://github.com/mavrk-mose/konglish/blob/master/components/transcript-editor-modal.tsx): `components/transcript-editor-modal.tsx`

### Speech and translation

- [Speech workflow](https://github.com/mavrk-mose/konglish/blob/master/hooks/use-speech-translation.ts): `hooks/use-speech-translation.ts`
- **Speech recognition**
- [Model provisioning](https://github.com/mavrk-mose/konglish/blob/master/hooks/use-translation-models.ts): `hooks/use-translation-models.ts`
- **On-device translation**

### Transcript history

- [Transcript actions](https://github.com/mavrk-mose/konglish/blob/master/hooks/use-transcript.ts): `hooks/use-transcript.ts`
- [History review](https://github.com/mavrk-mose/konglish/blob/master/app/index.tsx): `app/index.tsx`
- [Transcript store](https://github.com/mavrk-mose/konglish/blob/master/hooks/use-transcript.ts): `hooks/use-transcript.ts`
- [Text export and sharing](https://github.com/mavrk-mose/konglish/blob/master/hooks/use-transcript.ts): `hooks/use-transcript.ts`

### Shared foundations

- [Transcript entries](https://github.com/mavrk-mose/konglish/blob/master/types/transcript.ts): `types/transcript.ts`
- [Translation direction](https://github.com/mavrk-mose/konglish/blob/master/types/translation.ts): `types/translation.ts`
- [Theme tokens](https://github.com/mavrk-mose/konglish/blob/master/constants/theme.ts): `constants/theme.ts`

### Other components

- **User**

## Connections

- User → Home screen: opens (evidence: `README.md`)
- Router shell → Home screen: routes to (evidence: `README.md`)
- Home screen → Speech workflow: configures (evidence: `app/index.tsx`)
- Home screen → Model provisioning: checks readiness (evidence: `app/index.tsx`)
- Home screen → Transcript actions: loads history (evidence: `app/index.tsx`)
- Home screen → Live controls: renders (evidence: `README.md`)
- Home screen → Live transcript: renders (evidence: `README.md`)
- Home screen → Speech status: renders (evidence: `README.md`)
- Home screen → Offline setup UI: shows gate (evidence: `README.md`)
- Home screen → Transcript editor: opens (evidence: `app/index.tsx`)
- Live controls → Home screen: changes direction (evidence: `README.md`)
- Live controls → Speech workflow: toggles listening (evidence: `README.md`)
- Speech workflow → Speech recognition: starts capture (evidence: `hooks/use-speech-translation.ts`)
- Speech recognition → Speech workflow: emits results (evidence: `hooks/use-speech-translation.ts`)
- Speech workflow → On-device translation: translates text (evidence: `README.md`)
- Model provisioning → On-device translation: provisions packs (evidence: `README.md`)
- Home screen → Live transcript: provides live state (evidence: `README.md`)
- Speech workflow → Transcript actions: completes entries (evidence: `README.md`)
- Transcript actions → Transcript store: reads and writes (evidence: `hooks/use-transcript.ts`)
- Transcript actions → On-device translation: retranslates edits (evidence: `hooks/use-transcript.ts`)
- Home screen → History review: renders history (evidence: `app/index.tsx`)
- History review → Transcript actions: edits or deletes (evidence: `README.md`)
- Transcript actions → Text export and sharing: creates export (evidence: `hooks/use-transcript.ts`)
- User → Live controls: selects direction (evidence: `README.md`)
- User → Transcript editor: edits entries (evidence: `README.md`)
- Home screen → Theme tokens: uses colors (evidence: `app/index.tsx`)
- Transcript actions → Transcript entries: stores typed entries (evidence: `hooks/use-transcript.ts`)
- Home screen → Translation direction: sets direction (evidence: `app/index.tsx`)