fluxy-bot 0.1.21 → 0.1.23

package/client/src/components/Onboard/OnboardWizard.tsx

@@ -35,7 +35,7 @@ const MODELS: Record<string, { id: string; label: string }[]> = {
 const TOTAL_STEPS = 6; // 0..5
 
 const HANDLES = [
-  { tier: 'premium', label: (n: string) => `${n}.fluxy.bot`, badge: '$5', badgeCls: 'bg-primary/15 text-primary border-primary/20', highlight: true },
+  { tier: 'premium', label: (n: string) => `${n}.fluxy.bot`, badge: '$5', badgeCls: 'bg-[#AF27E3]/15 text-[#AF27E3] border-[#AF27E3]/20', highlight: true },
   { tier: 'at', label: (n: string) => `${n}.at.fluxy.bot`, badge: 'Free', badgeCls: 'bg-emerald-500/10 text-emerald-400 border-emerald-500/20', highlight: false },
 ] as const;
 
@@ -61,7 +61,7 @@ function ModelDropdown({ models, value, onChange }: { models: { id: string; labe
       <button
         type="button"
         onClick={() => setOpen((o) => !o)}
-        className="w-full flex items-center justify-between bg-white/[0.03] border border-white/[0.08] text-white rounded-xl px-4 py-2.5 text-[13px] outline-none hover:border-white/15 focus:border-primary/30 transition-colors"
+        className="w-full flex items-center justify-between bg-white/[0.03] border border-white/[0.08] text-white rounded-xl px-4 py-2.5 text-[13px] outline-none hover:border-white/15 focus:border-[#AF27E3]/30 transition-colors"
       >
         <span className={selected ? 'text-white' : 'text-white/20'}>
           {selected ? selected.label : 'Choose a model...'}
@@ -76,7 +76,7 @@ function ModelDropdown({ models, value, onChange }: { models: { id: string; labe
               onClick={() => { onChange(m.id); setOpen(false); }}
               className={`w-full text-left px-4 py-2 text-[13px] transition-colors ${
                 value === m.id
-                  ? 'text-primary bg-primary/10'
+                  ? 'text-[#AF27E3] bg-[#AF27E3]/10'
                   : 'text-white/70 hover:bg-white/[0.04] hover:text-white'
               }`}
             >
@@ -495,9 +495,9 @@ export default function OnboardWizard({ onComplete }: Props) {
   /* ── Styles ── */
 
   const inputCls =
-    'w-full bg-white/[0.05] border border-white/[0.08] text-white rounded-xl px-4 py-3 text-base outline-none focus:border-primary/40 placeholder:text-white/20 transition-colors';
+    'w-full bg-white/[0.05] border border-white/[0.08] text-white rounded-xl px-4 py-3 text-base outline-none input-glow placeholder:text-white/20 transition-all';
   const inputSmCls =
-    'w-full bg-white/[0.03] border border-white/[0.08] text-white rounded-xl px-4 py-2.5 text-[13px] outline-none focus:border-primary/30 placeholder:text-white/20 transition-colors';
+    'w-full bg-white/[0.03] border border-white/[0.08] text-white rounded-xl px-4 py-2.5 text-[13px] outline-none input-glow placeholder:text-white/20 transition-all';
 
   return (
     <div className="fixed inset-0 z-[200] flex items-center justify-center p-4">
@@ -516,9 +516,9 @@ export default function OnboardWizard({ onComplete }: Props) {
               key={i}
               className={`h-1.5 rounded-full transition-all duration-300 ${
                 i === step
-                  ? 'w-7 bg-primary'
+                  ? 'w-7 bg-gradient-brand'
                   : i < step
-                    ? 'w-1.5 bg-primary/60'
+                    ? 'w-1.5 bg-gradient-brand opacity-60'
                     : 'w-1.5 bg-white/10'
               }`}
             />
@@ -538,7 +538,7 @@ export default function OnboardWizard({ onComplete }: Props) {
             {/* ── Step 0: Welcome ── */}
             {step === 0 && (
               <div className="flex flex-col items-center text-center">
-                <img src="/fluxy.png" alt="Fluxy" className="h-16 w-auto mb-4" />
+                <video src="/fluxy_say_hi.webm" autoPlay loop muted playsInline className="h-[180px] mb-4" />
                 <h1 className="text-2xl font-bold text-white tracking-tight">
                   Welcome to Fluxy
                 </h1>
@@ -547,7 +547,7 @@ export default function OnboardWizard({ onComplete }: Props) {
                 </p>
                 <button
                   onClick={next}
-                  className="mt-6 px-7 py-3 bg-primary hover:bg-primary/90 text-white text-[14px] font-semibold rounded-full transition-colors flex items-center gap-2"
+                  className="mt-6 px-7 py-3 bg-gradient-brand hover:opacity-90 text-white text-[14px] font-semibold rounded-full transition-colors flex items-center gap-2"
                 >
                   Get Started
                   <ArrowRight className="h-4 w-4" />
@@ -577,7 +577,7 @@ export default function OnboardWizard({ onComplete }: Props) {
                   <button
                     onClick={next}
                     disabled={!canNext}
-                    className="shrink-0 h-12 w-12 flex items-center justify-center rounded-full bg-primary hover:bg-primary/90 text-white transition-colors disabled:opacity-30"
+                    className="shrink-0 h-12 w-12 flex items-center justify-center rounded-full bg-gradient-brand hover:opacity-90 text-white transition-colors disabled:opacity-30"
                   >
                     <ArrowRight className="h-5 w-5" />
                   </button>
@@ -608,7 +608,7 @@ export default function OnboardWizard({ onComplete }: Props) {
                     <div className="flex gap-2 mt-4">
                       <button
                         onClick={next}
-                        className="flex-1 py-3 bg-primary hover:bg-primary/90 text-white text-[14px] font-semibold rounded-full transition-colors flex items-center justify-center gap-2"
+                        className="flex-1 py-3 bg-gradient-brand hover:opacity-90 text-white text-[14px] font-semibold rounded-full transition-colors flex items-center justify-center gap-2"
                       >
                         Continue
                         <ArrowRight className="h-4 w-4" />
@@ -659,7 +659,7 @@ export default function OnboardWizard({ onComplete }: Props) {
                       {handleStatus && botName.length > 0 && !registered && (
                         <div className="absolute right-4 top-1/2 -translate-y-1/2">
                           {handleStatus === 'checking' && (
-                            <div className="w-5 h-5 border-2 border-white/10 border-t-primary rounded-full animate-spin" />
+                            <div className="w-5 h-5 border-2 border-white/10 border-t-[#04D1FE] rounded-full animate-spin" />
                           )}
                           {handleStatus === 'invalid' && (
                             <div className="w-6 h-6 rounded-full bg-amber-500/15 flex items-center justify-center">
@@ -693,8 +693,8 @@ export default function OnboardWizard({ onComplete }: Props) {
                                   ? 'border-white/[0.04] bg-transparent opacity-50 cursor-not-allowed'
                                   : selectedTier === h.tier
                                     ? h.highlight
-                                      ? 'border-primary/40 bg-primary/[0.06]'
-                                      : 'border-primary/30 bg-white/[0.04]'
+                                      ? 'border-[#AF27E3]/40 bg-[#AF27E3]/[0.06]'
+                                      : 'border-[#AF27E3]/30 bg-white/[0.04]'
                                     : 'border-white/[0.06] bg-transparent hover:border-white/10 hover:bg-white/[0.02]'
                               }`}
                             >
@@ -732,7 +732,7 @@ export default function OnboardWizard({ onComplete }: Props) {
                       <button
                         onClick={showChangeConfirm ? onChangeHandle : onClaimHandle}
                         disabled={registering || changingHandle}
-                        className="w-full mt-4 py-3 bg-primary hover:bg-primary/90 text-white text-[14px] font-semibold rounded-full transition-colors flex items-center justify-center gap-2 disabled:opacity-40"
+                        className="w-full mt-4 py-3 bg-gradient-brand hover:opacity-90 text-white text-[14px] font-semibold rounded-full transition-colors flex items-center justify-center gap-2 disabled:opacity-40"
                       >
                         {(registering || changingHandle) ? (
                           <><LoaderCircle className="h-4 w-4 animate-spin" />{showChangeConfirm ? 'Changing...' : 'Claiming...'}</>
@@ -746,7 +746,7 @@ export default function OnboardWizard({ onComplete }: Props) {
                     {registered && (
                       <button
                         onClick={next}
-                        className="w-full mt-4 py-3 bg-primary hover:bg-primary/90 text-white text-[14px] font-semibold rounded-full transition-colors flex items-center justify-center gap-2"
+                        className="w-full mt-4 py-3 bg-gradient-brand hover:opacity-90 text-white text-[14px] font-semibold rounded-full transition-colors flex items-center justify-center gap-2"
                       >
                         Continue
                         <ArrowRight className="h-4 w-4" />
@@ -930,7 +930,7 @@ export default function OnboardWizard({ onComplete }: Props) {
                 <button
                   onClick={next}
                   disabled={!canNext}
-                  className="w-full mt-5 py-3 bg-primary hover:bg-primary/90 text-white text-[14px] font-semibold rounded-full transition-colors flex items-center justify-center gap-2 disabled:opacity-40"
+                  className="w-full mt-5 py-3 bg-gradient-brand hover:opacity-90 text-white text-[14px] font-semibold rounded-full transition-colors flex items-center justify-center gap-2 disabled:opacity-40"
                 >
                   Continue
                   <ArrowRight className="h-4 w-4" />
@@ -956,7 +956,7 @@ export default function OnboardWizard({ onComplete }: Props) {
                       onClick={() => handleProviderChange(p.id)}
                       className={`flex-1 relative rounded-xl border transition-all duration-200 p-3 text-left ${
                         provider === p.id
-                          ? 'bg-white/[0.04] border-primary/40'
+                          ? 'bg-white/[0.04] border-[#AF27E3]/40'
                           : 'bg-transparent border-white/[0.06] hover:border-white/10 hover:bg-white/[0.02]'
                       }`}
                     >
@@ -978,7 +978,7 @@ export default function OnboardWizard({ onComplete }: Props) {
                           <Check className="h-2.5 w-2.5 text-emerald-400" />
                         </div>
                       ) : provider === p.id ? (
-                        <div className="absolute top-2 right-2 w-2 h-2 rounded-full bg-primary" />
+                        <div className="absolute top-2 right-2 w-2 h-2 rounded-full bg-gradient-brand" />
                       ) : null}
                     </button>
                   ))}
@@ -1018,7 +1018,7 @@ export default function OnboardWizard({ onComplete }: Props) {
 
                         <button
                           onClick={handleAnthropicAuth}
-                          className="w-full py-2.5 px-4 bg-primary hover:bg-primary/90 text-white text-[13px] font-medium rounded-xl transition-colors flex items-center justify-center gap-2"
+                          className="w-full py-2.5 px-4 bg-gradient-brand hover:opacity-90 text-white text-[13px] font-medium rounded-xl transition-colors flex items-center justify-center gap-2"
                         >
                           {oauthStarted ? (
                             <><ExternalLink className="h-3.5 w-3.5 opacity-60" />Open authentication page again</>
@@ -1047,7 +1047,7 @@ export default function OnboardWizard({ onComplete }: Props) {
                         <button
                           onClick={handleAnthropicConnect}
                           disabled={!anthropicCode.trim() || isExchanging}
-                          className="w-full py-2.5 px-4 bg-primary hover:bg-primary/90 text-white text-[13px] font-medium rounded-xl transition-colors flex items-center justify-center gap-2 disabled:opacity-40"
+                          className="w-full py-2.5 px-4 bg-gradient-brand hover:opacity-90 text-white text-[13px] font-medium rounded-xl transition-colors flex items-center justify-center gap-2 disabled:opacity-40"
                         >
                           {isExchanging ? (<><LoaderCircle className="h-3.5 w-3.5 animate-spin" />Verifying...</>) : 'Connect'}
                         </button>
@@ -1164,7 +1164,7 @@ export default function OnboardWizard({ onComplete }: Props) {
                   <button
                     onClick={next}
                     disabled={!canNext}
-                    className="w-full mt-4 py-3 bg-primary hover:bg-primary/90 text-white text-[14px] font-semibold rounded-full transition-colors flex items-center justify-center gap-2 disabled:opacity-40"
+                    className="w-full mt-4 py-3 bg-gradient-brand hover:opacity-90 text-white text-[14px] font-semibold rounded-full transition-colors flex items-center justify-center gap-2 disabled:opacity-40"
                   >
                     Continue
                     <ArrowRight className="h-4 w-4" />
@@ -1192,7 +1192,7 @@ export default function OnboardWizard({ onComplete }: Props) {
                   onClick={() => setWhisperEnabled((v) => !v)}
                   className={`w-full mt-5 rounded-xl border transition-all duration-200 p-4 text-left ${
                     whisperEnabled
-                      ? 'bg-white/[0.04] border-primary/40'
+                      ? 'bg-white/[0.04] border-[#AF27E3]/40'
                       : 'bg-transparent border-white/[0.06] hover:border-white/10 hover:bg-white/[0.02]'
                   }`}
                 >
@@ -1205,7 +1205,7 @@ export default function OnboardWizard({ onComplete }: Props) {
                       </div>
                     </div>
                     <div className={`w-10 h-[22px] rounded-full transition-colors duration-200 flex items-center px-0.5 shrink-0 ${
-                      whisperEnabled ? 'bg-primary' : 'bg-white/[0.08]'
+                      whisperEnabled ? 'bg-gradient-brand' : 'bg-white/[0.08]'
                     }`}>
                       <div className={`w-[18px] h-[18px] rounded-full bg-white shadow-sm transition-transform duration-200 ${
                         whisperEnabled ? 'translate-x-[18px]' : 'translate-x-0'
@@ -1232,7 +1232,7 @@ export default function OnboardWizard({ onComplete }: Props) {
                       <p className="text-amber-400/70 text-[11px] mt-1">Key looks too short</p>
                     )}
                     <div className="flex items-start gap-2.5 mt-3 bg-white/[0.02] border border-white/[0.06] rounded-xl px-4 py-3">
-                      <Mic className="h-4 w-4 text-primary/60 mt-0.5 shrink-0" />
+                      <Mic className="h-4 w-4 text-[#AF27E3]/60 mt-0.5 shrink-0" />
                       <p className="text-white/35 text-[12px] leading-relaxed">
                         Users will see a microphone button in the chat. Audio is sent to OpenAI's Whisper API for transcription, then processed as a regular text message.
                       </p>
@@ -1243,7 +1243,7 @@ export default function OnboardWizard({ onComplete }: Props) {
                 <button
                   onClick={handleComplete}
                   disabled={saving || (whisperEnabled && (!whisperKey.startsWith('sk-') || whisperKey.length < 20))}
-                  className="w-full mt-5 py-3 bg-primary hover:bg-primary/90 text-white text-[14px] font-semibold rounded-full transition-colors flex items-center justify-center gap-2 disabled:opacity-40"
+                  className="w-full mt-5 py-3 bg-gradient-brand hover:opacity-90 text-white text-[14px] font-semibold rounded-full transition-colors flex items-center justify-center gap-2 disabled:opacity-40"
                 >
                   {saving ? (
                     <><LoaderCircle className="h-4 w-4 animate-spin" />Setting up...</>

package/client/src/hooks/useWebSocket.ts

@@ -8,14 +8,12 @@ export function useWebSocket() {
   useEffect(() => {
     const client = new WsClient();
     clientRef.current = client;
-    client.connect();
 
-    const checkConnection = setInterval(() => {
-      setConnected(client.connected);
-    }, 1000);
+    const unsub = client.onStatus(setConnected);
+    client.connect();
 
     return () => {
-      clearInterval(checkConnection);
+      unsub();
       client.disconnect();
     };
   }, []);

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

@@ -1,10 +1,22 @@
 type MessageHandler = (msg: any) => void;
+type StatusHandler = (connected: boolean) => void;
+
+interface QueuedMessage {
+  type: string;
+  data: any;
+}
 
 export class WsClient {
   private ws: WebSocket | null = null;
   private handlers = new Map<string, Set<MessageHandler>>();
+  private statusHandlers = new Set<StatusHandler>();
   private reconnectTimer: ReturnType<typeof setTimeout> | null = null;
+  private heartbeatTimer: ReturnType<typeof setInterval> | null = null;
   private url: string;
+  private queue: QueuedMessage[] = [];
+  private intentionalClose = false;
+  private reconnectDelay = 1000;
+  private static MAX_RECONNECT_DELAY = 8000;
 
   constructor(url?: string) {
     const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
@@ -13,23 +25,42 @@ export class WsClient {
   }
 
   connect(): void {
+    this.intentionalClose = false;
     this.ws = new WebSocket(this.url);
 
+    this.ws.onopen = () => {
+      this.reconnectDelay = 1000;
+      this.notifyStatus(true);
+      this.flushQueue();
+      this.startHeartbeat();
+    };
+
     this.ws.onmessage = (e) => {
+      // Ignore pong frames
+      if (e.data === 'pong') return;
       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.stopHeartbeat();
+      this.notifyStatus(false);
+      if (!this.intentionalClose) {
+        this.reconnectTimer = setTimeout(() => {
+          this.reconnectDelay = Math.min(this.reconnectDelay * 2, WsClient.MAX_RECONNECT_DELAY);
+          this.connect();
+        }, this.reconnectDelay);
+      }
     };
 
     this.ws.onerror = () => this.ws?.close();
   }
 
   disconnect(): void {
-    if (this.reconnectTimer) clearTimeout(this.reconnectTimer);
+    this.intentionalClose = true;
+    if (this.reconnectTimer) { clearTimeout(this.reconnectTimer); this.reconnectTimer = null; }
+    this.stopHeartbeat();
     this.ws?.close();
     this.ws = null;
   }
@@ -40,13 +71,46 @@ export class WsClient {
     return () => this.handlers.get(type)?.delete(handler);
   }
 
+  onStatus(handler: StatusHandler): () => void {
+    this.statusHandlers.add(handler);
+    return () => this.statusHandlers.delete(handler);
+  }
+
   send(type: string, data: any): void {
+    const message = { type, data };
     if (this.ws?.readyState === WebSocket.OPEN) {
-      this.ws.send(JSON.stringify({ type, data }));
+      this.ws.send(JSON.stringify(message));
+    } else {
+      // Queue for delivery on reconnect
+      this.queue.push(message);
     }
   }
 
   get connected(): boolean {
     return this.ws?.readyState === WebSocket.OPEN;
   }
+
+  private flushQueue(): void {
+    while (this.queue.length > 0 && this.ws?.readyState === WebSocket.OPEN) {
+      const msg = this.queue.shift()!;
+      this.ws.send(JSON.stringify(msg));
+    }
+  }
+
+  private notifyStatus(connected: boolean): void {
+    this.statusHandlers.forEach((h) => h(connected));
+  }
+
+  private startHeartbeat(): void {
+    this.stopHeartbeat();
+    this.heartbeatTimer = setInterval(() => {
+      if (this.ws?.readyState === WebSocket.OPEN) {
+        this.ws.send('ping');
+      }
+    }, 25_000);
+  }
+
+  private stopHeartbeat(): void {
+    if (this.heartbeatTimer) { clearInterval(this.heartbeatTimer); this.heartbeatTimer = null; }
+  }
 }

package/client/src/styles/globals.css

@@ -46,10 +46,65 @@ body {
 }
 
 ::selection {
-  background-color: rgba(60, 143, 255, 0.25);
+  background-color: rgba(175, 39, 227, 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; }
+
+.text-gradient {
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+  -webkit-text-fill-color: transparent;
+  background-image: linear-gradient(135deg, #04D1FE, #AF27E3, #FB4072);
+}
+
+.bg-gradient-brand {
+  background-image: linear-gradient(135deg, #04D1FE, #AF27E3, #FB4072);
+}
+
+.glow-border {
+  box-shadow: 0 0 0 1px rgba(175, 39, 227, 0.1),
+              0 0 20px -5px rgba(175, 39, 227, 0.15);
+}
+
+.animated-border {
+  position: relative;
+  overflow: hidden;
+}
+.animated-border::before {
+  content: '';
+  position: absolute;
+  inset: -150%;
+  background: conic-gradient(
+    from 0deg,
+    #04D1FE,
+    #AF27E3,
+    #FB4072,
+    #04D1FE
+  );
+  animation: border-spin 3s linear infinite;
+}
+.animated-border > * {
+  position: relative;
+  z-index: 1;
+}
+
+.animated-border-slow::before {
+  animation-duration: 5s;
+}
+
+.input-glow:focus {
+  border-color: rgba(175, 39, 227, 0.4);
+  box-shadow: 0 0 0 1px rgba(175, 39, 227, 0.15),
+              0 0 20px -5px rgba(175, 39, 227, 0.25),
+              0 0 4px -1px rgba(4, 209, 254, 0.1);
+}
+
+@keyframes border-spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}