npm - @agentprojectcontext/apx - Versions diffs - 1.52.0 → 1.53.1 - Mend

@agentprojectcontext/apx 1.52.0 → 1.53.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (18) hide show

package/src/interfaces/web/dist/index.html CHANGED Viewed

@@ -18,8 +18,8 @@
     <link rel="apple-touch-icon" href="/favicon/dark/apple-touch-icon.png" media="(prefers-color-scheme: dark)" />
     <link rel="manifest" href="/favicon/white/site.webmanifest" media="(prefers-color-scheme: light)" />
     <link rel="manifest" href="/favicon/dark/site.webmanifest" media="(prefers-color-scheme: dark)" />
-    <script type="module" crossorigin src="/assets/index-adeTv5sA.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-L1pXYFUg.css">
+    <script type="module" crossorigin src="/assets/index-vuz4PKLd.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-BwnMDZaD.css">
   </head>
   <body class="bg-background text-foreground antialiased">
     <div id="root"></div>

package/src/interfaces/web/src/components/TimezoneSelect.tsx ADDED Viewed

@@ -0,0 +1,117 @@
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { ChevronDown } from "lucide-react";
+import { cn } from "../lib/cn";
+import type { TzOption } from "../i18n/timezones";
+// Searchable timezone picker. Shows offset-prefixed labels
+// ("(GMT-03:00) America/Argentina/Buenos_Aires"), filters as you type, and
+// commits the raw IANA value. Mirrors the ModelCombobox portal pattern so the
+// list escapes any scrolling container.
+export function TimezoneSelect({
+  value,
+  onChange,
+  options,
+  placeholder,
+  className,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  options: TzOption[];
+  placeholder?: string;
+  className?: string;
+}) {
+  const labelFor = (v: string) => options.find((o) => o.value === v)?.label ?? v;
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState(labelFor(value));
+  const wrapRef = useRef<HTMLDivElement | null>(null);
+  const listRef = useRef<HTMLUListElement | null>(null);
+  const [menuRect, setMenuRect] = useState<{ top: number; left: number; width: number } | null>(null);
+  useEffect(() => { setQuery(labelFor(value)); /* eslint-disable-next-line react-hooks/exhaustive-deps */ }, [value, options]);
+  useLayoutEffect(() => {
+    if (!open) return;
+    const compute = () => {
+      const el = wrapRef.current;
+      if (!el) return;
+      const r = el.getBoundingClientRect();
+      setMenuRect({ top: r.bottom + 4, left: r.left, width: r.width });
+    };
+    compute();
+    window.addEventListener("scroll", compute, true);
+    window.addEventListener("resize", compute);
+    return () => {
+      window.removeEventListener("scroll", compute, true);
+      window.removeEventListener("resize", compute);
+    };
+  }, [open]);
+  useEffect(() => {
+    if (!open) return;
+    const onDoc = (e: MouseEvent) => {
+      const target = e.target as Node;
+      if (wrapRef.current?.contains(target)) return;
+      if (listRef.current?.contains(target)) return;
+      setQuery(labelFor(value)); // discard half-typed query on outside click
+      setOpen(false);
+    };
+    document.addEventListener("mousedown", onDoc);
+    return () => document.removeEventListener("mousedown", onDoc);
+    /* eslint-disable-next-line react-hooks/exhaustive-deps */
+  }, [open, value, options]);
+  const q = query.trim().toLowerCase();
+  const isUntouched = query === labelFor(value);
+  const filtered = q && !isUntouched
+    ? options.filter((o) => o.label.toLowerCase().includes(q) || o.value.toLowerCase().includes(q))
+    : options;
+  const pick = (o: TzOption) => { onChange(o.value); setQuery(o.label); setOpen(false); };
+  return (
+    <div ref={wrapRef} className={cn("relative", className)}>
+      <div className="flex items-center gap-1 rounded-lg border border-input bg-transparent px-2.5 transition-colors focus-within:border-ring focus-within:ring-1 focus-within:ring-ring dark:bg-input/30 dark:hover:bg-input/50">
+        <input
+          value={query}
+          placeholder={placeholder}
+          onChange={(e) => { setQuery(e.target.value); setOpen(true); }}
+          onFocus={() => setOpen(true)}
+          className="w-full bg-transparent py-1.5 text-sm outline-none placeholder:text-muted-fg/60"
+        />
+        <button
+          type="button"
+          tabIndex={-1}
+          onClick={() => setOpen((v) => !v)}
+          className="shrink-0 text-muted-fg hover:text-foreground"
+        >
+          <ChevronDown className="size-4" />
+        </button>
+      </div>
+      {open && filtered.length > 0 && menuRect && createPortal(
+        <ul
+          ref={listRef}
+          style={{ position: "fixed", top: menuRect.top, left: menuRect.left, width: menuRect.width }}
+          className="z-[1000] max-h-60 overflow-y-auto rounded-lg bg-popover p-1 shadow-md ring-1 ring-foreground/10"
+        >
+          {filtered.map((o) => (
+            <li key={o.value}>
+              <button
+                type="button"
+                onMouseDown={(e) => { e.preventDefault(); pick(o); }}
+                className={cn(
+                  "flex w-full items-center rounded-md px-2 py-1 text-left text-sm hover:bg-accent hover:text-accent-fg",
+                  o.value === value && "bg-accent/50",
+                )}
+              >
+                <span className="truncate font-mono text-xs">{o.label}</span>
+              </button>
+            </li>
+          ))}
+        </ul>,
+        document.body,
+      )}
+    </div>
+  );
+}

