# kacperkapusciak/goldie architecture

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

- Interactive diagram: https://gitdiagram.com/kacperkapusciak/goldie
- Repository: https://github.com/kacperkapusciak/goldie

## Overview

Goldie turns configured Argent scenes into store-ready screenshots and preview videos: the CLI checks prerequisites, captures scenes on iOS simulators or Android emulators, frames and renders assets, then verifies store constraints. The browser studio edits the same design choices and persists them for CLI rendering. The README documents the workflow and platform capabilities; sampled source confirms rendering, device control, manifest-backed studio loading, and shared layout resolution. Some CLI orchestration and studio-server internals were not sampled, so uncertain wiring is omitted.

Main entry points: [`src/cli.ts`](https://github.com/kacperkapusciak/goldie/blob/main/src/cli.ts) (Goldie CLI), [`src/render.ts`](https://github.com/kacperkapusciak/goldie/blob/main/src/render.ts) (Image and video render), [`studio/src/App.tsx`](https://github.com/kacperkapusciak/goldie/blob/main/studio/src/App.tsx) (Studio app), [`src/capture.ts`](https://github.com/kacperkapusciak/goldie/blob/main/src/capture.ts) (Scene capture)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_workflow["Capture workflow"]
  node_cli["Goldie CLI<br/>[cli.ts]"]
  node_config["Config loader<br/>[config.ts]"]
  node_doctor["Environment checks<br/>[doctor.ts]"]
  node_capture["Scene capture<br/>[capture.ts]"]
  node_manifest["Capture manifest<br/>[manifest.ts]"]
end

subgraph group_rendering["Asset rendering"]
  node_layouts["Layout composition<br/>[layouts.ts]"]
  node_render["Image and video render<br/>[render.ts]"]
  node_storecheck["Store verification<br/>[render.ts]"]
end

subgraph group_studio["Design studio"]
  node_studioapi["Studio API<br/>[studio-server.ts]"]
  node_studioapp["Studio app<br/>[App.tsx]"]
  node_designpanel["Design controls<br/>[DesignPanel.tsx]"]
  node_strip["Scene preview strip<br/>[Strip.tsx]"]
  node_designfile[("Saved design")]
  node_exportpanel["Export controls<br/>[ExportPanel.tsx]"]
end

subgraph group_integration["Platforms and outputs"]
  node_argent["Argent replay<br/>[argent.ts]"]
  node_device["Device control<br/>[device.ts]"]
  node_simulators{{"iOS / Android"}}
  node_capturefiles[("Raw captures")]
  node_ffmpeg{{"FFmpeg tools"}}
  node_assets[("Screenshots and previews")]
end

node_user(("App creator"))

node_user -->|"runs commands"| node_cli
node_cli -->|"loads config"| node_config
node_cli -->|"checks setup"| node_doctor
node_cli -->|"starts capture"| node_capture
node_cli -->|"renders assets"| node_render
node_cli -->|"verifies output"| node_storecheck
node_capture -->|"replays flows"| node_argent
node_capture -->|"selects device"| node_device
node_device -->|"controls"| node_simulators
node_argent -->|"drives app"| node_simulators
node_capture -->|"writes captures"| node_capturefiles
node_capture -->|"writes manifest"| node_manifest
node_render -->|"reads captures"| node_capturefiles
node_render -->|"reads manifest"| node_manifest
node_render -->|"composes scenes"| node_layouts
node_render -->|"encodes video"| node_ffmpeg
node_render -->|"writes assets"| node_assets
node_storecheck -->|"checks files"| node_assets
node_user -->|"opens studio"| node_studioapp
node_studioapp -->|"loads manifest"| node_studioapi
node_studioapp -->|"saves design"| node_studioapi
node_studioapi -->|"reads and writes"| node_designfile
node_studioapp -->|"edits settings"| node_designpanel
node_studioapp -->|"previews scenes"| node_strip
node_strip -->|"resolves layouts"| node_layouts
node_studioapp -->|"offers export"| node_exportpanel
node_exportpanel -->|"requests export"| node_studioapi

click node_cli "https://github.com/kacperkapusciak/goldie/blob/main/src/cli.ts"
click node_config "https://github.com/kacperkapusciak/goldie/blob/main/src/config.ts"
click node_doctor "https://github.com/kacperkapusciak/goldie/blob/main/src/doctor.ts"
click node_capture "https://github.com/kacperkapusciak/goldie/blob/main/src/capture.ts"
click node_argent "https://github.com/kacperkapusciak/goldie/blob/main/src/argent.ts"
click node_device "https://github.com/kacperkapusciak/goldie/blob/main/src/device.ts"
click node_manifest "https://github.com/kacperkapusciak/goldie/blob/main/src/manifest.ts"
click node_layouts "https://github.com/kacperkapusciak/goldie/blob/main/src/layouts.ts"
click node_render "https://github.com/kacperkapusciak/goldie/blob/main/src/render.ts"
click node_storecheck "https://github.com/kacperkapusciak/goldie/blob/main/src/render.ts"
click node_studioapi "https://github.com/kacperkapusciak/goldie/blob/main/src/studio-server.ts"
click node_studioapp "https://github.com/kacperkapusciak/goldie/blob/main/studio/src/App.tsx"
click node_designpanel "https://github.com/kacperkapusciak/goldie/blob/main/studio/src/components/DesignPanel.tsx"
click node_strip "https://github.com/kacperkapusciak/goldie/blob/main/studio/src/components/Strip.tsx"
click node_exportpanel "https://github.com/kacperkapusciak/goldie/blob/main/studio/src/components/ExportPanel.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_cli,node_config,node_doctor,node_capture,node_manifest toneBlue
class node_layouts,node_render,node_storecheck toneAmber
class node_studioapi,node_studioapp,node_designpanel,node_strip,node_designfile,node_exportpanel toneMint
class node_argent,node_device,node_simulators,node_capturefiles,node_ffmpeg,node_assets toneRose
class node_user toneIndigo
```

## Components

### Capture workflow

- [Goldie CLI](https://github.com/kacperkapusciak/goldie/blob/main/src/cli.ts): `src/cli.ts`
- [Config loader](https://github.com/kacperkapusciak/goldie/blob/main/src/config.ts): `src/config.ts`
- [Environment checks](https://github.com/kacperkapusciak/goldie/blob/main/src/doctor.ts): `src/doctor.ts`
- [Scene capture](https://github.com/kacperkapusciak/goldie/blob/main/src/capture.ts): `src/capture.ts`
- [Capture manifest](https://github.com/kacperkapusciak/goldie/blob/main/src/manifest.ts): `src/manifest.ts`

### Asset rendering

- [Layout composition](https://github.com/kacperkapusciak/goldie/blob/main/src/layouts.ts): `src/layouts.ts`
- [Image and video render](https://github.com/kacperkapusciak/goldie/blob/main/src/render.ts): `src/render.ts`
- [Store verification](https://github.com/kacperkapusciak/goldie/blob/main/src/render.ts): `src/render.ts`

### Design studio

- [Studio API](https://github.com/kacperkapusciak/goldie/blob/main/src/studio-server.ts): `src/studio-server.ts`
- [Studio app](https://github.com/kacperkapusciak/goldie/blob/main/studio/src/App.tsx): `studio/src/App.tsx`
- [Design controls](https://github.com/kacperkapusciak/goldie/blob/main/studio/src/components/DesignPanel.tsx): `studio/src/components/DesignPanel.tsx`
- [Scene preview strip](https://github.com/kacperkapusciak/goldie/blob/main/studio/src/components/Strip.tsx): `studio/src/components/Strip.tsx`
- **Saved design**
- [Export controls](https://github.com/kacperkapusciak/goldie/blob/main/studio/src/components/ExportPanel.tsx): `studio/src/components/ExportPanel.tsx`

### Platforms and outputs

- [Argent replay](https://github.com/kacperkapusciak/goldie/blob/main/src/argent.ts): `src/argent.ts`
- [Device control](https://github.com/kacperkapusciak/goldie/blob/main/src/device.ts): `src/device.ts`
- **iOS / Android**
- **Raw captures**
- **FFmpeg tools**
- **Screenshots and previews**

### Other components

- **App creator**

## Connections

- App creator → Goldie CLI: runs commands
- Goldie CLI → Config loader: loads config
- Goldie CLI → Environment checks: checks setup
- Goldie CLI → Scene capture: starts capture
- Goldie CLI → Image and video render: renders assets
- Goldie CLI → Store verification: verifies output
- Scene capture → Argent replay: replays flows
- Scene capture → Device control: selects device
- Device control → iOS / Android: controls
- Argent replay → iOS / Android: drives app
- Scene capture → Raw captures: writes captures
- Scene capture → Capture manifest: writes manifest
- Image and video render → Raw captures: reads captures
- Image and video render → Capture manifest: reads manifest
- Image and video render → Layout composition: composes scenes
- Image and video render → FFmpeg tools: encodes video
- Image and video render → Screenshots and previews: writes assets
- Store verification → Screenshots and previews: checks files
- App creator → Studio app: opens studio
- Studio app → Studio API: loads manifest
- Studio app → Studio API: saves design
- Studio API → Saved design: reads and writes
- Studio app → Design controls: edits settings
- Studio app → Scene preview strip: previews scenes
- Scene preview strip → Layout composition: resolves layouts
- Studio app → Export controls: offers export
- Export controls → Studio API: requests export