From 95c23db4fc0aed53df811e2eb127c544ab3c0aa2 Mon Sep 17 00:00:00 2001
From: -Puter <22245429+puterhimself@users.noreply.github.com>
Date: Sat, 1 Aug 2026 20:18:09 +0530
Subject: [PATCH] feat(web): debounced github repo search and connection
 settings

Search hook calls gitConnections:searchGithubRepositories with the
stored encrypted credential (token never reaches the browser).
Connection settings popover shows granted scopes and drives
reauthorization with the expanded scope set.
---
 .../projects/github-connection-settings.tsx   | 194 ++++++++++++++++++
 .../components/projects/provider-chips.tsx    |  29 ++-
 apps/web/src/hooks/use-github-repo-search.ts  |  99 +++++++++
 3 files changed, 312 insertions(+), 10 deletions(-)
 create mode 100644 apps/web/src/components/projects/github-connection-settings.tsx
 create mode 100644 apps/web/src/hooks/use-github-repo-search.ts

diff --git a/apps/web/src/components/projects/github-connection-settings.tsx b/apps/web/src/components/projects/github-connection-settings.tsx
new file mode 100644
index 0000000..3fb32d7
--- /dev/null
+++ b/apps/web/src/components/projects/github-connection-settings.tsx
@@ -0,0 +1,194 @@
+import { authClient } from "@code/auth/web";
+import { Button } from "@code/ui/components/button";
+import {
+  LoaderCircle,
+  RefreshCw,
+  ShieldCheck,
+  X,
+} from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+
+/** Expanded scope set for repository + organization visibility. */
+const GITHUB_EXPANDED_SCOPES = [
+  "repo",
+  "read:org",
+  "read:user",
+  "user:email",
+] as const;
+
+interface GithubConnectionSettingsProps {
+  readonly connectionId: string;
+  readonly externalUsername: string | undefined;
+  readonly grantedScopesJson: string | undefined;
+}
+
+export const GithubConnectionSettings = ({
+  connectionId,
+  externalUsername,
+  grantedScopesJson,
+}: GithubConnectionSettingsProps) => {
+  const [open, setOpen] = useState(false);
+  const [reauthorizing, setReauthorizing] = useState(false);
+  const popoverRef = useRef<HTMLDivElement>(null);
+
+  // Close on outside click.
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        popoverRef.current &&
+        !popoverRef.current.contains(event.target as Node)
+      ) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [open]);
+
+  // Parse granted scopes from stored JSON.
+  const grantedScopes: readonly string[] = (() => {
+    if (!grantedScopesJson) {
+      return [];
+    }
+    try {
+      const parsed = JSON.parse(grantedScopesJson) as unknown;
+      if (Array.isArray(parsed)) {
+        return parsed.filter((s): s is string => typeof s === "string");
+      }
+      return [];
+    } catch {
+      return [];
+    }
+  })();
+
+  const missingScopes = GITHUB_EXPANDED_SCOPES.filter(
+    (scope) => !grantedScopes.includes(scope)
+  );
+
+  const handleReauthorize = async () => {
+    setReauthorizing(true);
+    try {
+      await authClient.linkSocial({
+        callbackURL: `${window.location.origin}/projects?resume=github`,
+        provider: "github",
+        // Pass the full desired scope set so GitHub grants everything.
+        scopes: [...GITHUB_EXPANDED_SCOPES],
+      });
+    } catch {
+      setReauthorizing(false);
+    }
+  };
+
+  // Silence unused-vars: connectionId identifies which row is being managed.
+  void connectionId;
+
+  return (
+    <div className="relative" ref={popoverRef}>
+      <Button
+        aria-label="GitHub connection settings"
+        aria-haspopup="dialog"
+        aria-expanded={open}
+        className="h-8 w-8 gap-1 rounded border-[#d7d3c7] bg-[#fffefa] px-0 text-[#747168] hover:bg-[#f5f3eb]"
+        disabled={reauthorizing}
+        onClick={() => setOpen((value) => !value)}
+        size="sm"
+        type="button"
+        variant="outline"
+      >
+        <RefreshCw className="size-3.5" />
+      </Button>
+      {open ? (
+        <div
+          aria-modal="false"
+          className="absolute top-9 right-0 z-50 w-72 rounded-lg border border-[#d7d3c7] bg-[#fffefa] p-4 shadow-xl"
+          role="dialog"
+        >
+          <div className="flex items-start justify-between gap-2">
+            <div className="flex items-center gap-1.5">
+              <ShieldCheck className="size-4 text-emerald-500" />
+              <h4 className="text-sm font-semibold text-[#20201d]">
+                GitHub Access
+              </h4>
+            </div>
+            <button
+              aria-label="Close settings"
+              className="text-[#858277] hover:text-[#20201d]"
+              onClick={() => setOpen(false)}
+              type="button"
+            >
+              <X className="size-3.5" />
+            </button>
+          </div>
+
+          {externalUsername ? (
+            <p className="mt-2 text-xs text-[#68665e]">
+              Connected as{" "}
+              <span className="font-medium text-[#20201d]">
+                {externalUsername}
+              </span>
+            </p>
+          ) : null}
+
+          {grantedScopes.length > 0 ? (
+            <div className="mt-3">
+              <p className="text-[11px] font-medium uppercase tracking-wide text-[#858277]">
+                Granted scopes
+              </p>
+              <div className="mt-1.5 flex flex-wrap gap-1">
+                {grantedScopes.map((scope) => (
+                  <span
+                    className="rounded bg-[#f5f3eb] px-1.5 py-0.5 text-[10px] font-medium text-[#68665e]"
+                    key={scope}
+                  >
+                    {scope}
+                  </span>
+                ))}
+              </div>
+            </div>
+          ) : (
+            <p className="mt-2 text-xs text-[#858277]">
+              Scope details will appear after reauthorization.
+            </p>
+          )}
+
+          <p className="mt-3 text-xs leading-5 text-[#68665e]">
+            Reauthorization refreshes GitHub scopes and re-syncs your
+            accessible repositories, including organization repos GitHub
+            returns for your account.
+          </p>
+
+          <p className="mt-2 text-[11px] leading-4 text-[#858277]">
+            Organization repository visibility depends on your GitHub org
+            membership and SSO authorization — not all org repos may be
+            accessible via OAuth alone.
+          </p>
+
+          <Button
+            className="mt-3 w-full gap-1.5 rounded border-[#55564e] bg-[#20201d] text-[11px] text-[#fffefa] hover:bg-[#3a3933]"
+            disabled={reauthorizing}
+            onClick={() => void handleReauthorize()}
+            size="sm"
+            type="button"
+            variant="outline"
+          >
+            {reauthorizing ? (
+              <LoaderCircle className="size-3 animate-spin" />
+            ) : (
+              <RefreshCw className="size-3" />
+            )}
+            {reauthorizing ? "Redirecting…" : "Reauthorize access"}
+          </Button>
+
+          {missingScopes.length > 0 ? (
+            <p className="mt-2 text-[10px] leading-4 text-amber-600">
+              Not yet granted: {missingScopes.join(", ")}
+            </p>
+          ) : null}
+        </div>
+      ) : null}
+    </div>
+  );
+};
diff --git a/apps/web/src/components/projects/provider-chips.tsx b/apps/web/src/components/projects/provider-chips.tsx
index bf17774..63acbe5 100644
--- a/apps/web/src/components/projects/provider-chips.tsx
+++ b/apps/web/src/components/projects/provider-chips.tsx
@@ -9,10 +9,12 @@ import {
 } from "lucide-react";
 import { useState } from "react";
 
