@monkey-mini-app/panel 0.1.1 → 0.1.4

package/dist/index.js

@@ -1,6 +1,6 @@
-import { __publicField, applyThemeTo, clampPalette, PALETTES } from './chunk-X3QW77RD.js';
-export { PALETTES, applyThemeTo, clampMode, clampPalette, cssVars, parseThemeCss, runnerThemeCss, themeLabelFromCss, tokensOf } from './chunk-X3QW77RD.js';
-import * as React from 'react';
+import { __publicField, applyThemeTo, clampPalette, resolveMode, PALETTES, selectedPalette, GLOBAL_PALETTE_ID, LOCAL_PALETTE_ID, effectivePalette, themeCssVars, parseThemeCss, themeLabelFromCss, tokensOf } from './chunk-JAWSEXOV.js';
+export { GLOBAL_PALETTE_ID, LOCAL_PALETTE_ID, PALETTES, applyThemeTo, clampMode, clampPalette, cssVars, effectivePalette, parseThemeCss, resolveMode, runnerThemeCss, selectedPalette, themeCssVars, themeLabelFromCss, tokensOf } from './chunk-JAWSEXOV.js';
+import * as React4 from 'react';
 import { useSyncExternalStore } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { RefreshCw, LayoutGrid, Clock, Database, Settings as Settings$1, PanelRight, X } from 'lucide-react';
@@ -48,7 +48,113 @@ function isHostUnreachable(e) {
   return e instanceof HostUnreachableError;
 }
 function appFrameUrl(origin, appId, query) {
-  return `${origin}/app/${encodeURIComponent(appId)}?${new URLSearchParams(query).toString()}`;
+  const params = new URLSearchParams();
+  for (const key of ["theme", "palette", "dock"]) {
+    const value = query[key];
+    if (value) params.set(key, value);
+  }
+  return `${origin}/app/${encodeURIComponent(appId)}?${params.toString()}`;
+}
+function relayViewEval(origin, frames, query) {
+  if (!query.requestId || !query.appId) return;
+  if (frames.postViewEval(query)) return;
+  const body = { appId: query.appId, requestId: query.requestId, view: "not-open" };
+  fetch(`${origin.replace(/\/$/, "")}/api/app/${encodeURIComponent(query.appId)}/view/eval`, {
+    method: "POST",
+    headers: { "content-type": "application/json" },
+    body: JSON.stringify(body)
+  }).catch(() => {
+  });
+}
+function subscribeHostEvents(origin, handlers) {
+  if (typeof EventSource === "undefined") return () => {
+  };
+  let es = null;
+  const listen = (fn) => {
+    return (raw) => {
+      const e = raw;
+      let data;
+      try {
+        data = JSON.parse(e.data || "{}");
+      } catch {
+        return;
+      }
+      if (!data || typeof data !== "object") return;
+      fn(data);
+    };
+  };
+  try {
+    es = new EventSource(`${origin.replace(/\/$/, "")}/api/events`);
+    es.addEventListener(
+      "app:open",
+      listen((d) => {
+        if (typeof d.appId === "string") handlers.onOpen?.(d.appId, typeof d.title === "string" ? d.title : void 0);
+      })
+    );
+    es.addEventListener(
+      "app:reload",
+      listen((d) => {
+        if (typeof d.appId === "string") handlers.onReload?.(d.appId);
+      })
+    );
+    es.addEventListener(
+      "app:eval",
+      listen((d) => {
+        if (typeof d.requestId !== "string" || typeof d.appId !== "string") return;
+        handlers.onEval?.({
+          requestId: d.requestId,
+          appId: d.appId,
+          code: typeof d.code === "string" ? d.code : "",
+          maxBytes: typeof d.maxBytes === "number" ? d.maxBytes : 0
+        });
+      })
+    );
+    es.addEventListener(
+      "app:storage-notice",
+      listen((d) => {
+        if (typeof d.appId !== "string" || typeof d.table !== "string" || typeof d.prompt !== "string") return;
+        const heavyRaw = Array.isArray(d.heavy) ? d.heavy : [];
+        const heavy = heavyRaw.flatMap((h) => {
+          if (!isRecord(h) || typeof h.key !== "string" || typeof h.bytes !== "number") return [];
+          const kind = h.kind === "list" || h.kind === "map" || h.kind === "value" ? h.kind : "value";
+          return [{
+            key: h.key,
+            bytes: h.bytes,
+            kind,
+            entries: typeof h.entries === "number" ? h.entries : void 0
+          }];
+        });
+        handlers.onStorageNotice?.({
+          appId: d.appId,
+          table: d.table,
+          bytes: typeof d.bytes === "number" ? d.bytes : 0,
+          keys: typeof d.keys === "number" ? d.keys : 0,
+          heavy,
+          prompt: d.prompt
+        });
+      })
+    );
+  } catch {
+    return () => {
+    };
+  }
+  return () => {
+    try {
+      es?.close();
+    } catch {
+    }
+    es = null;
+  };
+}
+function parseLocalPalette(css) {
+  if (typeof css !== "string" || !css.trim()) return null;
+  const tokens = parseThemeCss(css, LOCAL_PALETTE_ID);
+  if (!tokens) return null;
+  return {
+    label: themeLabelFromCss(css, LOCAL_PALETTE_ID),
+    swatch: tokens.dark.primary || tokens.light.primary,
+    tokens
+  };
 }
 function parseAppTheme(raw) {
   if (raw === null) return null;
@@ -58,6 +164,31 @@ function parseAppTheme(raw) {
   if (!theme && !palette) return null;
   return { theme, palette };
 }
+function parseAbout(raw) {
+  const rec = isRecord(raw) ? raw : {};
+  const packages = [];
+  if (Array.isArray(rec.packages)) {
+    for (const p of rec.packages) {
+      if (!isRecord(p) || typeof p.name !== "string" || typeof p.version !== "string") continue;
+      packages.push({ name: p.name, version: p.version });
+    }
+  }
+  return {
+    adapter: typeof rec.adapter === "string" ? rec.adapter : "host",
+    env: typeof rec.env === "string" ? rec.env : "unknown",
+    packages
+  };
+}
+function parseUpdateCheck(raw) {
+  const rec = isRecord(raw) ? raw : {};
+  return {
+    name: typeof rec.name === "string" ? rec.name : "",
+    current: typeof rec.current === "string" ? rec.current : "",
+    latest: typeof rec.latest === "string" ? rec.latest : null,
+    updateAvailable: rec.updateAvailable === true,
+    error: typeof rec.error === "string" ? rec.error : void 0
+  };
+}
 function parseAppsResponse(raw) {
   if (!isRecord(raw) || !Array.isArray(raw.apps)) return [];
   const out = [];
@@ -70,7 +201,8 @@ function parseAppsResponse(raw) {
       acronym: typeof item.acronym === "string" ? item.acronym : void 0,
       commits: typeof item.commits === "number" ? item.commits : void 0,
       version: typeof item.version === "string" ? item.version : void 0,
-      theme: parseAppTheme(item.theme)
+      theme: parseAppTheme(item.theme),
+      localPalette: parseLocalPalette(item.localThemeCss)
     });
   }
   return out;
@@ -129,7 +261,36 @@ function parseStorageTables(raw) {
     out.push({
       name: row.name,
       size: typeof row.size === "number" ? row.size : void 0,
-      updatedAt: typeof row.updatedAt === "string" ? row.updatedAt : void 0
+      updatedAt: typeof row.updatedAt === "string" ? row.updatedAt : void 0,
+      keys: typeof row.keys === "number" ? row.keys : void 0
+    });
+  }
+  return out;
+}
+function parseStorageNotices(raw, appId) {
+  const rec = isRecord(raw) ? raw : {};
+  const list = Array.isArray(rec.notices) ? rec.notices : [];
+  const out = [];
+  for (const row of list) {
+    if (!isRecord(row) || typeof row.table !== "string" || typeof row.prompt !== "string") continue;
+    const heavyRaw = Array.isArray(row.heavy) ? row.heavy : [];
+    const heavy = heavyRaw.flatMap((h) => {
+      if (!isRecord(h) || typeof h.key !== "string" || typeof h.bytes !== "number") return [];
+      const kind = h.kind === "list" || h.kind === "map" || h.kind === "value" ? h.kind : "value";
+      return [{
+        key: h.key,
+        bytes: h.bytes,
+        kind,
+        entries: typeof h.entries === "number" ? h.entries : void 0
+      }];
+    });
+    out.push({
+      appId: typeof row.appId === "string" ? row.appId : appId,
+      table: row.table,
+      bytes: typeof row.bytes === "number" ? row.bytes : 0,
+      keys: typeof row.keys === "number" ? row.keys : 0,
+      heavy,
+      prompt: row.prompt
     });
   }
   return out;
@@ -204,12 +365,22 @@ function createRestPanelHost(opts) {
         opts.onConfigSaved?.(cfg);
       }
     },
