website refactor

apps/website/components/AppWrapper.tsx

@@ -27,8 +27,8 @@ export function AppWrapper({ children, enabledFlags }: AppWrapperProps) {
                 <NotificationIntegration />
                 <EnhancedErrorBoundary enableDevOverlay={process.env.NODE_ENV === 'development'}>
                   {children}
-                  {process.env.NODE_ENV === 'development' && <DevToolbar />}
                 </EnhancedErrorBoundary>
+                {process.env.NODE_ENV === 'development' && <DevToolbar />}
               </NotificationProvider>
             </FeatureFlagProvider>
           </AuthProvider>

apps/website/components/app/AppShell.tsx

@@ -7,18 +7,24 @@ interface AppShellProps {
 
 /**
  * AppShell is the root container for the entire application layout.
- * It provides the base background and layout structure.
+ * Provides the base structure with cockpit-inspired design.
  */
 export function AppShell({ children }: AppShellProps) {
   return (
-    <Box 
-      minHeight="100vh" 
-      bg="#0C0D0F" 
-      color="var(--ui-color-text-high)" 
-      display="flex" 
+    <Box
+      height="100vh"
+      bg="var(--ui-color-bg-base)"
+      color="var(--ui-color-text-high)"
+      display="flex"
       flexDirection="col"
+      overflowY="auto"
+      overflowX="hidden"
+      style={{
+        fontFamily: 'var(--ui-font-sans)',
+        background: 'linear-gradient(180deg, #0a0a0b 0%, #0f0f10 100%)',
+      }}
     >
       {children}
     </Box>
   );
-}
+}

apps/website/components/dashboard/DashboardShell.tsx

@@ -18,21 +18,16 @@ interface DashboardShellProps {
  */
 export function DashboardShell({ children, rail, controlBar }: DashboardShellProps) {
   return (
-    <Box display="flex" height="100vh" style={{ overflow: 'hidden', backgroundColor: 'var(--ui-color-bg-base)' }}>
-      {rail && (
-        <Sidebar>
-          {rail}
-        </Sidebar>
-      )}
-      <Box display="flex" flexDirection="col" flex={1} style={{ overflow: 'hidden' }}>
-        {controlBar && (
-          <Header>
-            {controlBar}
-          </Header>
-        )}
-        <MainContent maxWidth="7xl">
-          {children}
-        </MainContent>
+    <Box
+      display="flex"
+      minHeight="100vh"
+      style={{ backgroundColor: 'var(--ui-color-bg-base)' }}
+    >
+      {rail && <Sidebar>{rail}</Sidebar>}
+
+      <Box display="flex" flexDirection="col" flex={1} minWidth="0">
+        {controlBar && <Header>{controlBar}</Header>}
+        <MainContent maxWidth="7xl">{children}</MainContent>
       </Box>
     </Box>
   );

apps/website/components/dev/DevToolbar.tsx

@@ -229,7 +229,7 @@ export function DevToolbar() {
 
   if (isMinimized) {
     return (
-      <Stack align="end" justify="end">
+      <Stack position="fixed" right={4} bottom={4} zIndex={1000}>
         <IconButton
           icon={Wrench}
           onClick={() => setIsMinimized(false)}
@@ -242,7 +242,26 @@ export function DevToolbar() {
   }
 
   return (
-    <Stack gap={4}>
+    <Stack
+      position="fixed"
+      right={4}
+      bottom={4}
+      zIndex={1000}
+      width="min(420px, calc(100vw - 2rem))"
+      maxHeight="calc(100vh - 2rem)"
+      overflow="auto"
+      border={true}
+      borderColor="var(--ui-color-border-default)"
+      rounded="xl"
+      bg="rgba(20, 22, 25, 0.92)"
+      padding={3}
+      style={{
+        boxShadow: '0 18px 40px rgba(0,0,0,0.55)',
+        backdropFilter: 'blur(12px)',
+        WebkitBackdropFilter: 'blur(12px)',
+      }}
+      gap={4}
+    >
       {/* Header */}
       <Stack direction="row" align="center" justify="between" gap={4}>
         <Stack direction="row" align="center" gap={2}>

apps/website/components/layout/AppFooter.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { Surface } from '@/ui/Surface';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Box } from '@/ui/Box';
+
+export function AppFooter() {
+  return (
+    <Surface
+      as="footer"
+      variant="precision"
+      paddingY={6}
+      paddingX={6}
+      borderTop={true}
+      backgroundColor="rgba(10, 10, 11, 0.92)"
+      className="backdrop-blur-xl"
+      style={{
+        boxShadow: '0 -1px 0 0 rgba(255, 255, 255, 0.05)',
+      }}
+    >
+      <Box display="flex" justifyContent="between" alignItems="center" width="full" gap={4}>
+        <Stack direction="row" align="center" gap={3}>
+          <Text size="xs" variant="low" font="mono" uppercase letterSpacing="0.12em">
+            © {new Date().getFullYear()} GridPilot
+          </Text>
+          <Box w="1px" h="12px" bg="var(--ui-color-border-muted)" opacity={0.6} />
+          <Text size="xs" variant="low" font="mono" uppercase letterSpacing="0.12em">
+            Session ready
+          </Text>
+        </Stack>
+
+        <Box display={{ base: 'none', sm: 'flex' }}>
+          <Stack direction="row" align="center" gap={2}>
+            <Box w="6px" h="6px" rounded="full" bg="var(--ui-color-intent-success)" />
+            <Text size="xs" variant="low" font="mono" uppercase letterSpacing="0.12em">
+              System Normal
+            </Text>
+          </Stack>
+        </Box>
+      </Box>
+    </Surface>
+  );
+}

apps/website/components/layout/AppHeader.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import { BrandMark } from '@/ui/BrandMark';
+import { HeaderActions } from '@/components/layout/HeaderActions';
+import { PublicNav } from '@/components/layout/PublicNav';
+import { useCurrentSession } from '@/hooks/auth/useCurrentSession';
+import { routes } from '@/lib/routing/RouteConfig';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Surface } from '@/ui/Surface';
+import { usePathname } from 'next/navigation';
+
+export function AppHeader() {
+  const pathname = usePathname();
+  const { data: session } = useCurrentSession();
+  const isAuthenticated = !!session;
+  const homeHref = isAuthenticated ? routes.protected.dashboard : routes.public.home;
+
+  return (
+    <Surface
+      as="header"
+      variant="dark"
+      position="fixed"
+      top={0}
+      left={0}
+      right={0}
+      height="56px"
+      zIndex={50}
+      style={{
+        borderBottom: '1px solid var(--ui-color-border-default)',
+        background: 'rgba(13, 13, 14, 0.8)',
+        backdropFilter: 'blur(12px)',
+      }}
+    >
+      <Box display="flex" alignItems="center" justifyContent="between" width="full" h="full" px={6}>
+        {/* Left: Brand & Context */}
+        <Stack direction="row" align="center" gap={4} h="full">
+          <BrandMark href={homeHref} priority />
+          
+          {isAuthenticated && (
+            <Box 
+              display="flex" 
+              alignItems="center" 
+              gap={3} 
+              paddingLeft={4} 
+              borderLeft={true} 
+              h="24px"
+              style={{ borderLeftColor: 'var(--ui-color-border-muted)' }}
+            >
+               <Text size="xs" weight="medium" variant="low" font="mono" uppercase>
+                 Workspace
+               </Text>
+            </Box>
+          )}
+        </Stack>
+
+        {/* Center: Navigation (if public) */}
+        {!isAuthenticated && (
+          <Box display={{ base: 'none', md: 'flex' }} data-testid="public-top-nav">
+            <PublicNav pathname={pathname} direction="row" />
+          </Box>
+        )}
+        
+        {/* 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)" />
+            <Text size="xs" variant="low" weight="bold" font="mono" letterSpacing="0.1em">
+              LIVE
+            </Text>
+          </Box>
+          <HeaderActions isAuthenticated={isAuthenticated} />
+        </Box>
+      </Box>
+    </Surface>
+  );
+}

apps/website/components/layout/AppSidebar.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { AuthedNav } from '@/components/layout/AuthedNav';
+import { PublicNav } from '@/components/layout/PublicNav';
+import { useCurrentSession } from '@/hooks/auth/useCurrentSession';
+import { Box } from '@/ui/Box';
+import { DashboardRail } from '@/components/dashboard/DashboardRail';
+import { Text } from '@/ui/Text';
+import { Surface } from '@/ui/Surface';
+import { usePathname } from 'next/navigation';
+
+export function AppSidebar() {
+  const pathname = usePathname();
+  const { data: session } = useCurrentSession();
+  const isAuthenticated = !!session;
+
+  return (
+    <Surface
+      as="aside"
+      variant="dark"
+      width="260px"
+      position="fixed"
+      top="56px"
+      bottom={0}
+      left={0}
+      zIndex={40}
+      style={{
+        borderRight: '1px solid var(--ui-color-border-default)',
+        boxShadow: 'inset -1px 0 0 0 rgba(255, 255, 255, 0.01)',
+        background: 'linear-gradient(180deg, #0d0d0e 0%, #0a0a0b 100%)',
+      }}
+    >
+      <DashboardRail>
+        <Box py={8} fullWidth>
+          <Box px={6} mb={10}>
+            <Box display="flex" alignItems="center" gap={2} mb={2}>
+              <Box w="2px" h="12px" bg="var(--ui-color-intent-primary)" />
+              <Text size="xs" variant="low" weight="bold" font="mono" letterSpacing="0.2em">
+                DASHBOARD
+              </Text>
+            </Box>
+          </Box>
+          <Box px={4}>
+            {isAuthenticated ? (
+              <AuthedNav pathname={pathname} />
+            ) : (
+              <PublicNav pathname={pathname} />
+            )}
+          </Box>
+        </Box>
+      </DashboardRail>
+    </Surface>
+  );
+}

apps/website/components/layout/MainContent.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { Box } from '@/ui/Box';
+import { ReactNode } from 'react';
+
+interface MainContentProps {
+  children: ReactNode;
+  hasSidebar: boolean;
+}
+
+export function MainContent({ children, hasSidebar }: MainContentProps) {
+  return (
+    <Box
+      as="main"
+      display="flex"
+      flexDirection="col"
+      flexGrow={1}
+      style={{
+        paddingTop: '56px', // Header height
+        marginLeft: hasSidebar ? '260px' : '0',
+        transition: 'margin-left 0.2s ease-in-out',
+      }}
+    >
+      <Box
+        position="relative"
+        width="full"
+        maxWidth="full"
+        flexGrow={1}
+        display="flex"
+        flexDirection="col"
+      >
+        {/* Background Grid */}
+        <Box
+          position="absolute"
+          inset={0}
+          pointerEvents="none"
+          zIndex={0}
+          style={{
+            backgroundImage:
+              'radial-gradient(circle at 2px 2px, rgba(255,255,255,0.018) 1px, transparent 0)',
+            backgroundSize: '32px 32px',
+            opacity: 0.5,
+            backgroundAttachment: 'fixed',
+          }}
+        />
+
+        {/* Content */}
+        <Box position="relative" zIndex={1} flexGrow={1} display="flex" flexDirection="col">
+          {children}
+        </Box>
+      </Box>
+    </Box>
+  );
+}