gittuf · kazuhidelee · Jul 21, 2026 · Jul 21, 2026 · Jul 21, 2026 · Jul 21, 2026
diff --git a/frontend/AGENT.md b/frontend/AGENT.md
@@ -174,7 +174,7 @@ Important note:
 
 - Repository interaction is abstracted behind `lib/repository-handler.ts`.
 - Demo/mock behavior is provided through:
-  - `lib/mock-api.ts`
+  - `lib/api.ts`
   - `lib/demo-visualizer-fixture.ts`
 - Repository connection loading/error handling is currently local-state driven:
   - async handlers set inline `isLoading` / `error` state in `use-repository-session.ts`

diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx
@@ -19,7 +19,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body>{children}</body>
+      <body suppressHydrationWarning>{children}</body>
     </html>
   );
 }
diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
@@ -1,15 +1,19 @@
 "use client"
 
+import Image from "next/image"
 import RepositorySelector from "@/screens/repository/repository-selector"
 import VisualizerWorkspace from "@/screens/visualizer/visualizer-workspace"
 
+import spinnerIcon from "@/assets/spinner.png"
 import Header from "@/components/app/header"
 import { useRepositorySession } from "@/hooks/use-repository-session"
 
 export default function Home() {
   const {
+    isBootstrapping,
     isLoading,
     error,
+    pendingRepository,
     currentRepository,
     currentRepositoryData,
     showRepositorySelector,
@@ -19,7 +23,7 @@ export default function Home() {
     handleRepositoryRefresh,
   } = useRepositorySession()
 
-  const isWorkspaceView = Boolean(currentRepository && !showRepositorySelector)
+  const isWorkspaceView = isBootstrapping || Boolean(currentRepository && !showRepositorySelector)
 
   return (
     <main className={isWorkspaceView ? "flex h-screen flex-col overflow-hidden bg-white" : "min-h-screen bg-white"}>
@@ -31,13 +35,19 @@ export default function Home() {
 
       <div className={showRepositorySelector ? "mx-auto max-w-7xl" : "min-h-0 flex-1 w-full overflow-hidden"}>
         <div className={showRepositorySelector ? "px-4 py-6 md:px-8 md:py-8" : "h-full overflow-hidden"}>
-          {showRepositorySelector && (
+          {isBootstrapping ? (
+            <div className="flex h-full min-h-0 w-full items-center justify-center bg-[linear-gradient(to_right,rgba(4,8,14,0.06)_1px,transparent_1px),linear-gradient(to_bottom,rgba(4,8,14,0.06)_1px,transparent_1px)] bg-[size:24px_24px]">
+              <Image src={spinnerIcon} alt="" className="h-10 w-10 animate-spin" draggable={false} />
+            </div>
+          ) : null}
+
+          {!isBootstrapping && showRepositorySelector && (
             <RepositorySelector
               onRepositorySelect={handleRepositorySelect}
               onTryDemo={handleTryDemo}
               isLoading={isLoading}
               error={error}
-              currentRepository={currentRepository}
+              currentRepository={pendingRepository ?? currentRepository}
             />
           )}
 

diff --git a/frontend/archive/components/common/collapsible-card.tsx b/frontend/archive/components/common/collapsible-card.tsx
diff --git a/frontend/archive/components/common/enhanced-view-mode-toggle.tsx b/frontend/archive/components/common/enhanced-view-mode-toggle.tsx
diff --git a/frontend/archive/components/common/quick-start-guide.tsx b/frontend/archive/components/common/quick-start-guide.tsx