bloby-bot 0.39.1 → 0.41.0

package/package.json

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

package/supervisor/channels/manager.ts

@@ -116,6 +116,7 @@ export class ChannelManager {
       },
       (status) => this.handleStatusChange(status),
       (audioBase64) => this.transcribeAudio(audioBase64),
+      (fromMe, isSelfChat, isGroup) => this.shouldProcessWhatsAppAudio(fromMe, isSelfChat, isGroup),
     );
     this.providers.set('whatsapp', whatsapp);
 
@@ -140,6 +141,7 @@ export class ChannelManager {
         },
         (status) => this.handleStatusChange(status),
         (audioBase64) => this.transcribeAudio(audioBase64),
+        (fromMe, isSelfChat, isGroup) => this.shouldProcessWhatsAppAudio(fromMe, isSelfChat, isGroup),
       );
       this.providers.set('whatsapp', whatsapp);
       provider = whatsapp;
@@ -419,6 +421,35 @@ export class ChannelManager {
     return config.channels?.[channel];
   }
 
+  /** Decide whether an inbound WhatsApp audio is worth transcribing.
+   *  Mirrors the gates in handleInboundMessage so we don't burn Whisper calls
+   *  (or, worse, leak the bot via "Whisper not enabled" replies) on messages
+   *  that would be filtered out anyway.
+   *
+   *  Audio carries no `@bloby` text trigger, so in assistant mode we only
+   *  transcribe when the audio is admin's self-chat command. */
+  private shouldProcessWhatsAppAudio(fromMe: boolean, isSelfChat: boolean, isGroup: boolean): boolean {
+    const channelConfig = this.getChannelConfig('whatsapp');
+    if (!channelConfig) return false;
+
+    const mode = channelConfig.mode || 'channel';
+
+    // Group gating mirrors handleInboundMessage.
+    if (isGroup) {
+      if (mode === 'channel') return false;
+      if (!channelConfig.allowGroups) return false;
+    }
+
+    if (mode === 'channel') return fromMe && isSelfChat;
+    if (mode === 'assistant') return fromMe && isSelfChat;
+    if (mode === 'business') {
+      // Outbound non-self-chat messages are filtered out — same as handleInboundMessage.
+      if (fromMe && !isSelfChat) return false;
+      return true;
+    }
+    return false;
+  }
+
   /** Handle an incoming message from any channel — debounces rapid messages from the same sender.
    *
    * Per-mode behavior is decided here. To add a new mode: extend the gating block below

package/supervisor/channels/whatsapp.ts

@@ -48,6 +48,16 @@ export type OnWhatsAppMessage = (
 /** Callback to transcribe audio via whisper */
 export type TranscribeFn = (audioBase64: string) => Promise<string | null>;
 
