First pass

Author: D-K-P

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

@@ -0,0 +1,8 @@
+# Trigger.dev Configuration
+# Get these from https://cloud.trigger.dev
+TRIGGER_PROJECT_REF=your_project_ref
+TRIGGER_SECRET_KEY=your_secret_key
+
+# Claude API Key
+# Get from https://console.anthropic.com
+ANTHROPIC_API_KEY=your_anthropic_api_key

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

@@ -0,0 +1,29 @@
+import { runs } from "@trigger.dev/sdk/v3";
+import { NextRequest, NextResponse } from "next/server";
+
+export async function POST(request: NextRequest) {
+  try {
+    const { runId } = await request.json();
+
+    // Validate input
+    if (!runId || typeof runId !== "string") {
+      return NextResponse.json(
+        { error: "Run ID is required" },
+        { status: 400 }
+      );
+    }
+
+    // Cancel the running task
+    // This will trigger the AbortController in the task, which propagates to the Claude agent
+    await runs.cancel(runId);
+
+    return NextResponse.json({ success: true });
+
+  } catch (error: any) {
+    console.error("Failed to abort task:", error);
+    return NextResponse.json(
+      { error: error.message || "Failed to abort task" },
+      { status: 500 }
+    );
+  }
+}

claude-agent-github-wiki/app/api/analyze-repo/route.ts

@@ -0,0 +1,44 @@
+import { tasks } from "@trigger.dev/sdk/v3";
+import { cloneRepo } from "@/trigger/clone-repo";
+import { NextRequest, NextResponse } from "next/server";
+
+export async function POST(request: NextRequest) {
+  try {
+    const { githubUrl } = await request.json();
+
+    // Validate inputs
+    if (!githubUrl || typeof githubUrl !== "string") {
+      return NextResponse.json(
+        { error: "GitHub URL is required" },
+        { status: 400 }
+      );
+    }
+
+    // Basic GitHub URL validation
+    const githubUrlPattern = /^https?:\/\/(www\.)?github\.com\/[\w-]+\/[\w.-]+/;
+    if (!githubUrlPattern.test(githubUrl)) {
+      return NextResponse.json(
+        { error: "Invalid GitHub URL format" },
+        { status: 400 }
+      );
+    }
+
+    // Trigger the clone task
+    const handle = await tasks.trigger<typeof cloneRepo>(
+      "clone-repo",
+      { githubUrl }
+    );
+
+    // Return the run ID to track clone progress
+    return NextResponse.json({
+      cloneRunId: handle.id,
+    });
+
+  } catch (error: any) {
+    console.error("Failed to trigger clone-repo task:", error);
+    return NextResponse.json(
+      { error: error.message || "Failed to start cloning" },
+      { status: 500 }
+    );
+  }
+}

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

@@ -0,0 +1,60 @@
+import { tasks, runs } from "@trigger.dev/sdk/v3";
+import { chatWithRepo } from "@/trigger/chat-with-repo";
+import { cloneRepo } from "@/trigger/clone-repo";
+import { NextRequest, NextResponse } from "next/server";
+
+export async function POST(request: NextRequest) {
+  try {
+    const { cloneRunId, query } = await request.json();
+
+    // Validate inputs
+    if (!cloneRunId || typeof cloneRunId !== "string") {
+      return NextResponse.json(
+        { error: "Clone run ID is required" },
+        { status: 400 }
+      );
+    }
+
+    if (!query || typeof query !== "string") {
+      return NextResponse.json(
+        { error: "Query is required" },
+        { status: 400 }
+      );
+    }
+
+    // Fetch the clone task result to get tempDir
+    const cloneRun = await runs.retrieve<typeof cloneRepo>(cloneRunId);
+
+    if (!cloneRun.output) {
+      return NextResponse.json(
+        { error: "Clone task has not completed yet or failed" },
+        { status: 400 }
+      );
+    }
+
+    const { tempDir, repoName } = cloneRun.output;
+
+    // Trigger the chat task
+    const handle = await tasks.trigger<typeof chatWithRepo>(
+      "chat-with-repo",
+      { tempDir, query, repoName }
+    );
+
+    // Generate public access token for stream
+    const publicAccessToken = await handle.publicAccessToken();
+
+    // Return the chat run ID and access token
+    return NextResponse.json({
+      chatRunId: handle.id,
+      accessToken: publicAccessToken,
+      repoName,
+    });
+
+  } catch (error: any) {
+    console.error("Failed to trigger chat task:", error);
+    return NextResponse.json(
+      { error: error.message || "Failed to start chat" },
+      { status: 500 }
+    );
+  }
+}

claude-agent-github-wiki/app/api/runs/[runId]/route.ts

@@ -0,0 +1,34 @@
+import { runs } from "@trigger.dev/sdk/v3";
+import { NextRequest, NextResponse } from "next/server";
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: { runId: string } }
+) {
+  try {
+    const { runId } = params;
+
+    if (!runId || typeof runId !== "string") {
+      return NextResponse.json(
+        { error: "Run ID is required" },
+        { status: 400 }
+      );
+    }
+
+    // Fetch the run status and output
+    const run = await runs.retrieve(runId);
+
+    return NextResponse.json({
+      status: run.status,
+      output: run.output,
+      error: run.error,
+    });
+
+  } catch (error: any) {
+    console.error("Failed to fetch run status:", error);
+    return NextResponse.json(
+      { error: error.message || "Failed to fetch run status" },
+      { status: 500 }
+    );
+  }
+}

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

