fluxy-bot 0.3.5 → 0.3.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fluxy-bot",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "description": "Self-hosted AI bot — run your own AI assistant from anywhere",
   "type": "module",
   "license": "MIT",

package/supervisor/chat/OnboardWizard.tsx

@@ -1,5 +1,5 @@
 import { useState, useRef, useEffect, type KeyboardEvent } from 'react';
-import { ArrowRight, LoaderCircle, ExternalLink, ClipboardPaste, RefreshCw, Check, ChevronDown, Mic } from 'lucide-react';
+import { ArrowRight, LoaderCircle, ExternalLink, ClipboardPaste, RefreshCw, Check, ChevronDown, Mic, Eye, EyeOff } from 'lucide-react';
 import { motion, AnimatePresence } from 'framer-motion';
 
 /* ── Provider config ── */
@@ -25,7 +25,7 @@ const MODELS: Record<string, { id: string; label: string }[]> = {
   ],
 };
 
-const TOTAL_STEPS = 6; // 0..5
+// TOTAL_STEPS is dynamic — set inside the component based on isInitialSetup
 
 const HANDLES = [
   { tier: 'premium', label: (n: string) => `${n}.fluxy.bot`, badge: '$5', badgeCls: 'bg-[#AF27E3]/15 text-[#AF27E3] border-[#AF27E3]/20', highlight: true },
@@ -86,9 +86,12 @@ function ModelDropdown({ models, value, onChange }: { models: { id: string; labe
 
 interface Props {
   onComplete: () => void;
+  isInitialSetup?: boolean;
 }
 
-export default function OnboardWizard({ onComplete }: Props) {
+export default function OnboardWizard({ onComplete, isInitialSetup = false }: Props) {
+  const TOTAL_STEPS = isInitialSetup ? 7 : 6; // 0..5 normal, +step 6 "All Set" for initial
+
   const [step, setStep] = useState(0);
   const [userName, setUserName] = useState('');
   const [provider, setProvider] = useState('anthropic');
@@ -129,11 +132,12 @@ export default function OnboardWizard({ onComplete }: Props) {
   const [changingHandle, setChangingHandle] = useState(false);
 
   // Portal credentials (step 3)
-  const [portalUser, setPortalUser] = useState('');
+  const [portalUser, setPortalUser] = useState('admin');
   const [portalPass, setPortalPass] = useState('');
   const [portalPassConfirm, setPortalPassConfirm] = useState('');
   const [portalCopied, setPortalCopied] = useState(false);
   const [portalExists, setPortalExists] = useState(false);
+  const [showPassAllSet, setShowPassAllSet] = useState(false);
 
   // Portal old password (for changing existing credentials)
   const [portalOldPass, setPortalOldPass] = useState('');
@@ -428,12 +432,12 @@ export default function OnboardWizard({ onComplete }: Props) {
 
   /* ── Navigation ── */
 
-  // Steps: 0=Welcome, 1=Name, 2=Bot name + Handle, 3=Portal credentials, 4=Provider, 5=Whisper+Complete
+  // Steps: 0=Welcome, 1=Name, 2=Bot name + Handle, 3=Password, 4=Provider, 5=Whisper+Complete, 6=All Set (initial only)
   const portalPassMatch = portalPass === portalPassConfirm;
-  const portalValid = portalUser.trim().length >= 3 && portalPass.length >= 6 && portalPassMatch;
+  const portalValid = portalPass.length >= 6 && portalPassMatch;
   // When portal exists: can continue if no password fields touched, or old pass verified + new pass valid
   const portalCanContinue = portalExists
-    ? (portalUser.trim().length >= 3 && (portalPass.length === 0 || (portalOldPassVerified && portalValid)))
+    ? (portalPass.length === 0 || (portalOldPassVerified && portalValid))
     : portalValid;
 
   const canNext = (() => {
@@ -473,7 +477,12 @@ export default function OnboardWizard({ onComplete }: Props) {
           portalPass,
         }),
       });
-      onComplete();
+      if (isInitialSetup) {
+        setSaving(false);
+        setStep(6);
+      } else {
+        onComplete();
+      }
     } catch (err) {
       console.error('Onboard failed:', err);
       setSaving(false);
@@ -762,67 +771,26 @@ export default function OnboardWizard({ onComplete }: Props) {
               </div>
             )}
 
-            {/* ── Step 3: Portal credentials ── */}
+            {/* ── Step 3: Password ── */}
             {step === 3 && (
               <div>
                 <h1 className="text-xl font-bold text-white tracking-tight">
-                  Secure your portal
+                  Set a password
                 </h1>
                 <p className="text-white/40 text-[13px] mt-1.5 leading-relaxed">
-                  Create credentials to protect your dashboard. Anyone with your URL will need these to log in.
+                  You'll need this password to access your agent's chat. Keep it safe — anyone with your URL will need it to log in.
                 </p>
 
-                {/* Relay URL display + copy */}
-                {(registered && registeredUrl) && (
-                  <div className="mt-4 flex items-center gap-2 bg-white/[0.03] border border-white/[0.06] rounded-xl px-4 py-3">
-                    <span className="font-mono text-[13px] text-white/60 truncate flex-1">{registeredUrl}</span>
-                    <button
-                      onClick={() => {
-                        navigator.clipboard.writeText(registeredUrl);
-                        setPortalCopied(true);
-                        setTimeout(() => setPortalCopied(false), 2000);
-                      }}
-                      className="shrink-0 text-white/30 hover:text-white/60 transition-colors"
-                    >
-                      {portalCopied ? (
-                        <Check className="h-4 w-4 text-emerald-400" />
-                      ) : (
-                        <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                          <rect x="9" y="9" width="13" height="13" rx="2" />
-                          <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" />
-                        </svg>
-                      )}
-                    </button>
-                  </div>
-                )}
-
                 {/* Already configured hint */}
                 {portalExists && (
                   <div className="mt-4 bg-white/[0.02] border border-white/[0.06] rounded-xl px-4 py-2.5">
-                    <p className="text-white/40 text-[12px]">Credentials already set. Leave password fields empty to keep your current password, or enter your current password to change it.</p>
+                    <p className="text-white/40 text-[12px]">Password already set. Leave fields empty to keep your current password, or enter your current password to change it.</p>
                   </div>
                 )}
 
-                {/* Username */}
-                <div className="mt-5">
-                  <label className="text-[12px] text-white/40 font-medium mb-1.5 block">Username</label>
-                  <input
-                    type="text"
-                    value={portalUser}
-                    onChange={(e) => setPortalUser(e.target.value.replace(/\s/g, '').toLowerCase())}
-                    placeholder="admin"
-                    autoFocus
-                    autoComplete="username"
-                    className={inputCls + ' font-mono'}
-                  />
-                  {portalUser.length > 0 && portalUser.trim().length < 3 && (
-                    <p className="text-amber-400/70 text-[11px] mt-1">At least 3 characters</p>
-                  )}
-                </div>
-
                 {/* Current password (only when changing existing credentials) */}
                 {portalExists && (
-                  <div className="mt-3">
+                  <div className="mt-5">
                     <label className="text-[12px] text-white/40 font-medium mb-1.5 block">Current password</label>
                     <div className="flex items-center gap-2">
                       <input
@@ -831,6 +799,7 @@ export default function OnboardWizard({ onComplete }: Props) {
                         onChange={(e) => { setPortalOldPass(e.target.value); setPortalOldPassError(''); setPortalOldPassVerified(false); }}
                         placeholder="Enter current password to change it"
                         autoComplete="current-password"
+                        autoFocus
                         className={inputCls + ' flex-1'}
                       />
                       {portalOldPass.length > 0 && !portalOldPassVerified && (
@@ -877,7 +846,7 @@ export default function OnboardWizard({ onComplete }: Props) {
                 {/* New password + confirm (shown when no existing credentials, or when old password verified) */}
                 {(!portalExists || portalOldPassVerified) && (
                   <>
-                    <div className="mt-3">
+                    <div className={portalExists ? 'mt-3' : 'mt-5'}>
                       <label className="text-[12px] text-white/40 font-medium mb-1.5 block">
                         {portalExists ? 'New password' : 'Password'}
                       </label>
@@ -887,6 +856,7 @@ export default function OnboardWizard({ onComplete }: Props) {
                         onChange={(e) => setPortalPass(e.target.value)}
                         placeholder="••••••••"
                         autoComplete="new-password"
+                        autoFocus={!portalExists}
                         onKeyDown={handleKeyDown}
                         className={inputCls}
                       />
@@ -1226,11 +1196,81 @@ export default function OnboardWizard({ onComplete }: Props) {
                 )}
               </div>
             )}
+
+            {/* ── Step 6: All Set (initial onboard only) ── */}
+            {step === 6 && isInitialSetup && (
+              <div className="flex flex-col items-center text-center">
+                <div className="w-16 h-16 rounded-full bg-emerald-500/10 border border-emerald-500/20 flex items-center justify-center mb-5">
+                  <Check className="h-8 w-8 text-emerald-400" />
+                </div>
+                <h1 className="text-2xl font-bold text-white tracking-tight">
+                  All Set!
+                </h1>
+                <p className="text-white/40 text-[13px] mt-2 leading-relaxed max-w-[340px]">
+                  Your agent is live and ready. From now on, access it using your custom URL below.
+                </p>
+
+                {/* Custom URL */}
+                <div className="w-full mt-6 flex items-center gap-2 bg-white/[0.03] border border-white/[0.06] rounded-xl px-4 py-3">
+                  <span className="font-mono text-[13px] text-white/70 truncate flex-1 text-left">{registeredUrl}</span>
+                  <button
+                    onClick={() => {
+                      const url = registeredUrl.startsWith('http') ? registeredUrl : `https://${registeredUrl}`;
+                      navigator.clipboard.writeText(url);
+                      setPortalCopied(true);
+                      setTimeout(() => setPortalCopied(false), 2000);
+                    }}
+                    className="shrink-0 text-white/30 hover:text-white/60 transition-colors"
+                  >
+                    {portalCopied ? (
+                      <Check className="h-4 w-4 text-emerald-400" />
+                    ) : (
+                      <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                        <rect x="9" y="9" width="13" height="13" rx="2" />
+                        <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" />
+                      </svg>
+                    )}
+                  </button>
+                </div>
+
+                {/* Password display with eye toggle */}
+                <div className="w-full mt-3">
+                  <label className="text-[12px] text-white/40 font-medium mb-1.5 block text-left">Your password</label>
+                  <div className="flex items-center gap-2 bg-white/[0.03] border border-white/[0.06] rounded-xl px-4 py-3">
+                    <span className="font-mono text-[13px] text-white/70 truncate flex-1 text-left">
+                      {showPassAllSet ? portalPass : '\u2022'.repeat(Math.max(portalPass.length, 8))}
+                    </span>
+                    <button
+                      onClick={() => setShowPassAllSet((v) => !v)}
+                      className="shrink-0 text-white/30 hover:text-white/60 transition-colors"
+                    >
+                      {showPassAllSet ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+                    </button>
+                  </div>
+                </div>
+
+                {/* Redirect button */}
+                <button
+                  onClick={() => {
+                    const url = registeredUrl.startsWith('http') ? registeredUrl : `https://${registeredUrl}`;
+                    window.location.href = url;
+                  }}
+                  className="w-full mt-6 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"
+                >
+                  Go to your agent
+                  <ExternalLink className="h-4 w-4" />
+                </button>
+
+                <p className="text-white/20 text-[11px] mt-3 leading-relaxed">
+                  You'll be redirected to your custom URL.
+                </p>
+              </div>
+            )}
           </motion.div>
         </AnimatePresence>
 
-        {/* Back button */}
-        {step > 0 && (
+        {/* Back button (hidden on All Set step) */}
+        {step > 0 && step < TOTAL_STEPS - 1 && !(step === 6 && isInitialSetup) && (
           <div className="px-8 pb-5 -mt-3">
             <button
               onClick={back}

package/supervisor/chat/onboard-main.tsx

@@ -9,7 +9,7 @@ function App() {
     window.parent?.postMessage({ type: 'fluxy:onboard-complete' }, '*');
   };
 
-  return <OnboardWizard onComplete={handleComplete} />;
+  return <OnboardWizard onComplete={handleComplete} isInitialSetup />;
 }
 
 ReactDOM.createRoot(document.getElementById('root')!).render(