From 422f9f0482b9ad621b9c5c50fcb21c0743dc46f1 Mon Sep 17 00:00:00 2001
From: Tim Disney <tim@disnetdev.com>
Date: Tue, 24 Feb 2026 12:02:46 -0800
Subject: [PATCH] prompt to re-login on scope upgrade

---
 src/lib/services/api.ts       |  9 +++++++
 src/lib/stores/auth.svelte.ts | 13 +++++++++++
 src/routes/+layout.svelte     | 44 +++++++++++++++++++++++++++++++++++
 3 files changed, 66 insertions(+)

diff --git a/src/lib/services/api.ts b/src/lib/services/api.ts
index a79abac..3eafde9 100644
--- a/src/lib/services/api.ts
+++ b/src/lib/services/api.ts
@@ -45,12 +45,18 @@ export class UrlSaveLimitError extends Error {
 
 class ApiClient {
   private onUnauthorized: (() => void) | null = null;
+  private onScopeUpgradeRequired: (() => void) | null = null;
 
   // Set callback for when 401 is received (session invalid)
   setOnUnauthorized(callback: () => void) {
     this.onUnauthorized = callback;
   }
 
+  // Set callback for when 403 scope_upgrade_required is received
+  setOnScopeUpgradeRequired(callback: () => void) {
+    this.onScopeUpgradeRequired = callback;
+  }
+
   private async fetch<T>(path: string, options: RequestInit = {}): Promise<T> {
     const headers: HeadersInit = {
       'Content-Type': 'application/json',
@@ -78,6 +84,9 @@ class ApiClient {
       if (response.status === 403) {
         const body = await response.json().catch(() => ({ error: 'Forbidden' }));
         if ((body as { error: string }).error === 'scope_upgrade_required') {
+          if (this.onScopeUpgradeRequired) {
+            this.onScopeUpgradeRequired();
+          }
           throw new ScopeUpgradeError((body as { message?: string }).message);
         }
         if ((body as { error: string }).error === 'url_save_limit_reached') {
diff --git a/src/lib/stores/auth.svelte.ts b/src/lib/stores/auth.svelte.ts
index 5279021..41e058e 100644
--- a/src/lib/stores/auth.svelte.ts
+++ b/src/lib/stores/auth.svelte.ts
@@ -8,6 +8,7 @@ interface AuthState {
   user: User | null;
   isLoading: boolean;
   error: string | null;
+  scopeUpgradeRequired: boolean;
 }
 
 function createAuthStore() {
@@ -15,6 +16,7 @@ function createAuthStore() {
     user: null,
     isLoading: true,
     error: null,
+    scopeUpgradeRequired: false,
   });
 
   // Handle 401 - session expired/invalid on the backend
@@ -46,6 +48,11 @@ function createAuthStore() {
 
     // Set up 401 handler
     api.setOnUnauthorized(handleUnauthorized);
+
+    // Set up scope upgrade handler
+    api.setOnScopeUpgradeRequired(() => {
+      state.scopeUpgradeRequired = true;
+    });
   }
 
   // Set user after successful authentication
@@ -114,6 +121,12 @@ function createAuthStore() {
     get error() {
       return state.error;
     },
+    get scopeUpgradeRequired() {
+      return state.scopeUpgradeRequired;
+    },
+    dismissScopeUpgrade() {
+      state.scopeUpgradeRequired = false;
+    },
     setUser,
     verifySession,
     logout,
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 36ca718..22a602e 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -186,6 +186,16 @@
 <div class="app">
   {#if !auth.isLoading}
     {#if auth.isAuthenticated}
+      {#if auth.scopeUpgradeRequired}
+        <div class="scope-upgrade-banner">
+          <span
+            >Your session was created with outdated permissions. Please <a href="/auth/login"
+              >log in again</a
+            > to restore full functionality.</span
+          >
+          <button class="dismiss-btn" onclick={() => auth.dismissScopeUpgrade()}>Dismiss</button>
+        </div>
+      {/if}
       <div class="app-container">
         <Sidebar />
         <button
@@ -383,6 +393,40 @@
     margin: 0 0.5rem;
   }
 
+  .scope-upgrade-banner {
+    background: var(--color-warning-bg, #fff3cd);
+    color: var(--color-warning-text, #856404);
+    border-bottom: 1px solid var(--color-warning-border, #ffc107);
+    padding: 0.625rem 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+    font-size: 0.875rem;
+    text-align: center;
+  }
+
+  .scope-upgrade-banner a {
+    color: inherit;
+    font-weight: 600;
+    text-decoration: underline;
+  }
+
+  .scope-upgrade-banner .dismiss-btn {
+    background: none;
+    border: 1px solid var(--color-warning-text, #856404);
+    color: inherit;
+    border-radius: 4px;
+    padding: 0.25rem 0.5rem;
+    cursor: pointer;
+    font-size: 0.75rem;
+    white-space: nowrap;
+  }
+
+  .scope-upgrade-banner .dismiss-btn:hover {
+    background: rgba(0, 0, 0, 0.05);
+  }
+
   @media (max-width: 1000px) {
     .app-container {
       flex-direction: column;