@@ -10,6 +10,9 @@ 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 } from "@trigger.dev/react-hooks";
+import { agentStream } from "@/trigger/chat-with-repo";
+import type { SDKMessage } from "@anthropic-ai/claude-agent-sdk";
 
 type Message = {
   id: string;
@@ -21,6 +24,31 @@ type Message = {
   timestamp: Date;
 };
 
+function transformSDKMessage(sdkMsg: SDKMessage, index: number): Message | null {
+  if (sdkMsg.type === 'assistant') {
+    for (const block of sdkMsg.message.content) {
+      if (block.type === 'text') {
+        return {
+          id: `ai-${index}`,
+          type: 'ai',
+          content: block.text,
+          timestamp: new Date(),
+        };
+      } else if (block.type === 'tool_use') {
+        return {
+          id: `tool-${index}`,
+          type: 'tool',
+          content: '',
+          toolName: block.name,
+          toolInput: block.input,
+          timestamp: new Date(),
+        };
+      }
+    }
+  }
+  return null;
+}
+
 const mockMessages: Message[] = [
   {
     id: "1",
@@ -91,46 +119,80 @@ The codebase shows extensive server-side rendering capabilities and a robust bui
   },
 ];
 
-export default function ChatPage() {
-  const searchParams = useSearchParams();
-  const repo = searchParams.get("repo") || "";
-  const [messages, setMessages] = useState<Message[]>(mockMessages);
+export default function ChatPage({ params }: { params: { runId: string } }) {
+  const cloneRunId = params.runId;
+  const [messages, setMessages] = useState<Message[]>([]);
   const [input, setInput] = useState("");
   const [isRunning, setIsRunning] = useState(false);
+  const [repoName, setRepoName] = useState<string>("");
+  const [error, setError] = useState<string>("");
+  const [chatRunId, setChatRunId] = useState<string | null>(null);
+  const [accessToken, setAccessToken] = useState<string | null>(null);
   const scrollRef = useRef<HTMLDivElement>(null);
 
-  const repoName = repo.split("/").slice(-2).join("/").replace(".git", "");
+  // Subscribe to realtime stream
+  const { parts, error: streamError } = useRealtimeStream(
+    agentStream,
+    chatRunId ?? '',
+    {
+      accessToken: accessToken ?? undefined,
+      enabled: !!chatRunId && !!accessToken,
+      timeoutInSeconds: 600,
+      throttleInMs: 50,
+    }
+  );
+
+  // Transform stream parts directly - NO useEffect
+  const streamMessages = parts
+    .map((msg, idx) => transformSDKMessage(msg, idx))
+    .filter((msg): msg is Message => msg !== null);
+
+  // Combine with user messages
+  const allMessages = [...messages, ...streamMessages];
 
   useEffect(() => {
     if (scrollRef.current) {
       scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
     }
   }, [messages]);
 
-  const handleSend = () => {
+  const handleSend = async () => {
     if (!input.trim() || isRunning) return;
 
-    const newMessage: Message = {
+    const userMessage: Message = {
       id: Date.now().toString(),
       type: "user",
       content: input,
       timestamp: new Date(),
     };
 
-    setMessages((prev) => [...prev, newMessage]);
+    setMessages((prev) => [...prev, userMessage]);
+    const query = input;
     setInput("");
     setIsRunning(true);
 
-    setTimeout(() => {
-      const aiResponse: Message = {
-        id: (Date.now() + 1).toString(),
-        type: "ai",
-        content: "This is a demo. In a real implementation, the AI would analyze the repository and provide insights based on the codebase.",
-        timestamp: new Date(),
-      };
-      setMessages((prev) => [...prev, aiResponse]);
+    try {
+      const response = await fetch("/api/chat", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ cloneRunId, query }),
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.error || "Failed to send message");
+      }
+
+      const { chatRunId, accessToken, repoName: repo } = await response.json();
+      if (repo && !repoName) setRepoName(repo);
+
+      // Store for streaming
+      setChatRunId(chatRunId);
+      setAccessToken(accessToken);
+    } catch (err: any) {
+      setError(err.message || "Failed to send message");
       setIsRunning(false);
-    }, 2000);
+    }
   };
 
   const handleAbort = () => {
@@ -143,30 +205,23 @@ export default function ChatPage() {
         <Github className="w-5 h-5" />
         <div className="flex items-center gap-2 flex-1">
           <span className="font-semibold">{repoName || "Repository"}</span>
-          {repo && (
-            <Badge variant="secondary" className="font-normal">
-              <a
-                href={repo}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="hover:underline"
-              >
-                {repo}
-              </a>
+          {cloneRunId && (
+            <Badge variant="secondary" className="font-normal text-xs">
+              Clone ID: {cloneRunId.substring(0, 8)}...
             </Badge>
           )}
         </div>
       </header>
 
       <ScrollArea className="flex-1 px-6" ref={scrollRef}>
         <div className="max-w-4xl mx-auto py-6 space-y-6">
-          {messages.length === 0 ? (
+          {allMessages.length === 0 ? (
             <div className="text-center text-muted-foreground py-12">
               <MessageSquare className="w-12 h-12 mx-auto mb-4 opacity-50" />
               <p className="text-lg">Ask a question about this repository</p>
             </div>
           ) : (
-            messages.map((message) => {
+            allMessages.map((message) => {
               if (message.type === "user") {
                 return <UserMessage key={message.id} content={message.content} />;
               } else if (message.type === "ai") {