bloby-bot 0.39.1 → 0.41.0

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

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

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

package/workspace/client/src/styles/globals.css

@@ -3,7 +3,7 @@
 @custom-variant dark (&:is(.dark *));
 
 @theme inline {
-  --font-sans: 'Inter', 'Inter Display', system-ui, -apple-system, sans-serif;
+  --font-sans: system-ui, -apple-system, sans-serif;
   --color-background: #0A0A0A;
   --color-foreground: #f5f5f5;
   --color-card: #2a2a2a;
@@ -44,76 +44,16 @@ html {
   -ms-touch-action: manipulation;
 }
 
-html {
-  background-color: #000;
-}
-
 body {
-  background-color: transparent;
-  isolation: isolate;
+  background-color: var(--color-background);
+  background-image: radial-gradient(circle, #1f1f1f 1.2px, transparent 1.2px);
+  background-size: 20px 20px;
   color: var(--color-foreground);
-  font-family: 'Inter', 'Inter Display', system-ui, -apple-system, sans-serif;
-  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   overscroll-behavior: none;
 }
 
-h1, h2, h3, h4, h5, h6 {
-  letter-spacing: -0.02em;
-}
-
-/* ── Glass utilities ── */
-.glass-card {
-  position: relative;
-  background: rgba(20, 20, 25, 0.35);
-  backdrop-filter: blur(24px) saturate(140%);
-  -webkit-backdrop-filter: blur(24px) saturate(140%);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 28px;
-  box-shadow:
-    0 1px 0 0 rgba(255, 255, 255, 0.06) inset,
-    0 20px 60px -20px rgba(0, 0, 0, 0.45);
-}
-.glass-card::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  pointer-events: none;
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.02) 35%, transparent 100%);
-  mask: linear-gradient(180deg, #000, transparent 60%);
-  -webkit-mask: linear-gradient(180deg, #000, transparent 60%);
-}
-
-.glass-card-md {
-  border-radius: 20px;
-}
-
-.glass-pill {
-  position: relative;
-  background: rgba(20, 20, 25, 0.35);
-  backdrop-filter: blur(24px) saturate(140%);
-  -webkit-backdrop-filter: blur(24px) saturate(140%);
-  border: 1px solid rgba(255, 255, 255, 0.10);
-  box-shadow:
-    0 1px 0 0 rgba(255, 255, 255, 0.08) inset,
-    0 10px 40px -15px rgba(0, 0, 0, 0.4);
-}
-.glass-pill::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  pointer-events: none;
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.02) 35%, transparent 100%);
-}
-
-.glass-inner-active {
-  background: rgba(255, 255, 255, 0.14);
-  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.12) inset;
-}
-
 ::selection {
   background-color: rgba(175, 39, 227, 0.25);
 }
@@ -177,28 +117,3 @@ h1, h2, h3, h4, h5, h6 {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
 }
-
-/* ── Workspace Lock animations ── */
-@keyframes shake {
-  0%, 100% { transform: translateX(0); }
-  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
-  20%, 40%, 60%, 80% { transform: translateX(4px); }
-}
-
-.animate-shake {
-  animation: shake 0.45s cubic-bezier(.36,.07,.19,.97);
-}
-
-@keyframes scale-in-dot {
-  from { transform: scale(0); opacity: 0; }
-  to { transform: scale(1); opacity: 1; }
-}
-
-.animate-scale-in {
-  animation: scale-in-dot 0.15s ease-out forwards;
-}
-
-@keyframes fadeIn {
-  from { opacity: 0; transform: translateY(4px); }
-  to { opacity: 1; transform: translateY(0); }
-}

package/workspace/client/public/.well-known/assetlinks.json

@@ -1,8 +0,0 @@
-[{
-      "relation": ["delegate_permission/common.handle_all_urls"],
-      "target": {
-        "namespace": "android_app",
-        "package_name": "bot.bloby.consensus",
-        "sha256_cert_fingerprints": ["1A:5D:3C:F4:D3:60:A2:65:2D:34:8F:D5:7C:18:8F:3C:01:99:9E:5B:02:0C:D0:AA:E7:8F:F4:74:EE:C3:C0:7F"]
-      }
-    }]

package/workspace/client/public/brand/blackrock.svg

@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 520 80" role="img" aria-label="BlackRock">
-  <text x="0" y="60"
-    font-family="'Times New Roman', Georgia, serif"
-    font-weight="700"
-    font-size="72"
-    letter-spacing="-2"
-    fill="#ffffff">BlackRock</text>
-</svg>

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

