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>
+        <DefaultView
+          threads={threads}
+          threadsLoading={threadsLoading}
+        />
       </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,180 +84,176 @@ 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">
-          <div className="flex items-center gap-3">
-            <Button
-              variant="ghost"
-              size="sm"
-              className="text-muted-foreground hover:bg-muted hover:text-foreground h-6 w-6 p-0"
-              onClick={() => router.push("/chat")}
-            >
-              <ArrowLeft className="h-3 w-3" />
-            </Button>
+    <div className="bg-background flex h-screen flex-col">
+      {/* Header */}
+      <div className="border-border bg-card border-b px-4 py-3">
+        <div className="flex items-center gap-3">
+          <Button
+            variant="ghost"
+            size="sm"
+            className="text-muted-foreground hover:bg-muted hover:text-foreground h-6 w-6 p-0"
+            onClick={() => router.push("/chat")}
+          >
+            <ArrowLeft className="h-3 w-3" />
+          </Button>
+          <div className="flex items-center gap-2">
+            <div className="h-2 w-2 rounded-full bg-green-500"></div>
+            <span className="text-muted-foreground font-mono text-sm">
+              All Threads
+            </span>
+          </div>
+          <div className="ml-auto flex items-center gap-4">
             <div className="flex items-center gap-2">
-              <div className="h-2 w-2 rounded-full bg-green-500"></div>
-              <span className="text-muted-foreground font-mono text-sm">
-                All Threads
+              <span className="text-muted-foreground text-xs">
+                {filteredThreads.length} threads
               </span>
             </div>
-            <div className="ml-auto flex items-center gap-4">
-              <div className="flex items-center gap-2">
-                <span className="text-muted-foreground text-xs">
-                  {filteredThreads.length} threads
-                </span>
-              </div>
-              <div className="flex items-center gap-2">
-                <InstallationSelector />
-                <ThemeToggle />
-              </div>
+            <div className="flex items-center gap-2">
+              <InstallationSelector />
+              <ThemeToggle />
             </div>
           </div>
         </div>
-
-        {/* Search and Filters */}
-        <div className="border-border bg-muted/50 border-b px-4 py-3 dark:bg-gray-950">
-          <div className="flex items-center gap-3">
-            <div className="relative max-w-md flex-1">
-              <Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform" />
-              <Input
-                placeholder="Search threads..."
-                value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
-                className="border-border bg-background text-foreground placeholder:text-muted-foreground pl-10 dark:bg-gray-900"
-              />
-            </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">
-                Filter:
-              </span>
-              {(
-                [
-                  "all",
-                  "running",
-                  "completed",
-                  "failed",
-                  "pending",
-                  "idle",
-                  "paused",
-                  "error",
-                ] as FilterStatus[]
-              ).map((status) => (
-                <Button
-                  key={status}
-                  variant={statusFilter === status ? "secondary" : "ghost"}
-                  size="sm"
-                  className={cn(
-                    "h-7 text-xs",
-                    statusFilter === status
-                      ? "bg-muted text-foreground dark:bg-gray-700"
-                      : "text-muted-foreground hover:bg-muted hover:text-foreground",
-                  )}
-                  onClick={() => setStatusFilter(status)}
-                >
-                  {status === "all"
-                    ? "All"
-                    : status.charAt(0).toUpperCase() + status.slice(1)}
-                  <Badge
-                    variant="secondary"
-                    className="bg-muted/70 text-muted-foreground ml-1 text-xs dark:bg-gray-800"
-                  >
-                    {statusCounts[status]}
-                  </Badge>
-                </Button>
-              ))}
-            </div>
-          </div>
-        </div>
-
-        {/* Content */}
-        <div className="flex-1 overflow-auto">
-          <div className="mx-auto max-w-6xl p-4">
-            {statusFilter === "all" ? (
-              <div className="space-y-6">
-                {Object.entries(groupedThreads).map(([status, threads]) => {
-                  if (threads.length === 0) return null;
-                  return (
-                    <div key={status}>
-                      <div className="mb-3 flex items-center gap-2">
-                        <h2 className="text-foreground text-base font-semibold capitalize">
-                          {status} Threads
-                        </h2>
-                        <Badge
-                          variant="secondary"
-                          className="bg-muted/70 text-muted-foreground text-xs dark:bg-gray-800"
-                        >
-                          {threads.length}
-                        </Badge>
-                      </div>
-                      <div className="grid gap-3 md:grid-cols-2 lg:grid-cols-3">
-                        {threads.map((thread) => (
-                          <ThreadCard
-                            key={thread.id}
-                            thread={thread}
-                            status={statusMap[thread.id]}
-                            statusLoading={statusLoading}
-                            taskPlan={taskPlanMap[thread.id]}
-                          />
-                        ))}
-                      </div>
-                    </div>
-                  );
-                })}
-              </div>
-            ) : (
-              <div className="grid gap-3 md:grid-cols-2 lg:grid-cols-3">
-                {filteredThreads.map((thread) => (
-                  <ThreadCard
-                    key={thread.id}
-                    thread={thread}
-                    status={statusMap[thread.id]}
-                    statusLoading={statusLoading}
-                    taskPlan={taskPlanMap[thread.id]}
-                  />
-                ))}
-              </div>
-            )}
-
-            {filteredThreads.length === 0 &&
-              !threadsLoading &&
-              !statusLoading && (
-                <div className="py-12 text-center">
-                  <div className="text-muted-foreground mb-2">
-                    No threads found
-                  </div>
-                  <div className="text-muted-foreground/70 text-xs">
-                    {!threads || threads.length === 0
-                      ? "No threads have been created yet"
-                      : searchQuery
-                        ? "Try adjusting your search query"
-                        : "No threads match the selected filter"}
-                  </div>
-                </div>
-              )}
-
-            {(threadsLoading || statusLoading) &&
-              (!threads || threads.length === 0) && (
-                <div>
-                  <div className="mb-3 flex items-center gap-2">
-                    <h2 className="text-foreground text-base font-semibold capitalize">
-                      Loading threads...
-                    </h2>
-                  </div>
-                  <div className="grid gap-3 md:grid-cols-2 lg:grid-cols-3">
-                    {Array.from({ length: 9 }).map((_, index) => (
-                      <ThreadCardLoading key={`all-threads-loading-${index}`} />
-                    ))}
-                  </div>
-                </div>
-              )}
-          </div>
-        </div>
       </div>
