Agentic Orchestration: Building a High-Performance Chrome Extension in 3 Weekends
From “Vibe Coding” to Agentic Architecture: The Making of HydroPal
Building HydroPal—a cross-platform hydration ecosystem—taught me a definitive lesson: AI is a world-class junior developer, but a terrible CTO. The future of software isn’t just writing syntax; it’s Agentic Coding. It is the art of orchestrating specialized AI agents to handle implementation while the human remains the Chief Architect. If you lack a “builder mindset,” you will hit a brick wall the moment AI hallucinations meet the harsh reality of browser APIs.
🎥 Product Demo & Links
I. The Orchestration Framework
Shipping a high-quality extension in three weekends required a rigorous multi-phase pipeline. This “Visual-to-Verified” sequence bridged the gap between a prompt and a product.
Phase 1: Design Discovery (The “What”)
I used Stitch to generate UI prototypes before a single line of code was written.
- The Insight: UI reveals the true scope. It forced early decisions on navigation, button “feel,” and settings architecture.
- The Outcome: A “visual contract” that prevented scope creep.
Phase 2: Agentic Planning (The “How”)
I treated the AI as a sounding board to lock down a plan.md.
- The Rule: No code is generated until the roadmap is finalized.
- The Roadmap:
- MVP: Local storage, hydration logging, and progress visualization.
- V2: Supabase integration for cloud sync and OAuth.
- V3: Smart reminders via Service Workers and Analytics.
Phase 3: Architecture & Stack Selection
As the architect, I enforced a stack that guards against AI-generated technical debt:
- Core: React + TypeScript (for type-safe state management).
- Backend: Supabase (PostgreSQL) for seamless JWT handling.
- Persistence: A “Cloud-First, Local-Always” strategy using
chrome.storage.localsynced with remote DBs.
II. The 3-Weekend Sprint Execution
| Timeline | Focus | Key Technical Milestone |
|---|---|---|
| Weekend 1 | UI & Core Logic | Used Vite for rapid React component generation based on Stitch designs. |
| Weekend 2 | Security & Sync | Solved Silent JWT refreshes by implementing a Supabase Auth listener that syncs session state with persistent browser storage. |
| Weekend 3 | Reminders & Mobile | Migrated web logic to Manifest V3 Service Workers using chrome.alarms. Used Capacitor to wrap the build for Android. |
III. Navigating the “Un-AI-able” Fundamentals
AI consistently struggles with three pillars where manual “Senior engineer-level” intervention was mandatory:
- Manifest V3 Constraints: AI frequently suggests deprecated V2 patterns. I had to strictly enforce V3 standards to pass the Chrome Web Store review.
- State Hydration Logic: To eliminate “loading flickers,” I architected a specific hydration sequence: $$S_{total} = S_{local} \cup S_{remote}$$ The UI renders instantly from local storage while the background script performs the delta-sync with Supabase.
- OAuth Sandbox: AI can write a redirect, but it cannot navigate the Google Cloud Console. Connecting OAuth to a sandboxed extension requires manual configuration.
IV. Critical Warning: The “Hallucination Loop”
The most vital skill in Agentic Coding is spotting when the AI has “lost the plot.” There is a specific “Tell”—if the AI begins a response with:
“You are absolutely right!” or “I apologize, you’re 100% correct, let me fix that…”
It is officially hallucinating. When an AI becomes a “yes-man,” it has lost its architectural grounding. It is now prioritizing your approval over functional code.
The Fix: Immediately Stop. Clear the chat context, re-upload your plan.md, and re-anchor the AI in the original technical constraints.
Conclusion: The Builder’s Edge
Agentic coding has shrunk the gap between “Idea” and “Market” from months to weekends. However, the requirement for deep architectural thinking has never been higher.
When you understand how data flows and how a browser environment interacts with your code, you stop being a “coder” and start being a CTO orchestrating a digital workforce.