@unctad-ai/voice-agent-ui 3.0.3 → 5.0.1

package/dist/{VoiceSettingsView-25CXZPWY.js → VoiceSettingsView-QY7TEHYZ.js}

@@ -5,7 +5,7 @@ import {
   SliderSetting,
   ToggleSetting,
   VoiceSettingsView
-} from "./chunk-MUM5DNV4.js";
+} from "./chunk-K3JJWWRQ.js";
 export {
   Divider,
   SelectSetting,
@@ -14,4 +14,4 @@ export {
   ToggleSetting,
   VoiceSettingsView as default
 };
-//# sourceMappingURL=VoiceSettingsView-25CXZPWY.js.map
+//# sourceMappingURL=VoiceSettingsView-QY7TEHYZ.js.map

package/dist/{chunk-MUM5DNV4.js → chunk-K3JJWWRQ.js}

@@ -1,5 +1,5 @@
 // src/components/VoiceSettingsView.tsx
-import { useState as useState3 } from "react";
+import { useState as useState3, useCallback as useCallback3 } from "react";
 import { motion, AnimatePresence } from "motion/react";
 import {
   ArrowLeft,
@@ -152,68 +152,258 @@ function useVoiceSettings() {
 }
 
 // src/components/VoiceSettingsView.tsx
-import { VAD, useSiteConfig as useSiteConfig2 } from "@unctad-ai/voice-agent-core";
+import { VAD, useSiteConfig as useSiteConfig2, usePersonaContext as usePersonaContext2 } from "@unctad-ai/voice-agent-core";
 
 // src/components/PersonaSettings.tsx
-import { useState as useState2, useRef as useRef2, useEffect } from "react";
+import { useState as useState2, useRef as useRef2, useEffect, useCallback as useCallback2 } from "react";
 import { usePersonaContext, useSiteConfig } from "@unctad-ai/voice-agent-core";
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-function PersonaSettings() {
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var LANGUAGE_OPTIONS = [
+  { value: "en", label: "English" },
+  { value: "fr", label: "French" },
+  { value: "es", label: "Spanish" },
+  { value: "sw", label: "Swahili" },
+  { value: "pt", label: "Portuguese" },
+  { value: "ar", label: "Arabic" },
+  { value: "zh", label: "Chinese" },
+  { value: "hi", label: "Hindi" },
+  { value: "dz", label: "Dzongkha" }
+];
+function PersonaSettings({ adminPassword }) {
   const config = useSiteConfig();
   if (!config.personaEndpoint) return null;
-  return /* @__PURE__ */ jsx2(PersonaSettingsInner, {});
+  return /* @__PURE__ */ jsx2(PersonaSettingsInner, { adminPassword: adminPassword ?? null });
 }
-function PersonaSettingsInner() {
+function PersonaSettingsInner({ adminPassword }) {
   const config = useSiteConfig();
   const persona = usePersonaContext();
   if (!persona) return null;
-  const { persona: data, isLoaded, updateName, uploadAvatar, uploadVoice, deleteVoice, setActiveVoice, previewVoice } = persona;
+  const { persona: data, isLoaded, uploadAvatar, uploadVoice, deleteVoice, setActiveVoice, previewVoice, updateConfig } = persona;
+  const isAdmin = adminPassword !== null;
+  const handleSharedSave = useCallback2(async (fields) => {
+    if (!adminPassword) return;
+    try {
+      await updateConfig(fields, adminPassword);
+    } catch (err) {
+      console.error("Settings save failed:", err);
+    }
+  }, [adminPassword, updateConfig]);
   if (!isLoaded) {
     return /* @__PURE__ */ jsx2("div", { style: { padding: 16, fontSize: 13, color: "#9ca3af", fontFamily: "inherit" }, children: "Loading persona settings..." });
   }
-  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12, fontFamily: "inherit" }, children: [
-    /* @__PURE__ */ jsx2(AvatarSection, { avatarUrl: config.avatarUrl, name: config.copilotName, onUpload: uploadAvatar }),
-    /* @__PURE__ */ jsx2(NameSection, { name: config.copilotName, onSave: updateName, primaryColor: config.colors.primary }),
+  return /* @__PURE__ */ jsx2("div", { style: { display: "flex", flexDirection: "column", gap: 12, fontFamily: "inherit" }, children: isAdmin ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2(AvatarSection, { avatarUrl: config.avatarUrl, name: config.copilotName, onUpload: (f) => uploadAvatar(f, adminPassword) }),
+    /* @__PURE__ */ jsx2(NameSection, { name: config.copilotName, onSave: (n) => updateConfig({ copilotName: n }, adminPassword), primaryColor: config.colors.primary }),
     /* @__PURE__ */ jsx2(
       VoiceSection,
       {
         voices: data?.voices ?? [],
         activeVoiceId: data?.activeVoiceId ?? "",
-        onUpload: uploadVoice,
-        onDelete: deleteVoice,
-        onSelect: setActiveVoice,
+        onUpload: (f, n) => uploadVoice(f, n, adminPassword),
+        onDelete: (id) => deleteVoice(id, adminPassword),
+        onSelect: (id) => setActiveVoice(id, adminPassword),
         onPreview: previewVoice,
         primaryColor: config.colors.primary
       }
+    ),
+    /* @__PURE__ */ jsxs("div", { style: { borderTop: "1px solid #e5e7eb", paddingTop: 12, display: "flex", flexDirection: "column", gap: 10 }, children: [
+      /* @__PURE__ */ jsx2("span", { style: { fontSize: 13, fontWeight: 500, color: "#111827" }, children: "Copilot settings" }),
+      /* @__PURE__ */ jsx2(
+        ColorSettingRow,
+        {
+          label: "Color",
+          value: data?.copilotColor || config.colors.primary || "#1B5E20",
+          onSave: (v) => handleSharedSave({ copilotColor: v })
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        TextSettingRow,
+        {
+          label: "Site title",
+          value: data?.siteTitle || "",
+          onSave: (v) => handleSharedSave({ siteTitle: v })
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        TextAreaSettingRow,
+        {
+          label: "Greeting",
+          value: data?.greetingMessage || "",
+          onSave: (v) => handleSharedSave({ greetingMessage: v })
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        TextAreaSettingRow,
+        {
+          label: "Farewell",
+          value: data?.farewellMessage || "",
+          onSave: (v) => handleSharedSave({ farewellMessage: v })
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        TextAreaSettingRow,
+        {
+          label: "System prompt intro",
+          value: data?.systemPromptIntro || "",
+          onSave: (v) => handleSharedSave({ systemPromptIntro: v }),
+          rows: 4
+        }
+      ),
+      /* @__PURE__ */ jsx2(SettingRow, { label: "Default language", children: /* @__PURE__ */ jsx2(
+        "select",
+        {
+          value: data?.language || "en",
+          onChange: (e) => handleSharedSave({ language: e.target.value }),
+          style: {
+            fontSize: 12,
+            borderRadius: 6,
+            border: "1px solid #e5e7eb",
+            padding: "4px 8px",
+            outline: "none",
+            fontFamily: "inherit",
+            backgroundColor: "#fff"
+          },
+          children: LANGUAGE_OPTIONS.map((l) => /* @__PURE__ */ jsx2("option", { value: l.value, children: l.label }, l.value))
+        }
+      ) })
+    ] })
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2(AvatarSection, { avatarUrl: config.avatarUrl, name: config.copilotName, disabled: true }),
+    /* @__PURE__ */ jsxs("div", { style: { fontSize: 13, color: "#6b7280", padding: "4px 0" }, children: [
+      /* @__PURE__ */ jsx2("span", { style: { fontWeight: 500, color: "#111827" }, children: "Name:" }),
+      " ",
+      config.copilotName
+    ] }),
+    /* @__PURE__ */ jsx2(
+      VoiceSection,
+      {
+        voices: data?.voices ?? [],
+        activeVoiceId: data?.activeVoiceId ?? "",
+        onUpload: (f, n) => uploadVoice(f, n),
+        onDelete: (id) => deleteVoice(id),
+        onSelect: setActiveVoice,
+        onPreview: previewVoice,
+        primaryColor: config.colors.primary,
+        disabled: true
+      }
+    )
+  ] }) });
+}
+function SettingRow({ label, children }) {
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+    /* @__PURE__ */ jsx2("span", { style: { fontSize: 12, color: "#6b7280", minWidth: 90 }, children: label }),
+    /* @__PURE__ */ jsx2("div", { style: { flex: 1 }, children })
+  ] });
+}
+function ColorSettingRow({ label, value, onSave }) {
+  const [local, setLocal] = useState2(value);
+  useEffect(() => {
+    setLocal(value);
+  }, [value]);
+  return /* @__PURE__ */ jsx2(SettingRow, { label, children: /* @__PURE__ */ jsx2(
+    "input",
+    {
+      type: "color",
+      value: local,
+      onChange: (e) => setLocal(e.target.value),
+      onBlur: () => {
+        if (local !== value) onSave(local);
+      },
+      style: { width: 32, height: 26, border: "1px solid #e5e7eb", borderRadius: 4, cursor: "pointer", padding: 0 }
+    }
+  ) });
+}
+function TextSettingRow({ label, value, onSave }) {
+  const [local, setLocal] = useState2(value);
+  useEffect(() => {
+    setLocal(value);
+  }, [value]);
+  return /* @__PURE__ */ jsx2(SettingRow, { label, children: /* @__PURE__ */ jsx2(
+    "input",
+    {
+      type: "text",
+      value: local,
+      onChange: (e) => setLocal(e.target.value),
+      onBlur: () => {
+        if (local !== value) onSave(local);
+      },
+      style: {
+        width: "100%",
+        fontSize: 12,
+        padding: "4px 8px",
+        borderRadius: 6,
+        border: "1px solid #e5e7eb",
+        outline: "none",
+        fontFamily: "inherit",
+        boxSizing: "border-box"
+      }
+    }
+  ) });
+}
+function TextAreaSettingRow({ label, value, onSave, rows = 2 }) {
+  const [local, setLocal] = useState2(value);
+  useEffect(() => {
+    setLocal(value);
+  }, [value]);
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [
+    /* @__PURE__ */ jsx2("span", { style: { fontSize: 12, color: "#6b7280" }, children: label }),
+    /* @__PURE__ */ jsx2(
+      "textarea",
+      {
+        value: local,
+        onChange: (e) => setLocal(e.target.value),
+        onBlur: () => {
+          if (local !== value) onSave(local);
+        },
+        rows,
+        style: {
+          width: "100%",
+          fontSize: 12,
+          padding: "6px 8px",
+          borderRadius: 6,
+          border: "1px solid #e5e7eb",
+          outline: "none",
+          fontFamily: "inherit",
+          resize: "vertical",
+          boxSizing: "border-box"
+        }
+      }
     )
   ] });
 }