package/src/interfaces/web/src/components/settings/DevicesPanel.tsx CHANGED Viewed

@@ -1,10 +1,11 @@
 import { useState } from "react";
 import { QrCode } from "lucide-react";
 import { Section } from "../Section";
-import { Badge, Button, Empty, Loading } from "../ui";
+import { Badge, Button, Empty, Field, Input, Loading } from "../ui";
 import { useToast } from "../Toast";
 import { useDevices } from "../../hooks/useDevices";
-import { Pair } from "../../lib/api";
+import { Pair, getToken, setToken } from "../../lib/api";
+import { STORAGE } from "../../constants";
 import { PairDeviceDialog } from "./PairDeviceDialog";
 import { t } from "../../i18n";
@@ -12,6 +13,7 @@ export function DevicesPanel() {
   const toast = useToast();
   const { clients, isLoading, mutate } = useDevices();
   const [pairOpen, setPairOpen] = useState(false);
+  const [draftToken, setDraftToken] = useState("");
   const revoke = async (id: string) => {
     if (!confirm(t("settings.devices_revoke_confirm", { id }))) return;
@@ -24,37 +26,66 @@ export function DevicesPanel() {
     }
   };
+  const saveToken = () => {
+    const v = draftToken.trim();
+    if (!v) return;
+    setToken(v);
+    try { localStorage.setItem(STORAGE.token, v); } catch { /* quota */ }
+    setDraftToken("");
+    toast.success(t("settings.token_saved"));
+  };
   return (
-    <Section
-      title={t("settings.devices")}
-      description={t("settings.devices_sub")}
-      action={
-        <Button size="sm" variant="primary" onClick={() => setPairOpen(true)}>
-          <QrCode size={14} /> {t("settings.devices_pair_btn")}
-        </Button>
-      }
-    >
-      {isLoading && <Loading />}
-      {!isLoading && clients.length === 0 && (
-        <Empty>{t("settings.devices_empty")}</Empty>
-      )}
-      {clients.length > 0 && (
-        <ul className="space-y-2 text-sm">
-          {clients.map((c) => (
-            <li key={c.id} className="flex items-center gap-3 rounded-md border border-border bg-muted/30 px-3 py-2">
-              <span className="font-medium">{c.label || c.id}</span>
-              <Badge tone={c.kind === "web" ? "info" : c.kind === "deck" ? "success" : "muted"}>{c.kind}</Badge>
-              <span className="font-mono text-xs text-muted-fg">…{c.token_suffix}</span>
-              <span className="ml-auto text-xs text-muted-fg">
-                {t("settings.devices_last_seen")} {c.last_seen ? new Date(c.last_seen).toLocaleString() : t("settings.devices_never")}
-              </span>
-              <Button size="sm" variant="destructive" onClick={() => revoke(c.id)}>{t("settings.devices_revoke")}</Button>
-            </li>
-          ))}
-        </ul>
-      )}
+    <div className="space-y-6">
+      <Section
+        title={t("settings.devices")}
+        description={t("settings.devices_sub")}
+        action={
+          <Button size="sm" variant="primary" onClick={() => setPairOpen(true)}>
+            <QrCode size={14} /> {t("settings.devices_pair_btn")}
+          </Button>
+        }
+      >
+        {isLoading && <Loading />}
+        {!isLoading && clients.length === 0 && (
+          <Empty>{t("settings.devices_empty")}</Empty>
+        )}
+        {clients.length > 0 && (
+          <ul className="space-y-2 text-sm">
+            {clients.map((c) => (
+              <li key={c.id} className="flex items-center gap-3 rounded-md border border-border bg-muted/30 px-3 py-2">
+                <span className="font-medium">{c.label || c.id}</span>
+                <Badge tone={c.kind === "web" ? "info" : c.kind === "deck" ? "success" : "muted"}>{c.kind}</Badge>
+                <span className="font-mono text-xs text-muted-fg">…{c.token_suffix}</span>
+                <span className="ml-auto text-xs text-muted-fg">
+                  {t("settings.devices_last_seen")} {c.last_seen ? new Date(c.last_seen).toLocaleString() : t("settings.devices_never")}
+                </span>
+                <Button size="sm" variant="destructive" onClick={() => revoke(c.id)}>{t("settings.devices_revoke")}</Button>
+              </li>
+            ))}
+          </ul>
+        )}
+        <PairDeviceDialog open={pairOpen} onClose={() => setPairOpen(false)} onPaired={() => mutate()} />
+      </Section>
-      <PairDeviceDialog open={pairOpen} onClose={() => setPairOpen(false)} onPaired={() => mutate()} />
-    </Section>
+      {/* Session token lives next to Devices: it's the bearer this very web
+          client authenticates with — a fallback when auto-load didn't work. */}
+      <Section title={t("settings.token")} description={t("settings.token_sub")}>
+        <Field label={t("settings_ui.bearer_label")}>
+          <Input
+            type="password"
+            placeholder={getToken() ? t("settings.token_active") : t("settings.token_paste")}
+            value={draftToken}
+            onChange={(e) => setDraftToken(e.target.value)}
+            className="font-mono"
+            onKeyDown={(e) => { if (e.key === "Enter") saveToken(); }}
+          />
+        </Field>
+        <div className="mt-2">
+          <Button variant="primary" onClick={saveToken}>{t("common.save")}</Button>
+        </div>
+      </Section>
+    </div>
   );
 }

