fluxy-bot 0.12.5 → 0.12.7

package/dist-fluxy/fluxy.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, interactive-widget=resizes-content" />
     <title>Fluxy Chat</title>
-    <script type="module" crossorigin src="/fluxy/assets/fluxy-2X2LJqEN.js"></script>
+    <script type="module" crossorigin src="/fluxy/assets/fluxy-DwS9I76o.js"></script>
     <link rel="modulepreload" crossorigin href="/fluxy/assets/globals-DCVXWA_E.js">
     <link rel="stylesheet" crossorigin href="/fluxy/assets/globals-2ZsZBw2U.css">
   </head>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fluxy-bot",
-  "version": "0.12.5",
+  "version": "0.12.7",
   "releaseNotes": [
     "Adding a way for users to claim their fluxies on the fluxy.bot dashboard",
     "2. ",
@@ -47,6 +47,7 @@
     "build:fluxy": "vite build --config vite.fluxy.config.ts",
     "start": "node --import tsx/esm supervisor/index.ts",
     "postinstall": "node scripts/postinstall.js",
+    "dev:workspace": "vite",
     "dev:docs": "cd ./docs && npx fumapress"
   },
   "dependencies": {
@@ -60,6 +61,7 @@
     "commander": "^14.0.3",
     "cron-parser": "^5.5.0",
     "date-fns": "^4.1.0",
+    "driver.js": "^1.4.0",
     "express": "^5.2.1",
     "framer-motion": "^12.34.3",
     "lucide-react": "^1.7.0",

package/supervisor/chat/fluxy-main.tsx

@@ -24,18 +24,6 @@ function FluxyApp() {
   // Backend health
   const [backendHealthy, setBackendHealthy] = useState(true);
 
-  useEffect(() => {
-    if (!authenticated) return;
-    const check = () => {
-      fetch('/app/api/health')
-        .then((r) => setBackendHealthy(r.ok))
-        .catch(() => setBackendHealthy(false));
-    };
-    check();
-    const id = setInterval(check, 10_000);
-    return () => clearInterval(id);
-  }, [authenticated]);
-
   // Wallet balance
   const [walletBalance, setWalletBalance] = useState<string | null>(null);
 
@@ -173,6 +161,19 @@ function FluxyApp() {
     });
   }, []);
 