@@ -1,145 +0,0 @@
-import { useState, useRef, useEffect } from 'react';
-import { Send, Loader2, Sparkles } from 'lucide-react';
-
-interface Message {
-  role: 'user' | 'assistant';
-  content: string;
-}
-
-export default function AiChatPage() {
-  const [messages, setMessages] = useState<Message[]>([]);
-  const [input, setInput] = useState('');
-  const [loading, setLoading] = useState(false);
-  const [sessionId, setSessionId] = useState<string | undefined>();
-  const bottomRef = useRef<HTMLDivElement>(null);
-  const inputRef = useRef<HTMLTextAreaElement>(null);
-
-  useEffect(() => {
-    bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
-  }, [messages, loading]);
-
-  useEffect(() => {
-    inputRef.current?.focus();
-  }, []);
-
-  const sendMessage = async () => {
-    const text = input.trim();
-    if (!text || loading) return;
-
-    setInput('');
-    setMessages((prev) => [...prev, { role: 'user', content: text }]);
-    setLoading(true);
-
-    try {
-      const res = await fetch('/app/api/aichat', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ message: text, sessionId }),
-      });
-      const data = await res.json();
-
-      if (data.sessionId) setSessionId(data.sessionId);
-
-      const reply = data.response || data.error || 'No response';
-      setMessages((prev) => [...prev, { role: 'assistant', content: reply }]);
-    } catch {
-      setMessages((prev) => [
-        ...prev,
-        { role: 'assistant', content: 'Failed to reach the server.' },
-      ]);
-    } finally {
-      setLoading(false);
-      inputRef.current?.focus();
-    }
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter' && !e.shiftKey) {
-      e.preventDefault();
-      sendMessage();
-    }
-  };
-
-  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">
-      {/* Header */}
-      <div className="flex items-start gap-4 mb-6 shrink-0">
-        <div className="h-12 w-12 rounded-2xl flex items-center justify-center bg-gradient-to-br from-violet-300/40 to-fuchsia-500/20 border border-white/10 backdrop-blur-xl shrink-0">
-          <Sparkles className="h-5 w-5 text-violet-200" />
-        </div>
-        <div>
-          <h1 className="text-2xl sm:text-3xl font-semibold text-white tracking-tight">AI Chat</h1>
-          <p className="text-sm text-white/60 mt-1">Chat with Claude.</p>
-        </div>
-      </div>
-
-      {/* Messages */}
-      <div className="flex-1 overflow-y-auto space-y-4 pr-1">
-        {messages.length === 0 && !loading && (
-          <div className="flex items-center justify-center h-full">
-            <div className="glass-card glass-card-md px-5 py-4">
-              <p className="relative text-sm text-white/60">Send a message to start chatting.</p>
-            </div>
-          </div>
-        )}
-        {messages.map((msg, i) => (
-          <div
-            key={i}
-            className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}
-          >
-            {msg.role === 'user' ? (
-              <div
-                className="relative max-w-[80%] rounded-2xl px-4 py-2.5 text-sm leading-relaxed whitespace-pre-wrap text-white border border-white/10 backdrop-blur-xl"
-                style={{
-                  background:
-                    'linear-gradient(135deg, rgba(236, 72, 153, 0.35), rgba(225, 29, 72, 0.25))',
-                  boxShadow:
-                    '0 1px 0 0 rgba(255,255,255,0.1) inset, 0 10px 30px -10px rgba(244, 63, 94, 0.35)',
-                }}
-              >
-                {msg.content}
-              </div>
-            ) : (
-              <div className="relative max-w-[80%] glass-card glass-card-md px-4 py-2.5">
-                <p className="relative text-sm leading-relaxed whitespace-pre-wrap text-white/90">
-                  {msg.content}
-                </p>
-              </div>
-            )}
-          </div>
-        ))}
-        {loading && (
-          <div className="flex justify-start">
-            <div className="relative glass-card glass-card-md px-4 py-2.5 flex items-center gap-2">
-              <Loader2 className="h-4 w-4 animate-spin text-white/60 relative" />
-              <span className="text-sm text-white/60 relative">Thinking…</span>
-            </div>
-          </div>
-        )}
-        <div ref={bottomRef} />
-      </div>
-
-      {/* Input */}
-      <div className="shrink-0 pt-4">
-        <div className="glass-pill rounded-full flex items-end gap-2 max-w-3xl mx-auto px-2 py-2">
-          <textarea
-            ref={inputRef}
-            value={input}
-            onChange={(e) => setInput(e.target.value)}
-            onKeyDown={handleKeyDown}
-            placeholder="Type a message…"
-            rows={1}
-            className="relative flex-1 resize-none bg-transparent border-none outline-none px-3 py-2 text-sm text-white placeholder-white/40 max-h-40"
-          />
-          <button
-            onClick={sendMessage}
-            disabled={loading || !input.trim()}
-            className="relative shrink-0 h-9 w-9 rounded-full bg-gradient-to-br from-violet-500 to-fuchsia-500 hover:brightness-110 disabled:opacity-40 disabled:hover:brightness-100 flex items-center justify-center transition shadow-lg shadow-fuchsia-500/20"
-          >
-            <Send className="h-4 w-4 text-white" />
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}