refactor: migrate extension to TypeScript and add Material-UI components

hero_vault_extension/src/components/Header.tsx

@@ -0,0 +1,97 @@
+import { AppBar, Toolbar, Typography, IconButton, Box, Chip } from '@mui/material';
+import LockIcon from '@mui/icons-material/Lock';
+import LockOpenIcon from '@mui/icons-material/LockOpen';
+import SignalWifiStatusbar4BarIcon from '@mui/icons-material/SignalWifiStatusbar4Bar';
+import SignalWifiOffIcon from '@mui/icons-material/SignalWifiOff';
+import { useSessionStore } from '../store/sessionStore';
+
+const Header = () => {
+  const { 
+    isSessionUnlocked, 
+    currentKeyspace, 
+    currentKeypair, 
+    isWebSocketConnected,
+    lockSession 
+  } = useSessionStore();
+
+  const handleLockClick = async () => {
+    if (isSessionUnlocked) {
+      await lockSession();
+    }
+  };
+
+  return (
+    <AppBar position="static" color="primary" elevation={0}>
+      <Toolbar>
+        <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
+          Hero Vault
+        </Typography>
+        
+        <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
+          {/* WebSocket connection status */}
+          {isWebSocketConnected ? (
+            <Chip 
+              icon={<SignalWifiStatusbar4BarIcon fontSize="small" />} 
+              label="Connected" 
+              size="small" 
+              color="success" 
+              variant="outlined"
+            />
+          ) : (
+            <Chip 
+              icon={<SignalWifiOffIcon fontSize="small" />} 
+              label="Offline" 
+              size="small" 
+              color="default" 
+              variant="outlined" 
+            />
+          )}
+          
+          {/* Session status */}
+          {isSessionUnlocked ? (
+            <Chip 
+              icon={<LockOpenIcon fontSize="small" />} 
+              label={currentKeyspace || 'Unlocked'} 
+              size="small" 
+              color="primary" 
+              variant="outlined"
+            />
+          ) : (
+            <Chip 
+              icon={<LockIcon fontSize="small" />} 
+              label="Locked" 
+              size="small" 
+              color="error" 
+              variant="outlined" 
+            />
+          )}
+          
+          {/* Current keypair */}
+          {isSessionUnlocked && currentKeypair && (
+            <Chip 
+              label={currentKeypair.name || currentKeypair.id} 
+              size="small" 
+              color="secondary" 
+              variant="outlined"
+            />
+          )}
+          
+          {/* Lock button */}
+          {isSessionUnlocked && (
+            <IconButton 
+              edge="end" 
+              color="inherit" 
+              onClick={handleLockClick} 
+              size="small"
+              aria-label="lock session"
+            >
+              <LockIcon />
+            </IconButton>
+          )}
+        </Box>
+      </Toolbar>
+    </AppBar>
+  );
+};
+
+export default Header;