Skip to content

Work / Chitragupt / Wiki / Surfaces

architecture

Surfacedraftverified 2026-10-23

SURFACE.WEB.ARCHITECTURE

Summary

How Chitragupt is built, in four small diagrams and one overview, opened from the architecture chip in the bar. The web and mobile sets show the same diagrams; each overview lists its own app first.

Raw wireframes

  • .context/designs/web/architecture/<overview|who-uses|how-it-works|backend|relies-on>.html — the web screens
  • .context/designs/mobile/architecture/<overview|who-uses|how-it-works|backend|relies-on>.html — the mobile screens
  • .context/designs/architecture/<name>.json — each diagram's source; <name>.html is drawn from it by Archify

Why it is drawn this way

  • One question per diagram: who uses it, how it is built, how a document is read, what it relies on.
  • The backend diagram follows one upload, because reading documents is the core of the product: regex first, Claude Haiku only as the fallback.
  • On mobile these screens are not in the phone frame: a 390px frame is too narrow to read a diagram, so they fill the window under the bar. On web they keep the frame.
  • The diagrams are generated assets: edit the .json, then run archify finalize architecture <name>.json <name>.html --quality showcase inside designs/architecture/.
  • The overview is architecture and cost only: the stack with versions and the monthly cost. Why each choice was made is in the product's CLAUDE.md and 2026-05-31-hybrid-parsing-haiku-fallback.

Related

Sources

  • CLAUDE.md, every workspace package.json, .context/ops/release.yml