+    about: {
+      load: async () => parseAbout(await readJson(`${origin()}/api/about`)),
+      checkUpdates: async () => parseUpdateCheck(await readJson(`${origin()}/api/updates`))
+    },
     history: {
       list: async (appId) => parseCommitList(await readJson(`${origin()}/api/apps/${encodeURIComponent(appId)}/history?limit=50`)),
       detail: async (appId, id) => parseCommitDetail(await readJson(`${origin()}/api/apps/${encodeURIComponent(appId)}/history/${encodeURIComponent(id)}`), id)
     },
     storage: {
-      listTables: async (appId) => parseStorageTables(await readJson(`${origin()}/api/apps/${encodeURIComponent(appId)}/storage`)),
+      listTables: async (appId) => {
+        const raw = await readJson(`${origin()}/api/apps/${encodeURIComponent(appId)}/storage`);
+        return {
+          tables: parseStorageTables(raw),
+          notices: parseStorageNotices(raw, appId)
+        };
+      },
       readTable: async (appId, name) => {
         const raw = await readJson(`${origin()}/api/apps/${encodeURIComponent(appId)}/storage/${encodeURIComponent(name)}`);
         return isRecord(raw) && "value" in raw ? raw.value : raw;
@@ -257,6 +428,8 @@ var initial = {
   cfgMsg: "",
   cfgVersion: 0,
   cfg: {},
+  about: null,
+  updateCheck: null,
   emptyText: void 0,
   capabilities: none,
   locale: "zh-CN",
@@ -270,7 +443,8 @@ var initial = {
   browseDetail: null,
   browseTable: null,
   browseTableValue: null,
-  browseOpenFile: null
+  browseOpenFile: null,
+  storageNotice: null
 };
 var state = { ...initial, capabilities: { ...none } };
 var listeners = /* @__PURE__ */ new Set();
@@ -306,7 +480,7 @@ function usePanelState() {
 
 // src/actions.ts
 function activeAppFrom(state2) {
-  const tab = state2.tabs.find((t) => t.kind === "app" && t.id === state2.active) || state2.tabs.find((t) => t.kind === "app");
+  const tab = state2.tabs.find((t) => t.kind === "app" && t.id === state2.active);
   return tab?.app ?? null;
 }
 function errorMessage(err) {
@@ -323,6 +497,17 @@ function pushAppTab(app) {
 function asCustomPalettes(value) {
   return value;
 }
+function loadCustomPalettes(host) {
+  if (!host.palettes) return;
+  host.palettes().then((list) => {
+    const custom = {};
+    for (const p of list) {
+      custom[p.id] = { label: p.label, swatch: p.swatch, tokens: p.tokens };
+    }
+    setPanelState({ customPalettes: custom });
+  }).catch(() => {
+  });
+}
 function createPanelActions(host, getRootEl, i18n) {
   setPanelState({ capabilities: capabilitiesOf(host), locale: i18n.locale, emptyText: host.emptyText });
   return {
@@ -337,14 +522,18 @@ function createPanelActions(host, getRootEl, i18n) {
       const tab = s.tabs.find((t) => t.id === id);
       setPanelState({
         tabs: s.tabs.filter((t) => t.id !== id),
-        active: s.active === id ? "all" : s.active
+        active: s.active === id ? "all" : s.active,
+        ...s.active === id ? { themeScope: "global" } : {}
       });
       if (tab?.app) host.frame.unmount(tab.app.id);
     },
     switchTab: (id) => {
-      setPanelState({ active: id });
       const s = getPanelState();
       const tab = s.tabs.find((t) => t.id === id && t.kind === "app");
+      setPanelState({
+        active: id,
+        ...!tab?.app ? { themeScope: "global" } : {}
+      });
       if (tab?.app) host.frame.mount(tab.app.id);
     },
     setDock: (next) => {
@@ -355,31 +544,38 @@ function createPanelActions(host, getRootEl, i18n) {
       }
     },
     setQuery: (q) => setPanelState({ query: q }),
-    toggleThemePop: () => setPanelState({ themePopOpen: !getPanelState().themePopOpen }),
+    toggleThemePop: () => {
+      const next = !getPanelState().themePopOpen;
+      setPanelState({ themePopOpen: next });
+      if (next) loadCustomPalettes(host);
+    },
     setAppearance: (next, scope) => {
       const s = getPanelState();
-      const theme = next.theme ? String(next.theme) : s.theme;
-      const palette = next.palette ? String(next.palette) : s.palette;
-      setPanelState({ theme, palette });
-      const root = getRootEl();
-      if (root) {
-        applyThemeTo(root, theme, palette, asCustomPalettes(s.customPalettes));
-      }
       if (scope === "app") {
-        const app = activeAppFrom(getPanelState());
+        const app = activeAppFrom(s);
         if (app && host.appTheme) {
-          const nextTheme = { theme, palette };
+          const base = app.theme ?? { theme: s.theme, palette: s.palette };
+          const nextTheme = {
+            theme: next.theme ? String(next.theme) : base.theme,
+            palette: next.palette ? String(next.palette) : base.palette
+          };
           host.appTheme.save(app.id, nextTheme).catch(() => {
           });
           const cur = getPanelState();
+          const patchApp = (a) => a.id === app.id ? { ...a, theme: nextTheme } : a;
           setPanelState({
-            apps: cur.apps.some((a) => a.id === app.id) ? cur.apps.map((a) => a.id === app.id ? { ...a, theme: nextTheme } : a) : [...cur.apps, { ...app, theme: nextTheme }],
-            tabs: cur.tabs.map(
-              (t) => t.app?.id === app.id ? { ...t, app: { ...t.app, theme: nextTheme } } : t
-            )
+            apps: cur.apps.some((a) => a.id === app.id) ? cur.apps.map(patchApp) : [...cur.apps, { ...app, theme: nextTheme }],
+            tabs: cur.tabs.map((t) => t.app?.id === app.id ? { ...t, app: { ...t.app, theme: nextTheme } } : t)
           });
         }
       } else {
+        const theme = next.theme ? String(next.theme) : s.theme;
+        const palette = next.palette ? String(next.palette) : s.palette;
+        setPanelState({ theme, palette });
+        const root = getRootEl();
+        if (root) {
+          applyThemeTo(root, theme, palette, asCustomPalettes(s.customPalettes));
+        }
         host.persistTheme?.(theme, palette);
       }
       host.frame.syncEnv?.();
@@ -402,23 +598,71 @@ function createPanelActions(host, getRootEl, i18n) {
     },
     getActiveApp: () => activeAppFrom(getPanelState()),
     toggleSettings: (open) => {
-      setPanelState({ settingsOpen: open, cfgMsg: open ? "" : getPanelState().cfgMsg });
+      setPanelState({
+        settingsOpen: open,
+        cfgMsg: open ? "" : getPanelState().cfgMsg,
+        updateCheck: open ? null : getPanelState().updateCheck
+      });
       if (open && host.config) {
         host.config.load().then((cfg) => {
           setPanelState({ cfg, cfgVersion: getPanelState().cfgVersion + 1 });
         }).catch(() => {
         });
       }
+      if (open && host.about) {
+        host.about.load().then((about) => setPanelState({ about })).catch(() => setPanelState({ about: null }));
+      }
     },
     getCfg: () => getPanelState().cfg,
+    checkUpdates: () => {
+      if (!host.about) return;
+      setPanelState({
+        updateCheck: {
+          name: "",
+          current: "",
+          latest: null,
+          updateAvailable: false,
+          status: "loading"
+        }
+      });
+      host.about.checkUpdates().then((check) => setPanelState({ updateCheck: { ...check, status: "done" } })).catch(
+        (err) => setPanelState({
+          updateCheck: {
+            name: "",
+            current: "",
+            latest: null,
+            updateAvailable: false,
+            status: "done",
+            error: errorMessage(err)
+          }
+        })
+      );
+    },
     saveHostConfig: (form) => {
       if (!host.config) return;
       host.config.save(form).then(() => {
+        const style = form.cardStyle || getPanelState().cardStyle;
+        const theme = form.theme || getPanelState().theme;
+        const palette = form.palette || getPanelState().palette;
         setPanelState({
           cfg: { ...form },
           cfgMsg: i18n.t("config.saved"),
-          cfgVersion: getPanelState().cfgVersion + 1
+          cfgVersion: getPanelState().cfgVersion + 1,
+          cardStyle: style,
+          theme,
+          palette
         });
+        const root = getRootEl();
+        if (root) {
+          applyThemeTo(root, theme, palette, asCustomPalettes(getPanelState().customPalettes));
+          root.setAttribute("data-cardstyle", style);
+        }
+        host.persistTheme?.(theme, palette);
+        host.frame.syncEnv?.();
+        try {
+          localStorage.setItem("mma-card-style", style);
+        } catch {
+        }
       }).catch((e) => {
         setPanelState({ cfgMsg: i18n.t("config.error", { message: errorMessage(e) }) });
       });
@@ -452,11 +696,22 @@ function createPanelActions(host, getRootEl, i18n) {
           setPanelState({ browseList: list, browseLoading: false });
         }).catch((e) => setPanelState({ browseError: errorMessage(e), browseLoading: false }));
       } else if (host.storage) {
-        host.storage.listTables(app.id).then((list) => {
-          setPanelState({ browseList: list, browseLoading: false });
+        host.storage.listTables(app.id).then(({ tables, notices }) => {
+          const notice = notices[0] ?? null;
+          setPanelState({
+            browseList: tables,
+            browseLoading: false,
+            ...notice ? { storageNotice: notice } : {}
+          });
         }).catch((e) => setPanelState({ browseError: errorMessage(e), browseLoading: false }));
       }
     },
+    dismissStorageNotice: () => {
+      setPanelState({ storageNotice: null });
+    },
+    applyStorageNotice: (notice) => {
+      setPanelState({ storageNotice: notice });
+    },
     loadCommitDetail: (id) => {
       const s = getPanelState();
       if (!host.history || !s.browseAppId) return;
@@ -515,7 +770,14 @@ function createPanelActions(host, getRootEl, i18n) {
         });
       });
     },
-    setCardStyle: (v) => setPanelState({ cardStyle: v })
+    setCardStyle: (v) => {
+      setPanelState({ cardStyle: v });
+      getRootEl()?.setAttribute("data-cardstyle", v);
+      try {
+        localStorage.setItem("mma-card-style", v);
+      } catch {
+      }
+    }
   };
 }
 function defaultHideThemePop() {
@@ -526,8 +788,8 @@ function defaultHideThemePop() {
 function clampPaletteId(v) {
   return clampPalette(v);
 }
-var PanelActionsContext = React.createContext(null);
-var PanelI18nContext = React.createContext(null);
+var PanelActionsContext = React4.createContext(null);
+var PanelI18nContext = React4.createContext(null);
 function PanelProvider({
   actions,
   i18n,
@@ -536,12 +798,12 @@ function PanelProvider({
   return /* @__PURE__ */ jsx(PanelI18nContext.Provider, { value: i18n, children: /* @__PURE__ */ jsx(PanelActionsContext.Provider, { value: actions, children }) });
 }
 function usePanelActions() {
-  const ctx = React.useContext(PanelActionsContext);
+  const ctx = React4.useContext(PanelActionsContext);
   if (!ctx) throw new Error("usePanelActions must be used inside <PanelProvider>");
   return ctx;
 }
 function usePanelI18n() {
-  const ctx = React.useContext(PanelI18nContext);
+  const ctx = React4.useContext(PanelI18nContext);
   if (!ctx) throw new Error("usePanelI18n must be used inside <PanelProvider>");
   return ctx;
 }
@@ -601,6 +863,7 @@ function AppCard({ app }) {
     {
       type: "button",
       className: "mma-card",
+      "data-app-id": app.id,
       style: { "--h": hue(app.id) },
       onClick: () => actions.openAppTab(app),
       children: [
@@ -629,6 +892,7 @@ function AppRow({ app }) {
     {
       type: "button",
       className: "mma-row",
+      "data-app-id": app.id,
       style: { "--h": hue(app.id) },
       onClick: () => actions.openAppTab(app),
       children: [
@@ -736,26 +1000,60 @@ function CommitItem({ c }) {
     ] })
   ] });
 }
+function humanBytes(n, t) {
+  if (n < 1024) return `${n} B`;
+  if (n < 1024 * 1024) return t("browse.sizeKb", { value: (n / 1024).toFixed(1) });
+  return t("browse.sizeMb", { value: (n / (1024 * 1024)).toFixed(1) });
+}
 function StorageItem({ table }) {
   const actions = usePanelActions();
+  const { t } = usePanelI18n();
   return /* @__PURE__ */ jsxs("button", { type: "button", className: "mma-bitem", onClick: () => actions.loadTable(table.name), children: [
     /* @__PURE__ */ jsx("b", { children: table.name }),
     /* @__PURE__ */ jsxs("span", { className: "meta", children: [
-      /* @__PURE__ */ jsxs("span", { children: [
-        table.size || 0,
-        " B"
-      ] }),
+      typeof table.keys === "number" ? /* @__PURE__ */ jsx("span", { children: t("browse.entries", { count: table.keys }) }) : null,
+      /* @__PURE__ */ jsx("span", { children: humanBytes(table.size || 0, t) }),
       /* @__PURE__ */ jsx("span", { children: table.updatedAt || "" })
     ] })
   ] });
 }
+function StorageNoticeBanner() {
+  const s = usePanelState();
+  const actions = usePanelActions();
+  const { t } = usePanelI18n();
+  const notice = s.storageNotice;
+  const [copied, setCopied] = React4.useState(false);
+  if (!notice) return null;
+  if (s.browseAppId && notice.appId !== s.browseAppId) return null;
+  const top = notice.heavy[0];
+  const summary = top ? t("browse.noticeTop", { key: top.key, size: humanBytes(top.bytes, t) }) : "";
+  const copyPrompt = async () => {
+    try {
+      await navigator.clipboard.writeText(notice.prompt);
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 1500);
+    } catch {
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "mma-storage-notice", role: "status", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mma-storage-notice-body", children: [
+      /* @__PURE__ */ jsx("b", { children: t("browse.noticeTitle", { table: notice.table, size: humanBytes(notice.bytes, t) }) }),
+      /* @__PURE__ */ jsx("p", { children: t("browse.noticeBody") }),
+      summary ? /* @__PURE__ */ jsx("p", { className: "mma-storage-notice-top", children: summary }) : null
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "mma-storage-notice-actions", children: [
+      /* @__PURE__ */ jsx("button", { type: "button", className: "mma-storage-notice-copy", onClick: () => void copyPrompt(), children: copied ? t("browse.noticeCopied") : t("browse.noticeCopy") }),
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: () => actions.dismissStorageNotice(), children: t("browse.noticeDismiss") })
+    ] })
+  ] });
+}
 function CommitDetail() {
   const s = usePanelState();
   const actions = usePanelActions();
   const { t } = usePanelI18n();
-  const [msgExpanded, setMsgExpanded] = React.useState(false);
+  const [msgExpanded, setMsgExpanded] = React4.useState(false);
   const d = s.browseDetail;
-  React.useEffect(() => {
+  React4.useEffect(() => {
     setMsgExpanded(false);
   }, [d?.id]);
   if (!d) return null;
@@ -843,7 +1141,10 @@ function Browse() {
       ) })
     ] });
   }
-  return /* @__PURE__ */ jsx("div", { className: "mma-browse", id: "mma-browse", "data-open": "1", children: /* @__PURE__ */ jsx("div", { className: "mma-browse-body", id: "mma-browse-body", children: content }) });
+  return /* @__PURE__ */ jsx("div", { className: "mma-browse", id: "mma-browse", "data-open": "1", children: /* @__PURE__ */ jsxs("div", { className: "mma-browse-body", id: "mma-browse-body", children: [
+    s.browseKind === "storage" ? /* @__PURE__ */ jsx(StorageNoticeBanner, {}) : null,
+    content
+  ] }) });
 }
 function Modal() {
   const s = usePanelState();
@@ -860,66 +1161,676 @@ function Modal() {
     ] })
   ] }) });
 }
