diff --git a/PHASE_0_FOUNDATION.md b/PHASE_0_FOUNDATION.md deleted file mode 100644 index 6e0019cdd..000000000 --- a/PHASE_0_FOUNDATION.md +++ /dev/null @@ -1,112 +0,0 @@ -# Phase 0: Foundation - -**Branch:** `feat-demo-0-foundation` - -**Goal:** Create fresh SvelteKit app, integrate with Nx and pnpm workspace, verify it builds successfully. - -**Success Criteria:** -- ✅ `apps/demo/` exists with SvelteKit app -- ✅ `pnpm nx build demo` completes successfully -- ✅ `pnpm nx dev demo` starts dev server -- ✅ Dependencies installed via pnpm workspace -- ✅ Cloudflare adapter configured -- ✅ No build errors or warnings - ---- - -## Tasks - -### 1. Create Fresh SvelteKit App - -```bash -pnpm create svelte@latest apps/demo --template skeleton --types typescript -``` -Select: TypeScript ✓, ESLint ✓, Prettier ✓, Skip testing tools - -### 2. Configure Nx Integration - -Create `apps/demo/project.json` with standard Nx configuration: -- Define targets: `dev`, `build`, `preview` -- Set executor to `nx:run-commands` for each -- Point commands to Vite (e.g., `vite dev`, `vite build`) -- Add build output path: `{projectRoot}/build` - -### 3. Add Core Dependencies - -```bash -cd apps/demo - -# Add Cloudflare adapter for deployment -pnpm add -D @sveltejs/adapter-cloudflare - -# Add Tailwind CSS for styling (automated setup) -npx svelte-add@latest tailwindcss - -# Add Supabase for backend -pnpm add @supabase/supabase-js - -# Install all dependencies -pnpm install -``` - -### 4. Update Package Configuration - -Edit `apps/demo/package.json` to set the package name: -- Change `"name"` to `"@pgflow/demo"` -- Add `"private": true` - -**Note:** `@pgflow/client`, `@xyflow/svelte`, and `shiki` will be added in later phases as needed. - -### 5. Configure Cloudflare Adapter - -Update `apps/demo/svelte.config.js`: -- Import `@sveltejs/adapter-cloudflare` instead of adapter-auto -- Set in config: `kit: { adapter: adapter() }` - -### 6. Test Build - -```bash -# From monorepo root -pnpm nx build demo - -# Verify build output exists -ls apps/demo/build -``` - -### 7. Test Dev Server - -```bash -# From monorepo root -pnpm nx dev demo - -# Open http://localhost:5173/ -# Verify page loads without console errors -``` - ---- - -## Validation Checklist - -- [ ] `apps/demo/` exists with `project.json` -- [ ] `package.json` name is `@pgflow/demo` -- [ ] Cloudflare adapter configured in `svelte.config.js` -- [ ] Tailwind CSS working (check for `app.css` with `@tailwind` directives) -- [ ] `pnpm nx build demo` succeeds, creates `apps/demo/build/` -- [ ] `pnpm nx dev demo` starts, http://localhost:5173/ loads -- [ ] No TypeScript or console errors - ---- - -## Troubleshooting - -- **`pnpm create svelte` fails:** Check Node.js version (≥18), network connection -- **`svelte-add tailwindcss` fails:** Run manually: `pnpm add -D tailwindcss postcss autoprefixer` -- **Nx doesn't recognize demo:** Verify `apps/demo/project.json` exists, run `pnpm nx show projects` -- **Build fails:** Check Cloudflare adapter installed: `pnpm list @sveltejs/adapter-cloudflare` -- **Dev server won't start:** Check port 5173 available (`lsof -i :5173`), try `--port 5174` - ---- - -## Next Phase - -Proceed to **Phase 1: Vertical Slice** for end-to-end flow execution with minimal UI. Create branch `feat-demo-1-vertical-slice`. diff --git a/PHASE_1_VERTICAL_SLICE.md b/PHASE_1_VERTICAL_SLICE.md deleted file mode 100644 index aa1ab270c..000000000 --- a/PHASE_1_VERTICAL_SLICE.md +++ /dev/null @@ -1,362 +0,0 @@ -# Phase 1: Vertical Slice - -**Branch:** `feat-demo-1-vertical-slice` - -**Goal:** Implement minimal end-to-end flow execution - from UI button click through Edge Function to real-time status updates. Validates entire integration stack with **no authentication required** - just public anon key access. - -**Success Criteria:** -- ✅ Supabase initialized in demo app -- ✅ Edge Function with 1-step test flow executes -- ✅ pgflow packages vendored correctly -- ✅ pgflow client connects from UI (anon key only) -- ✅ Button click starts flow -- ✅ Status updates in real-time -- ✅ No console errors - -**Philosophy:** Build the thinnest possible slice through the entire stack. UI will be ugly - that's fine. Goal is to prove integration works. **No authentication - just public demo with anon key!** - ---- - -## Tasks - -### 1. Add pgflow Client Dependency - -```bash -cd apps/demo -pnpm add @pgflow/client -cd ../.. -``` - -This will add `"@pgflow/client": "workspace:*"` to dependencies automatically. - -### 2. Initialize Supabase - -```bash -cd apps/demo && npx -y supabase@latest init && cd ../.. -``` - ---- - -### 3. Install pgflow - -Run the pgflow installer: - -```bash -npx pgflow@latest install -``` - -This will: -- Update `supabase/config.toml` (adds pgflow schema, connection pooling) -- Copy pgflow migrations to `supabase/migrations/` - -### 4. Create Anon Permissions Migration - -Create `apps/demo/supabase/migrations/_demo_anon_permissions.sql`: - -```sql --- Grant anon role access to start flows -GRANT USAGE ON SCHEMA pgflow TO anon; -GRANT EXECUTE ON FUNCTION pgflow.start_flow TO anon; - --- Grant anon role read access to pgflow tables for real-time updates -GRANT SELECT ON pgflow.flows TO anon; -GRANT SELECT ON pgflow.runs TO anon; -GRANT SELECT ON pgflow.steps TO anon; -GRANT SELECT ON pgflow.step_states TO anon; -GRANT SELECT ON pgflow.deps TO anon; - --- Enable real-time for anon role -ALTER PUBLICATION supabase_realtime ADD TABLE pgflow.runs; -ALTER PUBLICATION supabase_realtime ADD TABLE pgflow.step_states; -``` - -### 5. Restart Supabase and Apply Migrations - -```bash -npx -y supabase@latest stop -npx -y supabase@latest start -npx -y supabase@latest migrations up -``` - ---- - -### 6. Copy Vendoring Script - -```bash -mkdir -p apps/demo/scripts -cp examples/playground/scripts/sync-edge-deps.sh apps/demo/scripts/ -chmod +x apps/demo/scripts/sync-edge-deps.sh -``` - -### 7. Update Vendoring Script Paths - -Edit `apps/demo/scripts/sync-edge-deps.sh` - replace `PLAYGROUND_DIR` with `DEMO_DIR`: - -```bash -DEMO_DIR="$(dirname "$SCRIPT_DIR")" -VENDOR_DIR="$DEMO_DIR/supabase/functions/_vendor" -``` - ---- - -### 8. Add Nx Target for Vendoring - -Edit `apps/demo/project.json` - add `sync-edge-deps` target: - -```json -"sync-edge-deps": { - "executor": "nx:run-commands", - "dependsOn": ["core:build", "dsl:build"], - "options": { "command": "./scripts/sync-edge-deps.sh", "cwd": "apps/demo" } -} -``` - -### 9. Build Dependencies and Vendor - -```bash -pnpm nx build core dsl -pnpm nx sync-edge-deps demo # Verify: ls apps/demo/supabase/functions/_vendor/@pgflow/ -``` - ---- - -### 10. Create Test Flow Worker Directory - -Create worker directory with flow definition inside: - -```bash -mkdir -p apps/demo/supabase/functions/test_flow_worker -``` - -### 11. Create Test Flow Definition - -Create `apps/demo/supabase/functions/test_flow_worker/test_flow.ts`: - -```typescript -import { Flow } from '@pgflow/dsl'; - -export default new Flow<{ message: string }>({ slug: 'test_flow' }).step( - { slug: 'greet' }, - (input) => `Hello, ${input.run.message}!` -); -``` - -**Note:** Flow slug is `test_flow` (with underscore), matching the worker directory name. - -### 12. Create Edge Function Worker - -Create `apps/demo/supabase/functions/test_flow_worker/index.ts`: - -```typescript -import { EdgeWorker } from '@pgflow/edge-worker'; -import TestFlow from './test_flow.ts'; - -EdgeWorker.start(TestFlow); -``` - -**This 3-line pattern is critical - it's how all pgflow workers are set up!** - -### 13. Create Deno Import Map - -Create `apps/demo/supabase/functions/test_flow_worker/deno.json`: - -```json -{ - "imports": { - "@pgflow/core": "../_vendor/@pgflow/core/index.ts", - "@pgflow/core/": "../_vendor/@pgflow/core/", - "@pgflow/dsl": "../_vendor/@pgflow/dsl/index.ts", - "@pgflow/dsl/": "../_vendor/@pgflow/dsl/", - "@pgflow/dsl/supabase": "../_vendor/@pgflow/dsl/src/supabase.ts", - "@pgflow/edge-worker": "../_vendor/@pgflow/edge-worker/index.ts", - "@pgflow/edge-worker/": "../_vendor/@pgflow/edge-worker/", - "@pgflow/edge-worker/_internal": "../_vendor/@pgflow/edge-worker/_internal.ts", - "postgres": "npm:postgres@3.4.5", - "@henrygd/queue": "jsr:@henrygd/queue@^1.0.7", - "@supabase/supabase-js": "jsr:@supabase/supabase-js@^2.49.4" - } -} -``` - -**Critical:** This maps all `@pgflow/*` imports to the vendored packages (one level up), including subpaths and required dependencies! - ---- - -### 14. Configure Edge Function in config.toml - -Edit `apps/demo/supabase/config.toml`, add at the end: - -```toml -[functions.test_flow_worker] -enabled = true -verify_jwt = false -import_map = "./functions/test_flow_worker/deno.json" -entrypoint = "./functions/test_flow_worker/index.ts" -``` - -**Critical:** `verify_jwt = false` allows public demo access without authentication. - ---- - -### 15. Build Client Package - -```bash -pnpm nx build client -``` - -### 16. Test Edge Function Locally - -```bash -cd apps/demo -npx -y supabase@latest start # Then in another terminal: -npx -y supabase@latest functions serve test_flow_worker -``` - -### 17. Create Client-Side Supabase Configuration - -Create `apps/demo/src/lib/supabase.ts`: - -```typescript -import { createClient } from '@supabase/supabase-js'; -import { PgflowClient } from '@pgflow/client'; - -// Hardcoded local Supabase defaults (Phase 1 - production config in Phase 6) -const SUPABASE_URL = 'http://127.0.0.1:54321'; -const SUPABASE_ANON_KEY = 'sb_publishable_ACJWlzQHlZjBrEguHvfOxg_3BJgxAaH'; - -export const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY); -export const pgflow = new PgflowClient(supabase); -``` - -**Note:** Get the anon key from `npx -y supabase@latest status`. Environment variables for production will be added in Phase 6 (Deploy). - ---- - -### 18. Create Minimal Test UI - -Replace `apps/demo/src/routes/+page.svelte` with basic test interface: - -```svelte - - -
-