+/** Callback that decides whether an audio message warrants transcription.
+ * Returning false makes the channel silently skip the audio (no Whisper call,
+ * no "Whisper not enabled" reply) — used to avoid leaking the bot in modes
+ * where the message would be filtered out downstream anyway. */
+export type ShouldTranscribeAudioFn = (
+  fromMe: boolean,
+  isSelfChat: boolean,
+  isGroup: boolean,
+) => boolean;
+
 export class WhatsAppChannel implements ChannelProvider {
   readonly type: ChannelType = 'whatsapp';
 
@@ -58,6 +68,7 @@ export class WhatsAppChannel implements ChannelProvider {
   private onMessage: OnWhatsAppMessage;
   private onStatusChange: (status: ChannelStatus) => void;
   private transcribe: TranscribeFn | null = null;
+  private shouldTranscribeAudio: ShouldTranscribeAudioFn | null = null;
   private reconnectTimer: ReturnType<typeof setTimeout> | null = null;
   private intentionalDisconnect = false;
 
@@ -76,10 +87,12 @@ export class WhatsAppChannel implements ChannelProvider {
     onMessage: OnWhatsAppMessage,
     onStatusChange: (status: ChannelStatus) => void,
     transcribe?: TranscribeFn,
+    shouldTranscribeAudio?: ShouldTranscribeAudioFn,
   ) {
     this.onMessage = onMessage;
     this.onStatusChange = onStatusChange;
     this.transcribe = transcribe || null;
+    this.shouldTranscribeAudio = shouldTranscribeAudio || null;
   }
 
   async connect(): Promise<void> {
@@ -441,6 +454,29 @@ export class WhatsAppChannel implements ChannelProvider {
           continue;
         }
 
+        // Resolve sender/chat identity up front so audio gating can consult mode/role.
+        const fromMe = msg.key.fromMe || false;
+        const rawSender = msg.key.remoteJid || '';
+        const participant = msg.key.participant || '';
+        const isGroup = rawSender.endsWith('@g.us');
+
+        // chatJid: where to reply (group JID for groups, peer JID otherwise).
+        const chatJid = rawSender;
+
+        // The actual sender JID:
+        //   - groups: always `participant` (remoteJid is the group)
+        //   - 1:1:   `participant` if Baileys provided one (newer protocol), else remoteJid
+        const actualSender = isGroup
+          ? participant || rawSender
+          : (participant || rawSender);
+
+        // Translate LID JIDs to phone JIDs (only handles our own LID)
+        const sender = this.translateJid(actualSender);
+        const pushName = msg.pushName || undefined;
+
+        // Self-chat: only meaningful for 1:1 — remoteJid is our own number AND no participant.
+        const isSelfChat = !isGroup && !participant && this.ownPhoneJid !== null && this.translateJid(rawSender) === this.ownPhoneJid;
+
         // Extract text — or transcribe audio if it's a voice note
         let rawText = this.extractText(msg.message);
         const images: WhatsAppImageAttachment[] = [];
@@ -459,6 +495,13 @@ export class WhatsAppChannel implements ChannelProvider {
         }
 
         if (!rawText && this.isAudioMessage(msg.message)) {
+          // Mode-aware gate: don't transcribe (and don't reveal the bot with a
+          // "Whisper not enabled" reply) when the message would be filtered out
+          // downstream — e.g. a friend's voice note in assistant mode.
+          if (this.shouldTranscribeAudio && !this.shouldTranscribeAudio(fromMe, isSelfChat, isGroup)) {
+            log.info(`[whatsapp] Audio skipped by mode gate (fromMe=${fromMe}, selfChat=${isSelfChat}, group=${isGroup})`);
+            continue;
+          }
           // Voice note / audio — download and transcribe
           if (!this.transcribe) {
             log.info('[whatsapp] Audio message received but no transcribe function configured — skipping');
@@ -494,28 +537,6 @@ export class WhatsAppChannel implements ChannelProvider {
         // Escape special characters to prevent prompt injection via message content
         const text = this.escapeMessageText(rawText);
 
-        const fromMe = msg.key.fromMe || false;
-        const rawSender = msg.key.remoteJid || '';
-        const participant = msg.key.participant || '';
-        const isGroup = rawSender.endsWith('@g.us');
-
-        // chatJid: where to reply (group JID for groups, peer JID otherwise).
-        const chatJid = rawSender;
-
-        // The actual sender JID:
-        //   - groups: always `participant` (remoteJid is the group)
-        //   - 1:1:   `participant` if Baileys provided one (newer protocol), else remoteJid
-        const actualSender = isGroup
-          ? participant || rawSender
-          : (participant || rawSender);
-
-        // Translate LID JIDs to phone JIDs (only handles our own LID)
-        const sender = this.translateJid(actualSender);
-        const pushName = msg.pushName || undefined;
-
-        // Self-chat: only meaningful for 1:1 — remoteJid is our own number AND no participant.
-        const isSelfChat = !isGroup && !participant && this.ownPhoneJid !== null && this.translateJid(rawSender) === this.ownPhoneJid;
-
         log.info(`[whatsapp] Message from ${sender} (chat=${chatJid}, group=${isGroup}, fromMe=${fromMe}, selfChat=${isSelfChat}, images=${images.length}): ${text.slice(0, 80)}`);
 
         this.onMessage(sender, pushName, text, fromMe, isSelfChat, chatJid, isGroup, images.length > 0 ? images : undefined);

package/workspace/client/index.html

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

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

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

@@ -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>
   );
 }