npm - fluxy-bot - Versions diffs - 0.12.6 → 0.13.0 - Mend

fluxy-bot 0.12.6 → 0.13.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (51) hide show

package/package.json CHANGED Viewed

@@ -1,11 +1,11 @@
 {
   "name": "fluxy-bot",
-  "version": "0.12.6",
+  "version": "0.13.0",
   "releaseNotes": [
-    "Adding a way for users to claim their fluxies on the fluxy.bot dashboard",
-    "2. ",
-    "3. ",
-    "4. "
+    "1. react router implemented",
+    "2. new workspace design",
+    "3. tour",
+    "4. worspace helth checker"
   ],
   "description": "Self-hosted, self-evolving AI agent with its own dashboard.",
   "type": "module",
@@ -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/vite.config.ts CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

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

package/workspace/client/index.html CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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>
     </>

package/workspace/client/src/components/Layout/Sidebar.tsx CHANGED Viewed

@@ -1,46 +1,74 @@
 import { NavLink } from 'react-router';
 import {
   LayoutDashboard,
+  AppWindow,
+  Search,
   CircleHelp,
 } from 'lucide-react';
 import { cn } from '@/lib/utils';
 function getGreeting(): string {
   const hour = new Date().getHours();
-  if (hour < 12) return 'Good\nMorning';
-  if (hour < 18) return 'Good\nAfternoon';
-  return 'Good\nEvening';
+  if (hour < 12) return 'Good Morning';
+  if (hour < 18) return 'Good Afternoon';
+  return 'Good Evening';
 }
 interface SidebarProps {
+  userName?: string;
+  backendStatus?: 'healthy' | 'restarting';
   onNavigate?: () => void;
 }
-export default function Sidebar({ onNavigate }: SidebarProps) {
+export default function Sidebar({ userName, backendStatus = 'healthy', onNavigate }: SidebarProps) {
+  const firstName = userName?.split(/\s+/)[0] || 'Human';
   return (
-    <aside className="flex flex-col h-full w-64 border-r border-border/50 bg-sidebar p-5 pt-8">
+    <aside className="flex flex-col h-full w-64 bg-transparent p-5 pt-8">
       {/* Logo */}
       <div className="flex items-center gap-2.5 mb-8">
         <img src="/fluxy.png" alt="Fluxy" className="h-7 w-auto" />
-        <span className="font-semibold text-lg">Fluxy</span>
+        <span className="font-bold text-lg" style={{ fontFamily: "'Space Grotesk', sans-serif" }}>Fluxy</span>
       </div>
       {/* Greeting */}
       <div className="mb-10">
-        <h1 className="text-4xl font-bold leading-[1.1] whitespace-pre-line">
-          {getGreeting()}
+        <h1 className="text-4xl font-bold leading-[1.1]">
+          {getGreeting()}{firstName ? ',' : ''}
         </h1>
-        <h2 className="text-4xl font-bold text-primary mt-0.5"></h2>
+        {firstName && (
+          <h2
+            className="text-4xl font-bold mt-0.5 tracking-tight leading-[1.08] w-fit"
+            style={{
+              backgroundImage: 'linear-gradient(to right, #4FF2FE, #BC20DE, #FE546B)',
+              WebkitBackgroundClip: 'text',
+              WebkitTextFillColor: 'transparent',
+              backgroundClip: 'text',
+            }}
+          >
+            {firstName}.
+          </h2>
+        )}
       </div>
       {/* Navigation */}
       <nav className="flex-1 space-y-0.5">
         <NavItem to="/" icon={LayoutDashboard} label="Dashboard" onNavigate={onNavigate} />
-        <NavItem to="/help" icon={CircleHelp} label="What Else?" onNavigate={onNavigate} />
+        <NavItem to="/app1" icon={AppWindow} label="App 1" sub="Ask Fluxy to create your first app and remove this placeholder" onNavigate={onNavigate} />
+        <NavItem to="/research" icon={Search} label="Research" sub="Ask Fluxy to research anything for you, maybe even daily" onNavigate={onNavigate} />
+        <NavItem to="/whatelse" icon={CircleHelp} label="What Else?" sub="The sky is the limit, just ask and Fluxy will do it!" onNavigate={onNavigate} />
       </nav>
-      {/* Bottom spacer */}
-      <div className="pt-4 border-t border-border/50" />
+      {/* Backend status */}
+      <div className="rounded-xl bg-[#282828] px-3.5 py-2.5 flex items-center gap-2">
+        <span
+          className={`h-2 w-2 rounded-full shrink-0 ${
+            backendStatus === 'healthy' ? 'bg-emerald-500' : 'bg-orange-400 animate-pulse'
+          }`}
+        />
+        <span className="text-xs text-muted-foreground">
+          Workspace: {backendStatus === 'healthy' ? 'Live' : 'Restarting'}
+        </span>
+      </div>
     </aside>
   );
 }
@@ -49,11 +77,13 @@ function NavItem({
   to,
   icon: Icon,
   label,
+  sub,
   onNavigate,
 }: {
   to: string;
   icon: React.ComponentType<{ className?: string }>;
   label: string;
+  sub?: string;
   onNavigate?: () => void;
 }) {
   return (
@@ -63,15 +93,18 @@ function NavItem({
       onClick={onNavigate}
       className={({ isActive }) =>
         cn(
-          'flex items-center gap-3 w-full px-3 py-2.5 rounded-lg text-sm transition-colors',
+          'flex items-start gap-3 w-full px-3 py-2.5 rounded-lg text-sm transition-colors',
           isActive
             ? 'bg-sidebar-accent text-foreground font-medium'
             : 'text-muted-foreground hover:text-foreground hover:bg-sidebar-accent/50',
         )
       }
     >
-      <Icon className="h-[18px] w-[18px]" />
-      {label}
+      <Icon className="h-[18px] w-[18px] mt-0.5 shrink-0" />
+      <div>
+        {label}
+        {sub && <p className="text-[10px] text-muted-foreground/50 font-normal leading-tight mt-0.5">{sub}</p>}
+      </div>
     </NavLink>
   );
 }