@ddtcorex/dsh-maestro-config 0.2.0 → 0.3.0

package/lib/client.js

@@ -2176,6 +2176,18 @@ var t = {
   shadowLv3: "var(--dsw-shadow-lv3)",
   scrollbarL2: "var(--dsw-alias-scrollbar-bg-l2)"
 };
+var TAB_ICON_PATHS = {
+  globe: "M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20M2 12h20M12 2a15 15 0 0 1 4 10 15 15 0 0 1-4 10 15 15 0 0 1-4-10A15 15 0 0 1 12 2z",
+  git: "M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5 0-1.2-.4-2.3-1-3 0-1 0-2 0-3s-1 0-2 1a11 11 0 0 0-6 0c-1-1-2-1-2-1 0 1 0 2 0 3-.6.7-1 1.8-1 3 0 3.5 3 5.5 6 5.5-.4.3-.7.7-.9 1.2-.2.5-.3 1-.3 1.5V22",
+  search: "M11 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14zM20 20l-3.5-3.5",
+  shield: "M12 2l7 4v5c0 5-3.5 7.5-7 9-3.5-1.5-7-4-7-9V6l7-4z",
+  ban: "M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zM4 12h16",
+  cpu: "M5 12H2a2 2 0 0 1 2-2h2M12 5V2a2 2 0 0 1 2 2v2M19 12h2a2 2 0 0 1-2 2h-2M12 19v2a2 2 0 0 1-2-2v-2M8 8h8v8H8z",
+  bell: "M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9M13.7 21a2 2 0 0 1-3.4 0"
+};
+function TabIcon({ name, size = 14 }) {
+  return (0, import_react.createElement)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.8, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", style: { flex: "none" } }, (0, import_react.createElement)("path", { d: TAB_ICON_PATHS[name] }));
+}
 function Button({
   variant = "ghost",
   size = "md",
@@ -2520,14 +2532,15 @@ function ReviewModelSelector({
     position: "absolute",
     top: "calc(100% + 8px)",
     left: "0",
-    minWidth: "300px",
-    maxWidth: "360px",
+    minWidth: "min(300px, calc(100vw - 32px))",
+    maxWidth: "min(360px, calc(100vw - 24px))",
     background: t.bgLayer2,
     border: `1px solid ${t.borderL2}`,
     borderRadius: "12px",
     boxShadow: t.shadowLv3,
     zIndex: "20",
-    padding: "6px"
+    padding: "6px",
+    boxSizing: "border-box"
   };
   const rowStyle2 = {
     width: "100%",
@@ -2551,7 +2564,7 @@ function ReviewModelSelector({
   const modelLabel = selectedProvider === "" ? "Select model" : value?.model ?? "Select model";
   return (0, import_react.createElement)(
     "div",
-    { ref: rootRef, "data-maestro-trigger-wrap": "", style: { position: "relative", display: "inline-block", maxWidth: "100%" } },
+    { ref: rootRef, "data-maestro-trigger-wrap": "", style: { position: "relative", display: "inline-block", maxWidth: "100%", minWidth: 0, boxSizing: "border-box" } },
     label ? (0, import_react.createElement)("span", { style: fieldLabelStyle }, label) : null,
     (0, import_react.createElement)(
       "button",
@@ -2570,8 +2583,10 @@ function ReviewModelSelector({
           alignItems: "center",
           gap: 8,
           cursor: "pointer",
-          maxWidth: 320,
-          whiteSpace: "nowrap"
+          maxWidth: "min(320px, 100%)",
+          minWidth: 0,
+          whiteSpace: "nowrap",
+          boxSizing: "border-box"
         },
         onClick: () => {
           setOpen((v) => !v);
@@ -2977,6 +2992,143 @@ function NamedTunnelSetupNote() {
     (0, import_react.createElement)("ol", { style: { margin: "4px 0", paddingLeft: 20, fontSize: 12, color: t.labelSecondary, lineHeight: "18px" } }, (0, import_react.createElement)("li", null, "cloudflared tunnel login"), (0, import_react.createElement)("li", null, "cloudflared tunnel create dsh-maestro-webhook"), (0, import_react.createElement)("li", null, "cloudflared tunnel route dns dsh-maestro-webhook <your-hostname>"), (0, import_react.createElement)("li", null, "Paste the printed Tunnel ID, credentials file path and hostname below."))
   );
 }
+function PlaceholderMappingsEditor({ rows, onChange }) {
+  const updateRow = (index, field, value) => {
+    onChange(rows.map((row, i) => i === index ? { ...row, [field]: value } : row));
+  };
+  const removeRow = (index) => onChange(rows.filter((_, i) => i !== index));
+  const addRow = () => onChange([...rows, { pattern: "", suggestion: "" }]);
+  return (0, import_react.createElement)(
+    "div",
+    { "data-maestro-placeholders": "", style: { display: "flex", flexDirection: "column", gap: 12, paddingTop: 8 } },
+    // Header — count + primary Add (stacks on mobile via CSS)
+    (0, import_react.createElement)(
+      "div",
+      { "data-maestro-placeholders-header": "", style: { display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 12, padding: "4px 0" } },
+      (0, import_react.createElement)(
+        "div",
+        { style: { flex: 1, minWidth: 0 } },
+        (0, import_react.createElement)("div", { style: { fontSize: 14, fontWeight: 600, color: t.labelPrimary, lineHeight: "20px" } }, `Placeholder mappings \u2014 ${rows.length} mapped`),
+        (0, import_react.createElement)("div", { style: { fontSize: 12, color: t.labelSecondary, lineHeight: "16px", marginTop: 2 } }, "Blocked pattern \u2192 placeholder suggestion, one mapping per row")
+      ),
+      (0, import_react.createElement)(Button, { variant: "primary", size: "md", onClick: addRow, "data-maestro-placeholders-add": "" }, "+ Add mapping")
+    ),
+    rows.length === 0 ? (0, import_react.createElement)(
+      "div",
+      {
+        "data-maestro-placeholders-empty": "",
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          gap: 10,
+          padding: "20px 16px",
+          borderRadius: 12,
+          border: `1px dashed ${t.borderL2}`,
+          background: "transparent",
+          textAlign: "center"
+        }
+      },
+      (0, import_react.createElement)("div", { style: { fontSize: 13, color: t.labelSecondary, lineHeight: "18px" } }, "No placeholder mappings yet \u2014 add your first mapping"),
+      (0, import_react.createElement)(Button, { variant: "outline", size: "md", onClick: addRow }, "+ Add mapping")
+    ) : (0, import_react.createElement)(
+      "div",
+      { "data-maestro-placeholders-list": "", style: { display: "flex", flexDirection: "column", gap: 12 } },
+      ...rows.map(
+        (row, i) => (0, import_react.createElement)(
+          "div",
+          {
+            key: i,
+            "data-maestro-mapping-card": "",
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              gap: 12,
+              padding: 12,
+              borderRadius: 12,
+              border: `1px solid ${t.borderL2}`,
+              background: t.bgLayer1,
+              boxSizing: "border-box"
+            }
+          },
+          // Card header: index badge + preview + X (same as Review's project card header)
+          (0, import_react.createElement)(
+            "div",
+            { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12 } },
+            (0, import_react.createElement)(
+              "div",
+              { style: { display: "flex", alignItems: "center", gap: 8, minWidth: 0, flex: 1 } },
+              (0, import_react.createElement)(
+                "span",
+                {
+                  style: {
+                    flex: "none",
+                    width: 24,
+                    height: 24,
+                    borderRadius: 12,
+                    background: "var(--dsw-alias-bg-module-platform, #F5F6F7)",
+                    display: "inline-flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    fontSize: 11,
+                    fontWeight: 600,
+                    color: t.labelSecondary
+                  }
+                },
+                String(i + 1)
+              ),
+              (0, import_react.createElement)(
+                "span",
+                {
+                  style: {
+                    fontSize: 12,
+                    fontFamily: "ui-monospace, monospace",
+                    color: row.pattern ? t.labelPrimary : t.labelTertiary,
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap",
+                    minWidth: 0
+                  }
+                },
+                row.pattern ? row.suggestion ? `${row.pattern} \u2192 ${row.suggestion}` : `${row.pattern} \u2192 \u2026` : "New mapping"
+              )
+            ),
+            (0, import_react.createElement)(Button, { variant: "outline", size: "sm", onClick: () => removeRow(i), "aria-label": `Remove mapping ${i + 1}`, title: "Remove mapping" }, "\u2715")
+          ),
+          // Fields grid — 2-col desktop, 1-col mobile (same as Review's project grid)
+          (0, import_react.createElement)(
+            "div",
+            { "data-maestro-mapping-grid": "", style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 } },
+            (0, import_react.createElement)(
+              "label",
+              { style: fieldLabelStyle, "data-maestro-field": "" },
+              "Blocked pattern",
+              (0, import_react.createElement)(FieldInput, {
+                value: row.pattern,
+                placeholder: "example-project",
+                onChange: (e) => updateRow(i, "pattern", e.target.value),
+                "aria-label": `Blocked pattern ${i + 1}`,
+                style: { width: "100%" }
+              })
+            ),
+            (0, import_react.createElement)(
+              "label",
+              { style: fieldLabelStyle, "data-maestro-field": "" },
+              "Placeholder",
+              (0, import_react.createElement)(FieldInput, {
+                value: row.suggestion,
+                placeholder: "my-project",
+                onChange: (e) => updateRow(i, "suggestion", e.target.value),
+                "aria-label": `Placeholder suggestion ${i + 1}`,
+                style: { width: "100%" }
+              })
+            )
+          )
+        )
+      )
+    )
+  );
+}
 function MaestroSettingsTab({ rpcCall, configRpcCall }) {
   const [status, setStatus] = (0, import_react.useState)(null);
   const [proxyStatus, setProxyStatus] = (0, import_react.useState)(null);
@@ -2991,34 +3143,49 @@ function MaestroSettingsTab({ rpcCall, configRpcCall }) {
   const [showLanPin, setShowLanPin] = (0, import_react.useState)(false);
   const [guard, setGuard] = (0, import_react.useState)({});
   const [patternsText, setPatternsText] = (0, import_react.useState)("");
-  const [placeholdersText, setPlaceholdersText] = (0, import_react.useState)("");
+  const [placeholderRows, setPlaceholderRows] = (0, import_react.useState)([]);
   const [supervisorCfg, setSupervisorCfg] = (0, import_react.useState)({});
   const [notifierCfg, setNotifierCfg] = (0, import_react.useState)({});
   const [activeTab, setActiveTab] = (0, import_react.useState)("tunnel");
   (0, import_react.useEffect)(() => {
     const css = `
-      /* Maestro nested tabs \u2014 market-like pill bar + mobile fixes */
-      [data-maestro-tabs] { display:flex; gap:6px; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; touch-action:pan-x; padding-bottom:6px; margin-bottom:10px; border-bottom:1px solid var(--dsw-alias-border-l1, rgba(0,0,0,.08)); }
+      /* Model override dropdown \u2014 prevent right-edge overlap */
+      [data-maestro-control] [data-maestro-menu] { left:auto !important; right:0 !important; }
+      [data-maestro-project-card] [data-maestro-menu] { left:auto !important; right:0 !important; }
+      [data-maestro-trigger-wrap] { min-width:0; }
+      /* Maestro nested tabs \u2014 unified with dsh-maestro-jobs (maestro-design pill bar) */
+      [data-maestro-tabs] { display:flex; gap:6px; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; touch-action:pan-x; padding:2px 2px 8px; margin:0 -2px 4px; border-bottom:1px solid var(--dsw-alias-border-l1, rgba(0,0,0,.08)); }
       [data-maestro-tabs]::-webkit-scrollbar { display:none; width:0; height:0; }
-      [data-maestro-tab] { flex:none; height:32px; min-width:fit-content; padding:0 14px; border-radius:999px; border:1px solid var(--dsw-alias-border-l1, rgba(0,0,0,.12)); background:transparent; color:var(--dsw-alias-label-primary); font-size:13px; line-height:20px; white-space:nowrap; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; font-family:inherit; -webkit-tap-highlight-color:transparent; }
-      [data-maestro-tab][data-active="true"] { background:var(--dsw-specific-sidebar-nav-item-active, #EBEEF2); border-color:var(--dsw-specific-sidebar-nav-item-active, #EBEEF2); color:var(--dsw-alias-label-primary); }
+      [data-maestro-tab] { flex:none; min-width:fit-content; min-height:40px; padding:0 14px; border-radius:999px; border:1px solid var(--dsw-alias-border-l1, rgba(0,0,0,.12)); background:transparent; color:var(--dsw-alias-label-secondary); font-size:13px; line-height:20px; font-weight:500; font-family:inherit; white-space:nowrap; display:inline-flex; align-items:center; justify-content:center; gap:6px; cursor:pointer; -webkit-tap-highlight-color:transparent; transition: background 150ms ease, color 150ms ease, border-color 150ms ease; touch-action:manipulation; }
+      [data-maestro-tab][data-active="true"] { background:var(--dsw-specific-sidebar-nav-item-active, #EBEEF2); border-color:var(--dsw-specific-sidebar-nav-item-active, #EBEEF2); color:var(--dsw-alias-label-primary); font-weight:600; }
       [data-maestro-tab]:hover { background:var(--dsw-alias-interactive-bg-hover, rgba(0,0,0,.06)); }
       [data-maestro-tab][data-active="true"]:hover { background:var(--dsw-specific-sidebar-nav-item-active, #EBEEF2); }
       [data-maestro-tab]:focus-visible { outline:2px solid var(--dsw-alias-state-business-primary, #4f6ef7); outline-offset:1px; }
+      [data-maestro-tab]:active { transform: scale(.97); }
       [data-maestro-panel] { width:100%; min-width:0; box-sizing:border-box; }
-      /* label \u2192 input d\xEDnh nhau fix: flex column gap + full width */
+      /* label/input overlap fix: flex column gap + full width */
       [data-maestro-panel] label { gap:6px !important; }
       [data-maestro-row]:last-child { border-bottom:none !important; }
       [data-maestro-panel] label > span { width:100% !important; box-sizing:border-box !important; }
+      @media (prefers-reduced-motion: reduce) {
+        [data-maestro-tab] { transition: none !important; }
+        [data-maestro-tab]:active { transform: none !important; }
+      }
       @media (max-width: 640px) {
         [data-maestro-settings-card] { max-width:100% !important; gap:6px !important; padding:0 2px !important; }
-        [data-maestro-tabs] { gap:6px !important; padding:0 0 6px !important; margin:0 -2px 10px !important; }
-        [data-maestro-tab] { height:32px !important; padding:0 12px !important; font-size:13px !important; }
-        [data-maestro-mapping-row] { flex-direction:column !important; align-items:stretch !important; gap:8px !important; }
-        [data-maestro-mapping-row] > * { flex:1 1 100% !important; width:100% !important; max-width:100% !important; }
+        [data-maestro-tabs] { gap:6px !important; padding:2px 2px 8px !important; margin:0 -2px 8px !important; }
+        [data-maestro-tab] { min-height:40px !important; height:auto !important; padding:0 12px !important; font-size:13px !important; }
+        /* Placeholder mappings \u2014 card design unified with Review project cards (header X, grid fields) */
+        [data-maestro-placeholders-header] { flex-direction: column !important; align-items: stretch !important; }
+        [data-maestro-placeholders-header] [data-maestro-placeholders-add] { width: 100% !important; justify-content: center !important; }
+        [data-maestro-placeholders-list] { gap: 12px !important; }
+        [data-maestro-mapping-card] { padding:10px !important; }
+        [data-maestro-mapping-grid] { grid-template-columns:1fr !important; gap:12px !important; }
         [data-maestro-qr-row] { flex-direction:column !important; align-items:flex-start !important; }
         [data-maestro-trigger-wrap] { max-width:100% !important; }
         [data-maestro-menu] { min-width:0 !important; max-width:calc(100vw - 32px) !important; left:0 !important; right:auto !important; }
+        [data-maestro-control] [data-maestro-menu] { left:0 !important; right:auto !important; }
+        [data-maestro-project-card] [data-maestro-menu] { left:0 !important; right:auto !important; }
         [data-maestro-panel] label { gap:8px !important; }
         div[data-maestro-row] { flex-direction:column !important; align-items:stretch !important; padding:12px 0 !important; }
         [data-maestro-row-text] { padding-right:0 !important; }
@@ -3031,7 +3198,7 @@ function MaestroSettingsTab({ rpcCall, configRpcCall }) {
         [data-maestro-project-profile-row] > label { flex:1 1 100% !important; width:100% !important; }
       }
       @media (max-width: 390px) {
-        [data-maestro-tab] { height:30px !important; padding:0 10px !important; font-size:12px !important; }
+        [data-maestro-tab] { min-height:38px !important; height:auto !important; padding:0 10px !important; font-size:12px !important; }
       }
     `;
     const tag = document.createElement("style");
@@ -3083,15 +3250,13 @@ function MaestroSettingsTab({ rpcCall, configRpcCall }) {
       setError(e.message ?? String(e));
     }
   };
-  const commitPlaceholders = async () => {
+  const commitPlaceholders = async (rows) => {
     setError(null);
-    let obj = {};
-    try {
-      obj = placeholdersText.trim() ? JSON.parse(placeholdersText) : {};
-      if (typeof obj !== "object" || obj === null || Array.isArray(obj)) throw new Error("placeholders must be JSON object");
-    } catch (e) {
-      setError(`placeholders JSON invalid: ${e.message ?? String(e)}`);
-      return;
+    const obj = {};
+    for (const row of rows) {
+      const pattern = (row.pattern ?? "").trim();
+      if (!pattern) continue;
+      obj[pattern] = (row.suggestion ?? "").trim();
     }
     try {
       await cfgSet("guardBlacklist", { placeholders: obj });
@@ -3114,6 +3279,7 @@ function MaestroSettingsTab({ rpcCall, configRpcCall }) {
       const next = { ...prev };
       for (const [k, v] of Object.entries(patch)) {
         if (k === "telegram" && typeof v === "object" && v !== null) next.telegram = { ...prev.telegram ?? {}, ...v };
+        else if (k === "policy" && typeof v === "object" && v !== null) next.policy = { ...prev.policy ?? {}, ...v };
         else next[k] = v;
       }
       return next;
@@ -3147,7 +3313,7 @@ function MaestroSettingsTab({ rpcCall, configRpcCall }) {
         const pats = Array.isArray(bl?.patterns) ? bl.patterns : [];
         const ph = bl?.placeholders && typeof bl.placeholders === "object" ? bl.placeholders : {};
         setPatternsText(pats.join("\n"));
-        setPlaceholdersText(JSON.stringify(ph, null, 2));
+        setPlaceholderRows(Object.entries(ph).map(([pattern, suggestion]) => ({ pattern, suggestion: String(suggestion) })));
         setSupervisorCfg(sup ?? {});
         setNotifierCfg(not ?? {});
       }).catch(() => {
@@ -3264,14 +3430,13 @@ function MaestroSettingsTab({ rpcCall, configRpcCall }) {
     }
   };
   const TABS = [
-    { id: "tunnel", label: "Tunnel" },
-    { id: "notify", label: "Notify" },
-    { id: "gitlab", label: "GitLab" },
-    { id: "review", label: "Review" },
-    { id: "guard", label: "Guard" },
-    { id: "blacklist", label: "Blacklist" },
-    { id: "supervisor", label: "Supervisor" },
-    { id: "notifier", label: "Notifier" }
+    { id: "tunnel", label: "Tunnel", icon: "globe" },
+    { id: "gitlab", label: "GitLab", icon: "git" },
+    { id: "review", label: "Review", icon: "search" },
+    { id: "guard", label: "Guard", icon: "shield" },
+    { id: "blacklist", label: "Blacklist", icon: "ban" },
+    { id: "supervisor", label: "Supervisor", icon: "cpu" },
+    { id: "notifier", label: "Notifier", icon: "bell" }
   ];
   const tabContents = {
     tunnel: (0, import_react.createElement)(
@@ -3290,14 +3455,6 @@ function MaestroSettingsTab({ rpcCall, configRpcCall }) {
       (0, import_react.createElement)("div", { style: { ...cardInsetStyle, marginTop: "12px" } }, (0, import_react.createElement)("div", { style: { fontSize: 13, fontWeight: 600, color: t.labelPrimary } }, "Remote access \u2014 LAN"), (0, import_react.createElement)(LanAccess, { proxyStatus, lanPin: lanPinEnabled === null ? null : { enabled: lanPinEnabled, pin: lanPin, show: showLanPin, onShow: revealLanPin, onHide: () => setShowLanPin(false), onRotate: rotateLanPin, onToggle: toggleLanPin } })),
       (0, import_react.createElement)("div", { style: { ...cardInsetStyle, marginTop: "12px" } }, (0, import_react.createElement)("div", { style: { fontSize: 13, fontWeight: 600, color: t.labelPrimary } }, "Public access"), (0, import_react.createElement)(PublicAccess, { status, pin, showPin, onRevealPin: revealPin, onHidePin: () => setShowPin(false), onRotatePin: rotatePin }))
     ),
-    notify: (0, import_react.createElement)(
-      "div",
-      { style: { display: "flex", flexDirection: "column" } },
-      (0, import_react.createElement)("div", { style: { padding: "12px 0", borderBottom: `1px solid ${t.borderL2}` } }, (0, import_react.createElement)("p", { style: captionStyle }, "Sends one protected startup update with the current public-access PIN to a single chat. Leave either credential blank to disable.")),
-      (0, import_react.createElement)(SettingRow, { title: "Bot token", description: "Telegram bot token from @BotFather.", control: (0, import_react.createElement)("div", { style: { display: "flex", gap: 8, alignItems: "center" } }, (0, import_react.createElement)(FieldInput, { placeholder: "123456:ABC-DEF...", type: "password", autoComplete: "off", value: config.hasTelegramBotToken ? "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022" : "", onChange: (e) => saveField("telegramBotToken", e.target.value), style: { width: 220 } }), config.hasTelegramBotToken ? (0, import_react.createElement)(Button, { variant: "outline", size: "md", onClick: () => saveField("telegramBotToken", "") }, "Clear") : null) }),
-      (0, import_react.createElement)(SettingRow, { title: "Chat ID", description: "Target chat, e.g. -1001234567890.", control: (0, import_react.createElement)(FieldInput, { placeholder: "-1001234567890", value: config.telegramChatId ?? "", onChange: (e) => saveField("telegramChatId", e.target.value), style: { width: 220 } }) }),
-      (0, import_react.createElement)(ToggleRow, { title: "Also notify about reviews", description: "One message per review run with its outcome.", checked: config.telegramReviewNotifications === true, onChange: (v) => saveField("telegramReviewNotifications", v) })
-    ),
     gitlab: (0, import_react.createElement)(
       "div",
       { style: { display: "flex", flexDirection: "column" } },
@@ -3343,11 +3500,17 @@ function MaestroSettingsTab({ rpcCall, configRpcCall }) {
         "div",
         { style: { ...rowStyle, flexDirection: "column", alignItems: "stretch", gap: 8, borderBottom: "none" } },
         (0, import_react.createElement)("div", { style: rowTitleStyle }, "Placeholder mappings"),
-        (0, import_react.createElement)("div", { style: rowDescStyle }, "JSON object mapping blocked patterns to placeholder suggestions."),
-        (0, import_react.createElement)(TextareaField, { value: placeholdersText, placeholder: '{"example-project":"my-project"}', onChange: (e) => setPlaceholdersText(e.target.value), onBlur: () => commitPlaceholders(), style: { minHeight: 80 } }),
+        (0, import_react.createElement)("div", { style: rowDescStyle }, "Blocked pattern \u2192 placeholder suggestion. One mapping per row \u2014 no JSON needed."),
+        (0, import_react.createElement)(PlaceholderMappingsEditor, {
+          rows: placeholderRows,
+          onChange: (rows) => {
+            setPlaceholderRows(rows);
+            commitPlaceholders(rows);
+          }
+        }),
         (0, import_react.createElement)("div", { style: { marginTop: 8 } }, (0, import_react.createElement)(Button, { variant: "outline", size: "sm", onClick: () => {
           commitBlacklistPatterns(patternsText);
-          commitPlaceholders();
+          commitPlaceholders(placeholderRows);
         } }, "Save Blacklist"))
       )
     ),
@@ -3367,9 +3530,10 @@ function MaestroSettingsTab({ rpcCall, configRpcCall }) {
     notifier: (0, import_react.createElement)(
       "div",
       { style: { display: "flex", flexDirection: "column" } },
-      (0, import_react.createElement)(SettingRow, { title: "Bot token", description: "Telegram bot token from @BotFather.", control: (0, import_react.createElement)(FieldInput, { type: "password", autoComplete: "off", value: notifierCfg.telegram?.botToken ?? "", placeholder: "123456:ABC-DEF...", onChange: (e) => saveNotifierCfg({ telegram: { botToken: e.target.value } }), style: { width: 260 } }) }),
-      (0, import_react.createElement)(SettingRow, { title: "Chat ID", description: "Target chat, e.g. -1001234567890.", control: (0, import_react.createElement)(FieldInput, { value: notifierCfg.telegram?.chatId ?? "", placeholder: "-1001234567890", onChange: (e) => saveNotifierCfg({ telegram: { chatId: e.target.value } }), style: { width: 260 } }) }),
-      (0, import_react.createElement)(ToggleRow, { title: "Review notifications", description: "Also notify about finished reviews.", checked: notifierCfg.telegram?.reviewNotifications === true || notifierCfg.policy?.reviewNotifications === true, onChange: (v) => saveNotifierCfg({ telegram: { reviewNotifications: v } }) })
+      (0, import_react.createElement)("div", { style: { padding: "12px 0", borderBottom: `1px solid ${t.borderL2}` } }, (0, import_react.createElement)("p", { style: captionStyle }, "Telegram bot settings for notifications: startup PIN, review digests, PIN rotation. Leave blank to disable.")),
+      (0, import_react.createElement)(SettingRow, { title: "Bot token", description: "Telegram bot token from @BotFather.", control: (0, import_react.createElement)("div", { style: { display: "flex", gap: 8, alignItems: "center" } }, (0, import_react.createElement)(FieldInput, { type: "password", autoComplete: "off", value: notifierCfg.telegram?.botToken ?? "", placeholder: "123456:ABC-DEF...", onChange: (e) => saveNotifierCfg({ telegram: { botToken: e.target.value } }), style: { width: 220 } }), notifierCfg.telegram?.botToken ? (0, import_react.createElement)(Button, { variant: "outline", size: "md", onClick: () => saveNotifierCfg({ telegram: { botToken: "" } }) }, "Clear") : null) }),
+      (0, import_react.createElement)(SettingRow, { title: "Chat ID", description: "Target chat, e.g. -1001234567890.", control: (0, import_react.createElement)(FieldInput, { value: notifierCfg.telegram?.chatId ?? "", placeholder: "-1001234567890", onChange: (e) => saveNotifierCfg({ telegram: { chatId: e.target.value } }), style: { width: 220 } }) }),
+      (0, import_react.createElement)(ToggleRow, { title: "Review notifications", description: "Also notify about finished reviews.", checked: notifierCfg.policy?.reviewNotifications === true, onChange: (v) => saveNotifierCfg({ policy: { reviewNotifications: v } }) })
     )
   };
   return (0, import_react.createElement)(
@@ -3377,14 +3541,31 @@ function MaestroSettingsTab({ rpcCall, configRpcCall }) {
     { "data-maestro-settings-card": "", style: { display: "flex", flexDirection: "column", gap: 8, width: "100%", maxWidth: 640, minWidth: 0, boxSizing: "border-box" } },
     (0, import_react.createElement)(
       "div",
-      { style: { padding: "2px 2px 8px" } },
-      (0, import_react.createElement)("div", { style: { fontSize: 15, fontWeight: 600, color: t.labelPrimary, lineHeight: "22px" } }, "Maestro"),
-      (0, import_react.createElement)("div", { style: { fontSize: 12, color: t.labelSecondary, lineHeight: "16px", marginTop: 2 } }, "Tunnel, access, review & guard \u2014 all via the shared Maestro store. Uses the same tokens and primitives as DSH settings.")
+      { style: { padding: "2px 2px 8px", display: "flex", gap: 10, alignItems: "flex-start" } },
+      // Shared BrandBadge — same as dashboard sidebar/popup (BrandMark #0A84FF)
+      (0, import_react.createElement)(
+        "span",
+        { "data-maestro-logo": "", style: { width: 28, height: 28, borderRadius: 8, display: "inline-flex", alignItems: "center", justifyContent: "center", background: "var(--dsw-alias-brand-primary, #0A84FF)", backgroundColor: "#0A84FF", color: "#fff", flex: "none", border: "1px solid rgba(0,0,0,0.08)", boxShadow: "0 0 0 1px var(--dsw-alias-border-l1)", boxSizing: "border-box", alignSelf: "flex-start", marginTop: 2 } },
+        (0, import_react.createElement)("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, (0, import_react.createElement)("path", { d: "M2 11 L5 4 L8 9 L11 4 L14 11", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round" }))
+      ),
+      (0, import_react.createElement)(
+        "div",
+        { style: { display: "flex", flexDirection: "column", minWidth: 0 } },
+        (0, import_react.createElement)("div", { style: { fontSize: 15, fontWeight: 600, color: t.labelPrimary, lineHeight: "22px" } }, "Maestro"),
+        (0, import_react.createElement)("div", { style: { fontSize: 12, color: t.labelSecondary, lineHeight: "16px", marginTop: 2 } }, "Tunnel, access, review & guard \u2014 all via the shared Maestro store. Uses the same tokens and primitives as DSH settings.")
+      )
     ),
+    (0, import_react.createElement)("style", {}, "[data-maestro-logo]{background:#0A84FF !important; background-color:#0A84FF !important; color:#fff !important;}"),
     (0, import_react.createElement)(
       "div",
       { "data-maestro-tabs": "", role: "tablist", "aria-label": "Maestro settings sections" },
-      ...TABS.map((tab) => (0, import_react.createElement)("button", { key: tab.id, "data-maestro-tab": "", "data-active": String(activeTab === tab.id), role: "tab", "aria-selected": activeTab === tab.id, onClick: () => setActiveTab(tab.id) }, tab.label))
+      ...TABS.map((tab) => (0, import_react.createElement)("button", { key: tab.id, "data-maestro-tab": "", "data-active": String(activeTab === tab.id), role: "tab", "aria-selected": activeTab === tab.id, onClick: (e) => {
+        setActiveTab(tab.id);
+        try {
+          e.currentTarget.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" });
+        } catch {
+        }
+      } }, (0, import_react.createElement)(TabIcon, { name: tab.icon }), tab.label))
     ),
     (0, import_react.createElement)("div", { "data-maestro-panel": activeTab, style: { display: "flex", flexDirection: "column", gap: 10, minWidth: 0 } }, tabContents[activeTab]),
     error ? (0, import_react.createElement)("p", { style: { color: t.stateError, fontSize: 12, margin: "8px 0 0", padding: "8px 10px", borderRadius: 8, background: "color-mix(in srgb, var(--dsw-alias-state-error-primary) 10%, transparent)", border: `1px solid color-mix(in srgb, var(--dsw-alias-state-error-primary) 30%, transparent)` } }, error) : null
@@ -3430,9 +3611,10 @@ function registerSettingsNavIcon(label, root) {
 // src/client/index.tsx
 var SETTINGS_NAV_CSS = `
 
-/* maestro: replace the settings-nav fallback gear with the Maestro M-logo glyph */
-[${SETTINGS_NAV_MARKER}] > svg:first-child {
-  display: none;
+/* maestro: replace the settings-nav fallback gear with the Maestro M-logo glyph \u2014 same mark as sidebar/popup BrandMark */
+[${SETTINGS_NAV_MARKER}] > svg:first-child,
+[${SETTINGS_NAV_MARKER}] > svg.zWKi1a_navIcon {
+  display: none !important;
 }
 
 [${SETTINGS_NAV_MARKER}]::before {
@@ -3440,9 +3622,10 @@ var SETTINGS_NAV_CSS = `
   flex: none;
   width: 16px;
   height: 16px;
+  display: inline-block;
   background: currentColor;
-  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 11 L5 4 L8 9 L11 4 L14 11'/%3E%3C/svg%3E") center / contain no-repeat;
-  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 11 L5 4 L8 9 L11 4 L14 11'/%3E%3C/svg%3E") center / contain no-repeat;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 11 L5 4 L8 9 L11 4 L14 11'/%3E%3C/svg%3E") center / contain no-repeat;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 11 L5 4 L8 9 L11 4 L14 11'/%3E%3C/svg%3E") center / contain no-repeat;
 }
 `;
 var inject = ["slots", "connection"];

package/lib/types/client/MaestroSettings.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MaestroSettings.d.ts","sourceRoot":"","sources":["../../../src/client/MaestroSettings.tsx"],"names":[],"mappings":"AACA;;;;;;;;GAQG;AA0hCH,wBAAgB,kBAAkB,CAAC,EAAE,OAAO,EAAE,aAAa,EAAE,EAAE;IAAE,OAAO,EAAE,GAAG,CAAC;IAAC,aAAa,CAAC,EAAE,GAAG,CAAA;CAAE;;;;;;;;;mBAsYmE,GAAG;;gBAazK"}
+{"version":3,"file":"MaestroSettings.d.ts","sourceRoot":"","sources":["../../../src/client/MaestroSettings.tsx"],"names":[],"mappings":"AACA;;;;;;;;GAQG;AAisCH,wBAAgB,kBAAkB,CAAC,EAAE,OAAO,EAAE,aAAa,EAAE,EAAE;IAAE,OAAO,EAAE,GAAG,CAAC;IAAC,aAAa,CAAC,EAAE,GAAG,CAAA;CAAE;;;;;;;;;mBAkZmE,GAAG;;gBAoBzK"}

package/lib/types/client/components/BrandMark.d.ts

@@ -0,0 +1,9 @@
+export declare function MaestroMark(props: {
+    size?: number;
+}): import("react").ReactSVGElement;
+export declare function BrandBadge(props: {
+    size?: number;
+    outer?: number;
+    radius?: number;
+}): import("react").DetailedReactHTMLElement<any, HTMLElement>;
+//# sourceMappingURL=BrandMark.d.ts.map

package/lib/types/client/components/BrandMark.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BrandMark.d.ts","sourceRoot":"","sources":["../../../../src/client/components/BrandMark.tsx"],"names":[],"mappings":"AAEA,wBAAgB,WAAW,CAAC,KAAK,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,mCAKnD;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,8DAYnF"}

package/lib/types/client/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/client/index.tsx"],"names":[],"mappings":"AAwCA,UAAU,SAAS;IACjB,GAAG,CAAC,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAA;IAC3B,MAAM,CAAC,EAAE,EAAE,MAAM,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;CACtD;AAED,eAAO,MAAM,MAAM,kCAAmC,CAAA;AAatD,wBAAgB,KAAK,CAAC,GAAG,EAAE,SAAS,GAAG,IAAI,CA+B1C"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/client/index.tsx"],"names":[],"mappings":"AA0CA,UAAU,SAAS;IACjB,GAAG,CAAC,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAA;IAC3B,MAAM,CAAC,EAAE,EAAE,MAAM,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;CACtD;AAED,eAAO,MAAM,MAAM,kCAAmC,CAAA;AAatD,wBAAgB,KAAK,CAAC,GAAG,EAAE,SAAS,GAAG,IAAI,CA+B1C"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ddtcorex/dsh-maestro-config",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "private": false,
   "description": "Maestro Config — shared settings service for the dsh-maestro-* suite over the single namespaced store (~/.dsh/maestro/settings.json)",
   "type": "module",
@@ -34,14 +34,14 @@
   },
   "peerDependencies": {
     "@deepseek-ai/cordis": "^4.0.1",
-    "@deepseek-ai/dsh-client-connection": "0.1.1-rc.2"
+    "@deepseek-ai/dsh-client-connection": "0.1.2-alpha.2"
   },
   "dependencies": {
     "@ddtcorex/dsh-maestro-config-lib": "^0.1.2"
   },
   "devDependencies": {
     "@deepseek-ai/cordis": "^4.0.1",
-    "@deepseek-ai/dsh-client-connection": "0.1.1-rc.2",
+    "@deepseek-ai/dsh-client-connection": "0.1.2-alpha.2",
     "@types/node": "^22.0.0",
     "@types/qrcode": "^1.5.6",
     "@types/react": "~18.3.1",

package/src/client/MaestroSettings.tsx

@@ -37,6 +37,26 @@ const t = {
   scrollbarL2: 'var(--dsw-alias-scrollbar-bg-l2)',
 }
 
+// ---------------------------------------------------------------------------
+// Nested pill tabs — unified with dsh-maestro-jobs (maestro-design: Minimalism & Swiss)
+// Shared geometry: 40px min-height (44px jobs → 40px unified, touch-friendly ≥24px WCAG),
+// 14px icon + 13px label gap 6, pill 999, border-l1, #EBEEF2 active, hover, focus ring.
+// Icons: lucide-style 14px SVG, stroke 1.8, currentColor.
+// ---------------------------------------------------------------------------
+type TabIcon = 'globe' | 'git' | 'search' | 'shield' | 'ban' | 'cpu' | 'bell'
+const TAB_ICON_PATHS: Record<TabIcon, string> = {
+  globe: 'M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20M2 12h20M12 2a15 15 0 0 1 4 10 15 15 0 0 1-4 10 15 15 0 0 1-4-10A15 15 0 0 1 12 2z',
+  git: 'M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5 0-1.2-.4-2.3-1-3 0-1 0-2 0-3s-1 0-2 1a11 11 0 0 0-6 0c-1-1-2-1-2-1 0 1 0 2 0 3-.6.7-1 1.8-1 3 0 3.5 3 5.5 6 5.5-.4.3-.7.7-.9 1.2-.2.5-.3 1-.3 1.5V22',
+  search: 'M11 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14zM20 20l-3.5-3.5',
+  shield: 'M12 2l7 4v5c0 5-3.5 7.5-7 9-3.5-1.5-7-4-7-9V6l7-4z',
+  ban: 'M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zM4 12h16',
+  cpu: 'M5 12H2a2 2 0 0 1 2-2h2M12 5V2a2 2 0 0 1 2 2v2M19 12h2a2 2 0 0 1-2 2h-2M12 19v2a2 2 0 0 1-2-2v-2M8 8h8v8H8z',
+  bell: 'M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9M13.7 21a2 2 0 0 1-3.4 0',
+}
+function TabIcon({ name, size = 14 }: { name: TabIcon; size?: number }) {
+  return h('svg', { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 1.8, strokeLinecap: 'round', strokeLinejoin: 'round', 'aria-hidden': 'true', style: { flex: 'none' } }, h('path', { d: TAB_ICON_PATHS[name] }))
+}
+
 // ---------------------------------------------------------------------------
 // Lightweight DSH primitive mirrors (geometry + tokens identical to host)
 // Usage is identical to @deepseek-ai/dsh-client-ui-primitives at runtime.
@@ -533,14 +553,15 @@ function ReviewModelSelector({
     position: 'absolute',
     top: 'calc(100% + 8px)',
     left: '0',
-    minWidth: '300px',
-    maxWidth: '360px',
+    minWidth: 'min(300px, calc(100vw - 32px))',
+    maxWidth: 'min(360px, calc(100vw - 24px))',
     background: t.bgLayer2 as string,
     border: `1px solid ${t.borderL2}`,
     borderRadius: '12px',
     boxShadow: t.shadowLv3 as string,
     zIndex: '20',
     padding: '6px',
+    boxSizing: 'border-box' as string,
   }
   const rowStyle: Record<string, any> = {
     width: '100%',
@@ -567,7 +588,7 @@ function ReviewModelSelector({
   const modelLabel = selectedProvider === '' ? 'Select model' : (value?.model ?? 'Select model')
   return h(
     'div',
-    { ref: rootRef as any, 'data-maestro-trigger-wrap': '', style: { position: 'relative', display: 'inline-block', maxWidth: '100%' } },
+    { ref: rootRef as any, 'data-maestro-trigger-wrap': '', style: { position: 'relative', display: 'inline-block', maxWidth: '100%', minWidth: 0, boxSizing: 'border-box' as string } },
     label ? h('span', { style: fieldLabelStyle }, label) : null,
     h(
       'button',
@@ -586,8 +607,10 @@ function ReviewModelSelector({
           alignItems: 'center',
           gap: 8,
           cursor: 'pointer',
-          maxWidth: 320,
+          maxWidth: 'min(320px, 100%)',
+          minWidth: 0,
           whiteSpace: 'nowrap',
+          boxSizing: 'border-box' as string,
         },
         onClick: () => {
           setOpen((v) => !v)
@@ -1054,6 +1077,150 @@ function NamedTunnelSetupNote() {
   )
 }
 
+// ---------------------------------------------------------------------------
+// PlaceholderMappingsEditor — row-based "blocked pattern → suggestion" mappings
+// (same interaction as ProjectMappingsEditor; no JSON editing for users)
+// ---------------------------------------------------------------------------
+function PlaceholderMappingsEditor({ rows, onChange }: { rows: { pattern: string; suggestion: string }[]; onChange: (rows: { pattern: string; suggestion: string }[]) => void }) {
+  const updateRow = (index: number, field: 'pattern' | 'suggestion', value: string) => {
+    onChange(rows.map((row, i) => (i === index ? { ...row, [field]: value } : row)))
+  }
+  const removeRow = (index: number) => onChange(rows.filter((_, i) => i !== index))
+  const addRow = () => onChange([...rows, { pattern: '', suggestion: '' }])
+  return h(
+    'div',
+    { 'data-maestro-placeholders': '', style: { display: 'flex', flexDirection: 'column', gap: 12, paddingTop: 8 } },
+    // Header — count + primary Add (stacks on mobile via CSS)
+    h(
+      'div',
+      { 'data-maestro-placeholders-header': '', style: { display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 12, padding: '4px 0' } },
+      h(
+        'div',
+        { style: { flex: 1, minWidth: 0 } },
+        h('div', { style: { fontSize: 14, fontWeight: 600, color: t.labelPrimary as string, lineHeight: '20px' } }, `Placeholder mappings — ${rows.length} mapped`),
+        h('div', { style: { fontSize: 12, color: t.labelSecondary as string, lineHeight: '16px', marginTop: 2 } }, 'Blocked pattern → placeholder suggestion, one mapping per row'),
+      ),
+      h(Button as any, { variant: 'primary', size: 'md', onClick: addRow, 'data-maestro-placeholders-add': '' }, '+ Add mapping'),
+    ),
+    rows.length === 0
+      ? h(
+          'div',
+          {
+            'data-maestro-placeholders-empty': '',
+            style: {
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              gap: 10,
+              padding: '20px 16px',
+              borderRadius: 12,
+              border: `1px dashed ${t.borderL2}`,
+              background: 'transparent',
+              textAlign: 'center' as const,
+            },
+          },
+          h('div', { style: { fontSize: 13, color: t.labelSecondary as string, lineHeight: '18px' } }, 'No placeholder mappings yet — add your first mapping'),
+          h(Button as any, { variant: 'outline', size: 'md', onClick: addRow }, '+ Add mapping'),
+        )
+      : h(
+          'div',
+          { 'data-maestro-placeholders-list': '', style: { display: 'flex', flexDirection: 'column', gap: 12 } },
+          ...rows.map((row, i) =>
+            h(
+              'div',
+              {
+                key: i,
+                'data-maestro-mapping-card': '',
+                style: {
+                  display: 'flex',
+                  flexDirection: 'column',
+                  gap: 12,
+                  padding: 12,
+                  borderRadius: 12,
+                  border: `1px solid ${t.borderL2}`,
+                  background: t.bgLayer1 as string,
+                  boxSizing: 'border-box' as const,
+                },
+              },
+              // Card header: index badge + preview + X (same as Review's project card header)
+              h(
+                'div',
+                { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 } },
+                h(
+                  'div',
+                  { style: { display: 'flex', alignItems: 'center', gap: 8, minWidth: 0, flex: 1 } },
+                  h(
+                    'span',
+                    {
+                      style: {
+                        flex: 'none',
+                        width: 24,
+                        height: 24,
+                        borderRadius: 12,
+                        background: 'var(--dsw-alias-bg-module-platform, #F5F6F7)',
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        fontSize: 11,
+                        fontWeight: 600,
+                        color: t.labelSecondary as string,
+                      },
+                    },
+                    String(i + 1),
+                  ),
+                  h(
+                    'span',
+                    {
+                      style: {
+                        fontSize: 12,
+                        fontFamily: 'ui-monospace, monospace',
+                        color: row.pattern ? (t.labelPrimary as string) : (t.labelTertiary as string),
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap',
+                        minWidth: 0,
+                      },
+                    },
+                    row.pattern ? (row.suggestion ? `${row.pattern} → ${row.suggestion}` : `${row.pattern} → …`) : 'New mapping',
+                  ),
+                ),
+                h(Button as any, { variant: 'outline', size: 'sm', onClick: () => removeRow(i), 'aria-label': `Remove mapping ${i + 1}`, title: 'Remove mapping' }, '✕'),
+              ),
+              // Fields grid — 2-col desktop, 1-col mobile (same as Review's project grid)
+              h(
+                'div',
+                { 'data-maestro-mapping-grid': '', style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 } },
+                h(
+                  'label',
+                  { style: fieldLabelStyle, 'data-maestro-field': '' },
+                  'Blocked pattern',
+                  h(FieldInput as any, {
+                    value: row.pattern,
+                    placeholder: 'example-project',
+                    onChange: (e: any) => updateRow(i, 'pattern', e.target.value),
+                    'aria-label': `Blocked pattern ${i + 1}`,
+                    style: { width: '100%' } as any,
+                  }),
+                ),
+                h(
+                  'label',
+                  { style: fieldLabelStyle, 'data-maestro-field': '' },
+                  'Placeholder',
+                  h(FieldInput as any, {
+                    value: row.suggestion,
+                    placeholder: 'my-project',
+                    onChange: (e: any) => updateRow(i, 'suggestion', e.target.value),
+                    'aria-label': `Placeholder suggestion ${i + 1}`,
+                    style: { width: '100%' } as any,
+                  }),
+                ),
+              ),
+            ),
+          ),
+        ),
+  )
+}
+
 // ---------------------------------------------------------------------------
 // Main — DSH-native grouped settings (DisclosureRow per domain)
 // ---------------------------------------------------------------------------
@@ -1071,35 +1238,50 @@ export function MaestroSettingsTab({ rpcCall, configRpcCall }: { rpcCall: any; c
   const [showLanPin, setShowLanPin] = useState(false)
   const [guard, setGuard] = useState<any>({})
   const [patternsText, setPatternsText] = useState('')
-  const [placeholdersText, setPlaceholdersText] = useState('')
+  const [placeholderRows, setPlaceholderRows] = useState<{ pattern: string; suggestion: string }[]>([])
   const [supervisorCfg, setSupervisorCfg] = useState<any>({})
   const [notifierCfg, setNotifierCfg] = useState<any>({})
   const [activeTab, setActiveTab] = useState('tunnel')
   // Mobile: inject responsive overrides once (mirrors dsh-maestro-mobile settings-sheet pill pattern + market catsWrap)
   useEffect(() => {
     const css = `
-      /* Maestro nested tabs — market-like pill bar + mobile fixes */
-      [data-maestro-tabs] { display:flex; gap:6px; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; touch-action:pan-x; padding-bottom:6px; margin-bottom:10px; border-bottom:1px solid var(--dsw-alias-border-l1, rgba(0,0,0,.08)); }
+      /* Model override dropdown — prevent right-edge overlap */
+      [data-maestro-control] [data-maestro-menu] { left:auto !important; right:0 !important; }
+      [data-maestro-project-card] [data-maestro-menu] { left:auto !important; right:0 !important; }
+      [data-maestro-trigger-wrap] { min-width:0; }
+      /* Maestro nested tabs — unified with dsh-maestro-jobs (maestro-design pill bar) */
+      [data-maestro-tabs] { display:flex; gap:6px; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; touch-action:pan-x; padding:2px 2px 8px; margin:0 -2px 4px; border-bottom:1px solid var(--dsw-alias-border-l1, rgba(0,0,0,.08)); }
       [data-maestro-tabs]::-webkit-scrollbar { display:none; width:0; height:0; }
-      [data-maestro-tab] { flex:none; height:32px; min-width:fit-content; padding:0 14px; border-radius:999px; border:1px solid var(--dsw-alias-border-l1, rgba(0,0,0,.12)); background:transparent; color:var(--dsw-alias-label-primary); font-size:13px; line-height:20px; white-space:nowrap; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; font-family:inherit; -webkit-tap-highlight-color:transparent; }
-      [data-maestro-tab][data-active="true"] { background:var(--dsw-specific-sidebar-nav-item-active, #EBEEF2); border-color:var(--dsw-specific-sidebar-nav-item-active, #EBEEF2); color:var(--dsw-alias-label-primary); }
+      [data-maestro-tab] { flex:none; min-width:fit-content; min-height:40px; padding:0 14px; border-radius:999px; border:1px solid var(--dsw-alias-border-l1, rgba(0,0,0,.12)); background:transparent; color:var(--dsw-alias-label-secondary); font-size:13px; line-height:20px; font-weight:500; font-family:inherit; white-space:nowrap; display:inline-flex; align-items:center; justify-content:center; gap:6px; cursor:pointer; -webkit-tap-highlight-color:transparent; transition: background 150ms ease, color 150ms ease, border-color 150ms ease; touch-action:manipulation; }
+      [data-maestro-tab][data-active="true"] { background:var(--dsw-specific-sidebar-nav-item-active, #EBEEF2); border-color:var(--dsw-specific-sidebar-nav-item-active, #EBEEF2); color:var(--dsw-alias-label-primary); font-weight:600; }
       [data-maestro-tab]:hover { background:var(--dsw-alias-interactive-bg-hover, rgba(0,0,0,.06)); }
       [data-maestro-tab][data-active="true"]:hover { background:var(--dsw-specific-sidebar-nav-item-active, #EBEEF2); }
       [data-maestro-tab]:focus-visible { outline:2px solid var(--dsw-alias-state-business-primary, #4f6ef7); outline-offset:1px; }
+      [data-maestro-tab]:active { transform: scale(.97); }
       [data-maestro-panel] { width:100%; min-width:0; box-sizing:border-box; }
-      /* label → input dính nhau fix: flex column gap + full width */
+      /* label/input overlap fix: flex column gap + full width */
       [data-maestro-panel] label { gap:6px !important; }
       [data-maestro-row]:last-child { border-bottom:none !important; }
       [data-maestro-panel] label > span { width:100% !important; box-sizing:border-box !important; }
+      @media (prefers-reduced-motion: reduce) {
+        [data-maestro-tab] { transition: none !important; }
+        [data-maestro-tab]:active { transform: none !important; }
+      }
       @media (max-width: 640px) {
         [data-maestro-settings-card] { max-width:100% !important; gap:6px !important; padding:0 2px !important; }
-        [data-maestro-tabs] { gap:6px !important; padding:0 0 6px !important; margin:0 -2px 10px !important; }
-        [data-maestro-tab] { height:32px !important; padding:0 12px !important; font-size:13px !important; }
-        [data-maestro-mapping-row] { flex-direction:column !important; align-items:stretch !important; gap:8px !important; }
-        [data-maestro-mapping-row] > * { flex:1 1 100% !important; width:100% !important; max-width:100% !important; }
+        [data-maestro-tabs] { gap:6px !important; padding:2px 2px 8px !important; margin:0 -2px 8px !important; }
+        [data-maestro-tab] { min-height:40px !important; height:auto !important; padding:0 12px !important; font-size:13px !important; }
+        /* Placeholder mappings — card design unified with Review project cards (header X, grid fields) */
+        [data-maestro-placeholders-header] { flex-direction: column !important; align-items: stretch !important; }
+        [data-maestro-placeholders-header] [data-maestro-placeholders-add] { width: 100% !important; justify-content: center !important; }
+        [data-maestro-placeholders-list] { gap: 12px !important; }
+        [data-maestro-mapping-card] { padding:10px !important; }
+        [data-maestro-mapping-grid] { grid-template-columns:1fr !important; gap:12px !important; }
         [data-maestro-qr-row] { flex-direction:column !important; align-items:flex-start !important; }
         [data-maestro-trigger-wrap] { max-width:100% !important; }
         [data-maestro-menu] { min-width:0 !important; max-width:calc(100vw - 32px) !important; left:0 !important; right:auto !important; }
+        [data-maestro-control] [data-maestro-menu] { left:0 !important; right:auto !important; }
+        [data-maestro-project-card] [data-maestro-menu] { left:0 !important; right:auto !important; }
         [data-maestro-panel] label { gap:8px !important; }
         div[data-maestro-row] { flex-direction:column !important; align-items:stretch !important; padding:12px 0 !important; }
         [data-maestro-row-text] { padding-right:0 !important; }
@@ -1112,7 +1294,7 @@ export function MaestroSettingsTab({ rpcCall, configRpcCall }: { rpcCall: any; c
         [data-maestro-project-profile-row] > label { flex:1 1 100% !important; width:100% !important; }
       }
       @media (max-width: 390px) {
-        [data-maestro-tab] { height:30px !important; padding:0 10px !important; font-size:12px !important; }
+        [data-maestro-tab] { min-height:38px !important; height:auto !important; padding:0 10px !important; font-size:12px !important; }
       }
     `
     const tag = document.createElement('style')
@@ -1165,15 +1347,13 @@ export function MaestroSettingsTab({ rpcCall, configRpcCall }: { rpcCall: any; c
       setError(e.message ?? String(e))
     }
   }
-  const commitPlaceholders = async () => {
+  const commitPlaceholders = async (rows: { pattern: string; suggestion: string }[]) => {
     setError(null)
-    let obj: any = {}
-    try {
-      obj = placeholdersText.trim() ? JSON.parse(placeholdersText) : {}
-      if (typeof obj !== 'object' || obj === null || Array.isArray(obj)) throw new Error('placeholders must be JSON object')
-    } catch (e: any) {
-      setError(`placeholders JSON invalid: ${e.message ?? String(e)}`)
-      return
+    const obj: Record<string, string> = {}
+    for (const row of rows) {
+      const pattern = (row.pattern ?? '').trim()
+      if (!pattern) continue
+      obj[pattern] = (row.suggestion ?? '').trim()
     }
     try {
       await cfgSet('guardBlacklist', { placeholders: obj })
@@ -1196,6 +1376,7 @@ export function MaestroSettingsTab({ rpcCall, configRpcCall }: { rpcCall: any; c
       const next = { ...prev }
       for (const [k, v] of Object.entries(patch)) {
         if (k === 'telegram' && typeof v === 'object' && v !== null) (next as any).telegram = { ...((prev as any).telegram ?? {}), ...(v as any) }
+        else if (k === 'policy' && typeof v === 'object' && v !== null) (next as any).policy = { ...((prev as any).policy ?? {}), ...(v as any) }
         else (next as any)[k] = v
       }
       return next
@@ -1230,7 +1411,7 @@ export function MaestroSettingsTab({ rpcCall, configRpcCall }: { rpcCall: any; c
           const pats = Array.isArray((bl as any)?.patterns) ? (bl as any).patterns : []
           const ph = (bl as any)?.placeholders && typeof (bl as any).placeholders === 'object' ? (bl as any).placeholders : {}
           setPatternsText(pats.join('\n'))
-          setPlaceholdersText(JSON.stringify(ph, null, 2))
+          setPlaceholderRows(Object.entries(ph).map(([pattern, suggestion]) => ({ pattern, suggestion: String(suggestion) })))
           setSupervisorCfg(sup ?? {})
           setNotifierCfg(not ?? {})
         })
@@ -1348,17 +1529,16 @@ export function MaestroSettingsTab({ rpcCall, configRpcCall }: { rpcCall: any; c
     }
   }
 
-  // Nested tabs like plugin marketplace — pill bar + single panel (market catsWrap catsRow pattern)
-  const TABS = [
-    { id: 'tunnel', label: 'Tunnel' },
-    { id: 'notify', label: 'Notify' },
-    { id: 'gitlab', label: 'GitLab' },
-    { id: 'review', label: 'Review' },
-    { id: 'guard', label: 'Guard' },
-    { id: 'blacklist', label: 'Blacklist' },
-    { id: 'supervisor', label: 'Supervisor' },
-    { id: 'notifier', label: 'Notifier' },
-  ] as const
+  // Nested tabs — unified pill bar with icons (maestro-design, matches dsh-maestro-jobs)
+  const TABS: Array<{ id: string; label: string; icon: TabIcon }> = [
+    { id: 'tunnel', label: 'Tunnel', icon: 'globe' },
+    { id: 'gitlab', label: 'GitLab', icon: 'git' },
+    { id: 'review', label: 'Review', icon: 'search' },
+    { id: 'guard', label: 'Guard', icon: 'shield' },
+    { id: 'blacklist', label: 'Blacklist', icon: 'ban' },
+    { id: 'supervisor', label: 'Supervisor', icon: 'cpu' },
+    { id: 'notifier', label: 'Notifier', icon: 'bell' },
+  ]
 
   const tabContents: Record<string, unknown> = {
     tunnel: h(
@@ -1377,14 +1557,6 @@ export function MaestroSettingsTab({ rpcCall, configRpcCall }: { rpcCall: any; c
         h('div', { style: { ...cardInsetStyle, marginTop: '12px' } }, h('div', { style: { fontSize: 13, fontWeight: 600, color: t.labelPrimary as string } }, 'Remote access — LAN'), h(LanAccess as any, { proxyStatus, lanPin: lanPinEnabled === null ? null : { enabled: lanPinEnabled, pin: lanPin, show: showLanPin, onShow: revealLanPin, onHide: () => setShowLanPin(false), onRotate: rotateLanPin, onToggle: toggleLanPin } })),
         h('div', { style: { ...cardInsetStyle, marginTop: '12px' } }, h('div', { style: { fontSize: 13, fontWeight: 600, color: t.labelPrimary as string } }, 'Public access'), h(PublicAccess as any, { status, pin, showPin, onRevealPin: revealPin, onHidePin: () => setShowPin(false), onRotatePin: rotatePin })),
       ),
-    notify: h(
-        'div',
-        { style: { display: 'flex', flexDirection: 'column' } },
-        h('div', { style: { padding: '12px 0', borderBottom: `1px solid ${t.borderL2}` } }, h('p', { style: captionStyle }, 'Sends one protected startup update with the current public-access PIN to a single chat. Leave either credential blank to disable.')),
-        h(SettingRow as any, { title: 'Bot token', description: 'Telegram bot token from @BotFather.', control: h('div', { style: { display: 'flex', gap: 8, alignItems: 'center' } }, h(FieldInput as any, { placeholder: '123456:ABC-DEF...', type: 'password', autoComplete: 'off', value: config.hasTelegramBotToken ? '••••••••' : '', onChange: (e: any) => saveField('telegramBotToken', e.target.value), style: { width: 220 } as any }), config.hasTelegramBotToken ? h(Button as any, { variant: 'outline', size: 'md', onClick: () => saveField('telegramBotToken', '') }, 'Clear') : null) }),
-        h(SettingRow as any, { title: 'Chat ID', description: 'Target chat, e.g. -1001234567890.', control: h(FieldInput as any, { placeholder: '-1001234567890', value: config.telegramChatId ?? '', onChange: (e: any) => saveField('telegramChatId', e.target.value), style: { width: 220 } as any }) }),
-        h(ToggleRow as any, { title: 'Also notify about reviews', description: 'One message per review run with its outcome.', checked: config.telegramReviewNotifications === true, onChange: (v: boolean) => saveField('telegramReviewNotifications', v) }),
-      ),
     gitlab: h(
         'div',
         { style: { display: 'flex', flexDirection: 'column' } },
@@ -1424,9 +1596,15 @@ export function MaestroSettingsTab({ rpcCall, configRpcCall }: { rpcCall: any; c
         ),
         h('div', { style: { ...rowStyle, flexDirection:'column', alignItems:'stretch', gap: 8, borderBottom:'none' } as any },
           h('div', { style: rowTitleStyle }, 'Placeholder mappings'),
-          h('div', { style: rowDescStyle }, 'JSON object mapping blocked patterns to placeholder suggestions.'),
-          h(TextareaField as any, { value: placeholdersText, placeholder: '{"example-project":"my-project"}', onChange: (e: any) => setPlaceholdersText(e.target.value), onBlur: () => commitPlaceholders(), style: { minHeight: 80 } as any }),
-          h('div', { style: { marginTop: 8 } }, h(Button as any, { variant: 'outline', size: 'sm', onClick: () => { commitBlacklistPatterns(patternsText); commitPlaceholders() } }, 'Save Blacklist')),
+          h('div', { style: rowDescStyle }, 'Blocked pattern → placeholder suggestion. One mapping per row — no JSON needed.'),
+          h(PlaceholderMappingsEditor as any, {
+            rows: placeholderRows,
+            onChange: (rows: any) => {
+              setPlaceholderRows(rows)
+              commitPlaceholders(rows)
+            },
+          }),
+          h('div', { style: { marginTop: 8 } }, h(Button as any, { variant: 'outline', size: 'sm', onClick: () => { commitBlacklistPatterns(patternsText); commitPlaceholders(placeholderRows) } }, 'Save Blacklist')),
         ),
       ),
     supervisor: h(
@@ -1439,9 +1617,10 @@ export function MaestroSettingsTab({ rpcCall, configRpcCall }: { rpcCall: any; c
     notifier: h(
         'div',
         { style: { display: 'flex', flexDirection: 'column' } },
-        h(SettingRow as any, { title: 'Bot token', description: 'Telegram bot token from @BotFather.', control: h(FieldInput as any, { type: 'password', autoComplete: 'off', value: notifierCfg.telegram?.botToken ?? '', placeholder: '123456:ABC-DEF...', onChange: (e: any) => saveNotifierCfg({ telegram: { botToken: e.target.value } }), style: { width: 260 } as any }) }),
-        h(SettingRow as any, { title: 'Chat ID', description: 'Target chat, e.g. -1001234567890.', control: h(FieldInput as any, { value: notifierCfg.telegram?.chatId ?? '', placeholder: '-1001234567890', onChange: (e: any) => saveNotifierCfg({ telegram: { chatId: e.target.value } }), style: { width: 260 } as any }) }),
-        h(ToggleRow as any, { title: 'Review notifications', description: 'Also notify about finished reviews.', checked: notifierCfg.telegram?.reviewNotifications === true || notifierCfg.policy?.reviewNotifications === true, onChange: (v: boolean) => saveNotifierCfg({ telegram: { reviewNotifications: v } }) }),
+        h('div', { style: { padding: '12px 0', borderBottom: `1px solid ${t.borderL2}` } }, h('p', { style: captionStyle }, 'Telegram bot settings for notifications: startup PIN, review digests, PIN rotation. Leave blank to disable.')),
+        h(SettingRow as any, { title: 'Bot token', description: 'Telegram bot token from @BotFather.', control: h('div', { style: { display: 'flex', gap: 8, alignItems: 'center' } }, h(FieldInput as any, { type: 'password', autoComplete: 'off', value: notifierCfg.telegram?.botToken ?? '', placeholder: '123456:ABC-DEF...', onChange: (e: any) => saveNotifierCfg({ telegram: { botToken: e.target.value } }), style: { width: 220 } as any }), notifierCfg.telegram?.botToken ? h(Button as any, { variant: 'outline', size: 'md', onClick: () => saveNotifierCfg({ telegram: { botToken: '' } }) }, 'Clear') : null) }),
+        h(SettingRow as any, { title: 'Chat ID', description: 'Target chat, e.g. -1001234567890.', control: h(FieldInput as any, { value: notifierCfg.telegram?.chatId ?? '', placeholder: '-1001234567890', onChange: (e: any) => saveNotifierCfg({ telegram: { chatId: e.target.value } }), style: { width: 220 } as any }) }),
+        h(ToggleRow as any, { title: 'Review notifications', description: 'Also notify about finished reviews.', checked: notifierCfg.policy?.reviewNotifications === true, onChange: (v: boolean) => saveNotifierCfg({ policy: { reviewNotifications: v } }) }),
       ),
   }
 
@@ -1450,12 +1629,19 @@ export function MaestroSettingsTab({ rpcCall, configRpcCall }: { rpcCall: any; c
     { 'data-maestro-settings-card': '', style: { display: 'flex', flexDirection: 'column', gap: 8, width: '100%', maxWidth: 640, minWidth:0, boxSizing:'border-box' as any } },
     h(
       'div',
-      { style: { padding: '2px 2px 8px' } },
-      h('div', { style: { fontSize: 15, fontWeight: 600, color: t.labelPrimary as string, lineHeight: '22px' } }, 'Maestro'),
-      h('div', { style: { fontSize: 12, color: t.labelSecondary as string, lineHeight: '16px', marginTop: 2 } }, 'Tunnel, access, review & guard — all via the shared Maestro store. Uses the same tokens and primitives as DSH settings.'),
+      { style: { padding: '2px 2px 8px', display: 'flex', gap: 10, alignItems: 'flex-start' } },
+      // Shared BrandBadge — same as dashboard sidebar/popup (BrandMark #0A84FF)
+      h('span', { 'data-maestro-logo': '', style: { width: 28, height: 28, borderRadius: 8, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', background: 'var(--dsw-alias-brand-primary, #0A84FF)', backgroundColor: '#0A84FF', color: '#fff', flex: 'none', border: '1px solid rgba(0,0,0,0.08)', boxShadow: '0 0 0 1px var(--dsw-alias-border-l1)', boxSizing: 'border-box' as any, alignSelf: 'flex-start' as any, marginTop: 2 } } as any,
+        h('svg', { width: 16, height: 16, viewBox: '0 0 16 16', fill: 'none', 'aria-hidden': 'true' } as any, h('path', { d: 'M2 11 L5 4 L8 9 L11 4 L14 11', stroke: 'currentColor', strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round' } as any))
+      ),
+      h('div', { style: { display: 'flex', flexDirection: 'column', minWidth: 0 } },
+        h('div', { style: { fontSize: 15, fontWeight: 600, color: t.labelPrimary as string, lineHeight: '22px' } }, 'Maestro'),
+        h('div', { style: { fontSize: 12, color: t.labelSecondary as string, lineHeight: '16px', marginTop: 2 } }, 'Tunnel, access, review & guard — all via the shared Maestro store. Uses the same tokens and primitives as DSH settings.'),
+      )
     ),
+    h('style', {}, '[data-maestro-logo]{background:#0A84FF !important; background-color:#0A84FF !important; color:#fff !important;}'),
     h('div', { 'data-maestro-tabs': '', role:'tablist', 'aria-label':'Maestro settings sections' },
-      ...TABS.map(tab => h('button', { key: tab.id, 'data-maestro-tab':'', 'data-active': String(activeTab===tab.id), role:'tab', 'aria-selected': activeTab===tab.id, onClick: () => setActiveTab(tab.id) }, tab.label))
+      ...TABS.map(tab => h('button', { key: tab.id, 'data-maestro-tab':'', 'data-active': String(activeTab===tab.id), role:'tab', 'aria-selected': activeTab===tab.id, onClick: (e: any) => { setActiveTab(tab.id); try { e.currentTarget.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' }) } catch {} } }, h(TabIcon as any, { name: tab.icon }), tab.label))
     ),
     h('div', { 'data-maestro-panel': activeTab, style: { display:'flex', flexDirection:'column', gap:10, minWidth:0 } }, tabContents[activeTab] as any),
     error ? h('p', { style: { color: t.stateError as string, fontSize: 12, margin: '8px 0 0', padding: '8px 10px', borderRadius: 8, background: 'color-mix(in srgb, var(--dsw-alias-state-error-primary) 10%, transparent)', border: `1px solid color-mix(in srgb, var(--dsw-alias-state-error-primary) 30%, transparent)` } }, error) : null,

package/src/client/components/BrandMark.tsx

@@ -0,0 +1,22 @@
+import { createElement as h } from 'react'
+
+export function MaestroMark(props: { size?: number }) {
+  const s = props.size ?? 16
+  return h('svg', { width: s, height: s, viewBox: '0 0 16 16', fill: 'none', 'aria-hidden': 'true' } as any,
+    h('path', { d: 'M2 11 L5 4 L8 9 L11 4 L14 11', stroke: 'currentColor', strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round' } as any)
+  )
+}
+
+export function BrandBadge(props: { size?: number; outer?: number; radius?: number }) {
+  const outer = props.outer ?? 28
+  const size = props.size ?? 16
+  const radius = props.radius ?? 8
+  return h('span', {
+    'data-maestro-logo': '',
+    style: {
+      width: outer, height: outer, borderRadius: radius, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
+      background: 'var(--dsw-alias-brand-primary, #0A84FF)', backgroundColor: '#0A84FF', color: '#fff', flex: 'none',
+      border: '1px solid rgba(0,0,0,0.08)', boxShadow: '0 0 0 1px var(--dsw-alias-border-l1)', boxSizing: 'border-box' as any,
+    },
+  } as any, h(MaestroMark as any, { size }))
+}

package/src/client/index.tsx

@@ -13,9 +13,10 @@ import { registerSettingsNavIcon, SETTINGS_NAV_MARKER } from './settings-nav-ico
  */
 const SETTINGS_NAV_CSS = `
 
-/* maestro: replace the settings-nav fallback gear with the Maestro M-logo glyph */
-[${SETTINGS_NAV_MARKER}] > svg:first-child {
-  display: none;
+/* maestro: replace the settings-nav fallback gear with the Maestro M-logo glyph — same mark as sidebar/popup BrandMark */
+[${SETTINGS_NAV_MARKER}] > svg:first-child,
+[${SETTINGS_NAV_MARKER}] > svg.zWKi1a_navIcon {
+  display: none !important;
 }
 
 [${SETTINGS_NAV_MARKER}]::before {
@@ -23,9 +24,10 @@ const SETTINGS_NAV_CSS = `
   flex: none;
   width: 16px;
   height: 16px;
+  display: inline-block;
   background: currentColor;
-  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 11 L5 4 L8 9 L11 4 L14 11'/%3E%3C/svg%3E") center / contain no-repeat;
-  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 11 L5 4 L8 9 L11 4 L14 11'/%3E%3C/svg%3E") center / contain no-repeat;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 11 L5 4 L8 9 L11 4 L14 11'/%3E%3C/svg%3E") center / contain no-repeat;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 11 L5 4 L8 9 L11 4 L14 11'/%3E%3C/svg%3E") center / contain no-repeat;
 }
 `