From 2aa18d6ffb3ccdcbf47eb466aed7e651b756769c Mon Sep 17 00:00:00 2001
From: Mason Fox <masonfox22@gmail.com>
Date: Fri, 23 Jan 2026 15:52:39 -0500
Subject: [PATCH] fix: Improve mousehole fallback handling and UI feedback

- Show fallback status in API response when state.json not found
- Add yellow warning banner when using fallback token
- Display correct source file path in fallback mode
- Improve status message to indicate fallback usage
- Add error message display in UI
---
 app/api/mam-token/route.js      |  6 +++-
 app/components/TokenManager.jsx | 64 ++++++++++++++++++++++++---------
 2 files changed, 52 insertions(+), 18 deletions(-)

diff --git a/app/api/mam-token/route.js b/app/api/mam-token/route.js
index a354eec..bf58e72 100644
--- a/app/api/mam-token/route.js
+++ b/app/api/mam-token/route.js
@@ -62,7 +62,11 @@ export async function GET() {
       token: maskToken(token),
       fullLength: token.length,
       location: MAM_TOKEN_FILE,
-      mouseholeInfo: { enabled: false },
+      mouseholeInfo: mouseholeEnabled ? { 
+        enabled: true, 
+        usingFallback: true,
+        error: "state.json not found, using fallback token file" 
+      } : { enabled: false },
     });
   } catch (error) {
     console.error(`Failed to read MAM token: ${error.message}`);
diff --git a/app/components/TokenManager.jsx b/app/components/TokenManager.jsx
index 3552269..67c4333 100644
--- a/app/components/TokenManager.jsx
+++ b/app/components/TokenManager.jsx
@@ -116,28 +116,53 @@ export default function TokenManager({ onTokenUpdate }) {
       {isMouseholeMode ? (
         // Mousehole Read-Only View
         <div className="space-y-4">
-          <div className="p-4 bg-purple-50 border border-purple-200 rounded-md">
-            <div className="flex items-start gap-3">
-              <div className="flex-shrink-0 mt-1">
-                <svg className="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
-                </svg>
+          {tokenData.mouseholeInfo?.usingFallback ? (
+            // Fallback Warning Banner
+            <div className="p-4 bg-yellow-50 border border-yellow-200 rounded-md">
+              <div className="flex items-start gap-3">
+                <div className="flex-shrink-0 mt-1">
+                  <svg className="w-5 h-5 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                  </svg>
+                </div>
+                <div className="flex-1">
+                  <h3 className="text-sm font-semibold text-yellow-900 mb-1">
+                    Mousehole State File Not Found
+                  </h3>
+                  <p className="text-sm text-yellow-700">
+                    Mousehole mode is enabled, but the state.json file couldn&apos;t be found. Using fallback token from static file.
+                  </p>
+                  <p className="text-xs text-yellow-600 mt-2">
+                    Verify that mousehole is running and the volume mount is correct.
+                  </p>
+                </div>
               </div>
-              <div className="flex-1">
-                <h3 className="text-sm font-semibold text-purple-900 mb-1">
-                  Token Managed by Mousehole
-                </h3>
-                <p className="text-sm text-purple-700">
-                  Your MAM token is dynamically managed by the mousehole service. Token editing is disabled.
-                </p>
+            </div>
+          ) : (
+            // Normal Mousehole Banner
+            <div className="p-4 bg-purple-50 border border-purple-200 rounded-md">
+              <div className="flex items-start gap-3">
+                <div className="flex-shrink-0 mt-1">
+                  <svg className="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+                  </svg>
+                </div>
+                <div className="flex-1">
+                  <h3 className="text-sm font-semibold text-purple-900 mb-1">
+                    Token Managed by Mousehole
+                  </h3>
+                  <p className="text-sm text-purple-700">
+                    Your MAM token is dynamically managed by the mousehole service. Token editing is disabled.
+                  </p>
+                </div>
               </div>
             </div>
-          </div>
+          )}
 
           <div className="p-3 bg-gray-50 rounded-md">
             <p className="text-sm text-gray-600 mb-2">
-              Status: <span className="font-medium text-green-600">
-                {tokenData.exists ? 'Token active' : 'Waiting for mousehole...'}
+              Status: <span className={`font-medium ${tokenData.exists ? 'text-green-600' : 'text-red-600'}`}>
+                {tokenData.exists ? (tokenData.mouseholeInfo?.usingFallback ? 'Using fallback token' : 'Token active') : 'Waiting for mousehole...'}
               </span>
             </p>
             {tokenData.exists && (
@@ -158,8 +183,13 @@ export default function TokenManager({ onTokenUpdate }) {
               </>
             )}
             <p className="text-xs text-gray-500 mt-2">
-              Source: <code className="bg-gray-200 px-1 rounded">{tokenData.mouseholeInfo?.stateFile || tokenData.location}</code>
+              Source: <code className="bg-gray-200 px-1 rounded">{tokenData.location}</code>
             </p>
+            {tokenData.mouseholeInfo?.error && (
+              <p className="text-xs text-red-600 mt-1">
+                {tokenData.mouseholeInfo.error}
+              </p>
+            )}
           </div>
 
           <div className="py-4 px-6 bg-blue-50 rounded-md">