package/src/interfaces/web/src/components/settings/IdentityPanel.tsx CHANGED Viewed

@@ -1,21 +1,27 @@
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { Section } from "../Section";
 import { Button, Empty, Field, Input, Loading, Textarea } from "../ui";
 import { UiSelect } from "../UiSelect";
+import { TimezoneSelect } from "../TimezoneSelect";
 import { useToast } from "../Toast";
 import { useIdentity } from "../../hooks/useIdentity";
 import { t } from "../../i18n";
+import { languageOptions } from "../../i18n/languages";
+import { timezoneOptions, detectTimezone } from "../../i18n/timezones";
 import type { Identity } from "../../types/daemon";
-const LANGS = ["es", "en", "pt", "fr", "it", "de"] as const;
 export function IdentityPanel() {
   const toast = useToast();
   const { identity, isLoading, save } = useIdentity();
   const [draft, setDraft] = useState<Identity>({});
   const [busy, setBusy] = useState(false);
+  const tzOptions = useMemo(() => timezoneOptions(), []);
-  useEffect(() => { setDraft(identity); }, [identity]);
+  // Default the timezone to the detected OS zone (e.g. Buenos Aires) when the
+  // identity has none saved yet, so the field starts on a sensible pick.
+  useEffect(() => {
+    setDraft({ ...identity, timezone: identity?.timezone || detectTimezone() });
+  }, [identity]);
   if (isLoading) return <Loading />;
@@ -45,11 +51,15 @@ export function IdentityPanel() {
           <UiSelect
             value={draft.language || "es"}
             onChange={(v) => setDraft({ ...draft, language: v })}
-            options={LANGS.map((l) => ({ value: l, label: l }))}
+            options={languageOptions()}
           />
         </Field>
         <Field label={t("settings.identity.timezone")} hint={t("settings.identity.timezone_hint")}>
-          <Input value={draft.timezone || ""} onChange={(e) => setDraft({ ...draft, timezone: e.target.value })} />
+          <TimezoneSelect
+            value={draft.timezone || detectTimezone()}
+            onChange={(v) => setDraft({ ...draft, timezone: v })}
+            options={tzOptions}
+          />
         </Field>
       </div>
       <div className="mt-3">

package/src/interfaces/web/src/components/settings/WebPanel.tsx ADDED Viewed

@@ -0,0 +1,45 @@
+import { useState } from "react";
+import { Section } from "../Section";
+import { Button } from "../ui";
+import { useTheme } from "../../hooks/useTheme";
+import { t, setLocale, getLocale, LOCALES, type Locale } from "../../i18n";
+// Settings for the web panel itself: visual appearance (theme) + UI language.
+// This is panel-local UX, distinct from the agent's identity.
+export function WebPanel() {
+  const { preference, set } = useTheme();
+  const [locale, setLocaleState] = useState<Locale>(getLocale());
+  const changeLocale = (l: Locale) => {
+    setLocale(l);
+    setLocaleState(l);
+    // Reload so all rendered strings pick up the new locale.
+    window.location.reload();
+  };
+  return (
+    <div className="grid gap-6 xl:grid-cols-2 xl:items-start">
+      <Section title={t("settings.appearance")}>
+        <div className="flex items-center gap-2">
+          <Button variant={preference === "light"  ? "primary" : "secondary"} onClick={() => set("light")}>{t("settings.light_mode")}</Button>
+          <Button variant={preference === "dark"   ? "primary" : "secondary"} onClick={() => set("dark")}>{t("settings.dark_mode")}</Button>
+          <Button variant={preference === "system" ? "primary" : "secondary"} onClick={() => set("system")}>{t("settings.system_mode")}</Button>
+        </div>
+      </Section>
+      <Section title={t("settings.language")}>
+        <div className="flex items-center gap-2">
+          {LOCALES.map((lo) => (
+            <Button
+              key={lo.value}
+              variant={locale === lo.value ? "primary" : "secondary"}
+              onClick={() => changeLocale(lo.value)}
+            >
+              {lo.label}
+            </Button>
+          ))}
+        </div>
+      </Section>
+    </div>
+  );
+}

package/src/interfaces/web/src/hooks/useTheme.tsx CHANGED Viewed

@@ -1,6 +1,10 @@
 // Theme controller. The CSS in styles.css already supports both modes via
 // the `.dark` class on <html>. State lives in ThemeProvider so every
 // useTheme() consumer (Logo, TopBar, Settings) stays in sync.
+//
+// `preference` is what the user picked (light | dark | system); `theme` is the
+// *resolved* mode actually applied (light | dark). System tracks the OS via
+// matchMedia and re-applies live when the OS scheme flips.
 import {
   createContext,
   useCallback,
@@ -12,39 +16,67 @@ import {
 } from "react";
 import { STORAGE } from "../constants";
-type Theme = "light" | "dark";
+type Resolved = "light" | "dark";
+type Preference = "light" | "dark" | "system";
-function readInitial(): Theme {
+function systemPrefersDark(): boolean {
+  return typeof window !== "undefined"
+    && typeof window.matchMedia === "function"
+    && window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+function resolve(pref: Preference): Resolved {
+  if (pref === "system") return systemPrefersDark() ? "dark" : "light";
+  return pref;
+}
+function readPreference(): Preference {
   if (typeof window === "undefined") return "dark";
   const saved = localStorage.getItem(STORAGE.theme);
-  if (saved === "light" || saved === "dark") return saved;
-  return document.documentElement.classList.contains("dark") ? "dark" : "light";
+  if (saved === "light" || saved === "dark" || saved === "system") return saved;
+  return "dark";
 }
 type ThemeContextValue = {
-  theme: Theme;
+  /** Resolved mode actually applied — "light" | "dark". */
+  theme: Resolved;
+  /** User selection — "light" | "dark" | "system". */
+  preference: Preference;
   toggle: () => void;
-  set: (t: Theme) => void;
+  set: (p: Preference) => void;
 };
 const ThemeContext = createContext<ThemeContextValue | null>(null);
 export function ThemeProvider({ children }: { children: ReactNode }) {
-  const [theme, setTheme] = useState<Theme>(readInitial);
+  const [preference, setPreference] = useState<Preference>(readPreference);
+  const [theme, setTheme] = useState<Resolved>(() => resolve(readPreference()));
   useEffect(() => {
-    const root = document.documentElement;
-    root.classList.toggle("dark", theme === "dark");
-    try { localStorage.setItem(STORAGE.theme, theme); } catch { /* ignore quota */ }
-  }, [theme]);
+    const apply = () => {
+      const r = resolve(preference);
+      setTheme(r);
+      document.documentElement.classList.toggle("dark", r === "dark");
+    };
+    apply();
+    try { localStorage.setItem(STORAGE.theme, preference); } catch { /* ignore quota */ }
+    // While on "system", follow the OS scheme live.
+    if (preference === "system" && typeof window.matchMedia === "function") {
+      const mq = window.matchMedia("(prefers-color-scheme: dark)");
+      mq.addEventListener("change", apply);
+      return () => mq.removeEventListener("change", apply);
+    }
+  }, [preference]);
+  // Quick toggle (TopBar): flip the *visible* mode to its opposite.
   const toggle = useCallback(() => {
-    setTheme((t) => (t === "dark" ? "light" : "dark"));
+    setPreference((p) => (resolve(p) === "dark" ? "light" : "dark"));
   }, []);
-  const value = useMemo(
-    () => ({ theme, toggle, set: setTheme }),
-    [theme, toggle],
+  const value = useMemo<ThemeContextValue>(
+    () => ({ theme, preference, toggle, set: setPreference }),
+    [theme, preference, toggle],
   );
   return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;

package/src/interfaces/web/src/i18n/languages.ts ADDED Viewed

@@ -0,0 +1,37 @@
+// Localized language picker for the super-agent's preferred language.
+//
+// The list is ISO 639-1 codes; the human-readable name is produced at render
+// time by the native Intl.DisplayNames API in the active UI locale (es/en).
+// That keeps the dropdown showing "Español", "Inglés"… (or "Spanish",
+// "English"…) without us hand-maintaining a name table per language.
+import { getLocale } from "./index";
+// ISO 639-1 codes offered as the identity's preferred language. This only
+// drives the agent's identity — it is NOT the app UI language (that stays es/en).
+export const IDENTITY_LANG_CODES = [
+  "es", "en", "pt", "fr", "it", "de", "ca", "gl", "eu",
+  "nl", "sv", "no", "da", "fi", "is",
+  "pl", "cs", "sk", "sl", "hr", "sr", "uk", "ru", "bg", "ro", "hu", "el",
+  "tr", "ar", "he", "fa", "hi", "bn", "ta", "ur",
+  "id", "ms", "vi", "th", "ko", "ja", "zh",
+] as const;
+function capitalize(s: string): string {
+  return s ? s.charAt(0).toLocaleUpperCase() + s.slice(1) : s;
+}
+// Builds { value, label } options with names localized to the active UI locale,
+// sorted alphabetically by that localized name.
+export function languageOptions(): { value: string; label: string }[] {
+  const locale = getLocale();
+  let display: Intl.DisplayNames | null = null;
+  try {
+    display = new Intl.DisplayNames([locale], { type: "language" });
+  } catch {
+    display = null; // ancient runtime — fall back to raw codes
+  }
+  return IDENTITY_LANG_CODES.map((code) => {
+    const name = display?.of(code);
+    return { value: code, label: name ? capitalize(name) : code };
+  }).sort((a, b) => a.label.localeCompare(b.label, locale));
+}

package/src/interfaces/web/src/i18n/timezones.ts ADDED Viewed

@@ -0,0 +1,64 @@
+// Timezone picker data. Native Intl is the "vendor" here: it ships the
+// canonical IANA zone list (Intl.supportedValuesOf) and the current GMT offset
+// per zone (Intl.DateTimeFormat longOffset) — no library needed.
+//
+// Stored value is the raw IANA id ("America/Argentina/Buenos_Aires"); the label
+// shown is "(GMT-03:00) America/Argentina/Buenos_Aires", sorted by offset.
+// A small fallback for ancient runtimes without Intl.supportedValuesOf.
+const FALLBACK_ZONES = [
+  "UTC", "America/Argentina/Buenos_Aires", "America/Sao_Paulo", "America/New_York",
+  "America/Los_Angeles", "America/Mexico_City", "Europe/London", "Europe/Madrid",
+  "Europe/Berlin", "Asia/Tokyo", "Asia/Shanghai", "Australia/Sydney",
+];
+function zoneList(): string[] {
+  try {
+    const f = (Intl as { supportedValuesOf?: (k: string) => string[] }).supportedValuesOf;
+    if (typeof f === "function") return f("timeZone");
+  } catch { /* ignore */ }
+  return FALLBACK_ZONES;
+}
+// Detected browser/OS zone (e.g. America/Argentina/Buenos_Aires in BA).
+export function detectTimezone(): string {
+  try { return Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC"; }
+  catch { return "UTC"; }
+}
+// Current GMT offset (minutes) for a zone, DST-aware as of `at`.
+function offsetMinutes(tz: string, at: Date): number {
+  try {
+    const part = new Intl.DateTimeFormat("en-US", { timeZone: tz, timeZoneName: "longOffset" })
+      .formatToParts(at)
+      .find((p) => p.type === "timeZoneName")?.value ?? "GMT";
+    const m = /GMT([+-])(\d{1,2})(?::(\d{2}))?/.exec(part);
+    if (!m) return 0; // "GMT" with no offset → 0
+    const sign = m[1] === "-" ? -1 : 1;
+    return sign * (parseInt(m[2], 10) * 60 + (m[3] ? parseInt(m[3], 10) : 0));
+  } catch { return 0; }
+}
+function formatOffset(min: number): string {
+  const sign = min < 0 ? "-" : "+";
+  const abs = Math.abs(min);
+  const h = String(Math.floor(abs / 60)).padStart(2, "0");
+  const m = String(abs % 60).padStart(2, "0");
+  return `GMT${sign}${h}:${m}`;
+}
+export interface TzOption { value: string; label: string }
+let cached: TzOption[] | null = null;
+// All IANA zones as { value, label } sorted by GMT offset then name.
+// Computed once per page load (offsets are stable enough across a session).
+export function timezoneOptions(): TzOption[] {
+  if (cached) return cached;
+  const now = new Date();
+  cached = zoneList()
+    .map((tz) => ({ value: tz, label: tz, off: offsetMinutes(tz, now) }))
+    .sort((a, b) => a.off - b.off || a.value.localeCompare(b.value))
+    .map(({ value, off }) => ({ value, label: `(${formatOffset(off)}) ${value}` }));
+  return cached;
+}

package/src/interfaces/web/src/screens/SettingsScreen.tsx CHANGED Viewed

@@ -1,7 +1,7 @@
 import { type ReactElement } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import {
-  Bot, Cpu, Database, KeyRound, LayoutGrid, MessageCircle, Mic, Monitor, Palette, ScrollText, Send, Smartphone, Sparkles, User,
+  Bot, Cpu, Database, Globe, KeyRound, LayoutGrid, MessageCircle, Mic, Monitor, ScrollText, Send, Smartphone, Sparkles, User,
 } from "lucide-react";
 import { useNavCollapse, type TabSection } from "../components/common/TabNav";
 import { TabLayout } from "../components/common/TabLayout";
@@ -13,7 +13,7 @@ import { ModelsTab } from "./base/ModelsTab";
 import { TelegramSettingsTabs } from "../components/settings/TelegramSettingsTabs";
 import { DevicesPanel } from "../components/settings/DevicesPanel";
 import { AdvancedPanel } from "../components/settings/AdvancedPanel";
-import { AppearancePanel } from "../components/settings/AppearancePanel";
+import { WebPanel } from "../components/settings/WebPanel";
 import { DesktopSettingsPanel } from "../components/settings/DesktopSettingsPanel";
 import { VoiceScreen } from "./modules/VoiceScreen";
 import { DeckScreen } from "./modules/DeckScreen";
@@ -22,14 +22,13 @@ import { t } from "../i18n";
 type TabKey =
   | "identity" | "super_agent" | "engines" | "memory" | "skills" | "telegram" | "devices"
-  | "voice" | "deck" | "desktop" | "appearance" | "advanced";
+  | "voice" | "deck" | "desktop" | "web" | "advanced";
 const SECTIONS: TabSection[] = [
   {
     title: t("settings.account_section"),
     items: [
       { key: "identity",    label: t("settings.tabs.identity"),    icon: User },
-      { key: "appearance",  label: t("settings.appearance"),       icon: Palette },
     ],
   },
   {
@@ -54,6 +53,7 @@ const SECTIONS: TabSection[] = [
       { key: "voice",       label: t("nav.modules.voice"),         icon: Mic },
       { key: "desktop",     label: t("nav.modules.desktop"),       icon: Monitor },
       { key: "deck",        label: t("nav.modules.deck"),          icon: LayoutGrid },
+      { key: "web",         label: t("nav.modules.web"),           icon: Globe },
     ],
   },
   {
@@ -68,7 +68,7 @@ const SECTIONS: TabSection[] = [
 // on xl (and so wants full available width). Single-section panels (identity,
 // super agent, devices, advanced) keep a cosier reading width so wide displays
 // don't blow form fields up to absurd widths.
-const WIDE_TABS = new Set<TabKey>(["engines", "telegram", "memory", "skills", "appearance", "voice"]);
+const WIDE_TABS = new Set<TabKey>(["engines", "telegram", "memory", "skills", "web", "voice"]);
 const PANELS: Record<TabKey, () => ReactElement> = {
   identity:    () => <IdentityPanel />,
@@ -81,7 +81,7 @@ const PANELS: Record<TabKey, () => ReactElement> = {
   voice:       () => <VoiceScreen />,
   deck:        () => <DeckScreen />,
   desktop:     () => <DesktopSettingsPanel />,
-  appearance:  () => <AppearancePanel />,
+  web:         () => <WebPanel />,
   advanced:    () => <AdvancedPanel />,
 };
@@ -121,7 +121,8 @@ function tabFromPath(pathname: string): TabKey {
     case "voice": return "voice";
     case "deck": return "deck";
     case "desktop": return "desktop";
-    case "appearance": return "appearance";
+    case "web": return "web";
+    case "appearance": return "web"; // legacy route → Web module
     case "config":
     case "advanced": return "advanced";
     default: return "identity";