-    </GitHubAppProvider>
+
+      {/* Search and Filters */}
+      <div className="border-border bg-muted/50 border-b px-4 py-3 dark:bg-gray-950">
+        <div className="flex items-center gap-3">
+          <div className="relative max-w-md flex-1">
+            <Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform" />
+            <Input
+              placeholder="Search threads..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="border-border bg-background text-foreground placeholder:text-muted-foreground pl-10 dark:bg-gray-900"
+            />
+          </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">Filter:</span>
+            {(
+              [
+                "all",
+                "running",
+                "completed",
+                "failed",
+                "pending",
+                "idle",
+                "paused",
+                "error",
+              ] as FilterStatus[]
+            ).map((status) => (
+              <Button
+                key={status}
+                variant={statusFilter === status ? "secondary" : "ghost"}
+                size="sm"
+                className={cn(
+                  "h-7 text-xs",
+                  statusFilter === status
+                    ? "bg-muted text-foreground dark:bg-gray-700"
+                    : "text-muted-foreground hover:bg-muted hover:text-foreground",
+                )}
+                onClick={() => setStatusFilter(status)}
+              >
+                {status === "all"
+                  ? "All"
+                  : status.charAt(0).toUpperCase() + status.slice(1)}
+                <Badge
+                  variant="secondary"
+                  className="bg-muted/70 text-muted-foreground ml-1 text-xs dark:bg-gray-800"
+                >
+                  {statusCounts[status]}
+                </Badge>
+              </Button>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 overflow-auto">
+        <div className="mx-auto max-w-6xl p-4">
+          {statusFilter === "all" ? (
+            <div className="space-y-6">
+              {Object.entries(groupedThreads).map(([status, threads]) => {
+                if (threads.length === 0) return null;
+                return (
+                  <div key={status}>
+                    <div className="mb-3 flex items-center gap-2">
+                      <h2 className="text-foreground text-base font-semibold capitalize">
+                        {status} Threads
+                      </h2>
+                      <Badge
+                        variant="secondary"
+                        className="bg-muted/70 text-muted-foreground text-xs dark:bg-gray-800"
+                      >
+                        {threads.length}
+                      </Badge>
+                    </div>
+                    <div className="grid gap-3 md:grid-cols-2 lg:grid-cols-3">
+                      {threads.map((thread) => (
+                        <ThreadCard
+                          key={thread.id}
+                          thread={thread}
+                          status={statusMap[thread.id]}
+                          statusLoading={statusLoading}
+                          taskPlan={taskPlanMap[thread.id]}
+                        />
+                      ))}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          ) : (
+            <div className="grid gap-3 md:grid-cols-2 lg:grid-cols-3">
+              {filteredThreads.map((thread) => (
+                <ThreadCard
+                  key={thread.id}
+                  thread={thread}
+                  status={statusMap[thread.id]}
+                  statusLoading={statusLoading}
+                  taskPlan={taskPlanMap[thread.id]}
+                />
+              ))}
+            </div>
+          )}
+
+          {filteredThreads.length === 0 &&
+            !threadsLoading &&
+            !statusLoading && (
+              <div className="py-12 text-center">
+                <div className="text-muted-foreground mb-2">
+                  No threads found
+                </div>
+                <div className="text-muted-foreground/70 text-xs">
+                  {!threads || threads.length === 0
+                    ? "No threads have been created yet"
+                    : searchQuery
+                      ? "Try adjusting your search query"
+                      : "No threads match the selected filter"}
+                </div>
+              </div>
+            )}
+
+          {(threadsLoading || statusLoading) &&
+            (!threads || threads.length === 0) && (
+              <div>
+                <div className="mb-3 flex items-center gap-2">
+                  <h2 className="text-foreground text-base font-semibold capitalize">
+                    Loading threads...
+                  </h2>
+                </div>
+                <div className="grid gap-3 md:grid-cols-2 lg:grid-cols-3">
+                  {Array.from({ length: 9 }).map((_, index) => (
+                    <ThreadCardLoading key={`all-threads-loading-${index}`} />
+                  ))}
+                </div>
+              </div>
+            )}
+        </div>
+      </div>
+    </div>
   );
 }
 

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";