bloby-bot 0.56.0 → 0.57.0

package/supervisor/chat/OnboardWizard.tsx

@@ -1,7 +1,8 @@
-import { useState, useRef, useEffect, type KeyboardEvent } from 'react';
+import { useState, useRef, useEffect, type KeyboardEvent, type MutableRefObject } from 'react';
 import { createPortal } from 'react-dom';
-import { ArrowRight, ArrowLeft, LoaderCircle, ExternalLink, ClipboardPaste, RefreshCw, Check, ChevronDown, Mic, Eye, EyeOff, Shield, ShieldCheck, ShieldOff, Copy, Smartphone, Globe, Wifi, WifiOff, TriangleAlert } from 'lucide-react';
+import { ArrowRight, ArrowLeft, LoaderCircle, ExternalLink, ClipboardPaste, RefreshCw, Check, ChevronDown, Mic, Eye, EyeOff, Shield, ShieldCheck, ShieldOff, Copy, Smartphone, Globe, Wifi, WifiOff, TriangleAlert, X, Plus, KeyRound } from 'lucide-react';
 import { motion, AnimatePresence } from 'framer-motion';
+import { authFetch } from './src/lib/auth';
 
 /* ── Access detection ── */
 
@@ -86,7 +87,7 @@ const HANDLES = [
 
 /* ── Dropdown ── */
 
-function ModelDropdown({ models, value, onChange }: { models: { id: string; label: string }[]; value: string; onChange: (id: string) => void }) {
+function ModelDropdown({ models, value, onChange, placeholder = 'Choose a model...' }: { models: { id: string; label: string }[]; value: string; onChange: (id: string) => void; placeholder?: string }) {
   const [open, setOpen] = useState(false);
   const [pos, setPos] = useState<{ top: number; left: number; width: number } | null>(null);
   const btnRef = useRef<HTMLButtonElement>(null);
@@ -126,7 +127,7 @@ function ModelDropdown({ models, value, onChange }: { models: { id: string; labe
         className="w-full flex items-center justify-between gap-2 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-[#0069FE]/30 transition-colors overflow-hidden"
       >
         <span className={`min-w-0 truncate text-left ${selected ? 'text-white' : 'text-white/20'}`}>
-          {selected ? selected.label : 'Choose a model...'}
+          {selected ? selected.label : placeholder}
         </span>
         <ChevronDown className={`h-4 w-4 shrink-0 text-white/30 transition-transform ${open ? 'rotate-180' : ''}`} />
       </button>
@@ -156,6 +157,370 @@ function ModelDropdown({ models, value, onChange }: { models: { id: string; labe
   );
 }
 
+/* ── Settings mode: screen registry + jump menu ── */
+
+// The jumpable settings screens (settings re-run only). `step` maps to the wizard step index.
+// Environment Variables (step 6) reuses the slot the onboarding-only "All Set" screen occupies.
+const SETTINGS_SCREENS: { step: number; label: string }[] = [
+  { step: 1, label: 'Personal Info' },
+  { step: 2, label: 'Agent Name & Access' },
+  { step: 3, label: 'Security' },
+  { step: 4, label: 'AI Provider' },
+  { step: 5, label: 'Voice Messages' },
+  { step: 6, label: 'Environment Variables' },
+];
+
+// Compact "Go to" dropdown shown in the settings header so the user can jump to any screen.
+function GoToMenu({ onJump }: { onJump: (step: number) => void }) {
+  const [open, setOpen] = useState(false);
+  const [pos, setPos] = useState<{ top: number; right: number } | null>(null);
+  const btnRef = useRef<HTMLButtonElement>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const recalc = () => {
+      const r = btnRef.current?.getBoundingClientRect();
+      if (r) setPos({ top: r.bottom + 6, right: window.innerWidth - r.right });
+    };
+    recalc();
+    const handler = (e: MouseEvent) => {
+      const t = e.target as Node;
+      if (btnRef.current?.contains(t) || menuRef.current?.contains(t)) return;
+      setOpen(false);
+    };
+    document.addEventListener('mousedown', handler);
+    window.addEventListener('resize', recalc);
+    window.addEventListener('scroll', recalc, true);
+    return () => {
+      document.removeEventListener('mousedown', handler);
+      window.removeEventListener('resize', recalc);
+      window.removeEventListener('scroll', recalc, true);
+    };
+  }, [open]);
+
+  return (
+    <>
+      <button
+        ref={btnRef}
+        type="button"
+        onClick={() => setOpen((o) => !o)}
+        className="flex items-center gap-1 text-white/50 hover:text-white/80 text-[12px] font-medium px-2.5 py-1 rounded-lg hover:bg-white/[0.05] transition-colors"
+      >
+        Go to
+        <ChevronDown className={`h-3.5 w-3.5 transition-transform ${open ? 'rotate-180' : ''}`} />
+      </button>
+      {open && pos && createPortal(
+        <div
+          ref={menuRef}
+          style={{ position: 'fixed', top: pos.top, right: pos.right, zIndex: 1000 }}
+          className="bg-[#222] border border-white/[0.08] rounded-xl shadow-xl py-1 min-w-[200px]"
+        >
+          {SETTINGS_SCREENS.map((s) => (
+            <button
+              key={s.step}
+              onClick={() => { onJump(s.step); setOpen(false); }}
+              className="w-full text-left px-4 py-2 text-[13px] text-white/70 hover:bg-white/[0.04] hover:text-white transition-colors"
+            >
+              {s.label}
+            </button>
+          ))}
+        </div>,
+        document.body,
+      )}
+    </>
+  );
+}
+
+/* ── Settings mode: Environment Variables screen ── */
+
+interface EnvVarRow { name: string; value: string }
+interface EnvVarGroup { title: string; vars: EnvVarRow[] }
+interface EnvCache {
+  groups: EnvVarGroup[];
+  values: Record<string, string>;
+  originals: Record<string, string>;
+  revealed: string[];
+  newRows: { id: number; name: string; value: string }[];
+  newRowSeq: number;
+  saved: boolean;
+}
+
+const ENV_NAME_RE = /^[A-Za-z_][A-Za-z0-9_]*$/;
+
+// A read/write view of the agent-controlled `workspace/.env`, grouped by `# Section` headers.
+// Reads via GET /api/env, writes changed/added keys via POST /api/env (which restarts the backend).
+// Self-saving and self-contained — not part of the wizard's batched onboard payload.
+// `cacheRef` lets the working state survive this screen's unmount/remount when the user
+// navigates to another settings screen and back (the wizard keys each step's motion.div by
+// `step`, so it remounts). It lives in the parent and dies with the wizard, so each fresh
+// open re-fetches from /api/env.
+function EnvSettings({ cacheRef }: { cacheRef: MutableRefObject<EnvCache | null> }) {
+  // Whether we already have cached working state at mount — captured once per instance.
+  const hadCache = useRef(cacheRef.current != null).current;
+  const cached = cacheRef.current;
+  const [groups, setGroups] = useState<EnvVarGroup[]>(cached?.groups ?? []);
+  const [loading, setLoading] = useState(!hadCache);
+  const [loadError, setLoadError] = useState('');
+  const [values, setValues] = useState<Record<string, string>>(cached?.values ?? {});
+  const [originals, setOriginals] = useState<Record<string, string>>(cached?.originals ?? {});
+  const [revealed, setRevealed] = useState<Set<string>>(new Set(cached?.revealed ?? []));
+  const [newRows, setNewRows] = useState<{ id: number; name: string; value: string }[]>(cached?.newRows ?? []);
+  const newRowId = useRef(cached?.newRowSeq ?? 0);
+  const [saving, setSaving] = useState(false);
+  const [saved, setSaved] = useState(cached?.saved ?? false);
+  const [saveError, setSaveError] = useState('');
+
+  useEffect(() => {
+    if (hadCache) return; // hydrated from cache — don't clobber edits with a refetch
+    let cancelled = false;
+    authFetch('/api/env')
+      .then((r) => (r.ok ? r.json() : Promise.reject(new Error('Failed to load environment variables'))))
+      .then((data) => {
+        if (cancelled) return;
+        const gs: EnvVarGroup[] = Array.isArray(data.groups) ? data.groups : [];
+        const init: Record<string, string> = {};
+        for (const g of gs) for (const v of g.vars) init[v.name] = v.value;
+        setGroups(gs);
+        setValues(init);
+        setOriginals(init);
+        setLoading(false);
+      })
+      .catch((err) => { if (!cancelled) { setLoadError(err.message || 'Failed to load'); setLoading(false); } });
+    return () => { cancelled = true; };
+  }, [hadCache]);
+
+  // Persist working state to the parent ref so navigating away and back doesn't lose edits.
+  // Skip while loading so a navigate-away mid-fetch leaves the cache empty → refetch on return.
+  useEffect(() => {
+    if (loading) return;
+    cacheRef.current = { groups, values, originals, revealed: Array.from(revealed), newRows, newRowSeq: newRowId.current, saved };
+  });
+
+  const validNewRows = newRows.filter((r) => r.name.trim() && r.value.trim() && ENV_NAME_RE.test(r.name.trim()));
+  const changedExisting = Object.keys(values).filter((k) => values[k] !== originals[k]);
+  const dirty = changedExisting.length > 0 || validNewRows.length > 0;
+
+  const toggleReveal = (name: string) => {
+    setRevealed((prev) => {
+      const next = new Set(prev);
+      if (next.has(name)) next.delete(name); else next.add(name);
+      return next;
+    });
+  };
+
+  const handleSave = async () => {
+    if (!dirty || saving) return;
+    setSaving(true); setSaveError(''); setSaved(false);
+    const vars: Record<string, string> = {};
+    for (const k of changedExisting) vars[k] = values[k];
+    for (const r of validNewRows) vars[r.name.trim()] = r.value.trim();
+    try {
+      const res = await authFetch('/api/env', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ vars }),
+      });
+      if (!res.ok) {
+        const d = await res.json().catch(() => ({ error: 'Save failed' }));
+        throw new Error(d.error || 'Save failed');
+      }
+      // Snapshot of values including the just-added rows, so `dirty` resets after save.
+      const merged = { ...values };
+      for (const r of validNewRows) merged[r.name.trim()] = r.value.trim();
+      // Surface newly-added vars under a "Custom" group in the UI (the writer appends them
+      // to the file; on next load they'll re-group under whatever section precedes them).
+      setGroups((prev) => {
+        const next = prev.map((g) => ({ ...g, vars: [...g.vars] }));
+        const existing = new Set(next.flatMap((g) => g.vars.map((v) => v.name)));
+        const toAdd = validNewRows.map((r) => r.name.trim()).filter((nm) => !existing.has(nm));
+        if (toAdd.length) {
+          let custom = next.find((g) => g.title === 'Custom');
+          if (!custom) { custom = { title: 'Custom', vars: [] }; next.push(custom); }
+          for (const nm of toAdd) custom.vars.push({ name: nm, value: merged[nm] });
+        }
+        return next;
+      });
+      setValues(merged);
+      setOriginals(merged);
+      setNewRows([]);
+      setSaved(true);
+      setSaving(false);
+    } catch (err: any) {
+      setSaveError(err.message || 'Save failed');
+      setSaving(false);
+    }
+  };
+
+  return (
+    <div>
+      <h1 className="text-xl font-bold text-white tracking-tight">Environment Variables</h1>
+      <p className="text-white/40 text-[13px] mt-1.5 leading-relaxed">
+        API keys and secrets stored in your workspace{' '}
+        <code className="text-white/55 font-mono text-[12px]">.env</code>. Your agent reads and writes these as you build.
+      </p>
+
+      {loading ? (
+        <div className="flex items-center justify-center py-12 text-white/40">
+          <LoaderCircle className="h-5 w-5 animate-spin" />
+        </div>
+      ) : loadError ? (
+        <div className="mt-5 flex items-center gap-2 text-[13px] text-red-400">
+          <TriangleAlert className="h-4 w-4 shrink-0" />{loadError}
+        </div>
+      ) : (
+        <div className="mt-5 space-y-5 max-h-[44vh] overflow-y-auto pr-1 -mr-1">
+          {groups.length === 0 && newRows.length === 0 && (
+            <div className="rounded-xl border border-white/[0.06] bg-white/[0.02] px-4 py-7 text-center">
+              <KeyRound className="h-5 w-5 text-white/25 mx-auto mb-2" />
+              <p className="text-white/40 text-[13px]">No environment variables yet.</p>
+              <p className="text-white/25 text-[12px] mt-1">Ask your agent to add an integration, or add one manually below.</p>
+            </div>
+          )}
+
+          {groups.map((g) => (
+            <div key={g.title || '__untitled'}>
+              <div className="flex items-center gap-2 mb-2">
+                <KeyRound className="h-3.5 w-3.5 text-[#0069FE]/70" />
+                <span className="text-[12px] font-semibold text-white/70 uppercase tracking-wide">{g.title || 'Other'}</span>
+              </div>
+              <div className="space-y-2.5">
+                {g.vars.map((v) => {
+                  const changed = values[v.name] !== originals[v.name];
+                  const show = revealed.has(v.name);
+                  return (
+                    <div key={v.name}>
+                      <label className="flex items-center gap-1.5 text-[11px] text-white/40 mb-1">
+                        <code className="font-mono text-white/50">{v.name}</code>
+                        {changed && <span className="text-[#0069FE] text-[10px] font-medium">• edited</span>}
+                      </label>
+                      <div className="relative">
+                        <input
+                          type={show ? 'text' : 'password'}
+                          value={values[v.name] ?? ''}
+                          onChange={(e) => setValues((p) => ({ ...p, [v.name]: e.target.value }))}
+                          autoComplete="off"
+                          spellCheck={false}
+                          data-1p-ignore
+                          data-lpignore="true"
+                          className="w-full bg-white/[0.03] border border-white/[0.08] text-white rounded-xl pl-4 pr-10 py-2.5 text-[13px] font-mono outline-none focus:border-[#0069FE]/30 transition-colors"
+                        />
+                        <button
+                          type="button"
+                          onClick={() => toggleReveal(v.name)}
+                          className="absolute right-3 top-1/2 -translate-y-1/2 text-white/30 hover:text-white/60 transition-colors"
+                          aria-label={show ? 'Hide value' : 'Reveal value'}
+                        >
+                          {show ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+                        </button>
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          ))}
+
+          {newRows.length > 0 && (
+            <div>
+              <div className="flex items-center gap-2 mb-2">
+                <Plus className="h-3.5 w-3.5 text-emerald-400/70" />
+                <span className="text-[12px] font-semibold text-white/70 uppercase tracking-wide">New</span>
+              </div>
+              <div className="space-y-3">
+                {newRows.map((r) => {
+                  const nameInvalid = r.name.trim().length > 0 && !ENV_NAME_RE.test(r.name.trim());
+                  return (
+                    <div key={r.id} className="flex items-start gap-2">
+                      <div className="flex-1 space-y-1.5">
+                        <input
+                          type="text"
+                          value={r.name}
+                          onChange={(e) => setNewRows((p) => p.map((x) => (x.id === r.id ? { ...x, name: e.target.value } : x)))}
+                          placeholder="VARIABLE_NAME"
+                          autoComplete="off"
+                          spellCheck={false}
+                          data-1p-ignore
+                          data-lpignore="true"
+                          className={`w-full bg-white/[0.03] border ${nameInvalid ? 'border-red-500/40' : 'border-white/[0.08]'} text-white rounded-xl px-4 py-2.5 text-[13px] font-mono outline-none focus:border-[#0069FE]/30 transition-colors`}
+                        />
+                        <input
+                          type="text"
+                          value={r.value}
+                          onChange={(e) => setNewRows((p) => p.map((x) => (x.id === r.id ? { ...x, value: e.target.value } : x)))}
+                          placeholder="value"
+                          autoComplete="off"
+                          spellCheck={false}
+                          data-1p-ignore
+                          data-lpignore="true"
+                          className="w-full bg-white/[0.03] border border-white/[0.08] text-white rounded-xl px-4 py-2.5 text-[13px] font-mono outline-none focus:border-[#0069FE]/30 transition-colors"
+                        />
+                        {nameInvalid && (
+                          <p className="text-red-400/80 text-[11px]">Use letters, numbers and underscores; can't start with a number.</p>
+                        )}
+                      </div>
+                      <button
+                        type="button"
+                        onClick={() => setNewRows((p) => p.filter((x) => x.id !== r.id))}
+                        className="mt-2 text-white/25 hover:text-red-400/80 transition-colors"
+                        aria-label="Remove"
+                      >
+                        <X className="h-4 w-4" />
+                      </button>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          )}
+
+          <button
+            type="button"
+            onClick={() => setNewRows((p) => [...p, { id: newRowId.current++, name: '', value: '' }])}
+            className="flex items-center gap-1.5 text-[12px] text-white/50 hover:text-white/80 transition-colors"
+          >
+            <Plus className="h-3.5 w-3.5" /> Add new
+          </button>
+        </div>
+      )}
+
+      {dirty && !saving && (
+        <div className="mt-4 flex items-start gap-2.5 bg-amber-500/[0.06] border border-amber-500/20 rounded-xl px-4 py-3">
+          <TriangleAlert className="h-4 w-4 text-amber-400 mt-0.5 shrink-0" />
+          <p className="text-amber-300/80 text-[12px] leading-relaxed">
+            API key change detected. Your workspace backend will be restarted when you save.
+          </p>
+        </div>
+      )}
+
+      {saved && !dirty && (
+        <div className="mt-4 flex items-center gap-2.5 bg-emerald-500/[0.06] border border-emerald-500/20 rounded-xl px-4 py-3">
+          <Check className="h-4 w-4 text-emerald-400 shrink-0" />
+          <p className="text-emerald-300/90 text-[12px]">Saved — your workspace backend is restarting.</p>
+        </div>
+      )}
+
+      {saveError && (
+        <div className="mt-3 flex items-center gap-1.5 text-[12px] text-red-400">
+          <TriangleAlert className="h-3.5 w-3.5 shrink-0" />{saveError}
+        </div>
+      )}
+
+      <button
+        onClick={handleSave}
+        disabled={!dirty || saving}
+        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 disabled:cursor-not-allowed"
+      >
+        {saving ? (
+          <><LoaderCircle className="h-4 w-4 animate-spin" />Saving...</>
+        ) : (
+          <><RefreshCw className="h-4 w-4" />Save &amp; restart backend</>
+        )}
+      </button>
+    </div>
+  );
+}
+
 /* ── Component ── */
 
 interface Props {
@@ -166,7 +531,8 @@ interface Props {
 }
 
 export default function OnboardWizard({ onComplete, isInitialSetup = false, onSave, onTunnelSwitch }: Props) {
-  const TOTAL_STEPS = isInitialSetup ? 7 : 6; // 0..5 normal, +step 6 "All Set" for initial
+  // 0..5 shared. Step 6 = "All Set" (onboarding) OR "Environment Variables" (settings re-run).
+  const TOTAL_STEPS = 7;
 
   const [step, setStep] = useState(0);
   const [userName, setUserName] = useState('');
@@ -317,6 +683,10 @@ export default function OnboardWizard({ onComplete, isInitialSetup = false, onSa
   // Pre-fill guard
   const prefillDone = useRef(false);
 
+  // Environment Variables screen working-state cache (settings mode). Survives the per-step
+  // remount so edits aren't lost when navigating between settings screens; dies with the wizard.
+  const envCacheRef = useRef<EnvCache | null>(null);
+
   const isConnected = authState[provider] === 'connected';
 
   // Persist/restore TOTP setup state across page reloads (mobile: OS suspends PWA on app-switch)
@@ -946,6 +1316,7 @@ export default function OnboardWizard({ onComplete, isInitialSetup = false, onSa
       }
       case 4: return !!(provider && model && isConnected);
       case 5: return true;
+      case 6: return true; // Environment Variables (settings) — self-saving, last screen
       default: return false;
     }
   })();
@@ -1011,21 +1382,46 @@ export default function OnboardWizard({ onComplete, isInitialSetup = false, onSa
         transition={{ duration: 0.3 }}
         className="relative w-full max-w-[480px] bg-[#181818] border border-white/[0.06] rounded-[24px] shadow-2xl overflow-hidden"
       >
-        {/* Step dots */}
-        <div className="flex justify-center gap-2 pt-6">
-          {Array.from({ length: TOTAL_STEPS }, (_, i) => (
-            <div
-              key={i}
-              className={`h-1.5 rounded-full transition-all duration-300 ${
-                i === step
-                  ? 'w-7 bg-gradient-brand'
-                  : i < step
-                    ? 'w-1.5 bg-gradient-brand opacity-60'
-                    : 'w-1.5 bg-white/10'
-              }`}
-            />
-          ))}
-        </div>
+        {/* Onboarding: step dots. Settings: a header with hub-back, screen jump, and close. */}
+        {isInitialSetup ? (
+          <div className="flex justify-center gap-2 pt-6">
+            {Array.from({ length: TOTAL_STEPS }, (_, i) => (
+              <div
+                key={i}
+                className={`h-1.5 rounded-full transition-all duration-300 ${
+                  i === step
+                    ? 'w-7 bg-gradient-brand'
+                    : i < step
+                      ? 'w-1.5 bg-gradient-brand opacity-60'
+                      : 'w-1.5 bg-white/10'
+                }`}
+              />
+            ))}
+          </div>
+        ) : (
+          <div className="flex items-center justify-between px-5 pt-4 pb-1">
+            {step === 0 ? (
+              <span className="text-[13px] font-semibold text-white/80 pl-1">Settings</span>
+            ) : (
+              <button
+                onClick={() => setStep(0)}
+                className="flex items-center gap-1 text-white/50 hover:text-white/80 text-[13px] font-medium pl-1 pr-2 py-1 rounded-lg hover:bg-white/[0.05] transition-colors"
+              >
+                <ArrowLeft className="h-3.5 w-3.5" /> Settings
+              </button>
+            )}
+            <div className="flex items-center gap-0.5">
+              {step !== 0 && <GoToMenu onJump={(s) => setStep(s)} />}
+              <button
+                onClick={onComplete}
+                className="text-white/40 hover:text-white/80 p-1.5 rounded-lg hover:bg-white/[0.05] transition-colors"
+                aria-label="Close settings"
+              >
+                <X className="h-4 w-4" />
+              </button>
+            </div>
+          </div>
+        )}
 
         {/* Content */}
         <AnimatePresence mode="wait">
@@ -1037,8 +1433,8 @@ export default function OnboardWizard({ onComplete, isInitialSetup = false, onSa
             transition={{ duration: 0.2, ease: 'easeOut' }}
             className="px-8 pt-6 pb-8"
           >
-            {/* ── Step 0: Welcome ── */}
-            {step === 0 && (
+            {/* ── Step 0: Welcome (onboarding) ── */}
+            {step === 0 && isInitialSetup && (
               <div className="flex flex-col items-center text-center">
                 <video autoPlay loop muted playsInline className="h-[180px] mb-4">
                   <source src="/bloby_say_hi.mov" type='video/mp4; codecs="hvc1"' />
@@ -1060,6 +1456,37 @@ export default function OnboardWizard({ onComplete, isInitialSetup = false, onSa
               </div>
             )}
 
+            {/* ── Step 0: Settings hub (settings re-run) ── */}
+            {step === 0 && !isInitialSetup && (
+              <div className="flex flex-col items-center text-center">
+                <video autoPlay loop muted playsInline className="h-[150px] mb-4">
+                  <source src="/bloby_say_hi.mov" type='video/mp4; codecs="hvc1"' />
+                  <source src="/bloby_say_hi.webm" type="video/webm" />
+                </video>
+                <h1 className="text-2xl font-bold text-white tracking-tight">
+                  Settings
+                </h1>
+                <p className="text-white/40 text-[14px] mt-2 leading-relaxed max-w-[320px]">
+                  What would you like to change?
+                </p>
+                <div className="w-full mt-5">
+                  <ModelDropdown
+                    models={SETTINGS_SCREENS.map((s) => ({ id: String(s.step), label: s.label }))}
+                    value=""
+                    placeholder="Select a setting…"
+                    onChange={(id) => setStep(Number(id))}
+                  />
+                </div>
+                <button
+                  onClick={next}
+                  className="mt-4 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"
+                >
+                  Continue
+                  <ArrowRight className="h-4 w-4" />
+                </button>
+              </div>
+            )}
+
             {/* ── Step 1: Your name ── */}
             {step === 1 && (
               <div>
@@ -1097,7 +1524,7 @@ export default function OnboardWizard({ onComplete, isInitialSetup = false, onSa
             {step === 2 && tunnelMode === 'off' && (
               <div>
                 <h1 className="text-xl font-bold text-white tracking-tight">
-                  Bot Name & Access
+                  Agent Name & Access
                 </h1>
                 <p className="text-white/40 text-[13px] mt-1.5 leading-relaxed">
                   Give your bot a name. This is used throughout the app as your bot's identity.
@@ -1219,7 +1646,7 @@ export default function OnboardWizard({ onComplete, isInitialSetup = false, onSa
             {step === 2 && tunnelMode === 'named' && (
               <div>
                 <h1 className="text-xl font-bold text-white tracking-tight">
-                  Bot Name & Access
+                  Agent Name & Access
                 </h1>
                 <p className="text-white/40 text-[13px] mt-1.5 leading-relaxed">
                   This is your bot's identity. Your named tunnel domain is already configured.
@@ -1266,7 +1693,7 @@ export default function OnboardWizard({ onComplete, isInitialSetup = false, onSa
             {step === 2 && tunnelMode === 'quick' && (
               <div>
                 <h1 className="text-xl font-bold text-white tracking-tight">
-                  Bot Name & Access
+                  Agent Name & Access
                 </h1>
                 <p className="text-white/40 text-[13px] mt-1.5 leading-relaxed">
                   This is your bot's name and permanent handle — access it from anywhere.
@@ -2821,9 +3248,9 @@ export default function OnboardWizard({ onComplete, isInitialSetup = false, onSa
                   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...</>
+                    <><LoaderCircle className="h-4 w-4 animate-spin" />{isInitialSetup ? 'Setting up...' : 'Saving...'}</>
                   ) : (
-                    <>Complete Setup<ArrowRight className="h-4 w-4" /></>
+                    <>{isInitialSetup ? 'Complete Setup' : 'Save Changes'}<ArrowRight className="h-4 w-4" /></>
                   )}
                 </button>
 
@@ -2943,11 +3370,14 @@ export default function OnboardWizard({ onComplete, isInitialSetup = false, onSa
               </div>
               );
             })()}
+
+            {/* ── Step 6: Environment Variables (settings re-run only) ── */}
+            {step === 6 && !isInitialSetup && <EnvSettings cacheRef={envCacheRef} />}
           </motion.div>
         </AnimatePresence>
 
-        {/* Back button (hidden on All Set step) */}
-        {step > 0 && step < TOTAL_STEPS - 1 && !(step === 6 && isInitialSetup) && (
+        {/* Back link — onboarding only; settings mode navigates via the header. */}
+        {isInitialSetup && step > 0 && step < TOTAL_STEPS - 1 && (
           <div className="px-8 pb-5 -mt-3">
             <button
               onClick={back}