-function AvatarSection({ avatarUrl, name, onUpload }) {
+function AvatarSection({ avatarUrl, name, onUpload, disabled }) {
   const [uploading, setUploading] = useState2(false);
   const [hovered, setHovered] = useState2(false);
   const [imgError, setImgError] = useState2(false);
+  const [uploadError, setUploadError] = useState2(null);
   const inputRef = useRef2(null);
   const initial = (name || "?")[0].toUpperCase();
   const handleFile = async (e) => {
     const file = e.target.files?.[0];
-    if (!file) return;
+    if (!file || !onUpload) return;
+    if (file.size > 5 * 1024 * 1024) {
+      setUploadError("Image too large (max 5 MB)");
+      return;
+    }
     setUploading(true);
+    setUploadError(null);
     try {
       await onUpload(file);
       setImgError(false);
     } catch (err) {
-      console.error("Avatar upload failed:", err);
+      setUploadError(err instanceof Error ? err.message : "Upload failed");
     } finally {
       setUploading(false);
     }
   };
   const showImage = avatarUrl && !imgError;
+  const canEdit = !disabled && onUpload;
   return /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12, paddingTop: 4, paddingBottom: 4 }, children: [
     /* @__PURE__ */ jsxs(
       "div",
       {
-        onClick: () => !uploading && inputRef.current?.click(),
-        onMouseEnter: () => setHovered(true),
+        onClick: () => canEdit && !uploading && inputRef.current?.click(),
+        onMouseEnter: () => canEdit && setHovered(true),
         onMouseLeave: () => setHovered(false),
         style: {
           position: "relative",
@@ -223,7 +413,7 @@ function AvatarSection({ avatarUrl, name, onUpload }) {
           overflow: "hidden",
           backgroundColor: "#e5e7eb",
           flexShrink: 0,
-          cursor: uploading ? "wait" : "pointer"
+          cursor: !canEdit ? "default" : uploading ? "wait" : "pointer"
         },
         children: [
           showImage ? /* @__PURE__ */ jsx2(
@@ -244,7 +434,7 @@ function AvatarSection({ avatarUrl, name, onUpload }) {
             fontSize: 16,
             fontWeight: 600
           }, children: initial }),
-          hovered && !uploading && /* @__PURE__ */ jsx2("div", { style: {
+          canEdit && hovered && !uploading && /* @__PURE__ */ jsx2("div", { style: {
             position: "absolute",
             inset: 0,
             backgroundColor: "rgba(0,0,0,0.35)",
@@ -261,9 +451,9 @@ function AvatarSection({ avatarUrl, name, onUpload }) {
     ),
     /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
       /* @__PURE__ */ jsx2("div", { style: { fontSize: 13, fontWeight: 500, color: "#111827" }, children: "Avatar" }),
-      /* @__PURE__ */ jsx2("div", { style: { fontSize: 11, color: "#6b7280" }, children: uploading ? "Uploading..." : "Click to change" })
+      /* @__PURE__ */ jsx2("div", { style: { fontSize: 11, color: uploadError ? "#DC2626" : "#6b7280" }, children: uploadError ?? (disabled ? "" : uploading ? "Uploading..." : "PNG, JPG or WebP (max 5 MB)") })
     ] }),
-    /* @__PURE__ */ jsx2("input", { ref: inputRef, type: "file", accept: "image/png,image/jpeg,image/webp", onChange: handleFile, style: { display: "none" } })
+    canEdit && /* @__PURE__ */ jsx2("input", { ref: inputRef, type: "file", accept: "image/png,image/jpeg,image/webp", onChange: handleFile, style: { display: "none" } })
   ] });
 }
 function NameSection({ name, onSave, primaryColor }) {
@@ -342,7 +532,7 @@ function NameSection({ name, onSave, primaryColor }) {
     ] })
   ] });
 }
