npm - bloby-bot - Versions diffs - 0.39.1 → 0.40.0 - Mend

bloby-bot 0.39.1 → 0.40.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 (28) hide show

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "bloby-bot",
-  "version": "0.39.1",
+  "version": "0.40.0",
   "releaseNotes": [
     "1. # voice note (PTT bubble)",
     "2. # audio file + caption",

package/workspace/client/index.html CHANGED Viewed

@@ -11,9 +11,6 @@
     <link rel="apple-touch-icon" href="/bloby-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">
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
     <title>Bloby - AI agent with its own workspace</title>
   </head>
   <body class="bg-background text-foreground" style="background-color:#0A0A0A">

package/workspace/client/src/App.tsx CHANGED Viewed

@@ -4,11 +4,6 @@ import ErrorBoundary from './components/ErrorBoundary';
 import DashboardLayout from './components/Layout/DashboardLayout';
 import DashboardPage from './components/Dashboard/DashboardPage';
 import WorkspaceTour from './components/deleteme_onboarding/WorkspaceTour';
-import { WorkspaceLock } from './components/Lock/WorkspaceLock';
-import StickyNotesSettingsPage from './components/StickyNotes/StickyNotesSettingsPage';
-import AiChatPage from './components/Dashboard/AiChatPage';
-import WishlistPage from './components/Dashboard/WishlistPage';
-import CryptoPage from './components/Dashboard/CryptoPage';
 function DashboardError() {
   return (
@@ -21,9 +16,9 @@ function DashboardError() {
         playsInline
         style={{ height: 120, width: 120, borderRadius: '50%', objectFit: 'cover', marginBottom: 32 }}
       />
-      <h1 style={{ fontSize: 20, fontWeight: 600, marginBottom: 8 }}>Your app crashed</h1>
+      <h1 style={{ fontSize: 20, fontWeight: 600, marginBottom: 8 }}>Oopss.. Something wrong is not right</h1>
       <p style={{ fontSize: 14, color: 'rgba(255,255,255,0.5)', maxWidth: 320, lineHeight: 1.5 }}>
-        Ask the agent to fix it using the chat.
+      If your agent is working, this is normal. If not, go poke them
       </p>
     </div>
   );
@@ -162,19 +157,13 @@ export default function App() {
   return (
     <>
       <ErrorBoundary fallback={<DashboardError />}>
-        <WorkspaceLock>
-          <DashboardLayout userName={userName} botName={botName}>
-            <Routes>
-              <Route path="/" element={<DashboardPage />} />
-              <Route path="/sticky-notes" element={<StickyNotesSettingsPage />} />
-              <Route path="/aichat" element={<AiChatPage />} />
-              <Route path="/wishlist" element={<WishlistPage />} />
-              <Route path="/crypto" element={<CryptoPage />} />
-              <Route path="*" element={<DashboardPage />} />
-            </Routes>
-          </DashboardLayout>
-          <WorkspaceTour disabled={showOnboard} />
-        </WorkspaceLock>
+        <DashboardLayout userName={userName} botName={botName}>
+          <Routes>
+            <Route path="/" element={<DashboardPage />} />
+            <Route path="*" element={<DashboardPage />} />
+          </Routes>
+        </DashboardLayout>
+        <WorkspaceTour disabled={showOnboard} />
       </ErrorBoundary>
       {showOnboard && (

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

@@ -1,138 +1,134 @@
-import { useEffect, useState } from 'react';
-import { useNavigate } from 'react-router';
-import { Heart, Zap, Eye, ArrowUpRight } from 'lucide-react';
+import { Search, Mail, DollarSign, TrendingUp } from 'lucide-react';
+import { AreaChart, Area, BarChart, Bar, ResponsiveContainer } from 'recharts';
-interface WishlistStats {
-  total: number;
-  watching: number;
-  urgent: number;
-  purchased: number;
-}
+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';
+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 }];
-interface WishlistItem {
-  id: number;
-  name: string;
-  last_deal_found: string | null;
-  created_at: string;
+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() {
-  const navigate = useNavigate();
-  const [wlStats, setWlStats] = useState<WishlistStats | null>(null);
-  const [wlLatestDeal, setWlLatestDeal] = useState<{ name: string; deal: string } | null>(null);
-  useEffect(() => {
-    fetch('/app/api/wishlist/stats')
-      .then((r) => (r.ok ? r.json() : null))
-      .then((s) => { if (s) setWlStats(s); })
-      .catch(() => {});
-    fetch('/app/api/wishlist')
-      .then((r) => (r.ok ? r.json() : null))
-      .then((items: WishlistItem[] | null) => {
-        if (!items) return;
-        const withDeal = items.find((i) => i.last_deal_found);
-        if (withDeal) setWlLatestDeal({ name: withDeal.name, deal: withDeal.last_deal_found! });
-      })
-      .catch(() => {});
-  }, []);
   return (
-    <div className="flex flex-col h-full px-4 sm:px-6 md:px-20 pt-10 sm:pt-16 pb-32 max-w-5xl mx-auto w-full">
-      <div className="grid grid-cols-1 gap-5">
+    <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-xs mb-6">Your workspace at a glance.</p>
-        {/* Wishlist — glass card */}
-        <button
-          type="button"
-          onClick={() => navigate('/wishlist')}
-          className="glass-card text-left cursor-pointer hover:brightness-110 transition group p-6 sm:p-7"
-        >
-          <div className="relative">
-            <div className="flex items-start gap-4 mb-6">
-              <div className="h-12 w-12 rounded-2xl flex items-center justify-center bg-gradient-to-br from-pink-300/40 to-rose-500/20 border border-white/10 backdrop-blur-xl shrink-0">
-                <Heart className="h-5 w-5 text-pink-200" fill="currentColor" />
-              </div>
-              <div className="flex-1 min-w-0">
-                <h3 className="text-base font-semibold text-white tracking-tight">Wishlist</h3>
-                <p className="text-xs text-white/60 mt-0.5">Items you're tracking, urgent picks, and the latest deal.</p>
+      <div className="grid grid-cols-3 gap-2.5">
+        {/* 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="h-9 w-9 rounded-full bg-white/10 border border-white/10 flex items-center justify-center text-white/80 group-hover:bg-white/15 transition">
-                <ArrowUpRight className="h-4 w-4" />
+              <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>
-            <div className="grid grid-cols-3 gap-3 sm:gap-5">
-              <Stat
-                icon={Eye}
-                label="Watching"
-                value={wlStats?.watching ?? 0}
-                gradientFrom="#5DE0E6"
-                gradientTo="#85C7FF"
-              />
-              <Stat
-                icon={Zap}
-                label="Urgent"
-                value={wlStats?.urgent ?? 0}
-                gradientFrom="#FFB37A"
-                gradientTo="#FF7AAA"
-              />
-              <Stat
-                icon={Heart}
-                label="Total"
-                value={wlStats?.total ?? 0}
-                gradientFrom="#C9A7E8"
-                gradientTo="#F2B5C7"
-              />
+        {/* 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>
-            {wlLatestDeal && (
-              <div className="mt-6 pt-5 border-t border-white/10 flex items-start gap-3">
-                <div className="h-7 px-2 rounded-full bg-amber-300/15 border border-amber-200/20 text-amber-200 text-[10px] font-semibold uppercase tracking-wider flex items-center">
-                  Latest deal
-                </div>
-                <p className="text-sm text-white/85 truncate flex-1">
-                  <span className="text-white/55">{wlLatestDeal.name}:</span> {wlLatestDeal.deal}
-                </p>
+        {/* 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>
-        </button>
+        </div>
-      </div>
-    </div>
-  );
-}
+        {/* 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>
-function Stat({
-  icon: Icon,
-  label,
-  value,
-  gradientFrom,
-  gradientTo,
-}: {
-  icon: React.ComponentType<{ className?: string }>;
-  label: string;
-  value: number;
-  gradientFrom: string;
-  gradientTo: string;
-}) {
-  const gradient = `linear-gradient(135deg, ${gradientFrom}, ${gradientTo})`;
-  return (
-    <div className="relative">
-      <div className="flex items-center gap-1.5 mb-2">
-        <Icon className="h-3 w-3 text-white/70" />
-        <span
-          className="text-[10px] font-semibold uppercase tracking-wider"
-          style={{
-            backgroundImage: gradient,
-            WebkitBackgroundClip: 'text',
-            WebkitTextFillColor: 'transparent',
-            backgroundClip: 'text',
-          }}
-        >
-          {label}
-        </span>
       </div>
-      <p className="text-3xl sm:text-4xl font-semibold tracking-tight text-white tabular-nums">{value}</p>
     </div>
   );
 }

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

@@ -1,10 +1,7 @@
 import { useState, useEffect } from 'react';
 import type { ReactNode } from 'react';
+import Sidebar from './Sidebar';
 import MobileNav from './MobileNav';
-import MiniSidebar from './MiniSidebar';
-import StickyNotesOverlay from '../StickyNotes/StickyNotesOverlay';
-import { WallpaperProvider } from '../Wallpaper/WallpaperContext';
-import WallpaperBackground from '../Wallpaper/WallpaperBackground';
 interface Props {
   children: ReactNode;
@@ -17,9 +14,16 @@ export default function DashboardLayout({ children, userName, botName = 'Bloby'
   useEffect(() => {
     const check = () => {
+      console.log('[health] checking /app/api/health…');
       fetch('/app/api/health', { signal: AbortSignal.timeout(3000) })
-        .then((r) => setStatus(r.ok ? 'healthy' : 'restarting'))
-        .catch(() => setStatus('restarting'));
+        .then((r) => {
+          console.log(`[health] response: ${r.status} ok=${r.ok}`);
+          setStatus(r.ok ? 'healthy' : 'restarting');
+        })
+        .catch((err) => {
+          console.warn('[health] fetch failed:', err.message ?? err);
+          setStatus('restarting');
+        });
     };
     check();
     const id = setInterval(check, 10_000);
@@ -27,36 +31,34 @@ export default function DashboardLayout({ children, userName, botName = 'Bloby'
   }, []);
   return (
-    <WallpaperProvider>
-      <WallpaperBackground />
-      <div className="flex h-dvh flex-col">
-        {/* Mobile header */}
-        <header className="flex items-center justify-between px-4 py-3 md:hidden">
-          <MobileNav userName={userName} botName={botName} backendStatus={status} />
-          <div className="flex items-center gap-2">
-            <img src="/bloby.png" alt={botName} className="h-6 w-auto" />
-            <span className="font-semibold text-base text-white drop-shadow">{botName}</span>
-          </div>
-          <div className="w-10" />
-        </header>
-        <div className="flex flex-1 overflow-hidden">
-          {/* Floating mini-sidebar (desktop only) */}
-          <div id="tour-sidebar" className="contents">
-            <MiniSidebar />
-          </div>
+    <div className="flex h-dvh flex-col">
+      {/* Mobile header */}
+      <header className="flex items-center justify-between px-4 py-3 md:hidden">
+        <MobileNav userName={userName} botName={botName} backendStatus={status} />
+        <div className="flex items-center gap-2">
+          <img src="/bloby.png" alt={botName} className="h-6 w-auto" />
+          <span className="font-semibold text-base">{botName}</span>
+        </div>
+        <div className="w-10" />
+      </header>
-          {/* Main content */}
-          <div className="flex flex-1 flex-col overflow-hidden">
-            <main id="tour-dashboard" className="relative flex-1 overflow-y-auto">
-              {children}
-              <StickyNotesOverlay />
-            </main>
+      <div className="flex flex-1 overflow-hidden">
+        {/* 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} botName={botName} backendStatus={status} />
+            </div>
           </div>
         </div>
+        {/* Main content + footer */}
+        <div className="flex flex-1 flex-col overflow-hidden">
+          <main id="tour-dashboard" className="flex-1 overflow-y-auto">{children}</main>
+        </div>
       </div>
-    </WallpaperProvider>
+    </div>
   );
 }

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

@@ -1,127 +1,30 @@
 import { useState } from 'react';
-import { NavLink } from 'react-router';
-import { Menu, LayoutDashboard, StickyNote, MessageCircle, Heart, Settings, Bitcoin, X } from 'lucide-react';
+import { Menu } from 'lucide-react';
 import {
   Sheet,
   SheetContent,
   SheetTitle,
 } from '@/components/ui/sheet';
-import WallpaperPicker from '../Wallpaper/WallpaperPicker';
-import { cn } from '@/lib/utils';
+import Sidebar from './Sidebar';
-interface Props {
-  userName?: string;
-  botName?: string;
-  backendStatus?: 'healthy' | 'restarting';
-}
-export default function MobileNav({ userName, botName = 'Bloby', backendStatus = 'healthy' }: Props) {
+export default function MobileNav({ userName, botName, backendStatus }: { userName?: string; botName?: string; backendStatus?: 'healthy' | 'restarting' }) {
   const [open, setOpen] = useState(false);
-  const [pickerOpen, setPickerOpen] = useState(false);
-  const firstName = userName?.split(/\s+/)[0] || '';
-  const close = () => setOpen(false);
   return (
     <>
       <button
         onClick={() => setOpen(true)}
-        className="flex items-center justify-center h-10 w-10 rounded-lg text-white/80 hover:text-white transition-colors md:hidden"
+        className="flex items-center justify-center h-10 w-10 rounded-lg text-muted-foreground hover:text-foreground transition-colors md:hidden"
       >
         <Menu className="h-5 w-5" />
         <span className="sr-only">Open navigation</span>
       </button>
       <Sheet open={open} onOpenChange={setOpen}>
-        <SheetContent side="left" className="p-0 w-72 bg-transparent border-none" showCloseButton={false}>
+        <SheetContent side="left" className="p-0 w-64" showCloseButton={false}>
           <SheetTitle className="sr-only">Navigation</SheetTitle>
-          <div className="h-full p-3">
-            <div className="glass-card h-full p-5 flex flex-col" style={{ borderRadius: 24 }}>
-              <div className="flex items-center justify-between mb-6">
-                <div>
-                  <p className="text-xs text-white/60">Workspace</p>
-                  <p className="text-lg font-semibold tracking-tight">{botName}</p>
-                </div>
-                <button
-                  type="button"
-                  onClick={close}
-                  className="h-9 w-9 rounded-full glass-pill flex items-center justify-center text-white/80"
-                  aria-label="Close navigation"
-                >
-                  <X className="h-4 w-4" />
-                </button>
-              </div>
-              {firstName && (
-                <p className="text-sm text-white/70 mb-4">Hi, {firstName}.</p>
-              )}
-              <nav className="flex-1 space-y-1">
-                <Item to="/" icon={LayoutDashboard} label="Dashboard" onNavigate={close} />
-                <Item to="/sticky-notes" icon={StickyNote} label="Sticky Notes" onNavigate={close} />
-                <Item to="/aichat" icon={MessageCircle} label="AI Chat" onNavigate={close} />
-                <Item to="/wishlist" icon={Heart} label="Wishlist" onNavigate={close} />
-                <Item to="/crypto" icon={Bitcoin} label="Crypto" onNavigate={close} />
-                <button
-                  type="button"
-                  onClick={() => {
-                    setPickerOpen(true);
-                    close();
-                  }}
-                  className="w-full mt-2 flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm text-white/80 hover:text-white hover:bg-white/10 transition"
-                >
-                  <Settings className="h-[18px] w-[18px]" />
-                  <span>Wallpaper</span>
-                </button>
-              </nav>
-              <div className="rounded-xl glass-pill px-3.5 py-2.5 flex items-center gap-2 mt-4">
-                <span
-                  className={`h-2 w-2 rounded-full shrink-0 ${
-                    backendStatus === 'healthy' ? 'bg-emerald-400' : 'bg-orange-400 animate-pulse'
-                  }`}
-                />
-                <span className="text-xs text-white/70">
-                  Workspace: {backendStatus === 'healthy' ? 'Live' : 'Restarting'}
-                </span>
-              </div>
-            </div>
-          </div>
+          <Sidebar userName={userName} botName={botName} backendStatus={backendStatus} onNavigate={() => setOpen(false)} />
         </SheetContent>
       </Sheet>
-      <WallpaperPicker open={pickerOpen} onClose={() => setPickerOpen(false)} />
     </>
   );
 }
-function Item({
-  to,
-  icon: Icon,
-  label,
-  onNavigate,
-}: {
-  to: string;
-  icon: React.ComponentType<{ className?: string }>;
-  label: string;
-  onNavigate: () => void;
-}) {
-  return (
-    <NavLink
-      to={to}
-      end
-      onClick={onNavigate}
-      className={({ isActive }) =>
-        cn(
-          'flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm transition',
-          isActive
-            ? 'bg-white/15 text-white font-medium'
-            : 'text-white/70 hover:text-white hover:bg-white/10',
-        )
-      }
-    >
-      <Icon className="h-[18px] w-[18px]" />
-      <span>{label}</span>
-    </NavLink>
-  );
-}

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

@@ -1,10 +1,9 @@
 import { NavLink } from 'react-router';
 import {
   LayoutDashboard,
-  StickyNote,
-  MessageCircle,
-  Heart,
-  Bitcoin,
+  AppWindow,
+  Search,
+  CircleHelp,
 } from 'lucide-react';
 import { cn } from '@/lib/utils';
@@ -27,8 +26,9 @@ export default function Sidebar({ userName, botName = 'Bloby', backendStatus = '
   return (
     <aside className="flex flex-col h-full w-64 bg-transparent p-5 pt-8">
       {/* Logo */}
-      <div className="flex items-center mb-8">
-        <img src="/brand/blackrock.svg" alt="BlackRock" className="h-6 w-auto" />
+      <div className="flex items-center gap-2.5 mb-8">
+        <img src="/bloby.png" alt={botName} className="h-7 w-auto" />
+        <span className="font-bold text-lg" style={{ fontFamily: "'Space Grotesk', sans-serif" }}>{botName}</span>
       </div>
       {/* Greeting */}
@@ -40,7 +40,7 @@ export default function Sidebar({ userName, botName = 'Bloby', backendStatus = '
           <h2
             className="text-4xl font-bold mt-0.5 tracking-tight leading-[1.08] w-fit"
             style={{
-              backgroundImage: 'linear-gradient(to right, #ED1C24, #FF6B35, #C41E3A)',
+              backgroundImage: 'linear-gradient(to right, #4FF2FE, #BC20DE, #FE546B)',
               WebkitBackgroundClip: 'text',
               WebkitTextFillColor: 'transparent',
               backgroundClip: 'text',
@@ -54,10 +54,9 @@ export default function Sidebar({ userName, botName = 'Bloby', backendStatus = '
       {/* Navigation */}
       <nav className="flex-1 space-y-0.5">
         <NavItem to="/" icon={LayoutDashboard} label="Dashboard" onNavigate={onNavigate} />
-        <NavItem to="/sticky-notes" icon={StickyNote} label="Sticky Notes" onNavigate={onNavigate} />
-        <NavItem to="/aichat" icon={MessageCircle} label="AI Chat" onNavigate={onNavigate} />
-        <NavItem to="/wishlist" icon={Heart} label="Wishlist" onNavigate={onNavigate} />
-        <NavItem to="/crypto" icon={Bitcoin} label="Crypto" onNavigate={onNavigate} />
+        <NavItem to="/app1" icon={AppWindow} label="App 1" sub="Ask Bloby to create your first app and remove this placeholder" onNavigate={onNavigate} />
+        <NavItem to="/research" icon={Search} label="Research" sub="Ask Bloby 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 Bloby will do it!" onNavigate={onNavigate} />
       </nav>
       {/* Backend status */}