Corrected Execution Order - Frontend First

Date: 2025-10-06 Critical Fix: Frontend wrapper MUST be complete before theia deployment

---

🚨 Why the Previous Order Was Wrong

Previous (Incorrect) Order:

1. Auth backend first
2. Pod provisioning
3. Then theia frontend ← TOO LATE!

Problem: Users would see broken UI, no Header/Footer, no theme consistency

---

✅ Corrected Execution Order

Phase 0: Pre-requisites (Day 1 - 1 hour)

No code dependencies - just infrastructure setup

Step	Task	Time	Priority
0.1	Create JWT secret in Kubernetes	5min	🔴 CRITICAL
0.2	Create GCP service account	10min	🔴 CRITICAL
0.3	Grant Vertex AI permissions	10min	🟡 HIGH
0.4	Verify FDB cluster operational	15min	🔴 CRITICAL
0.5	Verify Docker registry access	5min	🔴 CRITICAL

Commands:

# 0.1
kubectl create secret generic jwt-secret \
  --from-literal=secret=$(openssl rand -base64 32) \
  -n coditect-app

# 0.2
gcloud iam service-accounts create coditect-server \
  --project=serene-voltage-464305-n2

# 0.3
gcloud projects add-iam-policy-binding serene-voltage-464305-n2 \
  --member="serviceAccount:coditect-server@serene-voltage-464305-n2.iam.gserviceaccount.com" \
  --role="roles/aiplatform.user"

# 0.4
kubectl get statefulset foundationdb -n coditect-app

# 0.5
gcloud auth configure-docker gcr.io

---

Phase 1: Frontend Wrapper (Day 1-3 - MUST BE FIRST!)

Goal: Build V4 wrapper that will contain theia Blockers: None - can start immediately Why First: Users will see this wrapper before anything else loads

Step	Task	Dependencies	Time	Priority
1.1	Port V4 Header component	None	2h	🔴 CRITICAL
1.2	Port V4 Footer component	None	1h	🔴 CRITICAL
1.3	Create theiaEmbed component	None	2h	🔴 CRITICAL
1.4	Create SidePanel component	None	3h	🔴 CRITICAL
1.5	Update layout for theia	1.1, 1.2, 1.3, 1.4	2h	🔴 CRITICAL
1.6	Port V4 Chakra theme	None	1h	🔴 CRITICAL
1.7	Create theia CSS theme (matching)	1.6	2h	🔴 CRITICAL
1.8	Create theme sync hook	1.6, 1.7	1h	🟡 HIGH
1.9	Update App routes	1.5	1h	🔴 CRITICAL
1.10	Port Login/Register pages	1.1, 1.2	2h	🔴 CRITICAL
1.11	Test wrapper locally (mock theia)	All above	3h	🔴 CRITICAL

Total: ~20 hours (2.5 days)

Deliverables:

• ✅ Complete V4 wrapper working locally
• ✅ Header/Footer/SidePanel functional
• ✅ Theme consistent (Chakra + theia CSS ready)
• ✅ Login/Register pages styled correctly
• ✅ Routes configured for /ide

Test Criteria:

# Run locally
npm run dev

# Visit http://localhost:5173
# Should see:
# - Header with logo, theme toggle, user menu
# - SidePanel (even if empty)
# - Footer with links
# - Mock theia area (can be placeholder div)
# - Theme toggle works (light/dark)

---

Phase 2: theia Container (Day 3-4 - Parallel with Phase 3)

Goal: Build theia with extensions, ready to embed in wrapper Blockers: None - can run parallel with auth backend Why Now: Once wrapper is ready, we need theia to load into it

Step	Task	Dependencies	Time	Priority
2.1	Build theia with llm extensions	None	4h	🔴 CRITICAL
2.2	Add theme sync receiver	1.7, 1.8	2h	🔴 CRITICAL
2.3	Create Dockerfile for theia	2.1, 2.2	2h	🔴 CRITICAL
2.4	Build Docker image	2.3	1h	🔴 CRITICAL
2.5	Push to GCR	2.4	15min	🔴 CRITICAL
2.6	Test theia in local wrapper	1.11, 2.5	2h	🔴 CRITICAL

Total: ~12 hours (1.5 days)

Deliverables:

• ✅ theia container image in GCR
• ✅ theia loads in wrapper (local test)
• ✅ Theme syncs between wrapper and theia
• ✅ Extensions working (llm chat, model selector)

Docker Build:

# Dockerfile.theia
FROM node:20-slim

WORKDIR /workspace

# Install theia dependencies
RUN apt-get update && apt-get install -y git python3 build-essential

# Copy package files
COPY package*.json ./
RUN npm ci --production

# Copy theia source
COPY . .

# Build theia
RUN npm run theia:build

EXPOSE 3000
CMD ["npm", "run", "theia:start", "--", "--hostname=0.0.0.0", "--port=3000"]

---

Phase 3: Auth Backend (Day 3-4 - Parallel with Phase 2)

Goal: JWT + FDB session management working Blockers: Needs Phase 0 (JWT secret) Why Now: Wrapper needs working auth before deployment

Step	Task	Dependencies	Time	Priority
3.1	Create JWT middleware	0.1	3h	🔴 CRITICAL
3.2	Add FDB session lookup	0.4, 3.1	2h	🔴 CRITICAL
3.3	Implement session storage	0.4	2h	🔴 CRITICAL
3.4	Create login endpoint	3.1, 3.2, 3.3	2h	🔴 CRITICAL
3.5	Create register endpoint	3.1, 3.2, 3.3	2h	🔴 CRITICAL
3.6	Add session expiration	3.2	1h	🟡 HIGH
3.7	Create session cleanup job	3.6	1h	🟡 HIGH
3.8	Test auth flow end-to-end	All above	2h	🔴 CRITICAL

Total: ~15 hours (2 days)

Deliverables:

• ✅ JWT generation and validation working
• ✅ Sessions stored in FDB
• ✅ Login/Register endpoints functional
• ✅ Session expiration enforced

Test:

# Register user
curl -X POST https://api.coditect.ai/api/v2/auth/register \
  -H "Content-Type: application/json" \
  -d '{"email":"test@example.com","password":"test123","name":"Test User"}'

# Login
curl -X POST https://api.coditect.ai/api/v2/auth/login \
  -H "Content-Type: application/json" \
  -d '{"email":"test@example.com","password":"test123"}'

# Should return JWT + session data

---

Phase 4: WebSocket Sidecar (Day 5 - Depends on Phase 2, 3)

Goal: Fix WebSocket pod communication Blockers: Needs theia container (Phase 2) to test with Why Now: theia needs real-time communication

Step	Task	Dependencies	Time	Priority
4.1	Create WebSocket sidecar container	None	3h	🔴 CRITICAL
4.2	Update workspace pod template	4.1	2h	🔴 CRITICAL
4.3	Test localhost communication	4.2	1h	🔴 CRITICAL
4.4	Update theia WebSocket client	2.1, 4.3	2h	🔴 CRITICAL
4.5	Test with auth (JWT in WebSocket)	3.1, 4.4	2h	🔴 CRITICAL

Total: ~10 hours (1.25 days)

workspace Pod Template (with sidecar):

apiVersion: v1
kind: Pod
metadata:
  name: workspace
  namespace: user-{user_id}
spec:
  containers:
  - name: theia
    image: gcr.io/serene-voltage-464305-n2/t2-theia-ide:latest
    ports:
    - containerPort: 3000
    env:
    - name: WEBSOCKET_URL
      value: "ws://localhost:8765"  # Sidecar

  - name: websocket-gateway
    image: gcr.io/serene-voltage-464305-n2/coditect-websocket:latest
    ports:
    - containerPort: 8765
    env:
    - name: FDB_CLUSTER_STRING
      value: "coditect:production@10.128.0.8:4500"

---

Phase 5: Pod Provisioning (Day 5-6 - Depends on Phase 3)

Goal: Auto-create user pods on registration Blockers: Needs auth backend (Phase 3) to know which user Why Now: Registration flow needs to provision pods

Step	Task	Dependencies	Time	Priority
5.1	Create workspace pod template with CODI2	4.2	2h	🔴 CRITICAL
5.2	Build pod provisioning service	3.4, 5.1	4h	🔴 CRITICAL
5.3	Integrate with registration	3.5, 5.2	2h	🔴 CRITICAL
5.4	Store pod info in FDB session	3.3, 5.3	1h	🔴 CRITICAL
5.5	Test pod lifecycle	All above	2h	🔴 CRITICAL

Total: ~11 hours (1.5 days)

Integration:

// In auth-service register()
const user = await createUser(email, password);
const pod = await podProvisioningService.createUserPod(user.userId, user.tenantId);
const session = await sessionService.createSession(user.userId, pod);
return { user, token: generateJWT(user, session), sessionId: session.sessionId };

