Simpified architecture

Author: D-K-P

claude-agent-github-wiki/.env.example

@@ -11,8 +11,8 @@ ANTHROPIC_API_KEY=your_anthropic_api_key
 # Get these from your Supabase project settings
 # https://app.supabase.com/project/_/settings/api
 SUPABASE_URL=your_supabase_project_url
-SUPABASE_PRIVATE_KEY=your_supabase_private_key  # For backend use only - more secure than anon key
+SUPABASE_PRIVATE_KEY=your_supabase_service_role_jwt  # Backend only - JWT token (starts with eyJ...) from "service_role" in API settings, NOT the database secret!
 
-# Public Supabase keys for frontend (if needed)
-NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
-NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
+# Public Supabase keys for frontend (safe to expose)
+NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url  # Same as SUPABASE_URL
+NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key  # Found under "anon public" in API settings

claude-agent-github-wiki/app/api/chat/route.ts

@@ -1,23 +1,20 @@
 "use client";
 
-import { useState, useRef, useEffect } from "react";
-import { useSearchParams } from "next/navigation";
+import { AiMessage } from "@/components/chat/ai-message";
+import { ToolCard } from "@/components/chat/tool-card";
+import { UserMessage } from "@/components/chat/user-message";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { ScrollArea } from "@/components/ui/scroll-area";
-import { Badge } from "@/components/ui/badge";
-import { Send, StopCircle, Github, MessageSquare } from "lucide-react";
-import { UserMessage } from "@/components/chat/user-message";
-import { AiMessage } from "@/components/chat/ai-message";
-import { ToolCard } from "@/components/chat/tool-card";
-import {
-  useRealtimeStream,
-  useTaskTrigger,
-  useRealtimeRun,
-} from "@trigger.dev/react-hooks";
+import { supabase } from "@/lib/supabase";
 import { agentStream } from "@/trigger/agent-stream";
 import type { SDKMessage } from "@anthropic-ai/claude-agent-sdk";