+function OptionCardGrid({
+  options,
+  value,
+  onChange,
+  columns = 3,
+  "aria-label": ariaLabel,
+  className,
+  trailing
+}) {
+  const refs = React4.useRef([]);
+  const values = options.map((o) => o.value);
+  const focusAt = (index) => {
+    const el = refs.current[index];
+    el?.focus();
+  };
+  const onKeyDown = (e, index) => {
+    const enabled = options.map((o, i) => ({ o, i })).filter((x) => !x.o.disabled);
+    if (!enabled.length) return;
+    const pos = enabled.findIndex((x) => x.i === index);
+    if (pos < 0) return;
+    let nextPos = pos;
+    if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+      e.preventDefault();
+      nextPos = (pos + 1) % enabled.length;
+    } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+      e.preventDefault();
+      nextPos = (pos - 1 + enabled.length) % enabled.length;
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      nextPos = 0;
+    } else if (e.key === "End") {
+      e.preventDefault();
+      nextPos = enabled.length - 1;
+    } else {
+      return;
+    }
+    const next = enabled[nextPos];
+    if (!next) return;
+    focusAt(next.i);
+    if (!next.o.disabled) onChange(next.o.value);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `mma-optgrid mma-optgrid--${columns}${className ? ` ${className}` : ""}`,
+      role: "radiogroup",
+      "aria-label": ariaLabel,
+      children: [
+        options.map((opt, index) => {
+          const checked = value === opt.value;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              role: "radio",
+              "aria-checked": checked,
+              "aria-label": opt.hint ? `${opt.label}. ${opt.hint}` : opt.label,
+              disabled: opt.disabled,
+              tabIndex: checked || !value && index === 0 ? 0 : -1,
+              className: "mma-optcard",
+              "data-on": checked ? "1" : "0",
+              ref: (el) => {
+                refs.current[index] = el;
+              },
+              onClick: () => {
+                if (!opt.disabled) onChange(opt.value);
+              },
+              onKeyDown: (e) => onKeyDown(e, index),
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "mma-optcard-preview", "aria-hidden": "true", children: opt.preview }),
+                /* @__PURE__ */ jsx("span", { className: "mma-optcard-label", children: opt.label }),
+                checked ? /* @__PURE__ */ jsx("span", { className: "mma-optcard-check", "aria-hidden": "true", children: "\u2713" }) : null
+              ]
+            },
+            opt.value
+          );
+        }),
+        trailing ? /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: "mma-optcard mma-optcard--ghost",
+            disabled: trailing.disabled !== false,
+            title: trailing.hint,
+            onClick: () => trailing.onClick?.(),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "mma-optcard-preview mma-optcard-preview--plus", "aria-hidden": "true", children: "+" }),
+              /* @__PURE__ */ jsx("span", { className: "mma-optcard-label", children: trailing.label })
+            ]
+          }
+        ) : null,
+        /* @__PURE__ */ jsx("span", { hidden: true, children: values.join(",") })
+      ]
+    }
+  );
+}
+var SECTIONS = ["appearance", "network", "model", "about"];
+var DEFAULTS = {
+  hostPort: "17880",
+  provider: "",
+  model: "",
+  locale: "zh-CN",
+  theme: "light",
+  palette: "default",
+  cardStyle: "stamp"
+};
+function shortPkg(name) {
+  return name.replace(/^@monkey-mini-app\//, "");
+}
+function validatePort(raw) {
+  const trimmed = raw.trim();
+  if (!trimmed) return "empty";
+  if (!/^\d+$/.test(trimmed)) return "nan";
+  const n = Number(trimmed);
+  if (!Number.isInteger(n) || n < 1024 || n > 65535) return "range";
+  return null;
+}
+function ThemePreview({ mode }) {
+  if (mode === "system") {
+    return /* @__PURE__ */ jsxs("span", { className: "mma-preview-theme mma-preview-theme--system", children: [
+      /* @__PURE__ */ jsx("span", { className: "mma-preview-theme-half mma-preview-theme-half--light" }),
+      /* @__PURE__ */ jsx("span", { className: "mma-preview-theme-half mma-preview-theme-half--dark" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("span", { className: `mma-preview-theme mma-preview-theme--${mode}`, children: [
+    /* @__PURE__ */ jsx("span", { className: "mma-preview-bar" }),
+    /* @__PURE__ */ jsx("span", { className: "mma-preview-bar" })
+  ] });
+}
+function PalettePreview({ id, mode }) {
+  const t = tokensOf(id, mode);
+  return /* @__PURE__ */ jsxs("span", { className: "mma-preview-swatches", children: [
+    /* @__PURE__ */ jsx("span", { style: { background: t.primary } }),
+    /* @__PURE__ */ jsx("span", { style: { background: t.secondary } }),
+    /* @__PURE__ */ jsx("span", { style: { background: t.bg } })
+  ] });
+}
+function CardStylePreview({ style }) {
+  return /* @__PURE__ */ jsx("span", { className: `mma-preview-cardstyle mma-preview-cardstyle--${style}` });
+}
 function Settings() {
   const s = usePanelState();
   const actions = usePanelActions();
   const { t } = usePanelI18n();
-  const [form, setForm] = React.useState({});
-  React.useEffect(() => {
+  const [form, setForm] = React4.useState({});
+  const [snapshot, setSnapshot] = React4.useState(null);
+  const [section, setSection] = React4.useState("appearance");
+  const [portTouched, setPortTouched] = React4.useState(false);
+  const [confirm, setConfirm] = React4.useState(null);
+  const [lastSavedAt, setLastSavedAt] = React4.useState(null);
+  const rootRef = React4.useRef(null);
+  const contentRef = React4.useRef(null);
+  const sectionRefs = React4.useRef({});
+  const dirtyCountRef = React4.useRef(0);
+  const confirmRef = React4.useRef(confirm);
+  confirmRef.current = confirm;
+  const [wide, setWide] = React4.useState(false);
+  React4.useEffect(() => {
+    if (!s.settingsOpen) return;
+    const next = s.cfg && Object.keys(s.cfg).length ? { ...s.cfg } : { ...actions.getCfg() };
+    const snap = {
+      hostPort: next.hostPort || "",
+      provider: next.provider || "",
+      model: next.model || "",
+      theme: next.theme || s.theme || "light",
+      palette: next.palette || s.palette || "default",
+      cardStyle: next.cardStyle || s.cardStyle || "stamp",
+      locale: next.locale || next.chatLanguage || "zh-CN"
+    };
+    setForm({ ...next, ...snap, chatLanguage: snap.locale });
+    setSnapshot(snap);
+    setPortTouched(false);
+    setConfirm(null);
+    setSection("appearance");
+  }, [s.settingsOpen, s.cfgVersion, s.cfg, actions, s.theme, s.palette, s.cardStyle]);
+  React4.useEffect(() => {
+    if (!s.settingsOpen) return;
+    const host = rootRef.current?.closest("#mma-host") ?? rootRef.current;
+    if (!host || typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver((entries) => {
+      const w = entries[0]?.contentRect.width ?? 0;
+      setWide(w >= 720);
+    });
+    ro.observe(host);
+    return () => ro.disconnect();
+  }, [s.settingsOpen]);
+  React4.useEffect(() => {
     if (!s.settingsOpen) return;
-    setForm(s.cfg && Object.keys(s.cfg).length ? s.cfg : actions.getCfg());
-  }, [s.settingsOpen, s.cfgVersion, s.cfg, actions]);
+    const root = contentRef.current;
+    if (!root) return;
+    const nodes = SECTIONS.map((id) => sectionRefs.current[id]).filter(Boolean);
+    if (!nodes.length) return;
+    const obs = new IntersectionObserver(
+      (entries) => {
+        const visible = entries.filter((e) => e.isIntersecting).sort((a, b) => b.intersectionRatio - a.intersectionRatio)[0];
+        const id = visible?.target.getAttribute("data-section");
+        if (id) setSection(id);
+      },
+      { root, threshold: [0.25, 0.5, 0.75], rootMargin: "-20% 0px -55% 0px" }
+    );
+    for (const n of nodes) obs.observe(n);
+    return () => obs.disconnect();
+  }, [s.settingsOpen, form]);
+  React4.useEffect(() => {
+    if (!s.settingsOpen) return;
+    const onKey = (e) => {
+      if (e.key !== "Escape") return;
+      e.preventDefault();
+      if (confirmRef.current) {
+        setConfirm(null);
+        return;
+      }
+      if (dirtyCountRef.current > 0) setConfirm("close");
+      else actions.toggleSettings(false);
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [s.settingsOpen, actions]);
   if (!s.capabilities.config) return null;
-  const set = (k) => (e) => setForm((prev) => ({ ...prev, [k]: e.target.value }));
-  return /* @__PURE__ */ jsxs("div", { className: "mma-settings", id: "mma-settings", "data-open": s.settingsOpen ? "1" : "0", children: [
-    /* @__PURE__ */ jsxs("div", { className: "mma-settings-head", children: [
-      /* @__PURE__ */ jsx("h3", { children: t("settings.title") }),
-      /* @__PURE__ */ jsx("button", { type: "button", className: "mma-iconbtn", id: "mma-cfg-close", onClick: () => actions.toggleSettings(false), children: "\u2715" })
-    ] }),
-    /* @__PURE__ */ jsxs("label", { children: [
-      t("settings.hostPort"),
-      /* @__PURE__ */ jsx("input", { id: "mma-cfg-port", type: "number", value: form.hostPort || "", onChange: set("hostPort") })
-    ] }),
-    /* @__PURE__ */ jsxs("label", { children: [
-      t("settings.language"),
-      /* @__PURE__ */ jsxs("select", { id: "mma-cfg-lang", value: form.locale || form.chatLanguage || "zh-CN", onChange: set("locale"), children: [
-        /* @__PURE__ */ jsx("option", { value: "zh-CN", children: t("settings.langZh") }),
-        /* @__PURE__ */ jsx("option", { value: "en", children: t("settings.langEn") })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("label", { children: [
-      t("settings.theme"),
-      /* @__PURE__ */ jsxs("select", { id: "mma-cfg-theme", value: form.theme || "light", onChange: set("theme"), children: [
-        /* @__PURE__ */ jsx("option", { value: "light", children: t("theme.light") }),
-        /* @__PURE__ */ jsx("option", { value: "dark", children: t("theme.dark") })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("label", { children: [
-      t("settings.palette"),
-      /* @__PURE__ */ jsx("select", { id: "mma-cfg-palette", value: form.palette || "default", onChange: set("palette"), children: PALETTES.map((p) => /* @__PURE__ */ jsx("option", { value: p.id, children: t(`palette.${p.id}`) }, p.id)) })
-    ] }),
-    /* @__PURE__ */ jsxs("label", { children: [
-      t("settings.cardStyle"),
-      /* @__PURE__ */ jsxs("select", { id: "mma-cfg-cardstyle", value: form.cardStyle || "stamp", onChange: set("cardStyle"), children: [
-        /* @__PURE__ */ jsx("option", { value: "stamp", children: t("settings.cardStamp") }),
-        /* @__PURE__ */ jsx("option", { value: "etch", children: t("settings.cardEtch") }),
-        /* @__PURE__ */ jsx("option", { value: "hero", children: t("settings.cardHero") }),
-        /* @__PURE__ */ jsx("option", { value: "list", children: t("settings.cardList") })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("label", { children: [
-      t("settings.llmProvider"),
-      /* @__PURE__ */ jsx("input", { id: "mma-cfg-provider", value: form.provider || "", onChange: set("provider") })
-    ] }),
-    /* @__PURE__ */ jsxs("label", { children: [
-      t("settings.llmModel"),
-      /* @__PURE__ */ jsx("input", { id: "mma-cfg-model", value: form.model || "", onChange: set("model") })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "mma-settings-actions", children: [
-      /* @__PURE__ */ jsx("button", { type: "button", className: "mma-textbtn", id: "mma-cfg-save", onClick: () => actions.saveHostConfig(form), children: t("settings.save") }),
-      /* @__PURE__ */ jsx("span", { className: "mma-settings-msg", id: "mma-cfg-msg", children: s.cfgMsg })
-    ] })
-  ] });
+  const themeMode = form.theme === "system" || form.theme === "dark" || form.theme === "light" ? form.theme : s.theme === "system" || s.theme === "dark" || s.theme === "light" ? s.theme : "light";
+  const resolvedMode = resolveMode(themeMode === "system" ? "system" : themeMode);
+  const palette = form.palette || s.palette || "default";
+  const cardStyle = form.cardStyle || s.cardStyle || "stamp";
+  const locale = form.locale || form.chatLanguage || "zh-CN";
+  const dirty = {
+    hostPort: form.hostPort || "",
+    provider: form.provider || "",
+    model: form.model || "",
+    theme: themeMode,
+    palette,
+    cardStyle,
+    locale
+  };
+  const dirtyKeys = ["hostPort", "provider", "model", "theme", "palette", "cardStyle", "locale"].filter((k) => snapshot != null && dirty[k] !== snapshot[k]);
+  const dirtyCount = dirtyKeys.length;
+  dirtyCountRef.current = dirtyCount;
+  const portDirty = snapshot != null && dirty.hostPort !== snapshot.hostPort;
+  const portErrorKey = portTouched || portDirty ? validatePort(form.hostPort || "") : null;
+  const portError = portErrorKey === "empty" ? t("settings.portEmpty") : portErrorKey === "nan" ? t("settings.portNan") : portErrorKey === "range" ? t("settings.portRange") : null;
+  const canSave = dirtyCount > 0 && !portError;
+  const hostUrl = `http://127.0.0.1:${(form.hostPort || "").trim() || "\u2014"}`;
+  const paletteLabel = t(`palette.${clampPalette(palette)}`);
+  const versionLabel = s.about?.packages?.[0]?.version ?? s.about?.packages?.find((p) => p.name.includes("dsh"))?.version ?? "\u2014";
+  const patch = (partial) => setForm((prev) => ({ ...prev, ...partial }));
+  const paintPreview = (next) => {
+    const host = document.getElementById("mma-host");
+    if (!host) return;
+    const theme = next.theme ?? themeMode;
+    const pal = next.palette ?? palette;
+    const style = next.cardStyle ?? cardStyle;
+    applyThemeTo(host, theme, pal, s.customPalettes);
+    host.setAttribute("data-cardstyle", style);
+  };
+  const previewAppearance = (partial) => {
+    const nextTheme = partial.theme ?? themeMode;
+    const nextPalette = partial.palette ?? palette;
+    const nextCard = partial.cardStyle ?? cardStyle;
+    paintPreview({ theme: nextTheme, palette: nextPalette, cardStyle: nextCard });
+    patch({
+      ...partial.theme != null ? { theme: partial.theme } : {},
+      ...partial.palette != null ? { palette: partial.palette } : {},
+      ...partial.cardStyle != null ? { cardStyle: partial.cardStyle } : {},
+      ...partial.locale != null ? { locale: partial.locale, chatLanguage: partial.locale } : {}
+    });
+  };
+  const scrollTo = (id) => {
+    setSection(id);
+    sectionRefs.current[id]?.scrollIntoView({ behavior: "smooth", block: "start" });
+  };
+  const discard = () => {
+    if (!snapshot) return;
+    patch({ ...snapshot, chatLanguage: snapshot.locale });
+    paintPreview({
+      theme: snapshot.theme,
+      palette: snapshot.palette,
+      cardStyle: snapshot.cardStyle
+    });
+    setPortTouched(false);
+  };
+  const requestClose = () => {
+    if (dirtyCount > 0) setConfirm("close");
+    else actions.toggleSettings(false);
+  };
+  const restoreDefaults = () => {
+    previewAppearance({
+      theme: DEFAULTS.theme,
+      palette: DEFAULTS.palette,
+      cardStyle: DEFAULTS.cardStyle,
+      locale: DEFAULTS.locale
+    });
+    patch({
+      hostPort: DEFAULTS.hostPort,
+      provider: DEFAULTS.provider,
+      model: DEFAULTS.model,
+      locale: DEFAULTS.locale,
+      chatLanguage: DEFAULTS.locale,
+      theme: DEFAULTS.theme,
+      palette: DEFAULTS.palette,
+      cardStyle: DEFAULTS.cardStyle
+    });
+    setPortTouched(true);
+    setConfirm(null);
+  };
+  const save = () => {
+    if (!canSave) return;
+    const committed = { ...dirty };
+    actions.saveHostConfig({
+      ...form,
+      theme: committed.theme,
+      palette: committed.palette,
+      cardStyle: committed.cardStyle,
+      locale: committed.locale,
+      chatLanguage: committed.locale
+    });
+    actions.setAppearance(
+      { theme: committed.theme, palette: committed.palette },
+      "global"
+    );
+    actions.setCardStyle(committed.cardStyle);
+    setSnapshot(committed);
+    const now = /* @__PURE__ */ new Date();
+    setLastSavedAt(
+      `${String(now.getHours()).padStart(2, "0")}:${String(now.getMinutes()).padStart(2, "0")}`
+    );
+  };
+  const copyUrl = async () => {
+    try {
+      await navigator.clipboard.writeText(hostUrl);
+    } catch {
+    }
+  };
+  const sectionLabel = (id) => id === "appearance" ? t("settings.sectionAppearance") : id === "network" ? t("settings.sectionNetwork") : id === "model" ? t("settings.sectionModel") : t("settings.sectionAbout");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      className: "mma-settings",
+      id: "mma-settings",
+      "data-open": s.settingsOpen ? "1" : "0",
+      "data-wide": wide ? "1" : "0",
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: "mma-settings-head", children: [
+          /* @__PURE__ */ jsxs("div", { className: "mma-settings-head-left", children: [
+            /* @__PURE__ */ jsx("span", { className: "mma-settings-head-icon", "aria-hidden": "true", children: "\u2699" }),
+            /* @__PURE__ */ jsx("h3", { children: t("settings.title") })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "mma-settings-head-right", children: [
+            /* @__PURE__ */ jsxs("span", { className: "mma-settings-meta", children: [
+              versionLabel,
+              " \xB7 ",
+              paletteLabel
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "mma-iconbtn",
+                id: "mma-cfg-close",
+                "aria-label": t("settings.close"),
+                onClick: requestClose,
+                children: "\u2715"
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "mma-settings-body", children: [
+          /* @__PURE__ */ jsxs("nav", { className: "mma-settings-rail", role: "tablist", "aria-label": t("settings.sectionsAria"), children: [
+            /* @__PURE__ */ jsx("div", { className: "mma-settings-rail-title", children: t("settings.sectionNav") }),
+            SECTIONS.map((id) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                role: "tab",
+                "aria-current": section === id ? "page" : void 0,
+                "data-on": section === id ? "1" : "0",
+                className: "mma-settings-rail-item",
+                onClick: () => scrollTo(id),
+                children: sectionLabel(id)
+              },
+              id
+            ))
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "mma-settings-content", ref: contentRef, children: [
+            /* @__PURE__ */ jsxs(
+              "section",
+              {
+                className: "mma-settings-section",
+                "data-section": "appearance",
+                ref: (el) => {
+                  sectionRefs.current.appearance = el;
+                },
+                children: [
+                  /* @__PURE__ */ jsx("h4", { children: t("settings.sectionAppearance") }),
+                  /* @__PURE__ */ jsxs("div", { className: "mma-settings-field", children: [
+                    /* @__PURE__ */ jsx("label", { className: "mma-settings-label", htmlFor: "mma-cfg-lang-seg", children: t("settings.language") }),
+                    /* @__PURE__ */ jsx("div", { className: "mma-seg", id: "mma-cfg-lang-seg", role: "group", "aria-label": t("settings.language"), children: [
+                      ["zh-CN", t("settings.langZh")],
+                      ["en", t("settings.langEn")]
+                    ].map(([id, label]) => /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        "data-on": locale === id ? "1" : "0",
+                        onClick: () => previewAppearance({ locale: id }),
+                        children: label
+                      },
+                      id
+                    )) })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "mma-settings-field", children: [
+                    /* @__PURE__ */ jsx("span", { className: "mma-settings-label", children: t("settings.theme") }),
+                    /* @__PURE__ */ jsx(
+                      OptionCardGrid,
+                      {
+                        "aria-label": t("settings.theme"),
+                        columns: 3,
+                        value: themeMode,
+                        onChange: (v) => previewAppearance({ theme: v }),
+                        options: ["system", "light", "dark"].map((mode) => ({
+                          value: mode,
+                          label: t(`theme.${mode}`),
+                          preview: /* @__PURE__ */ jsx(ThemePreview, { mode })
+                        }))
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "mma-settings-field", children: [
+                    /* @__PURE__ */ jsx("span", { className: "mma-settings-label", children: t("settings.palette") }),
+                    /* @__PURE__ */ jsx(
+                      OptionCardGrid,
+                      {
+                        "aria-label": t("settings.palette"),
+                        columns: 4,
+                        value: palette,
+                        onChange: (v) => previewAppearance({ palette: v }),
+                        options: PALETTES.map((p) => ({
+                          value: p.id,
+                          label: t(`palette.${p.id}`),
+                          preview: /* @__PURE__ */ jsx(PalettePreview, { id: p.id, mode: resolvedMode })
+                        }))
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "mma-settings-field", children: [
+                    /* @__PURE__ */ jsx("span", { className: "mma-settings-label", children: t("settings.cardStyle") }),
+                    /* @__PURE__ */ jsx(
+                      OptionCardGrid,
+                      {
+                        "aria-label": t("settings.cardStyle"),
+                        columns: 3,
+                        value: cardStyle,
+                        onChange: (v) => previewAppearance({ cardStyle: v }),
+                        options: [
+                          ["stamp", t("settings.cardStamp")],
+                          ["etch", t("settings.cardEtch")],
+                          ["hero", t("settings.cardHero")],
+                          ["list", t("settings.cardList")]
+                        ].map(([value, label]) => ({
+                          value,
+                          label,
+                          preview: /* @__PURE__ */ jsx(CardStylePreview, { style: value })
+                        }))
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx("p", { className: "mma-settings-hint", children: t("settings.appearanceHint") })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx("hr", { className: "mma-settings-rule" }),
+            /* @__PURE__ */ jsxs(
+              "section",
+              {
+                className: "mma-settings-section",
+                "data-section": "network",
+                ref: (el) => {
+                  sectionRefs.current.network = el;
+                },
+                children: [
+                  /* @__PURE__ */ jsx("h4", { children: t("settings.sectionNetwork") }),
+                  /* @__PURE__ */ jsxs("div", { className: `mma-settings-field mma-settings-field--row${portError ? " is-error" : ""}`, children: [
+                    /* @__PURE__ */ jsx("label", { className: "mma-settings-label", htmlFor: "mma-cfg-port", children: t("settings.hostPort") }),
+                    /* @__PURE__ */ jsxs("div", { className: "mma-settings-control", children: [
+                      /* @__PURE__ */ jsxs("div", { className: "mma-port-row", children: [
+                        /* @__PURE__ */ jsx("span", { className: "mma-port-addon", "aria-hidden": "true", children: ":" }),
+                        /* @__PURE__ */ jsx(
+                          "input",
+                          {
+                            id: "mma-cfg-port",
+                            type: "text",
+                            inputMode: "numeric",
+                            autoComplete: "off",
+                            value: form.hostPort || "",
+                            "aria-invalid": !!portError,
+                            "aria-describedby": "mma-cfg-port-hint",
+                            onChange: (e) => {
+                              setPortTouched(true);
+                              patch({ hostPort: e.target.value });
+                            },
+                            onBlur: () => setPortTouched(true)
+                          }
+                        ),
+                        /* @__PURE__ */ jsx("code", { className: "mma-port-url", children: hostUrl }),
+                        /* @__PURE__ */ jsx("button", { type: "button", className: "mma-ghostbtn", onClick: () => void copyUrl(), children: t("settings.copyUrl") }),
+                        /* @__PURE__ */ jsx("a", { className: "mma-ghostbtn", href: hostUrl, target: "_blank", rel: "noreferrer", children: t("settings.openUrl") })
+                      ] }),
+                      /* @__PURE__ */ jsx("p", { className: "mma-settings-hint", id: "mma-cfg-port-hint", role: portError ? "alert" : void 0, children: portError ?? t("settings.portHint") })
+                    ] })
+                  ] })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx("hr", { className: "mma-settings-rule" }),
+            /* @__PURE__ */ jsxs(
+              "section",
+              {
+                className: "mma-settings-section",
+                "data-section": "model",
+                ref: (el) => {
+                  sectionRefs.current.model = el;
+                },
+                children: [
+                  /* @__PURE__ */ jsx("h4", { children: t("settings.sectionModel") }),
+                  /* @__PURE__ */ jsxs("div", { className: "mma-settings-field mma-settings-field--row", children: [
+                    /* @__PURE__ */ jsx("label", { className: "mma-settings-label", htmlFor: "mma-cfg-provider", children: t("settings.llmProvider") }),
+                    /* @__PURE__ */ jsxs("div", { className: "mma-settings-control mma-settings-control--model", children: [
+                      /* @__PURE__ */ jsx(
+                        "input",
+                        {
+                          id: "mma-cfg-provider",
+                          list: "mma-cfg-provider-list",
+                          placeholder: t("settings.providerPlaceholder"),
+                          value: form.provider || "",
+                          onChange: (e) => patch({ provider: e.target.value, model: "" })
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs("datalist", { id: "mma-cfg-provider-list", children: [
+                        /* @__PURE__ */ jsx("option", { value: "openai" }),
+                        /* @__PURE__ */ jsx("option", { value: "anthropic" }),
+                        /* @__PURE__ */ jsx("option", { value: "deepseek" })
+                      ] })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "mma-settings-field mma-settings-field--row", children: [
+                    /* @__PURE__ */ jsx("label", { className: "mma-settings-label", htmlFor: "mma-cfg-model", children: t("settings.llmModel") }),
+                    /* @__PURE__ */ jsx("div", { className: "mma-settings-control mma-settings-control--model", children: /* @__PURE__ */ jsxs("div", { className: "mma-model-row", children: [
+                      /* @__PURE__ */ jsx(
+                        "input",
+                        {
+                          id: "mma-cfg-model",
+                          placeholder: form.provider ? t("settings.modelPlaceholder") : t("settings.modelNeedsProvider"),
+                          value: form.model || "",
+                          disabled: !form.provider,
+                          onChange: (e) => patch({ model: e.target.value })
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { className: "mma-status-pill", "data-state": "idle", children: t("settings.llmProbeIdle") })
+                    ] }) })
+                  ] })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx("hr", { className: "mma-settings-rule" }),
+            /* @__PURE__ */ jsxs(
+              "section",
+              {
+                className: "mma-settings-section",
+                "data-section": "about",
+                ref: (el) => {
+                  sectionRefs.current.about = el;
+                },
+                children: [
+                  /* @__PURE__ */ jsx("h4", { children: t("settings.sectionAbout") }),
+                  s.about ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsxs("div", { className: "mma-about-meta", children: [
+                      /* @__PURE__ */ jsx("span", { className: "mma-settings-label", children: t("settings.env") }),
+                      /* @__PURE__ */ jsxs("code", { children: [
+                        s.about.adapter,
+                        " \xB7 ",
+                        s.about.env
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsx("ul", { className: "mma-about-pkgs", children: s.about.packages.map((pkg) => /* @__PURE__ */ jsxs("li", { children: [
+                      /* @__PURE__ */ jsx("span", { title: pkg.name, children: shortPkg(pkg.name) }),
+                      /* @__PURE__ */ jsx("code", { children: pkg.version })
+                    ] }, pkg.name)) }),
+                    /* @__PURE__ */ jsxs("div", { className: "mma-about-actions", children: [
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          className: "mma-ghostbtn",
+                          id: "mma-cfg-check-update",
+                          disabled: s.updateCheck?.status === "loading",
+                          onClick: () => actions.checkUpdates(),
+                          children: s.updateCheck?.status === "loading" ? t("settings.checkingUpdate") : t("settings.checkUpdate")
+                        }
+                      ),
+                      s.updateCheck?.status === "done" ? /* @__PURE__ */ jsx("span", { className: "mma-settings-hint", children: s.updateCheck.error ? t("settings.updateError", { message: s.updateCheck.error }) : s.updateCheck.updateAvailable ? t("settings.updateAvailable", {
+                        latest: s.updateCheck.latest ?? "",
+                        current: s.updateCheck.current
+                      }) : t("settings.upToDate", {
+                        version: s.updateCheck.latest ?? s.updateCheck.current
+                      }) }) : null
+                    ] })
+                  ] }) : /* @__PURE__ */ jsx("p", { className: "mma-settings-hint", children: t("settings.aboutLoading") })
+                ]
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("footer", { className: "mma-settings-foot", children: [
+          /* @__PURE__ */ jsxs("div", { className: "mma-settings-foot-left", "aria-live": "polite", children: [
+            lastSavedAt ? /* @__PURE__ */ jsxs("span", { className: "mma-settings-hint", children: [
+              t("settings.lastSaved", { time: lastSavedAt }),
+              dirtyCount > 0 ? " \xB7 " : ""
+            ] }) : null,
+            dirtyCount > 0 ? /* @__PURE__ */ jsx("span", { className: "mma-settings-dirty", children: t("settings.dirtyCount", { count: dirtyCount }) }) : null
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "mma-settings-foot-right", children: [
+            dirtyCount > 0 ? /* @__PURE__ */ jsx("button", { type: "button", className: "mma-ghostbtn", onClick: discard, children: t("settings.discard") }) : null,
+            /* @__PURE__ */ jsx("button", { type: "button", className: "mma-ghostbtn", onClick: () => setConfirm("restore"), children: t("settings.restore") }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "mma-primarybtn",
+                id: "mma-cfg-save",
+                disabled: !canSave,
+                onClick: save,
+                children: t("settings.save")
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "mma-settings-msg", id: "mma-cfg-msg", children: s.cfgMsg })
+        ] }),
+        confirm ? /* @__PURE__ */ jsx("div", { className: "mma-settings-confirm", role: "presentation", children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "mma-dialog",
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": "mma-settings-confirm-title",
+            children: [
+              /* @__PURE__ */ jsx("h3", { id: "mma-settings-confirm-title", children: confirm === "close" ? t("settings.confirmCloseTitle") : t("settings.confirmRestoreTitle") }),
+              /* @__PURE__ */ jsx("p", { children: confirm === "close" ? t("settings.confirmCloseBody") : t("settings.confirmRestoreBody") }),
+              /* @__PURE__ */ jsxs("div", { className: "mma-dialog-actions", children: [
+                /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setConfirm(null), children: t("modal.cancel") }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "go",
+                    onClick: () => {
+                      if (confirm === "close") {
+                        discard();
+                        actions.toggleSettings(false);
+                      } else restoreDefaults();
+                      setConfirm(null);
+                    },
+                    children: confirm === "close" ? t("settings.confirmDiscard") : t("settings.confirmRestoreAction")
+                  }
+                )
+              ] })
+            ]
+          }
+        ) }) : null
+      ]
+    }
+  );
 }
 function Tabs() {
   const s = usePanelState();
@@ -962,8 +1873,11 @@ function ThemePop() {
   const actions = usePanelActions();
   const { t } = usePanelI18n();
   const app = actions.getActiveApp();
-  const appTheme = app ? app.theme : null;
+  const appScope = Boolean(app) && s.themeScope === "app";
+  const viewTheme = appScope ? app?.theme?.theme ?? s.theme : s.theme;
+  const viewPalette = appScope ? selectedPalette(app?.theme?.palette, Boolean(app?.localPalette)) : s.palette;
   const customs = s.customPalettes || {};
+  const canApp = Boolean(app && s.capabilities.appTheme);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     s.themePopOpen ? /* @__PURE__ */ jsx(
       "div",
@@ -987,18 +1901,61 @@ function ThemePop() {
         onClick: (e) => e.stopPropagation(),
         onPointerDown: (e) => e.stopPropagation(),
         children: [
-          /* @__PURE__ */ jsx("div", { className: "mma-pop-seg", children: ["light", "dark"].map((mode) => /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx("div", { className: "mma-pop-lab", children: t("theme.apply") }),
+          /* @__PURE__ */ jsxs("div", { className: "mma-pop-seg", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "data-scope": "global",
+                "data-on": s.themeScope === "global" ? "1" : "0",
+                onClick: () => actions.setThemeScope("global"),
+                children: t("theme.global")
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "data-scope": "app",
+                id: "mma-scope-app",
+                title: app ? t("theme.saveTo", { name: app.name }) : t("theme.openAppFirst"),
+                "data-on": appScope ? "1" : "0",
+                disabled: !canApp,
+                onClick: () => actions.setThemeScope("app"),
+                children: app ? app.name : t("theme.currentApp")
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "mma-pop-lab", children: t("theme.appearance") }),
+          /* @__PURE__ */ jsx("div", { className: "mma-pop-seg", children: ["system", "light", "dark"].map((mode) => /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
               "data-mode": mode,
-              "data-on": s.theme === mode ? "1" : "0",
+              "data-on": viewTheme === mode ? "1" : "0",
               onClick: () => actions.setAppearance({ theme: mode }, s.themeScope),
               children: t(`theme.${mode}`)
             },
             mode
           )) }),
+          /* @__PURE__ */ jsx("div", { className: "mma-pop-lab", children: t("theme.palettes") }),
           /* @__PURE__ */ jsxs("div", { className: "mma-pop-list", children: [
+            appScope ? /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: "mma-swatch",
+                id: "mma-follow-global",
+                "data-on": viewPalette === GLOBAL_PALETTE_ID ? "1" : "0",
+                role: "menuitem",
+                onClick: () => actions.setAppearance({ palette: GLOBAL_PALETTE_ID }, "app"),
+                children: [
+                  /* @__PURE__ */ jsx("i", { className: "mma-dot", style: { background: "linear-gradient(135deg,#888,#ddd)" } }),
+                  /* @__PURE__ */ jsx("span", { children: t("theme.followGlobal") })
+                ]
+              }
+            ) : null,
             PALETTES.map((p) => /* @__PURE__ */ jsxs(
               "button",
               {
@@ -1006,11 +1963,12 @@ function ThemePop() {
                 className: "mma-swatch",
                 "data-palette": p.id,
                 role: "menuitem",
-                "data-on": s.palette === p.id ? "1" : "0",
+                "data-on": viewPalette === p.id ? "1" : "0",
                 onClick: () => actions.setAppearance({ palette: p.id }, s.themeScope),
                 children: [
                   /* @__PURE__ */ jsx("i", { className: "mma-dot", style: { background: p.swatch } }),
-                  /* @__PURE__ */ jsx("span", { children: t(`palette.${p.id}`) })
+                  /* @__PURE__ */ jsx("span", { children: t(`palette.${p.id}`) }),
+                  /* @__PURE__ */ jsx("i", { className: "mma-custom-badge", children: t("theme.chipSystem") })
                 ]
               },
               p.id
@@ -1023,7 +1981,7 @@ function ThemePop() {
                 "data-palette": id,
                 "data-custom": "1",
                 role: "menuitem",
-                "data-on": s.palette === id ? "1" : "0",
+                "data-on": viewPalette === id ? "1" : "0",
                 onClick: () => actions.setAppearance({ palette: id }, s.themeScope),
                 children: [
                   /* @__PURE__ */ jsx("i", { className: "mma-dot", style: { background: customs[id].swatch || "#888" } }),
@@ -1032,34 +1990,34 @@ function ThemePop() {
                 ]
               },
               id
-            ))
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "mma-pop-seg mma-scope-seg", children: [
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                "data-scope": "global",
-                "data-on": s.themeScope === "global" ? "1" : "0",
-                onClick: () => actions.setThemeScope("global"),
-                children: t("theme.global")
-              }
-            ),
-            /* @__PURE__ */ jsx(
+            )),
+            appScope && app?.localPalette ? /* @__PURE__ */ jsxs(
               "button",
               {
                 type: "button",
-                "data-scope": "app",
-                id: "mma-scope-app",
-                title: app ? t("theme.saveTo", { name: app.name }) : t("theme.openAppFirst"),
-                "data-on": s.themeScope === "app" ? "1" : "0",
-                disabled: !app || !s.capabilities.appTheme,
-                onClick: () => actions.setThemeScope("app"),
-                children: app ? app.name : t("theme.currentApp")
+                className: "mma-swatch",
+                "data-palette": LOCAL_PALETTE_ID,
+                role: "menuitem",
+                "data-on": viewPalette === LOCAL_PALETTE_ID ? "1" : "0",
+                onClick: () => actions.setAppearance({ palette: LOCAL_PALETTE_ID }, "app"),
+                children: [
+                  /* @__PURE__ */ jsx("i", { className: "mma-dot", style: { background: app.localPalette.swatch } }),
+                  /* @__PURE__ */ jsx("span", { children: app.localPalette.label }),
+                  /* @__PURE__ */ jsx("i", { className: "mma-custom-badge", children: t("theme.chipApp") })
+                ]
               }
-            )
+            ) : null
           ] }),
-          s.themeScope === "app" && appTheme ? /* @__PURE__ */ jsx("button", { type: "button", className: "mma-textbtn", id: "mma-clear-app-theme", onClick: () => actions.clearAppTheme(), children: t("theme.followGlobal") }) : null
+          appScope && app?.theme ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "mma-textbtn",
+              id: "mma-reset-app-theme",
+              onClick: () => actions.clearAppTheme(),
+              children: t("theme.resetApp")
+            }
+          ) : null
         ]
       }
     )
@@ -1242,6 +2200,13 @@ function createFrameController(opts) {
   const { container: initial2, urlOf, envOf } = opts;
   let container = initial2 ?? null;
   const map = /* @__PURE__ */ new Map();
+  function targetOrigin(appId, rec) {
+    try {
+      return new URL(rec?.iframe.src || urlOf(appId)).origin;
+    } catch {
+      return "";
+    }
+  }
   return {
     map,
     url: (appId) => urlOf(appId),
@@ -1253,8 +2218,13 @@ function createFrameController(opts) {
       const w = rec?.iframe.contentWindow;
       if (!w) return;
       const env = envOf(appId);
+      const target = targetOrigin(appId, rec);
+      if (!target) return;
       try {
-        w.postMessage({ type: "mma-set-env", theme: env.theme, palette: env.palette, dock: env.dock }, "*");
+        w.postMessage(
+          { type: "mma-set-env", theme: env.theme, palette: env.palette, dock: env.dock, vars: env.vars },
+          target
+        );
       } catch {
       }
     },
@@ -1268,7 +2238,7 @@ function createFrameController(opts) {
         const wrap = document.createElement("div");
         wrap.className = "mma-frame";
         wrap.setAttribute("data-app", appId);
-        wrap.innerHTML = `${loadingMarkup()}<iframe title="${escapeHtml(title || appId)}"></iframe>`;
+        wrap.innerHTML = `${loadingMarkup()}<iframe title="${escapeHtml(title || appId)}" allow="clipboard-write"></iframe>`;
         if (!container) return;
         container.appendChild(wrap);
         const iframe = wrap.querySelector("iframe");
@@ -1298,6 +2268,27 @@ function createFrameController(opts) {
       if (!rec) return;
       if (!rec.wrap.querySelector(".mma-load")) rec.wrap.insertAdjacentHTML("afterbegin", loadingMarkup());
       rec.iframe.src = `${urlOf(appId)}&_=${Date.now()}`;
+    },
+    postViewEval(query) {
+      const rec = map.get(query.appId);
+      const w = rec?.iframe.contentWindow;
+      const target = rec ? targetOrigin(query.appId, rec) : "";
+      if (!w || !target) return false;
+      try {
+        w.postMessage(
+          {
+            type: "mma-view-eval",
+            requestId: query.requestId,
+            appId: query.appId,
+            code: query.code ?? "",
+            maxBytes: query.maxBytes ?? 0
+          },
+          target
+        );
+        return true;
+      } catch {
+        return false;
+      }
     }
   };
 }
@@ -1321,6 +2312,7 @@ var en_default = {
     close: "Close"
   },
   theme: {
+    system: "System",
     light: "Light",
     dark: "Dark",
     custom: "Custom",
@@ -1328,7 +2320,13 @@ var en_default = {
     currentApp: "Current app",
     openAppFirst: "Open an app first",
     saveTo: 'Save to "{{name}}"',
-    followGlobal: "Follow global (clear app theme)"
+    followGlobal: "Follow global",
+    apply: "Apply to",
+    appearance: "Appearance",
+    palettes: "Palette",
+    chipSystem: "System",
+    chipApp: "This app",
+    resetApp: "Restore this app default"
   },
   palette: {
     default: "Default",
@@ -1354,20 +2352,59 @@ var en_default = {
   },
   settings: {
     title: "Settings",
+    close: "Close settings",
+    sectionNav: "Sections",
+    sectionsAria: "Settings sections",
+    sectionAppearance: "Appearance",
+    sectionNetwork: "Network",
+    sectionModel: "Model",
+    sectionAbout: "About",
+    sectionHost: "Host",
     hostPort: "Host port",
     language: "Language",
     langZh: "Chinese",
     langEn: "English",
     theme: "Theme",
     palette: "Palette",
+    dock: "Dock",
+    dockFill: "Fill",
+    dockSide: "Side",
     cardStyle: "Card style",
     cardStamp: "Stamp",
     cardEtch: "Etch",
     cardHero: "Hero",
     cardList: "List",
+    appearanceHint: "Preview only. Click Save to persist; closing discards unsaved changes.",
+    portHint: "Range 1024\u201365535. Restart the app after changing.",
+    portEmpty: "Enter a port.",
+    portNan: "Port must be a number.",
+    portRange: "Port must be between 1024 and 65535.",
+    copyUrl: "Copy",
+    openUrl: "Open",
     llmProvider: "LLM Provider",
     llmModel: "LLM model",
-    save: "Save"
+    providerPlaceholder: "Select a provider",
+    modelPlaceholder: "Enter a model",
+    modelNeedsProvider: "Select a provider first",
+    llmProbeIdle: "Probe not wired",
+    save: "Save",
+    discard: "Discard",
+    restore: "Restore defaults",
+    lastSaved: "Saved {{time}}",
+    dirtyCount: "{{count}} unsaved",
+    confirmCloseTitle: "Discard unsaved changes?",
+    confirmCloseBody: "Unsaved appearance, network, and model changes will be discarded and restored.",
+    confirmDiscard: "Discard",
+    confirmRestoreTitle: "Restore defaults?",
+    confirmRestoreBody: "Resets appearance, port, and model fields (port/model still need Save).",
+    confirmRestoreAction: "Restore",
+    env: "Environment",
+    aboutLoading: "Loading version info\u2026",
+    checkUpdate: "Check for updates",
+    checkingUpdate: "Checking\u2026",
+    upToDate: "Up to date ({{version}})",
+    updateAvailable: "Update available: {{latest}} (current {{current}})",
+    updateError: "Check failed: {{message}}"
   },
   modal: {
     title: "Delete mini app",
@@ -1386,7 +2423,16 @@ var en_default = {
     noCommits: "No commits yet",
     noStorage: "No storage files",
     expandMsg: "Show more",
-    collapseMsg: "Show less"
+    collapseMsg: "Show less",
+    entries: "{{count}} entries",
+    sizeKb: "{{value}} KB",
+    sizeMb: "{{value}} MB",
+    noticeTitle: '"{{table}}" is already {{size}}',
+    noticeBody: "The bigger this file gets, the slower every save becomes. Move anything that keeps growing into its own table \u2014 copy the prompt below and paste it to an AI to do the split for you.",
+    noticeTop: 'The heaviest piece right now is "{{key}}" (about {{size}}).',
+    noticeCopy: "Copy split prompt",
+    noticeCopied: "Copied",
+    noticeDismiss: "Got it"
   },
   load: {
     label: "Loading"
@@ -1416,6 +2462,7 @@ var zh_CN_default = {
     close: "\u5173\u95ED"
   },
   theme: {
+    system: "\u8DDF\u968F\u7CFB\u7EDF",
     light: "\u6D45\u8272",
     dark: "\u6DF1\u8272",
     custom: "\u81EA\u5B9A\u4E49",
@@ -1423,7 +2470,13 @@ var zh_CN_default = {
     currentApp: "\u5F53\u524D\u5C0F\u7A0B\u5E8F",
     openAppFirst: "\u6253\u5F00\u5C0F\u7A0B\u5E8F\u540E\u53EF\u7528",
     saveTo: "\u4FDD\u5B58\u5230\u300C{{name}}\u300D",
-    followGlobal: "\u8DDF\u968F\u5168\u5C40\uFF08\u6E05\u9664\u672C\u5E94\u7528\u4E3B\u9898\uFF09"
+    followGlobal: "\u8DDF\u968F\u5168\u5C40",
+    apply: "\u5E94\u7528\u5230",
+    appearance: "\u5916\u89C2",
+    palettes: "\u8272\u677F",
+    chipSystem: "\u7CFB\u7EDF",
+    chipApp: "\u672C\u5E94\u7528",
+    resetApp: "\u6062\u590D\u8BE5\u5E94\u7528\u9ED8\u8BA4"
   },
   palette: {
     default: "\u9ED8\u8BA4",
@@ -1449,20 +2502,59 @@ var zh_CN_default = {
   },
   settings: {
     title: "\u8BBE\u7F6E",
+    close: "\u5173\u95ED\u8BBE\u7F6E",
+    sectionNav: "\u5206\u7EC4",
+    sectionsAria: "\u8BBE\u7F6E\u5206\u7EC4",
+    sectionAppearance: "\u5916\u89C2",
+    sectionNetwork: "\u7F51\u7EDC",
+    sectionModel: "\u6A21\u578B",
+    sectionAbout: "\u5173\u4E8E",
+    sectionHost: "\u5BBF\u4E3B",
     hostPort: "Host \u7AEF\u53E3",
     language: "\u754C\u9762\u8BED\u8A00",
     langZh: "\u4E2D\u6587",
     langEn: "English",
     theme: "\u4E3B\u9898",
     palette: "\u8C03\u8272\u677F",
+    dock: "\u505C\u9760",
+    dockFill: "\u94FA\u6EE1",
+    dockSide: "\u4FA7\u680F",
     cardStyle: "\u5361\u7247\u6837\u5F0F",
     cardStamp: "\u5370\u7AE0",
     cardEtch: "\u8680\u523B",
     cardHero: "\u6D77\u62A5",
     cardList: "\u5217\u8868",
+    appearanceHint: "\u4EC5\u9884\u89C8\uFF0C\u70B9\u4FDD\u5B58\u540E\u624D\u4F1A\u5199\u5165\uFF1B\u5173\u95ED\u672A\u4FDD\u5B58\u5C06\u6062\u590D\u539F\u6837\u3002",
+    portHint: "\u8303\u56F4 1024\u201365535\uFF0C\u4FEE\u6539\u540E\u9700\u91CD\u542F\u5E94\u7528\u3002",
+    portEmpty: "\u8BF7\u8F93\u5165\u7AEF\u53E3\u3002",
+    portNan: "\u7AEF\u53E3\u5FC5\u987B\u662F\u6570\u5B57\u3002",
+    portRange: "\u7AEF\u53E3\u9700\u5728 1024\u201365535 \u4E4B\u95F4\u3002",
+    copyUrl: "\u590D\u5236",
+    openUrl: "\u6253\u5F00",
     llmProvider: "LLM Provider",
     llmModel: "LLM \u6A21\u578B",
-    save: "\u4FDD\u5B58"
+    providerPlaceholder: "\u9009\u62E9 Provider",
+    modelPlaceholder: "\u8F93\u5165\u6A21\u578B\u540D",
+    modelNeedsProvider: "\u5148\u9009\u62E9 Provider",
+    llmProbeIdle: "\u672A\u63A5\u5165\u68C0\u6D4B",
+    save: "\u4FDD\u5B58",
+    discard: "\u653E\u5F03\u4FEE\u6539",
+    restore: "\u6062\u590D\u9ED8\u8BA4",
+    lastSaved: "\u4E0A\u6B21\u4FDD\u5B58 {{time}}",
+    dirtyCount: "{{count}} \u9879\u672A\u4FDD\u5B58",
+    confirmCloseTitle: "\u653E\u5F03\u672A\u4FDD\u5B58\u7684\u4FEE\u6539\uFF1F",
+    confirmCloseBody: "\u5173\u95ED\u540E\uFF0C\u672A\u4FDD\u5B58\u7684\u5916\u89C2 / \u7F51\u7EDC / \u6A21\u578B\u6539\u52A8\u90FD\u4F1A\u4E22\u5F03\u5E76\u6062\u590D\u539F\u6837\u3002",
+    confirmDiscard: "\u653E\u5F03",
+    confirmRestoreTitle: "\u6062\u590D\u9ED8\u8BA4\u8BBE\u7F6E\uFF1F",
+    confirmRestoreBody: "\u5C06\u91CD\u7F6E\u5916\u89C2\u3001\u7AEF\u53E3\u4E0E\u6A21\u578B\u5B57\u6BB5\u4E3A\u9ED8\u8BA4\u503C\uFF08\u4ECD\u9700\u4FDD\u5B58\u7AEF\u53E3/\u6A21\u578B\uFF09\u3002",
+    confirmRestoreAction: "\u6062\u590D",
+    env: "\u73AF\u5883",
+    aboutLoading: "\u6B63\u5728\u8BFB\u53D6\u7248\u672C\u4FE1\u606F\u2026",
+    checkUpdate: "\u68C0\u67E5\u66F4\u65B0",
+    checkingUpdate: "\u68C0\u67E5\u4E2D\u2026",
+    upToDate: "\u5DF2\u662F\u6700\u65B0\uFF08{{version}}\uFF09",
+    updateAvailable: "\u6709\u65B0\u7248\u672C {{latest}}\uFF08\u5F53\u524D {{current}}\uFF09",
+    updateError: "\u68C0\u67E5\u5931\u8D25\uFF1A{{message}}"
   },
   modal: {
     title: "\u5220\u9664\u5C0F\u7A0B\u5E8F",
@@ -1481,7 +2573,16 @@ var zh_CN_default = {
     noCommits: "\u6682\u65E0\u63D0\u4EA4\u8BB0\u5F55",
     noStorage: "\u6682\u65E0\u5B58\u50A8\u6587\u4EF6",
     expandMsg: "\u5C55\u5F00\u5168\u6587",
-    collapseMsg: "\u6536\u8D77"
+    collapseMsg: "\u6536\u8D77",
+    entries: "{{count}} \u6761",
+    sizeKb: "{{value}} KB",
+    sizeMb: "{{value}} MB",
+    noticeTitle: "\u300C{{table}}\u300D\u5DF2\u7ECF\u6709 {{size}} \u4E86",
+    noticeBody: "\u8FD9\u4E2A\u6587\u4EF6\u8D8A\u5927\uFF0C\u6BCF\u6B21\u4FDD\u5B58\u90FD\u4F1A\u8D8A\u6162\u3002\u5EFA\u8BAE\u628A\u4F1A\u4E0D\u65AD\u53D8\u591A\u7684\u6570\u636E\u62C6\u5230\u5355\u72EC\u7684\u8868\u91CC\u2014\u2014\u4F60\u53EF\u4EE5\u628A\u4E0B\u9762\u7684\u63D0\u793A\u8BCD\u590D\u5236\u7ED9 AI\uFF0C\u8BA9\u5B83\u5E2E\u4F60\u6539\u3002",
+    noticeTop: "\u773C\u4E0B\u6700\u5927\u7684\u4E00\u5757\u662F\u300C{{key}}\u300D\uFF08\u7EA6 {{size}}\uFF09\u3002",
+    noticeCopy: "\u590D\u5236\u62C6\u5206\u63D0\u793A\u8BCD",
+    noticeCopied: "\u5DF2\u590D\u5236",
+    noticeDismiss: "\u77E5\u9053\u4E86"
   },
   load: {
     label: "\u52A0\u8F7D\u4E2D"
@@ -1561,7 +2662,7 @@ function resolvePanelLocale(value) {
 // src/styles.ts
 var PANEL_CSS_TAG = "panel";
 var CSS = [
-  "#mma-host{color:var(--dsw-alias-fg,#111);background:var(--dsw-alias-bg,#f7f7f8);overflow:hidden;}",
+  "#mma-host{color:var(--dsw-alias-fg,#111);background:var(--dsw-alias-bg,#f7f7f8);overflow:hidden;container-type:inline-size;container-name:mma-host;}",
   "#mma-host button,#mma-host input,#mma-host select{color:inherit;font:inherit;}",
   "#mma-host .mma-chrome{display:flex;align-items:center;gap:8px;height:46px;padding:0 10px;border-bottom:1px solid var(--dsw-alias-border,#e5e7eb);background:var(--dsw-alias-surface,#fff);flex:0 0 auto;}",
   "#mma-host .mma-tabs{display:flex;align-items:center;gap:2px;flex:1;min-width:0;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:thin;}",
@@ -1577,12 +2678,18 @@ var CSS = [
   "#mma-host .mma-toolbar .mma-ico{display:block;}",
   "#mma-host .mma-theme-wrap{position:relative;flex:0 0 auto;}",
   "#mma-host .mma-pop-scrim{position:fixed;inset:0;z-index:7;background:transparent;}",
-  "#mma-host .mma-pop{display:none;position:absolute;right:0;top:40px;z-index:8;width:232px;padding:12px 14px 14px;border-radius:12px;border:1px solid var(--dsw-alias-border,#e5e7eb);background:var(--dsw-alias-surface,#fff);box-shadow:0 12px 32px var(--dsw-alias-shadow,rgba(0,0,0,.14));}",
+  "#mma-host .mma-pop{display:none;position:absolute;right:0;top:40px;z-index:8;width:260px;padding:12px 14px 14px;border-radius:12px;border:1px solid var(--dsw-alias-border,#e5e7eb);background:var(--dsw-alias-surface,#fff);box-shadow:0 12px 32px var(--dsw-alias-shadow,rgba(0,0,0,.14));}",
   "#mma-host .mma-pop[data-open='1']{display:block;}",
   "#mma-host .mma-pop-seg{display:flex;gap:4px;margin:0 0 12px;padding:3px;border-radius:9px;background:var(--dsw-alias-muted,#f3f4f6);}",
   "#mma-host .mma-pop-seg button{flex:1;height:28px;padding:0;line-height:1;border:0;border-radius:7px;background:transparent;cursor:pointer;font-size:12px;color:inherit;display:flex;align-items:center;justify-content:center;}",
   "#mma-host .mma-pop-seg button[data-on='1']{background:var(--dsw-alias-surface,#fff);font-weight:600;box-shadow:0 1px 2px var(--dsw-alias-shadow,rgba(0,0,0,.06));color:var(--dsw-alias-primary,#2563eb);}",
-  "#mma-host .mma-pop-list{margin:0 0 12px;display:flex;flex-direction:column;gap:6px!important;max-height:280px;overflow-y:auto;padding:4px 0;}",
+  "#mma-host .mma-pop-seg button:disabled{opacity:.45;cursor:not-allowed;}",
+  "#mma-host .mma-pop-lab{font-size:10px;letter-spacing:.12em;text-transform:uppercase;opacity:.55;margin:10px 2px 6px;}",
+  "#mma-host .mma-pop-lab:first-child{margin-top:0;}",
+  "#mma-host .mma-pop-list{margin:0;display:flex;flex-direction:column;gap:6px!important;max-height:280px;overflow-y:auto;padding:4px 0;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--dsw-alias-fg,#111) 35%,transparent) transparent;}",
+  "#mma-host .mma-pop-list::-webkit-scrollbar{width:8px;}",
+  "#mma-host .mma-pop-list::-webkit-scrollbar-track{background:transparent;}",
+  "#mma-host .mma-pop-list::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--dsw-alias-fg,#111) 35%,transparent);border-radius:99px;}",
   "#mma-host .mma-swatch{display:flex;align-items:center;gap:10px;width:100%;min-height:34px;padding:0 10px;border:0;border-radius:8px;background:transparent;cursor:pointer;color:inherit;font-size:13px;text-align:left;white-space:nowrap;overflow:hidden;}",
   "#mma-host .mma-swatch:hover{background:var(--dsw-alias-accent,var(--dsw-alias-muted,#f3f4f6));}",
   "#mma-host .mma-swatch[data-on='1']{background:var(--dsw-alias-accent,var(--dsw-alias-muted,#f3f4f6));font-weight:600;}",
@@ -1661,17 +2768,106 @@ var CSS = [
   "#mma-host .mma-dialog-actions{display:flex;justify-content:flex-end;gap:8px;}",
   "#mma-host .mma-dialog-actions button{height:32px;padding:0 12px;border-radius:8px;border:1px solid var(--dsw-alias-border,#e5e7eb);background:var(--dsw-alias-surface,#fff);cursor:pointer;}",
   "#mma-host .mma-dialog-actions .go{background:#dc2626;color:#fff;border-color:#dc2626;}",
-  "#mma-host .mma-settings{position:absolute;inset:0;background:var(--dsw-alias-bg,#f7f7f8);z-index:4;overflow:auto;padding:20px 22px 32px;display:none;}",
-  "#mma-host .mma-settings[data-open='1']{display:block;}",
-  "#mma-host .mma-settings h3{margin:0 0 6px;font-size:16px;}",
-  "#mma-host .mma-settings-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}",
-  "#mma-host .mma-settings label{display:block;margin-bottom:12px;font-size:12px;opacity:.75;}",
-  "#mma-host .mma-settings input,#mma-host .mma-settings select{display:block;width:100%;margin-top:4px;height:32px;padding:0 10px;border:1px solid var(--dsw-alias-border,#e5e7eb);border-radius:8px;background:var(--dsw-alias-surface,#fff);color:inherit;font-size:13px;box-sizing:border-box;}",
-  "#mma-host .mma-settings-actions{display:flex;flex-direction:column;align-items:flex-end;gap:8px;margin-top:18px;}",
-  "#mma-host .mma-settings-msg{font-size:12px;opacity:.75;line-height:1.4;text-align:right;width:100%;}",
-  "#mma-host .mma-settings-msg.err{color:#dc2626;}",
-  "#mma-host #mma-cfg-save{height:34px;padding:0 18px;border:1px solid var(--dsw-alias-border,#e5e7eb);border-radius:8px;background:var(--dsw-alias-surface,#fff);color:inherit;font-size:14px;font-weight:600;opacity:1;cursor:pointer;}",
-  "#mma-host #mma-cfg-save:hover{background:var(--dsw-alias-muted,#f3f4f6);border-color:var(--dsw-alias-primary,#2563eb);color:var(--dsw-alias-primary,#2563eb);}",
+  "#mma-host .mma-settings{position:absolute;inset:0;z-index:4;display:none;flex-direction:column;background:var(--dsw-alias-bg,#f7f7f8);color:inherit;overflow:hidden;}",
+  "#mma-host .mma-settings[data-open='1']{display:flex;}",
+  "#mma-host .mma-settings-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid var(--dsw-alias-border,#e5e7eb);background:var(--dsw-alias-surface,#fff);}",
+  "#mma-host .mma-settings-head-left{display:flex;align-items:center;gap:8px;min-width:0;}",
+  "#mma-host .mma-settings-head-icon{opacity:.7;font-size:14px;}",
+  "#mma-host .mma-settings-head h3{margin:0;font-size:15px;font-weight:650;letter-spacing:-.01em;}",
+  "#mma-host .mma-settings-head-right{display:flex;align-items:center;gap:8px;}",
+  "#mma-host .mma-settings-meta{font-size:11px;opacity:.55;white-space:nowrap;}",
+  "#mma-host .mma-settings-body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;}",
+  "#mma-host .mma-settings-rail{flex:0 0 auto;display:flex;gap:4px;padding:8px 10px;border-bottom:1px solid var(--dsw-alias-border,#e5e7eb);background:var(--dsw-alias-surface,#fff);overflow-x:auto;}",
+  "#mma-host .mma-settings-rail-title{display:none;}",
+  "#mma-host .mma-settings-rail-item{flex:0 0 auto;height:30px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:inherit;opacity:.7;font-size:12.5px;cursor:pointer;}",
+  "#mma-host .mma-settings-rail-item:hover{background:var(--dsw-alias-muted,#f3f4f6);opacity:1;}",
+  "#mma-host .mma-settings-rail-item[data-on='1']{background:var(--dsw-alias-muted,#f3f4f6);opacity:1;font-weight:600;color:var(--dsw-alias-primary,#2563eb);box-shadow:inset 0 -2px 0 var(--dsw-alias-primary,#2563eb);}",
+  "#mma-host .mma-settings-content{flex:1 1 auto;min-height:0;overflow:auto;padding:18px 16px 24px;scroll-behavior:smooth;}",
+  "#mma-host .mma-settings-section{scroll-margin-top:12px;}",
+  "#mma-host .mma-settings-section h4{margin:0 0 14px;font-size:12.5px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;opacity:.55;}",
+  "#mma-host .mma-settings-field{display:flex;flex-direction:column;gap:8px;margin-bottom:20px;}",
+  "#mma-host .mma-settings-label{font-size:12.5px;opacity:.75;}",
+  "#mma-host .mma-settings-control{min-width:0;}",
+  "#mma-host .mma-settings-control--model{max-width:520px;}",
+  "#mma-host .mma-settings input{display:block;width:100%;height:34px;padding:0 10px;border:1px solid var(--dsw-alias-border,#e5e7eb);border-radius:9px;background:var(--dsw-alias-surface,#fff);color:inherit;font-size:13px;box-sizing:border-box;}",
+  "#mma-host .mma-settings input:focus{outline:none;border-color:var(--dsw-alias-primary,#2563eb);box-shadow:0 0 0 2px color-mix(in srgb, var(--dsw-alias-primary,#2563eb) 20%, transparent);}",
+  "#mma-host .mma-settings input:disabled{opacity:.55;}",
+  "#mma-host .mma-settings-field.is-error input{border-color:var(--dsw-alias-destructive,#dc2626);}",
+  "#mma-host .mma-seg{display:flex;gap:4px;padding:3px;border-radius:10px;background:var(--dsw-alias-muted,#f3f4f6);max-width:280px;}",
+  "#mma-host .mma-seg button{flex:1;height:30px;padding:0 8px;border:0;border-radius:8px;background:transparent;cursor:pointer;font-size:12.5px;color:inherit;}",
+  "#mma-host .mma-seg button[data-on='1']{background:var(--dsw-alias-surface,#fff);font-weight:600;box-shadow:0 1px 2px var(--dsw-alias-shadow,rgba(0,0,0,.06));color:var(--dsw-alias-primary,#2563eb);}",
+  "#mma-host .mma-optgrid{display:grid;gap:10px;}",
+  "#mma-host .mma-optgrid--2{grid-template-columns:repeat(2,minmax(0,1fr));}",
+  "#mma-host .mma-optgrid--3{grid-template-columns:repeat(2,minmax(0,1fr));}",
+  "#mma-host .mma-optgrid--4{grid-template-columns:repeat(2,minmax(0,1fr));}",
+  "#mma-host .mma-optcard{position:relative;display:flex;flex-direction:column;gap:8px;padding:10px;border:1px solid var(--dsw-alias-border,#e5e7eb);border-radius:10px;background:var(--dsw-alias-surface,#fff);color:inherit;cursor:pointer;text-align:left;}",
+  "#mma-host .mma-optcard:hover{border-color:color-mix(in srgb, var(--dsw-alias-fg,#111) 28%, var(--dsw-alias-border,#e5e7eb));}",
+  "#mma-host .mma-optcard:focus-visible{outline:2px solid var(--dsw-alias-primary,#2563eb);outline-offset:2px;}",
+  "#mma-host .mma-optcard[data-on='1']{border-color:var(--dsw-alias-primary,#2563eb);background:color-mix(in srgb, var(--dsw-alias-primary,#2563eb) 8%, var(--dsw-alias-surface,#fff));}",
+  "#mma-host .mma-optcard:disabled,.mma-optcard--ghost{opacity:.55;cursor:default;border-style:dashed;}",
+  "#mma-host .mma-optcard-preview{display:block;height:42px;border-radius:8px;overflow:hidden;background:var(--dsw-alias-muted,#f3f4f6);}",
+  "#mma-host .mma-optcard-preview--plus{display:flex;align-items:center;justify-content:center;font-size:20px;opacity:.7;}",
+  "#mma-host .mma-optcard-label{font-size:12px;line-height:1.2;}",
+  "#mma-host .mma-optcard-check{position:absolute;top:8px;right:8px;width:18px;height:18px;border-radius:999px;background:var(--dsw-alias-primary,#2563eb);color:var(--dsw-alias-primary-fg,#fff);font-size:11px;display:flex;align-items:center;justify-content:center;}",
+  "#mma-host .mma-preview-theme{display:flex;flex-direction:column;justify-content:center;gap:6px;height:100%;padding:8px;box-sizing:border-box;}",
+  "#mma-host .mma-preview-theme--light{background:var(--dsw-alias-bg,#f7f7f8);}",
+  "#mma-host .mma-preview-theme--dark{background:color-mix(in srgb, var(--dsw-alias-fg,#111) 88%, transparent);}",
+  "#mma-host .mma-preview-theme--system{display:flex;flex-direction:row;padding:0;}",
+  "#mma-host .mma-preview-theme-half{flex:1;height:100%;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:8px;box-sizing:border-box;}",
+  "#mma-host .mma-preview-theme-half--light{background:var(--dsw-alias-bg,#f7f7f8);}",
+  "#mma-host .mma-preview-theme-half--dark{background:color-mix(in srgb, var(--dsw-alias-fg,#111) 88%, transparent);}",
+  "#mma-host .mma-preview-bar{display:block;height:4px;border-radius:999px;background:color-mix(in srgb, var(--dsw-alias-fg,#111) 25%, transparent);}",
+  "#mma-host .mma-preview-theme--dark .mma-preview-bar,#mma-host .mma-preview-theme-half--dark .mma-preview-bar{background:color-mix(in srgb, #fff 45%, transparent);}",
+  "#mma-host .mma-preview-swatches{display:flex;align-items:center;justify-content:center;gap:8px;height:100%;}",
+  "#mma-host .mma-preview-swatches > span{width:14px;height:14px;border-radius:999px;border:1px solid color-mix(in srgb, var(--dsw-alias-fg,#111) 12%, transparent);}",
+  "#mma-host .mma-preview-cardstyle{display:block;height:100%;margin:8px;border-radius:6px;border:1px solid var(--dsw-alias-border,#e5e7eb);background:var(--dsw-alias-surface,#fff);box-sizing:border-box;}",
+  "#mma-host .mma-preview-cardstyle--stamp{box-shadow:inset 0 0 0 1px var(--dsw-alias-border,#e5e7eb);position:relative;}",
+  "#mma-host .mma-preview-cardstyle--stamp::after{content:'';position:absolute;top:4px;right:4px;width:18px;height:8px;border-radius:3px;background:var(--dsw-alias-muted,#f3f4f6);}",
+  "#mma-host .mma-preview-cardstyle--etch{background:transparent;}",
+  "#mma-host .mma-preview-cardstyle--hero{box-shadow:3px 3px 0 var(--dsw-alias-border,#e5e7eb);}",
+  "#mma-host .mma-preview-cardstyle--list{border:0;border-bottom:1px solid var(--dsw-alias-border,#e5e7eb);border-radius:0;margin:14px 8px;}",
+  "#mma-host .mma-port-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}",
+  "#mma-host .mma-port-addon{display:inline-flex;align-items:center;justify-content:center;height:34px;padding:0 8px;border:1px solid var(--dsw-alias-border,#e5e7eb);border-right:0;border-radius:9px 0 0 9px;background:var(--dsw-alias-muted,#f3f4f6);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;}",
+  "#mma-host .mma-port-row input{width:120px;border-radius:0 9px 9px 0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;}",
+  "#mma-host .mma-port-url{font-size:11px;opacity:.65;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;}",
+  "#mma-host .mma-model-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}",
+  "#mma-host .mma-model-row input{flex:1 1 180px;min-width:0;}",
+  "#mma-host .mma-status-pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:20px;border:1px solid var(--dsw-alias-border,#e5e7eb);font-size:11px;opacity:.75;white-space:nowrap;}",
+  "#mma-host .mma-ghostbtn{height:30px;padding:0 10px;border:1px solid var(--dsw-alias-border,#e5e7eb);border-radius:8px;background:var(--dsw-alias-surface,#fff);color:inherit;font-size:12px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;}",
+  "#mma-host .mma-ghostbtn:hover{background:var(--dsw-alias-muted,#f3f4f6);}",
+  "#mma-host .mma-ghostbtn:disabled{opacity:.55;cursor:default;}",
+  "#mma-host .mma-primarybtn{height:34px;padding:0 16px;border:0;border-radius:8px;background:var(--dsw-alias-primary,#2563eb);color:var(--dsw-alias-primary-fg,#fff);font-size:13px;font-weight:600;cursor:pointer;}",
+  "#mma-host .mma-primarybtn:disabled{opacity:.45;cursor:default;}",
+  "#mma-host .mma-settings-hint{margin:0;font-size:11.5px;opacity:.6;line-height:1.45;}",
+  "#mma-host .mma-settings-field.is-error .mma-settings-hint{color:var(--dsw-alias-destructive,#dc2626);opacity:1;}",
+  "#mma-host .mma-settings-rule{border:0;border-top:1px solid var(--dsw-alias-border,#e5e7eb);margin:20px 0;}",
+  "#mma-host .mma-about-meta{margin-bottom:10px;display:flex;flex-direction:column;gap:6px;}",
+  "#mma-host .mma-about-meta code{display:inline-block;width:fit-content;font-size:12px;padding:3px 8px;border-radius:6px;background:var(--dsw-alias-muted,#f3f4f6);}",
+  "#mma-host .mma-about-pkgs{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:6px;}",
+  "#mma-host .mma-about-pkgs li{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;padding:8px 10px;border-radius:9px;background:var(--dsw-alias-surface,#fff);border:1px solid var(--dsw-alias-border,#e5e7eb);}",
+  "#mma-host .mma-about-pkgs li span{opacity:.8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}",
+  "#mma-host .mma-about-pkgs li code{font-size:11px;font-variant-numeric:tabular-nums;opacity:.9;}",
+  "#mma-host .mma-about-actions{display:flex;flex-direction:column;align-items:flex-start;gap:8px;}",
+  "#mma-host .mma-settings-foot{flex:0 0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-top:1px solid var(--dsw-alias-border,#e5e7eb);background:var(--dsw-alias-surface,#fff);}",
+  "#mma-host .mma-settings-foot-left{display:flex;flex-wrap:wrap;align-items:center;gap:4px;min-width:0;}",
+  "#mma-host .mma-settings-foot-right{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-left:auto;}",
+  "#mma-host .mma-settings-dirty{font-size:11.5px;color:var(--dsw-alias-primary,#2563eb);}",
+  "#mma-host .mma-settings-msg{flex-basis:100%;font-size:12px;opacity:.75;line-height:1.4;}",
+  "#mma-host .mma-settings-msg.err{color:var(--dsw-alias-destructive,#dc2626);}",
+  "#mma-host .mma-settings-confirm{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;padding:16px;background:color-mix(in srgb, var(--dsw-alias-fg,#111) 35%, transparent);}",
+  /* Wide layout: data-wide from ResizeObserver (reliable on fixed #mma-host) + container query fallback. */
+  "#mma-host .mma-settings[data-wide='1'] .mma-settings-body{flex-direction:row;}",
+  "#mma-host .mma-settings[data-wide='1'] .mma-settings-rail{flex:0 0 148px;flex-direction:column;align-items:stretch;gap:2px;border-bottom:0;border-right:1px solid var(--dsw-alias-border,#e5e7eb);padding:14px 10px;overflow:visible;}",
+  "#mma-host .mma-settings[data-wide='1'] .mma-settings-rail-title{display:block;font-size:10px;letter-spacing:.08em;text-transform:uppercase;opacity:.45;margin:0 8px 8px;}",
+  "#mma-host .mma-settings[data-wide='1'] .mma-settings-rail-item{width:100%;justify-content:flex-start;text-align:left;box-shadow:none;border-radius:8px;position:relative;}",
+  "#mma-host .mma-settings[data-wide='1'] .mma-settings-rail-item[data-on='1']{box-shadow:none;background:var(--dsw-alias-muted,#f3f4f6);}",
+  "#mma-host .mma-settings[data-wide='1'] .mma-settings-rail-item[data-on='1']::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:2px;border-radius:2px;background:var(--dsw-alias-primary,#2563eb);}",
+  "#mma-host .mma-settings[data-wide='1'] .mma-settings-content{padding:22px 26px 28px;}",
+  "#mma-host .mma-settings[data-wide='1'] .mma-optgrid--3{grid-template-columns:repeat(3,minmax(0,1fr));}",
+  "#mma-host .mma-settings[data-wide='1'] .mma-optgrid--4{grid-template-columns:repeat(4,minmax(0,1fr));}",
+  "#mma-host .mma-settings[data-wide='1'] .mma-settings-field--row{flex-direction:row;align-items:flex-start;gap:16px;}",
+  "#mma-host .mma-settings[data-wide='1'] .mma-settings-field--row > .mma-settings-label{flex:0 0 112px;padding-top:8px;}",
+  "#mma-host .mma-settings[data-wide='1'] .mma-settings-field--row > .mma-settings-control{flex:1 1 auto;}",
   "#mma-host .mma-browse{position:absolute;inset:0;background:var(--dsw-alias-bg,#f7f7f8);z-index:3;overflow:auto;padding:16px 18px;display:none;}",
   "#mma-host .mma-browse[data-open='1']{display:block;}",
   "#mma-host .mma-browse-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;}",
@@ -1708,7 +2904,15 @@ var CSS = [
   "#mma-host .mma-diff-line--del{color:#991b1b;background:rgba(220,38,38,.10);}",
   "#mma-host .mma-diff-line--ctx{color:inherit;opacity:.85;}",
   "#mma-host .mma-bempty{padding:20px;opacity:.6;text-align:center;font-size:13px;}",
-  "#mma-host .mma-berr{padding:16px;color:#b91c1c;font-size:13px;}"
+  "#mma-host .mma-berr{padding:16px;color:#b91c1c;font-size:13px;}",
+  "#mma-host .mma-storage-notice{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;padding:12px 14px;margin:0 0 12px;border-radius:10px;background:color-mix(in srgb, var(--dsw-alias-warning, #f59e0b) 14%, var(--dsw-alias-bg, #f7f7f8));border:1px solid color-mix(in srgb, var(--dsw-alias-warning, #f59e0b) 35%, transparent);}",
+  "#mma-host .mma-storage-notice-body{min-width:0;flex:1;}",
+  "#mma-host .mma-storage-notice-body b{display:block;font-size:13px;margin:0 0 4px;}",
+  "#mma-host .mma-storage-notice-body p{margin:0;font-size:12px;line-height:1.45;opacity:.85;}",
+  "#mma-host .mma-storage-notice-top{margin-top:6px !important;}",
+  "#mma-host .mma-storage-notice-actions{display:flex;flex-direction:column;gap:6px;flex-shrink:0;}",
+  "#mma-host .mma-storage-notice-actions button{font-size:12px;padding:6px 10px;border-radius:8px;border:1px solid color-mix(in srgb, currentColor 18%, transparent);background:var(--dsw-alias-bg, #fff);cursor:pointer;}",
+  "#mma-host .mma-storage-notice-copy{font-weight:600;}"
 ];
 function injectPanelCss() {
   if (typeof document === "undefined") return;
@@ -1721,25 +2925,20 @@ function injectPanelCss() {
   }
   tag.textContent = CSS.join("\n");
 }
-function loadCustomPalettes(host) {
-  if (!host.palettes) return;
-  host.palettes().then((list) => {
-    const custom = {};
-    for (const p of list) {
-      custom[p.id] = { label: p.label, swatch: p.swatch, tokens: p.tokens };
-    }
-    setPanelState({ customPalettes: custom });
-  }).catch(() => {
-  });
-}
 function createMiniAppPanel(host, options) {
   const locale = resolvePanelLocale(options?.locale ?? host.locale);
   const i18n = createPanelI18n(locale);
+  const prev = getPanelState();
   resetPanelState({
     tabs: [{ id: "all", title: i18n.t("tabs.all"), kind: "all" }],
     capabilities: capabilitiesOf(host),
     locale,
-    emptyText: host.emptyText
+    emptyText: host.emptyText,
+    theme: prev.theme,
+    palette: prev.palette,
+    dock: prev.dock,
+    cardStyle: prev.cardStyle,
+    visible: prev.visible
   });
   let rootEl = null;
   let root = null;
@@ -1786,29 +2985,98 @@ function readThemePrefs(storage) {
       return null;
     }
   };
-  return { theme: get("mma-theme-mode") || "light", palette: get("mma-palette") || "default" };
+  return {
+    theme: (() => {
+      const m = get("mma-theme-mode");
+      return m === "system" || m === "dark" || m === "light" ? m : "light";
+    })(),
+    palette: get("mma-palette") || "default",
+    cardStyle: get("mma-card-style") || "stamp"
+  };
 }
 function createHostShell(opts) {
   const storage = safeStorage(opts.storage);
   const themePrefs = readThemePrefs(storage);
+  let currentOrigin = opts.hostUrl.replace(/\/$/, "");
   const frame = createFrameController({
-    urlOf: (appId) => appFrameUrl(opts.hostUrl, appId, envFor(appId)),
+    urlOf: (appId) => appFrameUrl(currentOrigin, appId, envFor(appId)),
     envOf: (appId) => envFor(appId)
   });
+  let unsubEvents = null;
+  function bindHostEvents() {
+    unsubEvents?.();
+    unsubEvents = subscribeHostEvents(currentOrigin, {
+      // `mini_app_open` asked to show an app. Without this the panel opens on the list and
+      // the agent's follow-up (`mini_app_errors`, `mini_app_view_eval`) waits on a view that
+      // was never mounted — the dsh client already does this in its own stream handler.
+      onOpen: (appId, title) => {
+        optOnOpen();
+        void host.fetchApps().then((apps) => {
+          const app = apps.find((a) => a.id === appId);
+          if (app) panelRef()?.actions.openAppTab(app);
+          else if (title) console.warn(`[mma] opened app ${appId} is not registered on this host`);
+        });
+      },
+      onReload: (appId) => {
+        if (frame.map.has(appId)) frame.reload(appId);
+      },
+      onEval: (query) => relayViewEval(currentOrigin, frame, query),
+      onStorageNotice: (notice) => {
+        setPanelState({ storageNotice: notice });
+      }
+    });
+  }
   function envFor(appId) {
     const s = getPanelState();
     const app = s.apps.find((a) => a.id === appId);
-    return { theme: app?.theme?.theme || s.theme, palette: app?.theme?.palette || s.palette, dock: s.dock };
+    const theme = app?.theme?.theme || s.theme;
+    const palette = effectivePalette(app?.theme?.palette, Boolean(app?.localPalette), s.palette);
+    const custom = { ...s.customPalettes };
+    if (app?.localPalette) {
+      custom[LOCAL_PALETTE_ID] = {
+        label: app.localPalette.label,
+        swatch: app.localPalette.swatch,
+        tokens: app.localPalette.tokens
+      };
+    }
+    return {
+      theme,
+      palette,
+      dock: s.dock,
+      vars: themeCssVars(resolveMode(theme), palette, custom)
+    };
+  }
+  async function migrateOrigin(next) {
+    const origin = next.replace(/\/$/, "");
+    for (let i = 0; i < 30; i++) {
+      try {
+        const res = await fetch(`${origin}/health`);
+        if (res.ok) break;
+      } catch {
+      }
+      await new Promise((r) => setTimeout(r, 100));
+    }
+    currentOrigin = origin;
+    try {
+      storage?.setItem("mma-host-url", origin);
+    } catch {
+    }
+    opts.onHostChange?.(origin);
+    bindHostEvents();
+    for (const id of [...frame.map.keys()]) frame.reload(id);
   }
   const host = createRestPanelHost({
     hostUrl: opts.hostUrl,
+    getHostUrl: () => currentOrigin,
     storage,
     cardStyle: opts.cardStyle,
     locale: opts.locale ?? void 0,
     emptyText: opts.emptyText,
     onOpen: () => optOnOpen(),
     onClose: () => optOnClose(),
-    onHostChange: (next) => opts.onHostChange?.(next),
+    onHostChange: (next) => {
+      void migrateOrigin(next);
+    },
     frameController: {
       url: (appId) => frame.url(appId),
       // Lazy-bind the frames container (React may not have rendered #mma-frames yet).
@@ -1835,6 +3103,10 @@ function createHostShell(opts) {
   }
   let panel = null;
   let containerEl = null;
+  function panelRef() {
+    if (!panel) panel = createMiniAppPanel(host);
+    return panel;
+  }
   function optOnOpen() {
     setPanelState({ visible: true });
     opts.onOpen?.();
@@ -1857,15 +3129,15 @@ function createHostShell(opts) {
     host,
     frames: frame,
     get panel() {
-      if (!panel) panel = createMiniAppPanel(host);
-      return panel;
+      return panelRef();
     },
     mount(el) {
       containerEl = document.createElement("div");
       containerEl.id = "mma-host";
       containerEl.setAttribute("data-ready", "1");
       containerEl.setAttribute("data-dock", getPanelState().dock);
-      containerEl.setAttribute("data-cardstyle", getPanelState().cardStyle);
+      containerEl.setAttribute("data-cardstyle", themePrefs.cardStyle);
+      bindHostEvents();
       Object.assign(containerEl.style, {
         position: "fixed",
         top: "0",
@@ -1881,14 +3153,24 @@ function createHostShell(opts) {
       });
       const target = el ?? document.body;
       target.appendChild(containerEl);
-      setPanelState({ theme: themePrefs.theme, palette: themePrefs.palette, visible: true });
-      applyThemeTo(containerEl, themePrefs.theme, themePrefs.palette);
+      const cardStyle = themePrefs.cardStyle;
+      setPanelState({
+        theme: themePrefs.theme,
+        palette: themePrefs.palette,
+        cardStyle,
+        visible: true
+      });
       this.panel.mount(containerEl);
+      applyThemeTo(containerEl, themePrefs.theme, themePrefs.palette);
+      setPanelState({ theme: themePrefs.theme, palette: themePrefs.palette, cardStyle });
+      containerEl.setAttribute("data-cardstyle", cardStyle);
       const framesEl = containerEl.querySelector("#mma-frames");
       if (framesEl) frame.setContainer(framesEl);
       void this.panel.actions.fetchApps();
     },
     unmount() {
+      unsubEvents?.();
+      unsubEvents = null;
       panel?.unmount();
       panel = null;
       frame.unmountAll();
@@ -1920,4 +3202,4 @@ function createHostShell(opts) {
 // src/index.ts
 var packageName = "@monkey-mini-app/panel";
 
-export { AppList, Browse, HostUnreachableError, LOCALE_IDS, ListRegion, Loading, MiniAppPanel, Modal, PANEL_CSS_TAG, PanelError, PanelProvider, Settings, Tabs, ThemePop, Toolbar, activeAppFrom, appBlurb, appFrameUrl, capabilitiesOf, clampPaletteId, createFrameController, createHostShell, createMiniAppPanel, createPanelActions, createPanelI18n, createRestPanelHost, defaultHideThemePop, formToHostConfigBody, getPanelState, hostConfigToForm, hue, injectPanelCss, isHostUnreachable, monoOf, packageName, parseAppsResponse, parseCommitDetail, parseCommitList, parsePalettes, parseStorageTables, readJson, resetPanelState, resolvePanelLocale, setPanelState, subscribePanel, usePanelActions, usePanelI18n, usePanelState };
+export { AppList, Browse, HostUnreachableError, LOCALE_IDS, ListRegion, Loading, MiniAppPanel, Modal, PANEL_CSS_TAG, PanelError, PanelProvider, Settings, Tabs, ThemePop, Toolbar, activeAppFrom, appBlurb, appFrameUrl, capabilitiesOf, clampPaletteId, createFrameController, createHostShell, createMiniAppPanel, createPanelActions, createPanelI18n, createRestPanelHost, defaultHideThemePop, formToHostConfigBody, getPanelState, hostConfigToForm, hue, injectPanelCss, isHostUnreachable, monoOf, packageName, parseAppsResponse, parseCommitDetail, parseCommitList, parsePalettes, parseStorageTables, readJson, relayViewEval, resetPanelState, resolvePanelLocale, setPanelState, subscribeHostEvents, subscribePanel, usePanelActions, usePanelI18n, usePanelState };