← back

PangoFlow: a browser extension that turns progress into visible blocks

in active development

• Source code

PangoFlow is a browser extension (Manifest V3) written in ClojureScript for tracking self-improvement habits. The idea is to get away from fragile "streak" logic: every bit of effort becomes a Block, and the blocks add up to a contribution heatmap that makes progress visible over time. The popup is for quick capture in the moment; the dashboard is for reviewing and configuring.

Why this project is interesting

More than an extension, PangoFlow is a deliberate exercise in domain design. Before writing any code, I defined a ubiquitous language and an MVP PRD, then structured the architecture to keep business rules isolated from the UI and the browser, testable in plain ClojureScript.

Design & Decisions

• Documented ubiquitous language: a domain glossary pins down the product's terms (Activity, Entry, Block, Flow, Focus Session, Target) and lists the terms to avoid, so code, UI, and docs all speak the same language.
• Domain separate from the UI: the activity, entry, block-rule, and category modules don't know React, the popup, or the browser exist. The UI just consumes them.
• Block Rule as a deep module: a small API (entry->blocks) hides how effort turns into blocks across the three measurement modes (completion, count, duration), using fractional blocks internally and whole blocks in the UI.
• Local-first: local history is the source of truth (no account, no cloud), with validated export/import and versioning ready for migrations.
• Activity templates: presets (reading, meditation, exercise, coding, writing) come with a suggested measurement mode, block rule, accent color, and category.
• Platform-aware: the build works around Manifest V3's CSP restriction (no unsafe-eval) by using shadow-cljs release bundles instead of dev bundles.

Testing Discipline

Every domain module has a matching test file. Tests check behavior through stable interfaces (given activities, entries, and rules, the system returns the expected blocks, daily totals, and heatmap cells), without relying on private helpers or UI implementation details.

Stack

• ClojureScript
• shadow-cljs
• Browser extension (Manifest V3, Chromium)
• Extension local storage (local-first)