+import { GithubConnectionSettings } from "./github-connection-settings";
 import { PuterConnectForm } from "./puter-connect-form";
 
 export interface GitProviderAccountOption {
   readonly externalUsername: string;
+  readonly grantedScopesJson?: string;
   readonly id: string;
   readonly provider: "github" | "gitea";
   readonly serverUrl: string;
@@ -125,16 +127,23 @@ export const ProviderChips = ({ accounts }: ProviderChipsProps) => {
 
   const accountsLoading = accounts === undefined;
 
-  return (
-    <div className="space-y-3">
-      <div className="flex flex-wrap gap-2">
-        <ProviderChip
-          account={githubAccount}
-          icon={GitBranch}
-          label="GitHub"
-          loading={accountsLoading || pendingProvider === "github"}
-          onClick={linkGithub}
-        />
+      <div className="flex flex-wrap items-center gap-2">
+        <div className="flex items-center gap-1">
+          <ProviderChip
+            account={githubAccount}
+            icon={GitBranch}
+            label="GitHub"
+            loading={accountsLoading || pendingProvider === "github"}
+            onClick={linkGithub}
+          />
+          {githubConnected ? (
+            <GithubConnectionSettings
+              connectionId={githubAccount.id}
+              externalUsername={githubAccount.externalUsername}
+              grantedScopesJson={githubAccount.grantedScopesJson}
+            />
+          ) : null}
+        </div>
         <ProviderChip
           account={puterAccount}
           icon={Server}
diff --git a/apps/web/src/hooks/use-github-repo-search.ts b/apps/web/src/hooks/use-github-repo-search.ts
new file mode 100644
index 0000000..b9078e7
--- /dev/null
+++ b/apps/web/src/hooks/use-github-repo-search.ts
@@ -0,0 +1,99 @@
+import { api } from "@code/backend/convex/_generated/api";
+import type {
+  GithubRepositorySearchResult,
+} from "@code/backend/convex/gitConnections";
+import { useAction } from "convex/react";
+import { useEffect, useRef, useState } from "react";
+
+export type { GithubRepositorySearchResult };
+
+export type GithubSearchState =
+  | { kind: "idle" }
+  | { kind: "loading" }
+  | { kind: "results"; results: readonly GithubRepositorySearchResult[] }
+  | { kind: "error"; message: string }
+  | { kind: "reauth" };
+
+const MIN_QUERY_LENGTH = 2;
+const DEBOUNCE_MS = 350;
+
+/**
+ * Debounced live GitHub repository search. Calls the
+ * `gitConnections:searchGithubRepositories` action with the user's stored
+ * encrypted credential (the token never reaches the browser). Returns a
+ * stale-safe, cancellable search state.
+ *
+ * Only searches when the GitHub provider filter is active (or "all") and a
+ * query is at least `MIN_QUERY_LENGTH` characters.
+ */
+export const useGithubRepoSearch = ({
+  connectionId,
+  enabled,
+  query,
+}: {
+  readonly connectionId: string | undefined;
+  readonly enabled: boolean;
+  readonly query: string;
+}): GithubSearchState => {
+  const searchAction = useAction(api.gitConnections.searchGithubRepositories);
+  const [state, setState] = useState<GithubSearchState>({ kind: "idle" });
+  // Track the latest request so stale responses are discarded.
+  const requestIdRef = useRef(0);
+
+  useEffect(() => {
+    const trimmed = query.trim();
+
+    // If search is disabled or query too short, reset to idle.
+    if (!enabled || trimmed.length < MIN_QUERY_LENGTH) {
+      setState({ kind: "idle" });
+      return;
+    }
+    if (!connectionId) {
+      setState({ kind: "idle" });
+      return;
+    }
+
+    const currentRequestId = requestIdRef.current + 1;
+    requestIdRef.current = currentRequestId;
+    setState({ kind: "loading" });
+
+    const timer = setTimeout(() => {
+      void (async () => {
+        try {
+          const results = await searchAction({
+            connectionId,
+            query: trimmed,
+          });
+          // Discard if a newer request superseded this one.
+          if (requestIdRef.current !== currentRequestId) {
+            return;
+          }
+          setState({ kind: "results", results });
+        } catch (caughtError) {
+          if (requestIdRef.current !== currentRequestId) {
+            return;
+          }
+          const message =
+            caughtError instanceof Error
+              ? caughtError.message
+              : "GitHub search failed";
+          if (
+            message.toLowerCase().includes("reauth") ||
+            message.toLowerCase().includes("rejected") ||
+            message.toLowerCase().includes("reconnect")
+          ) {
+            setState({ kind: "reauth" });
+          } else {
+            setState({ kind: "error", message });
+          }
+        }
+      })();
+    }, DEBOUNCE_MS);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [connectionId, enabled, query, searchAction]);
+
+  return state;
+};