-function VoiceSection({ voices, activeVoiceId, onUpload, onDelete, onSelect, onPreview, primaryColor }) {
+function VoiceSection({ voices, activeVoiceId, onUpload, onDelete, onSelect, onPreview, primaryColor, disabled }) {
   const [uploading, setUploading] = useState2(false);
   const [uploadName, setUploadName] = useState2("");
   const [showUpload, setShowUpload] = useState2(false);
@@ -398,12 +588,13 @@ function VoiceSection({ voices, activeVoiceId, onUpload, onDelete, onSelect, onP
         isPreviewing: previewing === v.id,
         onSelect: () => onSelect(v.id),
         onPreview: () => handlePreview(v.id),
-        onDelete: () => onDelete(v.id),
+        onDelete: disabled ? void 0 : () => onDelete(v.id),
+        disabled,
         primaryColor
       },
       v.id
     )),
-    showUpload ? /* @__PURE__ */ jsx2(
+    !disabled && (showUpload ? /* @__PURE__ */ jsx2(
       UploadForm,
       {
         uploadName,
@@ -422,11 +613,11 @@ function VoiceSection({ voices, activeVoiceId, onUpload, onDelete, onSelect, onP
         disabled: voices.length >= 10,
         onClick: () => inputRef.current?.click()
       }
-    ),
-    /* @__PURE__ */ jsx2("input", { ref: inputRef, type: "file", accept: "audio/wav", onChange: handleFileSelect, style: { display: "none" } })
+    )),
+    !disabled && /* @__PURE__ */ jsx2("input", { ref: inputRef, type: "file", accept: "audio/wav", onChange: handleFileSelect, style: { display: "none" } })
   ] });
 }
