▶ YouTube Summaries

• YT :: https://www.youtube.com/watch?v=kPN564Kol14
• Original title :: L8 Principal Building a Full Stack App with Agentic Engineering

Kun Chen (ex Meta/Microsoft/Atlassian L8 principal engineer) follows up on his earlier agentic-workflow video by building a real full-stack iOS app, Eddie's Wallet, from an empty terminal to a working end-to-end app in a single ~100-minute session. He deliberately runs everything on GPT-5.6 "Luna" (a non-frontier, cost-efficient model) at high reasoning effort, orchestrated through his own open-source tool Firstmate, to demonstrate that strong workflow and tooling can substitute for always reaching for the top model.

Setup: Herd, Firstmate, and single-agent-of-agents design

He starts in an empty terminal with tools already configured. Herd is his tmux replacement — a terminal/session manager built specifically to understand agent sessions rather than generic panes: it lets him search sessions by title, jump around with a keybinding, and see which directory/agent each tab is running. Firstmate is his own open-source project implementing a "single point of contact" pattern: the human (the "captain") talks to exactly one agent, First Mate, which delegates all actual work to disposable sub-agents he calls "crewmates," each running in its own Herd tab. This removes the cognitive load of juggling multiple agent sessions directly.

He launches the coding-agent harness he calls "Pi" (his preferred harness for running non-Claude models) and picks GPT-5.6 "Luna" over his usual top model on purpose, to show that lower-tier models plus good orchestration still get the job done. He instructs First Mate that every dispatched crewmate must also run GPT-5.6 Luna at high reasoning.

He turns on "calm mode," a Pi-agent-only Firstmate feature that hides all raw tool-call noise and shows just his prompts and First Mate's replies — his default way of working, since with current-generation models he rarely needs to watch/steer individual tool calls the way he did with weaker models a year or two ago.

/calm mode and initial repo bootstrap

Using calm mode, he asks First Mate to create a new local repo "Eddie's Wallet" with a dummy README and an initial commit. First Mate runs its deterministic session-start scripts/skills in the background; with calm mode on, only the clean captain/First-Mate exchange is visible.

Product ideation: the initial "ramble"

He gives one long (~3,000 character) rambling prompt describing the product: an iOS app (iPad-first) for his son Eddie to track a virtual (non-real-money) allowance balance, with educational goals — teaching balance, loans, credit-card-style repayment, and interest gradually and naturally. Requirements: parent mode (deposit/withdraw) vs. child mode (read-only view of balance/loans); virtual money only; cloud-persisted, multi-device data (Eddie has a Mac and an iPad) since parent and child may use different devices. He explicitly asks First Mate to kick off, in parallel, (1) market research — does an app like this already exist — and (2) technical research into how to build the full stack end to end.

This "ramble everything up front" approach is his standard way to kick off a new project: dump all context/ideas at once and let the agent rationalize and delegate.

Crew mates and parallel dispatch

First Mate spins up two Herd tabs — one market-research crewmate, one technical-research crewmate — rather than doing the research itself, which is the core Firstmate design principle: never do work directly, always delegate so the orchestrator stays free to keep interacting with the captain. Because each crewmate is a normal agent session in a normal terminal tab, Kun can drop into any of them directly to observe or steer — unlike opaque sub-agents in most harnesses.

He shows his "quota" menu-bar widget tracking usage across Claude, Codex, Kimi, and Grok subscriptions/quotas.

Fast mode

He enables "codex fast" (a Pi-agent extension) to trade cost for lower latency across all sessions — normally left off since GPT models are already fast enough, but turned on for the recorded demo.

Market and technical research results

The market-research crewmate reports no existing iOS app matches the full brief (virtual-only money, parent-controlled rights, read-only child mode); closest references include a web-only "Kiddo Bank"-style app. Recommendation: build it. First Mate tears down the finished crewmate's tab automatically once its report lands — no manual cleanup needed.

The technical-research crewmate (which had been building its own backlog of open decisions and fetching Apple developer documentation) recommends a native SwiftUI iPad app, Supabase/Postgres with row-level security, an immutable server-side ledger, and SwiftData for local caching — no real-money integrations. Kun pushes back on Supabase before even reading the 351-line report in full, preferring to review it interactively.

Interactive planning with Lavish

Rather than read a long markdown wall of text, he asks First Mate to bring the technical proposal into Lavish — his own HTML-artifact-based interactive planning tool — so he can annotate specific sections, tick multiple-choice decisions, and view auto-generated architecture diagrams instead of reading prose.

