fluxy-bot 0.8.9 → 0.9.0

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

@@ -1,80 +1,76 @@
 const starterSuggestions = [
-    'Build me a CRM',
-    'Create a habit tracker',
-    'Make a finance dashboard',
-    'Build a task manager'
+  '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);
-    };
+  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="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">
-                Let's get started
-            </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>
+  return (
+    <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">
+        Let's get started
+      </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>
+      {/* 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>
 
-            {/* 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>
-    );
+      {/* 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/ErrorBoundary.tsx

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

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

@@ -5,47 +5,47 @@ import Footer from './Footer';
 import MobileNav from './MobileNav';
 
 interface Props {
-    children: ReactNode;
+  children: ReactNode;
 }
 
 export default function DashboardLayout({ children }: Props) {
-    const [connected, setConnected] = useState(true);
+  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);
-    }, []);
+  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 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>
+  return (
+    <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>
+      <div className="flex flex-1 overflow-hidden">
+        {/* Desktop sidebar */}
+        <div className="hidden md:flex shrink-0">
+          <Sidebar />
+        </div>
 
-                {/* 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>
+        {/* 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

@@ -1,14 +1,14 @@
 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>
-            </div>
-        </footer>
-    );
+  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>
+      </div>
+    </footer>
+  );
 }

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

@@ -1,30 +1,30 @@
 import { useState } from 'react';
 import { Menu } from 'lucide-react';
-import { Sheet, SheetContent, SheetTitle } from '@/components/ui/sheet';
+import {
+  Sheet,
+  SheetContent,
+  SheetTitle,
+} from '@/components/ui/sheet';
 import Sidebar from './Sidebar';
 
 export default function MobileNav() {
-    const [open, setOpen] = useState(false);
+  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 />
-                </SheetContent>
-            </Sheet>
-        </>
-    );
+  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 />
+        </SheetContent>
+      </Sheet>
+    </>
+  );
 }

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

@@ -1,102 +1,102 @@
 import { useState } from 'react';
 import {
-    LayoutDashboard,
-    AppWindow,
-    BarChart3,
-    Search,
-    HelpCircle,
-    ChevronDown
+  LayoutDashboard,
+  AppWindow,
+  BarChart3,
+  Search,
+  HelpCircle,
+  ChevronDown,
 } from 'lucide-react';
 import { cn } from '@/lib/utils';
 
 function getGreeting(): string {
-    const hour = new Date().getHours();
-    if (hour < 12) return 'Good\nMorning';
-    if (hour < 18) return 'Good\nAfternoon';
-    return 'Good\nEvening';
+  const hour = new Date().getHours();
+  if (hour < 12) return 'Good\nMorning';
+  if (hour < 18) return 'Good\nAfternoon';
+  return 'Good\nEvening';
 }
 
 export default function Sidebar() {
-    const [appsOpen, setAppsOpen] = useState(false);
+  const [appsOpen, setAppsOpen] = useState(false);
 
-    return (
-        <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>
+  return (
+    <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-4xl font-bold leading-[1.1] whitespace-pre-line">
-                    {getGreeting()}
-                </h1>
-                <h2 className="text-4xl font-bold text-primary mt-0.5"></h2>
-            </div>
+      {/* Greeting */}
+      <div className="mb-10">
+        <h1 className="text-4xl font-bold leading-[1.1] whitespace-pre-line">
+          {getGreeting()}
+        </h1>
+        <h2 className="text-4xl font-bold text-primary mt-0.5"></h2>
+      </div>
 
-            {/* Navigation */}
-            <nav className="flex-1 space-y-0.5">
-                <NavButton icon={LayoutDashboard} label="Dashboard" active />
+      {/* 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>
+        {/* 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>
 
-                <NavButton icon={BarChart3} label="Reports" />
-                <NavButton icon={Search} label="Research" />
-                <NavButton icon={HelpCircle} label="What Else?" />
-            </nav>
+        <NavButton icon={BarChart3} label="Reports" />
+        <NavButton icon={Search} label="Research" />
+        <NavButton icon={HelpCircle} label="What Else?" />
+      </nav>
 
-            {/* Bottom spacer */}
-            <div className="pt-4 border-t border-border/50" />
-        </aside>
-    );
+      {/* Bottom spacer */}
+      <div className="pt-4 border-t border-border/50" />
+    </aside>
+  );
 }
 
 function NavButton({
-    icon: Icon,
-    label,
-    active
+  icon: Icon,
+  label,
+  active,
 }: {
-    icon: React.ComponentType<{ className?: string }>;
-    label: string;
-    active?: boolean;
+  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>
-    );
+  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>
+  );
 }