Update bface UI and security work

src/ui/components/Shell.jsx

@@ -5,10 +5,11 @@
  */
 
 import React, { createContext, useContext, useState, useCallback, useEffect } from 'react';
-import { XStack, YStack, Text, Button } from 'tamagui';
+import { XStack, YStack, Text, Button, Spinner } from 'tamagui';
 import RecordsModel from '../../data/RecordsModel.js';
 import { getIcon } from './IconMapper.jsx';
 import { SidePanelShell } from './SidePanelShell.jsx';
+import { networkActivityManager } from '../../platform/api.js';
 
 // ============================================================================
 // Shell Context
@@ -627,6 +628,7 @@ export function ShellProvider({
   // Toast state
   const [toasts, setToasts] = useState([]);
   const [notificationsOpen, setNotificationsOpen] = useState(notificationCenterManager.isOpen());
+  const [networkActivity, setNetworkActivity] = useState(networkActivityManager.getState());
 
   // Initialize shell manager with setters
   useEffect(() => {
@@ -647,6 +649,8 @@ export function ShellProvider({
     notificationCenterManager._init(setNotificationsOpen);
   }, []);
 
+  useEffect(() => networkActivityManager.subscribe(setNetworkActivity), []);
+
   // Update shell manager state when it changes
   useEffect(() => {
     shellManager._updateState({
@@ -711,6 +715,7 @@ export function ShellProvider({
   return (
     <ShellContext.Provider value={value}>
       {children}
+      <NetworkActivityOverlay visible={networkActivity.visible} />
       <NotificationCenterPanel open={notificationsOpen} />
     </ShellContext.Provider>
   );
@@ -769,7 +774,7 @@ function Toast({ toast, onClose, onPause, onResume }) {
       backgroundColor={style.backgroundColor}
       borderWidth={1}
       borderColor={style.borderColor}
-      borderRadius="$4"
+      borderRadius="$radiusMd"
       padding="$3"
       minWidth={300}
       maxWidth={400}
@@ -833,7 +838,7 @@ function NotificationRecord({ record, onDismiss }) {
       backgroundColor={style.backgroundColor}
       borderWidth={1}
       borderColor={style.borderColor}
-      borderRadius="$4"
+      borderRadius="$radiusMd"
       padding="$3"
       gap="$2"
       alignItems="flex-start"
@@ -1023,6 +1028,46 @@ export function ToastViewport() {
   );
 }
 
+function NetworkActivityOverlay({ visible = false }) {
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <YStack
+      position="fixed"
+      top={0}
+      left={0}
+      right={0}
+      bottom={0}
+      zIndex={21500}
+      alignItems="center"
+      justifyContent="center"
+      pointerEvents="none"
+    >
+      <YStack
+        padding="$4"
+        gap="$2"
+        alignItems="center"
+        justifyContent="center"
+        backgroundColor="$bgPanel"
+        borderWidth={1}
+        borderColor="$lineSubtle"
+        borderRadius="$radiusLg"
+        shadowColor="$shadowColor"
+        shadowOpacity={0.15}
+        shadowRadius={12}
+        elevation={6}
+      >
+        <Spinner size="large" color="$accentColor" />
+        <Text color="$textSecondary" fontSize="$3">
+          Working...
+        </Text>
+      </YStack>
+    </YStack>
+  );
+}
+
 // ============================================================================
 // Shell Placement
 // ============================================================================