---

Phase 6: Full Integration & Deploy (Day 6-7 - Depends on ALL above)

Goal: Deploy complete V5 to GKE Blockers: Needs ALL previous phases complete Why Now: Everything is ready, deploy the full stack

Step	Task	Dependencies	Time	Priority
6.1	Build production frontend bundle	1.11	30min	🔴 CRITICAL
6.2	Create combined Dockerfile	1.11, 2.3	1h	🔴 CRITICAL
6.3	Build production image	6.2	30min	🔴 CRITICAL
6.4	Create Kubernetes deployments	All	2h	🔴 CRITICAL
6.5	Update ingress for /ide route	6.4	30min	🔴 CRITICAL
6.6	Deploy to GKE	6.5	1h	🔴 CRITICAL
6.7	Test complete user flow	6.6	3h	🔴 CRITICAL
6.8	Fix bugs	6.7	4h	🔴 CRITICAL

Total: ~13 hours (1.5 days)

Deployment:

# Build production image
docker build -f Dockerfile.production -t gcr.io/serene-voltage-464305-n2/t2-v5-ide:latest .
docker push gcr.io/serene-voltage-464305-n2/t2-v5-ide:latest

# Deploy to GKE
kubectl apply -f k8s/v5-deployment.yaml -n coditect-app
kubectl apply -f k8s/v5-ingress.yaml -n coditect-app

# Verify
curl -I https://coditect.ai/ide

---

Phase 7: Blue-Green Rollout (Day 7-10 - Gradual)

Goal: Migrate traffic from V4 to V5 Blockers: Needs Phase 6 (V5 deployed and tested) Why Now: Safe production rollout

Step	Task	Dependencies	Time	Priority
7.1	Configure canary (10% traffic)	6.6	30min	🔴 CRITICAL
7.2	Monitor 24 hours	7.1	-	🔴 CRITICAL
7.3	Increase to 50%	7.2	15min	🔴 CRITICAL
7.4	Monitor 48 hours	7.3	-	🔴 CRITICAL
7.5	Increase to 100%	7.4	15min	🔴 CRITICAL
7.6	Decommission V4	7.5	1h	🟡 HIGH

Total: 3 days (mostly monitoring)

---

📊 Corrected Timeline

Solo Developer (12-15 days)

Phase	Days	What
Phase 0	0.5	Pre-requisites
Phase 1	2.5	Frontend wrapper (FIRST!)
Phase 2	1.5	theia container (parallel with 3)
Phase 3	2.0	Auth backend (parallel with 2)
Phase 4	1.25	WebSocket sidecar
Phase 5	1.5	Pod provisioning
Phase 6	1.5	Deploy & test
Phase 7	3.0	Blue-green rollout
Total	13.25 days	+ 2 days buffer = 15 days

2-Person Team (8-10 days)

Person 1 (Frontend):

• Day 1-3: Phase 1 (frontend wrapper)
• Day 4-5: Phase 2 (theia container)
• Day 6-7: Phase 6 (integration)
• Day 8-10: Phase 7 (rollout)

Person 2 (Backend):

• Day 1: Phase 0 (pre-requisites)
• Day 2-4: Phase 3 (auth backend)
• Day 5: Phase 4 (WebSocket)
• Day 6: Phase 5 (pod provisioning)
• Day 7: Phase 6 (integration)
• Day 8-10: Phase 7 (rollout)

---

🔑 Key Insight

Frontend wrapper is NOT just UI - it's the foundation:

1. Users see wrapper first - Before theia even loads
2. Auth happens in wrapper - Login/Register pages are part of wrapper
3. Theme is set by wrapper - theia inherits theme from wrapper
4. layout contains everything - Header/Footer/SidePanel wrap theia

Without the wrapper complete, we can't deploy anything to production.

---

✅ Corrected Dependencies

Phase 0 (Infrastructure)
    ↓
Phase 1 (Frontend Wrapper) ← MUST BE FIRST
    ↓
Phase 2 (theia) ←┐
                 ├→ Phase 4 (WebSocket)
Phase 3 (Auth)   ←┘           ↓
    ↓                    Phase 5 (Pods)
    └────────────────────────────┐
                                 ↓
                         Phase 6 (Deploy)
                                 ↓
                         Phase 7 (Rollout)

---

Bottom Line: Build the wrapper first, then build what goes inside it (theia + backend).