bloby-bot 0.17.2

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

@@ -0,0 +1,134 @@
+import { Search, Mail, DollarSign, TrendingUp } from 'lucide-react';
+import { AreaChart, Area, BarChart, Bar, ResponsiveContainer } from 'recharts';
+
+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 }];
+
+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 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>
+
+      <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="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>
+
+        {/* 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>
+
+        {/* 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>
+
+        {/* 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>
+
+      </div>
+    </div>
+  );
+}

package/workspace/client/src/components/ErrorBoundary.tsx

@@ -0,0 +1,23 @@
+import { Component, type ReactNode } from 'react';
+
+interface Props {
+  children: ReactNode;
+  fallback: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+}
+
+export default class ErrorBoundary extends Component<Props, State> {
+  state: State = { hasError: false };
+
+  static getDerivedStateFromError(): State {
+    return { hasError: true };
+  }
+
+  render() {
+    if (this.state.hasError) return this.props.fallback;
+    return this.props.children;
+  }
+}

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

@@ -0,0 +1,56 @@
+import { useState, useEffect } from 'react';
+import type { ReactNode } from 'react';
+import Sidebar from './Sidebar';
+import MobileNav from './MobileNav';
+
+interface Props {
+  children: ReactNode;
+  userName?: string;
+}
+
+export default function DashboardLayout({ children, userName }: Props) {
+  const [status, setStatus] = useState<'healthy' | 'restarting'>('healthy');
+
+  useEffect(() => {
+    const check = () => {
+      fetch('/app/api/health', { signal: AbortSignal.timeout(3000) })
+        .then((r) => setStatus(r.ok ? 'healthy' : 'restarting'))
+        .catch(() => {});
+    };
+    check();
+    const id = setInterval(check, 10_000);
+    return () => clearInterval(id);
+  }, []);
+
+  return (
+    <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} backendStatus={status} />
+        <div className="flex items-center gap-2">
+          <img src="/bloby.png" alt="Bloby" className="h-6 w-auto" />
+          <span className="font-semibold text-base">Bloby</span>
+        </div>
+        <div className="w-10" />
+      </header>
+
+      <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} 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>
+    </div>
+  );
+}

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

@@ -0,0 +1,14 @@
+export default function Footer({ status }: { status: 'healthy' | 'restarting' }) {
+  return (
+    <footer className="flex items-center px-4 md:px-6 py-2.5 text-[11px] text-muted-foreground/60 shrink-0">
+      <div className="flex items-center gap-1.5">
+        <div
+          className={`h-1.5 w-1.5 rounded-full ${
+            status === 'healthy' ? 'bg-emerald-500' : 'bg-orange-400 animate-pulse'
+          }`}
+        />
+        <span>Backend ({status === 'healthy' ? 'Healthy' : 'Restarting'})</span>
+      </div>
+    </footer>
+  );
+}

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

@@ -0,0 +1,30 @@
+import { useState } from 'react';
+import { Menu } from 'lucide-react';
+import {
+  Sheet,
+  SheetContent,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import Sidebar from './Sidebar';
+
+export default function MobileNav({ userName, backendStatus }: { userName?: string; backendStatus?: 'healthy' | 'restarting' }) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <button
+        onClick={() => setOpen(true)}
+        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-64" showCloseButton={false}>
+          <SheetTitle className="sr-only">Navigation</SheetTitle>
+          <Sidebar userName={userName} backendStatus={backendStatus} onNavigate={() => setOpen(false)} />
+        </SheetContent>
+      </Sheet>
+    </>
+  );
+}

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

@@ -0,0 +1,110 @@
+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 Morning';
+  if (hour < 18) return 'Good Afternoon';
+  return 'Good Evening';
+}
+
+interface SidebarProps {
+  userName?: string;
+  backendStatus?: 'healthy' | 'restarting';
+  onNavigate?: () => void;
+}
+
+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 bg-transparent p-5 pt-8">
+      {/* Logo */}
+      <div className="flex items-center gap-2.5 mb-8">
+        <img src="/bloby.png" alt="Bloby" className="h-7 w-auto" />
+        <span className="font-bold text-lg" style={{ fontFamily: "'Space Grotesk', sans-serif" }}>Bloby</span>
+      </div>
+
+      {/* Greeting */}
+      <div className="mb-10">
+        <h1 className="text-4xl font-bold leading-[1.1]">
+          {getGreeting()}{firstName ? ',' : ''}
+        </h1>
+        {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="/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 */}
+      <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>
+  );
+}
+
+function NavItem({
+  to,
+  icon: Icon,
+  label,
+  sub,
+  onNavigate,
+}: {
+  to: string;
+  icon: React.ComponentType<{ className?: string }>;
+  label: string;
+  sub?: string;
+  onNavigate?: () => void;
+}) {
+  return (
+    <NavLink
+      to={to}
+      end
+      onClick={onNavigate}
+      className={({ isActive }) =>
+        cn(
+          '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] 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>
+  );
+}

package/workspace/client/src/components/deleteme_onboarding/WorkspaceTour.tsx

@@ -0,0 +1,104 @@
+/**
+ * First-time workspace onboarding tour.
+ * Uses driver.js to highlight key areas of the workspace.
+ *
+ * This entire folder (deleteme_onboarding) can be safely deleted
+ * once you no longer need the tour. Just remove the import
+ * from App.tsx as well.
+ */
+
+import { useEffect } from 'react';
+import { driver } from 'driver.js';
+import 'driver.js/dist/driver.css';
+import './tour-theme.css';
+
+const TOUR_KEY = 'bloby_workspace_tour_done';
+
+export default function WorkspaceTour({ disabled = false }: { disabled?: boolean }) {
+  useEffect(() => {
+    if (disabled) return;
+    const val = localStorage.getItem(TOUR_KEY);
+    if (val === '1') return;
+
+    const timer = setTimeout(() => {
+      // Prevent StrictMode double-fire
+      if (localStorage.getItem(TOUR_KEY) === '1') return;
+
+      // Build steps dynamically — skip missing elements
+      const steps: any[] = [
+        {
+          element: '#tour-sidebar',
+          popover: {
+            title: 'Your Sidebar',
+            description: 'When you ask Bloby to build something, it creates an App that shows up right here. Think of it as your personal app launcher.',
+            side: 'right',
+            align: 'start',
+          },
+        },
+        {
+          element: '#tour-dashboard',
+          popover: {
+            title: 'Your Dashboard',
+            description: 'Bloby can add widgets here with a summary of your apps, the weather in your city, home automation controls... whatever you need at a glance.',
+            side: 'left',
+            align: 'start',
+          },
+        },
+      ];
+
+      // Only add chat step if the widget exists (not present in dev:workspace mode)
+      if (document.getElementById('bloby-widget-toggle')) {
+        steps.push({
+          element: '#bloby-widget-toggle',
+          popover: {
+            title: 'Chat with Bloby',
+            description: 'This is where you talk to your Bloby. Tell it what to build, ask questions, or just chat. It is always here for you.',
+            side: 'left',
+            align: 'end',
+          },
+        });
+      }
+
+      steps.push({
+        popover: {
+          title: 'A few things to know',
+          description: `
+            <div style="display:flex;flex-direction:column;gap:12px;font-size:13px;line-height:1.5">
+              <p><strong>Make it yours.</strong> These widgets are just examples. You own this workspace and Bloby can transform it into anything you want.</p>
+              <p><strong>Set a workspace password.</strong> By default, your workspace is open. Ask Bloby to add a password so only you can see your apps and data.</p>
+              <p><strong>Keep your chat password safe.</strong> It controls access to Bloby, which has full access to this machine. Use a strong one. If you ever lose it, run <code style="background:rgba(255,255,255,0.1);padding:2px 6px;border-radius:4px;font-size:12px">bloby password-reset</code> in your terminal.</p>
+              <p><strong>Bloby does more than build apps.</strong> It can research topics, manage files, run commands, and help with just about anything. Just ask.</p>
+              <p><strong>Bloby wakes up on its own.</strong> Every 30 minutes, it checks in and can take action proactively. You can adjust this anytime.</p>
+              <p><strong>Schedule anything.</strong> Ask things like "Every day at 6am, send me a briefing" or "In 40 minutes, remind me to call the dentist." Bloby handles cron jobs and one-time reminders.</p>
+              <p><strong>Install it on your phone.</strong> Bloby is a PWA. You can add it to your home screen and enable push notifications. It only pings you when something actually matters, and you can tune that by asking.</p>
+            </div>
+          `,
+        },
+      });
+
+      const d = driver({
+        showProgress: true,
+        animate: true,
+        allowClose: true,
+        overlayColor: '#000',
+        overlayOpacity: 0.75,
+        stagePadding: 12,
+        stageRadius: 16,
+        popoverClass: 'bloby-tour-popover',
+        nextBtnText: 'Next →',
+        prevBtnText: '← Back',
+        doneBtnText: 'Got it!',
+        onDestroyed: () => {
+          localStorage.setItem(TOUR_KEY, '1');
+        },
+        steps,
+      });
+
+      d.drive();
+    }, 800);
+
+    return () => clearTimeout(timer);
+  }, [disabled]);
+
+  return null;
+}

package/workspace/client/src/components/deleteme_onboarding/tour-theme.css

@@ -0,0 +1,75 @@
+.bloby-tour-popover {
+  background: #1A1A1A !important;
+  color: #f5f5f5 !important;
+  border: 1px solid rgba(255, 255, 255, 0.08) !important;
+  border-radius: 16px !important;
+  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5) !important;
+  max-width: 380px !important;
+}
+
+.bloby-tour-popover .driver-popover-title {
+  color: #f5f5f5 !important;
+  font-size: 16px !important;
+  font-weight: 700 !important;
+}
+
+.bloby-tour-popover .driver-popover-description {
+  color: rgba(255, 255, 255, 0.6) !important;
+  font-size: 13px !important;
+  line-height: 1.5 !important;
+}
+
+.bloby-tour-popover .driver-popover-description p strong {
+  color: #f5f5f5 !important;
+}
+
+.bloby-tour-popover .driver-popover-navigation-btns {
+  gap: 6px !important;
+}
+
+.bloby-tour-popover .driver-popover-next-btn {
+  background: linear-gradient(to right, #4FF2FE, #BC20DE, #FE546B) !important;
+  color: #fff !important;
+  border: none !important;
+  border-radius: 8px !important;
+  font-weight: 600 !important;
+  font-size: 12px !important;
+  padding: 6px 16px !important;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
+}
+
+.bloby-tour-popover .driver-popover-prev-btn {
+  background: rgba(255, 255, 255, 0.06) !important;
+  color: rgba(255, 255, 255, 0.6) !important;
+  border: 1px solid rgba(255, 255, 255, 0.08) !important;
+  border-radius: 8px !important;
+  font-weight: 600 !important;
+  font-size: 12px !important;
+  padding: 6px 16px !important;
+  white-space: nowrap !important;
+}
+
+.bloby-tour-popover .driver-popover-prev-btn:hover {
+  color: #f5f5f5 !important;
+  background: rgba(255, 255, 255, 0.1) !important;
+}
+
+.bloby-tour-popover .driver-popover-progress-text {
+  color: rgba(255, 255, 255, 0.3) !important;
+  font-size: 11px !important;
+}
+
+.bloby-tour-popover .driver-popover-close-btn {
+  color: rgba(255, 255, 255, 0.4) !important;
+}
+
+.bloby-tour-popover .driver-popover-close-btn:hover {
+  color: #f5f5f5 !important;
+}
+
+.bloby-tour-popover .driver-popover-arrow-side-left,
+.bloby-tour-popover .driver-popover-arrow-side-right,
+.bloby-tour-popover .driver-popover-arrow-side-top,
+.bloby-tour-popover .driver-popover-arrow-side-bottom {
+  border-color: #1A1A1A !important;
+}

package/workspace/client/src/components/ui/avatar.tsx

@@ -0,0 +1,109 @@
+"use client"
+
+import * as React from "react"
+import { Avatar as AvatarPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Avatar({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root> & {
+  size?: "default" | "sm" | "lg"
+}) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      data-size={size}
+      className={cn(
+        "group/avatar relative flex size-8 shrink-0 overflow-hidden rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="avatar-badge"
+      className={cn(
+        "bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full ring-2 select-none",
+        "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
+        "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
+        "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group"
+      className={cn(
+        "*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroupCount({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group-count"
+      className={cn(
+        "bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  AvatarBadge,
+  AvatarGroup,
+  AvatarGroupCount,
+}