Key back-and-forth in Lavish:

• He rejects the $25–60/month hosted-Supabase estimate as too expensive for a 3-user app and pushes for a self-hosted VPS (~$5/month ballpark), specifically flagging Hetzner (misheard as "Hner") as a cheap VPS provider he's used before.
• Auth: Apple Sign In now, Google Sign In deferred to later; keep an identities table to allow linking multiple auth providers to one account later.
• He deletes an over-engineered "immutable ledger + encrypted audit export" requirement — decides that's premature for an MVP with three users.
• Parent gets a PIN gate for parent-only actions; daily backups accepted as a starting recovery posture.
• After his feedback, First Mate does a fresh cost lookup and Lavish updates its recommendation to a low-cost Hetzner VPS (~$5.50/month) over hosted Supabase, which Kun accepts as the final backend decision.

UX prototyping in parallel

While backend planning continues, he asks First Mate to also kick off a UX-prototype crewmate. Its first deliverable is just a markdown scope document (not interactive), so he asks First Mate to convert it into a real clickable HTML/Lavish wireframe prototype — no iOS code, wireframe fidelity only, covering the core screens and flows.

He plays through the resulting prototype: create-family flow, device "pairing" for the child's iPad, parent PIN unlock, child read-only balance/activity view, loans, lessons. He gives feedback in Lavish: use real local currency (not "tokens" or made-up units) since that's what Eddie's actual allowance uses; Eddie should not be able to request points in-app (he should ask in person); minor UI redundancy (duplicate "recent activity" entry points). He explicitly declines to polish the visual UI at this stage since it's wireframe-only, and asks First Mate to fold all feedback into a proper PRD written into the repo's README.

Compaction

Context reaches ~70% of GPT's 272K window. He explains GPT-model compaction behavior: Codex CLI has strong server-side compaction; other harnesses (like Pi) default to their own algorithm unless you install the "pi-openai-server-compaction" plugin to get OpenAI's server-side compaction, which he says performs best for long-running tasks. Across the session he lets auto-compaction fire (it happens roughly four times total) and reports no noticeable loss of context/continuity each time — attributing this partly to good server-side compaction and partly to Firstmate's habit of persisting task state to files that crewmates can re-read.

Repo hygiene and publishing

He has First Mate commit the README/PRD update and publish the repo publicly on his GitHub account. First Mate asks a clarifying question about which GitHub identity/whether to keep a local-only repo with a public mirror; Kun opts for a direct-PR workflow (no strict gating) since it's still early-stage, deferring a stricter "No Mistakes" gate (his term for a local pre-merge validation pipeline) until there's an actual MVP with real code to protect. He explains his rule of thumb: turn on No Mistakes for changes that would otherwise get human code review; skip it for early solo/prototype work.

He catches a misspelling ("Eddie" spelled wrong throughout) and has First Mate correct it everywhere — local repo name, GitHub remote, and README — without having to personally track every place it appears. He also grants blanket PR-merge authority to First Mate for now, deferring stronger approval flows to later once there's an MVP.

Claude Design for the design system

With a PRD-only repo (no code yet), he opens Claude Design (a design tool) and creates a new design system rather than a one-off design, so future screens/components stay consistent. He points it at the repo, explains there's no code yet, and asks it to propose the main screens using its own judgment, aiming for something fun/educational for kids and transparent/controllable for parents. He notes Claude Design briefly reports being overloaded and falls back to Sonnet instead of Opus for the actual design generation — and it still produces usable results.

Secret management via Autonomic Vault

While Claude Design works, he has First Mate start backend work in parallel: Hetzner VPS provisioning and infrastructure. For credentials (Hetzner API token, later Cloudflare API token) he uses "Autonomic Vault," an open-source secrets manager built by Max Howell (creator of Homebrew), which he trusts and has contributed feedback to. Its key property: every time an agent needs a stored secret, Kun sees an explicit approval dialog showing which command/agent is requesting it, and the agent receives the secret only as an environment variable — it never sees the literal value in a way that could leak into logs, files, or third-party calls. He argues this kind of tight, per-use secret gating is increasingly important as more work gets delegated to agents, since you can't practically review every tool call an agent makes to catch a leaked credential.

Infrastructure as code with OpenTofu

He redirects the infra crewmate to express the VPS/server setup declaratively using OpenTofu (a Terraform fork) rather than clicking around manually, so the infrastructure is auditable and source-controlled.

Design system results and iteration

