fluxy-bot 0.1.0

package/client/src/components/ui/skeleton.tsx

@@ -0,0 +1,13 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("bg-accent animate-pulse rounded-md", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

package/client/src/components/ui/switch.tsx

@@ -0,0 +1,33 @@
+import * as React from "react"
+import { Switch as SwitchPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Switch({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      data-size={size}
+      className={cn(
+        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 group/switch inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className={cn(
+          "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+        )}
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }

package/client/src/components/ui/tabs.tsx

@@ -0,0 +1,89 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Tabs as TabsPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-orientation={orientation}
+      orientation={orientation}
+      className={cn(
+        "group/tabs flex gap-2 data-[orientation=horizontal]:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const tabsListVariants = cva(
+  "rounded-lg p-[3px] group-data-[orientation=horizontal]/tabs:h-9 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List> &
+  VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
+        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 data-[state=active]:text-foreground",
+        "after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }

package/client/src/components/ui/textarea.tsx

@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }

package/client/src/components/ui/tooltip.tsx

@@ -0,0 +1,55 @@
+import * as React from "react"
+import { Tooltip as TooltipPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/client/src/hooks/useChat.ts

@@ -0,0 +1,69 @@
+import { useCallback, useEffect, useState } from 'react';
+import type { WsClient } from '../lib/ws-client';
+
+export interface ChatMessage {
+  id: string;
+  role: 'user' | 'assistant';
+  content: string;
+}
+
+export function useChat(ws: WsClient | null) {
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [conversationId, setConversationId] = useState<string | null>(null);
+  const [streaming, setStreaming] = useState(false);
+  const [streamBuffer, setStreamBuffer] = useState('');
+
+  useEffect(() => {
+    if (!ws) return;
+
+    const unsubs = [
+      ws.on('bot:typing', () => setStreaming(true)),
+      ws.on('bot:token', (data: { token: string }) => {
+        setStreamBuffer((buf) => buf + data.token);
+      }),
+      ws.on('bot:response', (data: { conversationId: string; messageId: string; content: string }) => {
+        setConversationId(data.conversationId);
+        setMessages((msgs) => [...msgs, { id: data.messageId, role: 'assistant', content: data.content }]);
+        setStreamBuffer('');
+        setStreaming(false);
+      }),
+      ws.on('bot:error', (data: { error: string }) => {
+        setStreamBuffer('');
+        setStreaming(false);
+        setMessages((msgs) => [
+          ...msgs,
+          { id: Date.now().toString(), role: 'assistant', content: `Error: ${data.error}` },
+        ]);
+      }),
+    ];
+
+    return () => unsubs.forEach((u) => u());
+  }, [ws]);
+
+  const sendMessage = useCallback(
+    (content: string) => {
+      if (!ws || !content.trim()) return;
+
+      const userMsg: ChatMessage = { id: Date.now().toString(), role: 'user', content };
+      setMessages((msgs) => [...msgs, userMsg]);
+      ws.send('user:message', { conversationId, content });
+    },
+    [ws, conversationId],
+  );
+
+  const stopStreaming = useCallback(() => {
+    if (!ws || !conversationId) return;
+    ws.send('user:stop', { conversationId });
+    setStreaming(false);
+    setStreamBuffer('');
+  }, [ws, conversationId]);
+
+  const newChat = useCallback(() => {
+    setMessages([]);
+    setConversationId(null);
+    setStreamBuffer('');
+    setStreaming(false);
+  }, []);
+
+  return { messages, streaming, streamBuffer, conversationId, sendMessage, stopStreaming, newChat };
+}

package/client/src/hooks/useMobile.ts

@@ -0,0 +1,16 @@
+import { useEffect, useState } from 'react';
+
+export function useMobile(breakpoint = 768) {
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
+    const onChange = (e: MediaQueryListEvent | MediaQueryList) =>
+      setIsMobile(e.matches);
+    onChange(mql);
+    mql.addEventListener('change', onChange);
+    return () => mql.removeEventListener('change', onChange);
+  }, [breakpoint]);
+
+  return isMobile;
+}

package/client/src/hooks/useWebSocket.ts

@@ -0,0 +1,24 @@
+import { useEffect, useRef, useState } from 'react';
+import { WsClient } from '../lib/ws-client';
+
+export function useWebSocket() {
+  const clientRef = useRef<WsClient | null>(null);
+  const [connected, setConnected] = useState(false);
+
+  useEffect(() => {
+    const client = new WsClient();
+    clientRef.current = client;
+    client.connect();
+
+    const checkConnection = setInterval(() => {
+      setConnected(client.connected);
+    }, 1000);
+
+    return () => {
+      clearInterval(checkConnection);
+      client.disconnect();
+    };
+  }, []);
+
+  return { ws: clientRef.current, connected };
+}

package/client/src/lib/mock-data.ts

@@ -0,0 +1,104 @@
+import {
+  LayoutDashboard,
+  MessageSquare,
+  Brain,
+  BookOpen,
+  ScrollText,
+  Settings,
+  type LucideIcon,
+} from 'lucide-react';
+
+/* ── Navigation ─────────────────────────────── */
+
+export interface NavItem {
+  label: string;
+  icon: LucideIcon;
+  href: string;
+  active?: boolean;
+}
+
+export interface NavSection {
+  label: string;
+  items: NavItem[];
+}
+
+export const navSections: NavSection[] = [
+  {
+    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: '#' },
+    ],
+  },
+];
+
+/* ── Weekly activity grid ───────────────────── */
+
+export interface WeeklyModelActivity {
+  model: string;
+  /** 0–4 intensity per day (Mon–Sun) */
+  days: number[];
+}
+
+export const weeklyActivity: WeeklyModelActivity[] = [
+  { 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] },
+];
+
+export const dayLabels = ['M', 'T', 'W', 'T', 'F', 'S', 'S'];
+
+export const activityColors = [
+  '#2a2a2a', // 0 – none
+  '#1e3a5f', // 1 – low
+  '#2c5a8f', // 2 – medium-low
+  '#3578bf', // 3 – medium-high
+  '#3C8FFF', // 4 – high
+];
+
+export const activityLegend = [
+  { label: '< 10', level: 1 },
+  { label: '10–50', level: 2 },
+  { label: '> 50', level: 3 },
+  { label: '100+', level: 4 },
+  { label: 'None', level: 0 },
+];
+
+/* ── Stats ──────────────────────────────────── */
+
+export interface StatItem {
+  label: string;
+  value: string;
+  change: string;
+  trend: 'up' | 'down';
+}
+
+export const stats: StatItem[] = [
+  { label: 'Conversations', value: '1,284', change: '+12%', trend: 'up' },
+  { label: 'Messages Today', value: '342', change: '+8%', trend: 'up' },
+  { label: 'Avg Response', value: '1.2s', change: '-15%', trend: 'down' },
+  { label: 'Uptime', value: '99.9%', change: '+0.1%', trend: 'up' },
+];
+
+/* ── System status ──────────────────────────── */
+
+export interface SystemService {
+  name: string;
+  status: 'online' | 'offline' | 'degraded';
+}
+
+export const systemStatus: SystemService[] = [
+  { name: 'Worker', status: 'online' },
+  { name: 'Tunnel', status: 'online' },
+  { name: 'Database', status: 'online' },
+  { name: 'AI Provider', status: 'online' },
+];

package/client/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/client/src/lib/ws-client.ts

@@ -0,0 +1,52 @@
+type MessageHandler = (msg: any) => void;
+
+export class WsClient {
+  private ws: WebSocket | null = null;
+  private handlers = new Map<string, Set<MessageHandler>>();
+  private reconnectTimer: ReturnType<typeof setTimeout> | null = null;
+  private url: string;
+
+  constructor(url?: string) {
+    const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const host = import.meta.env.DEV ? 'localhost:3000' : location.host;
+    this.url = url ?? `${proto}//${host}/ws`;
+  }
+
+  connect(): void {
+    this.ws = new WebSocket(this.url);
+
+    this.ws.onmessage = (e) => {
+      const msg = JSON.parse(e.data);
+      const handlers = this.handlers.get(msg.type);
+      handlers?.forEach((h) => h(msg.data));
+    };
+
+    this.ws.onclose = () => {
+      this.reconnectTimer = setTimeout(() => this.connect(), 2000);
+    };
+
+    this.ws.onerror = () => this.ws?.close();
+  }
+
+  disconnect(): void {
+    if (this.reconnectTimer) clearTimeout(this.reconnectTimer);
+    this.ws?.close();
+    this.ws = null;
+  }
+
+  on(type: string, handler: MessageHandler): () => void {
+    if (!this.handlers.has(type)) this.handlers.set(type, new Set());
+    this.handlers.get(type)!.add(handler);
+    return () => this.handlers.get(type)?.delete(handler);
+  }
+
+  send(type: string, data: any): void {
+    if (this.ws?.readyState === WebSocket.OPEN) {
+      this.ws.send(JSON.stringify({ type, data }));
+    }
+  }
+
+  get connected(): boolean {
+    return this.ws?.readyState === WebSocket.OPEN;
+  }
+}

package/client/src/main.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './styles/globals.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);

package/client/src/styles/globals.css

@@ -0,0 +1,55 @@
+@import "tailwindcss";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: #212121;
+  --color-foreground: #f5f5f5;
+  --color-card: #2a2a2a;
+  --color-card-foreground: #f5f5f5;
+  --color-popover: #2a2a2a;
+  --color-popover-foreground: #f5f5f5;
+  --color-primary: #3C8FFF;
+  --color-primary-foreground: #ffffff;
+  --color-secondary: #333333;
+  --color-secondary-foreground: #f5f5f5;
+  --color-muted: #333333;
+  --color-muted-foreground: #999999;
+  --color-accent: #333333;
+  --color-accent-foreground: #f5f5f5;
+  --color-destructive: #FD486B;
+  --color-destructive-foreground: #ffffff;
+  --color-border: #3a3a3a;
+  --color-input: #3a3a3a;
+  --color-ring: #3C8FFF;
+  --color-chart-1: #3C8FFF;
+  --color-chart-2: #FD486B;
+  --color-chart-3: #F59E0B;
+  --color-chart-4: #8B5CF6;
+  --color-chart-5: #10B981;
+  --color-sidebar: #1c1c1c;
+  --color-sidebar-foreground: #f5f5f5;
+  --color-sidebar-primary: #3C8FFF;
+  --color-sidebar-primary-foreground: #ffffff;
+  --color-sidebar-accent: #282828;
+  --color-sidebar-accent-foreground: #f5f5f5;
+  --color-sidebar-border: #3a3a3a;
+  --color-sidebar-ring: #3C8FFF;
+  --radius: 0.75rem;
+}
+
+body {
+  background-color: var(--color-background);
+  color: var(--color-foreground);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+::selection {
+  background-color: rgba(60, 143, 255, 0.25);
+}
+
+::-webkit-scrollbar { width: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: #3a3a3a; border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: #4a4a4a; }

package/components.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "client/src/styles/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}