fluxy-bot 0.4.22 → 0.4.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fluxy-bot",
-  "version": "0.4.22",
+  "version": "0.4.24",
   "description": "Self-hosted, self-evolving AI agent with its own dashboard.",
   "type": "module",
   "license": "MIT",

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

@@ -1,52 +1,76 @@
-import { ChevronDown, FileText, SlidersHorizontal } from 'lucide-react';
-import ConversationAnalytics from './ConversationAnalytics';
-import PromoCard from './PromoCard';
-import TodayStats from './TodayStats';
-import ReportCard from './ReportCard';
+const starterSuggestions = [
+  'Build me a CRM',
+  'Create a habit tracker',
+  'Make a finance dashboard',
+  'Build a task manager',
+];
 
 export default function DashboardPage() {
+  const handleSuggestion = (text: string) => {
+    // Open the chat widget and pre-fill the suggestion
+    const panel = document.getElementById('fluxy-widget-panel');
+    if (panel && !panel.classList.contains('open')) {
+      const toggle = document.getElementById('fluxy-widget-toggle');
+      toggle?.click();
+    }
+    // Give the widget a moment to open, then try to fill the input
+    setTimeout(() => {
+      const input = document.querySelector<HTMLTextAreaElement>(
+        '#fluxy-widget-panel textarea, #fluxy-widget-panel input[type="text"]'
+      );
+      if (input) {
+        const nativeSetter = Object.getOwnPropertyDescriptor(
+          window.HTMLTextAreaElement.prototype, 'value'
+        )?.set || Object.getOwnPropertyDescriptor(
+          window.HTMLInputElement.prototype, 'value'
+        )?.set;
+        nativeSetter?.call(input, text);
+        input.dispatchEvent(new Event('input', { bubbles: true }));
+        input.focus();
+      }
+    }, 400);
+  };
+
   return (
-    <div className="max-w-6xl mx-auto space-y-4 sm:space-y-6">
-      {/* Title row */}
-      <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3">
-        <div>
-          <h2 className="text-2xl sm:text-3xl font-semibold">Dashboard Overview</h2>
-          <p className="text-sm text-muted-foreground mt-1">
-            Overview{' '}
-            <span className="mx-1.5 text-muted-foreground/50">&gt;</span>
-            All Systems
-          </p>
-        </div>
-        <div className="flex items-center gap-2 overflow-x-auto">
-          <button className="flex items-center gap-1.5 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full bg-card border border-border text-xs sm:text-sm shrink-0 hover:text-foreground transition-colors">
-            Activity
-            <ChevronDown className="h-3.5 w-3.5" />
-          </button>
-          <button className="flex items-center gap-1.5 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full bg-card border border-border text-xs sm:text-sm shrink-0 hover:text-foreground transition-colors">
-            Export
-            <FileText className="h-3.5 w-3.5" />
-          </button>
-          <button className="flex items-center gap-1.5 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full bg-card border border-border text-xs sm:text-sm shrink-0 hover:text-foreground transition-colors">
-            Filter
-            <SlidersHorizontal className="h-3.5 w-3.5" />
+    <div className="flex flex-col items-center justify-start h-full px-4 pt-16 sm:pt-24">
+      {/* Welcome message */}
+      <h1 className="text-2xl sm:text-3xl font-bold text-center mb-2">
+        Hi, I'm Fluxy
+      </h1>
+      <p className="text-muted-foreground text-sm sm:text-base text-center max-w-md mb-8">
+        Tell me what to build and I'll create it for you, right here.
+      </p>
+
+      {/* Starter suggestion chips */}
+      <div className="flex flex-wrap items-center justify-center gap-2 sm:gap-3 max-w-lg mb-12">
+        {starterSuggestions.map((suggestion) => (
+          <button
+            key={suggestion}
+            onClick={() => handleSuggestion(suggestion)}
+            className="px-4 py-2 sm:px-5 sm:py-2.5 rounded-full border border-border bg-card text-sm text-muted-foreground hover:text-foreground hover:border-primary/40 hover:bg-card/80 transition-all duration-200 active:scale-[0.97]"
+          >
+            {suggestion}
           </button>
-        </div>
+        ))}
       </div>
 
-      {/* Card grid */}
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-        {/* Left: tall analytics card */}
-        <ConversationAnalytics />
-
-        {/* Right column */}
-        <div className="space-y-4">
-          <PromoCard />
-          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-            <TodayStats />
-            <ReportCard />
-          </div>
-        </div>
+      {/* Arrow pointing to chat */}
+      {/* Desktop */}
+      <div
+        id="chat-arrow-desktop"
+        className="hidden md:flex fixed flex-col items-center pointer-events-none"
+        style={{ bottom: 100, right: 100 }}
+      >
+        <img src="/arrow.png" alt="" style={{ width: 120 }} />
       </div>
+      {/* Mobile */}
+      <img
+        id="chat-arrow-mobile"
+        src="/arrow.png"
+        alt=""
+        className="block md:hidden fixed pointer-events-none"
+        style={{ width: 90, bottom: 75, right: 60 }}
+      />
     </div>
   );
 }

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