pgflow Demo - Phase 1 Vertical Slice

- -
- -
- -
-

Status

-

{status}

-
- - {#if output} -
-

Output

- 
{output}
-
- {/if} - - {#if events.length > 0} -
-

Events

- {#each events as event} - 
{event}
- {/each} -
- {/if} -
- - -``` - -**Key patterns:** -- Use `onclick={handler}` not `on:click` (Svelte 5 syntax) -- Svelte 5 state: `let status = $state('idle')` -- Start flow: `pgflow.startFlow('test_flow', { message: 'World' })` -- Listen to events: `run.on('*', (event) => { ... })` - ---- - -### 19. Start Dev Server - -```bash -pnpm nx dev demo # Ensure npx -y supabase@latest start running -``` - -### 20. Test End-to-End - -Open http://localhost:5173/, click button, verify: -- Status: `idle` → `starting...` → `running` → `completed` -- Output shows `"Hello, World!"` -- Events section shows real-time event stream - ---- - -## Validation Checklist - -- [ ] Supabase initialized, pgflow packages vendored -- [ ] Test flow + worker created in `test_flow_worker/` directory -- [ ] Worker configured in `config.toml` with `verify_jwt = false` -- [ ] Deno import map created with all dependencies -- [ ] `npx -y supabase@latest start` and `functions serve test_flow_worker` running -- [ ] Dev server starts, button click starts flow -- [ ] Status updates real-time, output appears, events stream visible -- [ ] No authentication needed - works immediately on page load -- [ ] Flow slug is `test_flow` (with underscore) -- [ ] No console errors - ---- - -## Troubleshooting - -- **Vendoring fails:** Check `ls pkgs/core/dist`, rebuild with `pnpm nx build core dsl` -- **Edge Function won't start:** Check `npx -y supabase@latest status`, verify vendored files exist -- **Flow doesn't start:** Check browser console - Supabase connection, pgflow schema in config.toml, flow slug matches -- **No real-time updates:** Check Realtime enabled, Edge Function logs, Svelte `$state` reactivity -- **TypeScript errors:** Verify Svelte 5 syntax (`$state`, `onclick`) -- **Anon key issues:** Get correct key from `npx -y supabase@latest status`, ensure hardcoded in `lib/supabase.ts` - -**Rollback:** Mock pgflow client to debug Edge Function separately - -**Common issues:** -- `workspace:*` not resolving → `pnpm install --force` -- Port in use → `lsof -i :54321`, kill process -- Import paths wrong → Re-run `pnpm nx sync-edge-deps demo` - ---- - -## Next Phase - -Proceed to **Phase 2: Article Flow** for 4-step flow and state management. Create branch `feat-demo-2-article-flow`. diff --git a/PHASE_2_ARTICLE_FLOW.md b/PHASE_2_ARTICLE_FLOW.md deleted file mode 100644 index 33bb238bf..000000000 --- a/PHASE_2_ARTICLE_FLOW.md +++ /dev/null @@ -1,269 +0,0 @@ -# Phase 2: Article Flow - -**Branch:** `feat-demo-2-article-flow` - -**Goal:** Implement 4-step article processing flow with state management. Establish data flow foundation for observability features. - -**Success Criteria:** - -- ✅ Article processing flow with 4 steps (fetch, summarize, extractKeywords, publish) -- ✅ Simulated retry on summarize step -- ✅ pgflow State Store manages run state -- ✅ All dependencies correctly configured - -**Philosophy:** Build the state management foundation. Data flow is the key to everything that follows. - ---- - -## Tasks - -### 1. Install Required Dependencies - -```bash -cd apps/demo -pnpm add @xyflow/svelte shiki -cd ../.. -``` - -This installs: - -- `@xyflow/svelte` - DAG visualization (used in Phase 3) -- `shiki` - Syntax highlighting (used in Phase 4+) - -**Note:** Installing all frontend dependencies now simplifies later phases and avoids switching contexts when building UI components. - ---- - -### 2. Copy Logo Assets - -Copy pgflow logos for header component (used in Phase 6): - -```bash -cp pkgs/website/src/assets/pgflow-logo-*.svg apps/demo/static/ -``` - -This copies both light and dark variants of the pgflow logo. - ---- - -### 3. Create Article Flow Worker - -Create new Edge Function for the article flow: - -```bash -cd apps/demo -npx -y supabase@latest functions new article_flow_worker -``` - -This creates `apps/demo/supabase/functions/article_flow_worker/` directory. - ---- - -### 4. Create Article Processing Flow - -Create `apps/demo/supabase/functions/article_flow_worker/article_flow.ts` with 4 steps: - -```typescript -import { Flow } from '@pgflow/dsl'; - -// Task functions (implementations can be simple for Phase 2) -async function fetchArticle(url: string) { - const response = await fetch(`https://r.jina.ai/${url}`); - const content = await response.text(); - return { content, title: 'Article Title' }; -} - -function summarizeArticle(content: string, attemptNumber: number) { - // Simulate failure on first attempt for retry demo - if (attemptNumber === 1) { - throw new Error('Simulated failure for retry demo'); - } - return { summary: `Summary of article`, sentiment: 'positive' }; -} - -function extractKeywords(content: string) { - return { keywords: ['keyword1', 'keyword2', 'keyword3'] }; -} - -function publishArticle(data: { summary: any; keywords: any }) { - return { - articleId: crypto.randomUUID(), - publishedAt: new Date().toISOString(), - ...data, - }; -} - -// Flow definition - clean and minimal -export default new Flow<{ url: string }>({ - slug: 'article_flow', - maxAttempts: 3, -}) - .step({ slug: 'fetch_article' }, async (input) => fetchArticle(input.run.url)) - .step({ slug: 'summarize', dependsOn: ['fetch_article'] }, (input) => - summarizeArticle(input.fetch_article.content, input.attemptNumber) - ) - .step({ slug: 'extract_keywords', dependsOn: ['fetch_article'] }, (input) => - extractKeywords(input.fetch_article.content) - ) - .step( - { slug: 'publish', dependsOn: ['summarize', 'extract_keywords'] }, - (input) => - publishArticle({ - summary: input.summarize, - keywords: input.extract_keywords, - }) - ); -``` - -**Key patterns:** - -- Flow slug is `article_flow` (with underscore) -- Task functions defined separately for clarity -- Parallel execution: `summarize` and `extract_keywords` run simultaneously (both depend only on `fetch_article`) -- Retry simulation: `summarizeArticle` checks `attemptNumber` to fail first attempt -- Diamond DAG shape: 1 → 2 parallel → 1 -- Minimal config: Only `slug` and `maxAttempts` (defaults used for baseDelay/timeout) -- Explicit `dependsOn` arrays show flow structure clearly - ---- - -### 5. Create Edge Function Worker - -Create `apps/demo/supabase/functions/article_flow_worker/index.ts`: - -```typescript -import { EdgeWorker } from '@pgflow/edge-worker'; -import ArticleFlow from './article_flow.ts'; - -EdgeWorker.start(ArticleFlow); -``` - ---- - -### 6. Create Deno Import Map - -Create `apps/demo/supabase/functions/article_flow_worker/deno.json`: - -```json -{ - "imports": { - "@pgflow/core": "../_vendor/@pgflow/core/index.ts", - "@pgflow/core/": "../_vendor/@pgflow/core/", - "@pgflow/dsl": "../_vendor/@pgflow/dsl/index.ts", - "@pgflow/dsl/": "../_vendor/@pgflow/dsl/", - "@pgflow/dsl/supabase": "../_vendor/@pgflow/dsl/src/supabase.ts", - "@pgflow/edge-worker": "../_vendor/@pgflow/edge-worker/index.ts", - "@pgflow/edge-worker/": "../_vendor/@pgflow/edge-worker/", - "@pgflow/edge-worker/_internal": "../_vendor/@pgflow/edge-worker/_internal.ts", - "postgres": "npm:postgres@3.4.5", - "@henrygd/queue": "jsr:@henrygd/queue@^1.0.7", - "@supabase/supabase-js": "jsr:@supabase/supabase-js@^2.49.4" - } -} -``` - ---- - -### 7. Configure Edge Function in config.toml - -Edit `apps/demo/supabase/config.toml`, add at the end: - -```toml -[functions.article_flow_worker] -enabled = true -verify_jwt = false -import_map = "./functions/article_flow_worker/deno.json" -entrypoint = "./functions/article_flow_worker/index.ts" -``` - -**Critical:** `verify_jwt = false` allows public demo access without authentication. - ---- - -### 8. Set Environment Variables - -Create `apps/demo/supabase/.env.local` with `JINA_API_KEY` (optional for now): - -```bash -JINA_API_KEY=your_jina_api_key_here -``` - ---- - -### 9. Rebuild and Re-vendor - -```bash -pnpm nx build core dsl client -pnpm nx sync-edge-deps demo -``` - ---- - -### 10. Test Edge Function Locally - -```bash -cd apps/demo -npx -y supabase@latest start -# In another terminal: -npx -y supabase@latest functions serve article_flow_worker -``` - ---- - -### 11. Create pgflow State Store - -Create `apps/demo/src/lib/stores/pgflow-state.svelte.ts`: - -```typescript -import type { FlowRun } from '@pgflow/client'; - -class PgflowState { - run = $state(null); - activeStep = $state(null); - - steps = $derived(() => { - // Derive step states from run - if (!this.run) return new Map(); - // Implementation: map step states to slugs - return new Map(); - }); -} - -export const pgflowState = new PgflowState(); -``` - -**Purpose:** Central state management for flow execution, used by all UI components - -**Key patterns:** - -- Use Svelte 5 runes: `$state` and `$derived` -- Export singleton instance -- Will be updated in Phase 3 when building UI - ---- - -## Validation Checklist - -- [x] All dependencies installed (`@xyflow/svelte`, `shiki`) -- [x] Logo assets copied to `apps/demo/static/` -- [x] Article flow worker created (`article_flow_worker/`) -- [x] 4-step flow created with simulated retry -- [x] Worker configured in `config.toml` with `verify_jwt = false` -- [x] Deno import map created with all dependencies -- [x] pgflow State Store created and exported -- [x] Edge Function serves successfully -- [x] Build succeeds - ---- - -## Troubleshooting - -- **Build fails:** Check TypeScript errors, verify dependencies installed -- **Flow doesn't execute:** Check Edge Function logs, verify pgflow client connection -- **State not updating:** Check store exports, verify `$state` reactivity - ---- - -## Next Phase - -Proceed to **Phase 3: DAG Debug** to visualize the flow with DAG component and Debug panel. diff --git a/PHASE_3_DAG_DEBUG.md b/PHASE_3_DAG_DEBUG.md deleted file mode 100644 index 76b73f81c..000000000 --- a/PHASE_3_DAG_DEBUG.md +++ /dev/null @@ -1,152 +0,0 @@ -# Phase 3: DAG Debug - -**Branch:** `feat-demo-3-dag-debug` - -**Prerequisite:** Complete Phase 2 (Article Flow) - -**Goal:** Visualize the 4-step flow with interactive DAG component and Debug panel. Demonstrate pgflow's core value: observability. - -**Success Criteria:** -- ✅ DAG shows all 4 nodes with edges -- ✅ Active step highlights in DAG (pulsing glow) -- ✅ Debug panel shows run info + step states -- ✅ Parallel execution visible (summarize + extractKeywords) -- ✅ Retry visible in debug panel - -**Philosophy:** Build the observability foundation. UI can still be basic - focus on data flow and state management. - -**State Management:** Phase 2 already implemented `createFlowState()` which auto-discovers steps and manages all event subscriptions. Components receive `flowState` via props and access reactive state through getters. - ---- - -## Tasks - -### 1. Verify Dependencies - -Confirm `@xyflow/svelte` was installed in Phase 2: - -```bash -ls apps/demo/node_modules/@xyflow/svelte -``` - -**If missing:** Run `cd apps/demo && pnpm add @xyflow/svelte && cd ../..` - ---- - -### 2. Create DAG Component - -Create `apps/demo/src/lib/components/DAGVisualization.svelte`: - -Use `@xyflow/svelte` to render 4 nodes: -- **Layout:** fetchArticle (top) → parallel nodes (middle) → publish (bottom) -- **Dynamic styling:** Active steps show pulsing animation -- **State integration:** Receive `flowState` via props to determine node colors/states -- **Visual states:** pending (gray), running (pulsing green), completed (solid green), failed (red) - -**Props:** `{ flowState }` - the state object created by `createFlowState()` - ---- - -### 3. Create Debug Panel Component - -Create `apps/demo/src/lib/components/DebugPanel.svelte` with 3 sections: - -1. **Run Information** - Flow slug, run ID, status, elapsed time -2. **Step States** - Collapsible sections for each step showing status/output/errors -3. **Event Stream** - Real-time log of all events with timestamps - -**Props:** `{ flowState }` - the state object created by `createFlowState()` - -**Key pattern:** The `flowState.events` array already contains all events (collected automatically by `createFlowState`) - ---- - -### 4. Create Demo Page Layout - -Update `apps/demo/src/routes/+page.svelte`: - -- Two-column layout: DAG (left) + Debug Panel (right) -- URL input field + "Process Article" button -- Pass `flowState` to both DAG and Debug Panel components as props -- Flow state already created using `createFlowState(pgflow, 'article_flow')` -- Event handling is automatic (handled inside `createFlowState`) - -**Key changes from current implementation:** -```svelte - - -
- - -
-``` - -**Note:** `createFlowState` already handles all event subscriptions and reactivity via getters - ---- - -### 5. Add Brand Styles - -Verify logos were copied in Phase 2: -```bash -ls apps/demo/static/pgflow-logo-*.svg -``` - -Create `apps/demo/src/app.css` with pgflow brand colors: -- Primary accent: `#007b6e` (pgflow green) -- Define CSS variables for theme colors -- Add pulse animation keyframe for active states -- Set up light/dark mode variables if needed - -Import styles in `apps/demo/src/routes/+layout.svelte` - ---- - -### 6. Test Complete Flow - -```bash -cd apps/demo -npx -y supabase@latest start -# In another terminal: -npx -y supabase@latest functions serve article_flow_worker -# In another terminal (from monorepo root): -pnpm nx dev demo -``` - -Open http://localhost:5173/, click "Process Article", verify: -- DAG nodes light up -- Parallel execution visible (summarize + extract_keywords) -- Retry on summarize step (fails → succeeds) -- Debug panel updates - -**Note:** Worker name is `article_flow_worker` (with underscore) matching the flow slug `article_flow`. - ---- - -## Validation Checklist - -- [ ] 4-step flow created with simulated retry -- [ ] DAG renders with pulsing animation -- [ ] Debug panel shows run info + step states + event stream -- [ ] Parallel execution visible -- [ ] Retry visible (error → retry) - ---- - -## Troubleshooting - -- **DAG doesn't render:** Check Svelte Flow installed, browser console, CSS variables -- **Steps don't update:** Check that components access `flowState.status`, `flowState.activeStep` etc. (reactivity works via getters) -- **No pulsing animation:** Check CSS keyframes, `--glow-color` variable -- **Retry doesn't happen:** Check `maxAttempts: 3`, `attemptNumber === 1` check, Edge Function logs -- **Props not reactive:** Ensure components use `flowState.property` (not destructuring) to maintain reactivity - ---- - -## Next Phase - -Proceed to **Phase 4: Code Explanation** to add interactive code panel with syntax highlighting. diff --git a/PHASE_4_CODE_EXPLANATION.md b/PHASE_4_CODE_EXPLANATION.md deleted file mode 100644 index 1436a815f..000000000 --- a/PHASE_4_CODE_EXPLANATION.md +++ /dev/null @@ -1,106 +0,0 @@ -# Phase 4: Code Explanation - -**Branch:** `feat-demo-4-code-explanation` - -**Prerequisite:** Complete Phase 3 (DAG Debug) - -**Goal:** Add code panel with syntax highlighting and explanation display. Enable users to understand flow structure while watching execution. - -**Success Criteria:** -- ✅ Code panel shows flow definition with syntax highlighting -- ✅ Clicking DAG node → highlights code + scrolls debug panel -- ✅ Clicking code line → shows explanation panel + scrolls debug panel -- ✅ Explanation panel shows dependencies, inputs, returns - -**Philosophy:** Make the demo interactive without being overwhelming. Every interaction should feel purposeful. - ---- - -## Tasks - -### 1. Verify Shiki Dependency - -Already installed in Phase 2, verify: - -```bash -# Check installation -ls apps/demo/node_modules/shiki -``` - -**If missing:** -```bash -cd apps/demo -pnpm add shiki -cd ../.. -``` - ---- - -### 2. Create Code Panel Component - -Create `apps/demo/src/lib/components/CodePanel.svelte`: - -**Purpose:** Display the flow definition code with syntax highlighting and interactive lines - -**Implementation:** -- Use Shiki to highlight ~20 lines of flow code -- Track which step is active (from pgflowState) and selected (from clicks) -- Map line ranges to step slugs (e.g., lines 12-16 = fetchArticle) -- On line click: dispatch 'step-selected' event and update selection -- Visual states: active line (green bg), selected line (stronger green bg) - ---- - -### 3. Create Explanation Panel Component - -Create `apps/demo/src/lib/components/ExplanationPanel.svelte`: - -**Purpose:** Show step details when user clicks on code or DAG - -**Implementation:** -- Listen for 'step-selected' custom event -- Display: step name, dependencies, available inputs, return type -- Store step info in a static object (dependencies, inputs, returns) -- Appears below code panel with close button -- Dismisses on close button click or outside click - ---- - -## Validation Checklist - -- [ ] Code panel renders with syntax highlighting -- [ ] Clicking DAG node shows explanation panel -- [ ] Clicking code line shows explanation panel -- [ ] Explanation panel displays correct info -- [ ] Clicking DAG node scrolls debug panel -- [ ] Clicking code line scrolls debug panel - ---- - -## Troubleshooting - -**Problem: Shiki syntax highlighting not working** -```bash -# Check Shiki version -pnpm list shiki - -# Try clearing cache and rebuilding -rm -rf apps/demo/.svelte-kit -pnpm nx dev demo -``` - -**Problem: Click events not firing** -- Check browser console for errors -- Verify event listeners attached (onMount) -- Check custom event names match - -**Problem: Explanation panel doesn't update** -- Check `step-selected` event dispatched -- Verify event listener in ExplanationPanel -- Check `stepInfo` has data for all steps - ---- - -## Next Phase - -Proceed to **Phase 5: Results Modals** to add results card, output modal, and layout updates. diff --git a/PHASE_5_RESULTS_MODALS.md b/PHASE_5_RESULTS_MODALS.md deleted file mode 100644 index b909af1c5..000000000 --- a/PHASE_5_RESULTS_MODALS.md +++ /dev/null @@ -1,184 +0,0 @@ -# Phase 5: Results Modals - -**Branch:** `feat-demo-5-results-modals` - -**Prerequisite:** Complete Phase 4 (Code Explanation) - -**Goal:** Add results card, output modal, and comprehensive layout. Complete all interactive UI elements. - -**Success Criteria:** -- ✅ Results card animates in on completion -- ✅ Output modals work for large JSON (fetchArticle) -- ✅ All interactions feel smooth and intentional -- ✅ Layout includes all components - -**Philosophy:** Make the demo interactive without being overwhelming. Every interaction should feel purposeful. - ---- - -## Tasks - -### 4. Create Results Card Component - -Create `apps/demo/src/lib/components/ResultsCard.svelte`: - -**Purpose:** Display successful completion with article details - -**Implementation:** -- Only visible when `runStatus === 'completed'` -- Extract and display: title (from fetchArticle), summary (from summarize), keywords (from extractKeywords) -- Calculate duration from run.started_at to run.completed_at -- Animate in with slide-in effect -- Green gradient background to indicate success - ---- - -### 5. Create Output Modal Component - -Create `apps/demo/src/lib/components/OutputModal.svelte`: - -**Purpose:** Display full JSON output for large step results (especially fetchArticle) - -**Implementation:** -- Export `show(data)` function to open modal with JSON content -- Use Shiki to syntax highlight the JSON -- Full-screen overlay with centered content box -- Close on: X button, backdrop click, or Escape key -- Scrollable content area for large payloads - ---- - -### 6. Update Debug Panel with Modal Triggers - -Edit `apps/demo/src/lib/components/DebugPanel.svelte`: - -- Import OutputModal component -- Add 🔍 icon next to step outputs (especially for large payloads) -- On icon click: call `outputModal.show(data)` -- Show truncated preview inline (first 100 chars) -- Bind OutputModal instance at component end - ---- - -### 7. Update DAG with Click Handlers - -Edit `apps/demo/src/lib/components/DAGVisualization.svelte`: - -- Add node click handler to dispatch 'step-selected' event -- Pass node ID (step slug) in event detail -- Also dispatch 'scroll-to-step' for debug panel -- Wire handler to SvelteFlow's `onnodeclick` prop - ---- - -### 8. Update Main Page Layout - -Edit `apps/demo/src/routes/+page.svelte`: - -Import new components: -- CodePanel, ExplanationPanel, ResultsCard - -Update layout structure: -- Two-column grid: 40% left (code) / 60% right (observability) -- Left column: CodePanel + ExplanationPanel -- Right column: DAGVisualization + ResultsCard + DebugPanel -- Responsive: stacks to single column on narrow screens - ---- - -### 9. Test All Interactions - -```bash -# Restart everything -cd apps/demo -npx -y supabase@latest start -# In another terminal: -npx -y supabase@latest functions serve article_flow_worker -# In another terminal (from root): -pnpm nx dev demo -``` - -**In browser, test:** - -1. **DAG Click:** - - Click a DAG node - - Code panel should highlight corresponding section - - Explanation panel should appear - - Debug panel should scroll to that step - -2. **Code Click:** - - Click a line in code panel - - Explanation panel should appear - - Debug panel should scroll to that step - -3. **Output Modal:** - - After flow completes - - Click 🔍 icon in debug panel - - Modal should open with formatted JSON - - Click outside or press Escape to close - -4. **Results Card:** - - After flow completes - - Results card should slide in - - Show title, summary, keywords, article ID - -**Validate:** All interactions work smoothly - ---- - -## Validation Checklist - -- [ ] Code panel renders with syntax highlighting -- [ ] Clicking DAG node shows explanation panel -- [ ] Clicking code line shows explanation panel -- [ ] Explanation panel displays correct info -- [ ] Clicking DAG node scrolls debug panel -- [ ] Clicking code line scrolls debug panel -- [ ] Results card animates in on completion -- [ ] Results card shows all fields correctly -- [ ] 🔍 icon appears in debug panel for outputs -- [ ] Clicking 🔍 opens modal -- [ ] Modal shows formatted JSON -- [ ] Modal closes on backdrop click -- [ ] Modal closes on Escape key -- [ ] All animations smooth (no jank) - ---- - -## Troubleshooting - -**Problem: Modal not closing** -- Verify backdrop click handler -- Check Escape key listener -- Test with browser dev tools (Event Listeners tab) - -**Problem: Results card not appearing** -- Check `runStatus === 'completed'` condition -- Verify `$derived` reactivity -- Check console for step output data - -**Problem: All interactions feel janky** -- Check animation durations (should be 300-500ms) -- Verify no JavaScript blocking rendering -- Check for console errors - ---- - -## Files Created/Modified - -**Created:** -- `apps/demo/src/lib/components/CodePanel.svelte` -- `apps/demo/src/lib/components/ExplanationPanel.svelte` -- `apps/demo/src/lib/components/ResultsCard.svelte` -- `apps/demo/src/lib/components/OutputModal.svelte` - -**Modified:** -- `apps/demo/src/lib/components/DebugPanel.svelte` -- `apps/demo/src/lib/components/DAGVisualization.svelte` -- `apps/demo/src/routes/+page.svelte` - ---- - -## Next Phase - -Proceed to **Phase 6: Polish Deploy** to add overlays, speed toggle, analytics, and deploy to production. diff --git a/PHASE_6_POLISH_DEPLOY.md b/PHASE_6_POLISH_DEPLOY.md deleted file mode 100644 index 0d84b83bf..000000000 --- a/PHASE_6_POLISH_DEPLOY.md +++ /dev/null @@ -1,386 +0,0 @@ -# Phase 6: Polish + Deploy - -**Branch:** `feat-demo-6-polish-deploy` - -**Prerequisite:** Complete Phase 5 (Results Modals) - -**Goal:** Add final polish (overlays, speed toggle, CTAs, analytics, responsive) and deploy to production. Ship Show HN-ready demo. - -**Success Criteria:** -- ✅ Speed mode toggle works (slow ↔ fast) -- ✅ Welcome overlay appears for first-time visitors -- ✅ Completion overlay appears with CTAs -- ✅ "Try Another URL" button with popover -- ✅ Logo in header -- ✅ Analytics tracking all events -- ✅ Mobile responsive (functional) -- ✅ Deployed to Cloudflare Pages with custom domain -- ✅ No console errors in production - -**Philosophy:** Ship fast, iterate later. Functional > perfect. - ---- - -## Tasks - -### 1. Verify Logo Assets - -Check that logos were copied in Phase 2: - -```bash -ls apps/demo/static/pgflow-logo-*.svg -``` - -**Expected:** Both `pgflow-logo-dark.svg` and `pgflow-logo-light.svg` present - -**If missing:** Copy from `pkgs/website/src/assets/` - ---- - -### 2. Create Header Component - -Create `apps/demo/src/lib/components/Header.svelte` - -**Features:** -- pgflow logo (left) - use static SVG files -- "Try Another URL" button (center) - appears after first completion -- Speed toggle (right) - segmented control with 🐌 Slow / ⚡ Fast -- URL popover shows 3-4 suggested article URLs - -**Props:** -- `onUrlSelected`: callback when URL selected -- `onSpeedChange`: callback when speed toggled -- `showTryAnotherUrl`: whether to show the center button - -**Implementation Notes:** -- Use shadcn-svelte components for buttons and popover -- Store speed preference in localStorage -- Suggested URLs should be hardcoded array - ---- - -### 3. Create Welcome Overlay Component - -Create `apps/demo/src/lib/components/WelcomeOverlay.svelte` - -**Purpose:** First-time visitor onboarding - -**Features:** -- Full-screen overlay with welcome message -- Lists key features (DAG viz, code execution, debug info, retry handling) -- URL input field with dropdown suggestions -- "Start Demo" button -- "Don't show again" checkbox (uses localStorage) -- Note about slow motion being default - -**Behavior:** -- Check localStorage on mount for dismissed state -- Call `onStart(url)` prop when user clicks start -- Dismisses and saves preference if checkbox checked - -**Styling:** -- Use overlay pattern: fixed position, backdrop, centered content -- Match pgflow dark theme colors - ---- - -### 4. Create Completion Overlay Component - -Create `apps/demo/src/lib/components/CompletionOverlay.svelte` - -**Purpose:** Post-completion celebration and CTAs - -**Features:** -- Success message explaining slow motion demo -- Encourages trying fast mode -- Grid of CTA buttons (2x3): - - Get Started (docs) - - Star on GitHub - - Join Discord - - Follow on X - - Contact - - Try Another URL - -**Props:** -- `visible`: boolean to show/hide -- `onClose`: callback when closed - -**Links to include:** -- Docs: `https://pgflow.dev/get-started/` -- GitHub: `https://github.com/pgflow-dev/pgflow` -- Discord: `https://pgflow.dev/discord` -- X: `https://x.com/pgflow_dev` -- Contact: `https://pgflow.dev/author` - -**Styling:** -- Similar overlay pattern as welcome -- CTA buttons in grid layout -- Hover states for buttons - ---- - -### 5. Integrate Plausible Analytics - -Edit `apps/demo/src/app.html`: - -Add Plausible script tags in the head section with: -- Script tag for plausible.io/js/script.js -- Data domain attribute: "demo.pgflow.dev" -- Window.plausible fallback function - -Create analytics helper `apps/demo/src/lib/analytics.ts`: - -Export a `trackEvent` function that: -- Checks if window.plausible exists -- Calls plausible with event name and optional props -- Handles SSR safely (typeof window check) - -Add TypeScript window declaration for plausible. - ---- - -### 6. Wire Everything Together - -Edit `apps/demo/src/routes/+page.svelte` to integrate all new components: - -**State additions:** -- `speedMode` - 'slow' | 'fast' (default: 'slow') -- `showCompletionOverlay` - boolean -- `hasCompletedOnce` - boolean - -**Import all new components:** -- Header -- WelcomeOverlay -- CompletionOverlay - -**Add delay logic:** -- In slow mode: 1000ms delay per step -- In fast mode: 0ms delay -- Apply delay using setTimeout in event handlers - -**Track analytics events:** -- demo_started (with speed and url) -- demo_completed -- demo_error -- speed_toggled_slow/fast -- url_suggestion_selected - -**Component structure:** -- Add Header at top with props -- Add WelcomeOverlay (conditional render for first-time) -- Add CompletionOverlay (shows after completion) -- Existing components remain - ---- - -### 7. Add Mobile Responsiveness - -Update `apps/demo/src/app.css`: - -Add media queries for: -- Tablets (max-width: 1200px): Single column layout -- Mobile (max-width: 768px): Reduced padding, smaller fonts - -Key adjustments: -- Container padding reduction -- Font size scaling -- Button size adjustments -- Grid to single column transition - ---- - -### 8. Configure Cloudflare Pages Deployment - -Edit `apps/demo/svelte.config.js`: - -- Import and configure @sveltejs/adapter-cloudflare -- Set routes configuration -- Include all paths, exclude none - ---- - -### 9. Build for Production - -```bash -pnpm nx build demo -``` - -**Validate:** -- Build completes without errors -- Output in `apps/demo/build/` - ---- - -### 10. Deploy to Cloudflare Pages - -**Via Cloudflare Dashboard:** - -1. Create new Pages project -2. Connect to Git or upload directly -3. Build settings: - - Build command: `pnpm nx build demo` - - Build output: `apps/demo/build` - - Root directory: `/` -4. Environment variables: - - `VITE_SUPABASE_URL` - - `VITE_SUPABASE_ANON_KEY` -5. Deploy - -**Custom Domain:** -- Add domain: `demo.pgflow.dev` -- Update DNS records as instructed - ---- - -### 11. Test Production Build Locally - -```bash -pnpm nx preview demo -``` - -Test checklist: -- All features work -- Analytics fires (check network tab) -- No console errors -- Logos load -- Mobile responsive - ---- - -### 12. Deploy Edge Functions to Supabase - -Deploy both workers to production: - -```bash -cd apps/demo -npx -y supabase@latest functions deploy test_flow_worker -npx -y supabase@latest functions deploy article_flow_worker -npx -y supabase@latest secrets set JINA_API_KEY=your_actual_key -``` - -**Note:** Both `test_flow_worker` and `article_flow_worker` need to be deployed for the demo to work. - ---- - -## Validation Checklist - -- [ ] Logo appears in header -- [ ] Speed toggle works (slow ↔ fast) -- [ ] Welcome overlay appears (first visit) -- [ ] Welcome overlay dismissible ("don't show again") -- [ ] Flow runs in slow mode by default -- [ ] Speed affects execution timing -- [ ] Completion overlay appears after run -- [ ] All CTA links work in completion overlay -- [ ] "Try Another URL" button appears after first run -- [ ] URL popover shows suggestions -- [ ] Analytics tracking all events (check Plausible dashboard) -- [ ] Mobile responsive (test on phone/tablet) -- [ ] Deployed to Cloudflare Pages -- [ ] Custom domain works (demo.pgflow.dev) -- [ ] Edge Functions deployed to Supabase -- [ ] Production has no console errors -- [ ] All features work in production - ---- - -## Troubleshooting - -**Problem: Build fails** -- Check TypeScript errors: `pnpm nx type-check demo` -- Clear cache and rebuild -- Check for missing dependencies - -**Problem: Analytics not firing** -- Verify plausible.io requests in network tab -- Check domain matches in script tag -- Verify trackEvent calls - -**Problem: Logos not loading** -- Verify files exist in `apps/demo/static/` -- Check paths don't include `static/` prefix in src -- Check network tab for 404s - -**Problem: Cloudflare Pages build fails** -- Verify build command and output directory -- Check Node version compatibility -- Ensure environment variables are set - -**Problem: Custom domain not working** -- Allow DNS propagation time (up to 48h) -- Verify CNAME configuration -- Test with default Pages URL first - ---- - -## Files Created/Modified - -**Created:** -- `apps/demo/src/app.html` -- `apps/demo/src/lib/analytics.ts` -- `apps/demo/src/lib/components/Header.svelte` -- `apps/demo/src/lib/components/WelcomeOverlay.svelte` -- `apps/demo/src/lib/components/CompletionOverlay.svelte` - -**Modified:** -- `apps/demo/svelte.config.js` (Cloudflare adapter) -- `apps/demo/src/app.css` (responsive styles) -- `apps/demo/src/routes/+page.svelte` (integration) - ---- - -## Post-Deployment - -### Monitor in Production - -1. Check Plausible dashboard for event tracking -2. Monitor Cloudflare Analytics -3. Review Supabase Edge Function logs -4. Verify no console errors on live site - -### Update Documentation - -Update `.notes/prds/demo-app-prd.md` with production URL and status. - -### Prepare Show HN Post - -Draft title, URL, and description for Show HN submission focusing on: -- Interactive demo showcasing workflow orchestration -- Real-time DAG visualization -- Full observability features -- Automatic retry handling -- PostgreSQL-native approach - ---- - -## Success! 🎉 - -Demo is now: -- ✅ **Functional** - All features work end-to-end -- ✅ **Interactive** - Engaging clicks, animations, modals -- ✅ **Observable** - Full visibility into execution -- ✅ **Responsive** - Works on desktop and mobile -- ✅ **Tracked** - Analytics capturing all events -- ✅ **Deployed** - Live at custom domain -- ✅ **Show HN Ready** - Compelling and polished - -**Ship it!** 🚀 - ---- - -## Optional Enhancements (Post-Launch) - -If time permits or after Show HN feedback: - -1. **Event Stream section** - Add to Debug Panel (from PRD) -2. **Real LLM calls** - Use actual Groq API -3. **More suggested URLs** - Expand to 10+ pre-tested URLs -4. **Keyboard shortcuts** - Space to run, Escape to close -5. **Dark/Light theme toggle** - Match user preference -6. **Better error messages** - User-friendly explanations -7. **Retry count display** - Show in DAG nodes -8. **Duration tracking** - Per-step timing breakdown -9. **Share button** - Generate shareable URL with run ID -10. **Mobile polish** - Dedicated mobile layout - -**But remember:** Perfect is the enemy of shipped. Launch first, iterate based on real feedback. diff --git a/START_HERE.md b/START_HERE.md deleted file mode 100644 index f1654909c..000000000 --- a/START_HERE.md +++ /dev/null @@ -1,115 +0,0 @@ -# START HERE: Demo App Implementation - -**Goal:** Build pgflow interactive demo → https://demo.pgflow.dev - -**Approach:** Vertical slice - build thin end-to-end first, then expand - ---- - -## 📁 Documents - -| File | Purpose | -| ----------------------------- | --------------------------- | -| **THIS FILE** | Overview + branch setup | -| `.notes/prds/demo-app-prd.md` | Product requirements | -| `PHASE_0-6.md` (7 files) | Step-by-step implementation | - ---- - -## 🚀 Quick Start - -### Branch Names for Implementation - -The implementation uses these branches (create as needed): - -- `feat-demo-0-foundation` - Phase 0: Fresh SvelteKit + Nx -- `feat-demo-1-vertical-slice` - Phase 1: Client-side auth + Integration -- `feat-demo-2-article-flow` - Phase 2: Flow + stores -- `feat-demo-3-dag-debug` - Phase 3: DAG + Debug panel -- `feat-demo-4-code-explanation` - Phase 4: Code + Explanation -- `feat-demo-5-results-modals` - Phase 5: Results + Modals -- `feat-demo-6-polish-deploy` - Phase 6: Polish + Deploy - -### Start Implementation - -```bash -# Start with PHASE_0_FOUNDATION.md and follow checklist -# Creates fresh SvelteKit app from scratch -# Validate → Commit → Next branch → Next phase -``` - ---- - -## 🌲 Branch Strategy - -7 sequential phases (0-6) for clean linear progression: - -| Phase | Branch | What Gets Built | Done | -| ------- | ------------------------------ | ----------------------------------- | ---- | -| Phase 0 | `feat-demo-0-foundation` | Fresh SvelteKit app + Nx setup | [x] | -| Phase 1 | `feat-demo-1-vertical-slice` | Client-side auth + end-to-end proof | [x] | -| Phase 2 | `feat-demo-2-article-flow` | 4-step flow + stores | [ ] | -| Phase 3 | `feat-demo-3-dag-debug` | DAG viz + Debug panel | [ ] | -| Phase 4 | `feat-demo-4-code-explanation` | Code panel + clicks | [ ] | -| Phase 5 | `feat-demo-5-results-modals` | Results card + modals | [ ] | -| Phase 6 | `feat-demo-6-polish-deploy` | Overlays + analytics + ship | [ ] | - ---- - -## 🎯 Key Concept: Vertical Slice - -**Phase 1 is critical** - proves end-to-end integration works: - -- Client-side anonymous auth (1 line!) -- 1-step test flow (backend) -- Button + status display (frontend) -- pgflow client connection (integration) - -**Then expand incrementally:** - -- Phase 2: 4-step flow + state management -- Phase 3: DAG visualization + Debug panel -- Phase 4: Code panel + interactions -- Phase 5: Results + modals -- Phase 6: Polish + deploy - -**Why?** Catches integration issues early. Everything after Phase 1 is UI. - -**Auth simplicity:** Client-side only! No server hooks, no session management, just public anon key - perfect for public demos. - ---- - -## 📝 Implementation Patterns - -**Every phase follows this pattern for Edge Functions:** - -1. **Create worker:** `npx -y supabase@latest functions new _worker` -2. **Flow lives with worker:** `functions/_worker/.ts` -3. **Worker imports flow:** `import Flow from './.ts'` -4. **Deno import map:** `functions/_worker/deno.json` with relative paths to `../_vendor/` -5. **Configure in config.toml:** - ```toml - [functions._worker] - enabled = true - verify_jwt = false - import_map = "./functions/_worker/deno.json" - entrypoint = "./functions/_worker/index.ts" - ``` - -**Critical:** `verify_jwt = false` allows public demo access without authentication. - ---- - -## ✅ Pre-Flight - -- [ ] Read PRD -- [ ] Supabase CLI installed -- [ ] Deno installed -- [ ] Created 7-branch stack -- [ ] On `feat-demo-foundation` - ---- - -## 🚀 Go - -**Next:** Open `PHASE_0_FOUNDATION.md` and start. Validate after each phase.