-function VoiceRow({ voice, isActive, isPreviewing, onSelect, onPreview, onDelete, primaryColor }) {
+function VoiceRow({ voice, isActive, isPreviewing, onSelect, onPreview, onDelete, primaryColor, disabled }) {
   const [previewHovered, setPreviewHovered] = useState2(false);
   const [deleteHovered, setDeleteHovered] = useState2(false);
   return /* @__PURE__ */ jsxs("div", { style: {
@@ -449,6 +640,7 @@ function VoiceRow({ voice, isActive, isPreviewing, onSelect, onPreview, onDelete
         name: "active-voice",
         checked: isActive,
         onChange: onSelect,
+        disabled,
         style: { accentColor: primaryColor }
       }
     ),
@@ -473,7 +665,7 @@ function VoiceRow({ voice, isActive, isPreviewing, onSelect, onPreview, onDelete
         children: isPreviewing ? "Playing..." : "Preview"
       }
     ),
-    /* @__PURE__ */ jsx2(
+    onDelete && /* @__PURE__ */ jsx2(
       "button",
       {
         onClick: onDelete,
@@ -605,7 +797,8 @@ function UploadButton({ disabled, onClick }) {
 }
 
 // src/components/VoiceSettingsView.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Lock, Unlock } from "lucide-react";
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function expressivenessLabel(v) {
   if (v <= 0.15) return "Low";
   if (v <= 0.4) return "Medium";
@@ -621,7 +814,7 @@ function bargeInLabel(v) {
   if (v >= 0.6) return "Normal";
   return "Easy";
 }
-var LANGUAGE_OPTIONS = [
+var LANGUAGE_OPTIONS2 = [
   { value: "en", label: "English" },
   { value: "fr", label: "French" },
   { value: "es", label: "Spanish" },
@@ -784,7 +977,7 @@ function SelectSetting({
 }) {
   return /* @__PURE__ */ jsxs2("div", { style: { paddingTop: 12, paddingBottom: 12, display: "flex", alignItems: "center", gap: 12 }, children: [
     icon,
-    /* @__PURE__ */ jsx3("span", { style: { flex: 1, fontSize: 13, fontWeight: 500, color: "#111827" }, children: label }),
+    /* @__PURE__ */ jsx3("span", { style: { flex: 1, fontSize: 13, fontWeight: 500, color: "#111827", minWidth: 0 }, children: label }),
     /* @__PURE__ */ jsx3(
       "select",
       {
@@ -805,19 +998,24 @@ function SelectSetting({
           e.currentTarget.style.borderColor = "#e5e7eb";
         },
         style: {
-          height: 32,
+          height: 34,
+          lineHeight: "34px",
           fontSize: 12,
           fontWeight: 500,
           color: "#374151",
           borderRadius: 9999,
           border: "1px solid #e5e7eb",
           backgroundColor: "#f9fafb",
+          paddingTop: 0,
+          paddingBottom: 0,
           paddingLeft: 12,
           paddingRight: 28,
           outline: "none",
           WebkitAppearance: "none",
           appearance: "none",
           cursor: "pointer",
+          flexShrink: 0,
+          width: 110,
           transition: "border-color 0.15s, background-color 0.15s",
           backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")`,
           backgroundRepeat: "no-repeat",
@@ -831,6 +1029,7 @@ function SelectSetting({
 function VoiceSettingsView({ onBack, onVolumeChange }) {
   const { settings, updateSetting, resetSettings } = useVoiceSettings();
   const config = useSiteConfig2();
+  const persona = usePersonaContext2();
   const { colors } = config;
   const [openSection, setOpenSection] = useState3(null);
   const iconStyle = { width: 16, height: 16, flexShrink: 0, color: colors.primary };
@@ -839,6 +1038,36 @@ function VoiceSettingsView({ onBack, onVolumeChange }) {
     open: openSection === id,
     onToggle: () => setOpenSection(openSection === id ? null : id)
   });
+  const [adminPassword, setAdminPassword] = useState3(
+    () => sessionStorage.getItem("voice-admin-pw")
+  );
+  const [showPasswordInput, setShowPasswordInput] = useState3(false);
+  const [passwordInput, setPasswordInput] = useState3("");
+  const [authError, setAuthError] = useState3("");
+  const isAdmin = adminPassword !== null;
+  const handleAdminLogin = useCallback3(async (pw) => {
+    if (!persona) return;
+    try {
+      await persona.updateConfig({}, pw);
+      sessionStorage.setItem("voice-admin-pw", pw);
+      setAdminPassword(pw);
+      setAuthError("");
+      setShowPasswordInput(false);
+      setPasswordInput("");
+    } catch {
+      setAuthError("Invalid password");
+    }
+  }, [persona]);
+  const handleAdminToggle = useCallback3(() => {
+    if (isAdmin) {
+      sessionStorage.removeItem("voice-admin-pw");
+      setAdminPassword(null);
+      setShowPasswordInput(false);
+      setPasswordInput("");
+    } else {
+      setShowPasswordInput(true);
+    }
+  }, [isAdmin]);
   return /* @__PURE__ */ jsxs2(
     motion.div,
     {
@@ -899,7 +1128,7 @@ function VoiceSettingsView({ onBack, onVolumeChange }) {
           }
         ),
         /* @__PURE__ */ jsxs2("div", { style: { flex: 1, minHeight: 0, overflowY: "auto" }, children: [
-          config.personaEndpoint && /* @__PURE__ */ jsx3(SettingsSection, { title: "Persona", icon: /* @__PURE__ */ jsx3(User, { style: sectionIconStyle }), ...sectionProps("persona"), children: /* @__PURE__ */ jsx3(PersonaSettings, {}) }),
+          config.personaEndpoint && /* @__PURE__ */ jsx3(SettingsSection, { title: "Persona", icon: /* @__PURE__ */ jsx3(User, { style: sectionIconStyle }), ...sectionProps("persona"), children: /* @__PURE__ */ jsx3(PersonaSettings, { adminPassword }) }),
           /* @__PURE__ */ jsxs2(SettingsSection, { title: "Conversation", icon: /* @__PURE__ */ jsx3(MessageCircle, { style: sectionIconStyle }), ...sectionProps("conversation"), children: [
             /* @__PURE__ */ jsx3(
               SelectSetting,
@@ -940,7 +1169,7 @@ function VoiceSettingsView({ onBack, onVolumeChange }) {
                 label: "Language",
                 value: settings.language,
                 onChange: (v) => updateSetting("language", v),
-                options: LANGUAGE_OPTIONS
+                options: LANGUAGE_OPTIONS2
               }
             ),
             /* @__PURE__ */ jsx3(Divider, {}),
@@ -1185,10 +1414,100 @@ function VoiceSettingsView({ onBack, onVolumeChange }) {
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs2("div", { style: { flexShrink: 0, textAlign: "center", padding: "8px 16px", fontSize: 11, color: "#9ca3af" }, children: [
-          "Kit v",
-          /* @__PURE__ */ jsx3("span", { style: { fontWeight: 500, color: "#6b7280" }, children: "3.0.3" })
-        ] })
+        /* @__PURE__ */ jsx3("div", { style: { flexShrink: 0, padding: "8px 16px", fontSize: 11, color: "#9ca3af", borderTop: "1px solid #f3f4f6" }, children: showPasswordInput ? /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: 6, alignItems: "center", justifyContent: "center", padding: "4px 0" }, children: [
+          /* @__PURE__ */ jsx3(
+            "input",
+            {
+              type: "password",
+              placeholder: "Admin password",
+              value: passwordInput,
+              onChange: (e) => {
+                setPasswordInput(e.target.value);
+                setAuthError("");
+              },
+              onKeyDown: (e) => {
+                if (e.key === "Enter") handleAdminLogin(passwordInput);
+                if (e.key === "Escape") {
+                  setShowPasswordInput(false);
+                  setPasswordInput("");
+                  setAuthError("");
+                }
+              },
+              autoFocus: true,
+              style: {
+                fontSize: 11,
+                padding: "3px 8px",
+                borderRadius: 6,
+                border: `1px solid ${authError ? "#ef4444" : "#e5e7eb"}`,
+                outline: "none",
+                fontFamily: "inherit",
+                width: 110
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx3(
+            "button",
+            {
+              onClick: () => handleAdminLogin(passwordInput),
+              style: {
+                fontSize: 10,
+                fontWeight: 500,
+                padding: "3px 8px",
+                borderRadius: 6,
+                border: "none",
+                backgroundColor: "#1f2937",
+                color: "#fff",
+                cursor: "pointer",
+                fontFamily: "inherit"
+              },
+              children: "OK"
+            }
+          ),
+          /* @__PURE__ */ jsx3(
+            "button",
+            {
+              onClick: () => {
+                setShowPasswordInput(false);
+                setPasswordInput("");
+                setAuthError("");
+              },
+              style: { fontSize: 10, color: "#9ca3af", background: "none", border: "none", cursor: "pointer", fontFamily: "inherit" },
+              children: "Cancel"
+            }
+          ),
+          authError && /* @__PURE__ */ jsx3("span", { style: { fontSize: 10, color: "#ef4444" }, children: authError })
+        ] }) : /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+          config.personaEndpoint ? /* @__PURE__ */ jsx3(
+            "button",
+            {
+              onClick: handleAdminToggle,
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: 4,
+                fontSize: 11,
+                color: isAdmin ? colors.primary : "#9ca3af",
+                background: "none",
+                border: "none",
+                cursor: "pointer",
+                fontFamily: "inherit",
+                padding: 0,
+                transition: "color 0.15s"
+              },
+              children: isAdmin ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
+                /* @__PURE__ */ jsx3(Unlock, { style: { width: 12, height: 12 } }),
+                " Admin mode"
+              ] }) : /* @__PURE__ */ jsxs2(Fragment2, { children: [
+                /* @__PURE__ */ jsx3(Lock, { style: { width: 12, height: 12 } }),
+                " Admin mode"
+              ] })
+            }
+          ) : /* @__PURE__ */ jsx3("span", {}),
+          /* @__PURE__ */ jsxs2("span", { children: [
+            "Kit v",
+            /* @__PURE__ */ jsx3("span", { style: { fontWeight: 500, color: "#6b7280" }, children: "5.0.1" })
+          ] })
+        ] }) })
       ]
     }
   );
@@ -1278,4 +1597,4 @@ export {
   SettingsSection,
   Divider
 };
-//# sourceMappingURL=chunk-MUM5DNV4.js.map
+//# sourceMappingURL=chunk-K3JJWWRQ.js.map