@@ -1,22 +1,50 @@
+import { useState, useEffect } from 'react';
 import type { ReactNode } from 'react';
 import Sidebar from './Sidebar';
-import DashboardHeader from './DashboardHeader';
+import Footer from './Footer';
+import MobileNav from './MobileNav';
 
 interface Props {
   children: ReactNode;
 }
 
 export default function DashboardLayout({ children }: Props) {
+  const [connected, setConnected] = useState(true);
+
+  useEffect(() => {
+    const check = () => {
+      fetch('/api/health', { method: 'HEAD' })
+        .then(() => setConnected(true))
+        .catch(() => setConnected(false));
+    };
+    check();
+    const id = setInterval(check, 15_000);
+    return () => clearInterval(id);
+  }, []);
+
   return (
-    <div className="flex h-dvh flex-col overflow-x-hidden">
-      <DashboardHeader />
+    <div className="flex h-dvh flex-col bg-background">
+      {/* Mobile header */}
+      <header className="flex items-center justify-between px-4 py-3 md:hidden">
+        <MobileNav />
+        <div className="flex items-center gap-2">
+          <img src="/fluxy.png" alt="Fluxy" className="h-6 w-auto" />
+          <span className="font-semibold text-base">Fluxy</span>
+        </div>
+        <div className="w-10" />
+      </header>
+
       <div className="flex flex-1 overflow-hidden">
         {/* Desktop sidebar */}
         <div className="hidden md:flex shrink-0">
           <Sidebar />
         </div>
-        {/* Main content */}
-        <main className="flex-1 overflow-y-auto p-4 md:p-6">{children}</main>
+
+        {/* Main content + footer */}
+        <div className="flex flex-1 flex-col overflow-hidden">
+          <main className="flex-1 overflow-y-auto">{children}</main>
+          <Footer connected={connected} />
+        </div>
       </div>
     </div>
   );

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

@@ -0,0 +1,16 @@
+export default function Footer({ connected }: { connected: boolean }) {
+  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 ${
+            connected ? 'bg-emerald-500' : 'bg-red-500'
+          }`}
+        />
+        <span>{connected ? 'Connected' : 'Disconnected'}</span>
+        <span className="mx-1.5 text-muted-foreground/30">|</span>
+        <span>Fluxy v0.1.0</span>
+      </div>
+    </footer>
+  );
+}

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

@@ -11,20 +11,20 @@ export default function MobileNav() {
   const [open, setOpen] = useState(false);
 
   return (
-    <div className="md:hidden">
+    <>
       <button
         onClick={() => setOpen(true)}
-        className="flex items-center justify-center h-10 w-10 rounded-full bg-card border border-border text-muted-foreground hover:text-foreground transition-colors"
+        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" showCloseButton={false}>
+        <SheetContent side="left" className="p-0 w-64" showCloseButton={false}>
           <SheetTitle className="sr-only">Navigation</SheetTitle>
           <Sidebar />
         </SheetContent>
       </Sheet>
-    </div>
+    </>
   );
 }

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

@@ -1,81 +1,104 @@
+import { useState } from 'react';
 import {
-  ChevronDown,
   LayoutDashboard,
-  MessageSquare,
-  Brain,
-  BookOpen,
-  ScrollText,
-  Settings,
+  AppWindow,
+  BarChart3,
+  Search,
+  HelpCircle,
+  ChevronDown,
 } from 'lucide-react';
 import { cn } from '@/lib/utils';
 
-const navSections = [
-  {
-    label: 'HOME',
-    items: [
-      { label: 'Overview', icon: LayoutDashboard, href: '#', active: true },
-      { label: 'Conversations', icon: MessageSquare, href: '#' },
-      { label: 'Models', icon: Brain, href: '#' },
-      { label: 'Knowledge', icon: BookOpen, href: '#' },
-    ],
-  },
-  {
-    label: 'SYSTEM',
-    items: [
-      { label: 'Logs', icon: ScrollText, href: '#' },
-      { label: 'Settings', icon: Settings, href: '#' },
-    ],
-  },
-];
-
 function getGreeting(): string {
   const hour = new Date().getHours();
-  if (hour < 12) return 'Good\nMorning!';
-  if (hour < 18) return 'Good\nAfternoon!';
-  return 'Good\nEvening!';
+  if (hour < 12) return 'Good\nMorning';
+  if (hour < 18) return 'Good\nAfternoon';
+  return 'Good\nEvening';
 }
 
 export default function Sidebar() {
+  const [appsOpen, setAppsOpen] = useState(false);
+
   return (
-    <aside className="flex flex-col h-full w-72 p-6 pt-8">
-      {/* Welcome */}
+    <aside className="flex flex-col h-full w-64 border-r border-border/50 bg-sidebar p-5 pt-8">
+      {/* Logo */}
+      <div className="flex items-center gap-2.5 mb-8">
+        <img src="/fluxy.png" alt="Fluxy" className="h-7 w-auto" />
+        <span className="font-semibold text-lg">Fluxy</span>
+      </div>
+
+      {/* Greeting */}
       <div className="mb-10">
-        <h1 className="text-5xl font-bold leading-[1.1] whitespace-pre-line">
+        <h1 className="text-4xl font-bold leading-[1.1] whitespace-pre-line">
           {getGreeting()}
         </h1>
-        <p className="text-sm text-muted-foreground mt-3">
-          Your AI assistant dashboard
-        </p>
+        <h2 className="text-4xl font-bold text-primary mt-0.5">Bruno</h2>
       </div>
 
-      {/* Navigation sections */}
-      <nav className="flex-1 space-y-8">
-        {navSections.map((section) => (
-          <div key={section.label}>
-            <span className="text-[11px] font-medium uppercase tracking-widest text-muted-foreground mb-3 block">
-              {section.label}
-            </span>
-            <div className="space-y-1">
-              {section.items.map((item) => (
-                <a
-                  key={item.label}
-                  href={item.href}
-                  className={cn(
-                    'flex items-center gap-3 px-4 py-2.5 rounded-full text-sm transition-colors',
-                    item.active
-                      ? 'bg-foreground text-background font-medium'
-                      : 'text-muted-foreground hover:text-foreground',
-                  )}
-                >
-                  <item.icon className="h-4 w-4" />
-                  {item.label}
-                  {item.active && <ChevronDown className="h-4 w-4 ml-auto" />}
-                </a>
-              ))}
+      {/* Navigation */}
+      <nav className="flex-1 space-y-0.5">
+        <NavButton icon={LayoutDashboard} label="Dashboard" active />
+
+        {/* My Apps with dropdown */}
+        <div>
+          <button
+            onClick={() => setAppsOpen(!appsOpen)}
+            className="flex items-center gap-3 w-full px-3 py-2.5 rounded-lg text-sm text-muted-foreground hover:text-foreground hover:bg-sidebar-accent/50 transition-colors"
+          >
+            <AppWindow className="h-[18px] w-[18px]" />
+            My Apps
+            <ChevronDown
+              className={cn(
+                'h-3.5 w-3.5 ml-auto transition-transform duration-200',
+                appsOpen && 'rotate-180',
+              )}
+            />
+          </button>
+          {appsOpen && (
+            <div className="ml-9 mt-0.5 space-y-0.5">
+              <button className="block w-full text-left px-3 py-2 rounded-lg text-sm text-muted-foreground hover:text-foreground hover:bg-sidebar-accent/50 transition-colors">
+                App 1
+              </button>
+              <button className="block w-full text-left px-3 py-2 rounded-lg text-sm text-muted-foreground hover:text-foreground hover:bg-sidebar-accent/50 transition-colors">
+                App 2
+              </button>
             </div>
-          </div>
-        ))}
+          )}
+        </div>
+
+        <NavButton icon={BarChart3} label="Reports" />
+        <NavButton icon={Search} label="Research" />
+        <NavButton icon={HelpCircle} label="What Else?" />
       </nav>
+
+      {/* Bottom info */}
+      <div className="pt-4 border-t border-border/50">
+        <p className="text-[11px] text-muted-foreground/60">Fluxy v0.1.0</p>
+      </div>
     </aside>
   );
 }
+
+function NavButton({
+  icon: Icon,
+  label,
+  active,
+}: {
+  icon: React.ComponentType<{ className?: string }>;
+  label: string;
+  active?: boolean;
+}) {
+  return (
+    <button
+      className={cn(
+        'flex items-center gap-3 w-full px-3 py-2.5 rounded-lg text-sm transition-colors',
+        active
+          ? 'bg-sidebar-accent text-foreground font-medium'
+          : 'text-muted-foreground hover:text-foreground hover:bg-sidebar-accent/50',
+      )}
+    >
+      <Icon className="h-[18px] w-[18px]" />
+      {label}
+    </button>
+  );
+}

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

@@ -1,98 +0,0 @@
-import { ChevronDown, MoreHorizontal } from 'lucide-react';
-import { Card, CardContent } from '@/components/ui/card';
-
-const weeklyActivity = [
-  { model: 'GPT-4o', days: [3, 2, 4, 3, 1, 2, 0] },
-  { model: 'Claude', days: [2, 4, 3, 4, 2, 1, 1] },
-  { model: 'Local', days: [1, 1, 2, 1, 3, 4, 2] },
-];
-
-const dayLabels = ['M', 'T', 'W', 'T', 'F', 'S', 'S'];
-
-const activityColors = [
-  '#2a2a2a', '#1e3a5f', '#2c5a8f', '#3578bf', '#3C8FFF',
-];
-
-const activityLegend = [
-  { label: '< 10', level: 1 },
-  { label: '10–50', level: 2 },
-  { label: '> 50', level: 3 },
-  { label: '100+', level: 4 },
-  { label: 'None', level: 0 },
-];
-
-export default function ConversationAnalytics() {
-  return (
-    <Card className="bg-card border-border h-full">
-      <CardContent className="p-4 sm:p-6">
-        {/* Title row */}
-        <div className="flex items-center justify-between mb-4 sm:mb-6">
-          <h3 className="text-base sm:text-lg font-semibold">Conversation Activity</h3>
-          <div className="flex items-center gap-2">
-            <button className="flex items-center gap-1.5 px-3 py-1.5 rounded-full border border-border text-xs sm:text-sm">
-              Weekly
-              <ChevronDown className="h-3.5 w-3.5" />
-            </button>
-            <button className="flex items-center justify-center h-8 w-8 rounded-full border border-border text-muted-foreground">
-              <MoreHorizontal className="h-4 w-4" />
-            </button>
-          </div>
-        </div>
-
-        {/* Total + legend */}
-        <div className="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-3 mb-4 sm:mb-6">
-          <div>
-            <span className="text-3xl sm:text-4xl font-bold">2.4K</span>
-            <p className="text-sm text-muted-foreground mt-1">Total Messages</p>
-          </div>
-          <div className="flex items-center gap-2 sm:gap-3 flex-wrap">
-            {activityLegend.map((item) => (
-              <div key={item.label} className="flex items-center gap-1">
-                <div
-                  className="h-2 w-2 sm:h-2.5 sm:w-2.5 rounded-full"
-                  style={{ backgroundColor: activityColors[item.level] }}
-                />
-                <span className="text-[10px] sm:text-xs text-muted-foreground">{item.label}</span>
-              </div>
-            ))}
-          </div>
-        </div>
-
-        {/* Activity grid */}
-        <div className="space-y-2 sm:space-y-3">
-          {weeklyActivity.map((row) => (
-            <div key={row.model} className="flex items-center gap-2 sm:gap-4">
-              <span className="text-xs sm:text-sm text-muted-foreground w-12 sm:w-16 shrink-0">
-                {row.model}
-              </span>
-              <div className="grid grid-cols-7 gap-1.5 sm:gap-2 flex-1">
-                {row.days.map((level, i) => (
-                  <div
-                    key={i}
-                    className="aspect-square rounded-full max-w-10"
-                    style={{ backgroundColor: activityColors[level] }}
-                  />
-                ))}
-              </div>
-            </div>
-          ))}
-        </div>
-
-        {/* Day labels */}
-        <div className="flex items-center gap-2 sm:gap-4 mt-2 sm:mt-4">
-          <div className="w-12 sm:w-16 shrink-0" />
-          <div className="grid grid-cols-7 gap-1.5 sm:gap-2 flex-1">
-            {dayLabels.map((d, i) => (
-              <span
-                key={i}
-                className="flex items-center justify-center text-[10px] sm:text-xs text-muted-foreground max-w-10 aspect-square"
-              >
-                {d}
-              </span>
-            ))}
-          </div>
-        </div>
-      </CardContent>
-    </Card>
-  );
-}

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

@@ -1,44 +0,0 @@
-import { ArrowUpRight } from 'lucide-react';
-import { Card, CardContent } from '@/components/ui/card';
-
-export default function PromoCard() {
-  return (
-    <Card
-      className="border-border overflow-hidden relative"
-      style={{
-        background:
-          'radial-gradient(ellipse at 80% 20%, rgba(60,143,255,0.07) 0%, transparent 50%), radial-gradient(ellipse at 20% 80%, rgba(60,143,255,0.04) 0%, transparent 50%), linear-gradient(135deg, #282828 0%, #1c2a3a 100%)',
-      }}
-    >
-      {/* Decorative rings */}
-      <div
-        className="absolute inset-0 opacity-[0.06]"
-        style={{
-          backgroundImage:
-            'radial-gradient(circle at 70% 40%, transparent 20%, rgba(60,143,255,0.4) 20.5%, transparent 21%), radial-gradient(circle at 70% 40%, transparent 35%, rgba(60,143,255,0.3) 35.5%, transparent 36%), radial-gradient(circle at 70% 40%, transparent 50%, rgba(60,143,255,0.2) 50.5%, transparent 51%)',
-        }}
-      />
-      <CardContent className="relative p-6 flex flex-col justify-between min-h-[200px]">
-        <div>
-          <h3 className="text-2xl font-bold leading-tight mb-3">
-            Connect New
-            <br />
-            AI Models
-          </h3>
-          <span className="inline-flex items-center gap-1 px-2.5 py-1 rounded-full bg-destructive/15 text-destructive text-xs font-medium">
-            +15% faster
-          </span>
-          <span className="text-xs text-muted-foreground ml-2">
-            with parallel routing
-          </span>
-        </div>
-        <div className="flex justify-end mt-4">
-          <button className="flex items-center gap-2 px-5 py-2.5 rounded-full bg-primary text-primary-foreground text-sm font-medium hover:brightness-110 transition">
-            Explore
-            <ArrowUpRight className="h-4 w-4" />
-          </button>
-        </div>
-      </CardContent>
-    </Card>
-  );
-}

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

@@ -1,35 +0,0 @@
-import { FileText, ArrowUpRight, X } from 'lucide-react';
-import { Card, CardContent } from '@/components/ui/card';
-
-export default function ReportCard() {
-  return (
-    <Card
-      className="border-border overflow-hidden relative"
-      style={{
-        background:
-          'radial-gradient(circle at 30% 50%, rgba(253,72,107,0.2) 0%, transparent 45%), radial-gradient(circle at 80% 60%, rgba(253,72,107,0.12) 0%, transparent 40%), linear-gradient(135deg, #2a1a20 0%, #211518 100%)',
-      }}
-    >
-      <CardContent className="relative p-6 flex flex-col justify-between h-full">
-        {/* Icon buttons */}
-        <div className="flex items-center gap-1.5 mb-4">
-          <button className="flex items-center justify-center h-8 w-8 rounded-full bg-black/40 text-foreground/80 hover:text-foreground transition-colors">
-            <FileText className="h-3.5 w-3.5" />
-          </button>
-          <button className="flex items-center justify-center h-8 w-8 rounded-full bg-black/40 text-foreground/80 hover:text-foreground transition-colors">
-            <ArrowUpRight className="h-3.5 w-3.5" />
-          </button>
-          <button className="flex items-center justify-center h-8 w-8 rounded-full bg-black/40 text-foreground/80 hover:text-foreground transition-colors ml-auto">
-            <X className="h-3.5 w-3.5" />
-          </button>
-        </div>
-        <div>
-          <h3 className="text-lg font-bold mb-1">System Report</h3>
-          <p className="text-xs text-foreground/60 leading-relaxed">
-            Generate and download a detailed report of your system
-          </p>
-        </div>
-      </CardContent>
-    </Card>
-  );
-}

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

@@ -1,28 +0,0 @@
-import { ChevronDown } from 'lucide-react';
-import { Card, CardContent } from '@/components/ui/card';
-
-export default function TodayStats() {
-  return (
-    <Card className="bg-card border-border">
-      <CardContent className="p-6 flex flex-col justify-between h-full">
-        <div className="flex items-center gap-2 mb-4">
-          <div className="flex items-center justify-center h-8 w-8 rounded-full border border-border">
-            <ChevronDown className="h-4 w-4 text-muted-foreground" />
-          </div>
-          <span className="text-sm font-medium">
-            Today&apos;s
-            <br />
-            Messages
-          </span>
-        </div>
-        <div>
-          <span className="text-4xl font-bold text-primary">342</span>
-          <div className="flex items-center gap-1 mt-1">
-            <span className="text-sm text-primary font-medium">+8%</span>
-            <span className="text-xs text-muted-foreground">vs yesterday</span>
-          </div>
-        </div>
-      </CardContent>
-    </Card>
-  );
-}

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

@@ -1,8 +0,0 @@
-export default function ConnectionStatus({ connected }: { connected: boolean }) {
-  return (
-    <div className="flex items-center gap-1.5">
-      <div className={`w-2 h-2 rounded-full ${connected ? 'bg-green-500' : 'bg-red-500'}`} />
-      <span className="text-xs text-slate-500">{connected ? 'Connected' : 'Disconnected'}</span>
-    </div>
-  );
-}

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

@@ -1,53 +0,0 @@
-import { Bell } from 'lucide-react';
-import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { Avatar, AvatarFallback } from '@/components/ui/avatar';
-import MobileNav from './MobileNav';
-
-export default function DashboardHeader() {
-  return (
-    <header className="flex items-center justify-between px-4 md:px-6 py-3 md:py-4">
-      {/* Left: hamburger (mobile) + logo */}
-      <div className="flex items-center gap-3">
-        <MobileNav />
-        <div className="flex items-center gap-2">
-          <img src="/fluxy.png" alt="Fluxy" className="h-6 w-auto" />
-          <span className="font-semibold text-lg hidden sm:block">Fluxy</span>
-        </div>
-      </div>
-
-      {/* Center: pill tabs (desktop only) */}
-      <div className="hidden md:block">
-        <Tabs defaultValue="overview">
-          <TabsList className="bg-card rounded-full p-1 h-auto border border-border">
-            {['Overview', 'Conversations', 'Models', 'Knowledge', 'Activity'].map(
-              (tab) => (
-                <TabsTrigger
-                  key={tab}
-                  value={tab.toLowerCase()}
-                  className="rounded-full px-5 py-2 text-sm data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-none"
-                >
-                  {tab}
-                </TabsTrigger>
-              ),
-            )}
-          </TabsList>
-        </Tabs>
-      </div>
-
-      {/* Right: actions */}
-      <div className="flex items-center gap-2">
-        <button className="relative flex items-center justify-center h-10 w-10 rounded-full bg-card border border-border text-muted-foreground hover:text-foreground transition-colors">
-          <Bell className="h-4 w-4" />
-          <span className="absolute -top-0.5 -right-0.5 flex items-center justify-center h-4 w-4 rounded-full bg-destructive text-[10px] font-medium text-white">
-            2
-          </span>
-        </button>
-        <Avatar className="h-10 w-10 border border-border">
-          <AvatarFallback className="bg-primary text-primary-foreground text-sm font-medium">
-            F
-          </AvatarFallback>
-        </Avatar>
-      </div>
-    </header>
-  );
-}

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

@@ -1,10 +0,0 @@
-import ConnectionStatus from './ConnectionStatus';
-
-export default function Header({ connected }: { connected: boolean }) {
-  return (
-    <header className="flex items-center justify-between px-4 py-3 border-b border-slate-800">
-      <h1 className="text-sm font-semibold">Dashboard</h1>
-      <ConnectionStatus connected={connected} />
-    </header>
-  );
-}