From 7d07047036386eec53df1baa165f54fccb6e42b7 Mon Sep 17 00:00:00 2001
From: Mamerto Fabian Jr <mfabianjr@gmail.com>
Date: Wed, 15 Jan 2025 19:55:06 +0800
Subject: [PATCH 01/75] set `default_expires_at` to none by default, refactor
 github settings

---
 src/lib/components/GitHubSettings.svelte      | 101 +----------------
 src/lib/components/github/NewUserGuide.svelte | 105 ++++++++++++++++++
 src/popup/App.svelte                          |   2 -
 src/services/GitHubService.ts                 |   4 +
 4 files changed, 112 insertions(+), 100 deletions(-)
 create mode 100644 src/lib/components/github/NewUserGuide.svelte

diff --git a/src/lib/components/GitHubSettings.svelte b/src/lib/components/GitHubSettings.svelte
index 5ad3028..607d578 100644
--- a/src/lib/components/GitHubSettings.svelte
+++ b/src/lib/components/GitHubSettings.svelte
@@ -2,14 +2,7 @@
   import { Button } from "$lib/components/ui/button";
   import { Input } from "$lib/components/ui/input";
   import { Label } from "$lib/components/ui/label";
-  import { TUTORIAL_LINK } from "$lib/constants";
   import {
-    AlertCircle,
-    Youtube,
-    Github,
-    ExternalLink,
-    ChevronUp,
-    ChevronDown,
     Check,
     X,
     Search,
@@ -17,6 +10,7 @@
   } from "lucide-svelte";
   import { onMount } from 'svelte';
   import { GitHubService } from "../../services/GitHubService";
+  import NewUserGuide from "./github/NewUserGuide.svelte";
 
   export let isOnboarding: boolean = false;
   export let githubToken: string;
@@ -24,18 +18,12 @@
   export let repoName: string = '';
   export let branch: string = 'main';
   export let status: string;
-  export let isSettingsValid: boolean;
   export let onSave: () => void;
   export let onInput: () => void;
   export let projectId: string | null = null;
   export let projectSettings: Record<string, { repoName: string; branch: string }> = {};
   export let buttonDisabled: boolean = false;
-
-  const GITHUB_SIGNUP_URL = "https://github.com/signup";
-  const CREATE_TOKEN_URL =
-    "https://github.com/settings/tokens/new?scopes=repo&description=Bolt%20to%20GitHub";
-
-  let showNewUserGuide = true;
+  
   let isValidatingToken = false;
   let isTokenValid: boolean | null = null;
   let tokenValidationTimeout: number;
@@ -134,21 +122,12 @@
   }
 
   onMount(async () => {
-    chrome.storage.local.get(['showNewUserGuide'], (result) => {
-      showNewUserGuide = result.showNewUserGuide ?? true;
-    });
-
     // If we have initial valid settings, validate and load repos
     if (githubToken && repoOwner) {
       await validateSettings();
     }
   });
 
-  function toggleNewUserGuide() {
-    showNewUserGuide = !showNewUserGuide;
-    chrome.storage.local.set({ showNewUserGuide });
-  }
-
   async function validateSettings() {
     if (!githubToken) {
       isTokenValid = null;
@@ -208,81 +187,7 @@
 
 <div class="space-y-6">
   <!-- Quick Links Section -->
-  <div class="rounded-lg bg-slate-800/50 border border-slate-700">
-    <button
-      on:click={toggleNewUserGuide}
-      class="w-full p-4 flex items-center justify-between text-left"
-    >
-      <h3 class="font-medium text-slate-200 flex items-center gap-2">
-        <AlertCircle size={16} />
-        New to GitHub?
-      </h3>
-      {#if showNewUserGuide}
-        <ChevronUp
-          size={16}
-          class="transition-transform duration-300 text-slate-400"
-        />
-      {:else}
-        <ChevronDown
-          size={16}
-          class="transition-transform duration-300 text-slate-400"
-        />
-      {/if}
-    </button>
-    {#if showNewUserGuide}
-      <div class="px-4 pb-4 space-y-2">
-        <div class="space-y-2 text-sm text-slate-400">
-          <p>Follow these steps to get started:</p>
-          <ol class="list-decimal list-inside space-y-1 ml-2">
-            <li>
-              <a
-                href={GITHUB_SIGNUP_URL}
-                target="_blank"
-                rel="noopener noreferrer"
-                class="text-blue-400 hover:underline inline-flex items-center gap-1"
-              >
-                Create a GitHub account
-                <ExternalLink size={12} />
-              </a>
-            </li>
-            <li>
-              <a
-                href={CREATE_TOKEN_URL}
-                target="_blank"
-                rel="noopener noreferrer"
-                class="text-blue-400 hover:underline inline-flex items-center gap-1"
-              >
-                Generate a GitHub token
-                <ExternalLink size={12} />
-              </a>
-            </li>
-          </ol>
-        </div>
-        <div
-          class="flex items-center gap-2 mt-2 pt-2 border-t border-slate-700"
-        >
-          <a
-            href={TUTORIAL_LINK}
-            target="_blank"
-            rel="noopener noreferrer"
-            class="inline-flex items-center gap-2 text-sm text-red-400 hover:text-red-300"
-          >
-            <Youtube size={16} />
-            Watch Setup Tutorial
-          </a>
-          <a
-            href="https://github.com"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="inline-flex items-center gap-2 text-sm text-slate-400 hover:text-slate-300"
-          >
-            <Github size={16} />
-            Visit GitHub
-          </a>
-        </div>
-      </div>
-    {/if}
-  </div>
+  <NewUserGuide />
 
   <!-- Settings Form -->
   <form on:submit|preventDefault={onSave} class="space-y-4">
diff --git a/src/lib/components/github/NewUserGuide.svelte b/src/lib/components/github/NewUserGuide.svelte
new file mode 100644
index 0000000..36ac875
--- /dev/null
+++ b/src/lib/components/github/NewUserGuide.svelte
@@ -0,0 +1,105 @@
+<script>
+    import { TUTORIAL_LINK } from "$lib/constants";
+    import {
+        AlertCircle,
+        ChevronUp,
+        ChevronDown,
+        ExternalLink,
+        Youtube,
+        Github,
+    } from "lucide-svelte";
+    import {
+        GITHUB_SIGNUP_URL,
+        CREATE_TOKEN_URL,
+    } from "src/services/GitHubService";
+    import { onMount } from "svelte";
+
+    let showNewUserGuide = true;
+
+    function toggleNewUserGuide() {
+        showNewUserGuide = !showNewUserGuide;
+        chrome.storage.local.set({ showNewUserGuide });
+    }
+
+    onMount(() => {
+        chrome.storage.local.get(["showNewUserGuide"], (result) => {
+            showNewUserGuide = result.showNewUserGuide ?? true;
+        });
+    });
+</script>
+
+<div class="rounded-lg bg-slate-800/50 border border-slate-700">
+    <button
+        on:click={toggleNewUserGuide}
+        class="w-full p-4 flex items-center justify-between text-left"
+    >
+        <h3 class="font-medium text-slate-200 flex items-center gap-2">
+            <AlertCircle size={16} />
+            New to GitHub?
+        </h3>
+        {#if showNewUserGuide}
+            <ChevronUp
+                size={16}
+                class="transition-transform duration-300 text-slate-400"
+            />
+        {:else}
+            <ChevronDown
+                size={16}
+                class="transition-transform duration-300 text-slate-400"
+            />
+        {/if}
+    </button>
+    {#if showNewUserGuide}
+        <div class="px-4 pb-4 space-y-2">
+            <div class="space-y-2 text-sm text-slate-400">
+                <p>Follow these steps to get started:</p>
+                <ol class="list-decimal list-inside space-y-1 ml-2">
+                    <li>
+                        <a
+                            href={GITHUB_SIGNUP_URL}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            class="text-blue-400 hover:underline inline-flex items-center gap-1"
+                        >
+                            Create a GitHub account
+                            <ExternalLink size={12} />
+                        </a>
+                    </li>
+                    <li>
+                        <a
+                            href={CREATE_TOKEN_URL}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            class="text-blue-400 hover:underline inline-flex items-center gap-1"
+                        >
+                            Generate a GitHub token
+                            <ExternalLink size={12} />
+                        </a>
+                    </li>
+                </ol>
+            </div>
+            <div
+                class="flex items-center gap-2 mt-2 pt-2 border-t border-slate-700"
+            >
+                <a
+                    href={TUTORIAL_LINK}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="inline-flex items-center gap-2 text-sm text-red-400 hover:text-red-300"
+                >
+                    <Youtube size={16} />
+                    Watch Setup Tutorial
+                </a>
+                <a
+                    href="https://github.com"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="inline-flex items-center gap-2 text-sm text-slate-400 hover:text-slate-300"
+                >
+                    <Github size={16} />
+                    Visit GitHub
+                </a>
+            </div>
+        </div>
+    {/if}
+</div>
diff --git a/src/popup/App.svelte b/src/popup/App.svelte
index 24aaf34..b54f7bc 100644
--- a/src/popup/App.svelte
+++ b/src/popup/App.svelte
@@ -235,7 +235,6 @@
                   bind:branch
                   projectId={parsedProjectId}
                   {status}
-                  {isSettingsValid}
                   buttonDisabled={hasStatus}
                   onSave={saveSettings}
                   onInput={checkSettingsValidity}
@@ -265,7 +264,6 @@
               bind:githubToken
               bind:repoOwner
               {status}
-              {isSettingsValid}
               buttonDisabled={hasStatus}
               onSave={saveSettings}
               onInput={checkSettingsValidity}
diff --git a/src/services/GitHubService.ts b/src/services/GitHubService.ts
index 8dfe090..33b2db3 100644
--- a/src/services/GitHubService.ts
+++ b/src/services/GitHubService.ts
@@ -1,3 +1,7 @@
+export const GITHUB_SIGNUP_URL = "https://github.com/signup";
+export const CREATE_TOKEN_URL =
+  "https://github.com/settings/tokens/new?scopes=repo&description=Bolt%20to%20GitHub&default_expires_at=none";
+
 interface GitHubFileResponse {
   sha?: string;
   content?: string;

From 709eb7aa20d86b52c608db9534369d0b85ff47b0 Mon Sep 17 00:00:00 2001
From: Mamerto Fabian Jr <mfabianjr@gmail.com>
Date: Wed, 15 Jan 2025 20:50:04 +0800
Subject: [PATCH 02/75] fix: update import path for GitHubService in
 NewUserGuide component

---
 src/lib/components/github/NewUserGuide.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/github/NewUserGuide.svelte b/src/lib/components/github/NewUserGuide.svelte
index 36ac875..a5f39f3 100644
--- a/src/lib/components/github/NewUserGuide.svelte
+++ b/src/lib/components/github/NewUserGuide.svelte
@@ -11,7 +11,7 @@
     import {
         GITHUB_SIGNUP_URL,
         CREATE_TOKEN_URL,
-    } from "src/services/GitHubService";
+    } from "../../../services/GitHubService";
     import { onMount } from "svelte";
 
     let showNewUserGuide = true;

From 3daea052f906a6d82167ff33741923b6999dad6b Mon Sep 17 00:00:00 2001
From: Mamerto Fabian Jr <mfabianjr@gmail.com>
Date: Thu, 16 Jan 2025 07:14:53 +0800
Subject: [PATCH 03/75] add help tab

---
 src/lib/components/Header.svelte |  8 +++++--
 src/lib/components/Help.svelte   | 40 ++++++++++++++++++++++++++++++++
 src/popup/App.svelte             |  7 +++++-
 3 files changed, 52 insertions(+), 3 deletions(-)
 create mode 100644 src/lib/components/Help.svelte

diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index 48c89a5..45a0379 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-    import { Home, Settings, FolderGit2 } from "lucide-svelte";
+    import { Home, Settings, FolderGit2, HelpCircle } from "lucide-svelte";
     import { TabsList, TabsTrigger } from "$lib/components/ui/tabs";
   </script>
   
-  <TabsList class="grid w-full grid-cols-3">
+  <TabsList class="grid w-full grid-cols-4">
     <TabsTrigger value="home" class="gap-2">
       <Home class="h-4 w-4" />
       Home
@@ -16,4 +16,8 @@
       <Settings class="h-4 w-4" />
       Settings
     </TabsTrigger>
+    <TabsTrigger value="help" class="gap-2">
+      <HelpCircle class="h-4 w-4" />
+      Help
+    </TabsTrigger>
   </TabsList>
diff --git a/src/lib/components/Help.svelte b/src/lib/components/Help.svelte
new file mode 100644
index 0000000..2656a4c
--- /dev/null
+++ b/src/lib/components/Help.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+  import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "$lib/components/ui/card";
+</script>
+
+<Card class="border-slate-800 bg-slate-900">
+  <CardHeader>
+    <CardTitle>Help & Documentation</CardTitle>
+    <CardDescription class="text-slate-400">
+      Learn how to use Bolt to GitHub effectively
+    </CardDescription>
+  </CardHeader>
+  <CardContent class="space-y-4">
+    <div class="space-y-2">
+      <h3 class="text-lg font-semibold text-slate-200">Getting Started</h3>
+      <p class="text-sm text-slate-400">
+        1. Create a new project on bolt.new or open an existing one
+      </p>
+      <p class="text-sm text-slate-400">
+        2. Configure your GitHub settings with your personal access token
+      </p>
+      <p class="text-sm text-slate-400">
+        3. Set your repository details and branch name
+      </p>
+    </div>
+
+    <div class="space-y-2">
+      <h3 class="text-lg font-semibold text-slate-200">Important Note</h3>
+      <p class="text-sm text-slate-400">
+        ⚠️ This extension cannot function if Bolt encounters an error. Please ensure your Bolt project is working correctly before attempting to use this extension.
+      </p>
+    </div>
+
+    <div class="space-y-2">
+      <h3 class="text-lg font-semibold text-slate-200">Need More Help?</h3>
+      <p class="text-sm text-slate-400">
+        Visit our GitHub repository for detailed documentation, issues, and updates.
+      </p>
+    </div>
+  </CardContent>
+</Card>
diff --git a/src/popup/App.svelte b/src/popup/App.svelte
index b54f7bc..d433cc0 100644
--- a/src/popup/App.svelte
+++ b/src/popup/App.svelte
@@ -17,7 +17,8 @@
   import type { GitHubSettingsInterface } from "$lib/types";
   import ProjectsList from "$lib/components/ProjectsList.svelte";
   import { GitHubService } from "../services/GitHubService";
-    import { Button } from "$lib/components/ui/button";
+  import { Button } from "$lib/components/ui/button";
+  import Help from "$lib/components/Help.svelte";
 
   let githubToken: string = "";
   let repoOwner = "";
@@ -242,6 +243,10 @@
               </CardContent>
             </Card>
           </TabsContent>
+
+          <TabsContent value="help">
+            <Help />
+          </TabsContent>
         </Tabs>
       {:else if hasInitialSettings && repoOwner && githubToken}
         <ProjectsList {projectSettings} {repoOwner} {githubToken} currentlyLoadedProjectId={parsedProjectId} isBoltSite={isBoltSite} />

From 43b6965acf726e9c8018cbd4223d44da3df15ad6 Mon Sep 17 00:00:00 2001
From: Mamerto Fabian Jr <mfabianjr@gmail.com>
Date: Thu, 16 Jan 2025 08:59:13 +0800
Subject: [PATCH 04/75] setup linting and formatting, run format fix

---
 .eslintrc.cjs                                 |   36 +
 .github/ISSUE_TEMPLATE/bug_report.md          |   13 +-
 .github/workflows/release.yml                 |   12 +-
 .prettierrc                                   |    9 +
 CHANGELOG.md                                  |    5 +-
 README.md                                     |   22 +-
 components.json                               |   26 +-
 manifest.json                                 |   11 +-
 package-lock.json                             | 1342 ++++++++++++++++-
 package.json                                  |   13 +-
 postcss.config.js                             |   10 +-
 src/background/BackgroundService.ts           |  100 +-
 src/background/StateManager.ts                |   38 +-
 src/content/ContentManager.ts                 |  302 ++--
 src/content/MessageHandler.ts                 |    2 +-
 src/content/Notification.svelte               |   22 +-
 src/content/UIManager.ts                      |  123 +-
 src/content/UploadStatus.svelte               |   48 +-
 src/lib/common.ts                             |   14 +-
 src/lib/components/Footer.svelte              |   13 +-
 src/lib/components/GitHubSettings.svelte      |   79 +-
 src/lib/components/Header.svelte              |   44 +-
 src/lib/components/Help.svelte                |   15 +-
 src/lib/components/ProjectsList.svelte        |   71 +-
 src/lib/components/SocialLinks.svelte         |    4 +-
 src/lib/components/StatusAlert.svelte         |   21 +-
 src/lib/components/github/NewUserGuide.svelte |  177 +--
 .../ui/alert/alert-description.svelte         |   14 +-
 .../components/ui/alert/alert-title.svelte    |   26 +-
 src/lib/components/ui/alert/alert.svelte      |   20 +-
 src/lib/components/ui/alert/index.ts          |   48 +-
 src/lib/components/ui/button/button.svelte    |   34 +-
 src/lib/components/ui/button/index.ts         |   73 +-
 .../components/ui/card/card-content.svelte    |   14 +-
 .../ui/card/card-description.svelte           |   14 +-
 src/lib/components/ui/card/card-footer.svelte |   14 +-
 src/lib/components/ui/card/card-header.svelte |   14 +-
 src/lib/components/ui/card/card-title.svelte  |   26 +-
 src/lib/components/ui/card/card.svelte        |   16 +-
 src/lib/components/ui/card/index.ts           |   40 +-
 src/lib/components/ui/input/index.ts          |   42 +-
 src/lib/components/ui/input/input.svelte      |   68 +-
 src/lib/components/ui/label/index.ts          |    8 +-
 src/lib/components/ui/label/label.svelte      |   26 +-
 src/lib/components/ui/tabs/index.ts           |   26 +-
 .../components/ui/tabs/tabs-content.svelte    |   26 +-
 src/lib/components/ui/tabs/tabs-list.svelte   |   22 +-
 .../components/ui/tabs/tabs-trigger.svelte    |   30 +-
 src/lib/constants.ts                          |   16 +-
 src/lib/types.ts                              |   28 +-
 src/lib/utils.ts                              |  100 +-
 src/lib/zip.ts                                |    8 +-
 src/popup/App.svelte                          |  123 +-
 src/popup/index.html                          |    4 +-
 src/popup/main.ts                             |    2 +-
 src/services/GitHubService.ts                 |  142 +-
 src/services/settings.ts                      |  109 +-
 src/services/zipHandler.ts                    |  485 +++---
 src/styles/gb.css                             |   46 +-
 tailwind.config.js                            |  116 +-
 tsconfig.json                                 |    7 +-
 tsconfig.node.json                            |   16 +-
 vite.config.ts                                |   32 +-
 63 files changed, 2972 insertions(+), 1435 deletions(-)
 create mode 100644 .eslintrc.cjs
 create mode 100644 .prettierrc

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
new file mode 100644
index 0000000..6cad929
--- /dev/null
+++ b/.eslintrc.cjs
@@ -0,0 +1,36 @@
+module.exports = {
+  root: true,
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:svelte/recommended',
+    'prettier',
+  ],
+  parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint'],
+  parserOptions: {
+    sourceType: 'module',
+    ecmaVersion: 2020,
+    extraFileExtensions: ['.svelte'],
+  },
+  env: {
+    browser: true,
+    es2017: true,
+    node: true,
+  },
+  overrides: [
+    {
+      files: ['*.svelte'],
+      parser: 'svelte-eslint-parser',
+      parserOptions: {
+        parser: '@typescript-eslint/parser',
+      },
+    },
+  ],
+  rules: {
+    // Add basic rules to start with
+    '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
+    '@typescript-eslint/no-explicit-any': 'warn',
+    'no-console': ['warn', { allow: ['warn', 'error'] }],
+  },
+};
diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
index cf12de9..6ebc322 100644
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -1,43 +1,52 @@
 ---
 name: Bug report
 about: Create a report to help improve the Bolt to GitHub extension
-title: "[BUG] "
+title: '[BUG] '
 labels: bug
 assignees: mamertofabian
-
 ---
 
 ## 🐛 Bug Description
+
 <!-- A clear and brief description of what the bug is -->
 
 ## 📝 Steps to Reproduce
+
 1. Go to '...'
 2. Click on '....'
 3. See error '...'
 
 ## ✅ Expected Behavior
+
 <!-- A clear description of what you expected to happen -->
 
 ## ❌ Actual Behavior
+
 <!-- What actually happened instead -->
 
 ## 📸 Screenshots
+
 <!-- If applicable, add screenshots to help explain your problem -->
 
 ## 🔍 Environment Details
+
 - Chrome Version: <!-- e.g., 120.0.6099.109 -->
 - Extension Version: <!-- Find this at chrome://extensions -->
 - Operating System: <!-- e.g., Windows 11, macOS Sonoma -->
 - Bolt.new Project Type: <!-- e.g., Next.js, React, Vue -->
 
 ## 💾 Additional Context
+
 <!-- Add any other context about the problem here -->
+
 - Did this work before?
 - Are you using any specific GitHub organization/repository settings?
 - Any error messages in the Chrome DevTools console? (Press F12 to open)
 
 ## ✔️ Checklist
+
 <!-- Mark the boxes that apply -->
+
 - [ ] I am on bolt.new website when trying to use the extension
 - [ ] I have provided my GitHub token with correct permissions
 - [ ] I have the latest version of the extension installed
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index ef8fec4..146dcbb 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -13,28 +13,28 @@ permissions:
 jobs:
   build:
     runs-on: ubuntu-latest
-    
+
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
-        
+
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
           node-version: '20'
           cache: 'npm'
-          
+
       - name: Install dependencies
         run: npm ci
-        
+
       - name: Build project
         run: npm run build
-        
+
       - name: Zip build artifacts
         run: |
           cd dist
           zip -r ../chrome-extension.zip .
-        
+
       - name: Create Release
         uses: softprops/action-gh-release@v1
         with:
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..2026edb
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,9 @@
+{
+  "useTabs": false,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "printWidth": 100,
+  "plugins": ["prettier-plugin-svelte"],
+  "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+}
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 42d9d8d..e30fa67 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,13 +1,16 @@
 ## 2024-12-02
 
 ### Added
+
 - New classes for improved code organization: `BackgroundService`, `StateManager`, `ContentManager`, and `UIManager`.
 - UI components for notifications and upload status management.
 - Projects tab for managing Bolt projects and GitHub repositories.
 
 ### Changed
+
 - Refactored background and content scripts for better modularity and maintainability.
 - Enhanced GitHub integration with structured settings and improved error handling.
 
 ### Fixed
-- Ensured upload status container is appended only after the document body is available, improving UI reliability.
\ No newline at end of file
+
+- Ensured upload status container is appended only after the document body is available, improving UI reliability.
diff --git a/README.md b/README.md
index 7e6e466..b2b9bbb 100644
--- a/README.md
+++ b/README.md
@@ -23,6 +23,7 @@ A Chrome extension that automatically captures ZIP file downloads from bolt.new,
 ## 📦 Installation Options
 
 ### Stable Version (Chrome Web Store)
+
 <a href="https://chrome.google.com/webstore/detail/pikdepbilbnnpgdkdaaoeekgflljmame">
   <img src="https://img.shields.io/badge/Install%20from-Chrome%20Web%20Store-blue?style=for-the-badge&logo=google-chrome&logoColor=white" alt="Install from Chrome Web Store" height="40">
 </a>
@@ -50,12 +51,16 @@ A Chrome extension that automatically captures ZIP file downloads from bolt.new,
   - Import existing GitHub repos into Bolt
 
 #### Best Practices
+
 1. Always verify your repository settings before syncing a new project
 2. Double-check the repository name and branch when switching between projects
 
 ### Latest Version (GitHub)
+
 To try the latest development version:
+
 1. Clone and install:
+
    ```bash
    git clone https://github.com/mamertofabian/bolt-to-github.git
    cd bolt-to-github
@@ -63,6 +68,7 @@ To try the latest development version:
    ```
 
 2. Build the extension:
+
    ```bash
    npm run build
    ```
@@ -89,11 +95,13 @@ To try the latest development version:
 Get started in just 3 simple steps:
 
 1. **Install from Chrome Web Store**
+
    - Visit our [Chrome Web Store page](https://chrome.google.com/webstore/detail/pikdepbilbnnpgdkdaaoeekgflljmame)
    - Click "Add to Chrome"
    - Click "Add extension" when prompted
 
 2. **Configure the Extension**
+
    - Make sure you have a Bolt.new project loaded
    - Click the extension icon in your Chrome toolbar
    - Enter your GitHub token (needs repo permissions)
@@ -117,15 +125,18 @@ Follow these steps to get started:
 Need help? Watch our [Quick Start Video Tutorial](https://youtu.be/7C03DNw9ZHI)
 
 ### 🛠️ For Developers (Contributing)
+
 If you want to modify the extension or contribute to its development:
 
 1. Set up your development environment:
+
    ```bash
    # Make sure you have Node.js v16 or later installed
    node --version
    ```
 
 2. Clone and install:
+
    ```bash
    git clone https://github.com/mamertofabian/bolt-to-github.git
    cd bolt-to-github
@@ -133,6 +144,7 @@ If you want to modify the extension or contribute to its development:
    ```
 
 3. Build for development:
+
    ```bash
    npm run watch   # For development with hot reload
    # OR
@@ -207,20 +219,24 @@ See our [Contributing Guide](#contributing) for more details.
 ## Support & Resources
 
 ### Documentation & Tutorials
+
 - 📺 [Watch our video tutorials](https://youtube.com/@aidrivencoder)
 - 📖 [Read the documentation](https://github.com/mamertofabian/bolt-to-github)
 - 💡 [Get development tips](https://aidrivencoder.com)
 - 💬 [Discord Community](https://discord.gg/JtjYHBBnGU)
 
 ### Professional Support
+
 - 📊 [Book a consultation](https://calendly.com/mamerto/30min)
 - 📧 [Email support](mailto:mamerto@codefrost.com)
 - 💻 [Custom development inquiries](https://codefrost.com)
 
 ### Report Issues
+
 For bugs or feature requests, please [open an issue](https://github.com/mamertofabian/bolt-to-github/issues) on the GitHub repository.
 
 ### Support the Project
+
 If you find this extension helpful, you can support its development:
 
 [![Buy Me A Coffee](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://www.buymeacoffee.com/aidrivencoder)
@@ -279,11 +295,13 @@ A: Currently, the extension processes all files in the ZIP. File filtering may b
 ### Common Issues
 
 1. **Extension not intercepting downloads**
+
    - Ensure you're on bolt.new
    - Check if the file is a ZIP
    - Verify permissions are enabled
 
 2. **GitHub push fails**
+
    - Verify your token has repo permissions
    - Check repository name and owner
    - Ensure branch exists
@@ -294,7 +312,7 @@ A: Currently, the extension processes all files in the ZIP. File filtering may b
 
 ## Future Enhancements
 
- - Let me know if you have any ideas for additional features or improvements by opening an issue on GitHub.
+- Let me know if you have any ideas for additional features or improvements by opening an issue on GitHub.
 
 ## Acknowledgments
 
@@ -321,7 +339,9 @@ A: Currently, the extension processes all files in the ZIP. File filtering may b
 ## Project Features
 
 ### Projects Management
+
 The extension includes a dedicated Projects tab that helps you:
+
 - Keep track of all your Bolt projects pushed to GitHub
 - Quick-access buttons to:
   - Open projects directly in Bolt
diff --git a/components.json b/components.json
index c3048cf..fe84768 100644
--- a/components.json
+++ b/components.json
@@ -1,14 +1,14 @@
 {
-	"$schema": "https://shadcn-svelte.com/schema.json",
-	"style": "default",
-	"tailwind": {
-		"config": "tailwind.config.js",
-		"css": "src/styles/gb.css",
-		"baseColor": "slate"
-	},
-	"aliases": {
-		"components": "$lib/components",
-		"utils": "$lib/utils"
-	},
-	"typescript": true
-}
\ No newline at end of file
+  "$schema": "https://shadcn-svelte.com/schema.json",
+  "style": "default",
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/styles/gb.css",
+    "baseColor": "slate"
+  },
+  "aliases": {
+    "components": "$lib/components",
+    "utils": "$lib/utils"
+  },
+  "typescript": true
+}
diff --git a/manifest.json b/manifest.json
index 2079d1d..bd36699 100644
--- a/manifest.json
+++ b/manifest.json
@@ -8,15 +8,8 @@
     "48": "assets/icons/icon48.png",
     "128": "assets/icons/icon128.png"
   },
-  "permissions": [
-    "storage",
-    "activeTab",
-    "tabs"
-  ],
-  "host_permissions": [
-    "https://bolt.new/*",
-    "https://api.github.com/*"
-  ],
+  "permissions": ["storage", "activeTab", "tabs"],
+  "host_permissions": ["https://bolt.new/*", "https://api.github.com/*"],
   "background": {
     "service_worker": "src/background/index.ts",
     "type": "module"
diff --git a/package-lock.json b/package-lock.json
index bf6ba0f..a150fdc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,10 +18,17 @@
         "@tsconfig/svelte": "^5.0.4",
         "@types/chrome": "^0.0.236",
         "@types/node": "^22.9.1",
+        "@typescript-eslint/eslint-plugin": "^8.20.0",
+        "@typescript-eslint/parser": "^8.20.0",
         "autoprefixer": "^10.4.20",
         "bits-ui": "^0.21.16",
         "clsx": "^2.1.1",
+        "eslint": "^8.56.0",
+        "eslint-config-prettier": "^10.0.1",
+        "eslint-plugin-svelte": "^2.46.1",
         "postcss": "^8.4.49",
+        "prettier": "^3.4.2",
+        "prettier-plugin-svelte": "^3.3.3",
         "svelte": "^4.2.19",
         "svelte-check": "^3.8.6",
         "svelte-preprocess": "^5.1.4",
@@ -431,6 +438,79 @@
         "node": ">=12"
       }
     },
+    "node_modules/@eslint-community/eslint-utils": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.1.tgz",
+      "integrity": "sha512-s3O3waFUrMV8P/XaF/+ZTp1X9XBZW1a4B97ZnjQF2KYWaFD2A8KyFBsrsfSjEmjn3RGWAIuvlneuZm3CUK3jbA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eslint-visitor-keys": "^3.4.3"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
+      }
+    },
+    "node_modules/@eslint-community/regexpp": {
+      "version": "4.12.1",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.1.tgz",
+      "integrity": "sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@eslint/eslintrc": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.4.tgz",
+      "integrity": "sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ajv": "^6.12.4",
+        "debug": "^4.3.2",
+        "espree": "^9.6.0",
+        "globals": "^13.19.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^4.1.0",
+        "minimatch": "^3.1.2",
+        "strip-json-comments": "^3.1.1"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/ignore": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+      "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/@eslint/js": {
+      "version": "8.57.1",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.1.tgz",
+      "integrity": "sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      }
+    },
     "node_modules/@floating-ui/core": {
       "version": "1.6.8",
       "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.8.tgz",
@@ -456,6 +536,44 @@
       "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==",
       "dev": true
     },
+    "node_modules/@humanwhocodes/config-array": {
+      "version": "0.13.0",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz",
+      "integrity": "sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==",
+      "deprecated": "Use @eslint/config-array instead",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@humanwhocodes/object-schema": "^2.0.3",
+        "debug": "^4.3.1",
+        "minimatch": "^3.0.5"
+      },
+      "engines": {
+        "node": ">=10.10.0"
+      }
+    },
+    "node_modules/@humanwhocodes/module-importer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
+      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.22"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@humanwhocodes/object-schema": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz",
+      "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==",
+      "deprecated": "Use @eslint/object-schema instead",
+      "dev": true,
+      "license": "BSD-3-Clause"
+    },
     "node_modules/@internationalized/date": {
       "version": "3.5.6",
       "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.5.6.tgz",
@@ -723,6 +841,242 @@
       "integrity": "sha512-Sk/uYFOBAB7mb74XcpizmH0KOR2Pv3D2Hmrh1Dmy5BmK3MpdSa5kqZcg6EKBdklU0bFXX9gCfzvpnyUehrPIuA==",
       "dev": true
     },
+    "node_modules/@typescript-eslint/eslint-plugin": {
+      "version": "8.20.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.20.0.tgz",
+      "integrity": "sha512-naduuphVw5StFfqp4Gq4WhIBE2gN1GEmMUExpJYknZJdRnc+2gDzB8Z3+5+/Kv33hPQRDGzQO/0opHE72lZZ6A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/regexpp": "^4.10.0",
+        "@typescript-eslint/scope-manager": "8.20.0",
+        "@typescript-eslint/type-utils": "8.20.0",
+        "@typescript-eslint/utils": "8.20.0",
+        "@typescript-eslint/visitor-keys": "8.20.0",
+        "graphemer": "^1.4.0",
+        "ignore": "^5.3.1",
+        "natural-compare": "^1.4.0",
+        "ts-api-utils": "^2.0.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/parser": "^8.0.0 || ^8.0.0-alpha.0",
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <5.8.0"
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin/node_modules/ignore": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+      "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/@typescript-eslint/parser": {
+      "version": "8.20.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.20.0.tgz",
+      "integrity": "sha512-gKXG7A5HMyjDIedBi6bUrDcun8GIjnI8qOwVLiY3rx6T/sHP/19XLJOnIq/FgQvWLHja5JN/LSE7eklNBr612g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/scope-manager": "8.20.0",
+        "@typescript-eslint/types": "8.20.0",
+        "@typescript-eslint/typescript-estree": "8.20.0",
+        "@typescript-eslint/visitor-keys": "8.20.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <5.8.0"
+      }
+    },
+    "node_modules/@typescript-eslint/scope-manager": {
+      "version": "8.20.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.20.0.tgz",
+      "integrity": "sha512-J7+VkpeGzhOt3FeG1+SzhiMj9NzGD/M6KoGn9f4dbz3YzK9hvbhVTmLj/HiTp9DazIzJ8B4XcM80LrR9Dm1rJw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.20.0",
+        "@typescript-eslint/visitor-keys": "8.20.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils": {
+      "version": "8.20.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.20.0.tgz",
+      "integrity": "sha512-bPC+j71GGvA7rVNAHAtOjbVXbLN5PkwqMvy1cwGeaxUoRQXVuKCebRoLzm+IPW/NtFFpstn1ummSIasD5t60GA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/typescript-estree": "8.20.0",
+        "@typescript-eslint/utils": "8.20.0",
+        "debug": "^4.3.4",
+        "ts-api-utils": "^2.0.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <5.8.0"
+      }
+    },
+    "node_modules/@typescript-eslint/types": {
+      "version": "8.20.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.20.0.tgz",
+      "integrity": "sha512-cqaMiY72CkP+2xZRrFt3ExRBu0WmVitN/rYPZErA80mHjHx/Svgp8yfbzkJmDoQ/whcytOPO9/IZXnOc+wigRA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree": {
+      "version": "8.20.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.20.0.tgz",
+      "integrity": "sha512-Y7ncuy78bJqHI35NwzWol8E0X7XkRVS4K4P4TCyzWkOJih5NDvtoRDW4Ba9YJJoB2igm9yXDdYI/+fkiiAxPzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.20.0",
+        "@typescript-eslint/visitor-keys": "8.20.0",
+        "debug": "^4.3.4",
+        "fast-glob": "^3.3.2",
+        "is-glob": "^4.0.3",
+        "minimatch": "^9.0.4",
+        "semver": "^7.6.0",
+        "ts-api-utils": "^2.0.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <5.8.0"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@typescript-eslint/utils": {
+      "version": "8.20.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.20.0.tgz",
+      "integrity": "sha512-dq70RUw6UK9ei7vxc4KQtBRk7qkHZv447OUZ6RPQMQl71I3NZxQJX/f32Smr+iqWrB02pHKn2yAdHBb0KNrRMA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.4.0",
+        "@typescript-eslint/scope-manager": "8.20.0",
+        "@typescript-eslint/types": "8.20.0",
+        "@typescript-eslint/typescript-estree": "8.20.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <5.8.0"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys": {
+      "version": "8.20.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.20.0.tgz",
+      "integrity": "sha512-v/BpkeeYAsPkKCkR8BDwcno0llhzWVqPOamQrAEMdpZav2Y9OVjd9dwJyBLJWwf335B5DmlifECIkZRJCaGaHA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.20.0",
+        "eslint-visitor-keys": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys/node_modules/eslint-visitor-keys": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz",
+      "integrity": "sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@ungap/structured-clone": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.1.tgz",
+      "integrity": "sha512-fEzPV3hSkSMltkw152tJKNARhOupqbH96MZWyRjNaYZOMIzbrTeQDG+MTc6Mr2pgzFQzFxAfmhGDNP5QK++2ZA==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/@webcomponents/custom-elements": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/@webcomponents/custom-elements/-/custom-elements-1.6.0.tgz",
@@ -740,6 +1094,16 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
     "node_modules/acorn-walk": {
       "version": "8.3.4",
       "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.4.tgz",
@@ -752,6 +1116,23 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
     "node_modules/ansi-regex": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
@@ -801,6 +1182,13 @@
       "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
       "dev": true
     },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true,
+      "license": "Python-2.0"
+    },
     "node_modules/aria-query": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
@@ -976,6 +1364,16 @@
         "node": ">=8.0.0"
       }
     },
+    "node_modules/callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/camelcase-css": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
@@ -1005,6 +1403,39 @@
         }
       ]
     },
+    "node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/chalk/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
     "node_modules/cheerio": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0.tgz",
@@ -1222,6 +1653,13 @@
         }
       }
     },
+    "node_modules/deep-is": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
+      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/deepmerge": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
@@ -1261,6 +1699,19 @@
       "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
       "dev": true
     },
+    "node_modules/doctrine": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
+      "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "esutils": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/dom-serializer": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
@@ -1417,12 +1868,333 @@
         "node": ">=6"
       }
     },
+    "node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint": {
+      "version": "8.57.1",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.1.tgz",
+      "integrity": "sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==",
+      "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.2.0",
+        "@eslint-community/regexpp": "^4.6.1",
+        "@eslint/eslintrc": "^2.1.4",
+        "@eslint/js": "8.57.1",
+        "@humanwhocodes/config-array": "^0.13.0",
+        "@humanwhocodes/module-importer": "^1.0.1",
+        "@nodelib/fs.walk": "^1.2.8",
+        "@ungap/structured-clone": "^1.2.0",
+        "ajv": "^6.12.4",
+        "chalk": "^4.0.0",
+        "cross-spawn": "^7.0.2",
+        "debug": "^4.3.2",
+        "doctrine": "^3.0.0",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^7.2.2",
+        "eslint-visitor-keys": "^3.4.3",
+        "espree": "^9.6.1",
+        "esquery": "^1.4.2",
+        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
+        "file-entry-cache": "^6.0.1",
+        "find-up": "^5.0.0",
+        "glob-parent": "^6.0.2",
+        "globals": "^13.19.0",
+        "graphemer": "^1.4.0",
+        "ignore": "^5.2.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "is-path-inside": "^3.0.3",
+        "js-yaml": "^4.1.0",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "levn": "^0.4.1",
+        "lodash.merge": "^4.6.2",
+        "minimatch": "^3.1.2",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.3",
+        "strip-ansi": "^6.0.1",
+        "text-table": "^0.2.0"
+      },
+      "bin": {
+        "eslint": "bin/eslint.js"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint-compat-utils": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/eslint-compat-utils/-/eslint-compat-utils-0.5.1.tgz",
+      "integrity": "sha512-3z3vFexKIEnjHE3zCMRo6fn/e44U7T1khUjg+Hp0ZQMCigh28rALD0nPFBcGZuiLC5rLZa2ubQHDRln09JfU2Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "semver": "^7.5.4"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "eslint": ">=6.0.0"
+      }
+    },
+    "node_modules/eslint-config-prettier": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-10.0.1.tgz",
+      "integrity": "sha512-lZBts941cyJyeaooiKxAtzoPHTN+GbQTJFAIdQbRhA4/8whaAraEh47Whw/ZFfrjNSnlAxqfm9i0XVAEkULjCw==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "eslint-config-prettier": "build/bin/cli.js"
+      },
+      "peerDependencies": {
+        "eslint": ">=7.0.0"
+      }
+    },
+    "node_modules/eslint-plugin-svelte": {
+      "version": "2.46.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-svelte/-/eslint-plugin-svelte-2.46.1.tgz",
+      "integrity": "sha512-7xYr2o4NID/f9OEYMqxsEQsCsj4KaMy4q5sANaKkAb6/QeCjYFxRmDm2S3YC3A3pl1kyPZ/syOx/i7LcWYSbIw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.4.0",
+        "@jridgewell/sourcemap-codec": "^1.4.15",
+        "eslint-compat-utils": "^0.5.1",
+        "esutils": "^2.0.3",
+        "known-css-properties": "^0.35.0",
+        "postcss": "^8.4.38",
+        "postcss-load-config": "^3.1.4",
+        "postcss-safe-parser": "^6.0.0",
+        "postcss-selector-parser": "^6.1.0",
+        "semver": "^7.6.2",
+        "svelte-eslint-parser": "^0.43.0"
+      },
+      "engines": {
+        "node": "^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ota-meshi"
+      },
+      "peerDependencies": {
+        "eslint": "^7.0.0 || ^8.0.0-0 || ^9.0.0-0",
+        "svelte": "^3.37.0 || ^4.0.0 || ^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "svelte": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-plugin-svelte/node_modules/postcss-load-config": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz",
+      "integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "lilconfig": "^2.0.5",
+        "yaml": "^1.10.2"
+      },
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": ">=8.0.9",
+        "ts-node": ">=9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "postcss": {
+          "optional": true
+        },
+        "ts-node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-plugin-svelte/node_modules/yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/eslint-scope": {
+      "version": "7.2.2",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
+      "integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint-visitor-keys": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/eslint/node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/eslint/node_modules/ignore": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+      "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/eslint/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/espree": {
+      "version": "9.6.1",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
+      "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "acorn": "^8.9.0",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^3.4.1"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/esquery": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz",
+      "integrity": "sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "estraverse": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/esrecurse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
     "node_modules/estree-walker": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
       "dev": true
     },
+    "node_modules/esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/fast-glob": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
@@ -1439,6 +2211,20 @@
         "node": ">=8.6.0"
       }
     },
+    "node_modules/fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-levenshtein": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/fastq": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
@@ -1453,6 +2239,19 @@
       "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
       "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A=="
     },
+    "node_modules/file-entry-cache": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
+      "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flat-cache": "^3.0.4"
+      },
+      "engines": {
+        "node": "^10.12.0 || >=12.0.0"
+      }
+    },
     "node_modules/fill-range": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
@@ -1465,6 +2264,62 @@
         "node": ">=8"
       }
     },
+    "node_modules/find-up": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/flat-cache": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz",
+      "integrity": "sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flatted": "^3.2.9",
+        "keyv": "^4.5.3",
+        "rimraf": "^3.0.2"
+      },
+      "engines": {
+        "node": "^10.12.0 || >=12.0.0"
+      }
+    },
+    "node_modules/flat-cache/node_modules/rimraf": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+      "deprecated": "Rimraf versions prior to v4 are no longer supported",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/flatted": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.2.tgz",
+      "integrity": "sha512-AiwGJM8YcNOaobumgtng+6NHuOqC3A7MixFeDafM3X9cIUM+xUXoS5Vfgf+OihAYe20fxqNM9yPBXJzRtZ/4eA==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/focus-trap": {
       "version": "7.6.2",
       "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.6.2.tgz",
@@ -1576,7 +2431,23 @@
         "is-glob": "^4.0.1"
       },
       "engines": {
-        "node": ">= 6"
+        "node": ">= 6"
+      }
+    },
+    "node_modules/globals": {
+      "version": "13.24.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
+      "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "type-fest": "^0.20.2"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/graceful-fs": {
@@ -1585,6 +2456,23 @@
       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
       "dev": true
     },
+    "node_modules/graphemer": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
+      "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/hasown": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
@@ -1636,6 +2524,33 @@
         "node": ">= 4"
       }
     },
+    "node_modules/import-fresh": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+      "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/imurmurhash": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+      "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.19"
+      }
+    },
     "node_modules/inflight": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@@ -1719,6 +2634,16 @@
         "node": ">=0.12.0"
       }
     },
+    "node_modules/is-path-inside": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
+      "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-reference": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.3.tgz",
@@ -1757,6 +2682,19 @@
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/js-yaml": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
     "node_modules/jsesc": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.0.2.tgz",
@@ -1769,6 +2707,27 @@
         "node": ">=6"
       }
     },
+    "node_modules/json-buffer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
+      "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json-stable-stringify-without-jsonify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/jsonfile": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
@@ -1781,6 +2740,16 @@
         "graceful-fs": "^4.1.6"
       }
     },
+    "node_modules/keyv": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
+      "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "json-buffer": "3.0.1"
+      }
+    },
     "node_modules/kleur": {
       "version": "4.1.5",
       "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
@@ -1790,6 +2759,27 @@
         "node": ">=6"
       }
     },
+    "node_modules/known-css-properties": {
+      "version": "0.35.0",
+      "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.35.0.tgz",
+      "integrity": "sha512-a/RAk2BfKk+WFGhhOCAYqSiFLc34k8Mt/6NWRI4joER0EYUzXIcFivjjnoD3+XU1DggLn/tZc3DOAgke7l8a4A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/levn": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "^1.2.1",
+        "type-check": "~0.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
     "node_modules/lilconfig": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
@@ -1810,6 +2800,29 @@
       "resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
       "integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA=="
     },
+    "node_modules/locate-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/lru-cache": {
       "version": "10.4.3",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
@@ -1954,6 +2967,13 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/natural-compare": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/node-releases": {
       "version": "2.0.18",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.18.tgz",
@@ -2017,12 +3037,75 @@
         "wrappy": "1"
       }
     },
+    "node_modules/optionator": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
+      "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "deep-is": "^0.1.3",
+        "fast-levenshtein": "^2.0.6",
+        "levn": "^0.4.1",
+        "prelude-ls": "^1.2.1",
+        "type-check": "^0.4.0",
+        "word-wrap": "^1.2.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "yocto-queue": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/package-json-from-dist": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
       "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
       "dev": true
     },
+    "node_modules/parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "callsites": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/parse5": {
       "version": "7.2.1",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.2.1.tgz",
@@ -2060,6 +3143,16 @@
         "url": "https://github.com/inikulin/parse5?sponsor=1"
       }
     },
+    "node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/path-is-absolute": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
@@ -2290,6 +3383,50 @@
         "postcss": "^8.2.14"
       }
     },
+    "node_modules/postcss-safe-parser": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-6.0.0.tgz",
+      "integrity": "sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.3.3"
+      }
+    },
+    "node_modules/postcss-scss": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-4.0.9.tgz",
+      "integrity": "sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss-scss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.29"
+      }
+    },
     "node_modules/postcss-selector-parser": {
       "version": "6.1.2",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
@@ -2309,6 +3446,53 @@
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "dev": true
     },
+    "node_modules/prelude-ls": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/prettier": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.4.2.tgz",
+      "integrity": "sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
+    "node_modules/prettier-plugin-svelte": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-svelte/-/prettier-plugin-svelte-3.3.3.tgz",
+      "integrity": "sha512-yViK9zqQ+H2qZD1w/bH7W8i+bVfKrD8GIFjkFe4Thl6kCT9SlAsXVNmt3jCvQOCsnOhcvYgsoVlRV/Eu6x5nNw==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "prettier": "^3.0.0",
+        "svelte": "^3.2.0 || ^4.0.0-next.0 || ^5.0.0-next.0"
+      }
+    },
+    "node_modules/punycode": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -2376,6 +3560,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/reusify": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
@@ -2476,6 +3670,19 @@
         "rimraf": "^2.5.2"
       }
     },
+    "node_modules/semver": {
+      "version": "7.6.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
+      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -2640,6 +3847,19 @@
         "node": ">=8"
       }
     },
+    "node_modules/strip-json-comments": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/sucrase": {
       "version": "3.35.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
@@ -2706,6 +3926,19 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/supports-preserve-symlinks-flag": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
@@ -2762,6 +3995,34 @@
         "svelte": "^3.55.0 || ^4.0.0-next.0 || ^4.0.0 || ^5.0.0-next.0"
       }
     },
+    "node_modules/svelte-eslint-parser": {
+      "version": "0.43.0",
+      "resolved": "https://registry.npmjs.org/svelte-eslint-parser/-/svelte-eslint-parser-0.43.0.tgz",
+      "integrity": "sha512-GpU52uPKKcVnh8tKN5P4UZpJ/fUDndmq7wfsvoVXsyP+aY0anol7Yqo01fyrlaWGMFfm4av5DyrjlaXdLRJvGA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eslint-scope": "^7.2.2",
+        "eslint-visitor-keys": "^3.4.3",
+        "espree": "^9.6.1",
+        "postcss": "^8.4.39",
+        "postcss-scss": "^4.0.9"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ota-meshi"
+      },
+      "peerDependencies": {
+        "svelte": "^3.37.0 || ^4.0.0 || ^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "svelte": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/svelte-hmr": {
       "version": "0.15.3",
       "resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.15.3.tgz",
@@ -2925,6 +4186,13 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/text-table": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
+      "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/thenify": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
@@ -2958,6 +4226,19 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/ts-api-utils": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.0.0.tgz",
+      "integrity": "sha512-xCt/TOAc+EOHS1XPnijD3/yzpH6qg2xppZO1YDqGoVsNXfQfzHpOdNuXwrwOU8u4ITXJyDCTyt8w5g1sZv9ynQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.12"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4"
+      }
+    },
     "node_modules/ts-interface-checker": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
@@ -2970,6 +4251,32 @@
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
       "dev": true
     },
+    "node_modules/type-check": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/type-fest": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+      "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
+      "dev": true,
+      "license": "(MIT OR CC0-1.0)",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/typescript": {
       "version": "5.6.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz",
@@ -3037,6 +4344,16 @@
         "browserslist": ">= 4.21.0"
       }
     },
+    "node_modules/uri-js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "punycode": "^2.1.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -3164,6 +4481,16 @@
         "node": ">= 8"
       }
     },
+    "node_modules/word-wrap": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
+      "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/wrap-ansi": {
       "version": "8.1.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
@@ -3272,6 +4599,19 @@
       "engines": {
         "node": ">= 14"
       }
+    },
+    "node_modules/yocto-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index bfb19ca..8a1ca8e 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,11 @@
     "dev": "vite",
     "build": "vite build",
     "check": "svelte-check --tsconfig ./tsconfig.json",
-    "watch": "vite build --watch"
+    "watch": "vite build --watch",
+    "lint": "eslint \"src/**/*.{js,ts,svelte}\"",
+    "lint:fix": "eslint \"src/**/*.{js,ts,svelte}\" --fix",
+    "format": "prettier --check .",
+    "format:fix": "prettier --write ."
   },
   "dependencies": {
     "fflate": "^0.8.2",
@@ -19,10 +23,17 @@
     "@tsconfig/svelte": "^5.0.4",
     "@types/chrome": "^0.0.236",
     "@types/node": "^22.9.1",
+    "@typescript-eslint/eslint-plugin": "^8.20.0",
+    "@typescript-eslint/parser": "^8.20.0",
     "autoprefixer": "^10.4.20",
     "bits-ui": "^0.21.16",
     "clsx": "^2.1.1",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^10.0.1",
+    "eslint-plugin-svelte": "^2.46.1",
     "postcss": "^8.4.49",
+    "prettier": "^3.4.2",
+    "prettier-plugin-svelte": "^3.3.3",
     "svelte": "^4.2.19",
     "svelte-check": "^3.8.6",
     "svelte-preprocess": "^5.1.4",
diff --git a/postcss.config.js b/postcss.config.js
index 70d778e..2aa7205 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,6 +1,6 @@
 export default {
-    plugins: {
-      tailwindcss: {},
-      autoprefixer: {},
-    },
-  }
\ No newline at end of file
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/src/background/BackgroundService.ts b/src/background/BackgroundService.ts
index 4c17671..56dcf29 100644
--- a/src/background/BackgroundService.ts
+++ b/src/background/BackgroundService.ts
@@ -9,7 +9,9 @@ export class BackgroundService {
   private ports: Map<number, Port>;
   private githubService: GitHubService | null;
   private pendingCommitMessage: string;
-  private storageListener: ((changes: { [key: string]: chrome.storage.StorageChange }, namespace: string) => void) | null = null;
+  private storageListener:
+    | ((changes: { [key: string]: chrome.storage.StorageChange }, namespace: string) => void)
+    | null = null;
 
   constructor() {
     console.log('🚀 Background service initializing...');
@@ -21,8 +23,8 @@ export class BackgroundService {
     this.initialize();
   }
 
-    // this.initializeListeners();
-    // this.initializeStorageListener();
+  // this.initializeListeners();
+  // this.initializeStorageListener();
 
   private async initialize(): Promise<void> {
     const githubService = await this.initializeGitHubService();
@@ -35,10 +37,13 @@ export class BackgroundService {
   private async initializeGitHubService(): Promise<GitHubService | null> {
     try {
       const settings = await this.stateManager.getGitHubSettings();
-      
-      if (settings && settings.gitHubSettings 
-        && settings.gitHubSettings.githubToken 
-        && settings.gitHubSettings.repoOwner) {
+
+      if (
+        settings &&
+        settings.gitHubSettings &&
+        settings.gitHubSettings.githubToken &&
+        settings.gitHubSettings.repoOwner
+      ) {
         console.log('✅ Valid settings found, initializing GitHub service', settings);
         this.githubService = new GitHubService(settings.gitHubSettings.githubToken);
       } else {
@@ -53,16 +58,14 @@ export class BackgroundService {
   }
 
   private setupZipHandler(githubService: GitHubService) {
-    this.zipHandler = new ZipHandler(
-      githubService, (status) => this.broadcastStatus(status)
-    );
+    this.zipHandler = new ZipHandler(githubService, (status) => this.broadcastStatus(status));
   }
 
   private broadcastStatus(status: UploadStatusState) {
     for (const [tabId, port] of this.ports) {
       this.sendResponse(port, {
         type: 'UPLOAD_STATUS',
-        status
+        status,
       });
     }
   }
@@ -70,7 +73,7 @@ export class BackgroundService {
   private setupConnectionHandlers(): void {
     chrome.runtime.onConnect.addListener((port: Port) => {
       const tabId = port.sender?.tab?.id;
-      
+
       if (!tabId || port.name !== 'bolt-content') {
         return;
       }
@@ -113,8 +116,9 @@ export class BackgroundService {
     // Create new listener and store reference
     this.storageListener = async (changes, namespace) => {
       if (namespace === 'sync') {
-        const settingsChanged = ['githubToken', 'repoOwner', 'repoName', 'branch']
-          .some(key => key in changes);
+        const settingsChanged = ['githubToken', 'repoOwner', 'repoName', 'branch'].some(
+          (key) => key in changes
+        );
 
         if (settingsChanged) {
           console.log('🔄 GitHub settings changed, reinitializing GitHub service...');
@@ -166,12 +170,12 @@ export class BackgroundService {
       }
     } catch (error) {
       console.error(`Error handling message ${message.type}:`, error);
-      this.sendResponse(port, { 
-        type: 'UPLOAD_STATUS', 
-        status: { 
-          status: 'error', 
-          message: error instanceof Error ? error.message : 'Unknown error occurred' 
-        }
+      this.sendResponse(port, {
+        type: 'UPLOAD_STATUS',
+        status: {
+          status: 'error',
+          message: error instanceof Error ? error.message : 'Unknown error occurred',
+        },
       });
     }
   }
@@ -206,57 +210,63 @@ export class BackgroundService {
 
         // Process the ZIP file
         await this.withTimeout(
-            this.zipHandler.processZipFile(blob, projectId, this.pendingCommitMessage),
-            2 * 60 * 1000, // 2 minutes timeout
-            'Processing ZIP file timed out'
+          this.zipHandler.processZipFile(blob, projectId, this.pendingCommitMessage),
+          2 * 60 * 1000, // 2 minutes timeout
+          'Processing ZIP file timed out'
         );
 
         // Reset commit message after successful upload
         this.pendingCommitMessage = 'Commit from Bolt to GitHub';
-        
-        this.sendResponse(port, { 
-          type: 'UPLOAD_STATUS', 
-          status: { status: 'success', message: 'Upload completed successfully', progress: 100 }
+
+        this.sendResponse(port, {
+          type: 'UPLOAD_STATUS',
+          status: { status: 'success', message: 'Upload completed successfully', progress: 100 },
         });
       } catch (decodeError) {
-        const errorMessage = decodeError instanceof Error ? decodeError.message : String(decodeError);
+        const errorMessage =
+          decodeError instanceof Error ? decodeError.message : String(decodeError);
         const isGitHubError = errorMessage.includes('GitHub API Error');
-        
+
         if (isGitHubError) {
           // Extract the original GitHub error message if available
-          const originalMessage = (decodeError as any).originalMessage || 
-            'GitHub authentication or API error occurred';
-          
-          throw new Error(
-            `GitHub Error: ${originalMessage}`
-          );
+          const originalMessage =
+            (decodeError as any).originalMessage || 'GitHub authentication or API error occurred';
+
+          throw new Error(`GitHub Error: ${originalMessage}`);
         } else {
           throw new Error(
             `Failed to process ZIP data. Please try reloading the page. ` +
-            `If the issue persists, please open a GitHub issue.`
+              `If the issue persists, please open a GitHub issue.`
           );
         }
       }
     } catch (error) {
       console.error('Error processing ZIP:', error);
-      this.sendResponse(port, { 
-        type: 'UPLOAD_STATUS', 
-        status: { 
-          status: 'error', 
-          message: error instanceof Error ? error.message : 'Unknown error occurred'
-        }
+      this.sendResponse(port, {
+        type: 'UPLOAD_STATUS',
+        status: {
+          status: 'error',
+          message: error instanceof Error ? error.message : 'Unknown error occurred',
+        },
       });
     }
   }
 
-  private async withTimeout<T>(promise: Promise<T>, ms: number, timeoutMessage: string): Promise<T> {
+  private async withTimeout<T>(
+    promise: Promise<T>,
+    ms: number,
+    timeoutMessage: string
+  ): Promise<T> {
     const timeout = new Promise<never>((_, reject) =>
-        setTimeout(() => reject(new Error(timeoutMessage)), ms)
+      setTimeout(() => reject(new Error(timeoutMessage)), ms)
     );
     return Promise.race([promise, timeout]);
   }
 
-  private sendResponse(port: Port, message: { type: MessageType; status?: UploadStatusState }): void {
+  private sendResponse(
+    port: Port,
+    message: { type: MessageType; status?: UploadStatusState }
+  ): void {
     try {
       port.postMessage(message);
     } catch (error) {
diff --git a/src/background/StateManager.ts b/src/background/StateManager.ts
index 41b5974..23d71d7 100644
--- a/src/background/StateManager.ts
+++ b/src/background/StateManager.ts
@@ -1,27 +1,27 @@
-import { SettingsService } from "../services/settings";
-import type { GitHubSettingsInterface } from "../lib/types";
+import { SettingsService } from '../services/settings';
+import type { GitHubSettingsInterface } from '../lib/types';
 
 export class StateManager {
-    private static instance: StateManager;
+  private static instance: StateManager;
 
-    private constructor() { }
+  private constructor() {}
 
-    static getInstance(): StateManager {
-        if (!this.instance) {
-            this.instance = new StateManager();
-        }
-        return this.instance;
+  static getInstance(): StateManager {
+    if (!this.instance) {
+      this.instance = new StateManager();
     }
+    return this.instance;
+  }
 
-    async getGitHubSettings() {
-        return SettingsService.getGitHubSettings();
-    }
+  async getGitHubSettings() {
+    return SettingsService.getGitHubSettings();
+  }
 
-    async getProjectId() {
-        return SettingsService.getProjectId();
-    }
+  async getProjectId() {
+    return SettingsService.getProjectId();
+  }
 
-    async setProjectId(projectId: string) {
-        return SettingsService.setProjectId(projectId);
-    }
-}
\ No newline at end of file
+  async setProjectId(projectId: string) {
+    return SettingsService.setProjectId(projectId);
+  }
+}
diff --git a/src/content/ContentManager.ts b/src/content/ContentManager.ts
index 1fc434d..40bfd22 100644
--- a/src/content/ContentManager.ts
+++ b/src/content/ContentManager.ts
@@ -1,194 +1,200 @@
-import type { Message } from "$lib/types";
-import { MessageHandler } from "./MessageHandler";
-import { UIManager } from "./UIManager";
+import type { Message } from '$lib/types';
+import { MessageHandler } from './MessageHandler';
+import { UIManager } from './UIManager';
 
 export class ContentManager {
-    private uiManager: UIManager | undefined;
-    private messageHandler: MessageHandler | undefined;
-    private port: chrome.runtime.Port | null = null;
-    private isReconnecting = false;
-    private reconnectAttempts = 0;
-    private readonly MAX_RECONNECT_ATTEMPTS = 5;
-    private readonly RECONNECT_DELAY = 1000;
-  
-    constructor() {
-        if (!this.shouldInitialize()) {
-            console.log('Not initializing ContentManager - URL does not match bolt.new pattern');
-            return;
-        }
-
-        try {
-            this.initializeConnection();
-            this.messageHandler = new MessageHandler(this.port!);
-            this.uiManager = UIManager.getInstance(this.messageHandler);
-            this.setupEventListeners();
-        } catch (error) {
-            console.error('Error initializing ContentManager:', error);
-            this.handleInitializationError(error);
-        }
+  private uiManager: UIManager | undefined;
+  private messageHandler: MessageHandler | undefined;
+  private port: chrome.runtime.Port | null = null;
+  private isReconnecting = false;
+  private reconnectAttempts = 0;
+  private readonly MAX_RECONNECT_ATTEMPTS = 5;
+  private readonly RECONNECT_DELAY = 1000;
+
+  constructor() {
+    if (!this.shouldInitialize()) {
+      console.log('Not initializing ContentManager - URL does not match bolt.new pattern');
+      return;
     }
 
-    private shouldInitialize(): boolean {
-        const currentUrl = window.location.href;
-        const match = currentUrl.match(/bolt\.new\/~\/([^\/]+)/);
-        return !!match;
+    try {
+      this.initializeConnection();
+      this.messageHandler = new MessageHandler(this.port!);
+      this.uiManager = UIManager.getInstance(this.messageHandler);
+      this.setupEventListeners();
+    } catch (error) {
+      console.error('Error initializing ContentManager:', error);
+      this.handleInitializationError(error);
     }
-  
-    private initializeConnection() {
-      try {
-        this.port = chrome.runtime.connect({ name: 'bolt-content' });
-        console.log('🔊 Connected to background service with port:', this.port);
+  }
 
-        if (!this.port) {
-          throw new Error('Failed to establish connection with background service');
-        }
+  private shouldInitialize(): boolean {
+    const currentUrl = window.location.href;
+    const match = currentUrl.match(/bolt\.new\/~\/([^\/]+)/);
+    return !!match;
+  }
 
-        this.setupPortListeners();
-        this.isReconnecting = false;
-        this.reconnectAttempts = 0;
-      } catch (error) {
-        if (this.isExtensionContextInvalidated(error)) {
-          console.warn('Extension context invalidated, attempting reconnection...');
-          this.handleExtensionContextInvalidated();
-        } else {
-          console.error('Error initializing connection:', error);
-          throw error;
-        }
+  private initializeConnection() {
+    try {
+      this.port = chrome.runtime.connect({ name: 'bolt-content' });
+      console.log('🔊 Connected to background service with port:', this.port);
+
+      if (!this.port) {
+        throw new Error('Failed to establish connection with background service');
+      }
+
+      this.setupPortListeners();
+      this.isReconnecting = false;
+      this.reconnectAttempts = 0;
+    } catch (error) {
+      if (this.isExtensionContextInvalidated(error)) {
+        console.warn('Extension context invalidated, attempting reconnection...');
+        this.handleExtensionContextInvalidated();
+      } else {
+        console.error('Error initializing connection:', error);
+        throw error;
       }
     }
+  }
 
-    private setupPortListeners(): void {
-      if (!this.port) {
-        console.error('Port is not initialized');
-        this.handleDisconnection();
-        return;
-      };
-
-      this.port.onMessage.addListener((message: Message) => {
-          try {
-              this.handleBackgroundMessage(message);
-          } catch (error) {
-              console.error('Error handling message:', error);
-          }
-      });
-
-      this.port.onDisconnect.addListener(() => {
-          const error = chrome.runtime.lastError;
-          console.log('Port disconnected:', error?.message || 'No error message');
-          
-          if (this.isExtensionContextInvalidated(error)) {
-              this.handleExtensionContextInvalidated();
-          } else {
-              this.handleDisconnection();
-          }
-      });
+  private setupPortListeners(): void {
+    if (!this.port) {
+      console.error('Port is not initialized');
+      this.handleDisconnection();
+      return;
     }
-    private isExtensionContextInvalidated(error: any): boolean {
-      return error?.message?.includes('Extension context invalidated') ||
-             error?.message?.includes('Extension context was invalidated');
+
+    this.port.onMessage.addListener((message: Message) => {
+      try {
+        this.handleBackgroundMessage(message);
+      } catch (error) {
+        console.error('Error handling message:', error);
+      }
+    });
+
+    this.port.onDisconnect.addListener(() => {
+      const error = chrome.runtime.lastError;
+      console.log('Port disconnected:', error?.message || 'No error message');
+
+      if (this.isExtensionContextInvalidated(error)) {
+        this.handleExtensionContextInvalidated();
+      } else {
+        this.handleDisconnection();
+      }
+    });
+  }
+  private isExtensionContextInvalidated(error: any): boolean {
+    return (
+      error?.message?.includes('Extension context invalidated') ||
+      error?.message?.includes('Extension context was invalidated')
+    );
   }
 
   private handleExtensionContextInvalidated(): void {
-      console.log('Extension context invalidated, cleaning up...');
-      this.cleanup();
-      this.notifyUserOfExtensionReload();
+    console.log('Extension context invalidated, cleaning up...');
+    this.cleanup();
+    this.notifyUserOfExtensionReload();
   }
 
   private handleDisconnection(): void {
-      if (this.isReconnecting || this.reconnectAttempts >= this.MAX_RECONNECT_ATTEMPTS) {
-          return;
-      }
+    if (this.isReconnecting || this.reconnectAttempts >= this.MAX_RECONNECT_ATTEMPTS) {
+      return;
+    }
 
-      this.isReconnecting = true;
-      this.reconnectAttempts++;
+    this.isReconnecting = true;
+    this.reconnectAttempts++;
 
-      console.log(`Attempting reconnection (${this.reconnectAttempts}/${this.MAX_RECONNECT_ATTEMPTS})...`);
-      setTimeout(() => this.reconnect(), this.RECONNECT_DELAY);
+    console.log(
+      `Attempting reconnection (${this.reconnectAttempts}/${this.MAX_RECONNECT_ATTEMPTS})...`
+    );
+    setTimeout(() => this.reconnect(), this.RECONNECT_DELAY);
   }
 
   private reconnect(): void {
-      try {
-          this.initializeConnection();
-          if (this.port) {
-              this.messageHandler?.updatePort(this.port);
-              this.setupEventListeners();
-              console.log('Successfully reconnected');
-          }
-      } catch (error) {
-          console.error('Reconnection failed:', error);
-          this.handleDisconnection();
+    try {
+      this.initializeConnection();
+      if (this.port) {
+        this.messageHandler?.updatePort(this.port);
+        this.setupEventListeners();
+        console.log('Successfully reconnected');
       }
+    } catch (error) {
+      console.error('Reconnection failed:', error);
+      this.handleDisconnection();
+    }
   }
 
   private handleInitializationError(error: any): void {
-      console.error('Initialization error:', error);
-      this.notifyUserOfError();
+    console.error('Initialization error:', error);
+    this.notifyUserOfError();
   }
 
   private notifyUserOfExtensionReload(): void {
-      this.uiManager?.showNotification({
-          type: 'info',
-          message: 'Bolt to GitHub extension has been updated or reloaded. Please refresh the page to continue.',
-          duration: 10000
-      });
+    this.uiManager?.showNotification({
+      type: 'info',
+      message:
+        'Bolt to GitHub extension has been updated or reloaded. Please refresh the page to continue.',
+      duration: 10000,
+    });
   }
 
   private notifyUserOfError(): void {
-      this.uiManager?.showNotification({
-          type: 'error',
-          message: 'There was an error connecting to the Bolt to GitHub extension. Please refresh the page or reinstall the extension.',
-          duration: 10000
-      });
+    this.uiManager?.showNotification({
+      type: 'error',
+      message:
+        'There was an error connecting to the Bolt to GitHub extension. Please refresh the page or reinstall the extension.',
+      duration: 10000,
+    });
   }
 
   private cleanup(): void {
-      this.port = null;
-      this.isReconnecting = false;
-      this.reconnectAttempts = 0;
-      this.uiManager?.cleanup();
+    this.port = null;
+    this.isReconnecting = false;
+    this.reconnectAttempts = 0;
+    this.uiManager?.cleanup();
   }
 
   private setupEventListeners(): void {
-      window.addEventListener('unload', () => {
-          this.cleanup();
-      });
-
-      window.addEventListener('focus', () => {
-          if (!this.port && !this.isReconnecting) {
-              this.reconnect();
-          }
-      });
-
-      // Handle extension updates
-      chrome.runtime.onConnect.addListener(() => {
-          this.reinitialize();
-      });
+    window.addEventListener('unload', () => {
+      this.cleanup();
+    });
+
+    window.addEventListener('focus', () => {
+      if (!this.port && !this.isReconnecting) {
+        this.reconnect();
+      }
+    });
+
+    // Handle extension updates
+    chrome.runtime.onConnect.addListener(() => {
+      this.reinitialize();
+    });
   }
 
   private handleBackgroundMessage(message: Message): void {
-      switch (message.type) {
-          case 'UPLOAD_STATUS':
-              this.uiManager?.updateUploadStatus(message.status!);
-              break;
-          case 'GITHUB_SETTINGS_CHANGED':
-              console.log('🔊 Received GitHub settings changed:', message.data.isValid);
-              this.uiManager?.updateButtonState(message.data.isValid);
-              break;
-          default:
-              console.warn('Unhandled message type:', message.type);
-      }
+    switch (message.type) {
+      case 'UPLOAD_STATUS':
+        this.uiManager?.updateUploadStatus(message.status!);
+        break;
+      case 'GITHUB_SETTINGS_CHANGED':
+        console.log('🔊 Received GitHub settings changed:', message.data.isValid);
+        this.uiManager?.updateButtonState(message.data.isValid);
+        break;
+      default:
+        console.warn('Unhandled message type:', message.type);
+    }
   }
 
   public reinitialize(): void {
-      console.log('🔊 Reinitializing content script');
-      try { 
-        this.cleanup();
-        this.initializeConnection();
-        this.uiManager?.reinitialize();
-        this.messageHandler?.sendMessage('CONTENT_SCRIPT_READY');
-      } catch (error) {
-        console.error('Error reinitializing content script:', error);
-        this.handleInitializationError(error);
-      }
+    console.log('🔊 Reinitializing content script');
+    try {
+      this.cleanup();
+      this.initializeConnection();
+      this.uiManager?.reinitialize();
+      this.messageHandler?.sendMessage('CONTENT_SCRIPT_READY');
+    } catch (error) {
+      console.error('Error reinitializing content script:', error);
+      this.handleInitializationError(error);
+    }
   }
 }
diff --git a/src/content/MessageHandler.ts b/src/content/MessageHandler.ts
index 4b74562..ef60e04 100644
--- a/src/content/MessageHandler.ts
+++ b/src/content/MessageHandler.ts
@@ -1,4 +1,4 @@
-import type { MessageType } from "$lib/types";
+import type { MessageType } from '$lib/types';
 
 export class MessageHandler {
   private port: chrome.runtime.Port;
diff --git a/src/content/Notification.svelte b/src/content/Notification.svelte
index a1cd991..2ad023c 100644
--- a/src/content/Notification.svelte
+++ b/src/content/Notification.svelte
@@ -1,21 +1,21 @@
 <script lang="ts">
   import { fade } from 'svelte/transition';
   import { onMount } from 'svelte';
-  
+
   export let type: 'info' | 'error' | 'success' = 'info';
   export let message: string = '';
   export let duration: number = 5000;
   export let onClose: () => void;
-  
+
   let visible = true;
-  
+
   onMount(() => {
     if (duration > 0) {
       const timer = setTimeout(() => {
         visible = false;
         onClose();
       }, duration);
-      
+
       return () => clearTimeout(timer);
     }
   });
@@ -29,20 +29,12 @@
 </script>
 
 {#if visible}
-  <div
-    transition:fade
-    class="notification {getTypeClass()}"
-    role="alert"
-  >
+  <div transition:fade class="notification {getTypeClass()}" role="alert">
     <div class="notification-content">
       <div class="notification-message">
         {message}
       </div>
-      <button
-        on:click={handleClose}
-        class="notification-close"
-        aria-label="Close notification"
-      >
+      <button on:click={handleClose} class="notification-close" aria-label="Close notification">
         ✕
       </button>
     </div>
@@ -59,7 +51,7 @@
     padding: 1rem;
     border-radius: 4px;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
   }
 
   .notification-content {
diff --git a/src/content/UIManager.ts b/src/content/UIManager.ts
index aee0893..22f358c 100644
--- a/src/content/UIManager.ts
+++ b/src/content/UIManager.ts
@@ -71,8 +71,8 @@ export class UIManager {
           this.notificationComponent?.$destroy();
           this.notificationComponent = null;
           container.remove();
-        }
-      }
+        },
+      },
     });
   }
 
@@ -116,7 +116,7 @@ export class UIManager {
     }
 
     this.uploadStatusComponent = new UploadStatus({
-      target
+      target,
     });
   }
 
@@ -165,7 +165,7 @@ export class UIManager {
       'enabled:hover:bg-bolt-elements-button-secondary-backgroundHover',
       'flex',
       'gap-1.7',
-      'transition-opacity'
+      'transition-opacity',
     ].join(' ');
 
     button.innerHTML = `
@@ -192,7 +192,9 @@ export class UIManager {
       return;
     }
 
-    const { confirmed, commitMessage } = await this.showGitHubConfirmation(settings.gitHubSettings?.projectSettings || {});
+    const { confirmed, commitMessage } = await this.showGitHubConfirmation(
+      settings.gitHubSettings?.projectSettings || {}
+    );
     if (!confirmed) return;
 
     try {
@@ -213,30 +215,28 @@ export class UIManager {
       this.isGitHubUpload = true;
       this.messageHandler.sendCommitMessage(commitMessage || 'Commit from Bolt to GitHub');
 
-      this.findAndClickDownloadButton();  // This will close the dropdown
+      this.findAndClickDownloadButton(); // This will close the dropdown
     } catch (error) {
-        console.error('Error during GitHub upload:', error);
-        throw new Error('Failed to trigger download. The page structure may have changed.');
+      console.error('Error during GitHub upload:', error);
+      throw new Error('Failed to trigger download. The page structure may have changed.');
     }
   }
 
   private findAndClickExportButton() {
-    const exportButton = Array.from(document.querySelectorAll('button[aria-haspopup="menu"]'))
-      .find(btn => 
-        btn.textContent?.includes('Export') && 
-        btn.querySelector('.i-ph\\:export')
-      ) as HTMLButtonElement;
-    
+    const exportButton = Array.from(document.querySelectorAll('button[aria-haspopup="menu"]')).find(
+      (btn) => btn.textContent?.includes('Export') && btn.querySelector('.i-ph\\:export')
+    ) as HTMLButtonElement;
+
     if (!exportButton) {
-        throw new Error('Export button not found');
+      throw new Error('Export button not found');
     }
     console.log('Found export button:', exportButton);
-    
+
     // Dispatch keydown event to open dropdown
-    const keydownEvent = new KeyboardEvent('keydown', { 
-        key: 'Enter',
-        bubbles: true,
-        cancelable: true 
+    const keydownEvent = new KeyboardEvent('keydown', {
+      key: 'Enter',
+      bubbles: true,
+      cancelable: true,
     });
     exportButton.dispatchEvent(keydownEvent);
     console.log('Dispatched keydown to export button');
@@ -245,24 +245,24 @@ export class UIManager {
   async findAndClickDownloadButton() {
     this.findAndClickExportButton();
 
-      // Wait a bit for the dropdown content to render
-    await new Promise(resolve => setTimeout(resolve, 200));
+    // Wait a bit for the dropdown content to render
+    await new Promise((resolve) => setTimeout(resolve, 200));
 
-      // Find the dropdown content
+    // Find the dropdown content
     const dropdownContent = document.querySelector('[role="menu"], [data-radix-menu-content]');
     if (!dropdownContent) {
-        throw new Error('Dropdown content not found');
+      throw new Error('Dropdown content not found');
     }
 
-      // Find download button
-    const downloadButton = Array.from(dropdownContent.querySelectorAll('button')).find(button => {
-        const hasIcon = button.querySelector('.i-ph\\:download-simple');
-        const hasText = button.textContent?.toLowerCase().includes('download');
-        return hasIcon || hasText;
+    // Find download button
+    const downloadButton = Array.from(dropdownContent.querySelectorAll('button')).find((button) => {
+      const hasIcon = button.querySelector('.i-ph\\:download-simple');
+      const hasText = button.textContent?.toLowerCase().includes('download');
+      return hasIcon || hasText;
     });
 
     if (!downloadButton) {
-        throw new Error('Download button not found in dropdown');
+      throw new Error('Download button not found in dropdown');
     }
 
     console.log('Found download button, clicking...');
@@ -270,18 +270,14 @@ export class UIManager {
   }
 
   // Function to show confirmation dialog
-  private showGitHubConfirmation = (projectSettings: Record<string, { repoName: string; branch: string }>): Promise<{ confirmed: boolean; commitMessage?: string }> => {
+  private showGitHubConfirmation = (
+    projectSettings: Record<string, { repoName: string; branch: string }>
+  ): Promise<{ confirmed: boolean; commitMessage?: string }> => {
     return new Promise((resolve) => {
       const overlay = document.createElement('div');
       overlay.style.zIndex = '9999';
       overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
-      overlay.className = [
-        'fixed',
-        'inset-0',
-        'flex',
-        'items-center',
-        'justify-center'
-      ].join(' ');
+      overlay.className = ['fixed', 'inset-0', 'flex', 'items-center', 'justify-center'].join(' ');
 
       const dialog = document.createElement('div');
       dialog.style.zIndex = '10000';
@@ -295,7 +291,7 @@ export class UIManager {
         'space-y-4',
         'border',
         'border-slate-700',
-        'relative'
+        'relative',
       ].join(' ');
 
       dialog.innerHTML = `
@@ -339,7 +335,9 @@ export class UIManager {
       });
 
       dialog.querySelector('#confirm-upload')?.addEventListener('click', () => {
-        const commitMessage = (dialog.querySelector('#commit-message') as HTMLInputElement)?.value || 'Commit from Bolt to GitHub';
+        const commitMessage =
+          (dialog.querySelector('#commit-message') as HTMLInputElement)?.value ||
+          'Commit from Bolt to GitHub';
         document.body.removeChild(overlay);
         resolve({ confirmed: true, commitMessage });
       });
@@ -362,7 +360,7 @@ export class UIManager {
       'flex',
       'items-center',
       'gap-2',
-      'text-sm'
+      'text-sm',
     ].join(' ');
 
     notification.innerHTML = `
@@ -435,23 +433,27 @@ export class UIManager {
   private setupClickListeners() {
     let clickSource: HTMLElement | null = null;
 
-    document.addEventListener('click', async (e) => {
-      const target = e.target as HTMLElement;
-      clickSource = target;
-
-      if (target instanceof HTMLElement) {
-        const downloadElement = target.closest('a[download], button[download]');
-        if (downloadElement) {
-          const isFromGitHubButton = target.closest('[data-github-upload]') !== null;
-
-          if (isFromGitHubButton || this.isGitHubUpload) {
-            e.preventDefault();
-            e.stopPropagation();
-            await this.handleDownloadInterception();
+    document.addEventListener(
+      'click',
+      async (e) => {
+        const target = e.target as HTMLElement;
+        clickSource = target;
+
+        if (target instanceof HTMLElement) {
+          const downloadElement = target.closest('a[download], button[download]');
+          if (downloadElement) {
+            const isFromGitHubButton = target.closest('[data-github-upload]') !== null;
+
+            if (isFromGitHubButton || this.isGitHubUpload) {
+              e.preventDefault();
+              e.stopPropagation();
+              await this.handleDownloadInterception();
+            }
           }
         }
-      }
-    }, true);
+      },
+      true
+    );
   }
 
   private async handleDownloadInterception() {
@@ -508,8 +510,9 @@ export class UIManager {
       } else if (retryCount >= maxRetries) {
         this.showNotification({
           type: 'error',
-          message: 'Failed to initialize GitHub upload button. Please try to refresh the page. If the issue persists, please submit an issue on GitHub.',
-          duration: 7000
+          message:
+            'Failed to initialize GitHub upload button. Please try to refresh the page. If the issue persists, please submit an issue on GitHub.',
+          duration: 7000,
         });
         retryCount = 0; // Reset for future attempts
       }
@@ -526,14 +529,14 @@ export class UIManager {
     if (document.body) {
       this.observer.observe(document.body, {
         childList: true,
-        subtree: true
+        subtree: true,
       });
     } else {
       // If body isn't available, wait for it
       document.addEventListener('DOMContentLoaded', () => {
         this.observer?.observe(document.body, {
           childList: true,
-          subtree: true
+          subtree: true,
         });
       });
     }
diff --git a/src/content/UploadStatus.svelte b/src/content/UploadStatus.svelte
index aee3ba9..5990534 100644
--- a/src/content/UploadStatus.svelte
+++ b/src/content/UploadStatus.svelte
@@ -6,21 +6,21 @@
   export let status: UploadStatusState = {
     status: 'idle',
     message: '',
-    progress: 0
+    progress: 0,
   };
-  
+
   let notificationVisible = false;
-  
+
   // Watch for status changes and update UI accordingly
   $: updateNotificationUI(status);
 
   function updateNotificationUI(newStatus: UploadStatusState) {
     if (newStatus.status === 'success') {
-      console.log('🔄 Success status received, setting notification to auto-hide'); 
+      console.log('🔄 Success status received, setting notification to auto-hide');
     }
 
     // console.log('🔄 Updating notification:', newStatus);
-    
+
     if (newStatus.status === 'idle') {
       notificationVisible = false;
       return;
@@ -60,9 +60,10 @@
       style="margin-top: 40px; margin-right: 10px;"
     >
       <div class="flex items-center justify-between mb-2">
-        <span class="font-medium status-text" 
-          class:text-gray-100={status.status === 'uploading'} 
-          class:text-green-400={status.status === 'success'} 
+        <span
+          class="font-medium status-text"
+          class:text-gray-100={status.status === 'uploading'}
+          class:text-green-400={status.status === 'success'}
           class:text-red-400={status.status === 'error'}
         >
           {#if status.status === 'uploading'}
@@ -79,13 +80,22 @@
             class="close-button text-gray-400 hover:text-gray-200 transition-colors p-0.5 rounded hover:bg-white/10"
             on:click={closeNotification}
           >
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-              <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="h-5 w-5"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                clip-rule="evenodd"
+              />
             </svg>
           </button>
         </div>
       </div>
-      
+
       <div class="w-full bg-gray-700 rounded-full h-2.5 mb-2">
         <div
           class="h-2.5 rounded-full transition-all duration-300"
@@ -95,7 +105,7 @@
           style="width: {status.progress || 0}%"
         ></div>
       </div>
-      
+
       <p class="text-sm text-gray-300">{status.message || ''}</p>
     </div>
   {/if}
@@ -103,11 +113,21 @@
 
 <style>
   .bolt-notification {
-    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+    font-family:
+      ui-sans-serif,
+      system-ui,
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Arial,
+      'Noto Sans',
+      sans-serif;
     backdrop-filter: none;
     background-color: rgb(31, 41, 55);
   }
-  
+
   .bolt-notification.hidden {
     transform: translateY(-150%);
     opacity: 0;
diff --git a/src/lib/common.ts b/src/lib/common.ts
index 0e4a5a6..e164af0 100644
--- a/src/lib/common.ts
+++ b/src/lib/common.ts
@@ -1,9 +1,9 @@
 // Safely converts a string to base64, handling Unicode characters
 export const toBase64 = (str: string): string => {
-    const utf8Bytes = new TextEncoder().encode(str);
-    let binaryString = '';
-    utf8Bytes.forEach(byte => {
-      binaryString += String.fromCharCode(byte);
-    });
-    return btoa(binaryString);
-}
+  const utf8Bytes = new TextEncoder().encode(str);
+  let binaryString = '';
+  utf8Bytes.forEach((byte) => {
+    binaryString += String.fromCharCode(byte);
+  });
+  return btoa(binaryString);
+};
diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
index 7ea0080..cd18807 100644
--- a/src/lib/components/Footer.svelte
+++ b/src/lib/components/Footer.svelte
@@ -1,8 +1,15 @@
 <script lang="ts">
-    import { CardFooter } from "$lib/components/ui/card";
-    import { AUTHOR_SITE, AUTHOR, COMPANY_SITE, COMPANY } from "$lib/constants";
+  import { CardFooter } from '$lib/components/ui/card';
+  import { AUTHOR_SITE, AUTHOR, COMPANY_SITE, COMPANY } from '$lib/constants';
 </script>
 
 <CardFooter class="text-sm text-slate-400 justify-center">
-  <span>Created by <a href={AUTHOR_SITE} target="_blank" class="text-slate-200 hover:text-slate-50">{AUTHOR}</a> of <a href={COMPANY_SITE} target="_blank" class="text-slate-200 hover:text-slate-50">{COMPANY}</a></span>
+  <span
+    >Created by <a href={AUTHOR_SITE} target="_blank" class="text-slate-200 hover:text-slate-50"
+      >{AUTHOR}</a
+    >
+    of
+    <a href={COMPANY_SITE} target="_blank" class="text-slate-200 hover:text-slate-50">{COMPANY}</a
+    ></span
+  >
 </CardFooter>
diff --git a/src/lib/components/GitHubSettings.svelte b/src/lib/components/GitHubSettings.svelte
index 607d578..ab72400 100644
--- a/src/lib/components/GitHubSettings.svelte
+++ b/src/lib/components/GitHubSettings.svelte
@@ -1,16 +1,11 @@
 <script lang="ts">
-  import { Button } from "$lib/components/ui/button";
-  import { Input } from "$lib/components/ui/input";
-  import { Label } from "$lib/components/ui/label";
-  import {
-    Check,
-    X,
-    Search,
-    Loader2,
-  } from "lucide-svelte";
+  import { Button } from '$lib/components/ui/button';
+  import { Input } from '$lib/components/ui/input';
+  import { Label } from '$lib/components/ui/label';
+  import { Check, X, Search, Loader2 } from 'lucide-svelte';
   import { onMount } from 'svelte';
-  import { GitHubService } from "../../services/GitHubService";
-  import NewUserGuide from "./github/NewUserGuide.svelte";
+  import { GitHubService } from '../../services/GitHubService';
+  import NewUserGuide from './github/NewUserGuide.svelte';
 
   export let isOnboarding: boolean = false;
   export let githubToken: string;
@@ -23,7 +18,7 @@
   export let projectId: string | null = null;
   export let projectSettings: Record<string, { repoName: string; branch: string }> = {};
   export let buttonDisabled: boolean = false;
-  
+
   let isValidatingToken = false;
   let isTokenValid: boolean | null = null;
   let tokenValidationTimeout: number;
@@ -39,25 +34,26 @@
   }> = [];
   let isLoadingRepos = false;
   let showRepoDropdown = false;
-  let repoSearchQuery = "";
+  let repoSearchQuery = '';
   let repoInputFocused = false;
   let repoExists = false;
   let selectedIndex = -1;
 
   $: filteredRepos = repositories
-    .filter(repo => 
-      repo.name.toLowerCase().includes(repoSearchQuery.toLowerCase()) ||
-      (repo.description && repo.description.toLowerCase().includes(repoSearchQuery.toLowerCase()))
+    .filter(
+      (repo) =>
+        repo.name.toLowerCase().includes(repoSearchQuery.toLowerCase()) ||
+        (repo.description && repo.description.toLowerCase().includes(repoSearchQuery.toLowerCase()))
     )
     .slice(0, 10);
 
   $: if (repoName) {
-    repoExists = repositories.some(repo => repo.name.toLowerCase() === repoName.toLowerCase());
+    repoExists = repositories.some((repo) => repo.name.toLowerCase() === repoName.toLowerCase());
   }
 
   async function loadRepositories() {
     if (!githubToken || !repoOwner || !isTokenValid) return;
-    
+
     try {
       isLoadingRepos = true;
       const githubService = new GitHubService(githubToken);
@@ -75,7 +71,7 @@
     onInput();
   }
 
-  function selectRepo(repo: typeof repositories[0]) {
+  function selectRepo(repo: (typeof repositories)[0]) {
     repoName = repo.name;
     showRepoDropdown = false;
     repoSearchQuery = repo.name;
@@ -142,7 +138,7 @@
       const result = await githubService.validateTokenAndUser(repoOwner);
       isTokenValid = result.isValid;
       validationError = result.error || null;
-      
+
       // Load repositories after successful validation
       if (result.isValid) {
         await loadRepositories();
@@ -160,12 +156,12 @@
     onInput();
     isTokenValid = null;
     validationError = null;
-    
+
     // Clear existing timeout
     if (tokenValidationTimeout) {
       clearTimeout(tokenValidationTimeout);
     }
-    
+
     // Debounce validation to avoid too many API calls
     tokenValidationTimeout = setTimeout(() => {
       validateSettings();
@@ -208,7 +204,9 @@
         {#if githubToken}
           <div class="absolute right-3 top-1/2 -translate-y-1/2">
             {#if isValidatingToken}
-              <div class="animate-spin h-4 w-4 border-2 border-slate-400 border-t-transparent rounded-full" />
+              <div
+                class="animate-spin h-4 w-4 border-2 border-slate-400 border-t-transparent rounded-full"
+              />
             {:else if isTokenValid === true}
               <Check class="h-4 w-4 text-green-500" />
             {:else if isTokenValid === false}
@@ -272,12 +270,17 @@
             </div>
           </div>
           {#if showRepoDropdown && (filteredRepos.length > 0 || !repoExists)}
-            <div class="absolute z-50 w-full mt-1 bg-slate-800 border border-slate-700 rounded-md shadow-lg">
+            <div
+              class="absolute z-50 w-full mt-1 bg-slate-800 border border-slate-700 rounded-md shadow-lg"
+            >
               <ul class="py-1 max-h-60 overflow-auto">
                 {#each filteredRepos as repo, i}
                   <li>
                     <button
-                      class="w-full px-3 py-2 text-left hover:bg-slate-700 text-slate-200 {selectedIndex === i ? 'bg-slate-700' : ''}"
+                      class="w-full px-3 py-2 text-left hover:bg-slate-700 text-slate-200 {selectedIndex ===
+                      i
+                        ? 'bg-slate-700'
+                        : ''}"
                       on:click={() => selectRepo(repo)}
                     >
                       <div class="flex items-center justify-between">
@@ -295,10 +298,19 @@
                 {#if !repoExists}
                   <li class="px-3 py-2 text-sm text-slate-400">
                     {#if repoName.length > 0}
-                      <p class="text-orange-400">💡If the repository "{repoName}" doesn't exist, it will be created automatically (as a public repository).</p>
-                      <p class="text-emerald-400">✨ If it's a private repository, you can still enter it manually even if it's not visible in the list.</p>
+                      <p class="text-orange-400">
+                        💡If the repository "{repoName}" doesn't exist, it will be created
+                        automatically (as a public repository).
+                      </p>
+                      <p class="text-emerald-400">
+                        ✨ If it's a private repository, you can still enter it manually even if
+                        it's not visible in the list.
+                      </p>
                     {:else}
-                      <p>Enter a repository name (new or private) or select from your public repositories</p>
+                      <p>
+                        Enter a repository name (new or private) or select from your public
+                        repositories
+                      </p>
                     {/if}
                   </li>
                 {/if}
@@ -307,9 +319,7 @@
           {/if}
         </div>
         {#if repoExists}
-          <p class="text-sm text-blue-400">
-            ℹ️ Using existing repository
-          </p>
+          <p class="text-sm text-blue-400">ℹ️ Using existing repository</p>
         {:else if repoName}
           <p class="text-sm text-emerald-400">
             ✨ A new repository will be created if it doesn't exist yet.
@@ -342,7 +352,12 @@
     <Button
       type="submit"
       class="w-full bg-blue-600 hover:bg-blue-700 text-white"
-      disabled={buttonDisabled || isValidatingToken || !githubToken || !repoOwner || (!isOnboarding && (!repoName || !branch)) || isTokenValid === false}
+      disabled={buttonDisabled ||
+        isValidatingToken ||
+        !githubToken ||
+        !repoOwner ||
+        (!isOnboarding && (!repoName || !branch)) ||
+        isTokenValid === false}
     >
       {#if isValidatingToken}
         Validating...
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index 45a0379..b4d7b33 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -1,23 +1,23 @@
 <script lang="ts">
-    import { Home, Settings, FolderGit2, HelpCircle } from "lucide-svelte";
-    import { TabsList, TabsTrigger } from "$lib/components/ui/tabs";
-  </script>
-  
-  <TabsList class="grid w-full grid-cols-4">
-    <TabsTrigger value="home" class="gap-2">
-      <Home class="h-4 w-4" />
-      Home
-    </TabsTrigger>
-    <TabsTrigger value="projects" class="gap-2">
-      <FolderGit2 class="h-4 w-4" />
-      Projects
-    </TabsTrigger>
-    <TabsTrigger value="settings" class="gap-2">
-      <Settings class="h-4 w-4" />
-      Settings
-    </TabsTrigger>
-    <TabsTrigger value="help" class="gap-2">
-      <HelpCircle class="h-4 w-4" />
-      Help
-    </TabsTrigger>
-  </TabsList>
+  import { Home, Settings, FolderGit2, HelpCircle } from 'lucide-svelte';
+  import { TabsList, TabsTrigger } from '$lib/components/ui/tabs';
+</script>
+
+<TabsList class="grid w-full grid-cols-4">
+  <TabsTrigger value="home" class="gap-2">
+    <Home class="h-4 w-4" />
+    Home
+  </TabsTrigger>
+  <TabsTrigger value="projects" class="gap-2">
+    <FolderGit2 class="h-4 w-4" />
+    Projects
+  </TabsTrigger>
+  <TabsTrigger value="settings" class="gap-2">
+    <Settings class="h-4 w-4" />
+    Settings
+  </TabsTrigger>
+  <TabsTrigger value="help" class="gap-2">
+    <HelpCircle class="h-4 w-4" />
+    Help
+  </TabsTrigger>
+</TabsList>
diff --git a/src/lib/components/Help.svelte b/src/lib/components/Help.svelte
index 2656a4c..5f33256 100644
--- a/src/lib/components/Help.svelte
+++ b/src/lib/components/Help.svelte
@@ -1,5 +1,11 @@
 <script lang="ts">
-  import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "$lib/components/ui/card";
+  import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+  } from '$lib/components/ui/card';
 </script>
 
 <Card class="border-slate-800 bg-slate-900">
@@ -18,15 +24,14 @@
       <p class="text-sm text-slate-400">
         2. Configure your GitHub settings with your personal access token
       </p>
-      <p class="text-sm text-slate-400">
-        3. Set your repository details and branch name
-      </p>
+      <p class="text-sm text-slate-400">3. Set your repository details and branch name</p>
     </div>
 
     <div class="space-y-2">
       <h3 class="text-lg font-semibold text-slate-200">Important Note</h3>
       <p class="text-sm text-slate-400">
-        ⚠️ This extension cannot function if Bolt encounters an error. Please ensure your Bolt project is working correctly before attempting to use this extension.
+        ⚠️ This extension cannot function if Bolt encounters an error. Please ensure your Bolt
+        project is working correctly before attempting to use this extension.
       </p>
     </div>
 
diff --git a/src/lib/components/ProjectsList.svelte b/src/lib/components/ProjectsList.svelte
index 027c68a..b580691 100644
--- a/src/lib/components/ProjectsList.svelte
+++ b/src/lib/components/ProjectsList.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { onMount } from 'svelte';
-  import { Button } from "$lib/components/ui/button";
-  import { Github, Import, Zap, X } from "lucide-svelte";
+  import { Button } from '$lib/components/ui/button';
+  import { Github, Import, Zap, X } from 'lucide-svelte';
   import { GitHubService } from '../../services/GitHubService';
 
   export let projectSettings: Record<string, { repoName: string; branch: string }>;
@@ -46,20 +46,23 @@
       projectId,
       repoName: settings.repoName,
       branch: settings.branch,
-      isPublicOnly: false
+      isPublicOnly: false,
     }));
 
-    const publicOnlyRepos = showPublicRepos ? publicRepos
-      .filter(repo => !Object.values(projectSettings).some(s => s.repoName === repo.name))
-      .map(repo => ({
-        repoName: repo.name,
-        isPublicOnly: true,
-        description: repo.description,
-        language: repo.language
-      })) : [];
+    const publicOnlyRepos = showPublicRepos
+      ? publicRepos
+          .filter((repo) => !Object.values(projectSettings).some((s) => s.repoName === repo.name))
+          .map((repo) => ({
+            repoName: repo.name,
+            isPublicOnly: true,
+            description: repo.description,
+            language: repo.language,
+          }))
+      : [];
 
-    filteredProjects = [...existingProjects, ...publicOnlyRepos]
-      .filter(project => project.repoName.toLowerCase().includes(searchQuery.toLowerCase()));
+    filteredProjects = [...existingProjects, ...publicOnlyRepos].filter((project) =>
+      project.repoName.toLowerCase().includes(searchQuery.toLowerCase())
+    );
   }
 
   onMount(async () => {
@@ -103,7 +106,7 @@
           variant="ghost"
           size="icon"
           class="absolute right-1 top-1/2 -translate-y-1/2 h-7 w-7"
-          on:click={() => searchQuery = ''}
+          on:click={() => (searchQuery = '')}
         >
           <X class="h-4 w-4" />
         </Button>
@@ -123,25 +126,35 @@
     <div class="flex flex-col items-center justify-center p-4 text-center space-y-6">
       <div class="space-y-2">
         {#if !isBoltSite}
-        <Button
-          variant="outline"
-          class="border-slate-800 hover:bg-slate-800 text-slate-200"
-          on:click={() => window.open('https://bolt.new', '_blank')}
-        >
-          Go to bolt.new
-        </Button>
-      {/if}
-        <p class="text-sm text-green-400">💡 No Bolt projects found. Create or load an existing Bolt project to get started.</p>
-        <p class="text-sm text-green-400">🌟 You can also load any of your public GitHub repositories.</p>
+          <Button
+            variant="outline"
+            class="border-slate-800 hover:bg-slate-800 text-slate-200"
+            on:click={() => window.open('https://bolt.new', '_blank')}
+          >
+            Go to bolt.new
+          </Button>
+        {/if}
+        <p class="text-sm text-green-400">
+          💡 No Bolt projects found. Create or load an existing Bolt project to get started.
+        </p>
+        <p class="text-sm text-green-400">
+          🌟 You can also load any of your public GitHub repositories.
+        </p>
       </div>
     </div>
   {:else}
     {#each filteredProjects as project}
-      <div class="border border-slate-800 rounded-lg p-3 hover:bg-slate-800/50 transition-colors group {project.projectId === currentlyLoadedProjectId ? 'bg-slate-800/30 border-slate-700' : ''}">
+      <div
+        class="border border-slate-800 rounded-lg p-3 hover:bg-slate-800/50 transition-colors group {project.projectId ===
+        currentlyLoadedProjectId
+          ? 'bg-slate-800/30 border-slate-700'
+          : ''}"
+      >
         <div class="flex items-center justify-between">
           <div class="space-y-0.5">
             <h3 class="font-medium">
-              {project.repoName} {project.branch ? `(${project.branch})` : ''}
+              {project.repoName}
+              {project.branch ? `(${project.branch})` : ''}
               {#if project.projectId === currentlyLoadedProjectId}
                 <span class="text-xs text-emerald-500 ml-2">(Current)</span>
               {/if}
@@ -151,7 +164,9 @@
             </h3>
             <div class="flex flex-col gap-1 text-xs text-slate-400">
               {#if project.projectId}
-                <p>Bolt ID: {project.projectId} ({commitCounts[project.projectId] ?? '...'} commits)</p>
+                <p>
+                  Bolt ID: {project.projectId} ({commitCounts[project.projectId] ?? '...'} commits)
+                </p>
               {/if}
               {#if project.description}
                 <p>{project.description}</p>
@@ -198,4 +213,4 @@
       </div>
     {/each}
   {/if}
-</div> 
\ No newline at end of file
+</div>
diff --git a/src/lib/components/SocialLinks.svelte b/src/lib/components/SocialLinks.svelte
index dd1d006..ed8507f 100644
--- a/src/lib/components/SocialLinks.svelte
+++ b/src/lib/components/SocialLinks.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { Coffee, GithubIcon, YoutubeIcon } from "lucide-svelte";
-  import { Button } from "$lib/components/ui/button";
+  import { Coffee, GithubIcon, YoutubeIcon } from 'lucide-svelte';
+  import { Button } from '$lib/components/ui/button';
 
   export let GITHUB_LINK: string;
   export let YOUTUBE_LINK: string;
diff --git a/src/lib/components/StatusAlert.svelte b/src/lib/components/StatusAlert.svelte
index a7b714f..084fae3 100644
--- a/src/lib/components/StatusAlert.svelte
+++ b/src/lib/components/StatusAlert.svelte
@@ -1,11 +1,7 @@
 <script lang="ts">
-  import { AlertTriangle } from "lucide-svelte";
-  import {
-    Alert,
-    AlertDescription,
-    AlertTitle,
-  } from "$lib/components/ui/alert";
-  import { createEventDispatcher } from "svelte";
+  import { AlertTriangle } from 'lucide-svelte';
+  import { Alert, AlertDescription, AlertTitle } from '$lib/components/ui/alert';
+  import { createEventDispatcher } from 'svelte';
 
   export let isSettingsValid: boolean;
   export let projectId: string | null;
@@ -20,7 +16,7 @@
   function handleConfigClick(event: MouseEvent | KeyboardEvent) {
     event.stopPropagation();
     if (!isSettingsValid) {
-      dispatch("switchTab", "settings");
+      dispatch('switchTab', 'settings');
     }
   }
 
@@ -36,8 +32,7 @@
   <div
     class="cursor-pointer"
     on:click|stopPropagation={handleConfigClick}
-    on:keydown|stopPropagation={(e) =>
-      e.key === "Enter" && handleConfigClick(e)}
+    on:keydown|stopPropagation={(e) => e.key === 'Enter' && handleConfigClick(e)}
     role="button"
     tabindex={0}
   >
@@ -57,10 +52,10 @@
     <AlertTitle>Ready to Use</AlertTitle>
     <AlertDescription class="text-slate-300">
       Your GitHub configuration is set up and ready to go!
-      <div 
+      <div
         class="mt-2 grid grid-cols-[auto_1fr] gap-x-2 bg-slate-900/50 p-2 rounded-sm cursor-pointer hover:bg-slate-900/70 transition-colors group"
-        on:click={() => dispatch("switchTab", "settings")}
-        on:keydown={(e) => e.key === "Enter" && dispatch("switchTab", "settings")}
+        on:click={() => dispatch('switchTab', 'settings')}
+        on:keydown={(e) => e.key === 'Enter' && dispatch('switchTab', 'settings')}
         role="button"
         tabindex={0}
       >
diff --git a/src/lib/components/github/NewUserGuide.svelte b/src/lib/components/github/NewUserGuide.svelte
index a5f39f3..9bae04e 100644
--- a/src/lib/components/github/NewUserGuide.svelte
+++ b/src/lib/components/github/NewUserGuide.svelte
@@ -1,105 +1,94 @@
 <script>
-    import { TUTORIAL_LINK } from "$lib/constants";
-    import {
-        AlertCircle,
-        ChevronUp,
-        ChevronDown,
-        ExternalLink,
-        Youtube,
-        Github,
-    } from "lucide-svelte";
-    import {
-        GITHUB_SIGNUP_URL,
-        CREATE_TOKEN_URL,
-    } from "../../../services/GitHubService";
-    import { onMount } from "svelte";
+  import { TUTORIAL_LINK } from '$lib/constants';
+  import {
+    AlertCircle,
+    ChevronUp,
+    ChevronDown,
+    ExternalLink,
+    Youtube,
+    Github,
+  } from 'lucide-svelte';
+  import { GITHUB_SIGNUP_URL, CREATE_TOKEN_URL } from '../../../services/GitHubService';
+  import { onMount } from 'svelte';
 
-    let showNewUserGuide = true;
+  let showNewUserGuide = true;
 
-    function toggleNewUserGuide() {
-        showNewUserGuide = !showNewUserGuide;
-        chrome.storage.local.set({ showNewUserGuide });
-    }
+  function toggleNewUserGuide() {
+    showNewUserGuide = !showNewUserGuide;
+    chrome.storage.local.set({ showNewUserGuide });
+  }
 
-    onMount(() => {
-        chrome.storage.local.get(["showNewUserGuide"], (result) => {
-            showNewUserGuide = result.showNewUserGuide ?? true;
-        });
+  onMount(() => {
+    chrome.storage.local.get(['showNewUserGuide'], (result) => {
+      showNewUserGuide = result.showNewUserGuide ?? true;
     });
+  });
 </script>
 
 <div class="rounded-lg bg-slate-800/50 border border-slate-700">
-    <button
-        on:click={toggleNewUserGuide}
-        class="w-full p-4 flex items-center justify-between text-left"
-    >
-        <h3 class="font-medium text-slate-200 flex items-center gap-2">
-            <AlertCircle size={16} />
-            New to GitHub?
-        </h3>
-        {#if showNewUserGuide}
-            <ChevronUp
-                size={16}
-                class="transition-transform duration-300 text-slate-400"
-            />
-        {:else}
-            <ChevronDown
-                size={16}
-                class="transition-transform duration-300 text-slate-400"
-            />
-        {/if}
-    </button>
+  <button
+    on:click={toggleNewUserGuide}
+    class="w-full p-4 flex items-center justify-between text-left"
+  >
+    <h3 class="font-medium text-slate-200 flex items-center gap-2">
+      <AlertCircle size={16} />
+      New to GitHub?
+    </h3>
     {#if showNewUserGuide}
-        <div class="px-4 pb-4 space-y-2">
-            <div class="space-y-2 text-sm text-slate-400">
-                <p>Follow these steps to get started:</p>
-                <ol class="list-decimal list-inside space-y-1 ml-2">
-                    <li>
-                        <a
-                            href={GITHUB_SIGNUP_URL}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            class="text-blue-400 hover:underline inline-flex items-center gap-1"
-                        >
-                            Create a GitHub account
-                            <ExternalLink size={12} />
-                        </a>
-                    </li>
-                    <li>
-                        <a
-                            href={CREATE_TOKEN_URL}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            class="text-blue-400 hover:underline inline-flex items-center gap-1"
-                        >
-                            Generate a GitHub token
-                            <ExternalLink size={12} />
-                        </a>
-                    </li>
-                </ol>
-            </div>
-            <div
-                class="flex items-center gap-2 mt-2 pt-2 border-t border-slate-700"
-            >
-                <a
-                    href={TUTORIAL_LINK}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    class="inline-flex items-center gap-2 text-sm text-red-400 hover:text-red-300"
-                >
-                    <Youtube size={16} />
-                    Watch Setup Tutorial
-                </a>
-                <a
-                    href="https://github.com"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    class="inline-flex items-center gap-2 text-sm text-slate-400 hover:text-slate-300"
-                >
-                    <Github size={16} />
-                    Visit GitHub
-                </a>
-            </div>
-        </div>
+      <ChevronUp size={16} class="transition-transform duration-300 text-slate-400" />
+    {:else}
+      <ChevronDown size={16} class="transition-transform duration-300 text-slate-400" />
     {/if}
+  </button>
+  {#if showNewUserGuide}
+    <div class="px-4 pb-4 space-y-2">
+      <div class="space-y-2 text-sm text-slate-400">
+        <p>Follow these steps to get started:</p>
+        <ol class="list-decimal list-inside space-y-1 ml-2">
+          <li>
+            <a
+              href={GITHUB_SIGNUP_URL}
+              target="_blank"
+              rel="noopener noreferrer"
+              class="text-blue-400 hover:underline inline-flex items-center gap-1"
+            >
+              Create a GitHub account
+              <ExternalLink size={12} />
+            </a>
+          </li>
+          <li>
+            <a
+              href={CREATE_TOKEN_URL}
+              target="_blank"
+              rel="noopener noreferrer"
+              class="text-blue-400 hover:underline inline-flex items-center gap-1"
+            >
+              Generate a GitHub token
+              <ExternalLink size={12} />
+            </a>
+          </li>
+        </ol>
+      </div>
+      <div class="flex items-center gap-2 mt-2 pt-2 border-t border-slate-700">
+        <a
+          href={TUTORIAL_LINK}
+          target="_blank"
+          rel="noopener noreferrer"
+          class="inline-flex items-center gap-2 text-sm text-red-400 hover:text-red-300"
+        >
+          <Youtube size={16} />
+          Watch Setup Tutorial
+        </a>
+        <a
+          href="https://github.com"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="inline-flex items-center gap-2 text-sm text-slate-400 hover:text-slate-300"
+        >
+          <Github size={16} />
+          Visit GitHub
+        </a>
+      </div>
+    </div>
+  {/if}
 </div>
diff --git a/src/lib/components/ui/alert/alert-description.svelte b/src/lib/components/ui/alert/alert-description.svelte
index 5bbc85a..3a8b065 100644
--- a/src/lib/components/ui/alert/alert-description.svelte
+++ b/src/lib/components/ui/alert/alert-description.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn } from '$lib/utils.js';
 
-	type $$Props = HTMLAttributes<HTMLDivElement>;
+  type $$Props = HTMLAttributes<HTMLDivElement>;
 
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+  let className: $$Props['class'] = undefined;
+  export { className as class };
 </script>
 
-<div class={cn("text-sm [&_p]:leading-relaxed", className)} {...$$restProps}>
-	<slot />
+<div class={cn('text-sm [&_p]:leading-relaxed', className)} {...$$restProps}>
+  <slot />
 </div>
diff --git a/src/lib/components/ui/alert/alert-title.svelte b/src/lib/components/ui/alert/alert-title.svelte
index 2795342..46d86bf 100644
--- a/src/lib/components/ui/alert/alert-title.svelte
+++ b/src/lib/components/ui/alert/alert-title.svelte
@@ -1,21 +1,21 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import type { HeadingLevel } from "./index.js";
-	import { cn } from "$lib/utils.js";
+  import type { HTMLAttributes } from 'svelte/elements';
+  import type { HeadingLevel } from './index.js';
+  import { cn } from '$lib/utils.js';
 
-	type $$Props = HTMLAttributes<HTMLHeadingElement> & {
-		level?: HeadingLevel;
-	};
+  type $$Props = HTMLAttributes<HTMLHeadingElement> & {
+    level?: HeadingLevel;
+  };
 
-	let className: $$Props["class"] = undefined;
-	export let level: $$Props["level"] = "h5";
-	export { className as class };
+  let className: $$Props['class'] = undefined;
+  export let level: $$Props['level'] = 'h5';
+  export { className as class };
 </script>
 
 <svelte:element
-	this={level}
-	class={cn("mb-1 font-medium leading-none tracking-tight", className)}
-	{...$$restProps}
+  this={level}
+  class={cn('mb-1 font-medium leading-none tracking-tight', className)}
+  {...$$restProps}
 >
-	<slot />
+  <slot />
 </svelte:element>
diff --git a/src/lib/components/ui/alert/alert.svelte b/src/lib/components/ui/alert/alert.svelte
index e1aa6df..e0753ff 100644
--- a/src/lib/components/ui/alert/alert.svelte
+++ b/src/lib/components/ui/alert/alert.svelte
@@ -1,17 +1,17 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { type Variant, alertVariants } from "./index.js";
-	import { cn } from "$lib/utils.js";
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { type Variant, alertVariants } from './index.js';
+  import { cn } from '$lib/utils.js';
 
-	type $$Props = HTMLAttributes<HTMLDivElement> & {
-		variant?: Variant;
-	};
+  type $$Props = HTMLAttributes<HTMLDivElement> & {
+    variant?: Variant;
+  };
 
-	let className: $$Props["class"] = undefined;
-	export let variant: $$Props["variant"] = "default";
-	export { className as class };
+  let className: $$Props['class'] = undefined;
+  export let variant: $$Props['variant'] = 'default';
+  export { className as class };
 </script>
 
 <div class={cn(alertVariants({ variant }), className)} {...$$restProps} role="alert">
-	<slot />
+  <slot />
 </div>
diff --git a/src/lib/components/ui/alert/index.ts b/src/lib/components/ui/alert/index.ts
index 296f9e1..4174814 100644
--- a/src/lib/components/ui/alert/index.ts
+++ b/src/lib/components/ui/alert/index.ts
@@ -1,33 +1,33 @@
-import { type VariantProps, tv } from "tailwind-variants";
+import { type VariantProps, tv } from 'tailwind-variants';
 
-import Root from "./alert.svelte";
-import Description from "./alert-description.svelte";
-import Title from "./alert-title.svelte";
+import Root from './alert.svelte';
+import Description from './alert-description.svelte';
+import Title from './alert-title.svelte';
 
 export const alertVariants = tv({
-	base: "[&>svg]:text-foreground relative w-full rounded-lg border p-4 [&:has(svg)]:pl-11 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4",
+  base: '[&>svg]:text-foreground relative w-full rounded-lg border p-4 [&:has(svg)]:pl-11 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4',
 
-	variants: {
-		variant: {
-			default: "bg-background text-foreground",
-			destructive:
-				"border-destructive/50 text-destructive text-destructive dark:border-destructive [&>svg]:text-destructive",
-		},
-	},
-	defaultVariants: {
-		variant: "default",
-	},
+  variants: {
+    variant: {
+      default: 'bg-background text-foreground',
+      destructive:
+        'border-destructive/50 text-destructive text-destructive dark:border-destructive [&>svg]:text-destructive',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
 });
 
-export type Variant = VariantProps<typeof alertVariants>["variant"];
-export type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+export type Variant = VariantProps<typeof alertVariants>['variant'];
+export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 
 export {
-	Root,
-	Description,
-	Title,
-	//
-	Root as Alert,
-	Description as AlertDescription,
-	Title as AlertTitle,
+  Root,
+  Description,
+  Title,
+  //
+  Root as Alert,
+  Description as AlertDescription,
+  Title as AlertTitle,
 };
diff --git a/src/lib/components/ui/button/button.svelte b/src/lib/components/ui/button/button.svelte
index 86827f3..89b7d2b 100644
--- a/src/lib/components/ui/button/button.svelte
+++ b/src/lib/components/ui/button/button.svelte
@@ -1,25 +1,25 @@
 <script lang="ts">
-	import { Button as ButtonPrimitive } from "bits-ui";
-	import { type Events, type Props, buttonVariants } from "./index.js";
-	import { cn } from "$lib/utils.js";
+  import { Button as ButtonPrimitive } from 'bits-ui';
+  import { type Events, type Props, buttonVariants } from './index.js';
+  import { cn } from '$lib/utils.js';
 
-	type $$Props = Props;
-	type $$Events = Events;
+  type $$Props = Props;
+  type $$Events = Events;
 
-	let className: $$Props["class"] = undefined;
-	export let variant: $$Props["variant"] = "default";
-	export let size: $$Props["size"] = "default";
-	export let builders: $$Props["builders"] = [];
-	export { className as class };
+  let className: $$Props['class'] = undefined;
+  export let variant: $$Props['variant'] = 'default';
+  export let size: $$Props['size'] = 'default';
+  export let builders: $$Props['builders'] = [];
+  export { className as class };
 </script>
 
 <ButtonPrimitive.Root
-	{builders}
-	class={cn(buttonVariants({ variant, size, className }))}
-	type="button"
-	{...$$restProps}
-	on:click
-	on:keydown
+  {builders}
+  class={cn(buttonVariants({ variant, size, className }))}
+  type="button"
+  {...$$restProps}
+  on:click
+  on:keydown
 >
-	<slot />
+  <slot />
 </ButtonPrimitive.Root>
diff --git a/src/lib/components/ui/button/index.ts b/src/lib/components/ui/button/index.ts
index af1e188..6cf5e7c 100644
--- a/src/lib/components/ui/button/index.ts
+++ b/src/lib/components/ui/button/index.ts
@@ -1,49 +1,48 @@
-import { type VariantProps, tv } from "tailwind-variants";
-import type { Button as ButtonPrimitive } from "bits-ui";
-import Root from "./button.svelte";
+import { type VariantProps, tv } from 'tailwind-variants';
+import type { Button as ButtonPrimitive } from 'bits-ui';
+import Root from './button.svelte';
 
 const buttonVariants = tv({
-	base: "ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-	variants: {
-		variant: {
-			default: "bg-primary text-primary-foreground hover:bg-primary/90",
-			destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-			outline:
-				"border-input bg-background hover:bg-accent hover:text-accent-foreground border",
-			secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-			ghost: "hover:bg-accent hover:text-accent-foreground",
-			link: "text-primary underline-offset-4 hover:underline",
-		},
-		size: {
-			default: "h-10 px-4 py-2",
-			sm: "h-9 rounded-md px-3",
-			lg: "h-11 rounded-md px-8",
-			icon: "h-10 w-10",
-		},
-	},
-	defaultVariants: {
-		variant: "default",
-		size: "default",
-	},
+  base: 'ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  variants: {
+    variant: {
+      default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+      destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+      outline: 'border-input bg-background hover:bg-accent hover:text-accent-foreground border',
+      secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+      ghost: 'hover:bg-accent hover:text-accent-foreground',
+      link: 'text-primary underline-offset-4 hover:underline',
+    },
+    size: {
+      default: 'h-10 px-4 py-2',
+      sm: 'h-9 rounded-md px-3',
+      lg: 'h-11 rounded-md px-8',
+      icon: 'h-10 w-10',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+    size: 'default',
+  },
 });
 
-type Variant = VariantProps<typeof buttonVariants>["variant"];
-type Size = VariantProps<typeof buttonVariants>["size"];
+type Variant = VariantProps<typeof buttonVariants>['variant'];
+type Size = VariantProps<typeof buttonVariants>['size'];
 
 type Props = ButtonPrimitive.Props & {
-	variant?: Variant;
-	size?: Size;
+  variant?: Variant;
+  size?: Size;
 };
 
 type Events = ButtonPrimitive.Events;
 
 export {
-	Root,
-	type Props,
-	type Events,
-	//
-	Root as Button,
-	type Props as ButtonProps,
-	type Events as ButtonEvents,
-	buttonVariants,
+  Root,
+  type Props,
+  type Events,
+  //
+  Root as Button,
+  type Props as ButtonProps,
+  type Events as ButtonEvents,
+  buttonVariants,
 };
diff --git a/src/lib/components/ui/card/card-content.svelte b/src/lib/components/ui/card/card-content.svelte
index 748c644..e2dce55 100644
--- a/src/lib/components/ui/card/card-content.svelte
+++ b/src/lib/components/ui/card/card-content.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn } from '$lib/utils.js';
 
-	type $$Props = HTMLAttributes<HTMLDivElement>;
+  type $$Props = HTMLAttributes<HTMLDivElement>;
 
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+  let className: $$Props['class'] = undefined;
+  export { className as class };
 </script>
 
-<div class={cn("p-6", className)} {...$$restProps}>
-	<slot />
+<div class={cn('p-6', className)} {...$$restProps}>
+  <slot />
 </div>
diff --git a/src/lib/components/ui/card/card-description.svelte b/src/lib/components/ui/card/card-description.svelte
index f65821d..72ff678 100644
--- a/src/lib/components/ui/card/card-description.svelte
+++ b/src/lib/components/ui/card/card-description.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn } from '$lib/utils.js';
 
-	type $$Props = HTMLAttributes<HTMLParagraphElement>;
+  type $$Props = HTMLAttributes<HTMLParagraphElement>;
 
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+  let className: $$Props['class'] = undefined;
+  export { className as class };
 </script>
 
-<p class={cn("text-muted-foreground text-sm", className)} {...$$restProps}>
-	<slot />
+<p class={cn('text-muted-foreground text-sm', className)} {...$$restProps}>
+  <slot />
 </p>
diff --git a/src/lib/components/ui/card/card-footer.svelte b/src/lib/components/ui/card/card-footer.svelte
index 32f90bb..3d6a4b6 100644
--- a/src/lib/components/ui/card/card-footer.svelte
+++ b/src/lib/components/ui/card/card-footer.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn } from '$lib/utils.js';
 
-	type $$Props = HTMLAttributes<HTMLDivElement>;
+  type $$Props = HTMLAttributes<HTMLDivElement>;
 
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+  let className: $$Props['class'] = undefined;
+  export { className as class };
 </script>
 
-<div class={cn("flex items-center p-6 pt-0", className)} {...$$restProps}>
-	<slot />
+<div class={cn('flex items-center p-6 pt-0', className)} {...$$restProps}>
+  <slot />
 </div>
diff --git a/src/lib/components/ui/card/card-header.svelte b/src/lib/components/ui/card/card-header.svelte
index 9c65185..c9822c5 100644
--- a/src/lib/components/ui/card/card-header.svelte
+++ b/src/lib/components/ui/card/card-header.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn } from '$lib/utils.js';
 
-	type $$Props = HTMLAttributes<HTMLDivElement>;
+  type $$Props = HTMLAttributes<HTMLDivElement>;
 
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+  let className: $$Props['class'] = undefined;
+  export { className as class };
 </script>
 
-<div class={cn("flex flex-col space-y-1.5 p-6 pb-0", className)} {...$$restProps}>
-	<slot />
+<div class={cn('flex flex-col space-y-1.5 p-6 pb-0', className)} {...$$restProps}>
+  <slot />
 </div>
diff --git a/src/lib/components/ui/card/card-title.svelte b/src/lib/components/ui/card/card-title.svelte
index 719808e..37e4062 100644
--- a/src/lib/components/ui/card/card-title.svelte
+++ b/src/lib/components/ui/card/card-title.svelte
@@ -1,21 +1,21 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import type { HeadingLevel } from "./index.js";
-	import { cn } from "$lib/utils.js";
+  import type { HTMLAttributes } from 'svelte/elements';
+  import type { HeadingLevel } from './index.js';
+  import { cn } from '$lib/utils.js';
 
-	type $$Props = HTMLAttributes<HTMLHeadingElement> & {
-		tag?: HeadingLevel;
-	};
+  type $$Props = HTMLAttributes<HTMLHeadingElement> & {
+    tag?: HeadingLevel;
+  };
 
-	let className: $$Props["class"] = undefined;
-	export let tag: $$Props["tag"] = "h3";
-	export { className as class };
+  let className: $$Props['class'] = undefined;
+  export let tag: $$Props['tag'] = 'h3';
+  export { className as class };
 </script>
 
 <svelte:element
-	this={tag}
-	class={cn("text-lg font-semibold leading-none tracking-tight", className)}
-	{...$$restProps}
+  this={tag}
+  class={cn('text-lg font-semibold leading-none tracking-tight', className)}
+  {...$$restProps}
 >
-	<slot />
+  <slot />
 </svelte:element>
diff --git a/src/lib/components/ui/card/card.svelte b/src/lib/components/ui/card/card.svelte
index b69c15c..df7a81b 100644
--- a/src/lib/components/ui/card/card.svelte
+++ b/src/lib/components/ui/card/card.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn } from '$lib/utils.js';
 
-	type $$Props = HTMLAttributes<HTMLDivElement>;
+  type $$Props = HTMLAttributes<HTMLDivElement>;
 
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+  let className: $$Props['class'] = undefined;
+  export { className as class };
 </script>
 
 <div
-	class={cn("bg-card text-card-foreground rounded-lg border shadow-sm", className)}
-	{...$$restProps}
+  class={cn('bg-card text-card-foreground rounded-lg border shadow-sm', className)}
+  {...$$restProps}
 >
-	<slot />
+  <slot />
 </div>
diff --git a/src/lib/components/ui/card/index.ts b/src/lib/components/ui/card/index.ts
index bcc031d..1432839 100644
--- a/src/lib/components/ui/card/index.ts
+++ b/src/lib/components/ui/card/index.ts
@@ -1,24 +1,24 @@
-import Root from "./card.svelte";
-import Content from "./card-content.svelte";
-import Description from "./card-description.svelte";
-import Footer from "./card-footer.svelte";
-import Header from "./card-header.svelte";
-import Title from "./card-title.svelte";
+import Root from './card.svelte';
+import Content from './card-content.svelte';
+import Description from './card-description.svelte';
+import Footer from './card-footer.svelte';
+import Header from './card-header.svelte';
+import Title from './card-title.svelte';
 
 export {
-	Root,
-	Content,
-	Description,
-	Footer,
-	Header,
-	Title,
-	//
-	Root as Card,
-	Content as CardContent,
-	Description as CardDescription,
-	Footer as CardFooter,
-	Header as CardHeader,
-	Title as CardTitle,
+  Root,
+  Content,
+  Description,
+  Footer,
+  Header,
+  Title,
+  //
+  Root as Card,
+  Content as CardContent,
+  Description as CardDescription,
+  Footer as CardFooter,
+  Header as CardHeader,
+  Title as CardTitle,
 };
 
-export type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
diff --git a/src/lib/components/ui/input/index.ts b/src/lib/components/ui/input/index.ts
index 75e3bc2..1d669f9 100644
--- a/src/lib/components/ui/input/index.ts
+++ b/src/lib/components/ui/input/index.ts
@@ -1,29 +1,29 @@
-import Root from "./input.svelte";
+import Root from './input.svelte';
 
 export type FormInputEvent<T extends Event = Event> = T & {
-	currentTarget: EventTarget & HTMLInputElement;
+  currentTarget: EventTarget & HTMLInputElement;
 };
 export type InputEvents = {
-	blur: FormInputEvent<FocusEvent>;
-	change: FormInputEvent<Event>;
-	click: FormInputEvent<MouseEvent>;
-	focus: FormInputEvent<FocusEvent>;
-	focusin: FormInputEvent<FocusEvent>;
-	focusout: FormInputEvent<FocusEvent>;
-	keydown: FormInputEvent<KeyboardEvent>;
-	keypress: FormInputEvent<KeyboardEvent>;
-	keyup: FormInputEvent<KeyboardEvent>;
-	mouseover: FormInputEvent<MouseEvent>;
-	mouseenter: FormInputEvent<MouseEvent>;
-	mouseleave: FormInputEvent<MouseEvent>;
-	mousemove: FormInputEvent<MouseEvent>;
-	paste: FormInputEvent<ClipboardEvent>;
-	input: FormInputEvent<InputEvent>;
-	wheel: FormInputEvent<WheelEvent>;
+  blur: FormInputEvent<FocusEvent>;
+  change: FormInputEvent<Event>;
+  click: FormInputEvent<MouseEvent>;
+  focus: FormInputEvent<FocusEvent>;
+  focusin: FormInputEvent<FocusEvent>;
+  focusout: FormInputEvent<FocusEvent>;
+  keydown: FormInputEvent<KeyboardEvent>;
+  keypress: FormInputEvent<KeyboardEvent>;
+  keyup: FormInputEvent<KeyboardEvent>;
+  mouseover: FormInputEvent<MouseEvent>;
+  mouseenter: FormInputEvent<MouseEvent>;
+  mouseleave: FormInputEvent<MouseEvent>;
+  mousemove: FormInputEvent<MouseEvent>;
+  paste: FormInputEvent<ClipboardEvent>;
+  input: FormInputEvent<InputEvent>;
+  wheel: FormInputEvent<WheelEvent>;
 };
 
 export {
-	Root,
-	//
-	Root as Input,
+  Root,
+  //
+  Root as Input,
 };
diff --git a/src/lib/components/ui/input/input.svelte b/src/lib/components/ui/input/input.svelte
index cab1457..be4db6d 100644
--- a/src/lib/components/ui/input/input.svelte
+++ b/src/lib/components/ui/input/input.svelte
@@ -1,42 +1,42 @@
 <script lang="ts">
-	import type { HTMLInputAttributes } from "svelte/elements";
-	import type { InputEvents } from "./index.js";
-	import { cn } from "$lib/utils.js";
+  import type { HTMLInputAttributes } from 'svelte/elements';
+  import type { InputEvents } from './index.js';
+  import { cn } from '$lib/utils.js';
 
-	type $$Props = HTMLInputAttributes;
-	type $$Events = InputEvents;
+  type $$Props = HTMLInputAttributes;
+  type $$Events = InputEvents;
 
-	let className: $$Props["class"] = undefined;
-	export let value: $$Props["value"] = undefined;
-	export { className as class };
+  let className: $$Props['class'] = undefined;
+  export let value: $$Props['value'] = undefined;
+  export { className as class };
 
-	// Workaround for https://github.com/sveltejs/svelte/issues/9305
-	// Fixed in Svelte 5, but not backported to 4.x.
-	export let readonly: $$Props["readonly"] = undefined;
+  // Workaround for https://github.com/sveltejs/svelte/issues/9305
+  // Fixed in Svelte 5, but not backported to 4.x.
+  export let readonly: $$Props['readonly'] = undefined;
 </script>
 
 <input
-	class={cn(
-		"border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-		className
-	)}
-	bind:value
-	{readonly}
-	on:blur
-	on:change
-	on:click
-	on:focus
-	on:focusin
-	on:focusout
-	on:keydown
-	on:keypress
-	on:keyup
-	on:mouseover
-	on:mouseenter
-	on:mouseleave
-	on:mousemove
-	on:paste
-	on:input
-	on:wheel|passive
-	{...$$restProps}
+  class={cn(
+    'border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+    className
+  )}
+  bind:value
+  {readonly}
+  on:blur
+  on:change
+  on:click
+  on:focus
+  on:focusin
+  on:focusout
+  on:keydown
+  on:keypress
+  on:keyup
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+  on:mousemove
+  on:paste
+  on:input
+  on:wheel|passive
+  {...$$restProps}
 />
diff --git a/src/lib/components/ui/label/index.ts b/src/lib/components/ui/label/index.ts
index 8bfca0b..36fb393 100644
--- a/src/lib/components/ui/label/index.ts
+++ b/src/lib/components/ui/label/index.ts
@@ -1,7 +1,7 @@
-import Root from "./label.svelte";
+import Root from './label.svelte';
 
 export {
-	Root,
-	//
-	Root as Label,
+  Root,
+  //
+  Root as Label,
 };
diff --git a/src/lib/components/ui/label/label.svelte b/src/lib/components/ui/label/label.svelte
index 2a7d479..e90b812 100644
--- a/src/lib/components/ui/label/label.svelte
+++ b/src/lib/components/ui/label/label.svelte
@@ -1,21 +1,21 @@
 <script lang="ts">
-	import { Label as LabelPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+  import { Label as LabelPrimitive } from 'bits-ui';
+  import { cn } from '$lib/utils.js';
 
-	type $$Props = LabelPrimitive.Props;
-	type $$Events = LabelPrimitive.Events;
+  type $$Props = LabelPrimitive.Props;
+  type $$Events = LabelPrimitive.Events;
 
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+  let className: $$Props['class'] = undefined;
+  export { className as class };
 </script>
 
 <LabelPrimitive.Root
-	class={cn(
-		"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
-		className
-	)}
-	{...$$restProps}
-	on:mousedown
+  class={cn(
+    'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+    className
+  )}
+  {...$$restProps}
+  on:mousedown
 >
-	<slot />
+  <slot />
 </LabelPrimitive.Root>
diff --git a/src/lib/components/ui/tabs/index.ts b/src/lib/components/ui/tabs/index.ts
index f1ab372..e57b2e2 100644
--- a/src/lib/components/ui/tabs/index.ts
+++ b/src/lib/components/ui/tabs/index.ts
@@ -1,18 +1,18 @@
-import { Tabs as TabsPrimitive } from "bits-ui";
-import Content from "./tabs-content.svelte";
-import List from "./tabs-list.svelte";
-import Trigger from "./tabs-trigger.svelte";
+import { Tabs as TabsPrimitive } from 'bits-ui';
+import Content from './tabs-content.svelte';
+import List from './tabs-list.svelte';
+import Trigger from './tabs-trigger.svelte';
 
 const Root = TabsPrimitive.Root;
 
 export {
-	Root,
-	Content,
-	List,
-	Trigger,
-	//
-	Root as Tabs,
-	Content as TabsContent,
-	List as TabsList,
-	Trigger as TabsTrigger,
+  Root,
+  Content,
+  List,
+  Trigger,
+  //
+  Root as Tabs,
+  Content as TabsContent,
+  List as TabsList,
+  Trigger as TabsTrigger,
 };
diff --git a/src/lib/components/ui/tabs/tabs-content.svelte b/src/lib/components/ui/tabs/tabs-content.svelte
index b611559..688a806 100644
--- a/src/lib/components/ui/tabs/tabs-content.svelte
+++ b/src/lib/components/ui/tabs/tabs-content.svelte
@@ -1,21 +1,21 @@
 <script lang="ts">
-	import { Tabs as TabsPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+  import { Tabs as TabsPrimitive } from 'bits-ui';
+  import { cn } from '$lib/utils.js';
 
-	type $$Props = TabsPrimitive.ContentProps;
+  type $$Props = TabsPrimitive.ContentProps;
 
-	let className: $$Props["class"] = undefined;
-	export let value: $$Props["value"];
-	export { className as class };
+  let className: $$Props['class'] = undefined;
+  export let value: $$Props['value'];
+  export { className as class };
 </script>
 
 <TabsPrimitive.Content
-	class={cn(
-		"ring-offset-background focus-visible:ring-ring mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
-		className
-	)}
-	{value}
-	{...$$restProps}
+  class={cn(
+    'ring-offset-background focus-visible:ring-ring mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
+    className
+  )}
+  {value}
+  {...$$restProps}
 >
-	<slot />
+  <slot />
 </TabsPrimitive.Content>
diff --git a/src/lib/components/ui/tabs/tabs-list.svelte b/src/lib/components/ui/tabs/tabs-list.svelte
index 773c754..43d336f 100644
--- a/src/lib/components/ui/tabs/tabs-list.svelte
+++ b/src/lib/components/ui/tabs/tabs-list.svelte
@@ -1,19 +1,19 @@
 <script lang="ts">
-	import { Tabs as TabsPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+  import { Tabs as TabsPrimitive } from 'bits-ui';
+  import { cn } from '$lib/utils.js';
 
-	type $$Props = TabsPrimitive.ListProps;
+  type $$Props = TabsPrimitive.ListProps;
 
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+  let className: $$Props['class'] = undefined;
+  export { className as class };
 </script>
 
 <TabsPrimitive.List
-	class={cn(
-		"bg-muted text-muted-foreground inline-flex h-10 items-center justify-center rounded-md p-1",
-		className
-	)}
-	{...$$restProps}
+  class={cn(
+    'bg-muted text-muted-foreground inline-flex h-10 items-center justify-center rounded-md p-1',
+    className
+  )}
+  {...$$restProps}
 >
-	<slot />
+  <slot />
 </TabsPrimitive.List>
diff --git a/src/lib/components/ui/tabs/tabs-trigger.svelte b/src/lib/components/ui/tabs/tabs-trigger.svelte
index b99358d..fecc033 100644
--- a/src/lib/components/ui/tabs/tabs-trigger.svelte
+++ b/src/lib/components/ui/tabs/tabs-trigger.svelte
@@ -1,23 +1,23 @@
 <script lang="ts">
-	import { Tabs as TabsPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+  import { Tabs as TabsPrimitive } from 'bits-ui';
+  import { cn } from '$lib/utils.js';
 
-	type $$Props = TabsPrimitive.TriggerProps;
-	type $$Events = TabsPrimitive.TriggerEvents;
+  type $$Props = TabsPrimitive.TriggerProps;
+  type $$Events = TabsPrimitive.TriggerEvents;
 
-	let className: $$Props["class"] = undefined;
-	export let value: $$Props["value"];
-	export { className as class };
+  let className: $$Props['class'] = undefined;
+  export let value: $$Props['value'];
+  export { className as class };
 </script>
 
 <TabsPrimitive.Trigger
-	class={cn(
-		"ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm",
-		className
-	)}
-	{value}
-	{...$$restProps}
-	on:click
+  class={cn(
+    'ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm',
+    className
+  )}
+  {value}
+  {...$$restProps}
+  on:click
 >
-	<slot />
+  <slot />
 </TabsPrimitive.Trigger>
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index 280fb87..9003479 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -1,8 +1,8 @@
-export const AUTHOR = "AI-Driven Coder";
-export const COMPANY = "Codefrost";
-export const AUTHOR_SITE = "https://aidrivencoder.com";
-export const COMPANY_SITE = "https://codefrost.dev";
-export const GITHUB_LINK = "https://github.com/aidrivencoder";
-export const YOUTUBE_LINK = "https://youtube.com/@aidrivencoder";
-export const COFFEE_LINK = "https://www.buymeacoffee.com/aidrivencoder";
-export const TUTORIAL_LINK = "https://youtu.be/7C03DNw9ZHI";
+export const AUTHOR = 'AI-Driven Coder';
+export const COMPANY = 'Codefrost';
+export const AUTHOR_SITE = 'https://aidrivencoder.com';
+export const COMPANY_SITE = 'https://codefrost.dev';
+export const GITHUB_LINK = 'https://github.com/aidrivencoder';
+export const YOUTUBE_LINK = 'https://youtube.com/@aidrivencoder';
+export const COFFEE_LINK = 'https://www.buymeacoffee.com/aidrivencoder';
+export const TUTORIAL_LINK = 'https://youtu.be/7C03DNw9ZHI';
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 86cbff0..1252433 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -1,16 +1,16 @@
 export interface Port extends chrome.runtime.Port {
-    sender?: chrome.runtime.MessageSender;
+  sender?: chrome.runtime.MessageSender;
 }
-  
-export type MessageType = 
-    | 'ZIP_DATA' 
-    | 'UPLOAD_STATUS' 
-    | 'SET_COMMIT_MESSAGE' 
-    | 'DEBUG'
-    | 'CONTENT_SCRIPT_READY'
-    | 'GITHUB_SETTINGS_CHANGED'
-    | 'OPEN_SETTINGS';
-  
+
+export type MessageType =
+  | 'ZIP_DATA'
+  | 'UPLOAD_STATUS'
+  | 'SET_COMMIT_MESSAGE'
+  | 'DEBUG'
+  | 'CONTENT_SCRIPT_READY'
+  | 'GITHUB_SETTINGS_CHANGED'
+  | 'OPEN_SETTINGS';
+
 export interface Message {
   type: MessageType;
   data?: any;
@@ -26,9 +26,9 @@ export interface ProjectSetting {
 export type ProjectSettings = Record<string, ProjectSetting>;
 
 export interface GitHubSettingsInterface {
-    githubToken: string;
-    repoOwner: string;
-    projectSettings?: ProjectSettings;
+  githubToken: string;
+  repoOwner: string;
+  projectSettings?: ProjectSettings;
 }
 
 export type ProcessingStatus = 'idle' | 'uploading' | 'success' | 'error';
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 8871245..7239237 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -1,62 +1,56 @@
-import { type ClassValue, clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-import { cubicOut } from "svelte/easing";
-import type { TransitionConfig } from "svelte/transition";
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { cubicOut } from 'svelte/easing';
+import type { TransitionConfig } from 'svelte/transition';
 
 export function cn(...inputs: ClassValue[]) {
-	return twMerge(clsx(inputs));
+  return twMerge(clsx(inputs));
 }
 
 type FlyAndScaleParams = {
-	y?: number;
-	x?: number;
-	start?: number;
-	duration?: number;
+  y?: number;
+  x?: number;
+  start?: number;
+  duration?: number;
 };
 
 export const flyAndScale = (
-	node: Element,
-	params: FlyAndScaleParams = { y: -8, x: 0, start: 0.95, duration: 150 }
+  node: Element,
+  params: FlyAndScaleParams = { y: -8, x: 0, start: 0.95, duration: 150 }
 ): TransitionConfig => {
-	const style = getComputedStyle(node);
-	const transform = style.transform === "none" ? "" : style.transform;
-
-	const scaleConversion = (
-		valueA: number,
-		scaleA: [number, number],
-		scaleB: [number, number]
-	) => {
-		const [minA, maxA] = scaleA;
-		const [minB, maxB] = scaleB;
-
-		const percentage = (valueA - minA) / (maxA - minA);
-		const valueB = percentage * (maxB - minB) + minB;
-
-		return valueB;
-	};
-
-	const styleToString = (
-		style: Record<string, number | string | undefined>
-	): string => {
-		return Object.keys(style).reduce((str, key) => {
-			if (style[key] === undefined) return str;
-			return str + `${key}:${style[key]};`;
-		}, "");
-	};
-
-	return {
-		duration: params.duration ?? 200,
-		delay: 0,
-		css: (t) => {
-			const y = scaleConversion(t, [0, 1], [params.y ?? 5, 0]);
-			const x = scaleConversion(t, [0, 1], [params.x ?? 0, 0]);
-			const scale = scaleConversion(t, [0, 1], [params.start ?? 0.95, 1]);
-
-			return styleToString({
-				transform: `${transform} translate3d(${x}px, ${y}px, 0) scale(${scale})`,
-				opacity: t
-			});
-		},
-		easing: cubicOut
-	};
-};
\ No newline at end of file
+  const style = getComputedStyle(node);
+  const transform = style.transform === 'none' ? '' : style.transform;
+
+  const scaleConversion = (valueA: number, scaleA: [number, number], scaleB: [number, number]) => {
+    const [minA, maxA] = scaleA;
+    const [minB, maxB] = scaleB;
+
+    const percentage = (valueA - minA) / (maxA - minA);
+    const valueB = percentage * (maxB - minB) + minB;
+
+    return valueB;
+  };
+
+  const styleToString = (style: Record<string, number | string | undefined>): string => {
+    return Object.keys(style).reduce((str, key) => {
+      if (style[key] === undefined) return str;
+      return str + `${key}:${style[key]};`;
+    }, '');
+  };
+
+  return {
+    duration: params.duration ?? 200,
+    delay: 0,
+    css: (t) => {
+      const y = scaleConversion(t, [0, 1], [params.y ?? 5, 0]);
+      const x = scaleConversion(t, [0, 1], [params.x ?? 0, 0]);
+      const scale = scaleConversion(t, [0, 1], [params.start ?? 0.95, 1]);
+
+      return styleToString({
+        transform: `${transform} translate3d(${x}px, ${y}px, 0) scale(${scale})`,
+        opacity: t,
+      });
+    },
+    easing: cubicOut,
+  };
+};
diff --git a/src/lib/zip.ts b/src/lib/zip.ts
index 5d3476a..d1a9ca4 100644
--- a/src/lib/zip.ts
+++ b/src/lib/zip.ts
@@ -3,15 +3,15 @@ import { unzipSync } from 'fflate';
 export class ZipProcessor {
   static async processZipBlob(blob: Blob): Promise<Map<string, string>> {
     const files = new Map<string, string>();
-    
+
     try {
       // Convert blob to Uint8Array
       const arrayBuffer = await blob.arrayBuffer();
       const uint8Array = new Uint8Array(arrayBuffer);
-      
+
       // Use synchronous version instead of Promise-based unzip
       const unzipped = unzipSync(uint8Array);
-      
+
       // Process each file
       for (const [filename, content] of Object.entries(unzipped)) {
         // Convert Uint8Array to text
@@ -19,7 +19,7 @@ export class ZipProcessor {
         const text = decoder.decode(content);
         files.set(filename, text);
       }
-      
+
       return files;
     } catch (error: unknown) {
       const errorMessage = error instanceof Error ? error.message : 'Unknown error occurred';
diff --git a/src/popup/App.svelte b/src/popup/App.svelte
index d433cc0..bc5239d 100644
--- a/src/popup/App.svelte
+++ b/src/popup/App.svelte
@@ -1,36 +1,36 @@
 <script lang="ts">
-  import { onMount } from "svelte";
+  import { onMount } from 'svelte';
   import {
     Card,
     CardContent,
     CardDescription,
     CardHeader,
     CardTitle,
-  } from "$lib/components/ui/card";
-  import { Tabs, TabsContent } from "$lib/components/ui/tabs";
-  import Header from "$lib/components/Header.svelte";
-  import SocialLinks from "$lib/components/SocialLinks.svelte";
-  import StatusAlert from "$lib/components/StatusAlert.svelte";
-  import GitHubSettings from "$lib/components/GitHubSettings.svelte";
-  import { COFFEE_LINK, GITHUB_LINK, YOUTUBE_LINK } from "$lib/constants";
-  import Footer from "$lib/components/Footer.svelte";
-  import type { GitHubSettingsInterface } from "$lib/types";
-  import ProjectsList from "$lib/components/ProjectsList.svelte";
-  import { GitHubService } from "../services/GitHubService";
-  import { Button } from "$lib/components/ui/button";
-  import Help from "$lib/components/Help.svelte";
+  } from '$lib/components/ui/card';
+  import { Tabs, TabsContent } from '$lib/components/ui/tabs';
+  import Header from '$lib/components/Header.svelte';
+  import SocialLinks from '$lib/components/SocialLinks.svelte';
+  import StatusAlert from '$lib/components/StatusAlert.svelte';
+  import GitHubSettings from '$lib/components/GitHubSettings.svelte';
+  import { COFFEE_LINK, GITHUB_LINK, YOUTUBE_LINK } from '$lib/constants';
+  import Footer from '$lib/components/Footer.svelte';
+  import type { GitHubSettingsInterface } from '$lib/types';
+  import ProjectsList from '$lib/components/ProjectsList.svelte';
+  import { GitHubService } from '../services/GitHubService';
+  import { Button } from '$lib/components/ui/button';
+  import Help from '$lib/components/Help.svelte';
 
-  let githubToken: string = "";
-  let repoOwner = "";
-  let repoName = "";
-  let branch = "main";
+  let githubToken: string = '';
+  let repoOwner = '';
+  let repoName = '';
+  let branch = 'main';
   let projectSettings: Record<string, { repoName: string; branch: string }> = {};
-  let status = "";
+  let status = '';
   let uploadProgress = 0;
-  let uploadStatus = "idle";
-  let uploadMessage = "";
+  let uploadStatus = 'idle';
+  let uploadMessage = '';
   let isSettingsValid = false;
-  let activeTab = "home";
+  let activeTab = 'home';
   let currentUrl: string = '';
   let isBoltSite: boolean = false;
   let githubSettings: GitHubSettingsInterface;
@@ -48,7 +48,7 @@
       validationError = 'GitHub token is required';
       return false;
     }
-    
+
     try {
       isValidatingToken = true;
       const githubService = new GitHubService(token);
@@ -72,14 +72,14 @@
     // Add dark mode to the document
     document.documentElement.classList.add('dark');
 
-    githubSettings = await chrome.storage.sync.get([
-      "githubToken",
-      "repoOwner",
-      "projectSettings"
-    ]) as GitHubSettingsInterface;
+    githubSettings = (await chrome.storage.sync.get([
+      'githubToken',
+      'repoOwner',
+      'projectSettings',
+    ])) as GitHubSettingsInterface;
 
-    githubToken = githubSettings.githubToken || "";
-    repoOwner = githubSettings.repoOwner || "";
+    githubToken = githubSettings.githubToken || '';
+    repoOwner = githubSettings.repoOwner || '';
     projectSettings = githubSettings.projectSettings || {};
     hasInitialSettings = Boolean(githubSettings.githubToken && githubSettings.repoOwner);
 
@@ -93,7 +93,7 @@
     if (tabs[0]?.url) {
       currentUrl = tabs[0].url;
       isBoltSite = currentUrl.includes('bolt.new');
-      
+
       if (isBoltSite) {
         const match = currentUrl.match(/bolt\.new\/~\/([^\/]+)/);
         parsedProjectId = match?.[1] || null;
@@ -103,7 +103,10 @@
 
         if (match && parsedProjectId && projectId.projectId === parsedProjectId) {
           if (projectSettings[parsedProjectId]) {
-            console.log('📄 App: projectSettings[parsedProjectId]', projectSettings[parsedProjectId]);
+            console.log(
+              '📄 App: projectSettings[parsedProjectId]',
+              projectSettings[parsedProjectId]
+            );
             repoName = projectSettings[parsedProjectId].repoName;
             branch = projectSettings[parsedProjectId].branch;
           } else {
@@ -119,17 +122,20 @@
     checkSettingsValidity();
 
     chrome.runtime.onMessage.addListener((message) => {
-      if (message.type === "UPLOAD_STATUS") {
+      if (message.type === 'UPLOAD_STATUS') {
         uploadStatus = message.status;
         uploadProgress = message.progress || 0;
-        uploadMessage = message.message || "";
+        uploadMessage = message.message || '';
       }
     });
   });
 
   function checkSettingsValidity() {
     // Only consider settings valid if we have all required fields AND the validation passed
-    isSettingsValid = Boolean(githubToken && repoOwner && repoName && branch) && !isValidatingToken && isTokenValid === true;
+    isSettingsValid =
+      Boolean(githubToken && repoOwner && repoName && branch) &&
+      !isValidatingToken &&
+      isTokenValid === true;
   }
 
   async function saveSettings() {
@@ -137,19 +143,19 @@
       // Validate token and username before saving
       const isValid = await validateGitHubToken(githubToken, repoOwner);
       if (!isValid) {
-        status = validationError || "Validation failed";
+        status = validationError || 'Validation failed';
         hasStatus = true;
         setTimeout(() => {
-          status = "";
+          status = '';
           hasStatus = false;
         }, 3000);
         return;
       }
 
       const settings = {
-        githubToken: githubToken || "",
-        repoOwner: repoOwner || "",
-        projectSettings
+        githubToken: githubToken || '',
+        repoOwner: repoOwner || '',
+        projectSettings,
       };
 
       if (parsedProjectId) {
@@ -159,15 +165,15 @@
 
       await chrome.storage.sync.set(settings);
       hasInitialSettings = true;
-      status = "Settings saved successfully!";
+      status = 'Settings saved successfully!';
       hasStatus = true;
       checkSettingsValidity();
       setTimeout(() => {
-        status = "";
+        status = '';
         hasStatus = false;
       }, 3000);
     } catch (error) {
-      status = "Error saving settings";
+      status = 'Error saving settings';
       hasStatus = true;
       console.error(error);
     }
@@ -197,13 +203,13 @@
           <TabsContent value="home">
             <button
               class="w-full mb-3 px-4 py-2 bg-slate-700 hover:bg-slate-600 rounded-md text-slate-200 transition-colors"
-              on:click={() => activeTab = "projects"}
+              on:click={() => (activeTab = 'projects')}
             >
               View All Projects
             </button>
 
-            <StatusAlert 
-              {isSettingsValid} 
+            <StatusAlert
+              {isSettingsValid}
               projectId={parsedProjectId}
               gitHubUsername={repoOwner}
               {repoName}
@@ -217,7 +223,13 @@
           </TabsContent>
 
           <TabsContent value="projects">
-            <ProjectsList {projectSettings} {repoOwner} {githubToken} currentlyLoadedProjectId={parsedProjectId} isBoltSite={isBoltSite} />
+            <ProjectsList
+              {projectSettings}
+              {repoOwner}
+              {githubToken}
+              currentlyLoadedProjectId={parsedProjectId}
+              {isBoltSite}
+            />
           </TabsContent>
 
           <TabsContent value="settings">
@@ -249,7 +261,13 @@
           </TabsContent>
         </Tabs>
       {:else if hasInitialSettings && repoOwner && githubToken}
-        <ProjectsList {projectSettings} {repoOwner} {githubToken} currentlyLoadedProjectId={parsedProjectId} isBoltSite={isBoltSite} />
+        <ProjectsList
+          {projectSettings}
+          {repoOwner}
+          {githubToken}
+          currentlyLoadedProjectId={parsedProjectId}
+          {isBoltSite}
+        />
       {:else}
         <div class="flex flex-col items-center justify-center p-4 text-center space-y-6">
           <div class="space-y-2">
@@ -262,8 +280,13 @@
                 Go to bolt.new
               </Button>
             {/if}
-            <p class="text-sm text-green-400">💡 No Bolt projects found. Create or load an existing Bolt project to get started.</p>
-            <p class="text-sm text-green-400 pb-4">🌟 You can also load any of your public GitHub repositories by providing your GitHub token and repository owner.</p>
+            <p class="text-sm text-green-400">
+              💡 No Bolt projects found. Create or load an existing Bolt project to get started.
+            </p>
+            <p class="text-sm text-green-400 pb-4">
+              🌟 You can also load any of your public GitHub repositories by providing your GitHub
+              token and repository owner.
+            </p>
             <GitHubSettings
               isOnboarding={true}
               bind:githubToken
diff --git a/src/popup/index.html b/src/popup/index.html
index 3a35a41..82039b0 100644
--- a/src/popup/index.html
+++ b/src/popup/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -9,4 +9,4 @@
     <div id="app"></div>
     <script type="module" src="./main.ts"></script>
   </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/src/popup/main.ts b/src/popup/main.ts
index 6939098..6b34b81 100644
--- a/src/popup/main.ts
+++ b/src/popup/main.ts
@@ -5,4 +5,4 @@ const app = new App({
   target: document.getElementById('app')!,
 });
 
-export default app;
\ No newline at end of file
+export default app;
diff --git a/src/services/GitHubService.ts b/src/services/GitHubService.ts
index 33b2db3..95b9898 100644
--- a/src/services/GitHubService.ts
+++ b/src/services/GitHubService.ts
@@ -1,6 +1,6 @@
-export const GITHUB_SIGNUP_URL = "https://github.com/signup";
+export const GITHUB_SIGNUP_URL = 'https://github.com/signup';
 export const CREATE_TOKEN_URL =
-  "https://github.com/settings/tokens/new?scopes=repo&description=Bolt%20to%20GitHub&default_expires_at=none";
+  'https://github.com/settings/tokens/new?scopes=repo&description=Bolt%20to%20GitHub&default_expires_at=none';
 
 interface GitHubFileResponse {
   sha?: string;
@@ -53,15 +53,21 @@ export class GitHubService {
           if (targetUser.type === 'Organization') {
             // Check if user has access to the organization
             const orgs = await this.request('GET', '/user/orgs');
-            const hasOrgAccess = orgs.some((org: any) => org.login.toLowerCase() === username.toLowerCase());
+            const hasOrgAccess = orgs.some(
+              (org: any) => org.login.toLowerCase() === username.toLowerCase()
+            );
             if (hasOrgAccess) {
               return { isValid: true };
             }
             return { isValid: false, error: 'Token does not have access to this organization' };
           }
-          
+
           // If target is a user but not the authenticated user, token can't act as them
-          return { isValid: false, error: 'Token can only be used with your GitHub username or organizations you have access to' };
+          return {
+            isValid: false,
+            error:
+              'Token can only be used with your GitHub username or organizations you have access to',
+          };
         } catch (error) {
           return { isValid: false, error: 'Invalid GitHub username or organization' };
         }
@@ -82,8 +88,8 @@ export class GitHubService {
         method,
         ...options,
         headers: {
-          'Accept': 'application/vnd.github.v3+json',
-          'Authorization': `Bearer ${this.token}`,
+          Accept: 'application/vnd.github.v3+json',
+          Authorization: `Bearer ${this.token}`,
           'Content-Type': 'application/json',
           ...options.headers,
         },
@@ -100,18 +106,17 @@ export class GitHubService {
         }
 
         // Construct a more informative error message
-        const errorMessage = errorDetails.message || 
-                             errorDetails.error || 
-                             'Unknown GitHub API error';
-        
+        const errorMessage =
+          errorDetails.message || errorDetails.error || 'Unknown GitHub API error';
+
         const fullErrorMessage = `GitHub API Error (${response.status}): ${errorMessage}`;
-        
+
         // Create a custom error with additional properties
         const apiError = new Error(fullErrorMessage) as any;
         apiError.status = response.status;
         apiError.originalMessage = errorMessage;
         apiError.githubErrorResponse = errorDetails;
-        
+
         throw apiError;
       }
 
@@ -140,21 +145,23 @@ export class GitHubService {
       try {
         return await this.request('POST', '/user/repos', {
           ...options,
-          auto_init: true // Initialize with README to create main branch
+          auto_init: true, // Initialize with README to create main branch
         });
       } catch (error) {
         if (error instanceof Error && error.message.includes('404')) {
           // If user endpoint fails, try organization endpoint
           return await this.request('POST', `/orgs/${options.name}/repos`, {
             ...options,
-            auto_init: true
+            auto_init: true,
           });
         }
         throw error;
       }
     } catch (error) {
       console.error('Failed to create repository:', error);
-      throw new Error(`Failed to create repository: ${error instanceof Error ? error.message : 'Unknown error'}`);
+      throw new Error(
+        `Failed to create repository: ${error instanceof Error ? error.message : 'Unknown error'}`
+      );
     }
   }
 
@@ -163,13 +170,13 @@ export class GitHubService {
     if (!exists) {
       await this.createRepo({
         name: repo,
-        private: false,  // Make public by default so bolt.new can load the repo
+        private: false, // Make public by default so bolt.new can load the repo
         auto_init: true,
-        description: 'Repository created by Bolt to GitHub extension'
+        description: 'Repository created by Bolt to GitHub extension',
       });
-      
+
       // Wait a bit for GitHub to initialize the repository
-      await new Promise(resolve => setTimeout(resolve, 2000));
+      await new Promise((resolve) => setTimeout(resolve, 2000));
     }
   }
 
@@ -207,7 +214,7 @@ This repository was automatically initialized by the Bolt to GitHub extension.
       path: 'README.md',
       content: btoa(readmeContent),
       branch,
-      message: 'Initialize repository with auto-generated README'
+      message: 'Initialize repository with auto-generated README',
     });
   }
 
@@ -220,12 +227,13 @@ This repository was automatically initialized by the Bolt to GitHub extension.
     message: string;
   }) {
     const { owner, repo, path, content, branch, message } = params;
-    
+
     try {
       // Try to get existing file
       let sha: string | undefined;
       try {
-        const response: GitHubFileResponse = await this.request('GET', 
+        const response: GitHubFileResponse = await this.request(
+          'GET',
           `/repos/${owner}/${repo}/contents/${path}?ref=${branch}`
         );
         sha = response.sha;
@@ -239,17 +247,15 @@ This repository was automatically initialized by the Bolt to GitHub extension.
         message,
         content,
         branch,
-        ...(sha ? { sha } : {})
+        ...(sha ? { sha } : {}),
       };
 
-      return await this.request(
-        'PUT',
-        `/repos/${owner}/${repo}/contents/${path}`,
-        body
-      );
+      return await this.request('PUT', `/repos/${owner}/${repo}/contents/${path}`, body);
     } catch (error) {
       console.error('GitHub API Error:', error);
-      throw new Error(`Failed to push file: ${error instanceof Error ? error.message : 'Unknown error'}`);
+      throw new Error(
+        `Failed to push file: ${error instanceof Error ? error.message : 'Unknown error'}`
+      );
     }
   }
 
@@ -257,10 +263,10 @@ This repository was automatically initialized by the Bolt to GitHub extension.
     try {
       const commits = await this.request('GET', `/repos/${owner}/${repo}/commits`, null, {
         headers: {
-          'per_page': '1'  // We only need the count from headers
-        }
+          per_page: '1', // We only need the count from headers
+        },
       });
-      
+
       // GitHub returns the total count in the Link header
       const linkHeader = commits.headers?.get('link');
       if (linkHeader) {
@@ -269,7 +275,7 @@ This repository was automatically initialized by the Bolt to GitHub extension.
           return parseInt(match[1], 10);
         }
       }
-      
+
       // If no pagination, count the commits manually
       return commits.length;
     } catch (error) {
@@ -278,21 +284,23 @@ This repository was automatically initialized by the Bolt to GitHub extension.
     }
   }
 
-  async listPublicRepos(username: string): Promise<Array<{
-    name: string;
-    description: string | null;
-    html_url: string;
-    created_at: string;
-    updated_at: string;
-    language: string | null;
-  }>> {
+  async listPublicRepos(username: string): Promise<
+    Array<{
+      name: string;
+      description: string | null;
+      html_url: string;
+      created_at: string;
+      updated_at: string;
+      language: string | null;
+    }>
+  > {
     try {
       const repos = await this.request('GET', `/users/${username}/repos`, null, {
         headers: {
-          'per_page': '100'  // Get up to 100 repos per page
-        }
+          per_page: '100', // Get up to 100 repos per page
+        },
       });
-      
+
       return repos
         .filter((repo: any) => !repo.private)
         .map((repo: any) => ({
@@ -301,27 +309,34 @@ This repository was automatically initialized by the Bolt to GitHub extension.
           html_url: repo.html_url,
           created_at: repo.created_at,
           updated_at: repo.updated_at,
-          language: repo.language
+          language: repo.language,
         }));
     } catch (error) {
       console.error('Failed to fetch public repositories:', error);
-      throw new Error(`Failed to fetch public repositories: ${error instanceof Error ? error.message : 'Unknown error'}`);
+      throw new Error(
+        `Failed to fetch public repositories: ${error instanceof Error ? error.message : 'Unknown error'}`
+      );
     }
   }
 
-  async listUserRepositories(username: string): Promise<Array<{
-    name: string;
-    description: string | null;
-    html_url: string;
-    private: boolean;
-    created_at: string;
-    updated_at: string;
-    language: string | null;
-  }>> {
+  async listUserRepositories(username: string): Promise<
+    Array<{
+      name: string;
+      description: string | null;
+      html_url: string;
+      private: boolean;
+      created_at: string;
+      updated_at: string;
+      language: string | null;
+    }>
+  > {
     try {
       // First try user's repositories
       try {
-        const repos = await this.request('GET', `/users/${username}/repos?per_page=100&sort=updated`);
+        const repos = await this.request(
+          'GET',
+          `/users/${username}/repos?per_page=100&sort=updated`
+        );
         return repos.map((repo: any) => ({
           name: repo.name,
           description: repo.description,
@@ -329,11 +344,14 @@ This repository was automatically initialized by the Bolt to GitHub extension.
           private: repo.private,
           created_at: repo.created_at,
           updated_at: repo.updated_at,
-          language: repo.language
+          language: repo.language,
         }));
       } catch (error) {
         // If user endpoint fails, try organization endpoint
-        const repos = await this.request('GET', `/orgs/${username}/repos?per_page=100&sort=updated`);
+        const repos = await this.request(
+          'GET',
+          `/orgs/${username}/repos?per_page=100&sort=updated`
+        );
         return repos.map((repo: any) => ({
           name: repo.name,
           description: repo.description,
@@ -341,12 +359,14 @@ This repository was automatically initialized by the Bolt to GitHub extension.
           private: repo.private,
           created_at: repo.created_at,
           updated_at: repo.updated_at,
-          language: repo.language
+          language: repo.language,
         }));
       }
     } catch (error) {
       console.error('Failed to fetch repositories:', error);
-      throw new Error(`Failed to fetch repositories: ${error instanceof Error ? error.message : 'Unknown error'}`);
+      throw new Error(
+        `Failed to fetch repositories: ${error instanceof Error ? error.message : 'Unknown error'}`
+      );
     }
   }
 }
diff --git a/src/services/settings.ts b/src/services/settings.ts
index 10effbd..7043037 100644
--- a/src/services/settings.ts
+++ b/src/services/settings.ts
@@ -1,68 +1,61 @@
-import type { GitHubSettingsInterface, ProjectSettings } from "$lib/types";
+import type { GitHubSettingsInterface, ProjectSettings } from '$lib/types';
 
 export interface SettingsCheckResult {
-    isSettingsValid: boolean;
-    gitHubSettings?: GitHubSettingsInterface;
-  }
-    
-  export class SettingsService {
-    static async getGitHubSettings(): Promise<SettingsCheckResult> {
-      try {
-        const [settings, projectId] = await Promise.all([
-          chrome.storage.sync.get([
-            'githubToken',
-            'repoOwner',
-            'projectSettings'
-          ]),
-          chrome.storage.sync.get('projectId')
-        ]);
-  
-        let projectSettings = settings.projectSettings?.[projectId.projectId];
-  
-        // Auto-create project settings if needed
-        if (!projectSettings && projectId?.projectId && settings.repoOwner && settings.githubToken) {
-          projectSettings = { repoName: projectId.projectId, branch: 'main' };
-          await chrome.storage.sync.set({ 
-            [`projectSettings.${projectId.projectId}`]: projectSettings 
-          });
-        }
-  
-        const isSettingsValid = Boolean(
-          settings.githubToken &&
-          settings.repoOwner &&
-          settings.projectSettings &&
-          projectSettings
-        );
-  
-        return { 
-          isSettingsValid, 
-          gitHubSettings: {
-            githubToken: settings.githubToken,
-            repoOwner: settings.repoOwner,
-            projectSettings: projectSettings || undefined
-          }
-        };
-      } catch (error) {
-        console.error('Error checking GitHub settings:', error);
-        return { isSettingsValid: false };
+  isSettingsValid: boolean;
+  gitHubSettings?: GitHubSettingsInterface;
+}
+
+export class SettingsService {
+  static async getGitHubSettings(): Promise<SettingsCheckResult> {
+    try {
+      const [settings, projectId] = await Promise.all([
+        chrome.storage.sync.get(['githubToken', 'repoOwner', 'projectSettings']),
+        chrome.storage.sync.get('projectId'),
+      ]);
+
+      let projectSettings = settings.projectSettings?.[projectId.projectId];
+
+      // Auto-create project settings if needed
+      if (!projectSettings && projectId?.projectId && settings.repoOwner && settings.githubToken) {
+        projectSettings = { repoName: projectId.projectId, branch: 'main' };
+        await chrome.storage.sync.set({
+          [`projectSettings.${projectId.projectId}`]: projectSettings,
+        });
       }
+
+      const isSettingsValid = Boolean(
+        settings.githubToken && settings.repoOwner && settings.projectSettings && projectSettings
+      );
+
+      return {
+        isSettingsValid,
+        gitHubSettings: {
+          githubToken: settings.githubToken,
+          repoOwner: settings.repoOwner,
+          projectSettings: projectSettings || undefined,
+        },
+      };
+    } catch (error) {
+      console.error('Error checking GitHub settings:', error);
+      return { isSettingsValid: false };
     }
+  }
 
-    static async getProjectId(): Promise<string | null> {
-      try {
-          const { projectId } = await chrome.storage.sync.get('projectId');
-          return projectId || null;
-      } catch (error) {
-          console.error('Failed to get project ID:', error);
-          return null;
-      }
+  static async getProjectId(): Promise<string | null> {
+    try {
+      const { projectId } = await chrome.storage.sync.get('projectId');
+      return projectId || null;
+    } catch (error) {
+      console.error('Failed to get project ID:', error);
+      return null;
+    }
   }
 
   static async setProjectId(projectId: string): Promise<void> {
-      try {
-          await chrome.storage.sync.set({ projectId });
-      } catch (error) {
-          console.error('Failed to set project ID:', error);
-      }
+    try {
+      await chrome.storage.sync.set({ projectId });
+    } catch (error) {
+      console.error('Failed to set project ID:', error);
+    }
   }
 }
diff --git a/src/services/zipHandler.ts b/src/services/zipHandler.ts
index a6d683f..1122333 100644
--- a/src/services/zipHandler.ts
+++ b/src/services/zipHandler.ts
@@ -1,245 +1,278 @@
-import type { GitHubService } from "./GitHubService";
-import { toBase64 } from "../lib/common";
-import { ZipProcessor } from "../lib/zip";
+import type { GitHubService } from './GitHubService';
+import { toBase64 } from '../lib/common';
+import { ZipProcessor } from '../lib/zip';
 import ignore from 'ignore';
-import type { ProcessingStatus, UploadStatusState } from "$lib/types";
+import type { ProcessingStatus, UploadStatusState } from '$lib/types';
 
 export class ZipHandler {
-    constructor(private githubService: GitHubService,
-        private sendStatus: (status: UploadStatusState) => void
-    ) {}
+  constructor(
+    private githubService: GitHubService,
+    private sendStatus: (status: UploadStatusState) => void
+  ) {}
 
-    private updateStatus = async (status: ProcessingStatus, progress: number = 0, message: string = '') => {
-        console.log('📊 Updating status:', { status, progress, message });
-        this.sendStatus({ status, progress, message });
+  private updateStatus = async (
+    status: ProcessingStatus,
+    progress: number = 0,
+    message: string = ''
+  ) => {
+    console.log('📊 Updating status:', { status, progress, message });
+    this.sendStatus({ status, progress, message });
+  };
+
+  private ensureBranchExists = async (
+    repoOwner: string,
+    repoName: string,
+    targetBranch: string
+  ) => {
+    // Check if branch exists
+    let branchExists = true;
+    try {
+      await this.githubService.request(
+        'GET',
+        `/repos/${repoOwner}/${repoName}/branches/${targetBranch}`
+      );
+    } catch (error) {
+      branchExists = false;
     }
 
-    private ensureBranchExists = async (repoOwner: string, repoName: string, targetBranch: string) => {
-        // Check if branch exists
-        let branchExists = true;
-        try {
-            await this.githubService.request('GET', `/repos/${repoOwner}/${repoName}/branches/${targetBranch}`);
-        } catch (error) {
-            branchExists = false;
-        }
-
-        // If branch doesn't exist, create it from default branch
-        if (!branchExists) {
-            await this.updateStatus('uploading', 18, `Creating branch ${targetBranch}...`);
-            const defaultBranch = await this.githubService.request('GET', `/repos/${repoOwner}/${repoName}/git/refs/heads/main`);
-            await this.githubService.request('POST', `/repos/${repoOwner}/${repoName}/git/refs`, {
-                ref: `refs/heads/${targetBranch}`,
-                sha: defaultBranch.object.sha
-            });
-        }
+    // If branch doesn't exist, create it from default branch
+    if (!branchExists) {
+      await this.updateStatus('uploading', 18, `Creating branch ${targetBranch}...`);
+      const defaultBranch = await this.githubService.request(
+        'GET',
+        `/repos/${repoOwner}/${repoName}/git/refs/heads/main`
+      );
+      await this.githubService.request('POST', `/repos/${repoOwner}/${repoName}/git/refs`, {
+        ref: `refs/heads/${targetBranch}`,
+        sha: defaultBranch.object.sha,
+      });
     }
+  };
 
-    public processZipFile = async (blob: Blob, currentProjectId: string | null, commitMessage: string) => {
-        // Add size validation (50MB limit)
-        const MAX_FILE_SIZE = 50 * 1024 * 1024; // 50MB in bytes
-        if (blob.size > MAX_FILE_SIZE) {
-            await this.updateStatus('error', 0, `File too large. Maximum size is ${MAX_FILE_SIZE / 1024 / 1024}MB`);
-            throw new Error(`File too large. Maximum size is ${MAX_FILE_SIZE / 1024 / 1024}MB`);
-        }
-
-        if (!this.githubService) {
-            await this.updateStatus('error', 0, 'GitHub service not initialized. Please set your GitHub token.');
-            throw new Error('GitHub service not initialized. Please set your GitHub token.');
-        }
-    
-        if (!currentProjectId) {
-            await this.updateStatus('error', 0, 'Project ID not found. Make sure you are on a Bolt project page.');
-            throw new Error('Project ID not found. Make sure you are on a Bolt project page.');
-        }
-    
-        try {
-            await this.updateStatus('uploading', 0, 'Processing ZIP file...');
-    
-            console.log('🗜️ Processing ZIP file...');
-            const files = await ZipProcessor.processZipBlob(blob);
-    
-            await this.updateStatus('uploading', 10, 'Preparing files...');
-    
-            const { repoOwner, projectSettings } = await chrome.storage.sync.get([
-                "repoOwner",
-                "projectSettings"
-            ]);
-    
-            if (!projectSettings?.[currentProjectId]) {
-                throw new Error('Project settings not found for this project');
-            }
-    
-            const repoName = projectSettings[currentProjectId].repoName;
-            const branch = projectSettings[currentProjectId].branch;
-    
-            if (!repoOwner || !repoName) {
-                throw new Error('Repository details not configured');
-            }
-    
-            const targetBranch = branch || 'main';
-            console.log('📋 Repository details:', { repoOwner, repoName, targetBranch });
-    
-            await this.updateStatus('uploading', 15, 'Checking repository...');
-            await this.githubService.ensureRepoExists(repoOwner, repoName);
-            
-            // Check if repo is empty and needs initialization
-            const isEmpty = await this.githubService.isRepoEmpty(repoOwner, repoName);
-            if (isEmpty) {
-                await this.updateStatus('uploading', 18, 'Initializing empty repository...');
-                await this.githubService.initializeEmptyRepo(repoOwner, repoName, targetBranch);
-            }
-            
-            await this.ensureBranchExists(repoOwner, repoName, targetBranch);
-    
-            const processedFiles = await this.processFilesWithGitignore(files);
-    
-            await this.updateStatus('uploading', 20, 'Getting repository information...');
-
-            await this.uploadToGitHub(processedFiles, repoOwner, repoName, targetBranch, commitMessage);
-
-            await this.updateStatus('success', 100, `Successfully uploaded ${processedFiles.size} files to GitHub`);
-
-            // Clear the status after a delay
-            setTimeout(() => {
-                this.updateStatus('idle', 0, '');
-            }, 5000);
-        } catch (error) {
-            console.error('❌ Error uploading files:', error);
-            await this.updateStatus(
-                'error',
-                0,
-                `Failed to upload files: ${error instanceof Error ? error.message : 'Unknown error'}`
-            );
-            throw error;
-        }
+  public processZipFile = async (
+    blob: Blob,
+    currentProjectId: string | null,
+    commitMessage: string
+  ) => {
+    // Add size validation (50MB limit)
+    const MAX_FILE_SIZE = 50 * 1024 * 1024; // 50MB in bytes
+    if (blob.size > MAX_FILE_SIZE) {
+      await this.updateStatus(
+        'error',
+        0,
+        `File too large. Maximum size is ${MAX_FILE_SIZE / 1024 / 1024}MB`
+      );
+      throw new Error(`File too large. Maximum size is ${MAX_FILE_SIZE / 1024 / 1024}MB`);
     }
 
-    private async processFilesWithGitignore(files: Map<string, string>): Promise<Map<string, string>> {
-        const processedFiles = new Map<string, string>();
-        const ig = ignore();
-        
-        // Check for .gitignore and initialize ignore patterns
-        const gitignoreContent = files.get('.gitignore') || files.get('project/.gitignore');
-        if (gitignoreContent) {
-          ig.add(gitignoreContent.split('\n'));
-        }
-    
-        for (const [path, content] of files.entries()) {
-          if (path.endsWith('/') || !content.trim()) {
-            console.log(`📁 Skipping entry: ${path}`);
-            continue;
-          }
-    
-          const normalizedPath = path.startsWith('project/') ? path.slice(8) : path;
-          
-          if (ig.ignores(normalizedPath)) {
-            console.log(`🚫 Ignoring file: ${normalizedPath}`);
-            continue;
-          }
-    
-          processedFiles.set(normalizedPath, content);
-        }
-    
-        return processedFiles;
+    if (!this.githubService) {
+      await this.updateStatus(
+        'error',
+        0,
+        'GitHub service not initialized. Please set your GitHub token.'
+      );
+      throw new Error('GitHub service not initialized. Please set your GitHub token.');
     }
 
-    private async uploadToGitHub(
-        processedFiles: Map<string, string>,
-        repoOwner: string,
-        repoName: string,
-        targetBranch: string,
-        commitMessage: string
-      ) {
-        // Get the current commit SHA
-        const baseRef = await this.githubService.request(
-          'GET',
-          `/repos/${repoOwner}/${repoName}/git/refs/heads/${targetBranch}`
-        );
-        const baseSha = baseRef.object.sha;
-    
-        const baseCommit = await this.githubService.request(
-          'GET',
-          `/repos/${repoOwner}/${repoName}/git/commits/${baseSha}`
-        );
-        const baseTreeSha = baseCommit.tree.sha;
-    
-        await this.updateStatus('uploading', 30, 'Creating file blobs...');
-    
-        // Create blobs for all files
-        const treeItems = await this.createBlobs(processedFiles, repoOwner, repoName);
-    
-        await this.updateStatus('uploading', 70, 'Creating tree...');
-    
-        // Create a new tree
-        const newTree = await this.githubService.request(
-          'POST',
-          `/repos/${repoOwner}/${repoName}/git/trees`,
-          {
-            base_tree: baseTreeSha,
-            tree: treeItems
-          }
-        );
-    
-        await this.updateStatus('uploading', 80, 'Creating commit...');
-    
-        // Create a new commit
-        const newCommit = await this.githubService.request(
+    if (!currentProjectId) {
+      await this.updateStatus(
+        'error',
+        0,
+        'Project ID not found. Make sure you are on a Bolt project page.'
+      );
+      throw new Error('Project ID not found. Make sure you are on a Bolt project page.');
+    }
+
+    try {
+      await this.updateStatus('uploading', 0, 'Processing ZIP file...');
+
+      console.log('🗜️ Processing ZIP file...');
+      const files = await ZipProcessor.processZipBlob(blob);
+
+      await this.updateStatus('uploading', 10, 'Preparing files...');
+
+      const { repoOwner, projectSettings } = await chrome.storage.sync.get([
+        'repoOwner',
+        'projectSettings',
+      ]);
+
+      if (!projectSettings?.[currentProjectId]) {
+        throw new Error('Project settings not found for this project');
+      }
+
+      const repoName = projectSettings[currentProjectId].repoName;
+      const branch = projectSettings[currentProjectId].branch;
+
+      if (!repoOwner || !repoName) {
+        throw new Error('Repository details not configured');
+      }
+
+      const targetBranch = branch || 'main';
+      console.log('📋 Repository details:', { repoOwner, repoName, targetBranch });
+
+      await this.updateStatus('uploading', 15, 'Checking repository...');
+      await this.githubService.ensureRepoExists(repoOwner, repoName);
+
+      // Check if repo is empty and needs initialization
+      const isEmpty = await this.githubService.isRepoEmpty(repoOwner, repoName);
+      if (isEmpty) {
+        await this.updateStatus('uploading', 18, 'Initializing empty repository...');
+        await this.githubService.initializeEmptyRepo(repoOwner, repoName, targetBranch);
+      }
+
+      await this.ensureBranchExists(repoOwner, repoName, targetBranch);
+
+      const processedFiles = await this.processFilesWithGitignore(files);
+
+      await this.updateStatus('uploading', 20, 'Getting repository information...');
+
+      await this.uploadToGitHub(processedFiles, repoOwner, repoName, targetBranch, commitMessage);
+
+      await this.updateStatus(
+        'success',
+        100,
+        `Successfully uploaded ${processedFiles.size} files to GitHub`
+      );
+
+      // Clear the status after a delay
+      setTimeout(() => {
+        this.updateStatus('idle', 0, '');
+      }, 5000);
+    } catch (error) {
+      console.error('❌ Error uploading files:', error);
+      await this.updateStatus(
+        'error',
+        0,
+        `Failed to upload files: ${error instanceof Error ? error.message : 'Unknown error'}`
+      );
+      throw error;
+    }
+  };
+
+  private async processFilesWithGitignore(
+    files: Map<string, string>
+  ): Promise<Map<string, string>> {
+    const processedFiles = new Map<string, string>();
+    const ig = ignore();
+
+    // Check for .gitignore and initialize ignore patterns
+    const gitignoreContent = files.get('.gitignore') || files.get('project/.gitignore');
+    if (gitignoreContent) {
+      ig.add(gitignoreContent.split('\n'));
+    }
+
+    for (const [path, content] of files.entries()) {
+      if (path.endsWith('/') || !content.trim()) {
+        console.log(`📁 Skipping entry: ${path}`);
+        continue;
+      }
+
+      const normalizedPath = path.startsWith('project/') ? path.slice(8) : path;
+
+      if (ig.ignores(normalizedPath)) {
+        console.log(`🚫 Ignoring file: ${normalizedPath}`);
+        continue;
+      }
+
+      processedFiles.set(normalizedPath, content);
+    }
+
+    return processedFiles;
+  }
+
+  private async uploadToGitHub(
+    processedFiles: Map<string, string>,
+    repoOwner: string,
+    repoName: string,
+    targetBranch: string,
+    commitMessage: string
+  ) {
+    // Get the current commit SHA
+    const baseRef = await this.githubService.request(
+      'GET',
+      `/repos/${repoOwner}/${repoName}/git/refs/heads/${targetBranch}`
+    );
+    const baseSha = baseRef.object.sha;
+
+    const baseCommit = await this.githubService.request(
+      'GET',
+      `/repos/${repoOwner}/${repoName}/git/commits/${baseSha}`
+    );
+    const baseTreeSha = baseCommit.tree.sha;
+
+    await this.updateStatus('uploading', 30, 'Creating file blobs...');
+
+    // Create blobs for all files
+    const treeItems = await this.createBlobs(processedFiles, repoOwner, repoName);
+
+    await this.updateStatus('uploading', 70, 'Creating tree...');
+
+    // Create a new tree
+    const newTree = await this.githubService.request(
+      'POST',
+      `/repos/${repoOwner}/${repoName}/git/trees`,
+      {
+        base_tree: baseTreeSha,
+        tree: treeItems,
+      }
+    );
+
+    await this.updateStatus('uploading', 80, 'Creating commit...');
+
+    // Create a new commit
+    const newCommit = await this.githubService.request(
+      'POST',
+      `/repos/${repoOwner}/${repoName}/git/commits`,
+      {
+        message: commitMessage,
+        tree: newTree.sha,
+        parents: [baseSha],
+      }
+    );
+
+    await this.updateStatus('uploading', 90, 'Updating branch...');
+
+    // Update the reference
+    await this.githubService.request(
+      'PATCH',
+      `/repos/${repoOwner}/${repoName}/git/refs/heads/${targetBranch}`,
+      {
+        sha: newCommit.sha,
+        force: false,
+      }
+    );
+  }
+
+  private async createBlobs(files: Map<string, string>, repoOwner: string, repoName: string) {
+    const totalFiles = files.size;
+    let completedFiles = 0;
+
+    return Promise.all(
+      Array.from(files.entries()).map(async ([path, content]) => {
+        const blobData = await this.githubService.request(
           'POST',
-          `/repos/${repoOwner}/${repoName}/git/commits`,
+          `/repos/${repoOwner}/${repoName}/git/blobs`,
           {
-            message: commitMessage,
-            tree: newTree.sha,
-            parents: [baseSha]
+            content: toBase64(content),
+            encoding: 'base64',
           }
         );
-    
-        await this.updateStatus('uploading', 90, 'Updating branch...');
-    
-        // Update the reference
-        await this.githubService.request(
-          'PATCH',
-          `/repos/${repoOwner}/${repoName}/git/refs/heads/${targetBranch}`,
-          {
-            sha: newCommit.sha,
-            force: false
-          }
-        );
-    }
 
-    private async createBlobs(
-        files: Map<string, string>,
-        repoOwner: string,
-        repoName: string
-      ) {
-        const totalFiles = files.size;
-        let completedFiles = 0;
-    
-        return Promise.all(
-          Array.from(files.entries()).map(async ([path, content]) => {
-            const blobData = await this.githubService.request(
-              'POST',
-              `/repos/${repoOwner}/${repoName}/git/blobs`,
-              {
-                content: toBase64(content),
-                encoding: 'base64'
-              }
-            );
-    
-            completedFiles++;
-            const progress = 30 + Math.floor((completedFiles / totalFiles) * 30);
-            await this.updateStatus(
-              'uploading',
-              progress,
-              `Creating blob ${completedFiles}/${totalFiles}...`
-            );
-    
-            return {
-              path,
-              mode: '100644',
-              type: 'blob',
-              sha: blobData.sha
-            };
-          })
+        completedFiles++;
+        const progress = 30 + Math.floor((completedFiles / totalFiles) * 30);
+        await this.updateStatus(
+          'uploading',
+          progress,
+          `Creating blob ${completedFiles}/${totalFiles}...`
         );
-    }
+
+        return {
+          path,
+          mode: '100644',
+          type: 'blob',
+          sha: blobData.sha,
+        };
+      })
+    );
+  }
 }
diff --git a/src/styles/gb.css b/src/styles/gb.css
index 1460463..f35492d 100644
--- a/src/styles/gb.css
+++ b/src/styles/gb.css
@@ -1,73 +1,73 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
- 
+
 @layer base {
   :root {
     --background: 0 0% 100%;
     --foreground: 222.2 84% 4.9%;
- 
+
     --muted: 210 40% 96.1%;
     --muted-foreground: 215.4 16.3% 46.9%;
- 
+
     --popover: 0 0% 100%;
     --popover-foreground: 222.2 84% 4.9%;
- 
+
     --card: 0 0% 100%;
     --card-foreground: 222.2 84% 4.9%;
- 
+
     --border: 214.3 31.8% 91.4%;
     --input: 214.3 31.8% 91.4%;
- 
+
     --primary: 222.2 47.4% 11.2%;
     --primary-foreground: 210 40% 98%;
- 
+
     --secondary: 210 40% 96.1%;
     --secondary-foreground: 222.2 47.4% 11.2%;
- 
+
     --accent: 210 40% 96.1%;
     --accent-foreground: 222.2 47.4% 11.2%;
- 
+
     --destructive: 0 72.2% 50.6%;
     --destructive-foreground: 210 40% 98%;
- 
+
     --ring: 222.2 84% 4.9%;
- 
+
     --radius: 0.5rem;
   }
- 
+
   .dark {
     --background: 222.2 84% 4.9%;
     --foreground: 210 40% 98%;
- 
+
     --muted: 217.2 32.6% 17.5%;
     --muted-foreground: 215 20.2% 65.1%;
- 
+
     --popover: 222.2 84% 4.9%;
     --popover-foreground: 210 40% 98%;
- 
+
     --card: 222.2 84% 4.9%;
     --card-foreground: 210 40% 98%;
- 
+
     --border: 217.2 32.6% 17.5%;
     --input: 217.2 32.6% 17.5%;
- 
+
     --primary: 210 40% 98%;
     --primary-foreground: 222.2 47.4% 11.2%;
- 
+
     --secondary: 217.2 32.6% 17.5%;
     --secondary-foreground: 210 40% 98%;
- 
+
     --accent: 217.2 32.6% 17.5%;
     --accent-foreground: 210 40% 98%;
- 
+
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 210 40% 98%;
- 
+
     --ring: 212.7 26.8% 83.9%;
   }
 }
- 
+
 @layer base {
   * {
     @apply border-border;
@@ -75,4 +75,4 @@
   body {
     @apply bg-background text-foreground;
   }
-}
\ No newline at end of file
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index fa1cb36..3ac1e73 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,64 +1,64 @@
-import { fontFamily } from "tailwindcss/defaultTheme";
+import { fontFamily } from 'tailwindcss/defaultTheme';
 
 /** @type {import('tailwindcss').Config} */
 const config = {
-	darkMode: ["class"],
-	content: ["./src/**/*.{html,js,svelte,ts}"],
-	safelist: ["dark"],
-	theme: {
-		container: {
-			center: true,
-			padding: "2rem",
-			screens: {
-				"2xl": "1400px"
-			}
-		},
-		extend: {
-			colors: {
-				border: "hsl(var(--border) / <alpha-value>)",
-				input: "hsl(var(--input) / <alpha-value>)",
-				ring: "hsl(var(--ring) / <alpha-value>)",
-				background: "hsl(var(--background) / <alpha-value>)",
-				foreground: "hsl(var(--foreground) / <alpha-value>)",
-				primary: {
-					DEFAULT: "hsl(var(--primary) / <alpha-value>)",
-					foreground: "hsl(var(--primary-foreground) / <alpha-value>)"
-				},
-				secondary: {
-					DEFAULT: "hsl(var(--secondary) / <alpha-value>)",
-					foreground: "hsl(var(--secondary-foreground) / <alpha-value>)"
-				},
-				destructive: {
-					DEFAULT: "hsl(var(--destructive) / <alpha-value>)",
-					foreground: "hsl(var(--destructive-foreground) / <alpha-value>)"
-				},
-				muted: {
-					DEFAULT: "hsl(var(--muted) / <alpha-value>)",
-					foreground: "hsl(var(--muted-foreground) / <alpha-value>)"
-				},
-				accent: {
-					DEFAULT: "hsl(var(--accent) / <alpha-value>)",
-					foreground: "hsl(var(--accent-foreground) / <alpha-value>)"
-				},
-				popover: {
-					DEFAULT: "hsl(var(--popover) / <alpha-value>)",
-					foreground: "hsl(var(--popover-foreground) / <alpha-value>)"
-				},
-				card: {
-					DEFAULT: "hsl(var(--card) / <alpha-value>)",
-					foreground: "hsl(var(--card-foreground) / <alpha-value>)"
-				}
-			},
-			borderRadius: {
-				lg: "var(--radius)",
-				md: "calc(var(--radius) - 2px)",
-				sm: "calc(var(--radius) - 4px)"
-			},
-			fontFamily: {
-				sans: [...fontFamily.sans]
-			}
-		}
-	},
+  darkMode: ['class'],
+  content: ['./src/**/*.{html,js,svelte,ts}'],
+  safelist: ['dark'],
+  theme: {
+    container: {
+      center: true,
+      padding: '2rem',
+      screens: {
+        '2xl': '1400px',
+      },
+    },
+    extend: {
+      colors: {
+        border: 'hsl(var(--border) / <alpha-value>)',
+        input: 'hsl(var(--input) / <alpha-value>)',
+        ring: 'hsl(var(--ring) / <alpha-value>)',
+        background: 'hsl(var(--background) / <alpha-value>)',
+        foreground: 'hsl(var(--foreground) / <alpha-value>)',
+        primary: {
+          DEFAULT: 'hsl(var(--primary) / <alpha-value>)',
+          foreground: 'hsl(var(--primary-foreground) / <alpha-value>)',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary) / <alpha-value>)',
+          foreground: 'hsl(var(--secondary-foreground) / <alpha-value>)',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive) / <alpha-value>)',
+          foreground: 'hsl(var(--destructive-foreground) / <alpha-value>)',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted) / <alpha-value>)',
+          foreground: 'hsl(var(--muted-foreground) / <alpha-value>)',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent) / <alpha-value>)',
+          foreground: 'hsl(var(--accent-foreground) / <alpha-value>)',
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--popover) / <alpha-value>)',
+          foreground: 'hsl(var(--popover-foreground) / <alpha-value>)',
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card) / <alpha-value>)',
+          foreground: 'hsl(var(--card-foreground) / <alpha-value>)',
+        },
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
+      fontFamily: {
+        sans: [...fontFamily.sans],
+      },
+    },
+  },
 };
 
 export default config;
diff --git a/tsconfig.json b/tsconfig.json
index 060c366..abe8977 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -18,9 +18,6 @@
       "$lib/*": ["src/lib/*"]
     }
   },
-  "include": [
-    "src/**/*.ts",
-    "src/**/*.svelte"
-  ],
+  "include": ["src/**/*.ts", "src/**/*.svelte"],
   "references": [{ "path": "./tsconfig.node.json" }]
-}
\ No newline at end of file
+}
diff --git a/tsconfig.node.json b/tsconfig.node.json
index eedc67d..9d31e2a 100644
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -1,9 +1,9 @@
 {
-    "compilerOptions": {
-      "composite": true,
-      "module": "ESNext",
-      "moduleResolution": "Node",
-      "allowSyntheticDefaultImports": true
-    },
-    "include": ["vite.config.ts"]
-  }
\ No newline at end of file
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/vite.config.ts b/vite.config.ts
index db4b5dd..81793de 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -9,18 +9,18 @@ import preprocess from 'svelte-preprocess';
 const manifestWithAssets = {
   ...manifest,
   icons: {
-    "16": "assets/icons/icon16.png",
-    "48": "assets/icons/icon48.png",
-    "128": "assets/icons/icon128.png"
+    '16': 'assets/icons/icon16.png',
+    '48': 'assets/icons/icon48.png',
+    '128': 'assets/icons/icon128.png',
   },
   action: {
     ...manifest.action,
     default_icon: {
-      "16": "assets/icons/icon16.png",
-      "48": "assets/icons/icon48.png",
-      "128": "assets/icons/icon128.png"
-    }
-  }
+      '16': 'assets/icons/icon16.png',
+      '48': 'assets/icons/icon48.png',
+      '128': 'assets/icons/icon128.png',
+    },
+  },
 };
 
 export default defineConfig(({ mode }) => {
@@ -29,8 +29,8 @@ export default defineConfig(({ mode }) => {
       svelte({
         preprocess: preprocess(),
         compilerOptions: {
-          dev: mode === 'development'
-        }
+          dev: mode === 'development',
+        },
       }),
       crx({ manifest: manifestWithAssets }),
     ],
@@ -57,12 +57,12 @@ export default defineConfig(({ mode }) => {
             }
             return 'assets/[name]-[hash][extname]';
           },
-        }
-      }
+        },
+      },
     },
     resolve: {
       alias: {
-        '$lib': resolve(__dirname, './src/lib'),
+        $lib: resolve(__dirname, './src/lib'),
         buffer: 'buffer/',
       },
     },
@@ -74,9 +74,9 @@ export default defineConfig(({ mode }) => {
       port: 5173,
       strictPort: true,
       hmr: {
-        port: 5173
-      }
+        port: 5173,
+      },
     },
-    publicDir: 'assets'
+    publicDir: 'assets',
   };
 });

From 2e8e641b98a474c3f35e3e13acf201fa8bb61049 Mon Sep 17 00:00:00 2001
From: Mamerto Fabian Jr <mfabianjr@gmail.com>
Date: Thu, 16 Jan 2025 09:50:20 +0800
Subject: [PATCH 05/75] add: establish coding standards and security practices
 in .clinerules

---
 .clinerules | 101 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 101 insertions(+)
 create mode 100644 .clinerules

diff --git a/.clinerules b/.clinerules
new file mode 100644
index 0000000..68ed0e9
--- /dev/null
+++ b/.clinerules
@@ -0,0 +1,101 @@
+# Security
+
+## Sensitive Files
+DO NOT read or modify:
+- .env files
+- **/config/secrets.* 
+- **/*.pem
+- Any file containing API keys, tokens, or credentials
+
+## Security Practices
+- Never commit sensitive files
+- Use environment variables for secrets
+- Keep credentials out of logs and output
+
+# Tech Stack Rules
+
+## Framework & Core Technologies
+- Use Svelte v4.x for components
+- Use TypeScript for all .ts and .svelte files
+- Use Vite v4.x as build tool
+- Chrome Extension manifest v3 standards must be followed
+- ESM modules only (type: "module" in package.json)
+
+## TypeScript Standards
+- Strict mode is required
+- No implicit any types
+- Strict null checks enabled
+- Use type annotations for function parameters and returns
+- Follow the path aliases:
+  - Use $lib/* for imports from src/lib
+- Chrome types must be included
+
+## Component Standards
+- All Svelte components must use TypeScript
+- Follow Svelte best practices for reactivity
+- Keep components focused and single-responsibility
+- Create modular components:
+  - Break down complex UIs into smaller, reusable components
+  - Extract repeated patterns into shared components
+  - Keep component dependencies minimal and explicit
+  - Use composition over inheritance
+  - Maintain clear component interfaces with proper prop types
+- Use Svelte's built-in state management
+- Props must be properly typed
+
+## Styling Standards
+- Use TailwindCSS for styling
+- Follow the custom theme system defined in tailwind.config.js
+- Use CSS variables for theme colors
+- Maintain dark mode compatibility
+- Use container queries appropriately
+- Follow the defined border radius system
+
+## Code Quality
+- Maximum 300 lines of code per file
+- ESLint rules must be followed:
+  - No unused variables (except prefixed with _)
+  - Warn on any usage
+  - No console.log (only console.warn/error allowed)
+  - Follow svelte-eslint-parser rules
+- Prettier formatting is required:
+  - 2 space indentation
+  - Single quotes
+  - 100 character line length
+  - ES5 trailing commas
+  - Svelte-specific formatting
+
+## Build & Structure
+- Follow the defined Vite build configuration
+- Maintain separate background/content scripts
+- Use proper chunk splitting
+- Keep source maps in development
+- Assets must be in the assets directory
+- Follow the defined output structure
+
+## Dependencies
+- No conflicting Svelte versions
+- Keep dependencies up to date but pin versions
+- Prefer official Svelte integrations
+- Use bits-ui for UI components
+- Use lucide-svelte for icons
+- Maintain compatibility with @crxjs/vite-plugin
+
+## Performance
+- Minimize bundle sizes
+- Use proper code splitting
+- Optimize asset loading
+- Follow Chrome extension best practices for performance
+
+## Testing & Quality Assurance
+- Run svelte-check before commits
+- Ensure type checking passes
+- Fix all ESLint warnings
+- Format code before committing
+- Test in both light and dark modes
+
+## Version Control
+- Follow semantic versioning
+- Keep package-lock.json up to date
+- Document breaking changes
+- Maintain a clean git history

From 0d04586e5612a6ecf3d3b32648336cc1125a8977 Mon Sep 17 00:00:00 2001
From: "Mamerto Fabian Jr (aider)" <mfabianjr@gmail.com>
Date: Tue, 21 Jan 2025 16:55:02 +0800
Subject: [PATCH 06/75] feat: Add delay between blob creations to prevent
 GitHub rate limiting

---
 src/services/zipHandler.ts | 64 ++++++++++++++++++++++----------------
 1 file changed, 37 insertions(+), 27 deletions(-)

diff --git a/src/services/zipHandler.ts b/src/services/zipHandler.ts
index 1122333..a164814 100644
--- a/src/services/zipHandler.ts
+++ b/src/services/zipHandler.ts
@@ -243,36 +243,46 @@ export class ZipHandler {
     );
   }
 
+  private sleep(ms: number): Promise<void> {
+    return new Promise(resolve => setTimeout(resolve, ms));
+  }
+
   private async createBlobs(files: Map<string, string>, repoOwner: string, repoName: string) {
     const totalFiles = files.size;
     let completedFiles = 0;
 
-    return Promise.all(
-      Array.from(files.entries()).map(async ([path, content]) => {
-        const blobData = await this.githubService.request(
-          'POST',
-          `/repos/${repoOwner}/${repoName}/git/blobs`,
-          {
-            content: toBase64(content),
-            encoding: 'base64',
-          }
-        );
-
-        completedFiles++;
-        const progress = 30 + Math.floor((completedFiles / totalFiles) * 30);
-        await this.updateStatus(
-          'uploading',
-          progress,
-          `Creating blob ${completedFiles}/${totalFiles}...`
-        );
-
-        return {
-          path,
-          mode: '100644',
-          type: 'blob',
-          sha: blobData.sha,
-        };
-      })
-    );
+    const results = [];
+    for (const [path, content] of files.entries()) {
+      const blobData = await this.githubService.request(
+        'POST',
+        `/repos/${repoOwner}/${repoName}/git/blobs`,
+        {
+          content: toBase64(content),
+          encoding: 'base64',
+        }
+      );
+
+      completedFiles++;
+      const progress = 30 + Math.floor((completedFiles / totalFiles) * 30);
+      await this.updateStatus(
+        'uploading',
+        progress,
+        `Creating blob ${completedFiles}/${totalFiles}...`
+      );
+
+      results.push({
+        path,
+        mode: '100644',
+        type: 'blob',
+        sha: blobData.sha,
+      });
+
+      // Add a delay between requests to avoid rate limiting
+      if (completedFiles < totalFiles) {
+        await this.sleep(1000); // 1 second delay between requests
+      }
+    }
+
+    return results;
   }
 }

From d3116dd00462fb7b2f196738bd28abcc7a222ab6 Mon Sep 17 00:00:00 2001
From: "Mamerto Fabian Jr (aider)" <mfabianjr@gmail.com>
Date: Tue, 21 Jan 2025 16:56:39 +0800
Subject: [PATCH 07/75] refactor: Add delay every 5 files to optimize upload
 rate limiting

---
 src/services/zipHandler.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/services/zipHandler.ts b/src/services/zipHandler.ts
index a164814..33fef29 100644
--- a/src/services/zipHandler.ts
+++ b/src/services/zipHandler.ts
@@ -277,9 +277,9 @@ export class ZipHandler {
         sha: blobData.sha,
       });
 
-      // Add a delay between requests to avoid rate limiting
-      if (completedFiles < totalFiles) {
-        await this.sleep(1000); // 1 second delay between requests
+      // Add a delay every 5 files to avoid rate limiting
+      if (completedFiles < totalFiles && completedFiles % 5 === 0) {
+        await this.sleep(1000); // 1 second delay every 5 files
       }
     }
 

From 3fd4fa7b1098127d987e5839ac151bdd299f319c Mon Sep 17 00:00:00 2001
From: "Mamerto Fabian Jr (aider)" <mfabianjr@gmail.com>
Date: Tue, 21 Jan 2025 16:58:43 +0800
Subject: [PATCH 08/75] feat: Add default .gitignore patterns when no ignore
 file exists

---
 src/services/zipHandler.ts | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/src/services/zipHandler.ts b/src/services/zipHandler.ts
index 33fef29..ba5dcb3 100644
--- a/src/services/zipHandler.ts
+++ b/src/services/zipHandler.ts
@@ -159,6 +159,35 @@ export class ZipHandler {
     const gitignoreContent = files.get('.gitignore') || files.get('project/.gitignore');
     if (gitignoreContent) {
       ig.add(gitignoreContent.split('\n'));
+    } else {
+      // Default ignore patterns for common directories when no .gitignore exists
+      ig.add([
+        'node_modules/',
+        'dist/',
+        'build/',
+        '.DS_Store',
+        'coverage/',
+        '.env',
+        '.env.local',
+        '.env.*.local',
+        '*.log',
+        'npm-debug.log*',
+        'yarn-debug.log*',
+        'yarn-error.log*',
+        '.idea/',
+        '.vscode/',
+        '*.suo',
+        '*.ntvs*',
+        '*.njsproj',
+        '*.sln',
+        '*.sw?',
+        '.next/',
+        'out/',
+        '.nuxt/',
+        '.cache/',
+        '.temp/',
+        'tmp/'
+      ]);
     }
 
     for (const [path, content] of files.entries()) {

From 274d847adef2a975c73e826be0115593cd7a90d9 Mon Sep 17 00:00:00 2001
From: Mamerto Fabian Jr <mfabianjr@gmail.com>
Date: Tue, 21 Jan 2025 17:03:52 +0800
Subject: [PATCH 09/75] refactor: remove unnecessary try-catch block in GitHub
 API request handler

---
 src/services/GitHubService.ts | 67 ++++++++++++++++-------------------
 1 file changed, 31 insertions(+), 36 deletions(-)

diff --git a/src/services/GitHubService.ts b/src/services/GitHubService.ts
index 95b9898..0cb65aa 100644
--- a/src/services/GitHubService.ts
+++ b/src/services/GitHubService.ts
@@ -83,48 +83,43 @@ export class GitHubService {
   async request(method: string, endpoint: string, body?: any, options: RequestInit = {}) {
     const url = `${this.baseUrl}${endpoint}`;
 
-    try {
-      const response = await fetch(url, {
-        method,
-        ...options,
-        headers: {
-          Accept: 'application/vnd.github.v3+json',
-          Authorization: `Bearer ${this.token}`,
-          'Content-Type': 'application/json',
-          ...options.headers,
-        },
-        body: body ? JSON.stringify(body) : undefined,
-      });
-
-      if (!response.ok) {
-        let errorDetails;
-        try {
-          errorDetails = await response.json();
-        } catch {
-          // If parsing JSON fails, use the status text
-          errorDetails = { message: response.statusText };
-        }
+    const response = await fetch(url, {
+      method,
+      ...options,
+      headers: {
+        Accept: 'application/vnd.github.v3+json',
+        Authorization: `Bearer ${this.token}`,
+        'Content-Type': 'application/json',
+        ...options.headers,
+      },
+      body: body ? JSON.stringify(body) : undefined,
+    });
 
-        // Construct a more informative error message
-        const errorMessage =
-          errorDetails.message || errorDetails.error || 'Unknown GitHub API error';
+    if (!response.ok) {
+      let errorDetails;
+      try {
+        errorDetails = await response.json();
+      } catch {
+        // If parsing JSON fails, use the status text
+        errorDetails = { message: response.statusText };
+      }
 
-        const fullErrorMessage = `GitHub API Error (${response.status}): ${errorMessage}`;
+      // Construct a more informative error message
+      const errorMessage =
+        errorDetails.message || errorDetails.error || 'Unknown GitHub API error';
 
-        // Create a custom error with additional properties
-        const apiError = new Error(fullErrorMessage) as any;
-        apiError.status = response.status;
-        apiError.originalMessage = errorMessage;
-        apiError.githubErrorResponse = errorDetails;
+      const fullErrorMessage = `GitHub API Error (${response.status}): ${errorMessage}`;
 
-        throw apiError;
-      }
+      // Create a custom error with additional properties
+      const apiError = new Error(fullErrorMessage) as any;
+      apiError.status = response.status;
+      apiError.originalMessage = errorMessage;
+      apiError.githubErrorResponse = errorDetails;
 
-      return await response.json();
-    } catch (error) {
-      // Re-throw the error to maintain the original error details
-      throw error;
+      throw apiError;
     }
+
+    return await response.json();
   }
 
   async repoExists(owner: string, repo: string): Promise<boolean> {

From 9409b0cacd4fd315d389c11a3b538ead723effb0 Mon Sep 17 00:00:00 2001
From: "Mamerto Fabian Jr (aider)" <mfabianjr@gmail.com>
Date: Tue, 21 Jan 2025 17:13:51 +0800
Subject: [PATCH 10/75] feat: Add method to check GitHub token type in
 GitHubService

---
 src/services/GitHubService.ts | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/src/services/GitHubService.ts b/src/services/GitHubService.ts
index 0cb65aa..8204355 100644
--- a/src/services/GitHubService.ts
+++ b/src/services/GitHubService.ts
@@ -32,6 +32,27 @@ export class GitHubService {
     }
   }
 
+  async isClassicToken(): Promise<boolean> {
+    try {
+      // Get the token's metadata from the authentication endpoint
+      const response = await this.request('GET', '/applications/token', null, {
+        headers: {
+          Accept: 'application/vnd.github.v3+json',
+          Authorization: `Basic ${btoa(`${this.token}:`)}`
+        }
+      });
+
+      // Fine-grained tokens will have a 'fine_grained' property set to true
+      // Classic tokens won't have this property
+      return !response.fine_grained;
+    } catch (error) {
+      // If we can't determine the token type, assume it's a classic token
+      // as they were the original type
+      console.warn('Could not determine token type:', error);
+      return true;
+    }
+  }
+
   async validateTokenAndUser(username: string): Promise<{ isValid: boolean; error?: string }> {
     try {
       // First validate token and get authenticated user

From 1c931f641a23b590f7d3bbfeb9ee54f8af95ac14 Mon Sep 17 00:00:00 2001
From: "Mamerto Fabian Jr (aider)" <mfabianjr@gmail.com>
Date: Tue, 21 Jan 2025 17:15:27 +0800
Subject: [PATCH 11/75] feat: Add GitHub token type indicator with
 classic/fine-grained detection

---
 src/lib/components/GitHubSettings.svelte | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/lib/components/GitHubSettings.svelte b/src/lib/components/GitHubSettings.svelte
index ab72400..cbfd6cb 100644
--- a/src/lib/components/GitHubSettings.svelte
+++ b/src/lib/components/GitHubSettings.svelte
@@ -23,6 +23,7 @@
   let isTokenValid: boolean | null = null;
   let tokenValidationTimeout: number;
   let validationError: string | null = null;
+  let tokenType: 'classic' | 'fine-grained' | null = null;
   let repositories: Array<{
     name: string;
     description: string | null;
@@ -139,6 +140,12 @@
       isTokenValid = result.isValid;
       validationError = result.error || null;
 
+      if (result.isValid) {
+        // Check token type
+        const isClassic = await githubService.isClassicToken();
+        tokenType = isClassic ? 'classic' : 'fine-grained';
+      }
+
       // Load repositories after successful validation
       if (result.isValid) {
         await loadRepositories();
@@ -156,6 +163,7 @@
     onInput();
     isTokenValid = null;
     validationError = null;
+    tokenType = null;
 
     // Clear existing timeout
     if (tokenValidationTimeout) {
@@ -217,6 +225,10 @@
       </div>
       {#if validationError}
         <p class="text-sm text-red-400 mt-1">{validationError}</p>
+      {:else if tokenType}
+        <p class="text-sm mt-1 {tokenType === 'classic' ? 'text-orange-400' : 'text-emerald-400'}">
+          {tokenType === 'classic' ? '⚠️ Classic' : '✨ Fine-grained'} token detected
+        </p>
       {/if}
     </div>
 

From 7daf0b410796936493b30ffb411b4dd959789008 Mon Sep 17 00:00:00 2001
From: "Mamerto Fabian Jr (aider)" <mfabianjr@gmail.com>
Date: Tue, 21 Jan 2025 17:18:29 +0800
Subject: [PATCH 12/75] feat: Add link to create fine-grained GitHub token for
 classic tokens

---
 src/lib/components/GitHubSettings.svelte | 10 ++++++++++
 src/services/GitHubService.ts            |  2 ++
 2 files changed, 12 insertions(+)

diff --git a/src/lib/components/GitHubSettings.svelte b/src/lib/components/GitHubSettings.svelte
index cbfd6cb..fa5326f 100644
--- a/src/lib/components/GitHubSettings.svelte
+++ b/src/lib/components/GitHubSettings.svelte
@@ -228,6 +228,16 @@
       {:else if tokenType}
         <p class="text-sm mt-1 {tokenType === 'classic' ? 'text-orange-400' : 'text-emerald-400'}">
           {tokenType === 'classic' ? '⚠️ Classic' : '✨ Fine-grained'} token detected
+          {#if tokenType === 'classic'}
+            <a
+              href={CREATE_FINE_GRAINED_TOKEN_URL}
+              target="_blank"
+              rel="noopener noreferrer"
+              class="text-blue-400 hover:text-blue-300 ml-1"
+            >
+              Create a fine-grained token instead
+            </a>
+          {/if}
         </p>
       {/if}
     </div>
diff --git a/src/services/GitHubService.ts b/src/services/GitHubService.ts
index 8204355..08ac062 100644
--- a/src/services/GitHubService.ts
+++ b/src/services/GitHubService.ts
@@ -1,6 +1,8 @@
 export const GITHUB_SIGNUP_URL = 'https://github.com/signup';
 export const CREATE_TOKEN_URL =
   'https://github.com/settings/tokens/new?scopes=repo&description=Bolt%20to%20GitHub&default_expires_at=none';
+export const CREATE_FINE_GRAINED_TOKEN_URL =
+  'https://github.com/settings/personal-access-tokens/new?scopes=repository:read,repository:write&description=Bolt%20to%20GitHub%20Fine-Grained%20Token';
 
 interface GitHubFileResponse {
   sha?: string;

From 037198f70498e05c87b022b5752982e09a40bf4f Mon Sep 17 00:00:00 2001
From: Mamerto Fabian Jr <mfabianjr@gmail.com>
Date: Tue, 21 Jan 2025 17:30:22 +0800
Subject: [PATCH 13/75] add missing import

---
 src/lib/components/GitHubSettings.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/GitHubSettings.svelte b/src/lib/components/GitHubSettings.svelte
index fa5326f..537b8c0 100644
--- a/src/lib/components/GitHubSettings.svelte
+++ b/src/lib/components/GitHubSettings.svelte
@@ -4,7 +4,7 @@
   import { Label } from '$lib/components/ui/label';
   import { Check, X, Search, Loader2 } from 'lucide-svelte';
   import { onMount } from 'svelte';
-  import { GitHubService } from '../../services/GitHubService';
+  import { CREATE_FINE_GRAINED_TOKEN_URL, GitHubService } from '../../services/GitHubService';
   import NewUserGuide from './github/NewUserGuide.svelte';
 
   export let isOnboarding: boolean = false;

From df8a6518305379207f8ad03fbd4282db13b9773e Mon Sep 17 00:00:00 2001
From: "Mamerto Fabian Jr (aider)" <mfabianjr@gmail.com>
Date: Tue, 21 Jan 2025 17:35:48 +0800
Subject: [PATCH 14/75] refactor: Simplify token type check using prefix
 validation

---
 src/services/GitHubService.ts | 21 +++------------------
 1 file changed, 3 insertions(+), 18 deletions(-)

diff --git a/src/services/GitHubService.ts b/src/services/GitHubService.ts
index 08ac062..629e7f0 100644
--- a/src/services/GitHubService.ts
+++ b/src/services/GitHubService.ts
@@ -35,24 +35,9 @@ export class GitHubService {
   }
 
   async isClassicToken(): Promise<boolean> {
-    try {
-      // Get the token's metadata from the authentication endpoint
-      const response = await this.request('GET', '/applications/token', null, {
-        headers: {
-          Accept: 'application/vnd.github.v3+json',
-          Authorization: `Basic ${btoa(`${this.token}:`)}`
-        }
-      });
-
-      // Fine-grained tokens will have a 'fine_grained' property set to true
-      // Classic tokens won't have this property
-      return !response.fine_grained;
-    } catch (error) {
-      // If we can't determine the token type, assume it's a classic token
-      // as they were the original type
-      console.warn('Could not determine token type:', error);
-      return true;
-    }
+    // Classic tokens start with 'ghp_'
+    // Fine-grained tokens start with 'github_pat_'
+    return this.token.startsWith('ghp_');
   }
 
   async validateTokenAndUser(username: string): Promise<{ isValid: boolean; error?: string }> {

From e0af8f3dee20d86921c5c3f03de06c8b20ead325 Mon Sep 17 00:00:00 2001
From: "Mamerto Fabian Jr (aider)" <mfabianjr@gmail.com>
Date: Wed, 22 Jan 2025 06:41:25 +0800
Subject: [PATCH 15/75] refactor: Create BaseGitHubService and extract shared
 GitHub API request logic

---
 src/services/BaseGitHubService.ts    |  42 ++++++++++
 src/services/GitHubService.ts        | 110 +++------------------------
 src/services/GitHubTokenValidator.ts |  58 ++++++++++++++
 3 files changed, 110 insertions(+), 100 deletions(-)
 create mode 100644 src/services/BaseGitHubService.ts
 create mode 100644 src/services/GitHubTokenValidator.ts

diff --git a/src/services/BaseGitHubService.ts b/src/services/BaseGitHubService.ts
new file mode 100644
index 0000000..b4a851c
--- /dev/null
+++ b/src/services/BaseGitHubService.ts
@@ -0,0 +1,42 @@
+export abstract class BaseGitHubService {
+  protected baseUrl = 'https://api.github.com';
+
+  constructor(protected token: string) {}
+
+  protected async request(method: string, endpoint: string, body?: any, options: RequestInit = {}) {
+    const url = `${this.baseUrl}${endpoint}`;
+
+    const response = await fetch(url, {
+      method,
+      ...options,
+      headers: {
+        Accept: 'application/vnd.github.v3+json',
+        Authorization: `Bearer ${this.token}`,
+        'Content-Type': 'application/json',
+        ...options.headers,
+      },
+      body: body ? JSON.stringify(body) : undefined,
+    });
+
+    if (!response.ok) {
+      let errorDetails;
+      try {
+        errorDetails = await response.json();
+      } catch {
+        errorDetails = { message: response.statusText };
+      }
+
+      const errorMessage = errorDetails.message || errorDetails.error || 'Unknown GitHub API error';
+      const fullErrorMessage = `GitHub API Error (${response.status}): ${errorMessage}`;
+
+      const apiError = new Error(fullErrorMessage) as any;
+      apiError.status = response.status;
+      apiError.originalMessage = errorMessage;
+      apiError.githubErrorResponse = errorDetails;
+
+      throw apiError;
+    }
+
+    return await response.json();
+  }
+}
diff --git a/src/services/GitHubService.ts b/src/services/GitHubService.ts
index 629e7f0..ea58b45 100644
--- a/src/services/GitHubService.ts
+++ b/src/services/GitHubService.ts
@@ -4,6 +4,9 @@ export const CREATE_TOKEN_URL =
 export const CREATE_FINE_GRAINED_TOKEN_URL =
   'https://github.com/settings/personal-access-tokens/new?scopes=repository:read,repository:write&description=Bolt%20to%20GitHub%20Fine-Grained%20Token';
 
+import { BaseGitHubService } from './BaseGitHubService';
+import { GitHubTokenValidator } from './GitHubTokenValidator';
+
 interface GitHubFileResponse {
   sha?: string;
   content?: string;
@@ -16,119 +19,26 @@ interface RepoCreateOptions {
   description?: string;
 }
 
-export class GitHubService {
-  private baseUrl = 'https://api.github.com';
-  private token: string;
+export class GitHubService extends BaseGitHubService {
+  private tokenValidator: GitHubTokenValidator;
 
   constructor(token: string) {
-    this.token = token;
+    super(token);
+    this.tokenValidator = new GitHubTokenValidator(token);
   }
 
   async validateToken(): Promise<boolean> {
-    try {
-      await this.request('GET', '/user');
-      return true;
-    } catch (error) {
-      console.error('Token validation failed:', error);
-      return false;
-    }
+    return this.tokenValidator.validateToken();
   }
 
   async isClassicToken(): Promise<boolean> {
-    // Classic tokens start with 'ghp_'
-    // Fine-grained tokens start with 'github_pat_'
-    return this.token.startsWith('ghp_');
+    return this.tokenValidator.isClassicToken();
   }
 
   async validateTokenAndUser(username: string): Promise<{ isValid: boolean; error?: string }> {
-    try {
-      // First validate token and get authenticated user
-      try {
-        const authUser = await this.request('GET', '/user');
-        if (!authUser.login) {
-          return { isValid: false, error: 'Invalid GitHub token' };
-        }
-
-        // If username matches authenticated user, we're good
-        if (authUser.login.toLowerCase() === username.toLowerCase()) {
-          return { isValid: true };
-        }
-
-        // If username doesn't match, check if it's an organization the user has access to
-        try {
-          // Check if the target is an organization
-          const targetUser = await this.request('GET', `/users/${username}`);
-          if (targetUser.type === 'Organization') {
-            // Check if user has access to the organization
-            const orgs = await this.request('GET', '/user/orgs');
-            const hasOrgAccess = orgs.some(
-              (org: any) => org.login.toLowerCase() === username.toLowerCase()
-            );
-            if (hasOrgAccess) {
-              return { isValid: true };
-            }
-            return { isValid: false, error: 'Token does not have access to this organization' };
-          }
-
-          // If target is a user but not the authenticated user, token can't act as them
-          return {
-            isValid: false,
-            error:
-              'Token can only be used with your GitHub username or organizations you have access to',
-          };
-        } catch (error) {
-          return { isValid: false, error: 'Invalid GitHub username or organization' };
-        }
-      } catch (error) {
-        return { isValid: false, error: 'Invalid GitHub token' };
-      }
-    } catch (error) {
-      console.error('Validation failed:', error);
-      return { isValid: false, error: 'Validation failed' };
-    }
+    return this.tokenValidator.validateTokenAndUser(username);
   }
 
-  async request(method: string, endpoint: string, body?: any, options: RequestInit = {}) {
-    const url = `${this.baseUrl}${endpoint}`;
-
-    const response = await fetch(url, {
-      method,
-      ...options,
-      headers: {
-        Accept: 'application/vnd.github.v3+json',
-        Authorization: `Bearer ${this.token}`,
-        'Content-Type': 'application/json',
-        ...options.headers,
-      },
-      body: body ? JSON.stringify(body) : undefined,
-    });
-
-    if (!response.ok) {
-      let errorDetails;
-      try {
-        errorDetails = await response.json();
-      } catch {
-        // If parsing JSON fails, use the status text
-        errorDetails = { message: response.statusText };
-      }
-
-      // Construct a more informative error message
-      const errorMessage =
-        errorDetails.message || errorDetails.error || 'Unknown GitHub API error';
-
-      const fullErrorMessage = `GitHub API Error (${response.status}): ${errorMessage}`;
-
-      // Create a custom error with additional properties
-      const apiError = new Error(fullErrorMessage) as any;
-      apiError.status = response.status;
-      apiError.originalMessage = errorMessage;
-      apiError.githubErrorResponse = errorDetails;
-
-      throw apiError;
-    }
-
-    return await response.json();
-  }
 
   async repoExists(owner: string, repo: string): Promise<boolean> {
     try {
diff --git a/src/services/GitHubTokenValidator.ts b/src/services/GitHubTokenValidator.ts
new file mode 100644
index 0000000..0917d65
--- /dev/null
+++ b/src/services/GitHubTokenValidator.ts
@@ -0,0 +1,58 @@
+import { BaseGitHubService } from './BaseGitHubService';
+
+export class GitHubTokenValidator extends BaseGitHubService {
+  async validateToken(): Promise<boolean> {
+    try {
+      await this.request('GET', '/user');
+      return true;
+    } catch (error) {
+      console.error('Token validation failed:', error);
+      return false;
+    }
+  }
+
+  isClassicToken(): boolean {
+    return this.token.startsWith('ghp_');
+  }
+
+  async validateTokenAndUser(username: string): Promise<{ isValid: boolean; error?: string }> {
+    try {
+      try {
+        const authUser = await this.request('GET', '/user');
+        if (!authUser.login) {
+          return { isValid: false, error: 'Invalid GitHub token' };
+        }
+
+        if (authUser.login.toLowerCase() === username.toLowerCase()) {
+          return { isValid: true };
+        }
+
+        try {
+          const targetUser = await this.request('GET', `/users/${username}`);
+          if (targetUser.type === 'Organization') {
+            const orgs = await this.request('GET', '/user/orgs');
+            const hasOrgAccess = orgs.some(
+              (org: any) => org.login.toLowerCase() === username.toLowerCase()
+            );
+            if (hasOrgAccess) {
+              return { isValid: true };
+            }
+            return { isValid: false, error: 'Token does not have access to this organization' };
+          }
+
+          return {
+            isValid: false,
+            error: 'Token can only be used with your GitHub username or organizations you have access to',
+          };
+        } catch (error) {
+          return { isValid: false, error: 'Invalid GitHub username or organization' };
+        }
+      } catch (error) {
+        return { isValid: false, error: 'Invalid GitHub token' };
+      }
+    } catch (error) {
+      console.error('Validation failed:', error);
+      return { isValid: false, error: 'Validation failed' };
+    }
+  }
+}

From 02f8acef4aef4ce98018582a40fe50c5eb28aa22 Mon Sep 17 00:00:00 2001
From: "Mamerto Fabian Jr (aider)" <mfabianjr@gmail.com>
Date: Wed, 22 Jan 2025 07:28:50 +0800
Subject: [PATCH 16/75] feat: Add fine-grained token permission verification
 functions

---
 src/services/GitHubTokenValidator.ts | 97 ++++++++++++++++++++++++++++
 1 file changed, 97 insertions(+)

diff --git a/src/services/GitHubTokenValidator.ts b/src/services/GitHubTokenValidator.ts
index 0917d65..653df3d 100644
--- a/src/services/GitHubTokenValidator.ts
+++ b/src/services/GitHubTokenValidator.ts
@@ -15,10 +15,107 @@ export class GitHubTokenValidator extends BaseGitHubService {
     return this.token.startsWith('ghp_');
   }
 
+  isFineGrainedToken(): boolean {
+    return this.token.startsWith('github_pat_');
+  }
+
+  private async delay(ms: number): Promise<void> {
+    return new Promise(resolve => setTimeout(resolve, ms));
+  }
+
+  async verifyFineGrainedPermissions(): Promise<{ isValid: boolean; error?: string }> {
+    if (!this.isFineGrainedToken()) {
+      return { isValid: false, error: 'Not a fine-grained token' };
+    }
+
+    try {
+      // Create a temporary test repo
+      const timestamp = Date.now();
+      const repoName = `test-repo-${timestamp}`;
+      
+      // Test repository creation (All repositories access + Admin Write)
+      try {
+        await this.request('POST', '/user/repos', {
+          name: repoName,
+          private: true,
+          auto_init: true
+        });
+        await this.delay(1000); // Wait for repo creation
+      } catch (error) {
+        return { 
+          isValid: false, 
+          error: 'Token lacks repository creation permission' 
+        };
+      }
+
+      // Get authenticated user
+      const user = await this.request('GET', '/user');
+      const username = user.login;
+
+      // Test visibility change (Admin Write)
+      try {
+        await this.request('PATCH', `/repos/${username}/${repoName}`, {
+          private: false
+        });
+        await this.delay(1000);
+      } catch (error) {
+        // Cleanup repo before returning
+        await this.request('DELETE', `/repos/${username}/${repoName}`);
+        return { 
+          isValid: false, 
+          error: 'Token lacks repository administration permission' 
+        };
+      }
+
+      // Test content write
+      try {
+        const content = btoa('test'); // Convert to base64
+        const response = await this.request('PUT', `/repos/${username}/${repoName}/contents/test.txt`, {
+          message: 'Add test file',
+          content: content
+        });
+        await this.delay(1000);
+
+        // Test content delete
+        await this.request('DELETE', `/repos/${username}/${repoName}/contents/test.txt`, {
+          message: 'Remove test file',
+          sha: response.content.sha
+        });
+        await this.delay(1000);
+      } catch (error) {
+        // Cleanup repo before returning
+        await this.request('DELETE', `/repos/${username}/${repoName}`);
+        return { 
+          isValid: false, 
+          error: 'Token lacks repository contents read/write permission' 
+        };
+      }
+
+      // Cleanup: Delete the test repository
+      await this.request('DELETE', `/repos/${username}/${repoName}`);
+      
+      return { isValid: true };
+    } catch (error) {
+      console.error('Permission verification failed:', error);
+      return { 
+        isValid: false, 
+        error: `Permission verification failed: ${error instanceof Error ? error.message : 'Unknown error'}` 
+      };
+    }
+  }
+
   async validateTokenAndUser(username: string): Promise<{ isValid: boolean; error?: string }> {
     try {
       try {
         const authUser = await this.request('GET', '/user');
+
+        // For fine-grained tokens, verify required permissions
+        if (this.isFineGrainedToken()) {
+          const permissionCheck = await this.verifyFineGrainedPermissions();
+          if (!permissionCheck.isValid) {
+            return permissionCheck;
+          }
+        }
         if (!authUser.login) {
           return { isValid: false, error: 'Invalid GitHub token' };
         }

From be3419b89818f5364264bca7eb3c7bcfd36ae48c Mon Sep 17 00:00:00 2001
From: "Mamerto Fabian Jr (aider)" <mfabianjr@gmail.com>
Date: Wed, 22 Jan 2025 08:44:39 +0800
Subject: [PATCH 17/75] refactor: Separate classic and fine-grained token
 validation logic

---
 src/services/GitHubTokenValidator.ts | 79 +++++++++++++++-------------
 1 file changed, 43 insertions(+), 36 deletions(-)

diff --git a/src/services/GitHubTokenValidator.ts b/src/services/GitHubTokenValidator.ts
index 653df3d..73dc74f 100644
--- a/src/services/GitHubTokenValidator.ts
+++ b/src/services/GitHubTokenValidator.ts
@@ -104,49 +104,56 @@ export class GitHubTokenValidator extends BaseGitHubService {
     }
   }
 
-  async validateTokenAndUser(username: string): Promise<{ isValid: boolean; error?: string }> {
+  private async validateClassicToken(username: string): Promise<{ isValid: boolean; error?: string }> {
     try {
-      try {
-        const authUser = await this.request('GET', '/user');
-
-        // For fine-grained tokens, verify required permissions
-        if (this.isFineGrainedToken()) {
-          const permissionCheck = await this.verifyFineGrainedPermissions();
-          if (!permissionCheck.isValid) {
-            return permissionCheck;
-          }
-        }
-        if (!authUser.login) {
-          return { isValid: false, error: 'Invalid GitHub token' };
-        }
+      const authUser = await this.request('GET', '/user');
+      
+      if (!authUser.login) {
+        return { isValid: false, error: 'Invalid GitHub token' };
+      }
+
+      if (authUser.login.toLowerCase() === username.toLowerCase()) {
+        return { isValid: true };
+      }
 
-        if (authUser.login.toLowerCase() === username.toLowerCase()) {
+      const targetUser = await this.request('GET', `/users/${username}`);
+      if (targetUser.type === 'Organization') {
+        const orgs = await this.request('GET', '/user/orgs');
+        const hasOrgAccess = orgs.some(
+          (org: any) => org.login.toLowerCase() === username.toLowerCase()
+        );
+        if (hasOrgAccess) {
           return { isValid: true };
         }
+        return { isValid: false, error: 'Token does not have access to this organization' };
+      }
 
-        try {
-          const targetUser = await this.request('GET', `/users/${username}`);
-          if (targetUser.type === 'Organization') {
-            const orgs = await this.request('GET', '/user/orgs');
-            const hasOrgAccess = orgs.some(
-              (org: any) => org.login.toLowerCase() === username.toLowerCase()
-            );
-            if (hasOrgAccess) {
-              return { isValid: true };
-            }
-            return { isValid: false, error: 'Token does not have access to this organization' };
-          }
-
-          return {
-            isValid: false,
-            error: 'Token can only be used with your GitHub username or organizations you have access to',
-          };
-        } catch (error) {
-          return { isValid: false, error: 'Invalid GitHub username or organization' };
+      return {
+        isValid: false,
+        error: 'Token can only be used with your GitHub username or organizations you have access to',
+      };
+    } catch (error) {
+      if (error instanceof Error && error.message.includes('404')) {
+        return { isValid: false, error: 'Invalid GitHub username or organization' };
+      }
+      return { isValid: false, error: 'Invalid GitHub token' };
+    }
+  }
+
+  async validateTokenAndUser(username: string): Promise<{ isValid: boolean; error?: string }> {
+    try {
+      // For fine-grained tokens, verify permissions first
+      if (this.isFineGrainedToken()) {
+        console.log('Validating fine-grained token permissions...');
+        const permissionCheck = await this.verifyFineGrainedPermissions();
+        if (!permissionCheck.isValid) {
+          return permissionCheck;
         }
-      } catch (error) {
-        return { isValid: false, error: 'Invalid GitHub token' };
       }
+
+      // Then validate user access for both token types
+      const validation = await this.validateClassicToken(username);
+      return validation;
     } catch (error) {
       console.error('Validation failed:', error);
       return { isValid: false, error: 'Validation failed' };

From 48688bb00f3c2719aae5b708b07aab7725e4cbc6 Mon Sep 17 00:00:00 2001
From: Mamerto Fabian Jr <mfabianjr@gmail.com>
Date: Wed, 22 Jan 2025 08:49:06 +0800
Subject: [PATCH 18/75] refactor: Improve token validation flow by prioritizing
 user access check

---
 src/services/GitHubTokenValidator.ts | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/services/GitHubTokenValidator.ts b/src/services/GitHubTokenValidator.ts
index 73dc74f..a196305 100644
--- a/src/services/GitHubTokenValidator.ts
+++ b/src/services/GitHubTokenValidator.ts
@@ -142,7 +142,13 @@ export class GitHubTokenValidator extends BaseGitHubService {
 
   async validateTokenAndUser(username: string): Promise<{ isValid: boolean; error?: string }> {
     try {
-      // For fine-grained tokens, verify permissions first
+      // Validate user access first (quick check)
+      const validation = await this.validateClassicToken(username);
+      if (!validation.isValid) {
+        return validation;
+      }
+ 
+      // If user access is valid and it's a fine-grained token, verify permissions
       if (this.isFineGrainedToken()) {
         console.log('Validating fine-grained token permissions...');
         const permissionCheck = await this.verifyFineGrainedPermissions();
@@ -150,10 +156,8 @@ export class GitHubTokenValidator extends BaseGitHubService {
           return permissionCheck;
         }
       }
-
-      // Then validate user access for both token types
-      const validation = await this.validateClassicToken(username);
-      return validation;
+ 
+      return { isValid: true };
     } catch (error) {
       console.error('Validation failed:', error);
       return { isValid: false, error: 'Validation failed' };

From 7741f78392f7da14f7371898603eb4869591becb Mon Sep 17 00:00:00 2001
From: "Mamerto Fabian Jr (aider)" <mfabianjr@gmail.com>
Date: Wed, 22 Jan 2025 08:50:45 +0800
Subject: [PATCH 19/75] refactor: Simplify validateTokenAndUser to only
 validate user access

---
 src/services/GitHubTokenValidator.ts | 17 +----------------
 1 file changed, 1 insertion(+), 16 deletions(-)

diff --git a/src/services/GitHubTokenValidator.ts b/src/services/GitHubTokenValidator.ts
index a196305..23a091c 100644
--- a/src/services/GitHubTokenValidator.ts
+++ b/src/services/GitHubTokenValidator.ts
@@ -142,22 +142,7 @@ export class GitHubTokenValidator extends BaseGitHubService {
 
   async validateTokenAndUser(username: string): Promise<{ isValid: boolean; error?: string }> {
     try {
-      // Validate user access first (quick check)
-      const validation = await this.validateClassicToken(username);
-      if (!validation.isValid) {
-        return validation;
-      }
- 
-      // If user access is valid and it's a fine-grained token, verify permissions
-      if (this.isFineGrainedToken()) {
-        console.log('Validating fine-grained token permissions...');
-        const permissionCheck = await this.verifyFineGrainedPermissions();
-        if (!permissionCheck.isValid) {
-          return permissionCheck;
-        }
-      }
- 
-      return { isValid: true };
+      return await this.validateClassicToken(username);
     } catch (error) {
       console.error('Validation failed:', error);
       return { isValid: false, error: 'Validation failed' };

From ef9665c00f069e1c50b474fe77c41d49d353a46a Mon Sep 17 00:00:00 2001
From: Mamerto Fabian Jr <mfabianjr@gmail.com>
Date: Wed, 22 Jan 2025 08:55:08 +0800
Subject: [PATCH 20/75] feat: Add methods for fine-grained token verification
 and permission checks

---
 src/services/GitHubService.ts | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/services/GitHubService.ts b/src/services/GitHubService.ts
index ea58b45..20582b0 100644
--- a/src/services/GitHubService.ts
+++ b/src/services/GitHubService.ts
@@ -35,10 +35,17 @@ export class GitHubService extends BaseGitHubService {
     return this.tokenValidator.isClassicToken();
   }
 
+  async isFineGrainedToken(): Promise<boolean> {
+    return this.tokenValidator.isFineGrainedToken();
+  }
+
   async validateTokenAndUser(username: string): Promise<{ isValid: boolean; error?: string }> {
     return this.tokenValidator.validateTokenAndUser(username);
   }
 
+  async verifyFineGrainedPermissions(): Promise<{ isValid: boolean; error?: string }> {
+    return this.tokenValidator.verifyFineGrainedPermissions();
+  }
 
   async repoExists(owner: string, repo: string): Promise<boolean> {
     try {

From bcf58d749eb5c1d988ea36bc173f77dc776faa8f Mon Sep 17 00:00:00 2001
From: "Mamerto Fabian Jr (aider)" <mfabianjr@gmail.com>
Date: Wed, 22 Jan 2025 09:02:23 +0800
Subject: [PATCH 21/75] feat: Add GitHub token fine-grained permissions check
 UI and validation

---
 src/lib/components/GitHubSettings.svelte | 142 ++++++++++++++++++++++-
 1 file changed, 141 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/GitHubSettings.svelte b/src/lib/components/GitHubSettings.svelte
index 537b8c0..0346371 100644
--- a/src/lib/components/GitHubSettings.svelte
+++ b/src/lib/components/GitHubSettings.svelte
@@ -39,6 +39,15 @@
   let repoInputFocused = false;
   let repoExists = false;
   let selectedIndex = -1;
+  let isCheckingPermissions = false;
+  let lastPermissionCheck: number | null = null;
+  let permissionStatus = {
+    allRepos: undefined as boolean | undefined,
+    admin: undefined as boolean | undefined,
+    contents: undefined as boolean | undefined
+  };
+  let permissionError: string | null = null;
+  let previousToken: string | null = null;
 
   $: filteredRepos = repositories
     .filter(
@@ -119,6 +128,11 @@
   }
 
   onMount(async () => {
+    // Load last permission check timestamp from storage
+    const storage = await chrome.storage.local.get('lastPermissionCheck');
+    lastPermissionCheck = storage.lastPermissionCheck || null;
+    previousToken = githubToken;
+    
     // If we have initial valid settings, validate and load repos
     if (githubToken && repoOwner) {
       await validateSettings();
@@ -183,6 +197,63 @@
     }
   }
 
+  async function checkFineGrainedPermissions() {
+    if (!githubToken || isCheckingPermissions) return;
+
+    isCheckingPermissions = true;
+    permissionError = null;
+    
+    try {
+      const githubService = new GitHubService(githubToken);
+      const result = await githubService.verifyFineGrainedPermissions();
+      
+      if (result.isValid) {
+        permissionStatus = {
+          allRepos: true,
+          admin: true,
+          contents: true
+        };
+        lastPermissionCheck = Date.now();
+        await chrome.storage.local.set({ lastPermissionCheck });
+        previousToken = githubToken;
+      } else {
+        // Parse the error message to determine which permission failed
+        permissionStatus = {
+          allRepos: !result.error?.includes('repository creation'),
+          admin: !result.error?.includes('administration'),
+          contents: !result.error?.includes('contents')
+        };
+        permissionError = result.error || 'Permission verification failed';
+      }
+    } catch (error) {
+      console.error('Permission check failed:', error);
+      permissionError = 'Failed to verify permissions';
+    } finally {
+      isCheckingPermissions = false;
+    }
+  }
+
+  const handleSave = async (event: Event) => {
+    event.preventDefault();
+    
+    if (tokenType === 'fine-grained') {
+      const THIRTY_DAYS = 30 * 24 * 60 * 60 * 1000;
+      const needsCheck = 
+        previousToken !== githubToken || 
+        !lastPermissionCheck || 
+        Date.now() - lastPermissionCheck > THIRTY_DAYS;
+
+      if (needsCheck) {
+        await checkFineGrainedPermissions();
+        if (permissionError) {
+          return; // Don't proceed if permissions check failed
+        }
+      }
+    }
+    
+    onSave();
+  };
+
   $: if (!isOnboarding && projectId && projectSettings[projectId]) {
     repoName = projectSettings[projectId].repoName;
     branch = projectSettings[projectId].branch;
@@ -194,7 +265,7 @@
   <NewUserGuide />
 
   <!-- Settings Form -->
-  <form on:submit|preventDefault={onSave} class="space-y-4">
+  <form on:submit|preventDefault={handleSave} class="space-y-4">
     <div class="space-y-2">
       <Label for="githubToken" class="text-slate-200">
         GitHub Token
@@ -239,6 +310,75 @@
             </a>
           {/if}
         </p>
+
+        {#if tokenType === 'fine-grained' && isTokenValid}
+          <div class="mt-2 space-y-2">
+            <div class="flex items-center justify-between">
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                class="text-sm"
+                on:click={checkFineGrainedPermissions}
+                disabled={isCheckingPermissions}
+              >
+                {#if isCheckingPermissions}
+                  <Loader2 class="h-4 w-4 mr-2 animate-spin" />
+                  Checking Permissions...
+                {:else}
+                  Verify Permissions
+                {/if}
+              </Button>
+              {#if lastPermissionCheck}
+                <span class="text-xs text-slate-400">
+                  Last checked: {new Date(lastPermissionCheck).toLocaleDateString()}
+                </span>
+              {/if}
+            </div>
+
+            <div class="grid grid-cols-3 gap-2 text-sm">
+              <div class="p-2 rounded border border-slate-700 bg-slate-800">
+                <div class="flex items-center justify-between">
+                  <span>All Repositories</span>
+                  {#if permissionStatus.allRepos !== undefined}
+                    {#if permissionStatus.allRepos}
+                      <Check class="h-4 w-4 text-green-500" />
+                    {:else}
+                      <X class="h-4 w-4 text-red-500" />
+                    {/if}
+                  {/if}
+                </div>
+              </div>
+              <div class="p-2 rounded border border-slate-700 bg-slate-800">
+                <div class="flex items-center justify-between">
+                  <span>Administration</span>
+                  {#if permissionStatus.admin !== undefined}
+                    {#if permissionStatus.admin}
+                      <Check class="h-4 w-4 text-green-500" />
+                    {:else}
+                      <X class="h-4 w-4 text-red-500" />
+                    {/if}
+                  {/if}
+                </div>
+              </div>
+              <div class="p-2 rounded border border-slate-700 bg-slate-800">
+                <div class="flex items-center justify-between">
+                  <span>Contents</span>
+                  {#if permissionStatus.contents !== undefined}
+                    {#if permissionStatus.contents}
+                      <Check class="h-4 w-4 text-green-500" />
+                    {:else}
+                      <X class="h-4 w-4 text-red-500" />
+                    {/if}
+                  {/if}
+                </div>
+              </div>
+            </div>
+            {#if permissionError}
+              <p class="text-sm text-red-400">{permissionError}</p>
+            {/if}
+          </div>
+        {/if}
       {/if}
     </div>
 

From 1f1c7ec771bb7a72f0a0d58e8d6d6eebd03a897c Mon Sep 17 00:00:00 2001
From: Mamerto Fabian Jr <mfabianjr@gmail.com>
Date: Wed, 22 Jan 2025 09:09:40 +0800
Subject: [PATCH 22/75] feat: Update fine-grained permissions verification to
 accept username parameter

---
 src/lib/components/GitHubSettings.svelte | 2 +-
 src/services/GitHubService.ts            | 4 ++--
 src/services/GitHubTokenValidator.ts     | 6 +-----
 3 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/lib/components/GitHubSettings.svelte b/src/lib/components/GitHubSettings.svelte
index 0346371..38984e2 100644
--- a/src/lib/components/GitHubSettings.svelte
+++ b/src/lib/components/GitHubSettings.svelte
@@ -205,7 +205,7 @@
     
     try {
       const githubService = new GitHubService(githubToken);
-      const result = await githubService.verifyFineGrainedPermissions();
+      const result = await githubService.verifyFineGrainedPermissions(repoOwner);
       
       if (result.isValid) {
         permissionStatus = {
diff --git a/src/services/GitHubService.ts b/src/services/GitHubService.ts
index 20582b0..cd5a8a7 100644
--- a/src/services/GitHubService.ts
+++ b/src/services/GitHubService.ts
@@ -43,8 +43,8 @@ export class GitHubService extends BaseGitHubService {
     return this.tokenValidator.validateTokenAndUser(username);
   }
 
-  async verifyFineGrainedPermissions(): Promise<{ isValid: boolean; error?: string }> {
-    return this.tokenValidator.verifyFineGrainedPermissions();
+  async verifyFineGrainedPermissions(username: string): Promise<{ isValid: boolean; error?: string }> {
+    return this.tokenValidator.verifyFineGrainedPermissions(username);
   }
 
   async repoExists(owner: string, repo: string): Promise<boolean> {
diff --git a/src/services/GitHubTokenValidator.ts b/src/services/GitHubTokenValidator.ts
index 23a091c..a91fcef 100644
--- a/src/services/GitHubTokenValidator.ts
+++ b/src/services/GitHubTokenValidator.ts
@@ -23,7 +23,7 @@ export class GitHubTokenValidator extends BaseGitHubService {
     return new Promise(resolve => setTimeout(resolve, ms));
   }
 
-  async verifyFineGrainedPermissions(): Promise<{ isValid: boolean; error?: string }> {
+  async verifyFineGrainedPermissions(username: string): Promise<{ isValid: boolean; error?: string }> {
     if (!this.isFineGrainedToken()) {
       return { isValid: false, error: 'Not a fine-grained token' };
     }
@@ -48,10 +48,6 @@ export class GitHubTokenValidator extends BaseGitHubService {
         };
       }
 
-      // Get authenticated user
-      const user = await this.request('GET', '/user');
-      const username = user.login;
-
       // Test visibility change (Admin Write)
       try {
         await this.request('PATCH', `/repos/${username}/${repoName}`, {

From 85b3337ca9ec4df63ba444b7ef51b6c9ec9fbbd9 Mon Sep 17 00:00:00 2001
From: "Mamerto Fabian Jr (aider)" <mfabianjr@gmail.com>
Date: Wed, 22 Jan 2025 09:12:26 +0800
Subject: [PATCH 23/75] fix: Increase GitHub repository creation delay to
 prevent initialization locks

---
 src/services/GitHubTokenValidator.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/services/GitHubTokenValidator.ts b/src/services/GitHubTokenValidator.ts
index a91fcef..e45a95e 100644
--- a/src/services/GitHubTokenValidator.ts
+++ b/src/services/GitHubTokenValidator.ts
@@ -40,7 +40,7 @@ export class GitHubTokenValidator extends BaseGitHubService {
           private: true,
           auto_init: true
         });
-        await this.delay(1000); // Wait for repo creation
+        await this.delay(5000); // Increased delay to 5 seconds for GitHub initialization
       } catch (error) {
         return { 
           isValid: false, 

From 79b146f4aed17728a3901fc9c35050c96933e11c Mon Sep 17 00:00:00 2001
From: "Mamerto Fabian Jr (aider)" <mfabianjr@gmail.com>
Date: Wed, 22 Jan 2025 09:17:13 +0800
Subject: [PATCH 24/75] refactor: Optimize GitHub token permission verification
 process

---
 src/services/GitHubTokenValidator.ts | 40 +++++++++++++---------------
 1 file changed, 19 insertions(+), 21 deletions(-)

diff --git a/src/services/GitHubTokenValidator.ts b/src/services/GitHubTokenValidator.ts
index e45a95e..3e8d4b3 100644
--- a/src/services/GitHubTokenValidator.ts
+++ b/src/services/GitHubTokenValidator.ts
@@ -33,14 +33,14 @@ export class GitHubTokenValidator extends BaseGitHubService {
       const timestamp = Date.now();
       const repoName = `test-repo-${timestamp}`;
       
-      // Test repository creation (All repositories access + Admin Write)
+      // Test repository creation (All repositories access)
       try {
         await this.request('POST', '/user/repos', {
           name: repoName,
           private: true,
           auto_init: true
         });
-        await this.delay(5000); // Increased delay to 5 seconds for GitHub initialization
+        await this.delay(1000); // Reduced delay since we're doing simpler operations
       } catch (error) {
         return { 
           isValid: false, 
@@ -48,12 +48,10 @@ export class GitHubTokenValidator extends BaseGitHubService {
         };
       }
 
-      // Test visibility change (Admin Write)
       try {
-        await this.request('PATCH', `/repos/${username}/${repoName}`, {
-          private: false
-        });
-        await this.delay(1000);
+        // Test administration access by getting repository settings
+        await this.request('GET', `/repos/${username}/${repoName}/settings`);
+        await this.delay(500);
       } catch (error) {
         // Cleanup repo before returning
         await this.request('DELETE', `/repos/${username}/${repoName}`);
@@ -63,21 +61,16 @@ export class GitHubTokenValidator extends BaseGitHubService {
         };
       }
 
-      // Test content write
       try {
-        const content = btoa('test'); // Convert to base64
-        const response = await this.request('PUT', `/repos/${username}/${repoName}/contents/test.txt`, {
-          message: 'Add test file',
+        // Test contents read by listing contents
+        await this.request('GET', `/repos/${username}/${repoName}/contents`);
+        
+        // Test contents write with a small .gitkeep file
+        const content = btoa(''); // empty file in base64
+        await this.request('PUT', `/repos/${username}/${repoName}/contents/.gitkeep`, {
+          message: 'Test write permission',
           content: content
         });
-        await this.delay(1000);
-
-        // Test content delete
-        await this.request('DELETE', `/repos/${username}/${repoName}/contents/test.txt`, {
-          message: 'Remove test file',
-          sha: response.content.sha
-        });
-        await this.delay(1000);
       } catch (error) {
         // Cleanup repo before returning
         await this.request('DELETE', `/repos/${username}/${repoName}`);
@@ -88,14 +81,19 @@ export class GitHubTokenValidator extends BaseGitHubService {
       }
 
       // Cleanup: Delete the test repository
-      await this.request('DELETE', `/repos/${username}/${repoName}`);
+      try {
+        await this.request('DELETE', `/repos/${username}/${repoName}`);
+      } catch (error) {
+        console.error('Failed to cleanup test repository:', error);
+        // Don't return error here as permissions were already verified
+      }
       
       return { isValid: true };
     } catch (error) {
       console.error('Permission verification failed:', error);
       return { 
         isValid: false, 
-        error: `Permission verification failed: ${error instanceof Error ? error.message : 'Unknown error'}` 
+        error: `Permission verification failed: ${error instanceof Error ? error.message : String(error)}` 
       };
     }
   }

From 466b007d4edb81b143a441ed5678b4bc1027e3c2 Mon Sep 17 00:00:00 2001
From: Mamerto Fabian Jr <mfabianjr@gmail.com>
Date: Wed, 22 Jan 2025 09:20:51 +0800
Subject: [PATCH 25/75] feat: Update repository visibility test to use PATCH
 method for admin access

---
 src/services/GitHubTokenValidator.ts | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/services/GitHubTokenValidator.ts b/src/services/GitHubTokenValidator.ts
index 3e8d4b3..2aac10a 100644
--- a/src/services/GitHubTokenValidator.ts
+++ b/src/services/GitHubTokenValidator.ts
@@ -48,10 +48,12 @@ export class GitHubTokenValidator extends BaseGitHubService {
         };
       }
 
+      // Test visibility change (Admin Write)
       try {
-        // Test administration access by getting repository settings
-        await this.request('GET', `/repos/${username}/${repoName}/settings`);
-        await this.delay(500);
+        await this.request('PATCH', `/repos/${username}/${repoName}`, {
+          private: false
+        });
+        await this.delay(1000);
       } catch (error) {
         // Cleanup repo before returning
         await this.request('DELETE', `/repos/${username}/${repoName}`);

From 4663e9c858bf403b37faad99781fe1b05719db73 Mon Sep 17 00:00:00 2001
From: "Mamerto Fabian Jr (aider)" <mfabianjr@gmail.com>
Date: Wed, 22 Jan 2025 09:30:19 +0800
Subject: [PATCH 26/75] refactor: Optimize GitHub token permissions UI with
 compact, inline layout

---
 src/lib/components/GitHubSettings.svelte | 100 ++++++++++-------------
 1 file changed, 44 insertions(+), 56 deletions(-)

diff --git a/src/lib/components/GitHubSettings.svelte b/src/lib/components/GitHubSettings.svelte
index 38984e2..013d777 100644
--- a/src/lib/components/GitHubSettings.svelte
+++ b/src/lib/components/GitHubSettings.svelte
@@ -297,87 +297,75 @@
       {#if validationError}
         <p class="text-sm text-red-400 mt-1">{validationError}</p>
       {:else if tokenType}
-        <p class="text-sm mt-1 {tokenType === 'classic' ? 'text-orange-400' : 'text-emerald-400'}">
-          {tokenType === 'classic' ? '⚠️ Classic' : '✨ Fine-grained'} token detected
+        <div class="flex items-center gap-2">
+          <p class="text-sm {tokenType === 'classic' ? 'text-orange-400' : 'text-emerald-400'}">
+            {tokenType === 'classic' ? '⚠️ Classic' : '✨ Fine-grained'} token detected
+          </p>
           {#if tokenType === 'classic'}
             <a
               href={CREATE_FINE_GRAINED_TOKEN_URL}
               target="_blank"
               rel="noopener noreferrer"
-              class="text-blue-400 hover:text-blue-300 ml-1"
+              class="text-sm text-blue-400 hover:text-blue-300"
             >
               Create a fine-grained token instead
             </a>
-          {/if}
-        </p>
-
-        {#if tokenType === 'fine-grained' && isTokenValid}
-          <div class="mt-2 space-y-2">
-            <div class="flex items-center justify-between">
+          {:else if isTokenValid}
+            <div class="flex items-center gap-2">
               <Button
                 type="button"
                 variant="outline"
                 size="sm"
-                class="text-sm"
+                class="text-xs"
                 on:click={checkFineGrainedPermissions}
                 disabled={isCheckingPermissions}
               >
                 {#if isCheckingPermissions}
-                  <Loader2 class="h-4 w-4 mr-2 animate-spin" />
-                  Checking Permissions...
+                  <Loader2 class="h-3 w-3 mr-1 animate-spin" />
+                  Checking...
                 {:else}
                   Verify Permissions
                 {/if}
               </Button>
-              {#if lastPermissionCheck}
-                <span class="text-xs text-slate-400">
-                  Last checked: {new Date(lastPermissionCheck).toLocaleDateString()}
-                </span>
-              {/if}
-            </div>
-
-            <div class="grid grid-cols-3 gap-2 text-sm">
-              <div class="p-2 rounded border border-slate-700 bg-slate-800">
-                <div class="flex items-center justify-between">
-                  <span>All Repositories</span>
-                  {#if permissionStatus.allRepos !== undefined}
-                    {#if permissionStatus.allRepos}
-                      <Check class="h-4 w-4 text-green-500" />
-                    {:else}
-                      <X class="h-4 w-4 text-red-500" />
+              {#if !isCheckingPermissions}
+                <div class="flex items-center gap-1.5 text-xs">
+                  <span class="flex items-center gap-0.5">
+                    {#if permissionStatus.allRepos !== undefined}
+                      {#if permissionStatus.allRepos}
+                        <Check class="h-3 w-3 text-green-500" />
+                      {:else}
+                        <X class="h-3 w-3 text-red-500" />
+                      {/if}
                     {/if}
-                  {/if}
-                </div>
-              </div>
-              <div class="p-2 rounded border border-slate-700 bg-slate-800">
-                <div class="flex items-center justify-between">
-                  <span>Administration</span>
-                  {#if permissionStatus.admin !== undefined}
-                    {#if permissionStatus.admin}
-                      <Check class="h-4 w-4 text-green-500" />
-                    {:else}
-                      <X class="h-4 w-4 text-red-500" />
+                    Repos
+                  </span>
+                  <span class="flex items-center gap-0.5">
+                    {#if permissionStatus.admin !== undefined}
+                      {#if permissionStatus.admin}
+                        <Check class="h-3 w-3 text-green-500" />
+                      {:else}
+                        <X class="h-3 w-3 text-red-500" />
+                      {/if}
                     {/if}
-                  {/if}
-                </div>
-              </div>
-              <div class="p-2 rounded border border-slate-700 bg-slate-800">
-                <div class="flex items-center justify-between">
-                  <span>Contents</span>
-                  {#if permissionStatus.contents !== undefined}
-                    {#if permissionStatus.contents}
-                      <Check class="h-4 w-4 text-green-500" />
-                    {:else}
-                      <X class="h-4 w-4 text-red-500" />
+                    Admin
+                  </span>
+                  <span class="flex items-center gap-0.5">
+                    {#if permissionStatus.contents !== undefined}
+                      {#if permissionStatus.contents}
+                        <Check class="h-3 w-3 text-green-500" />
+                      {:else}
+                        <X class="h-3 w-3 text-red-500" />
+                      {/if}
                     {/if}
-                  {/if}
+                    Code
+                  </span>
                 </div>
-              </div>
+              {/if}
             </div>
-            {#if permissionError}
-              <p class="text-sm text-red-400">{permissionError}</p>
-            {/if}
-          </div>
+          {/if}
+        </div>
+        {#if permissionError}
+          <p class="text-sm text-red-400 mt-1">{permissionError}</p>
         {/if}
       {/if}
     </div>

From 39fad9e2555916a05d4e396bc93b8fced51e493f Mon Sep 17 00:00:00 2001
From: "Mamerto Fabian Jr (aider)" <mfabianjr@gmail.com>
Date: Wed, 22 Jan 2025 09:32:43 +0800
Subject: [PATCH 27/75] refactor: Separate token detection, verify permissions,
 and permission indicators

---
 src/lib/components/GitHubSettings.svelte | 84 ++++++++++++------------
 1 file changed, 43 insertions(+), 41 deletions(-)

diff --git a/src/lib/components/GitHubSettings.svelte b/src/lib/components/GitHubSettings.svelte
index 013d777..0fa9174 100644
--- a/src/lib/components/GitHubSettings.svelte
+++ b/src/lib/components/GitHubSettings.svelte
@@ -297,19 +297,21 @@
       {#if validationError}
         <p class="text-sm text-red-400 mt-1">{validationError}</p>
       {:else if tokenType}
-        <div class="flex items-center gap-2">
+        <div class="space-y-2">
           <p class="text-sm {tokenType === 'classic' ? 'text-orange-400' : 'text-emerald-400'}">
             {tokenType === 'classic' ? '⚠️ Classic' : '✨ Fine-grained'} token detected
           </p>
           {#if tokenType === 'classic'}
-            <a
-              href={CREATE_FINE_GRAINED_TOKEN_URL}
-              target="_blank"
-              rel="noopener noreferrer"
-              class="text-sm text-blue-400 hover:text-blue-300"
-            >
-              Create a fine-grained token instead
-            </a>
+            <p>
+              <a
+                href={CREATE_FINE_GRAINED_TOKEN_URL}
+                target="_blank"
+                rel="noopener noreferrer"
+                class="text-sm text-blue-400 hover:text-blue-300"
+              >
+                Create a fine-grained token instead
+              </a>
+            </p>
           {:else if isTokenValid}
             <div class="flex items-center gap-2">
               <Button
@@ -327,41 +329,41 @@
                   Verify Permissions
                 {/if}
               </Button>
-              {#if !isCheckingPermissions}
-                <div class="flex items-center gap-1.5 text-xs">
-                  <span class="flex items-center gap-0.5">
-                    {#if permissionStatus.allRepos !== undefined}
-                      {#if permissionStatus.allRepos}
-                        <Check class="h-3 w-3 text-green-500" />
-                      {:else}
-                        <X class="h-3 w-3 text-red-500" />
-                      {/if}
+            </div>
+            {#if !isCheckingPermissions}
+              <div class="flex items-center gap-1.5 text-xs">
+                <span class="flex items-center gap-0.5">
+                  {#if permissionStatus.allRepos !== undefined}
+                    {#if permissionStatus.allRepos}
+                      <Check class="h-3 w-3 text-green-500" />
+                    {:else}
+                      <X class="h-3 w-3 text-red-500" />
                     {/if}
-                    Repos
-                  </span>
-                  <span class="flex items-center gap-0.5">
-                    {#if permissionStatus.admin !== undefined}
-                      {#if permissionStatus.admin}
-                        <Check class="h-3 w-3 text-green-500" />
-                      {:else}
-                        <X class="h-3 w-3 text-red-500" />
-                      {/if}
+                  {/if}
+                  Repos
+                </span>
+                <span class="flex items-center gap-0.5">
+                  {#if permissionStatus.admin !== undefined}
+                    {#if permissionStatus.admin}
+                      <Check class="h-3 w-3 text-green-500" />
+                    {:else}
+                      <X class="h-3 w-3 text-red-500" />
                     {/if}
-                    Admin
-                  </span>
-                  <span class="flex items-center gap-0.5">
-                    {#if permissionStatus.contents !== undefined}
-                      {#if permissionStatus.contents}
-                        <Check class="h-3 w-3 text-green-500" />
-                      {:else}
-                        <X class="h-3 w-3 text-red-500" />
-                      {/if}
+                  {/if}
+                  Admin
+                </span>
+                <span class="flex items-center gap-0.5">
+                  {#if permissionStatus.contents !== undefined}
+                    {#if permissionStatus.contents}
+                      <Check class="h-3 w-3 text-green-500" />
+                    {:else}
+                      <X class="h-3 w-3 text-red-500" />
                     {/if}
-                    Code
-                  </span>
-                </div>
-              {/if}
-            </div>
+                  {/if}
+                  Code
+                </span>
+              </div>
+            {/if}
           {/if}
         </div>
         {#if permissionError}

From 0abef55cfdf994ab0b8dc5e217186dcab0365d63 Mon Sep 17 00:00:00 2001
From: Mamerto Fabian Jr <mfabianjr@gmail.com>
Date: Wed, 22 Jan 2025 09:35:59 +0800
Subject: [PATCH 28/75] refactor: Enhance GitHub settings UI layout and
 increase token validation delay

---
 src/lib/components/GitHubSettings.svelte | 64 ++++++++++++------------
 src/services/GitHubTokenValidator.ts     |  4 +-
 2 files changed, 34 insertions(+), 34 deletions(-)

diff --git a/src/lib/components/GitHubSettings.svelte b/src/lib/components/GitHubSettings.svelte
index 0fa9174..e4a2cfc 100644
--- a/src/lib/components/GitHubSettings.svelte
+++ b/src/lib/components/GitHubSettings.svelte
@@ -329,41 +329,41 @@
                   Verify Permissions
                 {/if}
               </Button>
-            </div>
-            {#if !isCheckingPermissions}
-              <div class="flex items-center gap-1.5 text-xs">
-                <span class="flex items-center gap-0.5">
-                  {#if permissionStatus.allRepos !== undefined}
-                    {#if permissionStatus.allRepos}
-                      <Check class="h-3 w-3 text-green-500" />
-                    {:else}
-                      <X class="h-3 w-3 text-red-500" />
+              {#if !isCheckingPermissions}
+                <div class="flex items-center gap-1.5 text-xs">
+                  <span class="flex items-center gap-0.5">
+                    {#if permissionStatus.allRepos !== undefined}
+                      {#if permissionStatus.allRepos}
+                        <Check class="h-3 w-3 text-green-500" />
+                      {:else}
+                        <X class="h-3 w-3 text-red-500" />
+                      {/if}
                     {/if}
-                  {/if}
-                  Repos
-                </span>
-                <span class="flex items-center gap-0.5">
-                  {#if permissionStatus.admin !== undefined}
-                    {#if permissionStatus.admin}
-                      <Check class="h-3 w-3 text-green-500" />
-                    {:else}
-                      <X class="h-3 w-3 text-red-500" />
+                    Repos
+                  </span>
+                  <span class="flex items-center gap-0.5">
+                    {#if permissionStatus.admin !== undefined}
+                      {#if permissionStatus.admin}
+                        <Check class="h-3 w-3 text-green-500" />
+                      {:else}
+                        <X class="h-3 w-3 text-red-500" />
+                      {/if}
                     {/if}
-                  {/if}
-                  Admin
-                </span>
-                <span class="flex items-center gap-0.5">
-                  {#if permissionStatus.contents !== undefined}
-                    {#if permissionStatus.contents}
-                      <Check class="h-3 w-3 text-green-500" />
-                    {:else}
-                      <X class="h-3 w-3 text-red-500" />
+                    Admin
+                  </span>
+                  <span class="flex items-center gap-0.5">
+                    {#if permissionStatus.contents !== undefined}
+                      {#if permissionStatus.contents}
+                        <Check class="h-3 w-3 text-green-500" />
+                      {:else}
+                        <X class="h-3 w-3 text-red-500" />
+                      {/if}
                     {/if}
-                  {/if}
-                  Code
-                </span>
-              </div>
-            {/if}
+                    Code
+                  </span>
+                </div>
+              {/if}
+            </div>
           {/if}
         </div>
         {#if permissionError}
diff --git a/src/services/GitHubTokenValidator.ts b/src/services/GitHubTokenValidator.ts
index 2aac10a..ce2d29d 100644
--- a/src/services/GitHubTokenValidator.ts
+++ b/src/services/GitHubTokenValidator.ts
@@ -40,7 +40,7 @@ export class GitHubTokenValidator extends BaseGitHubService {
           private: true,
           auto_init: true
         });
-        await this.delay(1000); // Reduced delay since we're doing simpler operations
+        await this.delay(2000);
       } catch (error) {
         return { 
           isValid: false, 
@@ -53,7 +53,7 @@ export class GitHubTokenValidator extends BaseGitHubService {
         await this.request('PATCH', `/repos/${username}/${repoName}`, {
           private: false
         });
-        await this.delay(1000);
+        await this.delay(2000);
       } catch (error) {
         // Cleanup repo before returning
         await this.request('DELETE', `/repos/${username}/${repoName}`);

From b72eb5ce0b334a5be2ad7e708ecf515d8ec17a17 Mon Sep 17 00:00:00 2001
From: "Mamerto Fabian Jr (aider)" <mfabianjr@gmail.com>
Date: Wed, 22 Jan 2025 09:38:26 +0800
Subject: [PATCH 29/75] feat: Implement progressive permission checking UI with
 spinners

---
 src/lib/components/GitHubSettings.svelte | 91 ++++++++++++++----------
 1 file changed, 55 insertions(+), 36 deletions(-)

diff --git a/src/lib/components/GitHubSettings.svelte b/src/lib/components/GitHubSettings.svelte
index e4a2cfc..9ebb9c4 100644
--- a/src/lib/components/GitHubSettings.svelte
+++ b/src/lib/components/GitHubSettings.svelte
@@ -41,6 +41,7 @@
   let selectedIndex = -1;
   let isCheckingPermissions = false;
   let lastPermissionCheck: number | null = null;
+  let currentCheck: 'repos' | 'admin' | 'code' | null = null;
   let permissionStatus = {
     allRepos: undefined as boolean | undefined,
     admin: undefined as boolean | undefined,
@@ -202,17 +203,30 @@
 
     isCheckingPermissions = true;
     permissionError = null;
+    permissionStatus = {
+      allRepos: undefined,
+      admin: undefined,
+      contents: undefined
+    };
     
     try {
       const githubService = new GitHubService(githubToken);
+      
+      // Check repository creation permission
+      currentCheck = 'repos';
       const result = await githubService.verifyFineGrainedPermissions(repoOwner);
       
       if (result.isValid) {
-        permissionStatus = {
-          allRepos: true,
-          admin: true,
-          contents: true
-        };
+        permissionStatus.allRepos = true;
+        
+        // Check admin permission
+        currentCheck = 'admin';
+        permissionStatus.admin = true;
+        
+        // Check contents permission
+        currentCheck = 'code';
+        permissionStatus.contents = true;
+        
         lastPermissionCheck = Date.now();
         await chrome.storage.local.set({ lastPermissionCheck });
         previousToken = githubToken;
@@ -230,6 +244,7 @@
       permissionError = 'Failed to verify permissions';
     } finally {
       isCheckingPermissions = false;
+      currentCheck = null;
     }
   }
 
@@ -329,40 +344,44 @@
                   Verify Permissions
                 {/if}
               </Button>
-              {#if !isCheckingPermissions}
-                <div class="flex items-center gap-1.5 text-xs">
-                  <span class="flex items-center gap-0.5">
-                    {#if permissionStatus.allRepos !== undefined}
-                      {#if permissionStatus.allRepos}
-                        <Check class="h-3 w-3 text-green-500" />
-                      {:else}
-                        <X class="h-3 w-3 text-red-500" />
-                      {/if}
+              <div class="flex items-center gap-1.5 text-xs">
+                <span class="flex items-center gap-0.5">
+                  {#if currentCheck === 'repos'}
+                    <Loader2 class="h-3 w-3 animate-spin text-slate-400" />
+                  {:else if permissionStatus.allRepos !== undefined}
+                    {#if permissionStatus.allRepos}
+                      <Check class="h-3 w-3 text-green-500" />
+                    {:else}
+                      <X class="h-3 w-3 text-red-500" />
                     {/if}
-                    Repos
-                  </span>
-                  <span class="flex items-center gap-0.5">
-                    {#if permissionStatus.admin !== undefined}
-                      {#if permissionStatus.admin}
-                        <Check class="h-3 w-3 text-green-500" />
-                      {:else}
-                        <X class="h-3 w-3 text-red-500" />
-                      {/if}
+                  {/if}
+                  Repos
+                </span>
+                <span class="flex items-center gap-0.5">
+                  {#if currentCheck === 'admin'}
+                    <Loader2 class="h-3 w-3 animate-spin text-slate-400" />
+                  {:else if permissionStatus.admin !== undefined}
+                    {#if permissionStatus.admin}
+                      <Check class="h-3 w-3 text-green-500" />
+                    {:else}
+                      <X class="h-3 w-3 text-red-500" />
                     {/if}
-                    Admin
-                  </span>
-                  <span class="flex items-center gap-0.5">
-                    {#if permissionStatus.contents !== undefined}
-                      {#if permissionStatus.contents}
-                        <Check class="h-3 w-3 text-green-500" />
-                      {:else}
-                        <X class="h-3 w-3 text-red-500" />
-                      {/if}
+                  {/if}
+                  Admin
+                </span>
+                <span class="flex items-center gap-0.5">
+                  {#if currentCheck === 'code'}
+                    <Loader2 class="h-3 w-3 animate-spin text-slate-400" />
+                  {:else if permissionStatus.contents !== undefined}
+                    {#if permissionStatus.contents}
+                      <Check class="h-3 w-3 text-green-500" />
+                    {:else}
+                      <X class="h-3 w-3 text-red-500" />
                     {/if}
-                    Code
-                  </span>
-                </div>
-              {/if}
+                  {/if}
+                  Code
+                </span>
+              </div>
             </div>
           {/if}
         </div>

From 152e31978377ee4d7fc89a50fdb6d1ab6c69dabf Mon Sep 17 00:00:00 2001
From: "Mamerto Fabian Jr (aider)" <mfabianjr@gmail.com>
Date: Wed, 22 Jan 2025 09:45:31 +0800
Subject: [PATCH 30/75] feat: Add progress callback for fine-grained token
 permission verification

---
 src/lib/components/GitHubSettings.svelte | 30 +++++++++++++++---------
 src/services/GitHubTokenValidator.ts     | 15 +++++++++++-
 2 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/src/lib/components/GitHubSettings.svelte b/src/lib/components/GitHubSettings.svelte
index 9ebb9c4..966b818 100644
--- a/src/lib/components/GitHubSettings.svelte
+++ b/src/lib/components/GitHubSettings.svelte
@@ -214,19 +214,27 @@
       
       // Check repository creation permission
       currentCheck = 'repos';
-      const result = await githubService.verifyFineGrainedPermissions(repoOwner);
+      const result = await githubService.verifyFineGrainedPermissions(
+        repoOwner,
+        ({ permission, isValid }) => {
+          // Update the status as each permission is checked
+          switch (permission) {
+            case 'repos':
+              permissionStatus.allRepos = isValid;
+              break;
+            case 'admin':
+              permissionStatus.admin = isValid;
+              break;
+            case 'code':
+              permissionStatus.contents = isValid;
+              break;
+          }
+          // Force Svelte to update the UI
+          permissionStatus = { ...permissionStatus };
+        }
+      );
       
       if (result.isValid) {
-        permissionStatus.allRepos = true;
-        
-        // Check admin permission
-        currentCheck = 'admin';
-        permissionStatus.admin = true;
-        
-        // Check contents permission
-        currentCheck = 'code';
-        permissionStatus.contents = true;
-        
         lastPermissionCheck = Date.now();
         await chrome.storage.local.set({ lastPermissionCheck });
         previousToken = githubToken;
diff --git a/src/services/GitHubTokenValidator.ts b/src/services/GitHubTokenValidator.ts
index ce2d29d..01ff1c2 100644
--- a/src/services/GitHubTokenValidator.ts
+++ b/src/services/GitHubTokenValidator.ts
@@ -1,5 +1,12 @@
 import { BaseGitHubService } from './BaseGitHubService';
 
+export type PermissionCheckProgress = {
+  permission: 'repos' | 'admin' | 'code';
+  isValid: boolean;
+};
+
+export type ProgressCallback = (progress: PermissionCheckProgress) => void;
+
 export class GitHubTokenValidator extends BaseGitHubService {
   async validateToken(): Promise<boolean> {
     try {
@@ -23,7 +30,10 @@ export class GitHubTokenValidator extends BaseGitHubService {
     return new Promise(resolve => setTimeout(resolve, ms));
   }
 
-  async verifyFineGrainedPermissions(username: string): Promise<{ isValid: boolean; error?: string }> {
+  async verifyFineGrainedPermissions(
+    username: string,
+    onProgress?: ProgressCallback
+  ): Promise<{ isValid: boolean; error?: string }> {
     if (!this.isFineGrainedToken()) {
       return { isValid: false, error: 'Not a fine-grained token' };
     }
@@ -41,6 +51,7 @@ export class GitHubTokenValidator extends BaseGitHubService {
           auto_init: true
         });
         await this.delay(2000);
+        onProgress?.({ permission: 'repos', isValid: true });
       } catch (error) {
         return { 
           isValid: false, 
@@ -54,6 +65,7 @@ export class GitHubTokenValidator extends BaseGitHubService {
           private: false
         });
         await this.delay(2000);
+        onProgress?.({ permission: 'admin', isValid: true });
       } catch (error) {
         // Cleanup repo before returning
         await this.request('DELETE', `/repos/${username}/${repoName}`);
@@ -73,6 +85,7 @@ export class GitHubTokenValidator extends BaseGitHubService {
           message: 'Test write permission',
           content: content
         });
+        onProgress?.({ permission: 'code', isValid: true });
       } catch (error) {
         // Cleanup repo before returning
         await this.request('DELETE', `/repos/${username}/${repoName}`);

From 0c310f22cbfb8ca9876a13687112b463642307fb Mon Sep 17 00:00:00 2001
From: "Mamerto Fabian Jr (aider)" <mfabianjr@gmail.com>
Date: Wed, 22 Jan 2025 09:49:28 +0800
Subject: [PATCH 31/75] fix: Improve GitHub token permission verification and
 error handling

---
 src/lib/components/GitHubSettings.svelte |  3 +--
 src/services/GitHubTokenValidator.ts     | 22 +++++++++++++++++++---
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/GitHubSettings.svelte b/src/lib/components/GitHubSettings.svelte
index 966b818..cf508a7 100644
--- a/src/lib/components/GitHubSettings.svelte
+++ b/src/lib/components/GitHubSettings.svelte
@@ -212,11 +212,10 @@
     try {
       const githubService = new GitHubService(githubToken);
       
-      // Check repository creation permission
-      currentCheck = 'repos';
       const result = await githubService.verifyFineGrainedPermissions(
         repoOwner,
         ({ permission, isValid }) => {
+          currentCheck = permission;
           // Update the status as each permission is checked
           switch (permission) {
             case 'repos':
diff --git a/src/services/GitHubTokenValidator.ts b/src/services/GitHubTokenValidator.ts
index 01ff1c2..8ebdcac 100644
--- a/src/services/GitHubTokenValidator.ts
+++ b/src/services/GitHubTokenValidator.ts
@@ -53,6 +53,7 @@ export class GitHubTokenValidator extends BaseGitHubService {
         await this.delay(2000);
         onProgress?.({ permission: 'repos', isValid: true });
       } catch (error) {
+        onProgress?.({ permission: 'repos', isValid: false });
         return { 
           isValid: false, 
           error: 'Token lacks repository creation permission' 
@@ -67,8 +68,13 @@ export class GitHubTokenValidator extends BaseGitHubService {
         await this.delay(2000);
         onProgress?.({ permission: 'admin', isValid: true });
       } catch (error) {
+        onProgress?.({ permission: 'admin', isValid: false });
         // Cleanup repo before returning
-        await this.request('DELETE', `/repos/${username}/${repoName}`);
+        try {
+          await this.request('DELETE', `/repos/${username}/${repoName}`);
+        } catch (cleanupError) {
+          console.error('Failed to cleanup repository after admin check:', cleanupError);
+        }
         return { 
           isValid: false, 
           error: 'Token lacks repository administration permission' 
@@ -87,8 +93,13 @@ export class GitHubTokenValidator extends BaseGitHubService {
         });
         onProgress?.({ permission: 'code', isValid: true });
       } catch (error) {
+        onProgress?.({ permission: 'code', isValid: false });
         // Cleanup repo before returning
-        await this.request('DELETE', `/repos/${username}/${repoName}`);
+        try {
+          await this.request('DELETE', `/repos/${username}/${repoName}`);
+        } catch (cleanupError) {
+          console.error('Failed to cleanup repository after contents check:', cleanupError);
+        }
         return { 
           isValid: false, 
           error: 'Token lacks repository contents read/write permission' 
@@ -97,7 +108,12 @@ export class GitHubTokenValidator extends BaseGitHubService {
 
       // Cleanup: Delete the test repository
       try {
-        await this.request('DELETE', `/repos/${username}/${repoName}`);
+        await this.request('DELETE', `/repos/${username}/${repoName}`, undefined, {
+          // Add accept header to handle empty response
+          headers: {
+            accept: 'application/vnd.github+json'
+          }
+        });
       } catch (error) {
         console.error('Failed to cleanup test repository:', error);
         // Don't return error here as permissions were already verified

From 77d13ef8f38aaa47106b2a161250bab86ca02307 Mon Sep 17 00:00:00 2001
From: Mamerto Fabian Jr <mfabianjr@gmail.com>
Date: Wed, 22 Jan 2025 10:01:06 +0800
Subject: [PATCH 32/75] feat: Add progress callback and permission check types
 for fine-grained token verification

---
 src/services/BaseGitHubService.ts    | 7 +++++++
 src/services/GitHubService.ts        | 6 +++---
 src/services/GitHubTokenValidator.ts | 9 +--------
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/services/BaseGitHubService.ts b/src/services/BaseGitHubService.ts
index b4a851c..f31123a 100644
--- a/src/services/BaseGitHubService.ts
+++ b/src/services/BaseGitHubService.ts
@@ -1,3 +1,10 @@
+export type PermissionCheckProgress = {
+  permission: 'repos' | 'admin' | 'code';
+  isValid: boolean;
+};
+
+export type ProgressCallback = (progress: PermissionCheckProgress) => void;
+
 export abstract class BaseGitHubService {
   protected baseUrl = 'https://api.github.com';
 
diff --git a/src/services/GitHubService.ts b/src/services/GitHubService.ts
index cd5a8a7..a41b93c 100644
--- a/src/services/GitHubService.ts
+++ b/src/services/GitHubService.ts
@@ -4,7 +4,7 @@ export const CREATE_TOKEN_URL =
 export const CREATE_FINE_GRAINED_TOKEN_URL =
   'https://github.com/settings/personal-access-tokens/new?scopes=repository:read,repository:write&description=Bolt%20to%20GitHub%20Fine-Grained%20Token';
 
-import { BaseGitHubService } from './BaseGitHubService';
+import { BaseGitHubService, type ProgressCallback } from './BaseGitHubService';
 import { GitHubTokenValidator } from './GitHubTokenValidator';
 
 interface GitHubFileResponse {
@@ -43,8 +43,8 @@ export class GitHubService extends BaseGitHubService {
     return this.tokenValidator.validateTokenAndUser(username);
   }
 
-  async verifyFineGrainedPermissions(username: string): Promise<{ isValid: boolean; error?: string }> {
-    return this.tokenValidator.verifyFineGrainedPermissions(username);
+  async verifyFineGrainedPermissions(username: string, onProgress?: ProgressCallback): Promise<{ isValid: boolean; error?: string }> {
+    return this.tokenValidator.verifyFineGrainedPermissions(username, onProgress);
   }
 
   async repoExists(owner: string, repo: string): Promise<boolean> {
diff --git a/src/services/GitHubTokenValidator.ts b/src/services/GitHubTokenValidator.ts
index 8ebdcac..5e72411 100644
--- a/src/services/GitHubTokenValidator.ts
+++ b/src/services/GitHubTokenValidator.ts
@@ -1,11 +1,4 @@
-import { BaseGitHubService } from './BaseGitHubService';
-
-export type PermissionCheckProgress = {
-  permission: 'repos' | 'admin' | 'code';
-  isValid: boolean;
-};
-
-export type ProgressCallback = (progress: PermissionCheckProgress) => void;
+import { BaseGitHubService, type ProgressCallback } from './BaseGitHubService';
 
 export class GitHubTokenValidator extends BaseGitHubService {
   async validateToken(): Promise<boolean> {

From 6ea46eb30206ae2050d9f325146de4c51ccfc160 Mon Sep 17 00:00:00 2001
From: "Mamerto Fabian Jr (aider)" <mfabianjr@gmail.com>
Date: Wed, 22 Jan 2025 10:02:09 +0800
Subject: [PATCH 33/75] feat: Add last valid check status and tooltip to GitHub
 settings

---
 src/lib/components/GitHubSettings.svelte | 87 ++++++++++++++----------
 1 file changed, 52 insertions(+), 35 deletions(-)

diff --git a/src/lib/components/GitHubSettings.svelte b/src/lib/components/GitHubSettings.svelte
index cf508a7..b72b38f 100644
--- a/src/lib/components/GitHubSettings.svelte
+++ b/src/lib/components/GitHubSettings.svelte
@@ -2,7 +2,7 @@
   import { Button } from '$lib/components/ui/button';
   import { Input } from '$lib/components/ui/input';
   import { Label } from '$lib/components/ui/label';
-  import { Check, X, Search, Loader2 } from 'lucide-svelte';
+  import { Check, X, Search, Loader2, HelpCircle } from 'lucide-svelte';
   import { onMount } from 'svelte';
   import { CREATE_FINE_GRAINED_TOKEN_URL, GitHubService } from '../../services/GitHubService';
   import NewUserGuide from './github/NewUserGuide.svelte';
@@ -351,43 +351,60 @@
                   Verify Permissions
                 {/if}
               </Button>
-              <div class="flex items-center gap-1.5 text-xs">
-                <span class="flex items-center gap-0.5">
-                  {#if currentCheck === 'repos'}
-                    <Loader2 class="h-3 w-3 animate-spin text-slate-400" />
-                  {:else if permissionStatus.allRepos !== undefined}
-                    {#if permissionStatus.allRepos}
-                      <Check class="h-3 w-3 text-green-500" />
-                    {:else}
-                      <X class="h-3 w-3 text-red-500" />
+              <div class="flex items-center gap-2">
+                <div class="flex items-center gap-1.5 text-xs">
+                  <span class="flex items-center gap-0.5">
+                    {#if currentCheck === 'repos'}
+                      <Loader2 class="h-3 w-3 animate-spin text-slate-400" />
+                    {:else if permissionStatus.allRepos !== undefined}
+                      {#if permissionStatus.allRepos}
+                        <Check class="h-3 w-3 text-green-500" />
+                      {:else}
+                        <X class="h-3 w-3 text-red-500" />
+                      {/if}
+                    {:else if previousToken === githubToken && lastPermissionCheck}
+                      <Check class="h-3 w-3 text-green-500 opacity-50" />
                     {/if}
-                  {/if}
-                  Repos
-                </span>
-                <span class="flex items-center gap-0.5">
-                  {#if currentCheck === 'admin'}
-                    <Loader2 class="h-3 w-3 animate-spin text-slate-400" />
-                  {:else if permissionStatus.admin !== undefined}
-                    {#if permissionStatus.admin}
-                      <Check class="h-3 w-3 text-green-500" />
-                    {:else}
-                      <X class="h-3 w-3 text-red-500" />
+                    Repos
+                  </span>
+                  <span class="flex items-center gap-0.5">
+                    {#if currentCheck === 'admin'}
+                      <Loader2 class="h-3 w-3 animate-spin text-slate-400" />
+                    {:else if permissionStatus.admin !== undefined}
+                      {#if permissionStatus.admin}
+                        <Check class="h-3 w-3 text-green-500" />
+                      {:else}
+                        <X class="h-3 w-3 text-red-500" />
+                      {/if}
+                    {:else if previousToken === githubToken && lastPermissionCheck}
+                      <Check class="h-3 w-3 text-green-500 opacity-50" />
                     {/if}
-                  {/if}
-                  Admin
-                </span>
-                <span class="flex items-center gap-0.5">
-                  {#if currentCheck === 'code'}
-                    <Loader2 class="h-3 w-3 animate-spin text-slate-400" />
-                  {:else if permissionStatus.contents !== undefined}
-                    {#if permissionStatus.contents}
-                      <Check class="h-3 w-3 text-green-500" />
-                    {:else}
-                      <X class="h-3 w-3 text-red-500" />
+                    Admin
+                  </span>
+                  <span class="flex items-center gap-0.5">
+                    {#if currentCheck === 'code'}
+                      <Loader2 class="h-3 w-3 animate-spin text-slate-400" />
+                    {:else if permissionStatus.contents !== undefined}
+                      {#if permissionStatus.contents}
+                        <Check class="h-3 w-3 text-green-500" />
+                      {:else}
+                        <X class="h-3 w-3 text-red-500" />
+                      {/if}
+                    {:else if previousToken === githubToken && lastPermissionCheck}
+                      <Check class="h-3 w-3 text-green-500 opacity-50" />
                     {/if}
-                  {/if}
-                  Code
-                </span>
+                    Code
+                  </span>
+                </div>
+                {#if previousToken === githubToken && lastPermissionCheck}
+                  <div class="relative group">
+                    <HelpCircle class="h-3 w-3 text-slate-400" />
+                    <div class="absolute bottom-full mb-2 left-1/2 -translate-x-1/2 hidden group-hover:block w-64 p-2 text-xs bg-slate-900 border border-slate-700 rounded-md shadow-lg">
+                      <p>Last verified: {new Date(lastPermissionCheck).toLocaleString()}</p>
+                      <p class="mt-1 text-slate-400">Permissions are automatically re-verified when the token changes or after 30 days.</p>
+                    </div>
+                  </div>
+                {/if}
               </div>
             </div>
           {/if}

From 315dca9099bd248e57ff8e598f015289c6a88c57 Mon Sep 17 00:00:00 2001
From: "Mamerto Fabian Jr (aider)" <mfabianjr@gmail.com>
Date: Wed, 22 Jan 2025 10:06:21 +0800
Subject: [PATCH 34/75] style: Move help icon before permission indicators for
 better tooltip visibility

---
 src/lib/components/GitHubSettings.svelte | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/lib/components/GitHubSettings.svelte b/src/lib/components/GitHubSettings.svelte
index b72b38f..2ba2df8 100644
--- a/src/lib/components/GitHubSettings.svelte
+++ b/src/lib/components/GitHubSettings.svelte
@@ -352,6 +352,15 @@
                 {/if}
               </Button>
               <div class="flex items-center gap-2">
+                {#if previousToken === githubToken && lastPermissionCheck}
+                  <div class="relative group">
+                    <HelpCircle class="h-3 w-3 text-slate-400" />
+                    <div class="absolute bottom-full mb-2 left-1/2 -translate-x-1/2 hidden group-hover:block w-64 p-2 text-xs bg-slate-900 border border-slate-700 rounded-md shadow-lg">
+                      <p>Last verified: {new Date(lastPermissionCheck).toLocaleString()}</p>
+                      <p class="mt-1 text-slate-400">Permissions are automatically re-verified when the token changes or after 30 days.</p>
+                    </div>
+                  </div>
+                {/if}
                 <div class="flex items-center gap-1.5 text-xs">
                   <span class="flex items-center gap-0.5">
                     {#if currentCheck === 'repos'}
@@ -396,15 +405,6 @@
                     Code
                   </span>
                 </div>
-                {#if previousToken === githubToken && lastPermissionCheck}
-                  <div class="relative group">
-                    <HelpCircle class="h-3 w-3 text-slate-400" />
-                    <div class="absolute bottom-full mb-2 left-1/2 -translate-x-1/2 hidden group-hover:block w-64 p-2 text-xs bg-slate-900 border border-slate-700 rounded-md shadow-lg">
-                      <p>Last verified: {new Date(lastPermissionCheck).toLocaleString()}</p>
-                      <p class="mt-1 text-slate-400">Permissions are automatically re-verified when the token changes or after 30 days.</p>
-                    </div>
-                  </div>
-                {/if}
               </div>
             </div>
           {/if}

From 906b226da6358ede3e521fafd7a2408bcf6d2715 Mon Sep 17 00:00:00 2001
From: Mamerto Fabian Jr <mfabianjr@gmail.com>
Date: Wed, 22 Jan 2025 10:43:20 +0800
Subject: [PATCH 35/75] feat: Refactor repository loading to include all repos
 and update UI components

---
 src/lib/components/GitHubSettings.svelte |  2 +-
 src/lib/components/ProjectsList.svelte   | 67 +++++++++++++++++-------
 src/services/GitHubService.ts            | 60 ++-------------------
 3 files changed, 51 insertions(+), 78 deletions(-)

diff --git a/src/lib/components/GitHubSettings.svelte b/src/lib/components/GitHubSettings.svelte
index 2ba2df8..ec98a44 100644
--- a/src/lib/components/GitHubSettings.svelte
+++ b/src/lib/components/GitHubSettings.svelte
@@ -68,7 +68,7 @@
     try {
       isLoadingRepos = true;
       const githubService = new GitHubService(githubToken);
-      repositories = await githubService.listUserRepositories(repoOwner);
+      repositories = await githubService.listRepos();
     } catch (error) {
       console.error('Error loading repositories:', error);
       repositories = [];
diff --git a/src/lib/components/ProjectsList.svelte b/src/lib/components/ProjectsList.svelte
index b580691..cfef82c 100644
--- a/src/lib/components/ProjectsList.svelte
+++ b/src/lib/components/ProjectsList.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import { Button } from '$lib/components/ui/button';
-  import { Github, Import, Zap, X } from 'lucide-svelte';
+  import { Github, Import, Zap, X, RefreshCw } from 'lucide-svelte';
   import { GitHubService } from '../../services/GitHubService';
 
   export let projectSettings: Record<string, { repoName: string; branch: string }>;
@@ -9,12 +9,15 @@
   export let githubToken: string;
   export let isBoltSite: boolean = true;
   export let currentlyLoadedProjectId: string | null = null;
+  
+  let loadingRepos = false;
 
   const githubService = new GitHubService(githubToken);
   let commitCounts: Record<string, number> = {};
-  let publicRepos: Array<{
+  let allRepos: Array<{
     name: string;
     description: string | null;
+    private: boolean;
     html_url: string;
     created_at: string;
     updated_at: string;
@@ -22,22 +25,28 @@
   }> = [];
 
   let searchQuery = '';
-  let showPublicRepos = false;
+  let showRepos = false;
   let filteredProjects: Array<{
     projectId?: string;
     repoName: string;
     branch?: string;
-    isPublicOnly?: boolean;
+    gitHubRepo?: boolean;
     description?: string | null;
+    private?: boolean;
     language?: string | null;
   }> = [];
 
-  async function loadPublicRepos() {
-    console.log('Loading public repos for', repoOwner);
+  async function loadAllRepos() {
+    console.log('Loading repos for', repoOwner);
     try {
-      publicRepos = await githubService.listPublicRepos(repoOwner);
+      loadingRepos = true;
+      allRepos = await githubService.listRepos();
+      // Simulate a delay to show the loading spinner
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+      loadingRepos = false;
     } catch (error) {
-      console.error('Failed to load public repos:', error);
+      loadingRepos = false;
+      console.error('Failed to load repos:', error);
     }
   }
 
@@ -46,28 +55,29 @@
       projectId,
       repoName: settings.repoName,
       branch: settings.branch,
-      isPublicOnly: false,
+      gitHubRepo: false,
     }));
 
-    const publicOnlyRepos = showPublicRepos
-      ? publicRepos
+    const repos = showRepos
+      ? allRepos
           .filter((repo) => !Object.values(projectSettings).some((s) => s.repoName === repo.name))
           .map((repo) => ({
             repoName: repo.name,
-            isPublicOnly: true,
+            gitHubRepo: true,
+            private: repo.private,
             description: repo.description,
             language: repo.language,
           }))
       : [];
 
-    filteredProjects = [...existingProjects, ...publicOnlyRepos].filter((project) =>
+    filteredProjects = [...existingProjects, ...repos].filter((project) =>
       project.repoName.toLowerCase().includes(searchQuery.toLowerCase())
     );
   }
 
   onMount(async () => {
-    // Load public repos
-    await loadPublicRepos();
+    // Load all repos
+    await loadAllRepos();
 
     // Fetch commit counts for projects that have IDs
     for (const [projectId, settings] of Object.entries(projectSettings)) {
@@ -115,11 +125,26 @@
     <label class="flex items-center gap-2 text-sm text-slate-400">
       <input
         type="checkbox"
-        bind:checked={showPublicRepos}
+        bind:checked={showRepos}
         class="w-4 h-4 rounded border-slate-800 bg-transparent"
       />
-      Show Public Repos
+      Show Repos
     </label>
+    {#if showRepos}
+      <Button
+        variant="ghost"
+        class="border-slate-800 hover:bg-slate-800 text-slate-200"
+        title="Refresh Repos"
+        disabled={loadingRepos}
+        on:click={loadAllRepos}
+      >
+        {#if loadingRepos}
+          <RefreshCw class="animate-spin h-5 w-5" />
+        {:else}
+          <RefreshCw class="h-5 w-5" />
+        {/if}
+      </Button>
+    {/if}
   </div>
 
   {#if filteredProjects.length === 0}
@@ -138,7 +163,7 @@
           💡 No Bolt projects found. Create or load an existing Bolt project to get started.
         </p>
         <p class="text-sm text-green-400">
-          🌟 You can also load any of your public GitHub repositories.
+          🌟 You can also load any of your GitHub repositories.
         </p>
       </div>
     </div>
@@ -158,8 +183,10 @@
               {#if project.projectId === currentlyLoadedProjectId}
                 <span class="text-xs text-emerald-500 ml-2">(Current)</span>
               {/if}
-              {#if project.isPublicOnly}
-                <span class="text-xs text-blue-500 ml-2">(Public Repo)</span>
+              {#if project.gitHubRepo}
+                <span class="text-xs {project.private ? 'text-red-500' : 'text-blue-500'} ml-2">
+                  ({project.private ? "Private" : "Public"})
+                </span>
               {/if}
             </h3>
             <div class="flex flex-col gap-1 text-xs text-slate-400">
diff --git a/src/services/GitHubService.ts b/src/services/GitHubService.ts
index a41b93c..85b3b43 100644
--- a/src/services/GitHubService.ts
+++ b/src/services/GitHubService.ts
@@ -204,10 +204,11 @@ This repository was automatically initialized by the Bolt to GitHub extension.
     }
   }
 
-  async listPublicRepos(username: string): Promise<
+  async listRepos(): Promise<
     Array<{
       name: string;
       description: string | null;
+      private: boolean;
       html_url: string;
       created_at: string;
       updated_at: string;
@@ -215,73 +216,18 @@ This repository was automatically initialized by the Bolt to GitHub extension.
     }>
   > {
     try {
-      const repos = await this.request('GET', `/users/${username}/repos`, null, {
-        headers: {
-          per_page: '100', // Get up to 100 repos per page
-        },
-      });
+      const repos = await this.request('GET', `/user/repos?per_page=100&sort=updated`);
 
       return repos
-        .filter((repo: any) => !repo.private)
         .map((repo: any) => ({
           name: repo.name,
           description: repo.description,
-          html_url: repo.html_url,
-          created_at: repo.created_at,
-          updated_at: repo.updated_at,
-          language: repo.language,
-        }));
-    } catch (error) {
-      console.error('Failed to fetch public repositories:', error);
-      throw new Error(
-        `Failed to fetch public repositories: ${error instanceof Error ? error.message : 'Unknown error'}`
-      );
-    }
-  }
-
-  async listUserRepositories(username: string): Promise<
-    Array<{
-      name: string;
-      description: string | null;
-      html_url: string;
-      private: boolean;
-      created_at: string;
-      updated_at: string;
-      language: string | null;
-    }>
-  > {
-    try {
-      // First try user's repositories
-      try {
-        const repos = await this.request(
-          'GET',
-          `/users/${username}/repos?per_page=100&sort=updated`
-        );
-        return repos.map((repo: any) => ({
-          name: repo.name,
-          description: repo.description,
-          html_url: repo.html_url,
           private: repo.private,
-          created_at: repo.created_at,
-          updated_at: repo.updated_at,
-          language: repo.language,
-        }));
-      } catch (error) {
-        // If user endpoint fails, try organization endpoint
-        const repos = await this.request(
-          'GET',
-          `/orgs/${username}/repos?per_page=100&sort=updated`
-        );
-        return repos.map((repo: any) => ({
-          name: repo.name,
-          description: repo.description,
           html_url: repo.html_url,
-          private: repo.private,
           created_at: repo.created_at,
           updated_at: repo.updated_at,
           language: repo.language,
         }));
-      }
     } catch (error) {
       console.error('Failed to fetch repositories:', error);
       throw new Error(

From e5a220547f24dfbfa1b9fed7c8633d6273123428 Mon Sep 17 00:00:00 2001
From: "Mamerto Fabian Jr (aider)" <mfabianjr@gmail.com>
Date: Wed, 22 Jan 2025 11:36:34 +0800
Subject: [PATCH 36/75] feat: Add support for importing private GitHub
 repositories with temporary public repos

---
 src/lib/components/ProjectsList.svelte | 34 +++++++++++--
 src/services/GitHubService.ts          | 45 +++++++++++++++++-
 src/services/TempRepoManager.ts        | 66 ++++++++++++++++++++++++++
 3 files changed, 141 insertions(+), 4 deletions(-)
 create mode 100644 src/services/TempRepoManager.ts

diff --git a/src/lib/components/ProjectsList.svelte b/src/lib/components/ProjectsList.svelte
index cfef82c..8da7986 100644
--- a/src/lib/components/ProjectsList.svelte
+++ b/src/lib/components/ProjectsList.svelte
@@ -97,8 +97,36 @@
     window.open(`https://github.com/${repoOwner}/${repoName}`, '_blank');
   }
 
-  function importFromGitHub(repoOwner: string, repoName: string) {
-    window.open(`https://bolt.new/~/github.com/${repoOwner}/${repoName}`, '_blank');
+  import { TempRepoManager } from '../../services/TempRepoManager';
+  
+  const tempRepoManager = new TempRepoManager(githubService, repoOwner);
+
+  async function importFromGitHub(repoOwner: string, repoName: string, isPrivate: boolean) {
+    if (!isPrivate) {
+      window.open(`https://bolt.new/~/github.com/${repoOwner}/${repoName}`, '_blank');
+      return;
+    }
+
+    if (!confirm(
+      'Warning: This will temporarily create a public copy of your private repository to enable import.\n\n' +
+      'The temporary repository will be automatically deleted after import.\n\n' +
+      'Do you want to continue?'
+    )) {
+      return;
+    }
+
+    try {
+      const tempRepoName = await tempRepoManager.createTemporaryPublicRepo(repoName);
+      await githubService.cloneRepoContents(repoOwner, repoName, repoOwner, tempRepoName);
+      
+      // Open Bolt with the temporary repo
+      window.open(`https://bolt.new/~/github.com/${repoOwner}/${tempRepoName}`, '_blank');
+      
+      // Cleanup will happen automatically via TempRepoManager
+    } catch (error) {
+      console.error('Failed to import private repository:', error);
+      alert('Failed to import private repository. Please try again later.');
+    }
   }
 </script>
 
@@ -230,7 +258,7 @@
                 size="icon"
                 title="Import from GitHub to Bolt"
                 class="h-8 w-8 opacity-70 group-hover:opacity-100"
-                on:click={() => importFromGitHub(repoOwner, project.repoName)}
+                on:click={() => importFromGitHub(repoOwner, project.repoName, project.private ?? false)}
               >
                 <Import class="h-5 w-5" />
               </Button>
diff --git a/src/services/GitHubService.ts b/src/services/GitHubService.ts
index 85b3b43..8174520 100644
--- a/src/services/GitHubService.ts
+++ b/src/services/GitHubService.ts
@@ -204,7 +204,50 @@ This repository was automatically initialized by the Bolt to GitHub extension.
     }
   }
 
-  async listRepos(): Promise<
+  async createTemporaryPublicRepo(sourceRepoName: string): Promise<string> {
+    const timestamp = Date.now();
+    const randomStr = Math.random().toString(36).substring(2, 8);
+    const tempRepoName = `temp-${sourceRepoName}-${timestamp}-${randomStr}`;
+
+    await this.createRepo({
+      name: tempRepoName,
+      private: false,
+      description: 'Temporary repository for Bolt import - will be deleted automatically',
+    });
+
+    return tempRepoName;
+  }
+
+  async cloneRepoContents(sourceOwner: string, sourceRepo: string, targetOwner: string, targetRepo: string, branch: string = 'main'): Promise<void> {
+    // Get all files from source repo
+    const response = await this.request('GET', `/repos/${sourceOwner}/${sourceRepo}/git/trees/${branch}?recursive=1`);
+    const files = response.tree.filter((item: any) => item.type === 'blob');
+
+    // Copy each file to target repo
+    for (const file of files) {
+      const content = await this.request('GET', `/repos/${sourceOwner}/${sourceRepo}/contents/${file.path}?ref=${branch}`);
+      await this.pushFile({
+        owner: targetOwner,
+        repo: targetRepo,
+        path: file.path,
+        content: content.content,
+        branch,
+        message: `Copy ${file.path} from ${sourceRepo}`,
+      });
+    }
+  }
+
+  async deleteRepo(owner: string, repo: string): Promise<void> {
+    await this.request('DELETE', `/repos/${owner}/${repo}`);
+  }
+
+  async updateRepoVisibility(owner: string, repo: string, makePrivate: boolean): Promise<void> {
+    await this.request('PATCH', `/repos/${owner}/${repo}`, {
+      private: makePrivate,
+    });
+  }
+
+  listRepos(): Promise<
     Array<{
       name: string;
       description: string | null;
diff --git a/src/services/TempRepoManager.ts b/src/services/TempRepoManager.ts
new file mode 100644
index 0000000..ead5221
--- /dev/null
+++ b/src/services/TempRepoManager.ts
@@ -0,0 +1,66 @@
+import { GitHubService } from './GitHubService';
+
+interface TempRepoMetadata {
+  originalRepo: string;
+  tempRepo: string;
+  createdAt: number;
+  owner: string;
+}
+
+export class TempRepoManager {
+  private static STORAGE_KEY = 'bolt_temp_repos';
+  private static CLEANUP_INTERVAL = 5 * 60 * 1000; // 5 minutes
+  private static MAX_AGE = 30 * 60 * 1000; // 30 minutes
+
+  constructor(private githubService: GitHubService, private owner: string) {
+    this.startCleanupInterval();
+  }
+
+  private getTempRepos(): TempRepoMetadata[] {
+    const stored = localStorage.getItem(TempRepoManager.STORAGE_KEY);
+    return stored ? JSON.parse(stored) : [];
+  }
+
+  private saveTempRepos(repos: TempRepoMetadata[]): void {
+    localStorage.setItem(TempRepoManager.STORAGE_KEY, JSON.stringify(repos));
+  }
+
+  async createTemporaryPublicRepo(originalRepo: string): Promise<string> {
+    const tempRepoName = await this.githubService.createTemporaryPublicRepo(originalRepo);
+    
+    const tempRepos = this.getTempRepos();
+    tempRepos.push({
+      originalRepo,
+      tempRepo: tempRepoName,
+      createdAt: Date.now(),
+      owner: this.owner
+    });
+    this.saveTempRepos(tempRepos);
+
+    return tempRepoName;
+  }
+
+  async cleanupTempRepos(): Promise<void> {
+    const tempRepos = this.getTempRepos();
+    const now = Date.now();
+    const remaining = [];
+
+    for (const repo of tempRepos) {
+      if (now - repo.createdAt > TempRepoManager.MAX_AGE) {
+        try {
+          await this.githubService.deleteRepo(repo.owner, repo.tempRepo);
+        } catch (error) {
+          console.error(`Failed to delete temporary repo ${repo.tempRepo}:`, error);
+        }
+      } else {
+        remaining.push(repo);
+      }
+    }
+
+    this.saveTempRepos(remaining);
+  }
+
+  private startCleanupInterval(): void {
+    setInterval(() => this.cleanupTempRepos(), TempRepoManager.CLEANUP_INTERVAL);
+  }
+}

From b149161e40fefc8cf5f33d3210544033c3984317 Mon Sep 17 00:00:00 2001
From: Mamerto Fabian Jr <mfabianjr@gmail.com>
Date: Wed, 22 Jan 2025 11:50:21 +0800
Subject: [PATCH 37/75] refactor: Make listRepos method async for better
 promise handling

---
 src/services/GitHubService.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/services/GitHubService.ts b/src/services/GitHubService.ts
index 8174520..3dc2a37 100644
--- a/src/services/GitHubService.ts
+++ b/src/services/GitHubService.ts
@@ -247,7 +247,7 @@ This repository was automatically initialized by the Bolt to GitHub extension.
     });
   }
 
-  listRepos(): Promise<
+  async listRepos(): Promise<
     Array<{
       name: string;
       description: string | null;

From 98c5e20984f00e30092d3a974e5b2661288c6ec9 Mon Sep 17 00:00:00 2001
From: "Mamerto Fabian Jr (aider)" <mfabianjr@gmail.com>
Date: Wed, 22 Jan 2025 11:50:24 +0800
Subject: [PATCH 38/75] refactor: Implement background service for private repo
 import with robust temp repo management

---
 src/background/BackgroundService.ts    |  17 ++++
 src/background/TempRepoManager.ts      | 119 +++++++++++++++++++++++++
 src/lib/components/ProjectsList.svelte |  15 ++--
 src/services/GitHubService.ts          |   2 +-
 4 files changed, 142 insertions(+), 11 deletions(-)
 create mode 100644 src/background/TempRepoManager.ts

diff --git a/src/background/BackgroundService.ts b/src/background/BackgroundService.ts
index 56dcf29..4d8bf5b 100644
--- a/src/background/BackgroundService.ts
+++ b/src/background/BackgroundService.ts
@@ -8,6 +8,7 @@ export class BackgroundService {
   private zipHandler: ZipHandler | null;
   private ports: Map<number, Port>;
   private githubService: GitHubService | null;
+  private tempRepoManager: BackgroundTempRepoManager | null = null;
   private pendingCommitMessage: string;
   private storageListener:
     | ((changes: { [key: string]: chrome.storage.StorageChange }, namespace: string) => void)
@@ -29,6 +30,16 @@ export class BackgroundService {
   private async initialize(): Promise<void> {
     const githubService = await this.initializeGitHubService();
     this.setupZipHandler(githubService!);
+    if (githubService) {
+      const settings = await this.stateManager.getGitHubSettings();
+      if (settings?.gitHubSettings?.repoOwner) {
+        this.tempRepoManager = new BackgroundTempRepoManager(
+          githubService,
+          settings.gitHubSettings.repoOwner,
+          (status) => this.broadcastStatus(status)
+        );
+      }
+    }
     this.setupConnectionHandlers();
     this.setupStorageListener();
     console.log('👂 Background service initialized');
@@ -157,6 +168,12 @@ export class BackgroundService {
           chrome.action.openPopup();
           break;
 
+        case 'IMPORT_PRIVATE_REPO':
+          if (!this.tempRepoManager) {
+            throw new Error('Temp repo manager not initialized');
+          }
+          await this.tempRepoManager.handlePrivateRepoImport(message.data.repoName);
+          break;
         case 'DEBUG':
           console.log(`[Content Debug] ${message.message}`);
           break;
diff --git a/src/background/TempRepoManager.ts b/src/background/TempRepoManager.ts
new file mode 100644
index 0000000..dbde530
--- /dev/null
+++ b/src/background/TempRepoManager.ts
@@ -0,0 +1,119 @@
+import { GitHubService } from '../services/GitHubService';
+import type { UploadStatusState } from '../lib/types';
+
+export class BackgroundTempRepoManager {
+  private static STORAGE_KEY = 'bolt_temp_repos';
+  private static CLEANUP_INTERVAL = 5 * 60 * 1000; // 5 minutes
+  private static MAX_AGE = 30 * 60 * 1000; // 30 minutes
+
+  constructor(
+    private githubService: GitHubService,
+    private owner: string,
+    private broadcastStatus: (status: UploadStatusState) => void
+  ) {
+    this.startCleanupInterval();
+  }
+
+  async handlePrivateRepoImport(sourceRepo: string): Promise<void> {
+    try {
+      this.broadcastStatus({
+        status: 'uploading',
+        message: 'Creating temporary repository...',
+        progress: 10
+      });
+
+      const tempRepoName = await this.githubService.createTemporaryPublicRepo(sourceRepo);
+      this.saveTempRepo(sourceRepo, tempRepoName);
+
+      this.broadcastStatus({
+        status: 'uploading',
+        message: 'Copying repository contents...',
+        progress: 30
+      });
+
+      await this.githubService.cloneRepoContents(this.owner, sourceRepo, this.owner, tempRepoName);
+
+      this.broadcastStatus({
+        status: 'uploading',
+        message: 'Making repository public...',
+        progress: 70
+      });
+
+      // Make repo public only after content is copied
+      await this.githubService.updateRepoVisibility(this.owner, tempRepoName, false);
+
+      this.broadcastStatus({
+        status: 'uploading',
+        message: 'Opening Bolt...',
+        progress: 90
+      });
+
+      // Open Bolt in new window
+      chrome.windows.create({
+        url: `https://bolt.new/~/github.com/${this.owner}/${tempRepoName}`,
+        type: 'popup',
+        width: 1200,
+        height: 800
+      });
+
+      this.broadcastStatus({
+        status: 'success',
+        message: 'Repository imported successfully',
+        progress: 100
+      });
+
+    } catch (error) {
+      console.error('Failed to import private repository:', error);
+      this.broadcastStatus({
+        status: 'error',
+        message: error instanceof Error ? error.message : 'Failed to import repository',
+        progress: 100
+      });
+    }
+  }
+
+  private saveTempRepo(originalRepo: string, tempRepo: string): void {
+    const tempRepos = this.getTempRepos();
+    tempRepos.push({
+      originalRepo,
+      tempRepo,
+      createdAt: Date.now(),
+      owner: this.owner
+    });
+    localStorage.setItem(BackgroundTempRepoManager.STORAGE_KEY, JSON.stringify(tempRepos));
+  }
+
+  private getTempRepos(): Array<{
+    originalRepo: string;
+    tempRepo: string;
+    createdAt: number;
+    owner: string;
+  }> {
+    const stored = localStorage.getItem(BackgroundTempRepoManager.STORAGE_KEY);
+    return stored ? JSON.parse(stored) : [];
+  }
+
+  async cleanupTempRepos(): Promise<void> {
+    const tempRepos = this.getTempRepos();
+    const now = Date.now();
+    const remaining = [];
+
+    for (const repo of tempRepos) {
+      if (now - repo.createdAt > BackgroundTempRepoManager.MAX_AGE) {
+        try {
+          await this.githubService.deleteRepo(repo.owner, repo.tempRepo);
+        } catch (error) {
+          console.error(`Failed to delete temporary repo ${repo.tempRepo}:`, error);
+        }
+      } else {
+        remaining.push(repo);
+      }
+    }
+
+    localStorage.setItem(BackgroundTempRepoManager.STORAGE_KEY, JSON.stringify(remaining));
+  }
+
+  private startCleanupInterval(): void {
+    setInterval(() => this.cleanupTempRepos(), BackgroundTempRepoManager.CLEANUP_INTERVAL);
+  }
+}
diff --git a/src/lib/components/ProjectsList.svelte b/src/lib/components/ProjectsList.svelte
index 8da7986..7739d46 100644
--- a/src/lib/components/ProjectsList.svelte
+++ b/src/lib/components/ProjectsList.svelte
@@ -97,9 +97,6 @@
     window.open(`https://github.com/${repoOwner}/${repoName}`, '_blank');
   }
 
-  import { TempRepoManager } from '../../services/TempRepoManager';
-  
-  const tempRepoManager = new TempRepoManager(githubService, repoOwner);
 
   async function importFromGitHub(repoOwner: string, repoName: string, isPrivate: boolean) {
     if (!isPrivate) {
@@ -116,13 +113,11 @@
     }
 
     try {
-      const tempRepoName = await tempRepoManager.createTemporaryPublicRepo(repoName);
-      await githubService.cloneRepoContents(repoOwner, repoName, repoOwner, tempRepoName);
-      
-      // Open Bolt with the temporary repo
-      window.open(`https://bolt.new/~/github.com/${repoOwner}/${tempRepoName}`, '_blank');
-      
-      // Cleanup will happen automatically via TempRepoManager
+      // Send message to background service
+      chrome.runtime.sendMessage({
+        type: 'IMPORT_PRIVATE_REPO',
+        data: { repoName }
+      });
     } catch (error) {
       console.error('Failed to import private repository:', error);
       alert('Failed to import private repository. Please try again later.');
diff --git a/src/services/GitHubService.ts b/src/services/GitHubService.ts
index 3dc2a37..54383ef 100644
--- a/src/services/GitHubService.ts
+++ b/src/services/GitHubService.ts
@@ -211,7 +211,7 @@ This repository was automatically initialized by the Bolt to GitHub extension.
 
     await this.createRepo({
       name: tempRepoName,
-      private: false,
+      private: true, // Keep it private initially
       description: 'Temporary repository for Bolt import - will be deleted automatically',
     });
 

From acb30cd5eebc2dc2412ba7a41aaf3a420cae8914 Mon Sep 17 00:00:00 2001
From: "Mamerto Fabian Jr (aider)" <mfabianjr@gmail.com>
Date: Wed, 22 Jan 2025 11:57:04 +0800
Subject: [PATCH 39/75] fix: Use port connection for reliable background
 service messaging

---
 src/lib/components/ProjectsList.svelte | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/ProjectsList.svelte b/src/lib/components/ProjectsList.svelte
index 7739d46..02f9c4c 100644
--- a/src/lib/components/ProjectsList.svelte
+++ b/src/lib/components/ProjectsList.svelte
@@ -113,11 +113,18 @@
     }
 
     try {
-      // Send message to background service
-      chrome.runtime.sendMessage({
+      const port = chrome.runtime.connect({ name: 'bolt-content' });
+      port.postMessage({
         type: 'IMPORT_PRIVATE_REPO',
         data: { repoName }
       });
+      
+      port.onMessage.addListener((message) => {
+        if (message.type === 'UPLOAD_STATUS') {
+          // Handle status updates if needed
+          console.log('Import status:', message.status);
+        }
+      });
     } catch (error) {
       console.error('Failed to import private repository:', error);
       alert('Failed to import private repository. Please try again later.');

From 57d6725890b982e1678e5bcb3e06e4a268b90c18 Mon Sep 17 00:00:00 2001
From: Mamerto Fabian Jr <mfabianjr@gmail.com>
Date: Wed, 22 Jan 2025 11:58:39 +0800
Subject: [PATCH 40/75] refactor: Update regex for URL matching and remove
 unused TempRepoManager

---
 src/background/BackgroundService.ts |  3 +-
 src/background/StateManager.ts      |  1 -
 src/content/ContentManager.ts       |  2 +-
 src/lib/types.ts                    |  3 +-
 src/services/TempRepoManager.ts     | 66 -----------------------------
 5 files changed, 5 insertions(+), 70 deletions(-)
 delete mode 100644 src/services/TempRepoManager.ts

diff --git a/src/background/BackgroundService.ts b/src/background/BackgroundService.ts
index 4d8bf5b..d673017 100644
--- a/src/background/BackgroundService.ts
+++ b/src/background/BackgroundService.ts
@@ -2,6 +2,7 @@ import { GitHubService } from '../services/GitHubService';
 import type { Message, MessageType, Port, UploadStatusState } from '../lib/types';
 import { StateManager } from './StateManager';
 import { ZipHandler } from '../services/zipHandler';
+import { BackgroundTempRepoManager } from './TempRepoManager';
 
 export class BackgroundService {
   private stateManager: StateManager;
@@ -110,7 +111,7 @@ export class BackgroundService {
     // Handle URL updates for project ID
     chrome.tabs.onUpdated.addListener(async (tabId, changeInfo, tab) => {
       if (tab.url?.includes('bolt.new/~/')) {
-        const projectId = tab.url.match(/bolt\.new\/~\/([^\/]+)/)?.[1] || null;
+        const projectId = tab.url.match(/bolt\.new\/~\/([^/]+)/)?.[1] || null;
         if (projectId) {
           await this.stateManager.setProjectId(projectId);
         }
diff --git a/src/background/StateManager.ts b/src/background/StateManager.ts
index 23d71d7..20c806c 100644
--- a/src/background/StateManager.ts
+++ b/src/background/StateManager.ts
@@ -1,5 +1,4 @@
 import { SettingsService } from '../services/settings';
-import type { GitHubSettingsInterface } from '../lib/types';
 
 export class StateManager {
   private static instance: StateManager;
diff --git a/src/content/ContentManager.ts b/src/content/ContentManager.ts
index 40bfd22..f3ee1db 100644
--- a/src/content/ContentManager.ts
+++ b/src/content/ContentManager.ts
@@ -30,7 +30,7 @@ export class ContentManager {
 
   private shouldInitialize(): boolean {
     const currentUrl = window.location.href;
-    const match = currentUrl.match(/bolt\.new\/~\/([^\/]+)/);
+    const match = currentUrl.match(/bolt\.new\/~\/([^/]+)/);
     return !!match;
   }
 
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 1252433..70384ca 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -9,7 +9,8 @@ export type MessageType =
   | 'DEBUG'
   | 'CONTENT_SCRIPT_READY'
   | 'GITHUB_SETTINGS_CHANGED'
-  | 'OPEN_SETTINGS';
+  | 'OPEN_SETTINGS'
+  | 'IMPORT_PRIVATE_REPO';
 
 export interface Message {
   type: MessageType;
diff --git a/src/services/TempRepoManager.ts b/src/services/TempRepoManager.ts
deleted file mode 100644
index ead5221..0000000
--- a/src/services/TempRepoManager.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-import { GitHubService } from './GitHubService';
-
-interface TempRepoMetadata {
-  originalRepo: string;
-  tempRepo: string;
-  createdAt: number;
-  owner: string;
-}
-
-export class TempRepoManager {
-  private static STORAGE_KEY = 'bolt_temp_repos';
-  private static CLEANUP_INTERVAL = 5 * 60 * 1000; // 5 minutes
-  private static MAX_AGE = 30 * 60 * 1000; // 30 minutes
-
-  constructor(private githubService: GitHubService, private owner: string) {
-    this.startCleanupInterval();
-  }
-
-  private getTempRepos(): TempRepoMetadata[] {
-    const stored = localStorage.getItem(TempRepoManager.STORAGE_KEY);
-    return stored ? JSON.parse(stored) : [];
-  }
-
-  private saveTempRepos(repos: TempRepoMetadata[]): void {
-    localStorage.setItem(TempRepoManager.STORAGE_KEY, JSON.stringify(repos));
-  }
-
-  async createTemporaryPublicRepo(originalRepo: string): Promise<string> {
-    const tempRepoName = await this.githubService.createTemporaryPublicRepo(originalRepo);
-    
-    const tempRepos = this.getTempRepos();
-    tempRepos.push({
-      originalRepo,
-      tempRepo: tempRepoName,
-      createdAt: Date.now(),
-      owner: this.owner
-    });
-    this.saveTempRepos(tempRepos);
-
-    return tempRepoName;
-  }
-
-  async cleanupTempRepos(): Promise<void> {
-    const tempRepos = this.getTempRepos();
-    const now = Date.now();
-    const remaining = [];
-
-    for (const repo of tempRepos) {
-      if (now - repo.createdAt > TempRepoManager.MAX_AGE) {
-        try {
-          await this.githubService.deleteRepo(repo.owner, repo.tempRepo);
-        } catch (error) {
-          console.error(`Failed to delete temporary repo ${repo.tempRepo}:`, error);
-        }
-      } else {
-        remaining.push(repo);
-      }
-    }
-
-    this.saveTempRepos(remaining);
-  }
-
-  private startCleanupInterval(): void {
-    setInterval(() => this.cleanupTempRepos(), TempRepoManager.CLEANUP_INTERVAL);
-  }
-}

From 4ff93531331a67f0ecfb829effac8d020936e723 Mon Sep 17 00:00:00 2001
From: "Mamerto Fabian Jr (aider)" <mfabianjr@gmail.com>
Date: Wed, 22 Jan 2025 12:07:48 +0800
Subject: [PATCH 41/75] feat: Add TempRepoMetadata interface and tempRepoName
 declaration

---
 src/background/TempRepoManager.ts | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/background/TempRepoManager.ts b/src/background/TempRepoManager.ts
index dbde530..4714b77 100644
--- a/src/background/TempRepoManager.ts
+++ b/src/background/TempRepoManager.ts
@@ -1,6 +1,13 @@
 import { GitHubService } from '../services/GitHubService';
 import type { UploadStatusState } from '../lib/types';
 
+interface TempRepoMetadata {
+  originalRepo: string;
+  tempRepo: string;
+  createdAt: number;
+  owner: string;
+}
+
 export class BackgroundTempRepoManager {
   private static STORAGE_KEY = 'bolt_temp_repos';
   private static CLEANUP_INTERVAL = 5 * 60 * 1000; // 5 minutes
@@ -15,6 +22,7 @@ export class BackgroundTempRepoManager {
   }
 
   async handlePrivateRepoImport(sourceRepo: string): Promise<void> {
+    let tempRepoName: string | undefined;
     try {
       this.broadcastStatus({
         status: 'uploading',

From a635ec9b04240dfc5098979b73f7955b78ac7336 Mon Sep 17 00:00:00 2001
From: "Mamerto Fabian Jr (aider)" <mfabianjr@gmail.com>
Date: Wed, 22 Jan 2025 12:21:33 +0800
Subject: [PATCH 42/75] refactor: Migrate TempRepoManager to use
 chrome.storage.local and async operations

---
 src/background/TempRepoManager.ts | 29 ++++++++++++++---------------
 1 file changed, 14 insertions(+), 15 deletions(-)

diff --git a/src/background/TempRepoManager.ts b/src/background/TempRepoManager.ts
index 4714b77..ede0980 100644
--- a/src/background/TempRepoManager.ts
+++ b/src/background/TempRepoManager.ts
@@ -30,8 +30,8 @@ export class BackgroundTempRepoManager {
         progress: 10
       });
 
-      const tempRepoName = await this.githubService.createTemporaryPublicRepo(sourceRepo);
-      this.saveTempRepo(sourceRepo, tempRepoName);
+      tempRepoName = await this.githubService.createTemporaryPublicRepo(sourceRepo);
+      await this.saveTempRepo(sourceRepo, tempRepoName);
 
       this.broadcastStatus({
         status: 'uploading',
@@ -80,29 +80,26 @@ export class BackgroundTempRepoManager {
     }
   }
 
-  private saveTempRepo(originalRepo: string, tempRepo: string): void {
-    const tempRepos = this.getTempRepos();
+  private async saveTempRepo(originalRepo: string, tempRepo: string): Promise<void> {
+    const tempRepos = await this.getTempRepos();
     tempRepos.push({
       originalRepo,
       tempRepo,
       createdAt: Date.now(),
       owner: this.owner
     });
-    localStorage.setItem(BackgroundTempRepoManager.STORAGE_KEY, JSON.stringify(tempRepos));
+    await chrome.storage.local.set({
+      [BackgroundTempRepoManager.STORAGE_KEY]: tempRepos
+    });
   }
 
-  private getTempRepos(): Array<{
-    originalRepo: string;
-    tempRepo: string;
-    createdAt: number;
-    owner: string;
-  }> {
-    const stored = localStorage.getItem(BackgroundTempRepoManager.STORAGE_KEY);
-    return stored ? JSON.parse(stored) : [];
+  private async getTempRepos(): Promise<TempRepoMetadata[]> {
+    const result = await chrome.storage.local.get(BackgroundTempRepoManager.STORAGE_KEY);
+    return result[BackgroundTempRepoManager.STORAGE_KEY] || [];
   }
 
   async cleanupTempRepos(): Promise<void> {
-    const tempRepos = this.getTempRepos();
+    const tempRepos = await this.getTempRepos();
     const now = Date.now();
     const remaining = [];
 
@@ -118,7 +115,9 @@ export class BackgroundTempRepoManager {
       }
     }
 
-    localStorage.setItem(BackgroundTempRepoManager.STORAGE_KEY, JSON.stringify(remaining));
+    await chrome.storage.local.set({
+      [BackgroundTempRepoManager.STORAGE_KEY]: remaining
+    });
   }
 
   private startCleanupInterval(): void {

From 624914375b1d3f7cff52da6066cb9b4ede1bfaf4 Mon Sep 17 00:00:00 2001
From: Mamerto Fabian Jr <mfabianjr@gmail.com>
Date: Wed, 22 Jan 2025 12:34:19 +0800
Subject: [PATCH 43/75] refactor: Update ESLint configuration and improve code
 formatting across multiple files

---
 .eslintrc.cjs                            |  1 +
 src/background/TempRepoManager.ts        | 21 +++++-----
 src/lib/components/GitHubSettings.svelte | 33 ++++++++-------
 src/lib/components/ProjectsList.svelte   | 28 ++++++-------
 src/popup/App.svelte                     |  2 +-
 src/services/BaseGitHubService.ts        |  2 +-
 src/services/GitHubService.ts            | 42 ++++++++++++-------
 src/services/GitHubTokenValidator.ts     | 51 +++++++++++++-----------
 src/services/zipHandler.ts               |  4 +-
 src/types/chrome.d.ts                    | 25 ++++++++++++
 10 files changed, 128 insertions(+), 81 deletions(-)
 create mode 100644 src/types/chrome.d.ts

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 6cad929..e0901db 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -17,6 +17,7 @@ module.exports = {
     browser: true,
     es2017: true,
     node: true,
+    webextensions: true,
   },
   overrides: [
     {
diff --git a/src/background/TempRepoManager.ts b/src/background/TempRepoManager.ts
index ede0980..cee95f4 100644
--- a/src/background/TempRepoManager.ts
+++ b/src/background/TempRepoManager.ts
@@ -27,7 +27,7 @@ export class BackgroundTempRepoManager {
       this.broadcastStatus({
         status: 'uploading',
         message: 'Creating temporary repository...',
-        progress: 10
+        progress: 10,
       });
 
       tempRepoName = await this.githubService.createTemporaryPublicRepo(sourceRepo);
@@ -36,7 +36,7 @@ export class BackgroundTempRepoManager {
       this.broadcastStatus({
         status: 'uploading',
         message: 'Copying repository contents...',
-        progress: 30
+        progress: 30,
       });
 
       await this.githubService.cloneRepoContents(this.owner, sourceRepo, this.owner, tempRepoName);
@@ -44,7 +44,7 @@ export class BackgroundTempRepoManager {
       this.broadcastStatus({
         status: 'uploading',
         message: 'Making repository public...',
-        progress: 70
+        progress: 70,
       });
 
       // Make repo public only after content is copied
@@ -53,7 +53,7 @@ export class BackgroundTempRepoManager {
       this.broadcastStatus({
         status: 'uploading',
         message: 'Opening Bolt...',
-        progress: 90
+        progress: 90,
       });
 
       // Open Bolt in new window
@@ -61,21 +61,20 @@ export class BackgroundTempRepoManager {
         url: `https://bolt.new/~/github.com/${this.owner}/${tempRepoName}`,
         type: 'popup',
         width: 1200,
-        height: 800
+        height: 800,
       });
 
       this.broadcastStatus({
         status: 'success',
         message: 'Repository imported successfully',
-        progress: 100
+        progress: 100,
       });
-
     } catch (error) {
       console.error('Failed to import private repository:', error);
       this.broadcastStatus({
         status: 'error',
         message: error instanceof Error ? error.message : 'Failed to import repository',
-        progress: 100
+        progress: 100,
       });
     }
   }
@@ -86,10 +85,10 @@ export class BackgroundTempRepoManager {
       originalRepo,
       tempRepo,
       createdAt: Date.now(),
-      owner: this.owner
+      owner: this.owner,
     });
     await chrome.storage.local.set({
-      [BackgroundTempRepoManager.STORAGE_KEY]: tempRepos
+      [BackgroundTempRepoManager.STORAGE_KEY]: tempRepos,
     });
   }
 
@@ -116,7 +115,7 @@ export class BackgroundTempRepoManager {
     }
 
     await chrome.storage.local.set({
-      [BackgroundTempRepoManager.STORAGE_KEY]: remaining
+      [BackgroundTempRepoManager.STORAGE_KEY]: remaining,
     });
   }
 
diff --git a/src/lib/components/GitHubSettings.svelte b/src/lib/components/GitHubSettings.svelte
index ec98a44..94cf54c 100644
--- a/src/lib/components/GitHubSettings.svelte
+++ b/src/lib/components/GitHubSettings.svelte
@@ -45,7 +45,7 @@
   let permissionStatus = {
     allRepos: undefined as boolean | undefined,
     admin: undefined as boolean | undefined,
-    contents: undefined as boolean | undefined
+    contents: undefined as boolean | undefined,
   };
   let permissionError: string | null = null;
   let previousToken: string | null = null;
@@ -133,7 +133,7 @@
     const storage = await chrome.storage.local.get('lastPermissionCheck');
     lastPermissionCheck = storage.lastPermissionCheck || null;
     previousToken = githubToken;
-    
+
     // If we have initial valid settings, validate and load repos
     if (githubToken && repoOwner) {
       await validateSettings();
@@ -206,12 +206,12 @@
     permissionStatus = {
       allRepos: undefined,
       admin: undefined,
-      contents: undefined
+      contents: undefined,
     };
-    
+
     try {
       const githubService = new GitHubService(githubToken);
-      
+
       const result = await githubService.verifyFineGrainedPermissions(
         repoOwner,
         ({ permission, isValid }) => {
@@ -232,7 +232,7 @@
           permissionStatus = { ...permissionStatus };
         }
       );
-      
+
       if (result.isValid) {
         lastPermissionCheck = Date.now();
         await chrome.storage.local.set({ lastPermissionCheck });
@@ -242,7 +242,7 @@
         permissionStatus = {
           allRepos: !result.error?.includes('repository creation'),
           admin: !result.error?.includes('administration'),
-          contents: !result.error?.includes('contents')
+          contents: !result.error?.includes('contents'),
         };
         permissionError = result.error || 'Permission verification failed';
       }
@@ -257,12 +257,12 @@
 
   const handleSave = async (event: Event) => {
     event.preventDefault();
-    
+
     if (tokenType === 'fine-grained') {
       const THIRTY_DAYS = 30 * 24 * 60 * 60 * 1000;
-      const needsCheck = 
-        previousToken !== githubToken || 
-        !lastPermissionCheck || 
+      const needsCheck =
+        previousToken !== githubToken ||
+        !lastPermissionCheck ||
         Date.now() - lastPermissionCheck > THIRTY_DAYS;
 
       if (needsCheck) {
@@ -272,7 +272,7 @@
         }
       }
     }
-    
+
     onSave();
   };
 
@@ -355,9 +355,14 @@
                 {#if previousToken === githubToken && lastPermissionCheck}
                   <div class="relative group">
                     <HelpCircle class="h-3 w-3 text-slate-400" />
-                    <div class="absolute bottom-full mb-2 left-1/2 -translate-x-1/2 hidden group-hover:block w-64 p-2 text-xs bg-slate-900 border border-slate-700 rounded-md shadow-lg">
+                    <div
+                      class="absolute bottom-full mb-2 left-1/2 -translate-x-1/2 hidden group-hover:block w-64 p-2 text-xs bg-slate-900 border border-slate-700 rounded-md shadow-lg"
+                    >
                       <p>Last verified: {new Date(lastPermissionCheck).toLocaleString()}</p>
-                      <p class="mt-1 text-slate-400">Permissions are automatically re-verified when the token changes or after 30 days.</p>
+                      <p class="mt-1 text-slate-400">
+                        Permissions are automatically re-verified when the token changes or after 30
+                        days.
+                      </p>
                     </div>
                   </div>
                 {/if}
diff --git a/src/lib/components/ProjectsList.svelte b/src/lib/components/ProjectsList.svelte
index 02f9c4c..c7b9bd0 100644
--- a/src/lib/components/ProjectsList.svelte
+++ b/src/lib/components/ProjectsList.svelte
@@ -9,7 +9,7 @@
   export let githubToken: string;
   export let isBoltSite: boolean = true;
   export let currentlyLoadedProjectId: string | null = null;
-  
+
   let loadingRepos = false;
 
   const githubService = new GitHubService(githubToken);
@@ -97,18 +97,19 @@
     window.open(`https://github.com/${repoOwner}/${repoName}`, '_blank');
   }
 
-
   async function importFromGitHub(repoOwner: string, repoName: string, isPrivate: boolean) {
     if (!isPrivate) {
       window.open(`https://bolt.new/~/github.com/${repoOwner}/${repoName}`, '_blank');
       return;
     }
 
-    if (!confirm(
-      'Warning: This will temporarily create a public copy of your private repository to enable import.\n\n' +
-      'The temporary repository will be automatically deleted after import.\n\n' +
-      'Do you want to continue?'
-    )) {
+    if (
+      !confirm(
+        'Warning: This will temporarily create a public copy of your private repository to enable import.\n\n' +
+          'The temporary repository will be automatically deleted after import.\n\n' +
+          'Do you want to continue?'
+      )
+    ) {
       return;
     }
 
@@ -116,9 +117,9 @@
       const port = chrome.runtime.connect({ name: 'bolt-content' });
       port.postMessage({
         type: 'IMPORT_PRIVATE_REPO',
-        data: { repoName }
+        data: { repoName },
       });
-      
+
       port.onMessage.addListener((message) => {
         if (message.type === 'UPLOAD_STATUS') {
           // Handle status updates if needed
@@ -192,9 +193,7 @@
         <p class="text-sm text-green-400">
           💡 No Bolt projects found. Create or load an existing Bolt project to get started.
         </p>
-        <p class="text-sm text-green-400">
-          🌟 You can also load any of your GitHub repositories.
-        </p>
+        <p class="text-sm text-green-400">🌟 You can also load any of your GitHub repositories.</p>
       </div>
     </div>
   {:else}
@@ -215,7 +214,7 @@
               {/if}
               {#if project.gitHubRepo}
                 <span class="text-xs {project.private ? 'text-red-500' : 'text-blue-500'} ml-2">
-                  ({project.private ? "Private" : "Public"})
+                  ({project.private ? 'Private' : 'Public'})
                 </span>
               {/if}
             </h3>
@@ -260,7 +259,8 @@
                 size="icon"
                 title="Import from GitHub to Bolt"
                 class="h-8 w-8 opacity-70 group-hover:opacity-100"
-                on:click={() => importFromGitHub(repoOwner, project.repoName, project.private ?? false)}
+                on:click={() =>
+                  importFromGitHub(repoOwner, project.repoName, project.private ?? false)}
               >
                 <Import class="h-5 w-5" />
               </Button>
diff --git a/src/popup/App.svelte b/src/popup/App.svelte
index bc5239d..e93457d 100644
--- a/src/popup/App.svelte
+++ b/src/popup/App.svelte
@@ -95,7 +95,7 @@
       isBoltSite = currentUrl.includes('bolt.new');
 
       if (isBoltSite) {
-        const match = currentUrl.match(/bolt\.new\/~\/([^\/]+)/);
+        const match = currentUrl.match(/bolt\.new\/~\/([^/]+)/);
         parsedProjectId = match?.[1] || null;
         console.log(`📄 App: ${parsedProjectId}`);
         // Get projectId from storage
diff --git a/src/services/BaseGitHubService.ts b/src/services/BaseGitHubService.ts
index f31123a..8f37996 100644
--- a/src/services/BaseGitHubService.ts
+++ b/src/services/BaseGitHubService.ts
@@ -10,7 +10,7 @@ export abstract class BaseGitHubService {
 
   constructor(protected token: string) {}
 
-  protected async request(method: string, endpoint: string, body?: any, options: RequestInit = {}) {
+  async request(method: string, endpoint: string, body?: any, options: RequestInit = {}) {
     const url = `${this.baseUrl}${endpoint}`;
 
     const response = await fetch(url, {
diff --git a/src/services/GitHubService.ts b/src/services/GitHubService.ts
index 54383ef..f4ac6c8 100644
--- a/src/services/GitHubService.ts
+++ b/src/services/GitHubService.ts
@@ -43,7 +43,10 @@ export class GitHubService extends BaseGitHubService {
     return this.tokenValidator.validateTokenAndUser(username);
   }
 
-  async verifyFineGrainedPermissions(username: string, onProgress?: ProgressCallback): Promise<{ isValid: boolean; error?: string }> {
+  async verifyFineGrainedPermissions(
+    username: string,
+    onProgress?: ProgressCallback
+  ): Promise<{ isValid: boolean; error?: string }> {
     return this.tokenValidator.verifyFineGrainedPermissions(username, onProgress);
   }
 
@@ -218,14 +221,26 @@ This repository was automatically initialized by the Bolt to GitHub extension.
     return tempRepoName;
   }
 
-  async cloneRepoContents(sourceOwner: string, sourceRepo: string, targetOwner: string, targetRepo: string, branch: string = 'main'): Promise<void> {
+  async cloneRepoContents(
+    sourceOwner: string,
+    sourceRepo: string,
+    targetOwner: string,
+    targetRepo: string,
+    branch: string = 'main'
+  ): Promise<void> {
     // Get all files from source repo
-    const response = await this.request('GET', `/repos/${sourceOwner}/${sourceRepo}/git/trees/${branch}?recursive=1`);
+    const response = await this.request(
+      'GET',
+      `/repos/${sourceOwner}/${sourceRepo}/git/trees/${branch}?recursive=1`
+    );
     const files = response.tree.filter((item: any) => item.type === 'blob');
 
     // Copy each file to target repo
     for (const file of files) {
-      const content = await this.request('GET', `/repos/${sourceOwner}/${sourceRepo}/contents/${file.path}?ref=${branch}`);
+      const content = await this.request(
+        'GET',
+        `/repos/${sourceOwner}/${sourceRepo}/contents/${file.path}?ref=${branch}`
+      );
       await this.pushFile({
         owner: targetOwner,
         repo: targetRepo,
@@ -261,16 +276,15 @@ This repository was automatically initialized by the Bolt to GitHub extension.
     try {
       const repos = await this.request('GET', `/user/repos?per_page=100&sort=updated`);
 
-      return repos
-        .map((repo: any) => ({
-          name: repo.name,
-          description: repo.description,
-          private: repo.private,
-          html_url: repo.html_url,
-          created_at: repo.created_at,
-          updated_at: repo.updated_at,
-          language: repo.language,
-        }));
+      return repos.map((repo: any) => ({
+        name: repo.name,
+        description: repo.description,
+        private: repo.private,
+        html_url: repo.html_url,
+        created_at: repo.created_at,
+        updated_at: repo.updated_at,
+        language: repo.language,
+      }));
     } catch (error) {
       console.error('Failed to fetch repositories:', error);
       throw new Error(
diff --git a/src/services/GitHubTokenValidator.ts b/src/services/GitHubTokenValidator.ts
index 5e72411..b6def02 100644
--- a/src/services/GitHubTokenValidator.ts
+++ b/src/services/GitHubTokenValidator.ts
@@ -20,7 +20,7 @@ export class GitHubTokenValidator extends BaseGitHubService {
   }
 
   private async delay(ms: number): Promise<void> {
-    return new Promise(resolve => setTimeout(resolve, ms));
+    return new Promise((resolve) => setTimeout(resolve, ms));
   }
 
   async verifyFineGrainedPermissions(
@@ -35,28 +35,28 @@ export class GitHubTokenValidator extends BaseGitHubService {
       // Create a temporary test repo
       const timestamp = Date.now();
       const repoName = `test-repo-${timestamp}`;
-      
+
       // Test repository creation (All repositories access)
       try {
         await this.request('POST', '/user/repos', {
           name: repoName,
           private: true,
-          auto_init: true
+          auto_init: true,
         });
         await this.delay(2000);
         onProgress?.({ permission: 'repos', isValid: true });
       } catch (error) {
         onProgress?.({ permission: 'repos', isValid: false });
-        return { 
-          isValid: false, 
-          error: 'Token lacks repository creation permission' 
+        return {
+          isValid: false,
+          error: 'Token lacks repository creation permission',
         };
       }
 
       // Test visibility change (Admin Write)
       try {
         await this.request('PATCH', `/repos/${username}/${repoName}`, {
-          private: false
+          private: false,
         });
         await this.delay(2000);
         onProgress?.({ permission: 'admin', isValid: true });
@@ -68,21 +68,21 @@ export class GitHubTokenValidator extends BaseGitHubService {
         } catch (cleanupError) {
           console.error('Failed to cleanup repository after admin check:', cleanupError);
         }
-        return { 
-          isValid: false, 
-          error: 'Token lacks repository administration permission' 
+        return {
+          isValid: false,
+          error: 'Token lacks repository administration permission',
         };
       }
 
       try {
         // Test contents read by listing contents
         await this.request('GET', `/repos/${username}/${repoName}/contents`);
-        
+
         // Test contents write with a small .gitkeep file
         const content = btoa(''); // empty file in base64
         await this.request('PUT', `/repos/${username}/${repoName}/contents/.gitkeep`, {
           message: 'Test write permission',
-          content: content
+          content: content,
         });
         onProgress?.({ permission: 'code', isValid: true });
       } catch (error) {
@@ -93,9 +93,9 @@ export class GitHubTokenValidator extends BaseGitHubService {
         } catch (cleanupError) {
           console.error('Failed to cleanup repository after contents check:', cleanupError);
         }
-        return { 
-          isValid: false, 
-          error: 'Token lacks repository contents read/write permission' 
+        return {
+          isValid: false,
+          error: 'Token lacks repository contents read/write permission',
         };
       }
 
@@ -104,28 +104,30 @@ export class GitHubTokenValidator extends BaseGitHubService {
         await this.request('DELETE', `/repos/${username}/${repoName}`, undefined, {
           // Add accept header to handle empty response
           headers: {
-            accept: 'application/vnd.github+json'
-          }
+            accept: 'application/vnd.github+json',
+          },
         });
       } catch (error) {
         console.error('Failed to cleanup test repository:', error);
         // Don't return error here as permissions were already verified
       }
-      
+
       return { isValid: true };
     } catch (error) {
       console.error('Permission verification failed:', error);
-      return { 
-        isValid: false, 
-        error: `Permission verification failed: ${error instanceof Error ? error.message : String(error)}` 
+      return {
+        isValid: false,
+        error: `Permission verification failed: ${error instanceof Error ? error.message : String(error)}`,
       };
     }
   }
 
-  private async validateClassicToken(username: string): Promise<{ isValid: boolean; error?: string }> {
+  private async validateClassicToken(
+    username: string
+  ): Promise<{ isValid: boolean; error?: string }> {
     try {
       const authUser = await this.request('GET', '/user');
-      
+
       if (!authUser.login) {
         return { isValid: false, error: 'Invalid GitHub token' };
       }
@@ -148,7 +150,8 @@ export class GitHubTokenValidator extends BaseGitHubService {
 
       return {
         isValid: false,
-        error: 'Token can only be used with your GitHub username or organizations you have access to',
+        error:
+          'Token can only be used with your GitHub username or organizations you have access to',
       };
     } catch (error) {
       if (error instanceof Error && error.message.includes('404')) {
diff --git a/src/services/zipHandler.ts b/src/services/zipHandler.ts
index ba5dcb3..0f530a5 100644
--- a/src/services/zipHandler.ts
+++ b/src/services/zipHandler.ts
@@ -186,7 +186,7 @@ export class ZipHandler {
         '.nuxt/',
         '.cache/',
         '.temp/',
-        'tmp/'
+        'tmp/',
       ]);
     }
 
@@ -273,7 +273,7 @@ export class ZipHandler {
   }
 
   private sleep(ms: number): Promise<void> {
-    return new Promise(resolve => setTimeout(resolve, ms));
+    return new Promise((resolve) => setTimeout(resolve, ms));
   }
 
   private async createBlobs(files: Map<string, string>, repoOwner: string, repoName: string) {
diff --git a/src/types/chrome.d.ts b/src/types/chrome.d.ts
new file mode 100644
index 0000000..de01787
--- /dev/null
+++ b/src/types/chrome.d.ts
@@ -0,0 +1,25 @@
+declare namespace chrome {
+  namespace tabs {
+    function create(createProperties: {
+      url: string;
+      active?: boolean;
+      pinned?: boolean;
+      index?: number;
+      windowId?: number;
+    }): Promise<chrome.tabs.Tab>;
+  }
+
+  interface Tab {
+    id?: number;
+    index: number;
+    pinned: boolean;
+    highlighted: boolean;
+    windowId: number;
+    active: boolean;
+    url?: string;
+    title?: string;
+    favIconUrl?: string;
+    status?: string;
+    incognito: boolean;
+  }
+}

From 8314f7d027ba2d6f1efbb00ec3f0d5227c5b5f45 Mon Sep 17 00:00:00 2001
From: Mamerto Fabian Jr <mfabianjr@gmail.com>
Date: Wed, 22 Jan 2025 14:17:26 +0800
Subject: [PATCH 44/75] refactor: Enhance BackgroundService and TempRepoManager
 with improved logging and connection handling

---
 .windsurfrules                         | 100 +++++++++++++++++++++++++
 src/background/BackgroundService.ts    |   9 ++-
 src/background/TempRepoManager.ts      |  29 ++++---
 src/lib/components/ProjectsList.svelte |  26 ++++---
 src/services/GitHubService.ts          |  67 ++++++++++++-----
 5 files changed, 190 insertions(+), 41 deletions(-)
 create mode 100644 .windsurfrules

diff --git a/.windsurfrules b/.windsurfrules
new file mode 100644
index 0000000..b5884f7
--- /dev/null
+++ b/.windsurfrules
@@ -0,0 +1,100 @@
+# Security
+
+## Sensitive Files
+DO NOT read or modify:
+- .env files
+- **/config/secrets.* 
+- **/*.pem
+- Any file containing API keys, tokens, or credentials
+
+## Security Practices
+- Never commit sensitive files
+- Use environment variables for secrets
+- Keep credentials out of logs and output
+
+# Tech Stack Rules
+
+## Framework & Core Technologies
+- Use Svelte v4.x for components
+- Use TypeScript for all .ts and .svelte files
+- Use Vite v4.x as build tool
+- Chrome Extension manifest v3 standards must be followed
+- ESM modules only (type: "module" in package.json)
+
+## TypeScript Standards
+- Strict mode is required
+- No implicit any types
+- Strict null checks enabled
+- Use type annotations for function parameters and returns
+- Follow the path aliases:
+  - Use $lib/* for imports from src/lib
+- Chrome types must be included
+
+## Component Standards
+- All Svelte components must use TypeScript
+- Follow Svelte best practices for reactivity
+- Keep components focused and single-responsibility
+- Create modular components:
+  - Break down complex UIs into smaller, reusable components
+  - Extract repeated patterns into shared components
+  - Keep component dependencies minimal and explicit
+  - Use composition over inheritance
+  - Maintain clear component interfaces with proper prop types
+- Use Svelte's built-in state management
+- Props must be properly typed
+
+## Styling Standards
+- Use TailwindCSS for styling
+- Follow the custom theme system defined in tailwind.config.js
+- Use CSS variables for theme colors
+- Maintain dark mode compatibility
+- Use container queries appropriately
+- Follow the defined border radius system
+
+## Code Quality
+- Maximum 300 lines of code per file
+- ESLint rules must be followed:
+  - No unused variables (except prefixed with _)
+  - Warn on any usage
+  - Follow svelte-eslint-parser rules
+- Prettier formatting is required:
+  - 2 space indentation
+  - Single quotes
+  - 100 character line length
+  - ES5 trailing commas
+  - Svelte-specific formatting
+
+## Build & Structure
+- Follow the defined Vite build configuration
+- Maintain separate background/content scripts
+- Use proper chunk splitting
+- Keep source maps in development
+- Assets must be in the assets directory
+- Follow the defined output structure
+
+## Dependencies
+- No conflicting Svelte versions
+- Keep dependencies up to date but pin versions
+- Prefer official Svelte integrations
+- Use bits-ui for UI components
+- Use lucide-svelte for icons
+- Maintain compatibility with @crxjs/vite-plugin
+
+## Performance
+- Minimize bundle sizes
+- Use proper code splitting
+- Optimize asset loading
+- Follow Chrome extension best practices for performance
+
+## Testing & Quality Assurance
+- Run svelte-check before commits
+- Ensure type checking passes
+- Fix all ESLint warnings
+- Format code before committing
+- Test in both light and dark modes
+
+## Version Control
+- Follow semantic versioning
+- Keep package-lock.json up to date
+- Document breaking changes
+- Maintain a clean git history
diff --git a/src/background/BackgroundService.ts b/src/background/BackgroundService.ts
index d673017..bf46ead 100644
--- a/src/background/BackgroundService.ts
+++ b/src/background/BackgroundService.ts
@@ -84,13 +84,13 @@ export class BackgroundService {
 
   private setupConnectionHandlers(): void {
     chrome.runtime.onConnect.addListener((port: Port) => {
-      const tabId = port.sender?.tab?.id;
+      const tabId = port.sender?.tab?.id ?? -1; // Use -1 for popup
 
-      if (!tabId || port.name !== 'bolt-content') {
+      if (!['bolt-content', 'popup'].includes(port.name)) {
         return;
       }
 
-      console.log('📝 New connection from tab:', tabId);
+      console.log('📝 New connection from:', port.name, 'tabId:', tabId);
       this.ports.set(tabId, port);
 
       port.onDisconnect.addListener(() => {
@@ -99,6 +99,7 @@ export class BackgroundService {
       });
 
       port.onMessage.addListener(async (message: Message) => {
+        console.log('📥 Received port message:', { source: port.name, type: message.type });
         await this.handlePortMessage(tabId, message);
       });
     });
@@ -170,10 +171,12 @@ export class BackgroundService {
           break;
 
         case 'IMPORT_PRIVATE_REPO':
+          console.log('🔄 Processing private repo import:', message.data.repoName);
           if (!this.tempRepoManager) {
             throw new Error('Temp repo manager not initialized');
           }
           await this.tempRepoManager.handlePrivateRepoImport(message.data.repoName);
+          console.log('✅ Private repo import completed');
           break;
         case 'DEBUG':
           console.log(`[Content Debug] ${message.message}`);
diff --git a/src/background/TempRepoManager.ts b/src/background/TempRepoManager.ts
index cee95f4..69a787f 100644
--- a/src/background/TempRepoManager.ts
+++ b/src/background/TempRepoManager.ts
@@ -10,8 +10,8 @@ interface TempRepoMetadata {
 
 export class BackgroundTempRepoManager {
   private static STORAGE_KEY = 'bolt_temp_repos';
-  private static CLEANUP_INTERVAL = 5 * 60 * 1000; // 5 minutes
-  private static MAX_AGE = 30 * 60 * 1000; // 30 minutes
+  private static CLEANUP_INTERVAL = 30 * 1000;  // 30 seconds
+  private static MAX_AGE = 2 * 60 * 1000; // 2 minutes
 
   constructor(
     private githubService: GitHubService,
@@ -30,7 +30,7 @@ export class BackgroundTempRepoManager {
         progress: 10,
       });
 
-      tempRepoName = await this.githubService.createTemporaryPublicRepo(sourceRepo);
+      tempRepoName = await this.githubService.createTemporaryPublicRepo(this.owner, sourceRepo);
       await this.saveTempRepo(sourceRepo, tempRepoName);
 
       this.broadcastStatus({
@@ -39,7 +39,20 @@ export class BackgroundTempRepoManager {
         progress: 30,
       });
 
-      await this.githubService.cloneRepoContents(this.owner, sourceRepo, this.owner, tempRepoName);
+      await this.githubService.cloneRepoContents(
+        this.owner,
+        sourceRepo,
+        this.owner,
+        tempRepoName,
+        'main',
+        (progress) => {
+          this.broadcastStatus({
+            status: 'uploading',
+            message: 'Copying repository contents...',
+            progress: Math.floor(30 + progress * 0.4), // Adjust progress to fit within 30-70 range
+          });
+        }
+      );
 
       this.broadcastStatus({
         status: 'uploading',
@@ -56,12 +69,10 @@ export class BackgroundTempRepoManager {
         progress: 90,
       });
 
-      // Open Bolt in new window
-      chrome.windows.create({
+      // Open Bolt in new tab
+      chrome.tabs.create({
         url: `https://bolt.new/~/github.com/${this.owner}/${tempRepoName}`,
-        type: 'popup',
-        width: 1200,
-        height: 800,
+        active: true, // Focus the new tab
       });
 
       this.broadcastStatus({
diff --git a/src/lib/components/ProjectsList.svelte b/src/lib/components/ProjectsList.svelte
index c7b9bd0..ec0cb72 100644
--- a/src/lib/components/ProjectsList.svelte
+++ b/src/lib/components/ProjectsList.svelte
@@ -106,7 +106,7 @@
     if (
       !confirm(
         'Warning: This will temporarily create a public copy of your private repository to enable import.\n\n' +
-          'The temporary repository will be automatically deleted after import.\n\n' +
+          'The temporary repository will be automatically deleted after 2 minutes.\n\n' +
           'Do you want to continue?'
       )
     ) {
@@ -114,20 +114,28 @@
     }
 
     try {
-      const port = chrome.runtime.connect({ name: 'bolt-content' });
+      console.log('🔄 Sending message to import private repo:', repoName);
+      // Send message directly to background service
+      const port = chrome.runtime.connect({ name: 'popup' });
+      
+      // Set up listener first
+      port.onMessage.addListener((message) => {
+        if (message.type === 'UPLOAD_STATUS') {
+          console.log('📥 Import status update:', message.status);
+        }
+      });
+
+      // Then send message
       port.postMessage({
         type: 'IMPORT_PRIVATE_REPO',
         data: { repoName },
       });
 
-      port.onMessage.addListener((message) => {
-        if (message.type === 'UPLOAD_STATUS') {
-          // Handle status updates if needed
-          console.log('Import status:', message.status);
-        }
-      });
+      // Close the popup to prevent UI overlap
+      window.close();
+
     } catch (error) {
-      console.error('Failed to import private repository:', error);
+      console.error('❌ Failed to import private repository:', error);
       alert('Failed to import private repository. Please try again later.');
     }
   }
diff --git a/src/services/GitHubService.ts b/src/services/GitHubService.ts
index f4ac6c8..27a7e04 100644
--- a/src/services/GitHubService.ts
+++ b/src/services/GitHubService.ts
@@ -62,20 +62,22 @@ export class GitHubService extends BaseGitHubService {
     }
   }
 
-  async createRepo(options: RepoCreateOptions) {
+  async createRepo(options: RepoCreateOptions & { auto_init?: boolean }) {
+    const { auto_init = true, ...repoOptions } = options;
+
     try {
       // Try creating in user's account first
       try {
         return await this.request('POST', '/user/repos', {
-          ...options,
-          auto_init: true, // Initialize with README to create main branch
+          ...repoOptions,
+          auto_init, // Use the provided value or default to true
         });
       } catch (error) {
         if (error instanceof Error && error.message.includes('404')) {
           // If user endpoint fails, try organization endpoint
           return await this.request('POST', `/orgs/${options.name}/repos`, {
-            ...options,
-            auto_init: true,
+            ...repoOptions,
+            auto_init,
           });
         }
         throw error;
@@ -148,21 +150,24 @@ This repository was automatically initialized by the Bolt to GitHub extension.
     content: string;
     branch: string;
     message: string;
+    checkExisting?: boolean;
   }) {
-    const { owner, repo, path, content, branch, message } = params;
+    const { owner, repo, path, content, branch, message, checkExisting = true } = params;
 
     try {
-      // Try to get existing file
+      // Try to get existing file if needed
       let sha: string | undefined;
-      try {
-        const response: GitHubFileResponse = await this.request(
-          'GET',
-          `/repos/${owner}/${repo}/contents/${path}?ref=${branch}`
-        );
-        sha = response.sha;
-      } catch (error) {
-        // File doesn't exist, which is fine
-        console.log('File does not exist yet, will create new');
+      if (checkExisting) {
+        try {
+          const response: GitHubFileResponse = await this.request(
+            'GET',
+            `/repos/${owner}/${repo}/contents/${path}?ref=${branch}`
+          );
+          sha = response.sha;
+        } catch (error) {
+          // File doesn't exist, which is fine
+          console.log('File does not exist yet, will create new');
+        }
       }
 
       // Create or update file
@@ -207,17 +212,30 @@ This repository was automatically initialized by the Bolt to GitHub extension.
     }
   }
 
-  async createTemporaryPublicRepo(sourceRepoName: string): Promise<string> {
+  async createTemporaryPublicRepo(ownerName: string, sourceRepoName: string): Promise<string> {
     const timestamp = Date.now();
     const randomStr = Math.random().toString(36).substring(2, 8);
     const tempRepoName = `temp-${sourceRepoName}-${timestamp}-${randomStr}`;
 
+    // Create repo without auto-init
     await this.createRepo({
       name: tempRepoName,
-      private: true, // Keep it private initially
+      private: true,
+      auto_init: false,
       description: 'Temporary repository for Bolt import - will be deleted automatically',
     });
 
+    // Initialize with an empty commit to create the default branch
+    await this.pushFile({
+      owner: ownerName,
+      repo: tempRepoName,
+      path: '.gitkeep',
+      content: btoa(''), // Empty file
+      branch: 'main',
+      message: 'Initialize repository',
+      checkExisting: false,
+    });
+
     return tempRepoName;
   }
 
@@ -226,7 +244,8 @@ This repository was automatically initialized by the Bolt to GitHub extension.
     sourceRepo: string,
     targetOwner: string,
     targetRepo: string,
-    branch: string = 'main'
+    branch: string = 'main',
+    onProgress?: (progress: number) => void
   ): Promise<void> {
     // Get all files from source repo
     const response = await this.request(
@@ -234,9 +253,11 @@ This repository was automatically initialized by the Bolt to GitHub extension.
       `/repos/${sourceOwner}/${sourceRepo}/git/trees/${branch}?recursive=1`
     );
     const files = response.tree.filter((item: any) => item.type === 'blob');
+    const totalFiles = files.length;
 
     // Copy each file to target repo
-    for (const file of files) {
+    for (let i = 0; i < files.length; i++) {
+      const file = files[i];
       const content = await this.request(
         'GET',
         `/repos/${sourceOwner}/${sourceRepo}/contents/${file.path}?ref=${branch}`
@@ -248,7 +269,13 @@ This repository was automatically initialized by the Bolt to GitHub extension.
         content: content.content,
         branch,
         message: `Copy ${file.path} from ${sourceRepo}`,
+        checkExisting: false, // Skip checking for existing files when cloning
       });
+
+      if (onProgress) {
+        const progress = (i + 1) / totalFiles * 100;
+        onProgress(progress);
+      }
     }
   }
 

From 6d065d88a209b97a2331f49b1c9a7dbbe59c8656 Mon Sep 17 00:00:00 2001
From: Mamerto Fabian Jr <mfabianjr@gmail.com>
Date: Wed, 22 Jan 2025 14:56:39 +0800
Subject: [PATCH 45/75] refactor: Revamp Help and New User Guide components
 with enhanced GitHub token instructions and improved layout

---
 src/lib/components/Help.svelte                | 88 +++++++++++++++----
 src/lib/components/ProjectsList.svelte        |  2 +-
 src/lib/components/github/NewUserGuide.svelte | 46 +++++++---
 src/services/GitHubService.ts                 |  2 +-
 4 files changed, 109 insertions(+), 29 deletions(-)

diff --git a/src/lib/components/Help.svelte b/src/lib/components/Help.svelte
index 5f33256..1dcae43 100644
--- a/src/lib/components/Help.svelte
+++ b/src/lib/components/Help.svelte
@@ -6,40 +6,98 @@
     CardHeader,
     CardTitle,
   } from '$lib/components/ui/card';
+  import { CREATE_TOKEN_URL, CREATE_FINE_GRAINED_TOKEN_URL } from '../../services/GitHubService';
 </script>
 
 <Card class="border-slate-800 bg-slate-900">
   <CardHeader>
-    <CardTitle>Help & Documentation</CardTitle>
+    <CardTitle>✨ Help & Documentation</CardTitle>
     <CardDescription class="text-slate-400">
       Learn how to use Bolt to GitHub effectively
     </CardDescription>
   </CardHeader>
-  <CardContent class="space-y-4">
+  <CardContent class="space-y-6">
     <div class="space-y-2">
-      <h3 class="text-lg font-semibold text-slate-200">Getting Started</h3>
+      <h3 class="text-lg font-semibold text-slate-200">🚀 Getting Started</h3>
       <p class="text-sm text-slate-400">
-        1. Create a new project on bolt.new or open an existing one
+        1. Click the extension icon in your browser toolbar
       </p>
       <p class="text-sm text-slate-400">
-        2. Configure your GitHub settings with your personal access token
+        2. Follow the popup instructions to set up your GitHub access
       </p>
-      <p class="text-sm text-slate-400">3. Set your repository details and branch name</p>
+      <p class="text-sm text-slate-400">
+        3. Once configured, you can use Bolt to GitHub from any bolt.new page
+      </p>
+    </div>
+
+    <div class="space-y-3">
+      <h3 class="text-lg font-semibold text-slate-200">🔑 GitHub Token Guide</h3>
+      
+      <div class="rounded-md bg-slate-800 p-4">
+        <h4 class="mb-2 font-medium text-slate-200">🎯 Classic Personal Access Token</h4>
+        <p class="mb-2 text-sm text-slate-400">
+          Best for public repositories only. Quick to set up:
+        </p>
+        <ol class="ml-4 list-decimal text-sm text-slate-400">
+          <li>Visit the <a href={CREATE_TOKEN_URL} target="_blank" class="text-blue-400 hover:underline">token creation page</a></li>
+          <li>Optionally customize the token name</li>
+          <li>Click "Generate token" at the bottom and copy the token</li>
+          <li>Paste the token into the "GitHub Token" field in the "Settings" tab</li>
+        </ol>
+      </div>
+
+      <div class="rounded-md bg-slate-800 p-4">
+        <h4 class="mb-2 font-medium text-slate-200">🔐 Fine-Grained Access Token</h4>
+        <p class="mb-2 text-sm text-slate-400">
+          Required for private repository access. Setup steps:
+        </p>
+        <ol class="ml-4 list-decimal text-sm text-slate-400">
+          <li>Visit the <a href={CREATE_FINE_GRAINED_TOKEN_URL} target="_blank" class="text-blue-400 hover:underline">fine-grained token page</a></li>
+          <li>Set token expiration (or choose "No expiration")</li>
+          <li>Configure repository access:
+            <ul class="ml-4 list-disc">
+              <li>Select "All repositories"</li>
+            </ul>
+          </li>
+          <li>Configure Permissions:
+            <ul class="ml-4 list-disc">
+              <li>Click the "Repository permissions"</li>
+              <li>Enable "Administration" (Read & Write)</li>
+              <li>Enable "Contents" (Read & Write)</li>
+            </ul>
+          </li>
+          <li>Generate and copy your token</li>
+          <li>Paste the token into the "GitHub Token" field in the "Settings" tab</li>
+        </ol>
+      </div>
     </div>
 
     <div class="space-y-2">
-      <h3 class="text-lg font-semibold text-slate-200">Important Note</h3>
-      <p class="text-sm text-slate-400">
-        ⚠️ This extension cannot function if Bolt encounters an error. Please ensure your Bolt
-        project is working correctly before attempting to use this extension.
-      </p>
+      <h3 class="text-lg font-semibold text-slate-200">🔒 Private Repository Import</h3>
+      <div class="rounded-md bg-slate-800/50 p-3 text-sm text-slate-400">
+        <p>When importing private repositories:</p>
+        <ol class="ml-4 mt-2 list-decimal">
+          <li>A temporary public clone is created</li>
+          <li>Bolt starts importing from this clone</li>
+          <li>The temporary repository is automatically deleted after 2 minutes</li>
+        </ol>
+        <div class="mt-3 p-2 bg-amber-900/30 rounded border border-amber-700/30">
+          <p class="text-amber-400 font-medium">Important:</p>
+          <p class="mt-1">After importing a private repository, immediately go to the Settings tab and select your imported repository. This ensures your Bolt changes sync with the correct repository. Skip this step only if you want to create a new repository instead.</p>
+        </div>
+        <p class="mt-2 text-amber-400">
+          Note: Fine-grained token is required for this feature
+        </p>
+      </div>
     </div>
 
     <div class="space-y-2">
-      <h3 class="text-lg font-semibold text-slate-200">Need More Help?</h3>
-      <p class="text-sm text-slate-400">
-        Visit our GitHub repository for detailed documentation, issues, and updates.
-      </p>
+      <h3 class="text-lg font-semibold text-slate-200">💡 Need More Help?</h3>
+      <ul class="space-y-2 text-sm text-slate-400">
+        <li>• Visit our <a href="https://github.com/mamertofabian/bolt-to-github" target="_blank" class="text-blue-400 hover:underline">GitHub repository</a> for detailed documentation, issues, and updates</li>
+        <li>• Join our <a href="https://aidrivencoder.com/discord" target="_blank" class="text-blue-400 hover:underline">Discord community</a> for support and discussions</li>
+        <li>• Watch our <a href="https://aidrivencoder.com/youtube" target="_blank" class="text-blue-400 hover:underline">AI development tutorials</a> on YouTube for expert guidance and tips! 🎥</li>
+      </ul>
     </div>
   </CardContent>
 </Card>
diff --git a/src/lib/components/ProjectsList.svelte b/src/lib/components/ProjectsList.svelte
index ec0cb72..ab8f7b9 100644
--- a/src/lib/components/ProjectsList.svelte
+++ b/src/lib/components/ProjectsList.svelte
@@ -25,7 +25,7 @@
   }> = [];
 
   let searchQuery = '';
-  let showRepos = false;
+  let showRepos = true;
   let filteredProjects: Array<{
     projectId?: string;
     repoName: string;
diff --git a/src/lib/components/github/NewUserGuide.svelte b/src/lib/components/github/NewUserGuide.svelte
index 9bae04e..67b53df 100644
--- a/src/lib/components/github/NewUserGuide.svelte
+++ b/src/lib/components/github/NewUserGuide.svelte
@@ -7,8 +7,10 @@
     ExternalLink,
     Youtube,
     Github,
+    Shield,
+    Lock,
   } from 'lucide-svelte';
-  import { GITHUB_SIGNUP_URL, CREATE_TOKEN_URL } from '../../../services/GitHubService';
+  import { GITHUB_SIGNUP_URL, CREATE_TOKEN_URL, CREATE_FINE_GRAINED_TOKEN_URL } from '../../../services/GitHubService';
   import { onMount } from 'svelte';
 
   let showNewUserGuide = true;
@@ -44,7 +46,7 @@
     <div class="px-4 pb-4 space-y-2">
       <div class="space-y-2 text-sm text-slate-400">
         <p>Follow these steps to get started:</p>
-        <ol class="list-decimal list-inside space-y-1 ml-2">
+        <ol class="list-decimal list-inside space-y-3 ml-2">
           <li>
             <a
               href={GITHUB_SIGNUP_URL}
@@ -56,16 +58,36 @@
               <ExternalLink size={12} />
             </a>
           </li>
-          <li>
-            <a
-              href={CREATE_TOKEN_URL}
-              target="_blank"
-              rel="noopener noreferrer"
-              class="text-blue-400 hover:underline inline-flex items-center gap-1"
-            >
-              Generate a GitHub token
-              <ExternalLink size={12} />
-            </a>
+          <li class="space-y-2">
+            Choose a GitHub token type:
+            <div class="ml-4 space-y-2">
+              <div>
+                <a
+                  href={CREATE_TOKEN_URL}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class="text-blue-400 hover:underline inline-flex items-center gap-1"
+                >
+                  <Shield size={14} />
+                  Classic Token
+                  <ExternalLink size={12} />
+                </a>
+                <p class="text-xs text-slate-500 ml-5">Best for public repositories. Quick to set up.</p>
+              </div>
+              <div>
+                <a
+                  href={CREATE_FINE_GRAINED_TOKEN_URL}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class="text-blue-400 hover:underline inline-flex items-center gap-1"
+                >
+                  <Lock size={14} />
+                  Fine-Grained Token
+                  <ExternalLink size={12} />
+                </a>
+                <p class="text-xs text-slate-500 ml-5">Required for private repositories. More secure with granular permissions.</p>
+              </div>
+            </div>
           </li>
         </ol>
       </div>
diff --git a/src/services/GitHubService.ts b/src/services/GitHubService.ts
index 27a7e04..2a161f0 100644
--- a/src/services/GitHubService.ts
+++ b/src/services/GitHubService.ts
@@ -2,7 +2,7 @@ export const GITHUB_SIGNUP_URL = 'https://github.com/signup';
 export const CREATE_TOKEN_URL =
   'https://github.com/settings/tokens/new?scopes=repo&description=Bolt%20to%20GitHub&default_expires_at=none';
 export const CREATE_FINE_GRAINED_TOKEN_URL =
-  'https://github.com/settings/personal-access-tokens/new?scopes=repository:read,repository:write&description=Bolt%20to%20GitHub%20Fine-Grained%20Token';
+  'https://github.com/settings/personal-access-tokens/new';
 
 import { BaseGitHubService, type ProgressCallback } from './BaseGitHubService';
 import { GitHubTokenValidator } from './GitHubTokenValidator';

From 05f0780913a11ce55325c7536dcf26bdcd2e06e9 Mon Sep 17 00:00:00 2001
From: Mamerto Fabian Jr <mfabianjr@gmail.com>
Date: Wed, 22 Jan 2025 15:17:31 +0800
Subject: [PATCH 46/75] refactor: Enhance Help component with collapsible
 sections for improved navigation and updated GitHub token instructions

---
 manifest.json                  |   2 +-
 src/lib/components/Help.svelte | 233 +++++++++++++++++++++++----------
 2 files changed, 164 insertions(+), 71 deletions(-)

diff --git a/manifest.json b/manifest.json
index bd36699..57d96d2 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "Bolt to GitHub",
-  "version": "1.1.5",
+  "version": "1.2.0",
   "description": "Automatically process your Bolt project zip files and upload them to your GitHub repository.",
   "icons": {
     "16": "assets/icons/icon16.png",
diff --git a/src/lib/components/Help.svelte b/src/lib/components/Help.svelte
index 1dcae43..6a36a1e 100644
--- a/src/lib/components/Help.svelte
+++ b/src/lib/components/Help.svelte
@@ -7,92 +7,185 @@
     CardTitle,
   } from '$lib/components/ui/card';
   import { CREATE_TOKEN_URL, CREATE_FINE_GRAINED_TOKEN_URL } from '../../services/GitHubService';
+  import { ChevronDown } from 'lucide-svelte';
+
+  let openSections = {
+    gettingStarted: false,
+    tokenGuide: false,
+    privateRepo: false,
+    security: false
+  };
+
+  type SectionKey = keyof typeof openSections;
+
+  function toggleSection(section: SectionKey) {
+    openSections[section] = !openSections[section];
+  }
 </script>
 
 <Card class="border-slate-800 bg-slate-900">
   <CardHeader>
-    <CardTitle>✨ Help & Documentation</CardTitle>
+    <CardTitle class="text-xl">✨ Help & Documentation</CardTitle>
     <CardDescription class="text-slate-400">
       Learn how to use Bolt to GitHub effectively
     </CardDescription>
   </CardHeader>
-  <CardContent class="space-y-6">
-    <div class="space-y-2">
-      <h3 class="text-lg font-semibold text-slate-200">🚀 Getting Started</h3>
-      <p class="text-sm text-slate-400">
-        1. Click the extension icon in your browser toolbar
-      </p>
-      <p class="text-sm text-slate-400">
-        2. Follow the popup instructions to set up your GitHub access
-      </p>
-      <p class="text-sm text-slate-400">
-        3. Once configured, you can use Bolt to GitHub from any bolt.new page
-      </p>
+  <CardContent class="space-y-4">
+    <!-- Getting Started Section -->
+    <div class="border border-slate-800 rounded-lg overflow-hidden">
+      <button
+        class="w-full p-4 flex items-center justify-between bg-slate-800/50 hover:bg-slate-800/70 transition-colors"
+        on:click={() => toggleSection('gettingStarted')}
+      >
+        <h3 class="text-base font-semibold text-slate-200 text-left">🚀 Getting Started</h3>
+        <ChevronDown
+          size={20}
+          class={`text-slate-400 transition-transform duration-200 ${openSections.gettingStarted ? 'rotate-180' : ''}`}
+        />
+      </button>
+      {#if openSections.gettingStarted}
+        <div class="p-4 space-y-2">
+          <p class="text-sm text-slate-400">
+            1. Click the extension icon in your browser toolbar
+          </p>
+          <p class="text-sm text-slate-400">
+            2. Follow the popup instructions to set up your GitHub access
+          </p>
+          <p class="text-sm text-slate-400">
+            3. Once configured, you can use Bolt to GitHub from any bolt.new page
+          </p>
+        </div>
+      {/if}
     </div>
 
-    <div class="space-y-3">
-      <h3 class="text-lg font-semibold text-slate-200">🔑 GitHub Token Guide</h3>
-      
-      <div class="rounded-md bg-slate-800 p-4">
-        <h4 class="mb-2 font-medium text-slate-200">🎯 Classic Personal Access Token</h4>
-        <p class="mb-2 text-sm text-slate-400">
-          Best for public repositories only. Quick to set up:
-        </p>
-        <ol class="ml-4 list-decimal text-sm text-slate-400">
-          <li>Visit the <a href={CREATE_TOKEN_URL} target="_blank" class="text-blue-400 hover:underline">token creation page</a></li>
-          <li>Optionally customize the token name</li>
-          <li>Click "Generate token" at the bottom and copy the token</li>
-          <li>Paste the token into the "GitHub Token" field in the "Settings" tab</li>
-        </ol>
-      </div>
+    <!-- GitHub Token Guide Section -->
+    <div class="border border-slate-800 rounded-lg overflow-hidden">
+      <button
+        class="w-full p-4 flex items-center justify-between bg-slate-800/50 hover:bg-slate-800/70 transition-colors"
+        on:click={() => toggleSection('tokenGuide')}
+      >
+        <h3 class="text-base font-semibold text-slate-200 text-left">🔑 GitHub Token Guide</h3>
+        <ChevronDown
+          size={20}
+          class={`text-slate-400 transition-transform duration-200 ${openSections.tokenGuide ? 'rotate-180' : ''}`}
+        />
+      </button>
+      {#if openSections.tokenGuide}
+        <div class="p-4 space-y-3">
+          <div class="rounded-md bg-slate-800 p-4">
+            <h4 class="mb-2 font-medium text-slate-200">🎯 Classic Personal Access Token</h4>
+            <p class="mb-2 text-sm text-slate-400">
+              Best for public repositories only. Quick to set up:
+            </p>
+            <ol class="ml-4 list-decimal text-sm text-slate-400">
+              <li>Visit the <a href={CREATE_TOKEN_URL} target="_blank" class="text-blue-400 hover:underline">token creation page</a></li>
+              <li>Optionally customize the token name</li>
+              <li>Click "Generate token" at the bottom and copy the token</li>
+              <li>Paste the token into the "GitHub Token" field in the "Settings" tab</li>
+            </ol>
+          </div>
 
-      <div class="rounded-md bg-slate-800 p-4">
-        <h4 class="mb-2 font-medium text-slate-200">🔐 Fine-Grained Access Token</h4>
-        <p class="mb-2 text-sm text-slate-400">
-          Required for private repository access. Setup steps:
-        </p>
-        <ol class="ml-4 list-decimal text-sm text-slate-400">
-          <li>Visit the <a href={CREATE_FINE_GRAINED_TOKEN_URL} target="_blank" class="text-blue-400 hover:underline">fine-grained token page</a></li>
-          <li>Set token expiration (or choose "No expiration")</li>
-          <li>Configure repository access:
-            <ul class="ml-4 list-disc">
-              <li>Select "All repositories"</li>
-            </ul>
-          </li>
-          <li>Configure Permissions:
-            <ul class="ml-4 list-disc">
-              <li>Click the "Repository permissions"</li>
-              <li>Enable "Administration" (Read & Write)</li>
-              <li>Enable "Contents" (Read & Write)</li>
-            </ul>
-          </li>
-          <li>Generate and copy your token</li>
-          <li>Paste the token into the "GitHub Token" field in the "Settings" tab</li>
-        </ol>
-      </div>
+          <div class="rounded-md bg-slate-800 p-4">
+            <h4 class="mb-2 font-medium text-slate-200">🔐 Fine-Grained Access Token</h4>
+            <p class="mb-2 text-sm text-slate-400">
+              Required for private repository access. Setup steps:
+            </p>
+            <ol class="ml-4 list-decimal text-sm text-slate-400">
+              <li>Visit the <a href={CREATE_FINE_GRAINED_TOKEN_URL} target="_blank" class="text-blue-400 hover:underline">fine-grained token page</a></li>
+              <li>Set token expiration (or choose "No expiration")</li>
+              <li>Configure repository access:
+                <ul class="ml-4 list-disc">
+                  <li>Select "All repositories"</li>
+                </ul>
+              </li>
+              <li>Configure Permissions:
+                <ul class="ml-4 list-disc">
+                  <li>Click the "Repository permissions"</li>
+                  <li>Enable "Administration" (Read & Write)</li>
+                  <li>Enable "Contents" (Read & Write)</li>
+                </ul>
+              </li>
+              <li>Generate and copy your token</li>
+              <li>Paste the token into the "GitHub Token" field in the "Settings" tab</li>
+            </ol>
+          </div>
+        </div>
+      {/if}
     </div>
 
-    <div class="space-y-2">
-      <h3 class="text-lg font-semibold text-slate-200">🔒 Private Repository Import</h3>
-      <div class="rounded-md bg-slate-800/50 p-3 text-sm text-slate-400">
-        <p>When importing private repositories:</p>
-        <ol class="ml-4 mt-2 list-decimal">
-          <li>A temporary public clone is created</li>
-          <li>Bolt starts importing from this clone</li>
-          <li>The temporary repository is automatically deleted after 2 minutes</li>
-        </ol>
-        <div class="mt-3 p-2 bg-amber-900/30 rounded border border-amber-700/30">
-          <p class="text-amber-400 font-medium">Important:</p>
-          <p class="mt-1">After importing a private repository, immediately go to the Settings tab and select your imported repository. This ensures your Bolt changes sync with the correct repository. Skip this step only if you want to create a new repository instead.</p>
+    <!-- Private Repository Import Section -->
+    <div class="border border-slate-800 rounded-lg overflow-hidden">
+      <button
+        class="w-full p-4 flex items-center justify-between bg-slate-800/50 hover:bg-slate-800/70 transition-colors"
+        on:click={() => toggleSection('privateRepo')}
+      >
+        <h3 class="text-base font-semibold text-slate-200 text-left">🔒 Private Repository Import</h3>
+        <ChevronDown
+          size={20}
+          class={`text-slate-400 transition-transform duration-200 ${openSections.privateRepo ? 'rotate-180' : ''}`}
+        />
+      </button>
+      {#if openSections.privateRepo}
+        <div class="p-4">
+          <div class="rounded-md bg-slate-800/50 p-3 text-sm text-slate-400">
+            <p>When importing private repositories:</p>
+            <ol class="ml-4 mt-2 list-decimal">
+              <li>A temporary public clone is created</li>
+              <li>Bolt starts importing from this clone</li>
+              <li>The temporary repository is automatically deleted after 2 minutes</li>
+            </ol>
+            <div class="mt-3 p-2 bg-amber-900/30 rounded border border-amber-700/30">
+              <p class="text-amber-400 font-medium">Important:</p>
+              <p class="mt-1">After importing a private repository, immediately go to the Settings tab and select your imported repository. This ensures your Bolt changes sync with the correct repository. Skip this step only if you want to create a new repository instead.</p>
+            </div>
+            <p class="mt-2 text-amber-400">
+              Note: Fine-grained token is required for this feature
+            </p>
+          </div>
+        </div>
+      {/if}
+    </div>
+
+    <!-- Security & Privacy Section -->
+    <div class="border border-slate-800 rounded-lg overflow-hidden">
+      <button
+        class="w-full p-4 flex items-center justify-between bg-slate-800/50 hover:bg-slate-800/70 transition-colors"
+        on:click={() => toggleSection('security')}
+      >
+        <h3 class="text-base font-semibold text-slate-200 text-left">🛡️ Security & Privacy</h3>
+        <ChevronDown
+          size={20}
+          class={`text-slate-400 transition-transform duration-200 ${openSections.security ? 'rotate-180' : ''}`}
+        />
+      </button>
+      {#if openSections.security}
+        <div class="p-4">
+          <div class="rounded-md bg-slate-800/50 p-3 text-sm text-slate-400">
+            <p class="font-medium mb-2">Token Usage & Security:</p>
+            <ul class="space-y-2">
+              <li>• Your GitHub token is used exclusively for GitHub API operations</li>
+              <li>• No third-party servers are connected to this extension</li>
+              <li>• Tokens are stored securely in your browser's local storage</li>
+              <li>• All operations are performed directly between your browser and GitHub's API</li>
+            </ul>
+            <div class="mt-3 p-2 bg-amber-900/30 rounded border border-amber-700/30">
+              <p class="text-amber-400 font-medium">Security Notice:</p>
+              <p class="mt-1">Your GitHub token grants access to your repositories. It is your responsibility to:</p>
+              <ul class="mt-2 ml-4 space-y-1 text-amber-400/90">
+                <li>• Keep your token secure and private</li>
+                <li>• Never share your token with others</li>
+                <li>• Regularly rotate your tokens for enhanced security</li>
+                <li>• Revoke tokens immediately if compromised</li>
+              </ul>
+            </div>
+          </div>
         </div>
-        <p class="mt-2 text-amber-400">
-          Note: Fine-grained token is required for this feature
-        </p>
-      </div>
+      {/if}
     </div>
 
-    <div class="space-y-2">
-      <h3 class="text-lg font-semibold text-slate-200">💡 Need More Help?</h3>
+    <!-- Need More Help Section (Always visible) -->
+    <div class="space-y-2 mt-4 pt-4 border-t border-slate-800">
+      <h3 class="text-base font-semibold text-slate-200">💡 Need More Help?</h3>
       <ul class="space-y-2 text-sm text-slate-400">
         <li>• Visit our <a href="https://github.com/mamertofabian/bolt-to-github" target="_blank" class="text-blue-400 hover:underline">GitHub repository</a> for detailed documentation, issues, and updates</li>
         <li>• Join our <a href="https://aidrivencoder.com/discord" target="_blank" class="text-blue-400 hover:underline">Discord community</a> for support and discussions</li>

From 718fe216353061aaf35f5fb3d0840bda8cdaec9b Mon Sep 17 00:00:00 2001
From: "Mamerto Fabian Jr (aider)" <mfabianjr@gmail.com>
Date: Wed, 22 Jan 2025 15:27:44 +0800
Subject: [PATCH 47/75] feat: Enhance StatusAlert with detailed GitHub
 repository information

---
 src/lib/components/StatusAlert.svelte | 38 ++++++++++++++++++++++-----
 1 file changed, 31 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/StatusAlert.svelte b/src/lib/components/StatusAlert.svelte
index 084fae3..cc8d230 100644
--- a/src/lib/components/StatusAlert.svelte
+++ b/src/lib/components/StatusAlert.svelte
@@ -8,6 +8,26 @@
   export let gitHubUsername: string;
   export let repoName: string;
   export let branch: string;
+  export let githubService: GitHubService;
+
+  let repoExists: boolean = false;
+  let isPrivate: boolean = false;
+  let commitCount: number = 0;
+  let latestCommit: string = '';
+  
+  onMount(async () => {
+    try {
+      repoExists = await githubService.repoExists(gitHubUsername, repoName);
+      if (repoExists) {
+        isPrivate = (await githubService.listRepos()).find(r => r.name === repoName)?.private ?? false;
+        commitCount = await githubService.getCommitCount(gitHubUsername, repoName, branch);
+        const commits = await githubService.request('GET', `/repos/${gitHubUsername}/${repoName}/commits?per_page=1`);
+        latestCommit = commits[0]?.commit?.committer?.date || '';
+      }
+    } catch (error) {
+      console.log('Error fetching repo details:', error);
+    }
+  });
 
   const dispatch = createEventDispatcher<{
     switchTab: string;
@@ -59,13 +79,17 @@
         role="button"
         tabindex={0}
       >
-        <div class="col-span-2 text-sm text-slate-400 mb-1">Currently loaded project:</div>
-        <span>Project ID:</span>
-        <span class="font-mono">{projectId}</span>
-        <span>Repository:</span>
-        <span class="font-mono">{repoName}</span>
-        <span>Branch:</span>
-        <span class="font-mono">{branch}</span>
+        <div class="col-span-2 text-sm text-slate-400 mb-1">Project Configuration:</div>
+        <span class="text-slate-400">Status:</span>
+        <span class="font-mono text-green-400">{repoExists ? 'Exists' : 'Will be created'}</span>
+        <span class="text-slate-400">Visibility:</span>
+        <span class="font-mono">{repoExists ? (isPrivate ? 'Private' : 'Public') : 'N/A'}</span>
+        <span class="text-slate-400">Commits:</span>
+        <span class="font-mono">{repoExists ? commitCount : '0'}</span>
+        <span class="text-slate-400">Latest Commit:</span>
+        <span class="font-mono">
+          {latestCommit ? new Date(latestCommit).toLocaleDateString() : 'N/A'}
+        </span>
       </div>
       <button
         class="col-span-2 text-sm mt-2 border border-slate-700 rounded px-2 py-1 text-slate-400 hover:bg-slate-800 hover:text-slate-300 transition-colors"

From 1edeba57a5a16a2731db2287e840e5afc0398da1 Mon Sep 17 00:00:00 2001
From: Mamerto Fabian Jr <mfabianjr@gmail.com>
Date: Wed, 22 Jan 2025 16:03:27 +0800
Subject: [PATCH 48/75] feat: Add ProjectStatus component to display GitHub
 repository details and integrate with StatusAlert

---
 src/background/TempRepoManager.ts             |   2 +-
 src/lib/components/Help.svelte                |  70 +++++++++---
 src/lib/components/ProjectStatus.svelte       |  82 ++++++++++++++
 src/lib/components/ProjectsList.svelte        |   3 +-
 src/lib/components/StatusAlert.svelte         | 101 +++---------------
 src/lib/components/github/NewUserGuide.svelte |  14 ++-
 src/popup/App.svelte                          |  21 ++--
 src/services/GitHubService.ts                 |   2 +-
 8 files changed, 178 insertions(+), 117 deletions(-)
 create mode 100644 src/lib/components/ProjectStatus.svelte

diff --git a/src/background/TempRepoManager.ts b/src/background/TempRepoManager.ts
index 69a787f..95a5841 100644
--- a/src/background/TempRepoManager.ts
+++ b/src/background/TempRepoManager.ts
@@ -10,7 +10,7 @@ interface TempRepoMetadata {
 
 export class BackgroundTempRepoManager {
   private static STORAGE_KEY = 'bolt_temp_repos';
-  private static CLEANUP_INTERVAL = 30 * 1000;  // 30 seconds
+  private static CLEANUP_INTERVAL = 30 * 1000; // 30 seconds
   private static MAX_AGE = 2 * 60 * 1000; // 2 minutes
 
   constructor(
diff --git a/src/lib/components/Help.svelte b/src/lib/components/Help.svelte
index 6a36a1e..27ea70d 100644
--- a/src/lib/components/Help.svelte
+++ b/src/lib/components/Help.svelte
@@ -13,7 +13,7 @@
     gettingStarted: false,
     tokenGuide: false,
     privateRepo: false,
-    security: false
+    security: false,
   };
 
   type SectionKey = keyof typeof openSections;
@@ -45,9 +45,7 @@
       </button>
       {#if openSections.gettingStarted}
         <div class="p-4 space-y-2">
-          <p class="text-sm text-slate-400">
-            1. Click the extension icon in your browser toolbar
-          </p>
+          <p class="text-sm text-slate-400">1. Click the extension icon in your browser toolbar</p>
           <p class="text-sm text-slate-400">
             2. Follow the popup instructions to set up your GitHub access
           </p>
@@ -78,7 +76,13 @@
               Best for public repositories only. Quick to set up:
             </p>
             <ol class="ml-4 list-decimal text-sm text-slate-400">
-              <li>Visit the <a href={CREATE_TOKEN_URL} target="_blank" class="text-blue-400 hover:underline">token creation page</a></li>
+              <li>
+                Visit the <a
+                  href={CREATE_TOKEN_URL}
+                  target="_blank"
+                  class="text-blue-400 hover:underline">token creation page</a
+                >
+              </li>
               <li>Optionally customize the token name</li>
               <li>Click "Generate token" at the bottom and copy the token</li>
               <li>Paste the token into the "GitHub Token" field in the "Settings" tab</li>
@@ -91,14 +95,22 @@
               Required for private repository access. Setup steps:
             </p>
             <ol class="ml-4 list-decimal text-sm text-slate-400">
-              <li>Visit the <a href={CREATE_FINE_GRAINED_TOKEN_URL} target="_blank" class="text-blue-400 hover:underline">fine-grained token page</a></li>
+              <li>
+                Visit the <a
+                  href={CREATE_FINE_GRAINED_TOKEN_URL}
+                  target="_blank"
+                  class="text-blue-400 hover:underline">fine-grained token page</a
+                >
+              </li>
               <li>Set token expiration (or choose "No expiration")</li>
-              <li>Configure repository access:
+              <li>
+                Configure repository access:
                 <ul class="ml-4 list-disc">
                   <li>Select "All repositories"</li>
                 </ul>
               </li>
-              <li>Configure Permissions:
+              <li>
+                Configure Permissions:
                 <ul class="ml-4 list-disc">
                   <li>Click the "Repository permissions"</li>
                   <li>Enable "Administration" (Read & Write)</li>
@@ -119,7 +131,9 @@
         class="w-full p-4 flex items-center justify-between bg-slate-800/50 hover:bg-slate-800/70 transition-colors"
         on:click={() => toggleSection('privateRepo')}
       >
-        <h3 class="text-base font-semibold text-slate-200 text-left">🔒 Private Repository Import</h3>
+        <h3 class="text-base font-semibold text-slate-200 text-left">
+          🔒 Private Repository Import
+        </h3>
         <ChevronDown
           size={20}
           class={`text-slate-400 transition-transform duration-200 ${openSections.privateRepo ? 'rotate-180' : ''}`}
@@ -136,11 +150,13 @@
             </ol>
             <div class="mt-3 p-2 bg-amber-900/30 rounded border border-amber-700/30">
               <p class="text-amber-400 font-medium">Important:</p>
-              <p class="mt-1">After importing a private repository, immediately go to the Settings tab and select your imported repository. This ensures your Bolt changes sync with the correct repository. Skip this step only if you want to create a new repository instead.</p>
+              <p class="mt-1">
+                After importing a private repository, immediately go to the Settings tab and select
+                your imported repository. This ensures your Bolt changes sync with the correct
+                repository. Skip this step only if you want to create a new repository instead.
+              </p>
             </div>
-            <p class="mt-2 text-amber-400">
-              Note: Fine-grained token is required for this feature
-            </p>
+            <p class="mt-2 text-amber-400">Note: Fine-grained token is required for this feature</p>
           </div>
         </div>
       {/if}
@@ -170,7 +186,9 @@
             </ul>
             <div class="mt-3 p-2 bg-amber-900/30 rounded border border-amber-700/30">
               <p class="text-amber-400 font-medium">Security Notice:</p>
-              <p class="mt-1">Your GitHub token grants access to your repositories. It is your responsibility to:</p>
+              <p class="mt-1">
+                Your GitHub token grants access to your repositories. It is your responsibility to:
+              </p>
               <ul class="mt-2 ml-4 space-y-1 text-amber-400/90">
                 <li>• Keep your token secure and private</li>
                 <li>• Never share your token with others</li>
@@ -187,9 +205,27 @@
     <div class="space-y-2 mt-4 pt-4 border-t border-slate-800">
       <h3 class="text-base font-semibold text-slate-200">💡 Need More Help?</h3>
       <ul class="space-y-2 text-sm text-slate-400">
-        <li>• Visit our <a href="https://github.com/mamertofabian/bolt-to-github" target="_blank" class="text-blue-400 hover:underline">GitHub repository</a> for detailed documentation, issues, and updates</li>
-        <li>• Join our <a href="https://aidrivencoder.com/discord" target="_blank" class="text-blue-400 hover:underline">Discord community</a> for support and discussions</li>
-        <li>• Watch our <a href="https://aidrivencoder.com/youtube" target="_blank" class="text-blue-400 hover:underline">AI development tutorials</a> on YouTube for expert guidance and tips! 🎥</li>
+        <li>
+          • Visit our <a
+            href="https://github.com/mamertofabian/bolt-to-github"
+            target="_blank"
+            class="text-blue-400 hover:underline">GitHub repository</a
+          > for detailed documentation, issues, and updates
+        </li>
+        <li>
+          • Join our <a
+            href="https://aidrivencoder.com/discord"
+            target="_blank"
+            class="text-blue-400 hover:underline">Discord community</a
+          > for support and discussions
+        </li>
+        <li>
+          • Watch our <a
+            href="https://aidrivencoder.com/youtube"
+            target="_blank"
+            class="text-blue-400 hover:underline">AI development tutorials</a
+          > on YouTube for expert guidance and tips! 🎥
+        </li>
       </ul>
     </div>
   </CardContent>
diff --git a/src/lib/components/ProjectStatus.svelte b/src/lib/components/ProjectStatus.svelte
new file mode 100644
index 0000000..0ce0162
--- /dev/null
+++ b/src/lib/components/ProjectStatus.svelte
@@ -0,0 +1,82 @@
+<script lang="ts">
+  import { createEventDispatcher, onMount } from 'svelte';
+  import { Alert, AlertTitle, AlertDescription } from './ui/alert';
+  import { GitHubService } from '../../services/GitHubService';
+
+  export let projectId: string;
+  export let gitHubUsername: string;
+  export let repoName: string;
+  export let branch: string;
+  export let token: string;
+
+  let repoExists: boolean = false;
+  let isPrivate: boolean = false;
+  let commitCount: number = 0;
+  let latestCommit: string = '';
+
+  onMount(async () => {
+    try {
+      const githubService = new GitHubService(token);
+      repoExists = await githubService.repoExists(gitHubUsername, repoName);
+      if (repoExists) {
+        isPrivate =
+          (await githubService.listRepos()).find((r) => r.name === repoName)?.private ?? false;
+        commitCount = await githubService.getCommitCount(gitHubUsername, repoName, branch);
+        const commits = await githubService.request(
+          'GET',
+          `/repos/${gitHubUsername}/${repoName}/commits?per_page=1`
+        );
+        latestCommit = commits[0]?.commit?.committer?.date || '';
+      }
+    } catch (error) {
+      console.log('Error fetching repo details:', error);
+    }
+  });
+
+  const dispatch = createEventDispatcher<{
+    switchTab: string;
+  }>();
+
+  function openGitHub(event: MouseEvent | KeyboardEvent) {
+    event.stopPropagation();
+    chrome.tabs.create({ url: `https://github.com/${gitHubUsername}/${repoName}/tree/${branch}` });
+  }
+</script>
+
+<Alert class="border-green-900 bg-green-950">
+  <AlertTitle>Ready to Use</AlertTitle>
+  <AlertDescription class="text-slate-300">
+    Your GitHub configuration is set up and ready to go!
+    <div
+      class="mt-2 grid grid-cols-[auto_1fr] gap-x-2 bg-slate-900/50 p-2 rounded-sm cursor-pointer hover:bg-slate-900/70 transition-colors group"
+      on:click={() => dispatch('switchTab', 'settings')}
+      on:keydown={(e) => e.key === 'Enter' && dispatch('switchTab', 'settings')}
+      role="button"
+      tabindex={0}
+    >
+      <div class="col-span-2 text-sm text-slate-400 mb-1">Currently loaded project:</div>
+      <span class="text-slate-400">Project ID:</span>
+      <span class="font-mono">{projectId}</span>
+      <span class="text-slate-400">Repository:</span>
+      <span class="font-mono">{repoName}</span>
+      <span class="text-slate-400">Branch:</span>
+      <span class="font-mono">{branch}</span>
+      <span class="text-slate-400">Status:</span>
+      <span class="font-mono text-green-400">{repoExists ? 'Exists' : 'Will be created'}</span>
+      <span class="text-slate-400">Visibility:</span>
+      <span class="font-mono">{repoExists ? (isPrivate ? 'Private' : 'Public') : 'N/A'}</span>
+      <span class="text-slate-400">Commits:</span>
+      <span class="font-mono">{repoExists ? commitCount : '0'}</span>
+      <span class="text-slate-400">Latest Commit:</span>
+      <span class="font-mono">
+        {latestCommit ? new Date(latestCommit).toLocaleDateString() : 'N/A'}
+      </span>
+    </div>
+    <button
+      class="col-span-2 text-sm mt-2 border border-slate-700 rounded px-2 py-1 text-slate-400 hover:bg-slate-800 hover:text-slate-300 transition-colors"
+      on:click|stopPropagation={openGitHub}
+    >
+      Open GitHub repository
+    </button>
+  </AlertDescription>
+</Alert>
diff --git a/src/lib/components/ProjectsList.svelte b/src/lib/components/ProjectsList.svelte
index ab8f7b9..d7939df 100644
--- a/src/lib/components/ProjectsList.svelte
+++ b/src/lib/components/ProjectsList.svelte
@@ -117,7 +117,7 @@
       console.log('🔄 Sending message to import private repo:', repoName);
       // Send message directly to background service
       const port = chrome.runtime.connect({ name: 'popup' });
-      
+
       // Set up listener first
       port.onMessage.addListener((message) => {
         if (message.type === 'UPLOAD_STATUS') {
@@ -133,7 +133,6 @@
 
       // Close the popup to prevent UI overlap
       window.close();
-
     } catch (error) {
       console.error('❌ Failed to import private repository:', error);
       alert('Failed to import private repository. Please try again later.');
diff --git a/src/lib/components/StatusAlert.svelte b/src/lib/components/StatusAlert.svelte
index cc8d230..c5cdf75 100644
--- a/src/lib/components/StatusAlert.svelte
+++ b/src/lib/components/StatusAlert.svelte
@@ -3,100 +3,31 @@
   import { Alert, AlertDescription, AlertTitle } from '$lib/components/ui/alert';
   import { createEventDispatcher } from 'svelte';
 
-  export let isSettingsValid: boolean;
-  export let projectId: string | null;
-  export let gitHubUsername: string;
-  export let repoName: string;
-  export let branch: string;
-  export let githubService: GitHubService;
-
-  let repoExists: boolean = false;
-  let isPrivate: boolean = false;
-  let commitCount: number = 0;
-  let latestCommit: string = '';
-  
-  onMount(async () => {
-    try {
-      repoExists = await githubService.repoExists(gitHubUsername, repoName);
-      if (repoExists) {
-        isPrivate = (await githubService.listRepos()).find(r => r.name === repoName)?.private ?? false;
-        commitCount = await githubService.getCommitCount(gitHubUsername, repoName, branch);
-        const commits = await githubService.request('GET', `/repos/${gitHubUsername}/${repoName}/commits?per_page=1`);
-        latestCommit = commits[0]?.commit?.committer?.date || '';
-      }
-    } catch (error) {
-      console.log('Error fetching repo details:', error);
-    }
-  });
-
   const dispatch = createEventDispatcher<{
     switchTab: string;
   }>();
 
   function handleConfigClick(event: MouseEvent | KeyboardEvent) {
     event.stopPropagation();
-    if (!isSettingsValid) {
-      dispatch('switchTab', 'settings');
-    }
-  }
-
-  function openGitHub(event: MouseEvent | KeyboardEvent) {
-    event.stopPropagation();
-    chrome.tabs.create({ url: `https://github.com/${gitHubUsername}/${repoName}/tree/${branch}` });
+    dispatch('switchTab', 'settings');
   }
-
-  $: console.log(`📄 StatusAlert: ${projectId}`);
 </script>
 
-{#if !isSettingsValid || !projectId}
-  <div
-    class="cursor-pointer"
-    on:click|stopPropagation={handleConfigClick}
-    on:keydown|stopPropagation={(e) => e.key === 'Enter' && handleConfigClick(e)}
-    role="button"
-    tabindex={0}
+<div
+  class="cursor-pointer"
+  on:click|stopPropagation={handleConfigClick}
+  on:keydown|stopPropagation={(e) => e.key === 'Enter' && handleConfigClick(e)}
+  role="button"
+  tabindex={0}
+>
+  <Alert
+    variant="destructive"
+    class="mb-4 border-red-900 bg-red-900/20 hover:bg-red-900/30 transition-colors"
   >
-    <Alert
-      variant="destructive"
-      class="mb-4 border-red-900 bg-red-900/20 hover:bg-red-900/30 transition-colors"
-    >
-      <AlertTriangle class="h-4 w-4 text-red-400" />
-      <AlertTitle class="text-red-200">Missing Configuration</AlertTitle>
-      <AlertDescription class="text-red-100">
-        Click here to configure your GitHub settings
-      </AlertDescription>
-    </Alert>
-  </div>
-{:else}
-  <Alert class="border-green-900 bg-green-950">
-    <AlertTitle>Ready to Use</AlertTitle>
-    <AlertDescription class="text-slate-300">
-      Your GitHub configuration is set up and ready to go!
-      <div
-        class="mt-2 grid grid-cols-[auto_1fr] gap-x-2 bg-slate-900/50 p-2 rounded-sm cursor-pointer hover:bg-slate-900/70 transition-colors group"
-        on:click={() => dispatch('switchTab', 'settings')}
-        on:keydown={(e) => e.key === 'Enter' && dispatch('switchTab', 'settings')}
-        role="button"
-        tabindex={0}
-      >
-        <div class="col-span-2 text-sm text-slate-400 mb-1">Project Configuration:</div>
-        <span class="text-slate-400">Status:</span>
-        <span class="font-mono text-green-400">{repoExists ? 'Exists' : 'Will be created'}</span>
-        <span class="text-slate-400">Visibility:</span>
-        <span class="font-mono">{repoExists ? (isPrivate ? 'Private' : 'Public') : 'N/A'}</span>
-        <span class="text-slate-400">Commits:</span>
-        <span class="font-mono">{repoExists ? commitCount : '0'}</span>
-        <span class="text-slate-400">Latest Commit:</span>
-        <span class="font-mono">
-          {latestCommit ? new Date(latestCommit).toLocaleDateString() : 'N/A'}
-        </span>
-      </div>
-      <button
-        class="col-span-2 text-sm mt-2 border border-slate-700 rounded px-2 py-1 text-slate-400 hover:bg-slate-800 hover:text-slate-300 transition-colors"
-        on:click|stopPropagation={openGitHub}
-      >
-        Open GitHub repository
-      </button>
+    <AlertTriangle class="h-4 w-4 text-red-400" />
+    <AlertTitle class="text-red-200">Missing Configuration</AlertTitle>
+    <AlertDescription class="text-red-100">
+      Click here to configure your GitHub settings
     </AlertDescription>
   </Alert>
-{/if}
+</div>
diff --git a/src/lib/components/github/NewUserGuide.svelte b/src/lib/components/github/NewUserGuide.svelte
index 67b53df..510e1bb 100644
--- a/src/lib/components/github/NewUserGuide.svelte
+++ b/src/lib/components/github/NewUserGuide.svelte
@@ -10,7 +10,11 @@
     Shield,
     Lock,
   } from 'lucide-svelte';
-  import { GITHUB_SIGNUP_URL, CREATE_TOKEN_URL, CREATE_FINE_GRAINED_TOKEN_URL } from '../../../services/GitHubService';
+  import {
+    GITHUB_SIGNUP_URL,
+    CREATE_TOKEN_URL,
+    CREATE_FINE_GRAINED_TOKEN_URL,
+  } from '../../../services/GitHubService';
   import { onMount } from 'svelte';
 
   let showNewUserGuide = true;
@@ -72,7 +76,9 @@
                   Classic Token
                   <ExternalLink size={12} />
                 </a>
-                <p class="text-xs text-slate-500 ml-5">Best for public repositories. Quick to set up.</p>
+                <p class="text-xs text-slate-500 ml-5">
+                  Best for public repositories. Quick to set up.
+                </p>
               </div>
               <div>
                 <a
@@ -85,7 +91,9 @@
                   Fine-Grained Token
                   <ExternalLink size={12} />
                 </a>
-                <p class="text-xs text-slate-500 ml-5">Required for private repositories. More secure with granular permissions.</p>
+                <p class="text-xs text-slate-500 ml-5">
+                  Required for private repositories. More secure with granular permissions.
+                </p>
               </div>
             </div>
           </li>
diff --git a/src/popup/App.svelte b/src/popup/App.svelte
index e93457d..cac60b0 100644
--- a/src/popup/App.svelte
+++ b/src/popup/App.svelte
@@ -19,6 +19,7 @@
   import { GitHubService } from '../services/GitHubService';
   import { Button } from '$lib/components/ui/button';
   import Help from '$lib/components/Help.svelte';
+  import ProjectStatus from '$lib/components/ProjectStatus.svelte';
 
   let githubToken: string = '';
   let repoOwner = '';
@@ -208,14 +209,18 @@
               View All Projects
             </button>
 
-            <StatusAlert
-              {isSettingsValid}
-              projectId={parsedProjectId}
-              gitHubUsername={repoOwner}
-              {repoName}
-              {branch}
-              on:switchTab={handleSwitchTab}
-            />
+            {#if !isSettingsValid || !parsedProjectId}
+              <StatusAlert on:switchTab={handleSwitchTab} />
+            {:else}
+              <ProjectStatus
+                projectId={parsedProjectId}
+                gitHubUsername={repoOwner}
+                {repoName}
+                {branch}
+                token={githubToken}
+                on:switchTab={handleSwitchTab}
+              />
+            {/if}
 
             <div class="mt-6 space-y-4">
               <SocialLinks {GITHUB_LINK} {YOUTUBE_LINK} {COFFEE_LINK} />
diff --git a/src/services/GitHubService.ts b/src/services/GitHubService.ts
index 2a161f0..68f2d44 100644
--- a/src/services/GitHubService.ts
+++ b/src/services/GitHubService.ts
@@ -273,7 +273,7 @@ This repository was automatically initialized by the Bolt to GitHub extension.
       });
 
       if (onProgress) {
-        const progress = (i + 1) / totalFiles * 100;
+        const progress = ((i + 1) / totalFiles) * 100;
         onProgress(progress);
       }
     }

From 3c29096105788fc59c95c10d155acdc20a3671bd Mon Sep 17 00:00:00 2001
From: "Mamerto Fabian Jr (aider)" <mfabianjr@gmail.com>
Date: Wed, 22 Jan 2025 16:09:59 +0800
Subject: [PATCH 49/75] feat: Add loading states and enhance commit information
 display

---
 src/lib/components/ProjectStatus.svelte | 83 +++++++++++++++++++++----
 1 file changed, 72 insertions(+), 11 deletions(-)

diff --git a/src/lib/components/ProjectStatus.svelte b/src/lib/components/ProjectStatus.svelte
index 0ce0162..c18cac7 100644
--- a/src/lib/components/ProjectStatus.svelte
+++ b/src/lib/components/ProjectStatus.svelte
@@ -9,27 +9,61 @@
   export let branch: string;
   export let token: string;
 
-  let repoExists: boolean = false;
-  let isPrivate: boolean = false;
-  let commitCount: number = 0;
-  let latestCommit: string = '';
+  let isLoading = {
+    repoStatus: true,
+    visibility: true,
+    commits: true,
+    latestCommit: true
+  };
+
+  let repoExists: boolean | null = null;
+  let isPrivate: boolean | null = null;
+  let commitCount: number | null = null;
+  let latestCommit: {
+    date: string;
+    message: string;
+  } | null = null;
 
   onMount(async () => {
     try {
       const githubService = new GitHubService(token);
+      
+      // Check repo existence
       repoExists = await githubService.repoExists(gitHubUsername, repoName);
+      isLoading.repoStatus = false;
+
       if (repoExists) {
-        isPrivate =
-          (await githubService.listRepos()).find((r) => r.name === repoName)?.private ?? false;
+        // Get visibility
+        const repos = await githubService.listRepos();
+        isPrivate = repos.find((r) => r.name === repoName)?.private ?? null;
+        isLoading.visibility = false;
+
+        // Get commit count
         commitCount = await githubService.getCommitCount(gitHubUsername, repoName, branch);
+        isLoading.commits = false;
+
+        // Get latest commit
         const commits = await githubService.request(
           'GET',
           `/repos/${gitHubUsername}/${repoName}/commits?per_page=1`
         );
-        latestCommit = commits[0]?.commit?.committer?.date || '';
+        if (commits[0]?.commit) {
+          latestCommit = {
+            date: commits[0].commit.committer.date,
+            message: commits[0].commit.message.split('\n')[0].slice(0, 50) + 
+                    (commits[0].commit.message.length > 50 ? '...' : '')
+          };
+        }
+        isLoading.latestCommit = false;
+      } else {
+        isLoading.visibility = false;
+        isLoading.commits = false;
+        isLoading.latestCommit = false;
       }
     } catch (error) {
       console.log('Error fetching repo details:', error);
+      // Reset loading states on error
+      Object.keys(isLoading).forEach(key => isLoading[key as keyof typeof isLoading] = false);
     }
   });
 
@@ -62,14 +96,41 @@
       <span class="text-slate-400">Branch:</span>
       <span class="font-mono">{branch}</span>
       <span class="text-slate-400">Status:</span>
-      <span class="font-mono text-green-400">{repoExists ? 'Exists' : 'Will be created'}</span>
+      <span class="font-mono">
+        {#if isLoading.repoStatus}
+          <span class="text-slate-500">Loading...</span>
+        {:else}
+          <span class="text-green-400">{repoExists ? 'Exists' : 'Will be created'}</span>
+        {/if}
+      </span>
       <span class="text-slate-400">Visibility:</span>
-      <span class="font-mono">{repoExists ? (isPrivate ? 'Private' : 'Public') : 'N/A'}</span>
+      <span class="font-mono">
+        {#if isLoading.visibility}
+          <span class="text-slate-500">Loading...</span>
+        {:else}
+          {repoExists ? (isPrivate ? 'Private' : 'Public') : 'N/A'}
+        {/if}
+      </span>
       <span class="text-slate-400">Commits:</span>
-      <span class="font-mono">{repoExists ? commitCount : '0'}</span>
+      <span class="font-mono">
+        {#if isLoading.commits}
+          <span class="text-slate-500">Loading...</span>
+        {:else}
+          {repoExists ? commitCount : 'N/A'}
+        {/if}
+      </span>
       <span class="text-slate-400">Latest Commit:</span>
       <span class="font-mono">
-        {latestCommit ? new Date(latestCommit).toLocaleDateString() : 'N/A'}
+        {#if isLoading.latestCommit}
+          <span class="text-slate-500">Loading...</span>
+        {:else}
+          {#if latestCommit}
+            <div>{new Date(latestCommit.date).toLocaleString()}</div>
+            <div class="text-xs text-slate-400 mt-1">{latestCommit.message}</div>
+          {:else}
+            N/A
+          {/if}
+        {/if}
       </span>
     </div>
     <button

From b65b89442a771ea085a85e4497c18990a34ede9c Mon Sep 17 00:00:00 2001
From: Mamerto Fabian Jr <mfabianjr@gmail.com>
Date: Wed, 22 Jan 2025 16:18:46 +0800
Subject: [PATCH 50/75] feat: Disable "Open GitHub repository" button based on
 loading state and repository existence

---
 src/lib/components/ProjectStatus.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/lib/components/ProjectStatus.svelte b/src/lib/components/ProjectStatus.svelte
index c18cac7..ca7462d 100644
--- a/src/lib/components/ProjectStatus.svelte
+++ b/src/lib/components/ProjectStatus.svelte
@@ -136,6 +136,7 @@
     <button
       class="col-span-2 text-sm mt-2 border border-slate-700 rounded px-2 py-1 text-slate-400 hover:bg-slate-800 hover:text-slate-300 transition-colors"
       on:click|stopPropagation={openGitHub}
+      disabled={isLoading.repoStatus || !repoExists}
     >
       Open GitHub repository
     </button>

From f54fdb8cdd597daabc0aa94189914043783a487f Mon Sep 17 00:00:00 2001
From: Mamerto Fabian Jr <mfabianjr@gmail.com>
Date: Wed, 22 Jan 2025 16:44:18 +0800
Subject: [PATCH 51/75] feat: Update GitHubSettings and ProjectStatus
 components to handle repoName initialization and improve loading states

---
 src/lib/components/GitHubSettings.svelte |  6 +++++-
 src/lib/components/ProjectStatus.svelte  | 27 +++++++++++++-----------
 2 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/src/lib/components/GitHubSettings.svelte b/src/lib/components/GitHubSettings.svelte
index 94cf54c..ddc93b1 100644
--- a/src/lib/components/GitHubSettings.svelte
+++ b/src/lib/components/GitHubSettings.svelte
@@ -10,7 +10,7 @@
   export let isOnboarding: boolean = false;
   export let githubToken: string;
   export let repoOwner: string;
-  export let repoName: string = '';
+  export let repoName: string;
   export let branch: string = 'main';
   export let status: string;
   export let onSave: () => void;
@@ -62,6 +62,10 @@
     repoExists = repositories.some((repo) => repo.name.toLowerCase() === repoName.toLowerCase());
   }
 
+  $: if (projectId && !repoName) {
+    repoName = projectId;
+  }
+
   async function loadRepositories() {
     if (!githubToken || !repoOwner || !isTokenValid) return;
 
diff --git a/src/lib/components/ProjectStatus.svelte b/src/lib/components/ProjectStatus.svelte
index ca7462d..b9d176b 100644
--- a/src/lib/components/ProjectStatus.svelte
+++ b/src/lib/components/ProjectStatus.svelte
@@ -13,7 +13,7 @@
     repoStatus: true,
     visibility: true,
     commits: true,
-    latestCommit: true
+    latestCommit: true,
   };
 
   let repoExists: boolean | null = null;
@@ -27,7 +27,7 @@
   onMount(async () => {
     try {
       const githubService = new GitHubService(token);
-      
+
       // Check repo existence
       repoExists = await githubService.repoExists(gitHubUsername, repoName);
       isLoading.repoStatus = false;
@@ -50,8 +50,9 @@
         if (commits[0]?.commit) {
           latestCommit = {
             date: commits[0].commit.committer.date,
-            message: commits[0].commit.message.split('\n')[0].slice(0, 50) + 
-                    (commits[0].commit.message.length > 50 ? '...' : '')
+            message:
+              commits[0].commit.message.split('\n')[0].slice(0, 50) +
+              (commits[0].commit.message.length > 50 ? '...' : ''),
           };
         }
         isLoading.latestCommit = false;
@@ -63,7 +64,7 @@
     } catch (error) {
       console.log('Error fetching repo details:', error);
       // Reset loading states on error
-      Object.keys(isLoading).forEach(key => isLoading[key as keyof typeof isLoading] = false);
+      Object.keys(isLoading).forEach((key) => (isLoading[key as keyof typeof isLoading] = false));
     }
   });
 
@@ -123,13 +124,11 @@
       <span class="font-mono">
         {#if isLoading.latestCommit}
           <span class="text-slate-500">Loading...</span>
+        {:else if latestCommit}
+          <div>{new Date(latestCommit.date).toLocaleString()}</div>
+          <div class="text-xs text-slate-400 mt-1">{latestCommit.message}</div>
         {:else}
-          {#if latestCommit}
-            <div>{new Date(latestCommit.date).toLocaleString()}</div>
-            <div class="text-xs text-slate-400 mt-1">{latestCommit.message}</div>
-          {:else}
-            N/A
-          {/if}
+          N/A
         {/if}
       </span>
     </div>
@@ -138,7 +137,11 @@
       on:click|stopPropagation={openGitHub}
       disabled={isLoading.repoStatus || !repoExists}
     >
-      Open GitHub repository
+      {isLoading.repoStatus
+        ? 'Loading...'
+        : repoExists
+          ? 'Open GitHub repository'
+          : 'Repo to be created'}
     </button>
   </AlertDescription>
 </Alert>

From f6f2d685f50779eb30acdc1cf18c0a23d5136afb Mon Sep 17 00:00:00 2001
From: Mamerto Fabian Jr <mfabianjr@gmail.com>
Date: Wed, 22 Jan 2025 16:55:29 +0800
Subject: [PATCH 52/75] feat: Update token creation URL to include delete_repo
 scope for GitHub integration

---
 src/services/GitHubService.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/services/GitHubService.ts b/src/services/GitHubService.ts
index 68f2d44..f062d29 100644
--- a/src/services/GitHubService.ts
+++ b/src/services/GitHubService.ts
@@ -1,6 +1,6 @@
 export const GITHUB_SIGNUP_URL = 'https://github.com/signup';
 export const CREATE_TOKEN_URL =
-  'https://github.com/settings/tokens/new?scopes=repo&description=Bolt%20to%20GitHub&default_expires_at=none';
+  'https://github.com/settings/tokens/new?scopes=delete_repo,repo&description=Bolt%20to%20GitHub&default_expires_at=none';
 export const CREATE_FINE_GRAINED_TOKEN_URL =
   'https://github.com/settings/personal-access-tokens/new';
 

From d9103c0dd612fe329a19945f50b5cfac115a196c Mon Sep 17 00:00:00 2001
From: Mamerto Fabian Jr <mfabianjr@gmail.com>
Date: Wed, 22 Jan 2025 17:05:13 +0800
Subject: [PATCH 53/75] feat: Update GitHub token descriptions and improve
 guidance for both classic and fine-grained tokens

---
 src/lib/components/GitHubSettings.svelte      | 17 +++--------------
 src/lib/components/Help.svelte                | 10 ++++++----
 src/lib/components/github/NewUserGuide.svelte |  4 ++--
 3 files changed, 11 insertions(+), 20 deletions(-)

diff --git a/src/lib/components/GitHubSettings.svelte b/src/lib/components/GitHubSettings.svelte
index ddc93b1..4a56788 100644
--- a/src/lib/components/GitHubSettings.svelte
+++ b/src/lib/components/GitHubSettings.svelte
@@ -324,21 +324,10 @@
         <p class="text-sm text-red-400 mt-1">{validationError}</p>
       {:else if tokenType}
         <div class="space-y-2">
-          <p class="text-sm {tokenType === 'classic' ? 'text-orange-400' : 'text-emerald-400'}">
-            {tokenType === 'classic' ? '⚠️ Classic' : '✨ Fine-grained'} token detected
+          <p class="text-sm text-emerald-400">
+            {tokenType === 'classic' ? '🔑 Classic' : '✨ Fine-grained'} token detected
           </p>
-          {#if tokenType === 'classic'}
-            <p>
-              <a
-                href={CREATE_FINE_GRAINED_TOKEN_URL}
-                target="_blank"
-                rel="noopener noreferrer"
-                class="text-sm text-blue-400 hover:text-blue-300"
-              >
-                Create a fine-grained token instead
-              </a>
-            </p>
-          {:else if isTokenValid}
+          {#if tokenType === 'fine-grained' && isTokenValid}
             <div class="flex items-center gap-2">
               <Button
                 type="button"
diff --git a/src/lib/components/Help.svelte b/src/lib/components/Help.svelte
index 27ea70d..f963b14 100644
--- a/src/lib/components/Help.svelte
+++ b/src/lib/components/Help.svelte
@@ -73,7 +73,7 @@
           <div class="rounded-md bg-slate-800 p-4">
             <h4 class="mb-2 font-medium text-slate-200">🎯 Classic Personal Access Token</h4>
             <p class="mb-2 text-sm text-slate-400">
-              Best for public repositories only. Quick to set up:
+              Quick to set up, works with both public and private repositories:
             </p>
             <ol class="ml-4 list-decimal text-sm text-slate-400">
               <li>
@@ -83,7 +83,7 @@
                   class="text-blue-400 hover:underline">token creation page</a
                 >
               </li>
-              <li>Optionally customize the token name</li>
+              <li>The required scopes (repo, delete_repo) are pre-configured in the link</li>
               <li>Click "Generate token" at the bottom and copy the token</li>
               <li>Paste the token into the "GitHub Token" field in the "Settings" tab</li>
             </ol>
@@ -92,7 +92,7 @@
           <div class="rounded-md bg-slate-800 p-4">
             <h4 class="mb-2 font-medium text-slate-200">🔐 Fine-Grained Access Token</h4>
             <p class="mb-2 text-sm text-slate-400">
-              Required for private repository access. Setup steps:
+              Alternative option with more granular permission controls:
             </p>
             <ol class="ml-4 list-decimal text-sm text-slate-400">
               <li>
@@ -156,7 +156,9 @@
                 repository. Skip this step only if you want to create a new repository instead.
               </p>
             </div>
-            <p class="mt-2 text-amber-400">Note: Fine-grained token is required for this feature</p>
+            <p class="mt-2 text-amber-400">
+              Note: Either token type will work, as long as it has the correct permissions
+            </p>
           </div>
         </div>
       {/if}
diff --git a/src/lib/components/github/NewUserGuide.svelte b/src/lib/components/github/NewUserGuide.svelte
index 510e1bb..520a7ea 100644
--- a/src/lib/components/github/NewUserGuide.svelte
+++ b/src/lib/components/github/NewUserGuide.svelte
@@ -77,7 +77,7 @@
                   <ExternalLink size={12} />
                 </a>
                 <p class="text-xs text-slate-500 ml-5">
-                  Best for public repositories. Quick to set up.
+                  Quick setup with pre-configured permissions for all repository operations.
                 </p>
               </div>
               <div>
@@ -92,7 +92,7 @@
                   <ExternalLink size={12} />
                 </a>
                 <p class="text-xs text-slate-500 ml-5">
-                  Required for private repositories. More secure with granular permissions.
+                  Advanced option with customizable repository-specific permissions.
                 </p>
               </div>
             </div>

From e17a623d2fc5175bf5154ff5d71a05ec40da9dfe Mon Sep 17 00:00:00 2001
From: Mamerto Fabian Jr <mfabianjr@gmail.com>
Date: Wed, 22 Jan 2025 17:18:23 +0800
Subject: [PATCH 54/75] feat: Update repository creation logic to default to
 private and improve repository name handling

---
 src/lib/components/GitHubSettings.svelte | 20 ++++++++------------
 src/services/GitHubService.ts            |  2 +-
 2 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/src/lib/components/GitHubSettings.svelte b/src/lib/components/GitHubSettings.svelte
index 4a56788..76ea376 100644
--- a/src/lib/components/GitHubSettings.svelte
+++ b/src/lib/components/GitHubSettings.svelte
@@ -24,6 +24,7 @@
   let tokenValidationTimeout: number;
   let validationError: string | null = null;
   let tokenType: 'classic' | 'fine-grained' | null = null;
+  let isRepoNameFromProjectId = false;
   let repositories: Array<{
     name: string;
     description: string | null;
@@ -62,8 +63,9 @@
     repoExists = repositories.some((repo) => repo.name.toLowerCase() === repoName.toLowerCase());
   }
 
-  $: if (projectId && !repoName) {
+  $: if (projectId && !repoName && !isRepoNameFromProjectId) {
     repoName = projectId;
+    isRepoNameFromProjectId = true;
   }
 
   async function loadRepositories() {
@@ -493,16 +495,11 @@
                     {#if repoName.length > 0}
                       <p class="text-orange-400">
                         💡If the repository "{repoName}" doesn't exist, it will be created
-                        automatically (as a public repository).
-                      </p>
-                      <p class="text-emerald-400">
-                        ✨ If it's a private repository, you can still enter it manually even if
-                        it's not visible in the list.
+                        automatically.
                       </p>
                     {:else}
                       <p>
-                        Enter a repository name (new or private) or select from your public
-                        repositories
+                        Enter a repository name (new) or select from your repositories carefully.
                       </p>
                     {/if}
                   </li>
@@ -512,14 +509,13 @@
           {/if}
         </div>
         {#if repoExists}
-          <p class="text-sm text-blue-400">ℹ️ Using existing repository</p>
+          <p class="text-sm text-blue-400">
+            ℹ️ Using existing repository. Make sure it is correct.
+          </p>
         {:else if repoName}
           <p class="text-sm text-emerald-400">
             ✨ A new repository will be created if it doesn't exist yet.
           </p>
-          <p class="text-sm text-orange-400">
-            ⚠️ You can push to private repositories, but loading it into Bolt will fail.
-          </p>
         {/if}
       </div>
 
diff --git a/src/services/GitHubService.ts b/src/services/GitHubService.ts
index f062d29..21a8e01 100644
--- a/src/services/GitHubService.ts
+++ b/src/services/GitHubService.ts
@@ -95,7 +95,7 @@ export class GitHubService extends BaseGitHubService {
     if (!exists) {
       await this.createRepo({
         name: repo,
-        private: false, // Make public by default so bolt.new can load the repo
+        private: true,
         auto_init: true,
         description: 'Repository created by Bolt to GitHub extension',
       });

From 7e16cb022bd6e0d77a23ffc4f1d9b68bc3d4fd76 Mon Sep 17 00:00:00 2001
From: "Mamerto Fabian Jr (aider)" <mfabianjr@gmail.com>
Date: Wed, 22 Jan 2025 17:31:10 +0800
Subject: [PATCH 55/75] feat: Implement robust rate limiting strategy for
 GitHub repository cloning

---
 src/lib/Queue.ts                 | 27 ++++++++++
 src/services/GitHubService.ts    | 92 +++++++++++++++++++++++---------
 src/services/RateLimitHandler.ts | 49 +++++++++++++++++
 3 files changed, 142 insertions(+), 26 deletions(-)
 create mode 100644 src/lib/Queue.ts
 create mode 100644 src/services/RateLimitHandler.ts

diff --git a/src/lib/Queue.ts b/src/lib/Queue.ts
new file mode 100644
index 0000000..72ac669
--- /dev/null
+++ b/src/lib/Queue.ts
@@ -0,0 +1,27 @@
+export class Queue {
+  private queue: (() => Promise<void>)[] = [];
+  private processing = false;
+  private concurrency: number;
+
+  constructor(concurrency = 1) {
+    this.concurrency = concurrency;
+  }
+
+  async add(task: () => Promise<void>): Promise<void> {
+    this.queue.push(task);
+    if (!this.processing) {
+      this.processing = true;
+      await this.process();
+    }
+  }
+
+  private async process(): Promise<void> {
+    while (this.queue.length > 0) {
+      const task = this.queue.shift();
+      if (task) {
+        await task();
+      }
+    }
+    this.processing = false;
+  }
+}
diff --git a/src/services/GitHubService.ts b/src/services/GitHubService.ts
index 21a8e01..19fce53 100644
--- a/src/services/GitHubService.ts
+++ b/src/services/GitHubService.ts
@@ -6,6 +6,8 @@ export const CREATE_FINE_GRAINED_TOKEN_URL =
 
 import { BaseGitHubService, type ProgressCallback } from './BaseGitHubService';
 import { GitHubTokenValidator } from './GitHubTokenValidator';
+import { RateLimitHandler } from './RateLimitHandler';
+import { Queue } from '../lib/Queue';
 
 interface GitHubFileResponse {
   sha?: string;
@@ -247,35 +249,73 @@ This repository was automatically initialized by the Bolt to GitHub extension.
     branch: string = 'main',
     onProgress?: (progress: number) => void
   ): Promise<void> {
-    // Get all files from source repo
-    const response = await this.request(
-      'GET',
-      `/repos/${sourceOwner}/${sourceRepo}/git/trees/${branch}?recursive=1`
-    );
-    const files = response.tree.filter((item: any) => item.type === 'blob');
-    const totalFiles = files.length;
-
-    // Copy each file to target repo
-    for (let i = 0; i < files.length; i++) {
-      const file = files[i];
-      const content = await this.request(
+    const rateLimitHandler = new RateLimitHandler();
+    const queue = new Queue(1); // Using a queue for serial execution
+
+    try {
+      // Check rate limits before starting
+      await rateLimitHandler.beforeRequest();
+      const rateLimit = await this.request('GET', '/rate_limit');
+      if (rateLimit.resources.core.remaining < 10) {
+        throw new Error('Insufficient API rate limit remaining');
+      }
+
+      // Get all files from source repo
+      const response = await this.request(
         'GET',
-        `/repos/${sourceOwner}/${sourceRepo}/contents/${file.path}?ref=${branch}`
+        `/repos/${sourceOwner}/${sourceRepo}/git/trees/${branch}?recursive=1`
       );
-      await this.pushFile({
-        owner: targetOwner,
-        repo: targetRepo,
-        path: file.path,
-        content: content.content,
-        branch,
-        message: `Copy ${file.path} from ${sourceRepo}`,
-        checkExisting: false, // Skip checking for existing files when cloning
-      });
-
-      if (onProgress) {
-        const progress = ((i + 1) / totalFiles) * 100;
-        onProgress(progress);
+      
+      const files = response.tree.filter((item: any) => item.type === 'blob');
+      const totalFiles = files.length;
+
+      // Process files serially through queue
+      for (let i = 0; i < files.length; i++) {
+        const file = files[i];
+        
+        await queue.add(async () => {
+          let success = false;
+          while (!success) {
+            try {
+              await rateLimitHandler.beforeRequest();
+              const content = await this.request(
+                'GET',
+                `/repos/${sourceOwner}/${sourceRepo}/contents/${file.path}?ref=${branch}`
+              );
+
+              await rateLimitHandler.beforeRequest();
+              await this.pushFile({
+                owner: targetOwner,
+                repo: targetRepo,
+                path: file.path,
+                content: content.content,
+                branch,
+                message: `Copy ${file.path} from ${sourceRepo}`,
+                checkExisting: false
+              });
+
+              success = true;
+              rateLimitHandler.resetRetryCount();
+
+              if (onProgress) {
+                const progress = ((i + 1) / totalFiles) * 100;
+                onProgress(progress);
+              }
+            } catch (error) {
+              if (error instanceof Response && error.status === 403) {
+                await rateLimitHandler.handleRateLimit(error);
+              } else {
+                throw error;
+              }
+            }
+          }
+        });
       }
+    } catch (error) {
+      console.error('Failed to clone repository contents:', error);
+      throw new Error(
+        `Failed to clone repository contents: ${error instanceof Error ? error.message : 'Unknown error'}`
+      );
     }
   }
 
diff --git a/src/services/RateLimitHandler.ts b/src/services/RateLimitHandler.ts
new file mode 100644
index 0000000..094b979
--- /dev/null
+++ b/src/services/RateLimitHandler.ts
@@ -0,0 +1,49 @@
+export class RateLimitHandler {
+  private lastRequestTime = 0;
+  private retryCount = 0;
+  private readonly MAX_RETRIES = 5;
+  private readonly MIN_REQUEST_INTERVAL = 1000; // 1 second between mutative requests
+
+  async handleRateLimit(response: Response): Promise<void> {
+    const retryAfter = response.headers.get('retry-after');
+    const rateLimit = {
+      remaining: parseInt(response.headers.get('x-ratelimit-remaining') || '1'),
+      reset: parseInt(response.headers.get('x-ratelimit-reset') || '0'),
+    };
+
+    if (retryAfter) {
+      await this.sleep(parseInt(retryAfter) * 1000);
+    } else if (rateLimit.remaining === 0) {
+      const now = Math.floor(Date.now() / 1000);
+      const waitTime = (rateLimit.reset - now) * 1000;
+      await this.sleep(waitTime);
+    } else {
+      const backoffTime = Math.min(1000 * Math.pow(2, this.retryCount), 60000);
+      await this.sleep(backoffTime);
+    }
+    
+    this.retryCount++;
+    if (this.retryCount >= this.MAX_RETRIES) {
+      throw new Error('Maximum retry attempts exceeded');
+    }
+  }
+
+  async beforeRequest(): Promise<void> {
+    const now = Date.now();
+    const timeSinceLastRequest = now - this.lastRequestTime;
+    
+    if (timeSinceLastRequest < this.MIN_REQUEST_INTERVAL) {
+      await this.sleep(this.MIN_REQUEST_INTERVAL - timeSinceLastRequest);
+    }
+    
+    this.lastRequestTime = Date.now();
+  }
+
+  resetRetryCount(): void {
+    this.retryCount = 0;
+  }
+
+  private sleep(ms: number): Promise<void> {
+    return new Promise(resolve => setTimeout(resolve, ms));
+  }
+}

From 923e808cf5adcc4e48d9b0c7369844a9641c8103 Mon Sep 17 00:00:00 2001
From: "Mamerto Fabian Jr (aider)" <mfabianjr@gmail.com>
Date: Wed, 22 Jan 2025 17:36:24 +0800
Subject: [PATCH 56/75] refactor: Optimize GitHub API rate limit handling and
 blob creation process

---
 src/services/GitHubService.ts | 21 +++++++-
 src/services/zipHandler.ts    | 97 +++++++++++++++++++++++++----------
 2 files changed, 89 insertions(+), 29 deletions(-)

diff --git a/src/services/GitHubService.ts b/src/services/GitHubService.ts
index 19fce53..9a8b737 100644
--- a/src/services/GitHubService.ts
+++ b/src/services/GitHubService.ts
@@ -256,8 +256,25 @@ This repository was automatically initialized by the Bolt to GitHub extension.
       // Check rate limits before starting
       await rateLimitHandler.beforeRequest();
       const rateLimit = await this.request('GET', '/rate_limit');
-      if (rateLimit.resources.core.remaining < 10) {
-        throw new Error('Insufficient API rate limit remaining');
+      const remainingRequests = rateLimit.resources.core.remaining;
+      const resetTime = rateLimit.resources.core.reset;
+
+      if (remainingRequests < 10) {
+        const now = Math.floor(Date.now() / 1000);
+        const waitTime = resetTime - now;
+        
+        // If reset is happening soon (within 2 minutes), wait for it
+        if (waitTime <= 120) {
+          console.log(`Waiting ${waitTime} seconds for rate limit reset...`);
+          await rateLimitHandler.sleep(waitTime * 1000);
+          // Recheck rate limit after waiting
+          const newRateLimit = await this.request('GET', '/rate_limit');
+          if (newRateLimit.resources.core.remaining < 10) {
+            throw new Error('Insufficient API rate limit remaining even after waiting for reset');
+          }
+        } else {
+          throw new Error(`Insufficient API rate limit remaining. Reset in ${Math.ceil(waitTime / 60)} minutes`);
+        }
       }
 
       // Get all files from source repo
diff --git a/src/services/zipHandler.ts b/src/services/zipHandler.ts
index 0f530a5..60ba934 100644
--- a/src/services/zipHandler.ts
+++ b/src/services/zipHandler.ts
@@ -279,36 +279,79 @@ export class ZipHandler {
   private async createBlobs(files: Map<string, string>, repoOwner: string, repoName: string) {
     const totalFiles = files.size;
     let completedFiles = 0;
-
-    const results = [];
-    for (const [path, content] of files.entries()) {
-      const blobData = await this.githubService.request(
-        'POST',
-        `/repos/${repoOwner}/${repoName}/git/blobs`,
-        {
-          content: toBase64(content),
-          encoding: 'base64',
-        }
-      );
-
-      completedFiles++;
-      const progress = 30 + Math.floor((completedFiles / totalFiles) * 30);
-      await this.updateStatus(
-        'uploading',
-        progress,
-        `Creating blob ${completedFiles}/${totalFiles}...`
+    const rateLimitHandler = new RateLimitHandler();
+    const queue = new Queue(3); // Allow up to 3 concurrent blob creations
+    const results: Array<{ path: string; mode: string; type: string; sha: string }> = [];
+
+    // Convert files Map to array for easier processing
+    const fileEntries = Array.from(files.entries());
+    
+    // Process files in chunks to optimize performance while avoiding rate limits
+    const chunkSize = 5;
+    for (let i = 0; i < fileEntries.length; i += chunkSize) {
+      const chunk = fileEntries.slice(i, i + chunkSize);
+      
+      // Process each chunk of files
+      const chunkPromises = chunk.map(([path, content]) =>
+        queue.add(async () => {
+          try {
+            await rateLimitHandler.beforeRequest();
+            const blobData = await this.githubService.request(
+              'POST',
+              `/repos/${repoOwner}/${repoName}/git/blobs`,
+              {
+                content: toBase64(content),
+                encoding: 'base64',
+              }
+            );
+
+            completedFiles++;
+            const progress = 30 + Math.floor((completedFiles / totalFiles) * 30);
+            await this.updateStatus(
+              'uploading',
+              progress,
+              `Creating blob ${completedFiles}/${totalFiles}...`
+            );
+
+            return {
+              path,
+              mode: '100644',
+              type: 'blob',
+              sha: blobData.sha,
+            };
+          } catch (error) {
+            if (error instanceof Response && error.status === 403) {
+              await rateLimitHandler.handleRateLimit(error);
+              // Retry the blob creation after handling rate limit
+              return queue.add(async () => {
+                const retryBlobData = await this.githubService.request(
+                  'POST',
+                  `/repos/${repoOwner}/${repoName}/git/blobs`,
+                  {
+                    content: toBase64(content),
+                    encoding: 'base64',
+                  }
+                );
+                return {
+                  path,
+                  mode: '100644',
+                  type: 'blob',
+                  sha: retryBlobData.sha,
+                };
+              });
+            }
+            throw error;
+          }
+        })
       );
 
-      results.push({
-        path,
-        mode: '100644',
-        type: 'blob',
-        sha: blobData.sha,
-      });
+      // Wait for current chunk to complete before processing next chunk
+      const chunkResults = await Promise.all(chunkPromises);
+      results.push(...chunkResults);
 
-      // Add a delay every 5 files to avoid rate limiting
-      if (completedFiles < totalFiles && completedFiles % 5 === 0) {
-        await this.sleep(1000); // 1 second delay every 5 files
+      // Add a small delay between chunks to avoid rate limiting
+      if (i + chunkSize < fileEntries.length) {
+        await rateLimitHandler.sleep(500); // 500ms delay between chunks
       }
     }
 

From c8eb3080dc2aeb9064f6b28d8f705c5351845288 Mon Sep 17 00:00:00 2001
From: Mamerto Fabian Jr <mfabianjr@gmail.com>
Date: Wed, 22 Jan 2025 17:46:03 +0800
Subject: [PATCH 57/75] feat: Enhance GitHub repository loading by allowing
 branch selection and improve rate limit handler visibility

---
 src/popup/App.svelte             | 4 +++-
 src/services/RateLimitHandler.ts | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/popup/App.svelte b/src/popup/App.svelte
index cac60b0..1b70965 100644
--- a/src/popup/App.svelte
+++ b/src/popup/App.svelte
@@ -289,12 +289,14 @@
               💡 No Bolt projects found. Create or load an existing Bolt project to get started.
             </p>
             <p class="text-sm text-green-400 pb-4">
-              🌟 You can also load any of your public GitHub repositories by providing your GitHub
+              🌟 You can also load any of your GitHub repositories by providing your GitHub
               token and repository owner.
             </p>
             <GitHubSettings
               isOnboarding={true}
               bind:githubToken
+              bind:repoName
+              bind:branch
               bind:repoOwner
               {status}
               buttonDisabled={hasStatus}
diff --git a/src/services/RateLimitHandler.ts b/src/services/RateLimitHandler.ts
index 094b979..bb106c0 100644
--- a/src/services/RateLimitHandler.ts
+++ b/src/services/RateLimitHandler.ts
@@ -43,7 +43,7 @@ export class RateLimitHandler {
     this.retryCount = 0;
   }
 
-  private sleep(ms: number): Promise<void> {
+  sleep(ms: number): Promise<void> {
     return new Promise(resolve => setTimeout(resolve, ms));
   }
 }

From 976250ec9ca2871da39f717501a846a79d4fe057 Mon Sep 17 00:00:00 2001
From: Mamerto Fabian Jr <mfabianjr@gmail.com>
Date: Wed, 22 Jan 2025 17:46:31 +0800
Subject: [PATCH 58/75] Add missing imports

---
 src/services/zipHandler.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/services/zipHandler.ts b/src/services/zipHandler.ts
index 60ba934..921eaf0 100644
--- a/src/services/zipHandler.ts
+++ b/src/services/zipHandler.ts
@@ -3,6 +3,8 @@ import { toBase64 } from '../lib/common';
 import { ZipProcessor } from '../lib/zip';
 import ignore from 'ignore';
 import type { ProcessingStatus, UploadStatusState } from '$lib/types';
+import { Queue } from '$lib/Queue';
+import { RateLimitHandler } from './RateLimitHandler';
 
 export class ZipHandler {
   constructor(

From 73ef847a964c0bf4b3b26bb2f150e5813ac832e1 Mon Sep 17 00:00:00 2001
From: Mamerto Fabian Jr <mfabianjr@gmail.com>
Date: Wed, 22 Jan 2025 17:49:45 +0800
Subject: [PATCH 59/75] revert zipHandler

---
 src/services/zipHandler.ts | 99 +++++++++++---------------------------
 1 file changed, 27 insertions(+), 72 deletions(-)

diff --git a/src/services/zipHandler.ts b/src/services/zipHandler.ts
index 921eaf0..0f530a5 100644
--- a/src/services/zipHandler.ts
+++ b/src/services/zipHandler.ts
@@ -3,8 +3,6 @@ import { toBase64 } from '../lib/common';
 import { ZipProcessor } from '../lib/zip';
 import ignore from 'ignore';
 import type { ProcessingStatus, UploadStatusState } from '$lib/types';
-import { Queue } from '$lib/Queue';
-import { RateLimitHandler } from './RateLimitHandler';
 
 export class ZipHandler {
   constructor(
@@ -281,79 +279,36 @@ export class ZipHandler {
   private async createBlobs(files: Map<string, string>, repoOwner: string, repoName: string) {
     const totalFiles = files.size;
     let completedFiles = 0;
-    const rateLimitHandler = new RateLimitHandler();
-    const queue = new Queue(3); // Allow up to 3 concurrent blob creations
-    const results: Array<{ path: string; mode: string; type: string; sha: string }> = [];
-
-    // Convert files Map to array for easier processing
-    const fileEntries = Array.from(files.entries());
-    
-    // Process files in chunks to optimize performance while avoiding rate limits
-    const chunkSize = 5;
-    for (let i = 0; i < fileEntries.length; i += chunkSize) {
-      const chunk = fileEntries.slice(i, i + chunkSize);
-      
-      // Process each chunk of files
-      const chunkPromises = chunk.map(([path, content]) =>
-        queue.add(async () => {
-          try {
-            await rateLimitHandler.beforeRequest();
-            const blobData = await this.githubService.request(
-              'POST',
-              `/repos/${repoOwner}/${repoName}/git/blobs`,
-              {
-                content: toBase64(content),
-                encoding: 'base64',
-              }
-            );
-
-            completedFiles++;
-            const progress = 30 + Math.floor((completedFiles / totalFiles) * 30);
-            await this.updateStatus(
-              'uploading',
-              progress,
-              `Creating blob ${completedFiles}/${totalFiles}...`
-            );
-
-            return {
-              path,
-              mode: '100644',
-              type: 'blob',
-              sha: blobData.sha,
-            };
-          } catch (error) {
-            if (error instanceof Response && error.status === 403) {
-              await rateLimitHandler.handleRateLimit(error);
-              // Retry the blob creation after handling rate limit
-              return queue.add(async () => {
-                const retryBlobData = await this.githubService.request(
-                  'POST',
-                  `/repos/${repoOwner}/${repoName}/git/blobs`,
-                  {
-                    content: toBase64(content),
-                    encoding: 'base64',
-                  }
-                );
-                return {
-                  path,
-                  mode: '100644',
-                  type: 'blob',
-                  sha: retryBlobData.sha,
-                };
-              });
-            }
-            throw error;
-          }
-        })
+
+    const results = [];
+    for (const [path, content] of files.entries()) {
+      const blobData = await this.githubService.request(
+        'POST',
+        `/repos/${repoOwner}/${repoName}/git/blobs`,
+        {
+          content: toBase64(content),
+          encoding: 'base64',
+        }
+      );
+
+      completedFiles++;
+      const progress = 30 + Math.floor((completedFiles / totalFiles) * 30);
+      await this.updateStatus(
+        'uploading',
+        progress,
+        `Creating blob ${completedFiles}/${totalFiles}...`
       );
 
-      // Wait for current chunk to complete before processing next chunk
-      const chunkResults = await Promise.all(chunkPromises);
-      results.push(...chunkResults);
+      results.push({
+        path,
+        mode: '100644',
+        type: 'blob',
+        sha: blobData.sha,
+      });
 
-      // Add a small delay between chunks to avoid rate limiting
-      if (i + chunkSize < fileEntries.length) {
-        await rateLimitHandler.sleep(500); // 500ms delay between chunks
+      // Add a delay every 5 files to avoid rate limiting
+      if (completedFiles < totalFiles && completedFiles % 5 === 0) {
+        await this.sleep(1000); // 1 second delay every 5 files
       }
     }
 

From 567bb342e1f33571683770cefa517cc22e738f51 Mon Sep 17 00:00:00 2001
From: Mamerto Fabian Jr <mfabianjr@gmail.com>
Date: Wed, 22 Jan 2025 18:24:56 +0800
Subject: [PATCH 60/75] feat: Implement rate limit handling and queue for blob
 creation in ZipHandler

---
 src/popup/App.svelte             |   4 +-
 src/services/GitHubService.ts    |  12 ++--
 src/services/RateLimitHandler.ts |   8 +--
 src/services/zipHandler.ts       | 101 ++++++++++++++++++++++---------
 4 files changed, 87 insertions(+), 38 deletions(-)

diff --git a/src/popup/App.svelte b/src/popup/App.svelte
index 1b70965..cc90130 100644
--- a/src/popup/App.svelte
+++ b/src/popup/App.svelte
@@ -289,8 +289,8 @@
               💡 No Bolt projects found. Create or load an existing Bolt project to get started.
             </p>
             <p class="text-sm text-green-400 pb-4">
-              🌟 You can also load any of your GitHub repositories by providing your GitHub
-              token and repository owner.
+              🌟 You can also load any of your GitHub repositories by providing your GitHub token
+              and repository owner.
             </p>
             <GitHubSettings
               isOnboarding={true}
diff --git a/src/services/GitHubService.ts b/src/services/GitHubService.ts
index 9a8b737..323c611 100644
--- a/src/services/GitHubService.ts
+++ b/src/services/GitHubService.ts
@@ -262,7 +262,7 @@ This repository was automatically initialized by the Bolt to GitHub extension.
       if (remainingRequests < 10) {
         const now = Math.floor(Date.now() / 1000);
         const waitTime = resetTime - now;
-        
+
         // If reset is happening soon (within 2 minutes), wait for it
         if (waitTime <= 120) {
           console.log(`Waiting ${waitTime} seconds for rate limit reset...`);
@@ -273,7 +273,9 @@ This repository was automatically initialized by the Bolt to GitHub extension.
             throw new Error('Insufficient API rate limit remaining even after waiting for reset');
           }
         } else {
-          throw new Error(`Insufficient API rate limit remaining. Reset in ${Math.ceil(waitTime / 60)} minutes`);
+          throw new Error(
+            `Insufficient API rate limit remaining. Reset in ${Math.ceil(waitTime / 60)} minutes`
+          );
         }
       }
 
@@ -282,14 +284,14 @@ This repository was automatically initialized by the Bolt to GitHub extension.
         'GET',
         `/repos/${sourceOwner}/${sourceRepo}/git/trees/${branch}?recursive=1`
       );
-      
+
       const files = response.tree.filter((item: any) => item.type === 'blob');
       const totalFiles = files.length;
 
       // Process files serially through queue
       for (let i = 0; i < files.length; i++) {
         const file = files[i];
-        
+
         await queue.add(async () => {
           let success = false;
           while (!success) {
@@ -308,7 +310,7 @@ This repository was automatically initialized by the Bolt to GitHub extension.
                 content: content.content,
                 branch,
                 message: `Copy ${file.path} from ${sourceRepo}`,
-                checkExisting: false
+                checkExisting: false,
               });
 
               success = true;
diff --git a/src/services/RateLimitHandler.ts b/src/services/RateLimitHandler.ts
index bb106c0..b34f382 100644
--- a/src/services/RateLimitHandler.ts
+++ b/src/services/RateLimitHandler.ts
@@ -21,7 +21,7 @@ export class RateLimitHandler {
       const backoffTime = Math.min(1000 * Math.pow(2, this.retryCount), 60000);
       await this.sleep(backoffTime);
     }
-    
+
     this.retryCount++;
     if (this.retryCount >= this.MAX_RETRIES) {
       throw new Error('Maximum retry attempts exceeded');
@@ -31,11 +31,11 @@ export class RateLimitHandler {
   async beforeRequest(): Promise<void> {
     const now = Date.now();
     const timeSinceLastRequest = now - this.lastRequestTime;
-    
+
     if (timeSinceLastRequest < this.MIN_REQUEST_INTERVAL) {
       await this.sleep(this.MIN_REQUEST_INTERVAL - timeSinceLastRequest);
     }
-    
+
     this.lastRequestTime = Date.now();
   }
 
@@ -44,6 +44,6 @@ export class RateLimitHandler {
   }
 
   sleep(ms: number): Promise<void> {
-    return new Promise(resolve => setTimeout(resolve, ms));
+    return new Promise((resolve) => setTimeout(resolve, ms));
   }
 }
diff --git a/src/services/zipHandler.ts b/src/services/zipHandler.ts
index 0f530a5..5e549ba 100644
--- a/src/services/zipHandler.ts
+++ b/src/services/zipHandler.ts
@@ -3,6 +3,8 @@ import { toBase64 } from '../lib/common';
 import { ZipProcessor } from '../lib/zip';
 import ignore from 'ignore';
 import type { ProcessingStatus, UploadStatusState } from '$lib/types';
+import { RateLimitHandler } from './RateLimitHandler';
+import { Queue } from '../lib/Queue';
 
 export class ZipHandler {
   constructor(
@@ -276,40 +278,85 @@ export class ZipHandler {
     return new Promise((resolve) => setTimeout(resolve, ms));
   }
 
-  private async createBlobs(files: Map<string, string>, repoOwner: string, repoName: string) {
+  private async createBlobs(
+    files: Map<string, string>,
+    repoOwner: string,
+    repoName: string
+  ): Promise<Array<{ path: string; mode: string; type: string; sha: string }>> {
+    const results: Array<{ path: string; mode: string; type: string; sha: string }> = [];
     const totalFiles = files.size;
     let completedFiles = 0;
 
-    const results = [];
-    for (const [path, content] of files.entries()) {
-      const blobData = await this.githubService.request(
-        'POST',
-        `/repos/${repoOwner}/${repoName}/git/blobs`,
-        {
-          content: toBase64(content),
-          encoding: 'base64',
+    const rateLimitHandler = new RateLimitHandler();
+    const rateLimit = await this.githubService.request('GET', '/rate_limit');
+    const remainingRequests = rateLimit.resources.core.remaining;
+    const resetTime = rateLimit.resources.core.reset;
+
+    if (remainingRequests < 10) {
+      const now = Math.floor(Date.now() / 1000);
+      const waitTime = resetTime - now;
+
+      // If reset is happening soon (within 2 minutes), wait for it
+      if (waitTime <= 120) {
+        console.log(`Waiting ${waitTime} seconds for rate limit reset...`);
+        await rateLimitHandler.sleep(waitTime * 1000);
+        // Recheck rate limit after waiting
+        const newRateLimit = await this.githubService.request('GET', '/rate_limit');
+        if (newRateLimit.resources.core.remaining < 10) {
+          throw new Error('Insufficient API rate limit remaining even after waiting for reset');
         }
-      );
+      } else {
+        throw new Error(
+          `Insufficient API rate limit remaining. Reset in ${Math.ceil(waitTime / 60)} minutes`
+        );
+      }
+    }
 
-      completedFiles++;
-      const progress = 30 + Math.floor((completedFiles / totalFiles) * 30);
-      await this.updateStatus(
-        'uploading',
-        progress,
-        `Creating blob ${completedFiles}/${totalFiles}...`
-      );
+    const queue = new Queue(1); // Using a queue for serial execution
 
-      results.push({
-        path,
-        mode: '100644',
-        type: 'blob',
-        sha: blobData.sha,
+    for (const [path, content] of files.entries()) {
+      await queue.add(async () => {
+        let success = false;
+        while (!success) {
+          try {
+            await rateLimitHandler.beforeRequest();
+
+            const blobData = await this.githubService.request(
+              'POST',
+              `/repos/${repoOwner}/${repoName}/git/blobs`,
+              {
+                content: toBase64(content),
+                encoding: 'base64',
+              }
+            );
+
+            results.push({
+              path,
+              mode: '100644',
+              type: 'blob',
+              sha: blobData.sha,
+            });
+
+            success = true;
+            rateLimitHandler.resetRetryCount();
+
+            completedFiles++;
+            await this.updateStatus(
+              'uploading',
+              20 + Math.floor((completedFiles / totalFiles) * 60),
+              `Uploading files (${completedFiles}/${totalFiles})...`
+            );
+          } catch (error) {
+            if (error instanceof Response && error.status === 403) {
+              await rateLimitHandler.handleRateLimit(error);
+              // Retry the current file by decrementing the loop counter
+              completedFiles--;
+            } else {
+              throw error;
+            }
+          }
+        }
       });
-
-      // Add a delay every 5 files to avoid rate limiting
-      if (completedFiles < totalFiles && completedFiles % 5 === 0) {
-        await this.sleep(1000); // 1 second delay every 5 files
-      }
     }
 
     return results;

From 622219ee63be5ac71b3ec6824a8c5b77dd1a4cec Mon Sep 17 00:00:00 2001
From: Mamerto Fabian Jr <mfabianjr@gmail.com>
Date: Wed, 22 Jan 2025 18:34:34 +0800
Subject: [PATCH 61/75] fix: Reduce maximum age for temporary repositories to
 60 seconds

---
 src/background/TempRepoManager.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/background/TempRepoManager.ts b/src/background/TempRepoManager.ts
index 95a5841..0af4e72 100644
--- a/src/background/TempRepoManager.ts
+++ b/src/background/TempRepoManager.ts
@@ -11,7 +11,7 @@ interface TempRepoMetadata {
 export class BackgroundTempRepoManager {
   private static STORAGE_KEY = 'bolt_temp_repos';
   private static CLEANUP_INTERVAL = 30 * 1000; // 30 seconds
-  private static MAX_AGE = 2 * 60 * 1000; // 2 minutes
+  private static MAX_AGE = 60 * 1000; // 60 seconds
 
   constructor(
     private githubService: GitHubService,

From 1b561949e1182215f545ac604f068b7ade647011 Mon Sep 17 00:00:00 2001
From: "Mamerto Fabian Jr (aider)" <mfabianjr@gmail.com>
Date: Wed, 22 Jan 2025 18:37:51 +0800
Subject: [PATCH 62/75] feat: Add burst request support to RateLimitHandler
 with configurable limit

---
 src/services/RateLimitHandler.ts | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/services/RateLimitHandler.ts b/src/services/RateLimitHandler.ts
index b34f382..6740d5b 100644
--- a/src/services/RateLimitHandler.ts
+++ b/src/services/RateLimitHandler.ts
@@ -1,4 +1,6 @@
 export class RateLimitHandler {
+  private requestCount = 0;
+  private readonly BURST_LIMIT = 10; // Allow 10 requests before rate limiting
   private lastRequestTime = 0;
   private retryCount = 0;
   private readonly MAX_RETRIES = 5;
@@ -29,11 +31,16 @@ export class RateLimitHandler {
   }
 
   async beforeRequest(): Promise<void> {
-    const now = Date.now();
-    const timeSinceLastRequest = now - this.lastRequestTime;
-
-    if (timeSinceLastRequest < this.MIN_REQUEST_INTERVAL) {
-      await this.sleep(this.MIN_REQUEST_INTERVAL - timeSinceLastRequest);
+    this.requestCount++;
+    
+    // Only apply rate limiting after BURST_LIMIT requests
+    if (this.requestCount > this.BURST_LIMIT) {
+      const now = Date.now();
+      const timeSinceLastRequest = now - this.lastRequestTime;
+
+      if (timeSinceLastRequest < this.MIN_REQUEST_INTERVAL) {
+        await this.sleep(this.MIN_REQUEST_INTERVAL - timeSinceLastRequest);
+      }
     }
 
     this.lastRequestTime = Date.now();
@@ -43,6 +50,10 @@ export class RateLimitHandler {
     this.retryCount = 0;
   }
 
+  resetRequestCount(): void {
+    this.requestCount = 0;
+  }
+
   sleep(ms: number): Promise<void> {
     return new Promise((resolve) => setTimeout(resolve, ms));
   }

From 58fc393872a9630abfcca1eb9010f0dbde59b977 Mon Sep 17 00:00:00 2001
From: "Mamerto Fabian Jr (aider)" <mfabianjr@gmail.com>
Date: Wed, 22 Jan 2025 18:39:30 +0800
Subject: [PATCH 63/75] refactor: Optimize rate limiting in cloneRepoContents
 with burst handling

---
 src/services/GitHubService.ts | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/services/GitHubService.ts b/src/services/GitHubService.ts
index 323c611..2d80950 100644
--- a/src/services/GitHubService.ts
+++ b/src/services/GitHubService.ts
@@ -288,6 +288,9 @@ This repository was automatically initialized by the Bolt to GitHub extension.
       const files = response.tree.filter((item: any) => item.type === 'blob');
       const totalFiles = files.length;
 
+      // Reset rate limit handler counter before starting batch
+      rateLimitHandler.resetRequestCount();
+
       // Process files serially through queue
       for (let i = 0; i < files.length; i++) {
         const file = files[i];
@@ -296,12 +299,14 @@ This repository was automatically initialized by the Bolt to GitHub extension.
           let success = false;
           while (!success) {
             try {
+              // Get file content
               await rateLimitHandler.beforeRequest();
               const content = await this.request(
                 'GET',
                 `/repos/${sourceOwner}/${sourceRepo}/contents/${file.path}?ref=${branch}`
               );
 
+              // Push file content
               await rateLimitHandler.beforeRequest();
               await this.pushFile({
                 owner: targetOwner,
@@ -316,6 +321,11 @@ This repository was automatically initialized by the Bolt to GitHub extension.
               success = true;
               rateLimitHandler.resetRetryCount();
 
+              // Reset request counter every 10 files to maintain burst behavior
+              if ((i + 1) % 10 === 0) {
+                rateLimitHandler.resetRequestCount();
+              }
+
               if (onProgress) {
                 const progress = ((i + 1) / totalFiles) * 100;
                 onProgress(progress);

From c80d72640c4a1a12a06b89eaa96b838b8eca188e Mon Sep 17 00:00:00 2001
From: Mamerto Fabian Jr <mfabianjr@gmail.com>
Date: Wed, 22 Jan 2025 18:40:41 +0800
Subject: [PATCH 64/75] fix: Update temporary repository deletion time from 2
 minutes to 1 minute

---
 src/lib/components/Help.svelte         | 2 +-
 src/lib/components/ProjectsList.svelte | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/Help.svelte b/src/lib/components/Help.svelte
index f963b14..7db8d5d 100644
--- a/src/lib/components/Help.svelte
+++ b/src/lib/components/Help.svelte
@@ -146,7 +146,7 @@
             <ol class="ml-4 mt-2 list-decimal">
               <li>A temporary public clone is created</li>
               <li>Bolt starts importing from this clone</li>
-              <li>The temporary repository is automatically deleted after 2 minutes</li>
+              <li>The temporary repository is automatically deleted after 1 minute</li>
             </ol>
             <div class="mt-3 p-2 bg-amber-900/30 rounded border border-amber-700/30">
               <p class="text-amber-400 font-medium">Important:</p>
diff --git a/src/lib/components/ProjectsList.svelte b/src/lib/components/ProjectsList.svelte
index d7939df..51b4b58 100644
--- a/src/lib/components/ProjectsList.svelte
+++ b/src/lib/components/ProjectsList.svelte
@@ -106,7 +106,7 @@
     if (
       !confirm(
         'Warning: This will temporarily create a public copy of your private repository to enable import.\n\n' +
-          'The temporary repository will be automatically deleted after 2 minutes.\n\n' +
+          'The temporary repository will be automatically deleted after 1 minute.\n\n' +
           'Do you want to continue?'
       )
     ) {

From dbfc86af7f73eb5ba381c62e2e079771e2b73219 Mon Sep 17 00:00:00 2001
From: "Mamerto Fabian Jr (aider)" <mfabianjr@gmail.com>
Date: Wed, 22 Jan 2025 18:40:54 +0800
Subject: [PATCH 65/75] refactor: Improve rate limit handling in createBlobs
 with burst limit

---
 src/services/zipHandler.ts | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/services/zipHandler.ts b/src/services/zipHandler.ts
index 5e549ba..84df6eb 100644
--- a/src/services/zipHandler.ts
+++ b/src/services/zipHandler.ts
@@ -314,6 +314,10 @@ export class ZipHandler {
 
     const queue = new Queue(1); // Using a queue for serial execution
 
+    // Reset rate limit handler counter before starting batch
+    rateLimitHandler.resetRequestCount();
+
+    let fileCount = 0;
     for (const [path, content] of files.entries()) {
       await queue.add(async () => {
         let success = false;
@@ -340,6 +344,12 @@ export class ZipHandler {
             success = true;
             rateLimitHandler.resetRetryCount();
 
+            // Reset request counter every 10 files to maintain burst behavior
+            fileCount++;
+            if (fileCount % 10 === 0) {
+              rateLimitHandler.resetRequestCount();
+            }
+
             completedFiles++;
             await this.updateStatus(
               'uploading',

From 99d0e3b746f9526a3fc0c669e45918ddadbbfa2c Mon Sep 17 00:00:00 2001
From: Mamerto Fabian Jr <mfabianjr@gmail.com>
Date: Wed, 22 Jan 2025 22:03:21 +0800
Subject: [PATCH 66/75] refactor: Simplify repository status retrieval by
 consolidating API calls

---
 src/lib/components/ProjectStatus.svelte | 27 ++++++-------------------
 src/services/GitHubService.ts           | 27 +++++++++++++++++++++++++
 2 files changed, 33 insertions(+), 21 deletions(-)

diff --git a/src/lib/components/ProjectStatus.svelte b/src/lib/components/ProjectStatus.svelte
index b9d176b..1f8fb2f 100644
--- a/src/lib/components/ProjectStatus.svelte
+++ b/src/lib/components/ProjectStatus.svelte
@@ -18,7 +18,6 @@
 
   let repoExists: boolean | null = null;
   let isPrivate: boolean | null = null;
-  let commitCount: number | null = null;
   let latestCommit: {
     date: string;
     message: string;
@@ -28,20 +27,16 @@
     try {
       const githubService = new GitHubService(token);
 
-      // Check repo existence
-      repoExists = await githubService.repoExists(gitHubUsername, repoName);
+      // Get repo info
+      const repoInfo = await githubService.getRepoInfo(gitHubUsername, repoName);
+      repoExists = repoInfo.exists;
       isLoading.repoStatus = false;
 
       if (repoExists) {
         // Get visibility
-        const repos = await githubService.listRepos();
-        isPrivate = repos.find((r) => r.name === repoName)?.private ?? null;
+        isPrivate = repoInfo.private ?? null;
         isLoading.visibility = false;
 
-        // Get commit count
-        commitCount = await githubService.getCommitCount(gitHubUsername, repoName, branch);
-        isLoading.commits = false;
-
         // Get latest commit
         const commits = await githubService.request(
           'GET',
@@ -79,9 +74,8 @@
 </script>
 
 <Alert class="border-green-900 bg-green-950">
-  <AlertTitle>Ready to Use</AlertTitle>
+  <AlertTitle>Currently loaded project:</AlertTitle>
   <AlertDescription class="text-slate-300">
-    Your GitHub configuration is set up and ready to go!
     <div
       class="mt-2 grid grid-cols-[auto_1fr] gap-x-2 bg-slate-900/50 p-2 rounded-sm cursor-pointer hover:bg-slate-900/70 transition-colors group"
       on:click={() => dispatch('switchTab', 'settings')}
@@ -89,7 +83,6 @@
       role="button"
       tabindex={0}
     >
-      <div class="col-span-2 text-sm text-slate-400 mb-1">Currently loaded project:</div>
       <span class="text-slate-400">Project ID:</span>
       <span class="font-mono">{projectId}</span>
       <span class="text-slate-400">Repository:</span>
@@ -112,20 +105,12 @@
           {repoExists ? (isPrivate ? 'Private' : 'Public') : 'N/A'}
         {/if}
       </span>
-      <span class="text-slate-400">Commits:</span>
-      <span class="font-mono">
-        {#if isLoading.commits}
-          <span class="text-slate-500">Loading...</span>
-        {:else}
-          {repoExists ? commitCount : 'N/A'}
-        {/if}
-      </span>
       <span class="text-slate-400">Latest Commit:</span>
       <span class="font-mono">
         {#if isLoading.latestCommit}
           <span class="text-slate-500">Loading...</span>
         {:else if latestCommit}
-          <div>{new Date(latestCommit.date).toLocaleString()}</div>
+          <div class="text-xs text-slate-400 mt-1">{new Date(latestCommit.date).toLocaleString()}</div>
           <div class="text-xs text-slate-400 mt-1">{latestCommit.message}</div>
         {:else}
           N/A
diff --git a/src/services/GitHubService.ts b/src/services/GitHubService.ts
index 2d80950..967d7cb 100644
--- a/src/services/GitHubService.ts
+++ b/src/services/GitHubService.ts
@@ -21,6 +21,13 @@ interface RepoCreateOptions {
   description?: string;
 }
 
+interface RepoInfo {
+  name: string;
+  description?: string;
+  private?: boolean;
+  exists: boolean
+}
+
 export class GitHubService extends BaseGitHubService {
   private tokenValidator: GitHubTokenValidator;
 
@@ -64,6 +71,26 @@ export class GitHubService extends BaseGitHubService {
     }
   }
 
+async getRepoInfo(owner: string, repo: string): Promise<RepoInfo> {
+    try {
+      const response: RepoInfo = await this.request(
+        'GET',
+        `/repos/${owner}/${repo}`
+      );
+      return {
+        name: response.name,
+        description: response.description,
+        private: response.private,
+        exists: true
+      };
+    } catch (error) {
+      if (error instanceof Error && error.message.includes('404')) {
+        return { name: repo, exists: false };
+      }
+      throw error;
+    }
+  }
+
   async createRepo(options: RepoCreateOptions & { auto_init?: boolean }) {
     const { auto_init = true, ...repoOptions } = options;
 

From 145793fc840d285f89b80754bdeb7547885c536b Mon Sep 17 00:00:00 2001
From: Mamerto Fabian Jr <mfabianjr@gmail.com>
Date: Wed, 22 Jan 2025 22:09:09 +0800
Subject: [PATCH 67/75] refactor: Extract STORAGE_KEY constant for improved
 readability in TempRepoManager

---
 src/background/TempRepoManager.ts | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/background/TempRepoManager.ts b/src/background/TempRepoManager.ts
index 0af4e72..b9a88b1 100644
--- a/src/background/TempRepoManager.ts
+++ b/src/background/TempRepoManager.ts
@@ -1,6 +1,8 @@
 import { GitHubService } from '../services/GitHubService';
 import type { UploadStatusState } from '../lib/types';
 
+export const STORAGE_KEY = 'bolt_temp_repos';
+
 interface TempRepoMetadata {
   originalRepo: string;
   tempRepo: string;
@@ -9,7 +11,6 @@ interface TempRepoMetadata {
 }
 
 export class BackgroundTempRepoManager {
-  private static STORAGE_KEY = 'bolt_temp_repos';
   private static CLEANUP_INTERVAL = 30 * 1000; // 30 seconds
   private static MAX_AGE = 60 * 1000; // 60 seconds
 
@@ -99,13 +100,13 @@ export class BackgroundTempRepoManager {
       owner: this.owner,
     });
     await chrome.storage.local.set({
-      [BackgroundTempRepoManager.STORAGE_KEY]: tempRepos,
+      [STORAGE_KEY]: tempRepos,
     });
   }
 
   private async getTempRepos(): Promise<TempRepoMetadata[]> {
-    const result = await chrome.storage.local.get(BackgroundTempRepoManager.STORAGE_KEY);
-    return result[BackgroundTempRepoManager.STORAGE_KEY] || [];
+    const result = await chrome.storage.local.get(STORAGE_KEY);
+    return result[STORAGE_KEY] || [];
   }
 
   async cleanupTempRepos(): Promise<void> {
@@ -126,7 +127,7 @@ export class BackgroundTempRepoManager {
     }
 
     await chrome.storage.local.set({
-      [BackgroundTempRepoManager.STORAGE_KEY]: remaining,
+      [STORAGE_KEY]: remaining,
     });
   }
 

From 58662af358a6aa1621d0a4bd1c580b7f96bd75c0 Mon Sep 17 00:00:00 2001
From: Mamerto Fabian Jr <mfabianjr@gmail.com>
Date: Wed, 22 Jan 2025 22:31:11 +0800
Subject: [PATCH 68/75] refactor: Change getTempRepos method to public for
 broader access

---
 src/background/TempRepoManager.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/background/TempRepoManager.ts b/src/background/TempRepoManager.ts
index b9a88b1..3abc3a4 100644
--- a/src/background/TempRepoManager.ts
+++ b/src/background/TempRepoManager.ts
@@ -104,7 +104,7 @@ export class BackgroundTempRepoManager {
     });
   }
 
-  private async getTempRepos(): Promise<TempRepoMetadata[]> {
+  async getTempRepos(): Promise<TempRepoMetadata[]> {
     const result = await chrome.storage.local.get(STORAGE_KEY);
     return result[STORAGE_KEY] || [];
   }

From 2ab559761b2e58b68f76937fbb50c9c58d967f22 Mon Sep 17 00:00:00 2001
From: Mamerto Fabian Jr <mfabianjr@gmail.com>
Date: Wed, 22 Jan 2025 22:40:04 +0800
Subject: [PATCH 69/75] refactor: Enhance project status display and import
 progress handling

The extension can now show progress indicator when importing private github repo within the ProjectsList tab.
---
 src/lib/components/ProjectStatus.svelte |  4 +-
 src/lib/components/ProjectsList.svelte  | 58 ++++++++++++++++++++++++-
 src/services/GitHubService.ts           | 11 ++---
 src/services/RateLimitHandler.ts        |  2 +-
 4 files changed, 64 insertions(+), 11 deletions(-)

diff --git a/src/lib/components/ProjectStatus.svelte b/src/lib/components/ProjectStatus.svelte
index 1f8fb2f..f66252c 100644
--- a/src/lib/components/ProjectStatus.svelte
+++ b/src/lib/components/ProjectStatus.svelte
@@ -110,7 +110,9 @@
         {#if isLoading.latestCommit}
           <span class="text-slate-500">Loading...</span>
         {:else if latestCommit}
-          <div class="text-xs text-slate-400 mt-1">{new Date(latestCommit.date).toLocaleString()}</div>
+          <div class="text-xs text-slate-400 mt-1">
+            {new Date(latestCommit.date).toLocaleString()}
+          </div>
           <div class="text-xs text-slate-400 mt-1">{latestCommit.message}</div>
         {:else}
           N/A
diff --git a/src/lib/components/ProjectsList.svelte b/src/lib/components/ProjectsList.svelte
index 51b4b58..529325f 100644
--- a/src/lib/components/ProjectsList.svelte
+++ b/src/lib/components/ProjectsList.svelte
@@ -35,6 +35,8 @@
     private?: boolean;
     language?: string | null;
   }> = [];
+  let importProgress: { repoName: string; status: string; progress?: number } | null = null;
+  let currentTabIsBolt = false;
 
   async function loadAllRepos() {
     console.log('Loading repos for', repoOwner);
@@ -76,6 +78,10 @@
   }
 
   onMount(async () => {
+    // Get current tab URL
+    const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
+    currentTabIsBolt = tab?.url?.includes('bolt.new') ?? false;
+
     // Load all repos
     await loadAllRepos();
 
@@ -115,6 +121,12 @@
 
     try {
       console.log('🔄 Sending message to import private repo:', repoName);
+
+      // Only show progress if we're not on bolt.new
+      if (!currentTabIsBolt) {
+        importProgress = { repoName, status: 'Starting import...' };
+      }
+
       // Send message directly to background service
       const port = chrome.runtime.connect({ name: 'popup' });
 
@@ -125,14 +137,40 @@
         }
       });
 
+      port.onMessage.addListener((message) => {
+        if (message.type === 'UPLOAD_STATUS') {
+          console.log('📥 Import status update:', message.status);
+
+          if (!currentTabIsBolt) {
+            importProgress = {
+              repoName,
+              status: message.status.message || 'Processing...',
+              progress: message.status.progress,
+            };
+            // If the import is complete or failed, clear the progress after a delay
+            if (message.status.status === 'success' || message.status.status === 'error') {
+              setTimeout(() => {
+                importProgress = null;
+                window.close();
+              }, 1500);
+            }
+          } else if (message.status.status === 'success') {
+            // If we're on bolt.new, just close the popup when done
+            window.close();
+          }
+        }
+      });
+
       // Then send message
       port.postMessage({
         type: 'IMPORT_PRIVATE_REPO',
         data: { repoName },
       });
 
-      // Close the popup to prevent UI overlap
-      window.close();
+      // If we're on bolt.new, close the popup immediately
+      if (currentTabIsBolt) {
+        window.close();
+      }
     } catch (error) {
       console.error('❌ Failed to import private repository:', error);
       alert('Failed to import private repository. Please try again later.');
@@ -277,4 +315,20 @@
       </div>
     {/each}
   {/if}
+  {#if importProgress}
+    <div class="fixed inset-0 bg-black/50 flex items-center justify-center">
+      <div class="bg-slate-900 border border-slate-800 rounded-lg p-4 max-w-sm w-full mx-4">
+        <h3 class="font-medium mb-2">Importing {importProgress.repoName}</h3>
+        <p class="text-sm text-slate-400 mb-3">{importProgress.status}</p>
+        {#if importProgress.progress !== undefined}
+          <div class="w-full bg-slate-800 rounded-full h-2">
+            <div
+              class="bg-emerald-500 h-2 rounded-full transition-all duration-300"
+              style="width: {importProgress.progress}%"
+            />
+          </div>
+        {/if}
+      </div>
+    </div>
+  {/if}
 </div>
diff --git a/src/services/GitHubService.ts b/src/services/GitHubService.ts
index 967d7cb..4416092 100644
--- a/src/services/GitHubService.ts
+++ b/src/services/GitHubService.ts
@@ -25,7 +25,7 @@ interface RepoInfo {
   name: string;
   description?: string;
   private?: boolean;
-  exists: boolean
+  exists: boolean;
 }
 
 export class GitHubService extends BaseGitHubService {
@@ -71,17 +71,14 @@ export class GitHubService extends BaseGitHubService {
     }
   }
 
-async getRepoInfo(owner: string, repo: string): Promise<RepoInfo> {
+  async getRepoInfo(owner: string, repo: string): Promise<RepoInfo> {
     try {
-      const response: RepoInfo = await this.request(
-        'GET',
-        `/repos/${owner}/${repo}`
-      );
+      const response: RepoInfo = await this.request('GET', `/repos/${owner}/${repo}`);
       return {
         name: response.name,
         description: response.description,
         private: response.private,
-        exists: true
+        exists: true,
       };
     } catch (error) {
       if (error instanceof Error && error.message.includes('404')) {
diff --git a/src/services/RateLimitHandler.ts b/src/services/RateLimitHandler.ts
index 6740d5b..980e29e 100644
--- a/src/services/RateLimitHandler.ts
+++ b/src/services/RateLimitHandler.ts
@@ -32,7 +32,7 @@ export class RateLimitHandler {
 
   async beforeRequest(): Promise<void> {
     this.requestCount++;
-    
+
     // Only apply rate limiting after BURST_LIMIT requests
     if (this.requestCount > this.BURST_LIMIT) {
       const now = Date.now();

From 94660ef0e86e45ed1159b6423d63570df1eaa6d8 Mon Sep 17 00:00:00 2001
From: "Mamerto Fabian Jr (aider)" <mfabianjr@gmail.com>
Date: Wed, 22 Jan 2025 22:51:24 +0800
Subject: [PATCH 70/75] feat: Add temp repo management modal with user
 interaction options

---
 src/background/BackgroundService.ts      | 17 +++++
 src/lib/components/ui/modal/Modal.svelte | 15 +++++
 src/popup/App.svelte                     | 83 ++++++++++++++++++++++++
 3 files changed, 115 insertions(+)
 create mode 100644 src/lib/components/ui/modal/Modal.svelte

diff --git a/src/background/BackgroundService.ts b/src/background/BackgroundService.ts
index bf46ead..f6a86dc 100644
--- a/src/background/BackgroundService.ts
+++ b/src/background/BackgroundService.ts
@@ -178,6 +178,23 @@ export class BackgroundService {
           await this.tempRepoManager.handlePrivateRepoImport(message.data.repoName);
           console.log('✅ Private repo import completed');
           break;
+        case 'DELETE_TEMP_REPO':
+          if (message.data && message.data.owner && message.data.repo) {
+            try {
+              await this.githubService?.deleteRepo(message.data.owner, message.data.repo);
+              // Remove from storage
+              const result = await chrome.storage.local.get(STORAGE_KEY);
+              const tempRepos = result[STORAGE_KEY] || [];
+              const updatedRepos = tempRepos.filter(
+                (repo: any) => repo.tempRepo !== message.data.repo
+              );
+              await chrome.storage.local.set({ [STORAGE_KEY]: updatedRepos });
+            } catch (error) {
+              console.error('Failed to delete temporary repo:', error);
+            }
+          }
+          break;
+
         case 'DEBUG':
           console.log(`[Content Debug] ${message.message}`);
           break;
diff --git a/src/lib/components/ui/modal/Modal.svelte b/src/lib/components/ui/modal/Modal.svelte
new file mode 100644
index 0000000..03f1d16
--- /dev/null
+++ b/src/lib/components/ui/modal/Modal.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+  export let show = false;
+  export let title: string;
+</script>
+
+{#if show}
+  <div class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center">
+    <div class="bg-slate-900 p-6 rounded-lg shadow-xl max-w-md w-full mx-4 border border-slate-800">
+      <h2 class="text-xl font-semibold mb-4">{title}</h2>
+      <div class="space-y-4">
+        <slot />
+      </div>
+    </div>
+  </div>
+{/if}
diff --git a/src/popup/App.svelte b/src/popup/App.svelte
index cc90130..6793c2d 100644
--- a/src/popup/App.svelte
+++ b/src/popup/App.svelte
@@ -7,6 +7,8 @@
     CardHeader,
     CardTitle,
   } from '$lib/components/ui/card';
+  import Modal from '$lib/components/ui/modal/Modal.svelte';
+  import { STORAGE_KEY } from '../background/TempRepoManager';
   import { Tabs, TabsContent } from '$lib/components/ui/tabs';
   import Header from '$lib/components/Header.svelte';
   import SocialLinks from '$lib/components/SocialLinks.svelte';
@@ -42,6 +44,16 @@
   let isTokenValid: boolean | null = null;
   let validationError: string | null = null;
   let hasInitialSettings = false;
+  let showTempRepoModal = false;
+  let tempRepoData: TempRepoMetadata | null = null;
+  let port: chrome.runtime.Port;
+
+  interface TempRepoMetadata {
+    originalRepo: string;
+    tempRepo: string;
+    createdAt: number;
+    owner: string;
+  }
 
   async function validateGitHubToken(token: string, username: string): Promise<boolean> {
     if (!token) {
@@ -72,6 +84,9 @@
   onMount(async () => {
     // Add dark mode to the document
     document.documentElement.classList.add('dark');
+    
+    // Connect to background service
+    port = chrome.runtime.connect({ name: 'popup' });
 
     githubSettings = (await chrome.storage.sync.get([
       'githubToken',
@@ -129,8 +144,39 @@
         uploadMessage = message.message || '';
       }
     });
+
+    // Check for temp repos
+    const result = await chrome.storage.local.get(STORAGE_KEY);
+    const tempRepos: TempRepoMetadata[] = result[STORAGE_KEY] || [];
+    
+    if (tempRepos.length > 0 && parsedProjectId) {
+      // Get the most recent temp repo
+      tempRepoData = tempRepos[tempRepos.length - 1];
+      showTempRepoModal = true;
+    }
   });
 
+  async function handleDeleteTempRepo() {
+    if (tempRepoData) {
+      port.postMessage({
+        type: 'DELETE_TEMP_REPO',
+        data: {
+          owner: tempRepoData.owner,
+          repo: tempRepoData.tempRepo
+        }
+      });
+      showTempRepoModal = false;
+    }
+  }
+
+  async function handleUseTempRepoName() {
+    if (tempRepoData) {
+      repoName = tempRepoData.originalRepo;
+      await saveSettings();
+      showTempRepoModal = false;
+    }
+  }
+
   function checkSettingsValidity() {
     // Only consider settings valid if we have all required fields AND the validation passed
     isSettingsValid =
@@ -309,6 +355,43 @@
     </CardContent>
     <Footer />
   </Card>
+  <Modal show={showTempRepoModal} title="Private Repository Import">
+    <div class="space-y-4">
+      <p class="text-slate-300">
+        It looks like you just imported a private GitHub repository. Would you like to:
+      </p>
+      
+      <div class="space-y-2">
+        <Button
+          variant="outline"
+          class="w-full border-slate-700 hover:bg-slate-800"
+          on:click={handleDeleteTempRepo}
+        >
+          Delete the temporary public repository now
+        </Button>
+        
+        <Button
+          variant="outline"
+          class="w-full border-slate-700 hover:bg-slate-800"
+          on:click={handleUseTempRepoName}
+        >
+          Use original repository name ({tempRepoData?.originalRepo})
+        </Button>
+        
+        <Button
+          variant="ghost"
+          class="w-full text-slate-400 hover:text-slate-300"
+          on:click={() => showTempRepoModal = false}
+        >
+          Dismiss
+        </Button>
+      </div>
+      
+      <p class="text-sm text-slate-400">
+        Note: The temporary repository will be automatically deleted in 1 minute.
+      </p>
+    </div>
+  </Modal>
 </main>
 
 <style>

From 9014b067749b63a17cb69d4fa66a3c59579646b3 Mon Sep 17 00:00:00 2001
From: Mamerto Fabian Jr <mfabianjr@gmail.com>
Date: Wed, 22 Jan 2025 23:03:10 +0800
Subject: [PATCH 71/75] refactor: Streamline temporary repository cleanup
 process and enhance management

---
 src/background/BackgroundService.ts | 16 ++--------------
 src/background/TempRepoManager.ts   | 16 +++++++++++++---
 src/lib/types.ts                    |  3 ++-
 3 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/src/background/BackgroundService.ts b/src/background/BackgroundService.ts
index f6a86dc..681a7db 100644
--- a/src/background/BackgroundService.ts
+++ b/src/background/BackgroundService.ts
@@ -179,20 +179,8 @@ export class BackgroundService {
           console.log('✅ Private repo import completed');
           break;
         case 'DELETE_TEMP_REPO':
-          if (message.data && message.data.owner && message.data.repo) {
-            try {
-              await this.githubService?.deleteRepo(message.data.owner, message.data.repo);
-              // Remove from storage
-              const result = await chrome.storage.local.get(STORAGE_KEY);
-              const tempRepos = result[STORAGE_KEY] || [];
-              const updatedRepos = tempRepos.filter(
-                (repo: any) => repo.tempRepo !== message.data.repo
-              );
-              await chrome.storage.local.set({ [STORAGE_KEY]: updatedRepos });
-            } catch (error) {
-              console.error('Failed to delete temporary repo:', error);
-            }
-          }
+          await this.tempRepoManager?.cleanupTempRepos(true);
+          console.log('✅ Temp repo cleaned up');
           break;
 
         case 'DEBUG':
diff --git a/src/background/TempRepoManager.ts b/src/background/TempRepoManager.ts
index 3abc3a4..4e306eb 100644
--- a/src/background/TempRepoManager.ts
+++ b/src/background/TempRepoManager.ts
@@ -13,6 +13,7 @@ interface TempRepoMetadata {
 export class BackgroundTempRepoManager {
   private static CLEANUP_INTERVAL = 30 * 1000; // 30 seconds
   private static MAX_AGE = 60 * 1000; // 60 seconds
+  private cleanupInterval: NodeJS.Timeout | null = null;
 
   constructor(
     private githubService: GitHubService,
@@ -109,13 +110,13 @@ export class BackgroundTempRepoManager {
     return result[STORAGE_KEY] || [];
   }
 
-  async cleanupTempRepos(): Promise<void> {
+  async cleanupTempRepos(forceCleanUp?: boolean): Promise<void> {
     const tempRepos = await this.getTempRepos();
     const now = Date.now();
     const remaining = [];
 
     for (const repo of tempRepos) {
-      if (now - repo.createdAt > BackgroundTempRepoManager.MAX_AGE) {
+      if (forceCleanUp || now - repo.createdAt > BackgroundTempRepoManager.MAX_AGE) {
         try {
           await this.githubService.deleteRepo(repo.owner, repo.tempRepo);
         } catch (error) {
@@ -129,9 +130,18 @@ export class BackgroundTempRepoManager {
     await chrome.storage.local.set({
       [STORAGE_KEY]: remaining,
     });
+
+    this.stopCleanupInterval();
   }
 
   private startCleanupInterval(): void {
-    setInterval(() => this.cleanupTempRepos(), BackgroundTempRepoManager.CLEANUP_INTERVAL);
+    this.cleanupInterval = setInterval(() => this.cleanupTempRepos(), BackgroundTempRepoManager.CLEANUP_INTERVAL);
+  }
+
+  private stopCleanupInterval(): void {
+    if (this.cleanupInterval) {
+      clearInterval(this.cleanupInterval);
+      this.cleanupInterval = null;
+    }
   }
 }
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 70384ca..80e5a10 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -10,7 +10,8 @@ export type MessageType =
   | 'CONTENT_SCRIPT_READY'
   | 'GITHUB_SETTINGS_CHANGED'
   | 'OPEN_SETTINGS'
-  | 'IMPORT_PRIVATE_REPO';
+  | 'IMPORT_PRIVATE_REPO'
+  | 'DELETE_TEMP_REPO';
 
 export interface Message {
   type: MessageType;

From 9d0cad4199cb6b1b97eb7e4f13846d8c0afedef0 Mon Sep 17 00:00:00 2001
From: "Mamerto Fabian Jr (aider)" <mfabianjr@gmail.com>
Date: Wed, 22 Jan 2025 23:07:01 +0800
Subject: [PATCH 72/75] feat: Enhance temp repo modal with state tracking and
 visual feedback

---
 src/popup/App.svelte | 70 +++++++++++++++++++++++++++++++-------------
 1 file changed, 50 insertions(+), 20 deletions(-)

diff --git a/src/popup/App.svelte b/src/popup/App.svelte
index 6793c2d..878b753 100644
--- a/src/popup/App.svelte
+++ b/src/popup/App.svelte
@@ -47,6 +47,8 @@
   let showTempRepoModal = false;
   let tempRepoData: TempRepoMetadata | null = null;
   let port: chrome.runtime.Port;
+  let hasDeletedTempRepo = false;
+  let hasUsedTempRepoName = false;
 
   interface TempRepoMetadata {
     originalRepo: string;
@@ -165,7 +167,12 @@
           repo: tempRepoData.tempRepo
         }
       });
-      showTempRepoModal = false;
+      hasDeletedTempRepo = true;
+      
+      // Only close modal if both actions are completed
+      if (hasDeletedTempRepo && hasUsedTempRepoName) {
+        showTempRepoModal = false;
+      }
     }
   }
 
@@ -173,7 +180,12 @@
     if (tempRepoData) {
       repoName = tempRepoData.originalRepo;
       await saveSettings();
-      showTempRepoModal = false;
+      hasUsedTempRepoName = true;
+      
+      // Only close modal if both actions are completed
+      if (hasDeletedTempRepo && hasUsedTempRepoName) {
+        showTempRepoModal = false;
+      }
     }
   }
 
@@ -358,26 +370,44 @@
   <Modal show={showTempRepoModal} title="Private Repository Import">
     <div class="space-y-4">
       <p class="text-slate-300">
-        It looks like you just imported a private GitHub repository. Would you like to:
+        It looks like you just imported a private GitHub repository. Please complete both actions below:
       </p>
       
       <div class="space-y-2">
-        <Button
-          variant="outline"
-          class="w-full border-slate-700 hover:bg-slate-800"
-          on:click={handleDeleteTempRepo}
-        >
-          Delete the temporary public repository now
-        </Button>
-        
-        <Button
-          variant="outline"
-          class="w-full border-slate-700 hover:bg-slate-800"
-          on:click={handleUseTempRepoName}
-        >
-          Use original repository name ({tempRepoData?.originalRepo})
-        </Button>
-        
+        {#if !hasDeletedTempRepo}
+          <div class="space-y-2">
+            <p class="text-sm text-slate-400">1. Clean up the temporary repository:</p>
+            <Button
+              variant="outline"
+              class="w-full border-slate-700 hover:bg-slate-800"
+              on:click={handleDeleteTempRepo}
+            >
+              Delete the temporary public repository now
+            </Button>
+          </div>
+        {:else}
+          <div class="text-sm text-green-400 p-2 border border-green-800 bg-green-900/20 rounded-md">
+            ✓ Temporary repository has been deleted
+          </div>
+        {/if}
+
+        {#if !hasUsedTempRepoName}
+          <div class="space-y-2">
+            <p class="text-sm text-slate-400">2. Configure repository name:</p>
+            <Button
+              variant="outline"
+              class="w-full border-slate-700 hover:bg-slate-800"
+              on:click={handleUseTempRepoName}
+            >
+              Use original repository name ({tempRepoData?.originalRepo})
+            </Button>
+          </div>
+        {:else}
+          <div class="text-sm text-green-400 p-2 border border-green-800 bg-green-900/20 rounded-md">
+            ✓ Repository name has been configured
+          </div>
+        {/if}
+
         <Button
           variant="ghost"
           class="w-full text-slate-400 hover:text-slate-300"
@@ -388,7 +418,7 @@
       </div>
       
       <p class="text-sm text-slate-400">
-        Note: The temporary repository will be automatically deleted in 1 minute.
+        Note: The temporary repository will be automatically deleted in 1 minute if not deleted manually.
       </p>
     </div>
   </Modal>

From 8bc8ead076832d5dca3494d6e5aa1622808edb14 Mon Sep 17 00:00:00 2001
From: Mamerto Fabian Jr <mfabianjr@gmail.com>
Date: Wed, 22 Jan 2025 23:25:25 +0800
Subject: [PATCH 73/75] refactor: Improve code readability and structure in
 TempRepoManager and ProjectStatus components

---
 src/background/TempRepoManager.ts       |  5 +++-
 src/lib/components/ProjectStatus.svelte | 10 ++++---
 src/popup/App.svelte                    | 36 +++++++++++++++----------
 3 files changed, 32 insertions(+), 19 deletions(-)

diff --git a/src/background/TempRepoManager.ts b/src/background/TempRepoManager.ts
index 4e306eb..0567afb 100644
--- a/src/background/TempRepoManager.ts
+++ b/src/background/TempRepoManager.ts
@@ -135,7 +135,10 @@ export class BackgroundTempRepoManager {
   }
 
   private startCleanupInterval(): void {
-    this.cleanupInterval = setInterval(() => this.cleanupTempRepos(), BackgroundTempRepoManager.CLEANUP_INTERVAL);
+    this.cleanupInterval = setInterval(
+      () => this.cleanupTempRepos(),
+      BackgroundTempRepoManager.CLEANUP_INTERVAL
+    );
   }
 
   private stopCleanupInterval(): void {
diff --git a/src/lib/components/ProjectStatus.svelte b/src/lib/components/ProjectStatus.svelte
index f66252c..93be5e7 100644
--- a/src/lib/components/ProjectStatus.svelte
+++ b/src/lib/components/ProjectStatus.svelte
@@ -23,7 +23,7 @@
     message: string;
   } | null = null;
 
-  onMount(async () => {
+  export const getProjectStatus = async () => {
     try {
       const githubService = new GitHubService(token);
 
@@ -61,11 +61,13 @@
       // Reset loading states on error
       Object.keys(isLoading).forEach((key) => (isLoading[key as keyof typeof isLoading] = false));
     }
+  };
+
+  onMount(async () => {
+    await getProjectStatus();
   });
 
-  const dispatch = createEventDispatcher<{
-    switchTab: string;
-  }>();
+  const dispatch = createEventDispatcher();
 
   function openGitHub(event: MouseEvent | KeyboardEvent) {
     event.stopPropagation();
diff --git a/src/popup/App.svelte b/src/popup/App.svelte
index 878b753..ec612e2 100644
--- a/src/popup/App.svelte
+++ b/src/popup/App.svelte
@@ -49,6 +49,7 @@
   let port: chrome.runtime.Port;
   let hasDeletedTempRepo = false;
   let hasUsedTempRepoName = false;
+  let projectStatusRef: ProjectStatus;
 
   interface TempRepoMetadata {
     originalRepo: string;
@@ -86,7 +87,7 @@
   onMount(async () => {
     // Add dark mode to the document
     document.documentElement.classList.add('dark');
-    
+
     // Connect to background service
     port = chrome.runtime.connect({ name: 'popup' });
 
@@ -150,7 +151,7 @@
     // Check for temp repos
     const result = await chrome.storage.local.get(STORAGE_KEY);
     const tempRepos: TempRepoMetadata[] = result[STORAGE_KEY] || [];
-    
+
     if (tempRepos.length > 0 && parsedProjectId) {
       // Get the most recent temp repo
       tempRepoData = tempRepos[tempRepos.length - 1];
@@ -164,11 +165,11 @@
         type: 'DELETE_TEMP_REPO',
         data: {
           owner: tempRepoData.owner,
-          repo: tempRepoData.tempRepo
-        }
+          repo: tempRepoData.tempRepo,
+        },
       });
       hasDeletedTempRepo = true;
-      
+
       // Only close modal if both actions are completed
       if (hasDeletedTempRepo && hasUsedTempRepoName) {
         showTempRepoModal = false;
@@ -180,8 +181,9 @@
     if (tempRepoData) {
       repoName = tempRepoData.originalRepo;
       await saveSettings();
+      await projectStatusRef.getProjectStatus();
       hasUsedTempRepoName = true;
-      
+
       // Only close modal if both actions are completed
       if (hasDeletedTempRepo && hasUsedTempRepoName) {
         showTempRepoModal = false;
@@ -271,6 +273,7 @@
               <StatusAlert on:switchTab={handleSwitchTab} />
             {:else}
               <ProjectStatus
+                bind:this={projectStatusRef}
                 projectId={parsedProjectId}
                 gitHubUsername={repoOwner}
                 {repoName}
@@ -369,10 +372,10 @@
   </Card>
   <Modal show={showTempRepoModal} title="Private Repository Import">
     <div class="space-y-4">
-      <p class="text-slate-300">
-        It looks like you just imported a private GitHub repository. Please complete both actions below:
+      <p class="text-amber-300 font-medium">
+        It looks like you just imported a private GitHub repository. Would you like to:
       </p>
-      
+
       <div class="space-y-2">
         {#if !hasDeletedTempRepo}
           <div class="space-y-2">
@@ -386,7 +389,9 @@
             </Button>
           </div>
         {:else}
-          <div class="text-sm text-green-400 p-2 border border-green-800 bg-green-900/20 rounded-md">
+          <div
+            class="text-sm text-green-400 p-2 border border-green-800 bg-green-900/20 rounded-md"
+          >
             ✓ Temporary repository has been deleted
           </div>
         {/if}
@@ -403,7 +408,9 @@
             </Button>
           </div>
         {:else}
-          <div class="text-sm text-green-400 p-2 border border-green-800 bg-green-900/20 rounded-md">
+          <div
+            class="text-sm text-green-400 p-2 border border-green-800 bg-green-900/20 rounded-md"
+          >
             ✓ Repository name has been configured
           </div>
         {/if}
@@ -411,14 +418,15 @@
         <Button
           variant="ghost"
           class="w-full text-slate-400 hover:text-slate-300"
-          on:click={() => showTempRepoModal = false}
+          on:click={() => (showTempRepoModal = false)}
         >
           Dismiss
         </Button>
       </div>
-      
+
       <p class="text-sm text-slate-400">
-        Note: The temporary repository will be automatically deleted in 1 minute if not deleted manually.
+        Note: The temporary repository will be automatically deleted in 1 minute if not deleted
+        manually.
       </p>
     </div>
   </Modal>

From fe7efc6923d51a933ba82f1c04e6d2febeeb44e6 Mon Sep 17 00:00:00 2001
From: Mamerto Fabian Jr <mfabianjr@gmail.com>
Date: Wed, 22 Jan 2025 23:34:44 +0800
Subject: [PATCH 74/75] refactor: Rename fine-grained permission functions for
 clarity and consistency

---
 src/lib/components/GitHubSettings.svelte | 30 +++++++++++-------------
 src/services/GitHubService.ts            |  4 ++--
 src/services/GitHubTokenValidator.ts     |  6 +----
 3 files changed, 17 insertions(+), 23 deletions(-)

diff --git a/src/lib/components/GitHubSettings.svelte b/src/lib/components/GitHubSettings.svelte
index 76ea376..eab1840 100644
--- a/src/lib/components/GitHubSettings.svelte
+++ b/src/lib/components/GitHubSettings.svelte
@@ -204,7 +204,7 @@
     }
   }
 
-  async function checkFineGrainedPermissions() {
+  async function checkTokenPermissions() {
     if (!githubToken || isCheckingPermissions) return;
 
     isCheckingPermissions = true;
@@ -218,7 +218,7 @@
     try {
       const githubService = new GitHubService(githubToken);
 
-      const result = await githubService.verifyFineGrainedPermissions(
+      const result = await githubService.verifyTokenPermissions(
         repoOwner,
         ({ permission, isValid }) => {
           currentCheck = permission;
@@ -264,18 +264,16 @@
   const handleSave = async (event: Event) => {
     event.preventDefault();
 
-    if (tokenType === 'fine-grained') {
-      const THIRTY_DAYS = 30 * 24 * 60 * 60 * 1000;
-      const needsCheck =
-        previousToken !== githubToken ||
-        !lastPermissionCheck ||
-        Date.now() - lastPermissionCheck > THIRTY_DAYS;
-
-      if (needsCheck) {
-        await checkFineGrainedPermissions();
-        if (permissionError) {
-          return; // Don't proceed if permissions check failed
-        }
+    const THIRTY_DAYS = 30 * 24 * 60 * 60 * 1000;
+    const needsCheck =
+      previousToken !== githubToken ||
+      !lastPermissionCheck ||
+      Date.now() - lastPermissionCheck > THIRTY_DAYS;
+
+    if (needsCheck) {
+      await checkTokenPermissions();
+      if (permissionError) {
+        return; // Don't proceed if permissions check failed
       }
     }
 
@@ -329,14 +327,14 @@
           <p class="text-sm text-emerald-400">
             {tokenType === 'classic' ? '🔑 Classic' : '✨ Fine-grained'} token detected
           </p>
-          {#if tokenType === 'fine-grained' && isTokenValid}
+          {#if isTokenValid}
             <div class="flex items-center gap-2">
               <Button
                 type="button"
                 variant="outline"
                 size="sm"
                 class="text-xs"
-                on:click={checkFineGrainedPermissions}
+                on:click={checkTokenPermissions}
                 disabled={isCheckingPermissions}
               >
                 {#if isCheckingPermissions}
diff --git a/src/services/GitHubService.ts b/src/services/GitHubService.ts
index 4416092..77e5bc9 100644
--- a/src/services/GitHubService.ts
+++ b/src/services/GitHubService.ts
@@ -52,11 +52,11 @@ export class GitHubService extends BaseGitHubService {
     return this.tokenValidator.validateTokenAndUser(username);
   }
 
-  async verifyFineGrainedPermissions(
+  async verifyTokenPermissions(
     username: string,
     onProgress?: ProgressCallback
   ): Promise<{ isValid: boolean; error?: string }> {
-    return this.tokenValidator.verifyFineGrainedPermissions(username, onProgress);
+    return this.tokenValidator.verifyTokenPermissions(username, onProgress);
   }
 
   async repoExists(owner: string, repo: string): Promise<boolean> {
diff --git a/src/services/GitHubTokenValidator.ts b/src/services/GitHubTokenValidator.ts
index b6def02..cdd735d 100644
--- a/src/services/GitHubTokenValidator.ts
+++ b/src/services/GitHubTokenValidator.ts
@@ -23,14 +23,10 @@ export class GitHubTokenValidator extends BaseGitHubService {
     return new Promise((resolve) => setTimeout(resolve, ms));
   }
 
-  async verifyFineGrainedPermissions(
+  async verifyTokenPermissions(
     username: string,
     onProgress?: ProgressCallback
   ): Promise<{ isValid: boolean; error?: string }> {
-    if (!this.isFineGrainedToken()) {
-      return { isValid: false, error: 'Not a fine-grained token' };
-    }
-
     try {
       // Create a temporary test repo
       const timestamp = Date.now();

From bb80ee178254b7191ccea9f8e94f632395277814 Mon Sep 17 00:00:00 2001
From: Mamerto Fabian Jr <mfabianjr@gmail.com>
Date: Wed, 22 Jan 2025 23:40:47 +0800
Subject: [PATCH 75/75] feat: Handle 204 No Content responses and improve JSON
 parsing logic

---
 src/services/BaseGitHubService.ts | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/services/BaseGitHubService.ts b/src/services/BaseGitHubService.ts
index 8f37996..7f62cdd 100644
--- a/src/services/BaseGitHubService.ts
+++ b/src/services/BaseGitHubService.ts
@@ -44,6 +44,19 @@ export abstract class BaseGitHubService {
       throw apiError;
     }
 
-    return await response.json();
+    // Return null for 204 No Content responses
+    if (response.status === 204) {
+      return null;
+    }
+
+    // Only try to parse JSON if there's actual content
+    const contentLength = response.headers.get('content-length');
+    const hasContent = contentLength === null || parseInt(contentLength) > 0;
+
+    if (hasContent) {
+      return await response.json();
+    }
+
+    return null;
   }
 }