Claude Design's first pass: a piggy-bank-themed icon/wordmark ("Eddie's Wallet"), a gold-and-neutral color palette, and a clickable prototype. Kun's feedback loop: fix off-center text; the piggy-bank icon concept wins over a wallet or coins concept (asks for a bigger piggy and properly formatted iOS app-icon exports); the overall visual tone doesn't read as "for children" enough and needs to lean more fun/friendly. After a revision pass (bouncing piggy animation, bigger balance display, working click-through for sign-in and wallet views), he accepts it as good enough and exports the whole design system as a zip to hand to the build agents.

Building the frontend and backend implementation

He splits the project into a public frontend-only repo (the iOS app, kept open source) and a separate private backend repo, and has First Mate absorb the exported Claude Design system into the frontend build for a native SwiftUI app targeting both iPhone and iPad.

Browser automation for Apple Developer setup

For Apple Sign In setup, rather than manually clicking through Apple Developer / App Store Connect, he has First Mate drive his actual signed-in Chrome browser via Chrome DevTools browser automation to register the app ID, choose a bundle ID, and enable the Sign In with Apple capability. This works because he leaves Chrome's remote-debugging/"inspect" flag enabled persistently; each new agent session that wants browser control must still ask permission first, and using his real (already-authenticated) browser avoids an isolated browser session lacking his credentials. He fixes one failure (an invalid app display name containing disallowed characters) by feeding the error back to the agent and having it retry — succeeding on the second attempt.

End-to-end MVP push

With Claude Design assets connected, he defines the MVP bar as: iOS Simulator can complete real Apple Sign In and read/write through the real backend on the VPS. He explicitly overrides GPT-5.6's tendency to over-engineer here — First Mate initially proposed separate development vs. production environments, and Kun collapses that to a single production MVP environment given the app has effectively zero real users yet.

Backend deployment needs a public HTTPS hostname, so he brings in Cloudflare (where he manages DNS) via another Autonomic Vault-gated API token, and has the agent create a subdomain (edieswallet.kunchenjoid.com) pointed at the Hetzner VPS. He notes and course-corrects a voice-transcription typo in the domain name mid-session, and Luna (GPT-5.6) correctly infers the intended spelling from prior context.

He deliberately tells First Mate not to ask him for anything it can figure out itself unless only he can unblock it ("don't ask me unless there's something only I can do") — reinforcing his general philosophy of granting agents broad autonomy except at explicit production-secret/authorization boundaries.

Bug fixing and backend architecture review

First Mate catches and fixes, on its own initiative, a frontend pointing at the wrong backend address (a stale reference from before the domain was finalized) — reported to Kun only as an FYI, no action needed from him.

During iOS Simulator testing, First Mate hits an Apple Auth-flow bug where "AuthKit" doesn't return control properly; Kun tells it to keep self-investigating end-to-end rather than escalating to him. In parallel, he requests (and reviews in Lavish) a backend architecture walkthrough covering: API surface (Fastify service, Apple-issuer token handling, session/wallet services), domain-specific endpoints (family, wallet, child view) rather than generic CRUD, and the Postgres schema (parent identities, sessions, families → children → wallets → loans → ledger entries). He concludes the design isn't over-engineered and approves it.

He also flags a naming/UX bug: the brand is "Eddie's Wallet," but the app must not hard-code the assumption that the user is named "Eddie" — other families would use it too — so text needs neutral language (e.g., "child" or a configurable nickname) instead of literally "Eddie." First Mate dispatches this as a parallel fix while other testing continues.

Successful end-to-end test

After the AuthKit fix lands, the Simulator completes real Apple Sign In, lands in the parent view, and a $10 deposit correctly shows up in both the parent and the child (Eddie's) view. Signing out and back in reloads the same balance from the cloud backend, confirming persistence works. Kun's next step (post-recording) is to get a TestFlight build onto Eddie's actual iPad for real use.

Closing takeaways

The whole full-stack app — market research, product/technical planning, backend infra, database schema, authentication, design system, and a working native iOS frontend — was built in one sitting using GPT-5.6 "Luna" as the workhorse model (not the top-tier option), with Claude Design falling back to Sonnet rather than Opus for the visual design. Kun frames this as evidence that a strong agent-orchestration workflow (Firstmate's single-point-of-contact + parallel crewmates + interactive planning in Lavish + tight secret gating via Autonomic Vault) matters more than always defaulting to the most expensive model. The only point where the model needed real human correction was an inaccurate VPS cost estimate; everything else proceeded with only steering-level feedback from the captain.