Admin UI: local-only 'Use Local Admin Key' button; add DOM event navigation; add 'settings/keys' route; show actionable 401/403 banner on Inbox with link to Keys + docs

Author: Faxbot Agent

api/admin_ui/src/App.tsx

@@ -259,6 +259,10 @@ function AppContent() {
         setTabValue(4);
         setSettingsTab(3);
         break;
+      case 'settings/keys':
+        setTabValue(4);
+        setSettingsTab(3);
+        break;
       case 'jobs':
         setTabValue(2);
         break;
@@ -277,6 +281,17 @@ function AppContent() {
     if (isMobile) setMobileOpen(false);
   };
 
+  // Listen for simple navigation events from child components
+  useEffect(() => {
+    const handler = (e: any) => { if (e?.detail) handleNavigate(e.detail); };
+    window.addEventListener('navigate-to', handler as any);
+    window.addEventListener('faxbot:navigate', handler as any);
+    return () => {
+      window.removeEventListener('navigate-to', handler as any);
+      window.removeEventListener('faxbot:navigate', handler as any);
+    };
+  }, []);
+
   // Auto-login if key exists
   useEffect(() => {
     if (apiKey && !authenticated) {
@@ -485,7 +500,19 @@ function AppContent() {
                   sx={{ mt: 3 }}
                   autoFocus
                 />
-                
+
+                {/* Local-only helper: prefill known bootstrap key for dev */}
+                {['localhost', '127.0.0.1'].includes(window.location.hostname) && (
+                  <Button
+                    fullWidth
+                    variant="outlined"
+                    onClick={() => { const k = 'fbk_live_local_admin'; setApiKey(k); handleLogin(k); }}
+                    sx={{ mt: 2, borderRadius: 2 }}
+                  >
+                    Use Local Admin Key
+                  </Button>
+                )}
+
                 <Button
                   fullWidth
                   variant="contained"

api/admin_ui/src/components/Inbound.tsx

@@ -80,7 +80,8 @@ function Inbound({ client, docsBase }: InboundProps) {
       const data = await client.listInbound();
       setFaxes(data);
     } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to fetch inbound faxes');
+      const msg = err instanceof Error ? err.message : 'Failed to fetch inbound faxes';
+      setError(msg);
     } finally {
       setLoading(false);
     }
@@ -264,6 +265,16 @@ function Inbound({ client, docsBase }: InboundProps) {
 
   return (
     <Box>
+      {/* Guidance banner when auth/scopes block inbox */}
+      {error && /401|403|insufficient|scope/i.test(error) && (
+        <Alert severity="warning" sx={{ mb: 2, borderRadius: 2 }}>
+          You are not authorized to view inbound faxes. Use an API key with inbound:list and inbound:read.
+          <Box sx={{ mt: 1, display: 'flex', gap: 1, flexWrap: 'wrap' }}>
+            <Button size="small" variant="outlined" onClick={() => window.dispatchEvent(new CustomEvent('faxbot:navigate', { detail: 'settings/keys' }))}>Open API Keys</Button>
+            <Button size="small" href={(docsBase || 'https://dmontgomery40.github.io/Faxbot') + '/admin-console/api-keys/'} target="_blank" rel="noreferrer">Learn more</Button>
+          </Box>
+        </Alert>
+      )}
       <Box 
         display="flex" 
         justifyContent="space-between"