feat: filter threads by selected Github org (#502)

* init gh thread filter

* format from main merge and improve filter logic

* fix git diff from main merge format

* refactor: move GH provider to chat layout

* fix cosmetic git diff indentation

* suspense and client component

* update filter mech w metadata install name

* cr

* CR: fix single thread view w disableOrgFilter option

---------

Co-authored-by: Brace Sproul <braceasproul@gmail.com>

apps/web/src/app/(v2)/chat/[thread_id]/page.tsx

@@ -2,10 +2,10 @@
 
 import { ThreadView } from "@/components/v2/thread-view";
 import { ThreadViewLoading } from "@/components/v2/thread-view-loading";
-import { ThreadMetadata } from "@/components/v2/types";
 import { useThreadMetadata } from "@/hooks/useThreadMetadata";
 import { useThreadsSWR } from "@/hooks/useThreadsSWR";
 import { useStream } from "@langchain/langgraph-sdk/react";
+import { useGitHubAppProvider } from "@/providers/GitHubApp";
 import { MANAGER_GRAPH_ID } from "@open-swe/shared/constants";
 import { ManagerGraphState } from "@open-swe/shared/open-swe/manager/types";
 import { useRouter } from "next/navigation";
@@ -24,6 +24,7 @@ export default function ThreadPage({
 }) {
   const router = useRouter();
   const { thread_id } = use(params);
+  const { currentInstallation } = useGitHubAppProvider();
   const stream = useStream<ManagerGraphState>({
     apiUrl: process.env.NEXT_PUBLIC_API_URL ?? "",
     assistantId: MANAGER_GRAPH_ID,
@@ -34,6 +35,8 @@ export default function ThreadPage({
 
   const { threads, isLoading: threadsLoading } = useThreadsSWR({
     assistantId: MANAGER_GRAPH_ID,
+    currentInstallation,
+    disableOrgFiltering: true,
   });
 
   const threadsMetadata = useMemo(() => threadsToMetadata(threads), [threads]);

apps/web/src/app/(v2)/chat/layout.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import "../../globals.css";
-import React from "react";
+import React, { Suspense } from "react";
+import { GitHubAppProvider } from "@/providers/GitHubApp";
 
 export const metadata: Metadata = {
   title: "Open SWE - Chat",
@@ -17,5 +18,9 @@ export default function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  return children;
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <GitHubAppProvider>{children}</GitHubAppProvider>
+    </Suspense>
+  );
 }

apps/web/src/app/(v2)/chat/page.tsx

@@ -2,14 +2,16 @@
 
 import { DefaultView } from "@/components/v2/default-view";
 import { useThreadsSWR } from "@/hooks/useThreadsSWR";
-import { GitHubAppProvider } from "@/providers/GitHubApp";
+import { useGitHubAppProvider } from "@/providers/GitHubApp";
 import { Toaster } from "@/components/ui/sonner";
 import { Suspense } from "react";
 import { MANAGER_GRAPH_ID } from "@open-swe/shared/constants";
 
 export default function ChatPage() {
+  const { currentInstallation } = useGitHubAppProvider();
   const { threads, isLoading: threadsLoading } = useThreadsSWR({
     assistantId: MANAGER_GRAPH_ID,
+    currentInstallation,
   });
 
   if (!threads) {
@@ -20,12 +22,10 @@ export default function ChatPage() {
     <div className="bg-background h-screen">
       <Suspense>
         <Toaster />
-        <GitHubAppProvider>
         <DefaultView
           threads={threads}
           threadsLoading={threadsLoading}
         />
-        </GitHubAppProvider>
       </Suspense>
     </div>
   );

apps/web/src/app/(v2)/chat/threads/page.tsx

@@ -11,7 +11,7 @@ import { useThreadsSWR } from "@/hooks/useThreadsSWR";
 import { ThreadCard, ThreadCardLoading } from "@/components/v2/thread-card";
 import { ThemeToggle } from "@/components/theme-toggle";
 import { InstallationSelector } from "@/components/github/installation-selector";
-import { GitHubAppProvider } from "@/providers/GitHubApp";
+import { useGitHubAppProvider } from "@/providers/GitHubApp";
 import { MANAGER_GRAPH_ID } from "@open-swe/shared/constants";
 import { useThreadsStatus } from "@/hooks/useThreadsStatus";
 import { cn } from "@/lib/utils";
@@ -29,8 +29,10 @@ type FilterStatus =
 
 function AllThreadsPageContent() {
   const router = useRouter();
+  const { currentInstallation } = useGitHubAppProvider();
   const { threads, isLoading: threadsLoading } = useThreadsSWR({
     assistantId: MANAGER_GRAPH_ID,
+    currentInstallation,
   });
   const [searchQuery, setSearchQuery] = useState("");
   const [statusFilter, setStatusFilter] = useState<FilterStatus>("all");
@@ -82,7 +84,6 @@ function AllThreadsPageContent() {
   };
 
   return (
-    <GitHubAppProvider>
     <div className="bg-background flex h-screen flex-col">
       {/* Header */}
       <div className="border-border bg-card border-b px-4 py-3">
@@ -129,9 +130,7 @@ function AllThreadsPageContent() {
           </div>
           <div className="flex items-center gap-1">
             <Filter className="text-muted-foreground h-4 w-4" />
-              <span className="text-muted-foreground mr-2 text-xs">
+            <span className="text-muted-foreground mr-2 text-xs">Filter:</span>
-                Filter:
-              </span>
             {(
               [
                 "all",
@@ -255,7 +254,6 @@ function AllThreadsPageContent() {
         </div>
       </div>
     </div>
-    </GitHubAppProvider>
   );
 }
 

apps/web/src/hooks/useThreadsSWR.ts

@@ -6,6 +6,8 @@ import { ManagerGraphState } from "@open-swe/shared/open-swe/manager/types";
 import { PlannerGraphState } from "@open-swe/shared/open-swe/planner/types";
 import { ReviewerGraphState } from "@open-swe/shared/open-swe/reviewer/types";
 import { GraphState } from "@open-swe/shared/open-swe/types";
+import { useMemo } from "react";
+import type { Installation } from "./useGitHubInstallations";
 
 /**
  * Union type representing all possible graph states in the Open SWE system
@@ -21,6 +23,8 @@ interface UseThreadsSWROptions {
   refreshInterval?: number;
   revalidateOnFocus?: boolean;
   revalidateOnReconnect?: boolean;
+  currentInstallation?: Installation | null;
+  disableOrgFiltering?: boolean;
 }
 
 /**
@@ -39,6 +43,8 @@ export function useThreadsSWR<
     refreshInterval = THREAD_SWR_CONFIG.refreshInterval,
     revalidateOnFocus = THREAD_SWR_CONFIG.revalidateOnFocus,
     revalidateOnReconnect = THREAD_SWR_CONFIG.revalidateOnReconnect,
+    currentInstallation,
+    disableOrgFiltering,
   } = options;
 
   const apiUrl: string | undefined = process.env.NEXT_PUBLIC_API_URL ?? "";
@@ -76,11 +82,31 @@ export function useThreadsSWR<
     },
   );
 
+  const threads = useMemo(() => {
+    const allThreads = data ?? [];
+
+    if (disableOrgFiltering) {
+      return allThreads;
+    }
+
+    if (!currentInstallation) {
+      return [];
+    }
+
+    return allThreads.filter((thread) => {
+      const threadInstallationName = thread.metadata?.installation_name;
+      return (
+        typeof threadInstallationName === "string" &&
+        threadInstallationName === currentInstallation.accountName
+      );
+    });
+  }, [data, currentInstallation, disableOrgFiltering]);
+
   return {
-    threads: data ?? [],
+    threads,
     error,
     isLoading,
     isValidating,
-    mutate, // For manual revalidation
+    mutate,
   };
 }

apps/web/src/providers/GitHubApp.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useGitHubApp } from "@/hooks/useGitHubApp";
 import { createContext, useContext, ReactNode } from "react";