website refactor

apps/website/components/layout/AppHeader.tsx

@@ -21,17 +21,11 @@ export function AppHeader() {
     <Surface
       as="header"
       variant="dark"
-      position="fixed"
-      top={0}
-      left={0}
-      right={0}
-      height="56px"
+      height="14"
       zIndex={50}
-      style={{
-        borderBottom: '1px solid var(--ui-color-border-default)',
-        background: 'rgba(13, 13, 14, 0.8)',
-        backdropFilter: 'blur(12px)',
-      }}
+      borderBottom
+      backgroundColor="rgba(13, 13, 14, 0.8)"
+      className="backdrop-blur-xl"
     >
       <Box display="flex" alignItems="center" justifyContent="between" width="full" h="full" px={6}>
         {/* Left: Brand & Context */}
@@ -44,9 +38,9 @@ export function AppHeader() {
               alignItems="center" 
               gap={3} 
               paddingLeft={4} 
-              borderLeft={true} 
-              h="24px"
-              style={{ borderLeftColor: 'var(--ui-color-border-muted)' }}
+              borderLeft
+              h="6"
+              borderColor="var(--ui-color-border-muted)"
             >
                <Text size="xs" weight="medium" variant="low" font="mono" uppercase>
                  Workspace
@@ -65,7 +59,7 @@ export function AppHeader() {
         {/* Right: Session Controls */}
         <Box display="flex" alignItems="center" gap={4}>
           <Box display={{ base: 'none', sm: 'flex' }} alignItems="center" gap={2}>
-            <Box w="6px" h="6px" rounded="full" bg="var(--ui-color-intent-success)" />
+            <Box w="1.5" h="1.5" rounded="full" bg="var(--ui-color-intent-success)" />
             <Text size="xs" variant="low" weight="bold" font="mono" letterSpacing="0.1em">
               LIVE
             </Text>