fix: converts to Show, adds stale-fetch guard and onboarding redirect

Author: wgordon17

src/app/components/onboarding/OnboardingWizard.tsx

@@ -41,6 +41,10 @@ export default function OnboardingWizard() {
   }
 
   onMount(() => {
+    if (config.onboardingComplete) {
+      window.location.replace("/dashboard");
+      return;
+    }
     void loadOrgs();
   });
 

src/app/components/onboarding/RepoSelector.tsx

@@ -31,6 +31,7 @@ export default function RepoSelector(props: RepoSelectorProps) {
   const [filter, setFilter] = createSignal("");
   const [orgStates, setOrgStates] = createSignal<OrgRepoState[]>([]);
   const [loadedCount, setLoadedCount] = createSignal(0);
+  let effectVersion = 0;
 
   // Initialize org states and fetch repos on mount / when selectedOrgs change
   createEffect(() => {
@@ -40,6 +41,9 @@ export default function RepoSelector(props: RepoSelectorProps) {
     // it happens to work today (before any await) but would silently break
     // if the check were moved after an await.
     const preloadedEntries = props.orgEntries;
+    // Version counter: if selectedOrgs changes while fetches are in-flight,
+    // stale callbacks check this and bail out instead of writing to state.
+    const version = ++effectVersion;
     if (orgs.length === 0) {
       setOrgStates([]);
       setLoadedCount(0);
@@ -86,6 +90,8 @@ export default function RepoSelector(props: RepoSelectorProps) {
         }
       }
 
+      if (version !== effectVersion) return;
+
       const typeMap = new Map<string, "org" | "user">(
         entries.map((e) => [e.login, e.type])
       );
@@ -95,12 +101,14 @@ export default function RepoSelector(props: RepoSelectorProps) {
         const type = typeMap.get(org) ?? "org";
         try {
           const repos = await fetchRepos(client, org, type);
+          if (version !== effectVersion) return;
           setOrgStates((prev) =>
             prev.map((s) =>
               s.org === org ? { ...s, type, repos, loading: false } : s
             )
           );
         } catch (err) {
+          if (version !== effectVersion) return;
           const message =
             err instanceof Error ? err.message : "Failed to load repositories";
           setOrgStates((prev) =>
@@ -111,7 +119,9 @@ export default function RepoSelector(props: RepoSelectorProps) {
             )
           );
         } finally {
-          setLoadedCount((c) => c + 1);
+          if (version === effectVersion) {
+            setLoadedCount((c) => c + 1);
+          }
         }
       });
 

src/app/pages/LoginPage.tsx

@@ -20,6 +20,7 @@ export default function LoginPage() {
           </div>
 
           <button
+            type="button"
             onClick={handleLogin}
             class="w-full flex items-center justify-center gap-3 px-4 py-2.5 bg-gray-900 dark:bg-gray-700 text-white rounded-lg font-medium hover:bg-gray-700 dark:hover:bg-gray-600 transition-colors focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2"
           >

src/app/pages/OAuthCallback.tsx

@@ -1,4 +1,4 @@
-import { createSignal, onMount } from "solid-js";
+import { createSignal, onMount, Show } from "solid-js";
 import { useNavigate } from "@solidjs/router";
 import { setAuth, validateToken, clearAuth } from "../stores/auth";
 import { OAUTH_STATE_KEY, OAUTH_RETURN_TO_KEY } from "../lib/oauth";
@@ -77,7 +77,37 @@ export default function OAuthCallback() {
   return (
     <div class="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900">
       <div class="max-w-sm w-full mx-4 text-center">
-        {error() ? (
+        <Show
+          when={error()}
+          fallback={
+            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-8 flex flex-col items-center gap-4">
+              <svg
+                class="animate-spin h-8 w-8 text-gray-500"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                aria-label="Loading"
+              >
+                <circle
+                  class="opacity-25"
+                  cx="12"
+                  cy="12"
+                  r="10"
+                  stroke="currentColor"
+                  stroke-width="4"
+                />
+                <path
+                  class="opacity-75"
+                  fill="currentColor"
+                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+                />
+              </svg>
+              <p class="text-gray-600 dark:text-gray-400">
+                Completing sign in...
+              </p>
+            </div>
+          }
+        >
           <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-8 flex flex-col items-center gap-4">
             <p class="text-red-600 dark:text-red-400 font-medium">{error()}</p>
             <a
@@ -87,34 +117,7 @@ export default function OAuthCallback() {
               Return to sign in
             </a>
           </div>
-        ) : (
-          <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-8 flex flex-col items-center gap-4">
-            <svg
-              class="animate-spin h-8 w-8 text-gray-500"
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-              aria-label="Loading"
-            >
-              <circle
-                class="opacity-25"
-                cx="12"
-                cy="12"
-                r="10"
-                stroke="currentColor"
-                stroke-width="4"
-              />
-              <path
-                class="opacity-75"
-                fill="currentColor"
-                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
-              />
-            </svg>
-            <p class="text-gray-600 dark:text-gray-400">
-              Completing sign in...
-            </p>
-          </div>
-        )}
+        </Show>
       </div>
     </div>
   );