-import type { repoChatSession } from "@/trigger/repo-chat-session";
+import { RealtimeChannel } from "@supabase/supabase-js";
+import { useRealtimeStream } from "@trigger.dev/react-hooks";
+import { Github, MessageSquare, Send, StopCircle } from "lucide-react";
+import { useSearchParams } from "next/navigation";
+import { useEffect, useRef, useState } from "react";
 
 type Message = {
   id: string;
@@ -69,6 +66,7 @@ export default function ChatPage({ params }: { params: { runId: string } }) {
   const [isRunning, setIsRunning] = useState(false);
   const [error, setError] = useState<string>("");
   const scrollRef = useRef<HTMLDivElement>(null);
+  const channelRef = useRef<RealtimeChannel | null>(null);
 
   // Subscribe to realtime stream from Trigger.dev (main data pipeline)
   const { parts, error: streamError } = useRealtimeStream(
@@ -93,20 +91,51 @@ export default function ChatPage({ params }: { params: { runId: string } }) {
   // Combine with user messages
   const allMessages = [...messages, ...streamMessages];
 
-  // Log initial session details
+  // Initialize Supabase broadcast channel
   useEffect(() => {
-    console.log("🚀 Chat page loaded with:", {
-      chatRunId,
-      sessionId,
-      repoName: repoNameFromUrl,
-      hasAccessToken: !!accessToken,
+    if (!sessionId) {
+      console.log("[Chat] No sessionId, skipping channel setup");
+      return;
+    }
+
+    console.log("[Chat] Setting up Supabase channel for sessionId:", sessionId);
+
+    // Create channel for broadcasting questions
+    // NOTE: Clean up console.logs after debugging
+    const channel = supabase.channel(`session:${sessionId}`, {
+      config: {
+        broadcast: {
+          self: false,
+          ack: false, // Match backend configuration
+        },
+      },
+    });
+
+    // Subscribe to channel (no need to listen, just for sending)
+    channel.subscribe((status) => {
+      console.log(`[Chat] Channel subscription status: ${status}`, {
+        sessionId,
+        channelName: `session:${sessionId}`,
+      });
+
+      if (status === "SUBSCRIBED") {
+        console.log("[Chat] ✅ Successfully subscribed to channel");
+        channelRef.current = channel;
+      } else if (status === "CHANNEL_ERROR") {
+        console.error("[Chat] ❌ Channel subscription error");
+        setError("Failed to connect to chat channel");
+      }
     });
-  }, []);
 
-  // Note: Frontend doesn't need to subscribe to Supabase directly
-  // All communication happens through:
-  // - Questions: Frontend → /api/chat → Supabase → Backend task
-  // - Responses: Backend task → Trigger.dev Stream → useRealtimeStream hook
+    // Cleanup on unmount
+    return () => {
+      console.log("[Chat] Cleaning up channel subscription");
+      if (channelRef.current) {
+        supabase.removeChannel(channelRef.current);
+        channelRef.current = null;
+      }
+    };
+  }, [sessionId]);
 
   useEffect(() => {
     if (scrollRef.current) {
@@ -115,7 +144,15 @@ export default function ChatPage({ params }: { params: { runId: string } }) {
   }, [messages]);
 
   const handleSend = async () => {
-    if (!input.trim() || isRunning || !sessionId) return;
+    if (!input.trim() || isRunning || !sessionId || !channelRef.current) {
+      console.log("[Chat] Cannot send:", {
+        hasInput: !!input.trim(),
+        isRunning,
+        hasSessionId: !!sessionId,
+        hasChannel: !!channelRef.current,
+      });
+      return;
+    }
 
     const userMessage: Message = {
       id: Date.now().toString(),
@@ -130,27 +167,29 @@ export default function ChatPage({ params }: { params: { runId: string } }) {
     setIsRunning(true);
 
     try {
-      console.log("📤 Sending question to API:", { sessionId, question });
+      console.log("[Chat] 📤 Broadcasting question:", { sessionId, question });
 
-      // Send question via API (which uses Supabase)
-      const response = await fetch("/api/chat", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ sessionId, question }),
+      // Send question directly via Supabase broadcast
+      // NOTE: Clean up console.logs after debugging
+      const result = await channelRef.current.send({
+        type: "broadcast",
+        event: "question",
+        payload: {
+          question,
+          timestamp: new Date().toISOString(),
+          messageId: userMessage.id,
+        },
       });
 
-      if (!response.ok) {
-        const errorData = await response.json();
-        console.error("❌ Failed to send question:", errorData);
-        throw new Error(errorData.error || "Failed to send message");
+      if (result === "ok") {
+        console.log("[Chat] ✅ Question broadcast successfully");
+        // The response will come through the Trigger.dev stream
+      } else {
+        console.error("[Chat] ❌ Failed to broadcast question:", result);
+        throw new Error("Failed to send message");
       }
-
-      const { messageId } = await response.json();
-      console.log("✅ Question sent with messageId:", messageId);
-
-      // The response will come through the Trigger.dev stream
-      // No need to update state here
     } catch (err: any) {
+      console.error("[Chat] Error sending message:", err);
       setError(err.message || "Failed to send message");
       setIsRunning(false);
     }

claude-agent-github-wiki/app/chat/[runId]/page.tsx

@@ -0,0 +1,17 @@
+import { createClient } from "@supabase/supabase-js";
+
+// Simple browser-safe Supabase client for broadcasts
+// NOTE: Clean up console.logs after debugging
+export const supabase = createClient(
+  process.env.NEXT_PUBLIC_SUPABASE_URL!,
+  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+  {
+    realtime: {
+      params: {
+        eventsPerSecond: 10,
+      },
+    },
+  }
+);
+
+console.log("[supabase.ts] Client initialized with URL:", process.env.NEXT_PUBLIC_SUPABASE_URL);