Multi-account GitHub auth + UI polish (model logos, markdown, scroll behavior) (#219)

* feat: display provider logos for favorite/recent models Show provider logo next to model name in favorites and recents Render provider logos in ModelControls, ModelMultiSelect, and ModelSelector lists Maintain zero-logo state for other sections to avoid clutter * feat: render user message as markdown instead of plain text Render agent mentions as markdown links in user text Apply inside list style for chat content to fix list rendering Rely on SimpleMarkdownRenderer for consistent rendering * fix(openchamber): adjust layout and overscroll behavior Enable overscroll-auto on overlay containers for smoother scrolling Move page content to full-width wrapper and preserve section borders Show AboutSettings inside its own bordered block when visible * feat: integrate GitHub auth status store and UI Introduce GitHubAuthStore to track connection status and polling Show GitHub avatar in header when connected Guard issue/pr dialogs behind GitHub auth status and show notices * feat: add GitHub multi-account support Add API and UI flow to activate a GitHub account Show and switch between multiple GitHub accounts in header Persist and normalize accounts list with current selection
2026-01-26 11:28:55 +02:00
parent 1de0ebd4fc
commit 74511abfda
24 changed files with 1106 additions and 180 deletions
@@ -153,6 +153,8 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
        const isSelected = providerId === provID && modelId === modID;
        const isFavorite = isFavoriteModel(provID, modID);

+        const showProviderLogo = keyPrefix === 'fav' || keyPrefix === 'recent';
+
        return (
            <div
                key={`${keyPrefix}-${provID}-${modID}`}
@@ -165,6 +167,9 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
                onMouseEnter={() => setSelectedIndex(flatIndex)}
            >
                <div className="flex items-center gap-1.5 flex-1 min-w-0">
+                    {showProviderLogo && (
+                        <ProviderLogo providerId={provID} className="h-3.5 w-3.5 flex-shrink-0" />
+                    )}
                    <span className="font-medium truncate">
                        {getModelDisplayName(model)}
                    </span>
@@ -2,6 +2,8 @@ import React from 'react';
 import { Button } from '@/components/ui/button';
 import { toast } from 'sonner';
 import { getRegisteredRuntimeAPIs } from '@/contexts/runtimeAPIRegistry';
+import { useGitHubAuthStore } from '@/stores/useGitHubAuthStore';
+import type { GitHubAuthStatus } from '@/lib/api/types';
 import { RiGithubFill } from '@remixicon/react';

 type GitHubUser = {
@@ -12,13 +14,6 @@ type GitHubUser = {
  email?: string;
 };

-type AuthStatusResponse = {
-  connected: boolean;
-  user?: GitHubUser | null;
-  scope?: string;
-  error?: string;
-};
-
 type DeviceFlowStartResponse = {
  deviceCode: string;
  userCode: string;
@@ -35,6 +30,11 @@ type DeviceFlowCompleteResponse =

 export const GitHubSettings: React.FC = () => {
  const runtimeGitHub = getRegisteredRuntimeAPIs()?.github;
+  const status = useGitHubAuthStore((state) => state.status);
+  const isLoading = useGitHubAuthStore((state) => state.isLoading);
+  const hasChecked = useGitHubAuthStore((state) => state.hasChecked);
+  const refreshStatus = useGitHubAuthStore((state) => state.refreshStatus);
+  const setStatus = useGitHubAuthStore((state) => state.setStatus);

  const openExternal = React.useCallback(async (url: string) => {
    if (typeof window === 'undefined') {
@@ -60,9 +60,7 @@ export const GitHubSettings: React.FC = () => {
    }
  }, []);

-  const [isLoading, setIsLoading] = React.useState(true);
  const [isBusy, setIsBusy] = React.useState(false);
-  const [status, setStatus] = React.useState<AuthStatusResponse | null>(null);
  const [flow, setFlow] = React.useState<DeviceFlowStartResponse | null>(null);
  const [pollIntervalMs, setPollIntervalMs] = React.useState<number | null>(null);
  const pollTimerRef = React.useRef<number | null>(null);
@@ -75,41 +73,20 @@ export const GitHubSettings: React.FC = () => {
    setPollIntervalMs(null);
  }, []);

-  const refreshStatus = React.useCallback(async () => {
-    if (runtimeGitHub) {
-      const payload = await runtimeGitHub.authStatus();
-      setStatus(payload as AuthStatusResponse);
-      return payload as AuthStatusResponse;
-    }
-
-    const response = await fetch('/api/github/auth/status', {
-      method: 'GET',
-      headers: { Accept: 'application/json' },
-    });
-    const payload = (await response.json().catch(() => null)) as AuthStatusResponse | null;
-    if (!response.ok || !payload) {
-      throw new Error(payload?.error || response.statusText || 'Failed to load GitHub status');
-    }
-    setStatus(payload);
-    return payload;
-  }, [runtimeGitHub]);
-
  React.useEffect(() => {
-    let mounted = true;
    (async () => {
      try {
-        await refreshStatus();
+        if (!hasChecked) {
+          await refreshStatus(runtimeGitHub);
+        }
      } catch (error) {
        console.warn('Failed to load GitHub auth status:', error);
-      } finally {
-        if (mounted) setIsLoading(false);
      }
    })();
    return () => {
-      mounted = false;
      stopPolling();
    };
-  }, [refreshStatus, stopPolling]);
+  }, [hasChecked, refreshStatus, runtimeGitHub, stopPolling]);

  const startConnect = React.useCallback(async () => {
    setIsBusy(true);
@@ -178,13 +155,13 @@ export const GitHubSettings: React.FC = () => {
      void (async () => {
        try {
          const result = await pollOnce(flow.deviceCode);
-          if (result.connected) {
-            toast.success('GitHub connected');
-            setFlow(null);
-            stopPolling();
-            await refreshStatus();
-            return;
-          }
+            if (result.connected) {
+              toast.success('GitHub connected');
+              setFlow(null);
+              stopPolling();
+              await refreshStatus(runtimeGitHub, { force: true });
+              return;
+            }

          if (result.status === 'slow_down') {
            setPollIntervalMs((prev) => (prev ? prev + 5000 : 5000));
@@ -207,7 +184,7 @@ export const GitHubSettings: React.FC = () => {
        pollTimerRef.current = null;
      }
    };
-  }, [flow, pollIntervalMs, pollOnce, refreshStatus, stopPolling]);
+  }, [flow, pollIntervalMs, pollOnce, refreshStatus, runtimeGitHub, stopPolling]);

  const disconnect = React.useCallback(async () => {
    setIsBusy(true);
@@ -226,14 +203,46 @@ export const GitHubSettings: React.FC = () => {
        }
      }
      toast.success('GitHub disconnected');
-      await refreshStatus();
+      await refreshStatus(runtimeGitHub, { force: true });
    } catch (error) {
      console.error('Failed to disconnect GitHub:', error);
      toast.error('Failed to disconnect GitHub');
    } finally {
      setIsBusy(false);
    }
-  }, [refreshStatus, stopPolling, runtimeGitHub]);
+  }, [refreshStatus, runtimeGitHub, stopPolling]);
+
+  const activateAccount = React.useCallback(async (accountId: string) => {
+    if (!accountId) return;
+    setIsBusy(true);
+    try {
+      const payload = runtimeGitHub
+        ? await runtimeGitHub.authActivate(accountId)
+        : await (async () => {
+            const response = await fetch('/api/github/auth/activate', {
+              method: 'POST',
+              headers: {
+                'Content-Type': 'application/json',
+                Accept: 'application/json',
+              },
+              body: JSON.stringify({ accountId }),
+            });
+            const body = (await response.json().catch(() => null)) as GitHubAuthStatus | { error?: string } | null;
+            if (!response.ok || !body) {
+              throw new Error((body as { error?: string } | null)?.error || response.statusText);
+            }
+            return body as GitHubAuthStatus;
+          })();
+
+      setStatus(payload);
+      toast.success('GitHub account switched');
+    } catch (error) {
+      console.error('Failed to switch GitHub account:', error);
+      toast.error('Failed to switch GitHub account');
+    } finally {
+      setIsBusy(false);
+    }
+  }, [runtimeGitHub, setStatus]);

  if (isLoading) {
    return null;
@@ -241,6 +250,7 @@ export const GitHubSettings: React.FC = () => {

  const connected = Boolean(status?.connected);
  const user = status?.user;
+  const accounts = status?.accounts ?? [];

  return (
    <div className="space-y-6">
@@ -296,6 +306,70 @@ export const GitHubSettings: React.FC = () => {
        </div>
      )}

+      {connected ? (
+        <div className="flex justify-end">
+          <Button variant="ghost" onClick={startConnect} disabled={isBusy}>
+            Add account
+          </Button>
+        </div>
+      ) : null}
+
+      {accounts.length > 1 ? (
+        <div className="space-y-2 rounded-lg border bg-background/50 p-3">
+          <div className="typography-ui-label text-foreground">Accounts</div>
+          <div className="space-y-2">
+            {accounts.map((account) => {
+              const accountUser = account.user;
+              const isCurrent = Boolean(account.current);
+              return (
+                <div
+                  key={account.id}
+                  className="flex items-center justify-between gap-3 rounded-md border border-border/40 bg-background/70 px-3 py-2"
+                >
+                  <div className="flex min-w-0 items-center gap-3">
+                    {accountUser?.avatarUrl ? (
+                      <img
+                        src={accountUser.avatarUrl}
+                        alt={accountUser.login ? `${accountUser.login} avatar` : 'GitHub avatar'}
+                        className="h-8 w-8 shrink-0 rounded-full border border-border/60 bg-muted object-cover"
+                        loading="lazy"
+                        referrerPolicy="no-referrer"
+                      />
+                    ) : (
+                      <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-border/60 bg-muted">
+                        <RiGithubFill className="h-4 w-4 text-muted-foreground" />
+                      </div>
+                    )}
+                    <div className="min-w-0">
+                      <div className="typography-ui-label text-foreground truncate">
+                        {accountUser?.name?.trim() || accountUser?.login || 'GitHub'}
+                      </div>
+                      {accountUser?.login ? (
+                        <div className="typography-micro text-muted-foreground truncate font-mono">
+                          {accountUser.login}
+                        </div>
+                      ) : null}
+                    </div>
+                  </div>
+                  {isCurrent ? (
+                    <span className="typography-micro text-primary">Active</span>
+                  ) : (
+                    <Button
+                      size="sm"
+                      variant="ghost"
+                      onClick={() => activateAccount(account.id)}
+                      disabled={isBusy}
+                    >
+                      Use
+                    </Button>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      ) : null}
+
      {flow ? (
        <div className="space-y-3 rounded-lg border bg-background/50 p-3">
          <div className="space-y-1">
@@ -28,20 +28,22 @@ export const OpenChamberPage: React.FC<OpenChamberPageProps> = ({ section }) =>
            <ScrollableOverlay
                keyboardAvoid
                outerClassName="h-full"
-                className="openchamber-page-body mx-auto max-w-3xl space-y-3 p-3 sm:space-y-6 sm:p-6"
+                className="w-full"
            >
-                <OpenChamberVisualSettings />
-                <div className="border-t border-border/40 pt-6">
-                    <DefaultsSettings />
-                </div>
-                <div className="border-t border-border/40 pt-6">
-                    <SessionRetentionSettings />
-                </div>
-                {showAbout && (
+                <div className="openchamber-page-body mx-auto max-w-3xl space-y-3 p-3 sm:space-y-6 sm:p-6">
+                    <OpenChamberVisualSettings />
                    <div className="border-t border-border/40 pt-6">
-                        <AboutSettings />
+                        <DefaultsSettings />
                    </div>
-                )}
+                    <div className="border-t border-border/40 pt-6">
+                        <SessionRetentionSettings />
+                    </div>
+                    {showAbout && (
+                        <div className="border-t border-border/40 pt-6">
+                            <AboutSettings />
+                        </div>
+                    )}
+                </div>
            </ScrollableOverlay>
        );
    }
@@ -70,9 +72,11 @@ export const OpenChamberPage: React.FC<OpenChamberPageProps> = ({ section }) =>
        <ScrollableOverlay
            keyboardAvoid
            outerClassName="h-full"
-            className="openchamber-page-body mx-auto max-w-3xl space-y-6 p-3 sm:p-6"
+            className="w-full"
        >
-            {renderSectionContent()}
+            <div className="openchamber-page-body mx-auto max-w-3xl space-y-6 p-3 sm:p-6">
+                {renderSectionContent()}
+            </div>
        </ScrollableOverlay>
    );
 };