+  // Backend health check
+  useEffect(() => {
+    if (!authenticated) return;
+    const check = () => {
+      fetch('/app/api/health')
+        .then((r) => setBackendHealthy(r.ok))
+        .catch(() => setBackendHealthy(false));
+    };
+    check();
+    const id = setInterval(check, 10_000);
+    return () => clearInterval(id);
+  }, [authenticated]);
+
   // Check push state on mount
   useEffect(() => {
     if (!authenticated) return;

package/vite.config.ts

@@ -54,6 +54,7 @@ export default defineConfig({
       'react-dom/client',
       'react/jsx-runtime',
       'react-router',
+      'driver.js',
       'lucide-react',
       'framer-motion',
       'recharts',

package/worker/prompts/fluxy-system-prompt.txt

@@ -449,7 +449,12 @@ The workspace is **NOT secured by default**. If your human's Fluxy is accessible
 They already have a chat password from onboarding. Don't confuse the two. Don't go looking in the worker database for `portal_pass`. Don't tell them "you already have a password set." Set the workspace password using the route above.
 
 ## Modular Philosophy
-When your human asks for something new, don't rebuild the app — add a module. A sidebar icon, a dashboard card, a new page. Yesterday it was a CRM, today a finance tracker, tomorrow a diet log. They all coexist. Keep it organized.
+
+When your human asks for something new, don't redesign the workspace. Build a **mini app**: a new page component, a new React Router route, and a sidebar link. Each feature lives on its own page. Yesterday it was a CRM, today a finance tracker, tomorrow a diet log. They all coexist in the sidebar.
+
+On top of the page, add a **small widget on the Dashboard** when it makes sense. The dashboard is a grid of compact cards (see the existing Stripe, Gmail, X, and Research widgets for the pattern). A widget shows a quick summary or key metric from the app. Not every app needs one, but most benefit from a glanceable overview.
+
+Only redesign the workspace layout if your human explicitly asks you to. Otherwise, keep adding modules. The sidebar grows, the dashboard fills with widgets, and the workspace becomes more useful over time.
 
 ---
 

package/workspace/.backend.log

@@ -0,0 +1 @@
+[backend] Listening on port 3004

package/workspace/client/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" style="background:#222122">
+<html lang="en" style="background-color:#0A0A0A">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, interactive-widget=resizes-content" />
@@ -9,12 +9,14 @@
     <meta name="apple-mobile-web-app-title" content="Fluxy" />
     <link rel="apple-touch-icon" href="/fluxy-icon-192.png" />
     <link rel="manifest" href="/manifest.json" />
+    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet">
     <title>Fluxy</title>
   </head>
-  <body class="bg-background text-foreground" style="background:#222122">
+  <body class="bg-background text-foreground" style="background-color:#0A0A0A">
     <!-- Dark background fallback — visible instantly while widget.js loads.
          The canvas animation (in widget.js) takes over as the actual splash. -->
-    <div id="splash" style="background:#222122;position:fixed;inset:0;z-index:9998;transition:opacity .25s ease-out"></div>
+    <div id="splash" style="background:#0A0A0A;position:fixed;inset:0;z-index:9998;transition:opacity .25s ease-out"></div>
+    <script>if(location.port==='5173'){var s=document.getElementById('splash');if(s)s.style.display='none'}</script>
 
     <div id="root"></div>
 
@@ -26,7 +28,7 @@
         var root = document.getElementById('root');
         if (root && root.children.length === 0) {
           root.innerHTML =
-            '<div style="background:#222122;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100dvh;width:100vw;position:fixed;inset:0;z-index:50;font-family:system-ui,-apple-system,sans-serif;text-align:center;padding:24px">' +
+            '<div style="background:#0A0A0A;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100dvh;width:100vw;position:fixed;inset:0;z-index:50;font-family:system-ui,-apple-system,sans-serif;text-align:center;padding:24px">' +
             '<img src="/fluxy_frame1.png" style="height:120px;width:120px;border-radius:50%;object-fit:cover;margin-bottom:32px" alt="Fluxy" />' +
             '<h1 style="font-size:20px;font-weight:600;margin-bottom:8px">Your app crashed</h1>' +
             '<p style="font-size:14px;color:rgba(255,255,255,0.5);max-width:320px;line-height:1.5">Ask the agent to fix it using the chat.</p>' +
@@ -43,7 +45,7 @@
     </script>
     <script type="module" src="/src/main.tsx"></script>
     <script>
-    if('serviceWorker' in navigator){
+    if('serviceWorker' in navigator && location.port !== '5173'){
       var swRefreshing=false;
       navigator.serviceWorker.addEventListener('controllerchange',function(){
         if(swRefreshing)return;

package/workspace/client/src/App.tsx

@@ -3,6 +3,7 @@ import { Routes, Route } from 'react-router';
 import ErrorBoundary from './components/ErrorBoundary';
 import DashboardLayout from './components/Layout/DashboardLayout';
 import DashboardPage from './components/Dashboard/DashboardPage';
+import WorkspaceTour from './components/deleteme_onboarding/WorkspaceTour';
 
 function DashboardError() {
   return (
@@ -25,6 +26,7 @@ function DashboardError() {
 
 export default function App() {
   const [showOnboard, setShowOnboard] = useState(false);
+  const [userName, setUserName] = useState('');
   const [rebuildState, setRebuildState] = useState<'idle' | 'rebuilding' | 'error'>('idle');
   const [buildError, setBuildError] = useState('');
 
@@ -102,10 +104,15 @@ export default function App() {
   }, []);
 
   useEffect(() => {
-    fetch('/api/settings')
-      .then((r) => r.json())
+    fetch('/api/settings', { signal: AbortSignal.timeout(3000) })
+      .then((r) => {
+        if (!r.ok) return;
+        return r.json();
+      })
       .then((s) => {
+        if (!s) return;
         if (s.onboard_complete !== 'true') setShowOnboard(true);
+        if (s.user_name) setUserName(s.user_name);
       })
       .catch(() => {});
   }, []);
@@ -148,11 +155,13 @@ export default function App() {
   return (
     <>
       <ErrorBoundary fallback={<DashboardError />}>
-        <DashboardLayout>
+        <DashboardLayout userName={userName}>
           <Routes>
             <Route path="/" element={<DashboardPage />} />
+            <Route path="*" element={<DashboardPage />} />
           </Routes>
         </DashboardLayout>
+        <WorkspaceTour />
       </ErrorBoundary>
 
       {showOnboard && (

package/workspace/client/src/components/Dashboard/DashboardPage.tsx

@@ -1,127 +1,134 @@
-import { useState } from 'react';
+import { Search, Mail, DollarSign, TrendingUp } from 'lucide-react';
+import { AreaChart, Area, BarChart, Bar, ResponsiveContainer } from 'recharts';
 
-const starterSuggestions = [
-  'Build me a CRM',
-  'Create a habit tracker',
-  'Make a finance dashboard',
-  'Build a task manager',
-];
+const GRADIENT = 'linear-gradient(to right, #4FF2FE 10%, #BC20DE 55%, #FF6B8A 100%)';
+const CARD = 'relative rounded-xl overflow-hidden';
+const BORDER = 'absolute inset-0 rounded-xl bg-gradient-to-b from-white/[0.08] via-white/[0.02] to-transparent pointer-events-none';
+const INNER = 'relative rounded-xl bg-[#141414] m-px p-3.5 h-full';
 
-export default function DashboardPage() {
-  const handleSuggestion = (text: string) => {
-    // Open the chat widget and pre-fill the suggestion
-    const panel = document.getElementById('fluxy-widget-panel');
-    if (panel && !panel.classList.contains('open')) {
-      const toggle = document.getElementById('fluxy-widget-toggle');
-      toggle?.click();
-    }
-    // Give the widget a moment to open, then try to fill the input
-    setTimeout(() => {
-      const input = document.querySelector<HTMLTextAreaElement>(
-        '#fluxy-widget-panel textarea, #fluxy-widget-panel input[type="text"]'
-      );
-      if (input) {
-        const nativeSetter = Object.getOwnPropertyDescriptor(
-          window.HTMLTextAreaElement.prototype, 'value'
-        )?.set || Object.getOwnPropertyDescriptor(
-          window.HTMLInputElement.prototype, 'value'
-        )?.set;
-        nativeSetter?.call(input, text);
-        input.dispatchEvent(new Event('input', { bubbles: true }));
-        input.focus();
-      }
-    }, 400);
-  };
+const rev = [{ v: 82 }, { v: 89 }, { v: 94 }, { v: 101 }, { v: 108 }, { v: 112 }, { v: 125 }];
+const fol = [{ v: 12 }, { v: 18 }, { v: 9 }, { v: 24 }, { v: 31 }, { v: 19 }, { v: 27 }];
+
+function StripeSvg() {
+  return <svg className="h-3.5 w-3.5 text-[#635BFF]" viewBox="0 0 24 24" fill="currentColor"><path d="M13.976 9.15c-2.172-.806-3.356-1.426-3.356-2.409 0-.831.683-1.305 1.901-1.305 2.227 0 4.515.858 6.09 1.631l.89-5.494C18.252.975 15.697 0 12.165 0 9.667 0 7.589.654 6.104 1.872 4.56 3.147 3.757 4.992 3.757 7.218c0 4.039 2.467 5.76 6.476 7.219 2.585.92 3.445 1.574 3.445 2.583 0 .98-.84 1.545-2.354 1.545-1.875 0-4.965-.921-6.99-2.109l-.9 5.555C5.175 22.99 8.385 24 11.714 24c2.641 0 4.843-.624 6.328-1.813 1.664-1.305 2.525-3.236 2.525-5.732 0-4.128-2.524-5.851-6.591-7.305z" /></svg>;
+}
+function GmailSvg() {
+  return <svg className="h-3.5 w-3.5 text-[#EA4335]" viewBox="0 0 24 24" fill="currentColor"><path d="M24 5.457v13.909c0 .904-.732 1.636-1.636 1.636h-3.819V11.73L12 16.64l-6.545-4.91v9.273H1.636A1.636 1.636 0 0 1 0 19.366V5.457c0-2.023 2.309-3.178 3.927-1.964L5.455 4.64 12 9.548l6.545-4.91 1.528-1.145C21.69 2.28 24 3.434 24 5.457z" /></svg>;
+}
+function XSvg() {
+  return <svg className="h-3.5 w-3.5 text-white" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" /></svg>;
+}
 
+export default function DashboardPage() {
   return (
-    <div className="flex flex-col items-center justify-start h-full px-4 pt-16 sm:pt-24">
-      {/* Welcome message */}
-      <h1 className="text-2xl sm:text-3xl font-bold text-center mb-2">
+    <div className="flex flex-col h-full px-4 sm:px-6 pt-8 sm:pt-12 pb-6 max-w-4xl mx-auto w-full overflow-y-auto">
+      <h1
+        className="text-xl sm:text-2xl font-bold mb-1 tracking-tight w-fit"
+        style={{ backgroundImage: GRADIENT, WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}
+      >
         Let's get started
       </h1>
-      <p className="text-muted-foreground text-sm sm:text-base text-center max-w-md mb-8">
-        Tell me what to build and I'll create it for you, right here.
-      </p>
+      <p className="text-muted-foreground text-xs mb-6">Your workspace at a glance.</p>
 
-      {/* Starter suggestion chips */}
-      <div className="flex flex-wrap items-center justify-center gap-2 sm:gap-3 max-w-lg mb-12">
-        {starterSuggestions.map((suggestion) => (
-          <button
-            key={suggestion}
-            onClick={() => handleSuggestion(suggestion)}
-            className="px-4 py-2 sm:px-5 sm:py-2.5 rounded-full border border-border bg-card text-sm text-muted-foreground hover:text-foreground hover:border-primary/40 hover:bg-card/80 transition-all duration-200 active:scale-[0.97]"
-          >
-            {suggestion}
-          </button>
-        ))}
-      </div>
+      <div className="grid grid-cols-3 gap-2.5">
 
-      {/* Health check */}
-      <HealthCheck />
+        {/* Stripe — 2 cols */}
+        <div className={`${CARD} col-span-2`}>
+          <div className={BORDER} />
+          <div className={INNER}>
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <div className="h-7 w-7 rounded-lg bg-[#635BFF]/10 flex items-center justify-center"><StripeSvg /></div>
+                <span className="text-xs font-bold">Stripe</span>
+              </div>
+              <div className="flex items-center gap-1 text-emerald-500">
+                <TrendingUp className="h-3 w-3" />
+                <span className="text-[10px] font-bold">+12.5%</span>
+              </div>
+            </div>
+            <p className="text-2xl font-bold tracking-tight mt-2">$12,480</p>
+            <p className="text-[10px] text-muted-foreground/50 mb-1">MRR</p>
+            <div className="h-12 overflow-hidden">
+              <ResponsiveContainer width="100%" height={48}>
+                <AreaChart data={rev}>
+                  <defs>
+                    <linearGradient id="sg" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stopColor="#4FF2FE" /><stop offset="50%" stopColor="#BC20DE" /><stop offset="100%" stopColor="#FE546B" /></linearGradient>
+                    <linearGradient id="sf" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stopColor="#BC20DE" stopOpacity={0.12} /><stop offset="100%" stopColor="#BC20DE" stopOpacity={0} /></linearGradient>
+                  </defs>
+                  <Area type="monotone" dataKey="v" stroke="url(#sg)" strokeWidth={1.5} fill="url(#sf)" />
+                </AreaChart>
+              </ResponsiveContainer>
+            </div>
+          </div>
+        </div>
 
-      {/* Arrow pointing to chat */}
-      {/* Desktop */}
-      <div
-        id="chat-arrow-desktop"
-        className="hidden md:flex fixed flex-col items-center pointer-events-none"
-        style={{ bottom: 100, right: 100 }}
-      >
-        <img src="/arrow.png" alt="" style={{ width: 120 }} />
-      </div>
-      {/* Mobile */}
-      <img
-        id="chat-arrow-mobile"
-        src="/arrow.png"
-        alt=""
-        className="block md:hidden fixed pointer-events-none"
-        style={{ width: 90, bottom: 75, right: 60 }}
-      />
-    </div>
-  );
-}
+        {/* X — 1 col */}
+        <div className={`${CARD} col-span-1`}>
+          <div className={BORDER} />
+          <div className={INNER}>
+            <div className="flex items-center gap-2 mb-2">
+              <div className="h-7 w-7 rounded-lg bg-white/[0.06] flex items-center justify-center"><XSvg /></div>
+              <span className="text-xs font-bold">X</span>
+            </div>
+            <p className="text-2xl font-bold tracking-tight">24.8K</p>
+            <div className="flex items-center gap-1 text-emerald-500 mb-1">
+              <TrendingUp className="h-2.5 w-2.5" />
+              <span className="text-[10px] font-bold">+1.4K</span>
+            </div>
+            <div className="h-10 overflow-hidden">
+              <ResponsiveContainer width="100%" height={40}>
+                <BarChart data={fol} barCategoryGap="25%">
+                  <defs>
+                    <linearGradient id="xg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stopColor="#BC20DE" stopOpacity={0.3} /><stop offset="100%" stopColor="#4FF2FE" stopOpacity={0.05} /></linearGradient>
+                  </defs>
+                  <Bar dataKey="v" fill="url(#xg)" radius={[2, 2, 0, 0]} />
+                </BarChart>
+              </ResponsiveContainer>
+            </div>
+          </div>
+        </div>
 
-function HealthCheck() {
-  const [status, setStatus] = useState<'idle' | 'loading' | 'ok' | 'error'>('idle');
-  const [detail, setDetail] = useState('');
+        {/* Gmail — 1 col */}
+        <div className={`${CARD} col-span-1`}>
+          <div className={BORDER} />
+          <div className={INNER}>
+            <div className="flex items-center gap-2 mb-2.5">
+              <div className="h-7 w-7 rounded-lg bg-[#EA4335]/10 flex items-center justify-center"><GmailSvg /></div>
+              <span className="text-xs font-bold">Gmail</span>
+              <span className="ml-auto text-[10px] text-muted-foreground/50">3 new</span>
+            </div>
+            {['Sarah Chen', 'Stripe', 'Alex R.'].map((n) => (
+              <div key={n} className="flex items-center gap-2 py-1.5">
+                <div className="h-5 w-5 rounded-full bg-white/[0.06] text-[9px] font-bold flex items-center justify-center shrink-0">{n[0]}</div>
+                <span className="text-[11px] truncate">{n}</span>
+              </div>
+            ))}
+          </div>
+        </div>
 
-  const runTest = async () => {
-    setStatus('loading');
-    setDetail('');
-    try {
-      const res = await fetch('/app/api/health');
-      if (!res.ok) throw new Error(`HTTP ${res.status}`);
-      const data = await res.json();
-      if (data.status === 'ok') {
-        setStatus('ok');
-        setDetail('Backend connected');
-      } else {
-        setStatus('error');
-        setDetail('Unexpected response');
-      }
-    } catch (err: any) {
-      setStatus('error');
-      setDetail(err.message || 'Connection failed');
-    }
-  };
+        {/* Research — 2 cols */}
+        <div className={`${CARD} col-span-2`}>
+          <div className={BORDER} />
+          <div className={INNER}>
+            <div className="flex items-center gap-2 mb-2.5">
+              <div className="h-7 w-7 rounded-lg bg-[#9235F9]/10 flex items-center justify-center"><Search className="h-3.5 w-3.5 text-[#9235F9]" /></div>
+              <span className="text-xs font-bold">Research</span>
+              <span className="ml-auto text-[10px] font-bold text-muted-foreground bg-white/[0.06] px-2 py-0.5 rounded-full">3</span>
+            </div>
+            {[
+              { t: 'Competitor pricing', s: 'Done', c: 'text-emerald-500 bg-emerald-500/10' },
+              { t: 'Market trends Q1', s: 'Done', c: 'text-emerald-500 bg-emerald-500/10' },
+              { t: 'User feedback', s: 'Review', c: 'text-orange-400 bg-orange-400/10' },
+            ].map((r) => (
+              <div key={r.t} className="flex items-center justify-between py-1.5">
+                <span className="text-[11px]">{r.t}</span>
+                <span className={`text-[9px] font-bold px-1.5 py-0.5 rounded-full ${r.c}`}>{r.s}</span>
+              </div>
+            ))}
+          </div>
+        </div>
 
-  return (
-    <button
-      onClick={runTest}
-      disabled={status === 'loading'}
-      className="flex items-center gap-2.5 px-5 py-2.5 rounded-full border border-border bg-card text-sm text-muted-foreground hover:text-foreground hover:border-primary/40 hover:bg-card/80 transition-all duration-200 active:scale-[0.97] disabled:opacity-50"
-    >
-      <span
-        className={`h-2 w-2 rounded-full shrink-0 ${
-          status === 'ok' ? 'bg-green-500' :
-          status === 'error' ? 'bg-red-500' :
-          status === 'loading' ? 'bg-yellow-500 animate-pulse' :
-          'bg-muted-foreground/30'
-        }`}
-      />
-      {status === 'idle' && 'Test Backend'}
-      {status === 'loading' && 'Testing...'}
-      {status === 'ok' && detail}
-      {status === 'error' && detail}
-    </button>
+      </div>
+    </div>
   );
 }

package/workspace/client/src/components/Layout/DashboardLayout.tsx

@@ -1,23 +1,21 @@
 import { useState, useEffect } from 'react';
 import type { ReactNode } from 'react';
 import Sidebar from './Sidebar';
-import Footer from './Footer';
 import MobileNav from './MobileNav';
 
 interface Props {
   children: ReactNode;
+  userName?: string;
 }
 
-export default function DashboardLayout({ children }: Props) {
+export default function DashboardLayout({ children, userName }: Props) {
   const [status, setStatus] = useState<'healthy' | 'restarting'>('healthy');
 
   useEffect(() => {
     const check = () => {
-      fetch('/app/api/health')
-        .then((r) => {
-          setStatus(r.ok ? 'healthy' : 'restarting');
-        })
-        .catch(() => setStatus('restarting'));
+      fetch('/app/api/health', { signal: AbortSignal.timeout(3000) })
+        .then((r) => setStatus(r.ok ? 'healthy' : 'restarting'))
+        .catch(() => {});
     };
     check();
     const id = setInterval(check, 10_000);
@@ -25,10 +23,10 @@ export default function DashboardLayout({ children }: Props) {
   }, []);
 
   return (
-    <div className="flex h-dvh flex-col bg-background">
+    <div className="flex h-dvh flex-col">
       {/* Mobile header */}
       <header className="flex items-center justify-between px-4 py-3 md:hidden">
-        <MobileNav />
+        <MobileNav userName={userName} backendStatus={status} />
         <div className="flex items-center gap-2">
           <img src="/fluxy.png" alt="Fluxy" className="h-6 w-auto" />
           <span className="font-semibold text-base">Fluxy</span>
@@ -37,15 +35,20 @@ export default function DashboardLayout({ children }: Props) {
       </header>
 
       <div className="flex flex-1 overflow-hidden">
-        {/* Desktop sidebar */}
-        <div className="hidden md:flex shrink-0">
-          <Sidebar />
+        {/* Desktop sidebar — floating card with shiny border */}
+        <div id="tour-sidebar" className="hidden md:flex shrink-0 pl-3 pt-3 pb-3">
+          <div className="relative rounded-3xl overflow-hidden h-full">
+            {/* Shiny border highlight */}
+            <div className="absolute inset-0 rounded-3xl bg-gradient-to-b from-white/[0.12] via-white/[0.04] to-transparent pointer-events-none" />
+            <div className="relative rounded-3xl bg-[#1A1A1A] m-px h-full">
+              <Sidebar userName={userName} backendStatus={status} />
+            </div>
+          </div>
         </div>
 
         {/* Main content + footer */}
         <div className="flex flex-1 flex-col overflow-hidden">
-          <main className="flex-1 overflow-y-auto">{children}</main>
-          <Footer status={status} />
+          <main id="tour-dashboard" className="flex-1 overflow-y-auto">{children}</main>
         </div>
       </div>
     </div>

package/workspace/client/src/components/Layout/MobileNav.tsx

@@ -7,7 +7,7 @@ import {
 } from '@/components/ui/sheet';
 import Sidebar from './Sidebar';
 
-export default function MobileNav() {
+export default function MobileNav({ userName, backendStatus }: { userName?: string; backendStatus?: 'healthy' | 'restarting' }) {
   const [open, setOpen] = useState(false);
 
   return (
@@ -22,7 +22,7 @@ export default function MobileNav() {
       <Sheet open={open} onOpenChange={setOpen}>
         <SheetContent side="left" className="p-0 w-64" showCloseButton={false}>
           <SheetTitle className="sr-only">Navigation</SheetTitle>
-          <Sidebar onNavigate={() => setOpen(false)} />
+          <Sidebar userName={userName} backendStatus={backendStatus} onNavigate={() => setOpen(false)} />
         </SheetContent>
       </Sheet>
     </>