@ddtcorex/dsh-maestro-config 0.1.1 → 0.2.0

package/lib/client.js

@@ -15,8 +15,8 @@ var __commonJS = (cb, mod) => function __require() {
   return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
 };
 var __export = (target, all) => {
-  for (var name2 in all)
-    __defProp(target, name2, { get: all[name2], enumerable: true });
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
 };
 var __copyProps = (to, from, except, desc) => {
   if (from && typeof from === "object" || typeof from === "function") {
@@ -1366,16 +1366,16 @@ var require_dijkstra = __commonJS({
        */
       PriorityQueue: {
         make: function(opts) {
-          var T = dijkstra.PriorityQueue, t = {}, key;
+          var T = dijkstra.PriorityQueue, t2 = {}, key;
           opts = opts || {};
           for (key in T) {
             if (T.hasOwnProperty(key)) {
-              t[key] = T[key];
+              t2[key] = T[key];
             }
           }
-          t.queue = [];
-          t.sorter = opts.sorter || T.default_sorter;
-          return t;
+          t2.queue = [];
+          t2.sorter = opts.sorter || T.default_sorter;
+          return t2;
         },
         default_sorter: function(a, b) {
           return a.cost - b.cost;
@@ -2117,11 +2117,12 @@ var require_browser = __commonJS({
 // src/client/index.tsx
 var index_exports = {};
 __export(index_exports, {
-  apply: () => apply
+  apply: () => apply,
+  inject: () => inject
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/client/maestro-card.jsx
+// src/client/MaestroSettings.tsx
 var import_react = require("react");
 var import_qrcode = __toESM(require_browser(), 1);
 
@@ -2155,72 +2156,252 @@ function gitlabWebhookUrl(hostname) {
   return `https://${authority}/hooks/gitlab-mr`;
 }
 
-// src/client/maestro-card.jsx
-var inputStyle = {
-  height: 34,
-  padding: "0 12px",
-  border: "1px solid var(--dsw-alias-border-l2)",
-  borderRadius: 8,
-  background: "var(--dsw-alias-bg-layer-3)",
-  font: "inherit",
-  fontSize: 13,
-  color: "var(--dsw-alias-label-primary)",
-  width: "100%",
-  boxSizing: "border-box"
+// src/client/MaestroSettings.tsx
+var t = {
+  bgLayer1: "var(--dsw-alias-bg-layer-1)",
+  bgLayer2: "var(--dsw-alias-bg-layer-2)",
+  bgLayer3: "var(--dsw-alias-bg-layer-3)",
+  borderL2: "var(--dsw-alias-border-l2)",
+  labelPrimary: "var(--dsw-alias-label-primary)",
+  labelSecondary: "var(--dsw-alias-label-secondary)",
+  labelTertiary: "var(--dsw-alias-label-tertiary)",
+  labelDimmed: "var(--dsw-alias-label-dimmed)",
+  labelFg: "var(--dsw-alias-label-primary-foreground)",
+  primaryFill: "var(--dsw-alias-button-primary-fill)",
+  primaryHover: "var(--dsw-alias-button-primary-hover)",
+  interactiveHover: "var(--dsw-alias-interactive-bg-hover)",
+  interactiveActive: "var(--dsw-alias-interactive-bg-active)",
+  stateError: "var(--dsw-alias-state-error-primary)",
+  brand: "var(--dsw-alias-brand-primary)",
+  shadowLv3: "var(--dsw-shadow-lv3)",
+  scrollbarL2: "var(--dsw-alias-scrollbar-bg-l2)"
 };
+function Button({
+  variant = "ghost",
+  size = "md",
+  icon,
+  children,
+  style,
+  ...rest
+}) {
+  const base = {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 4,
+    border: "none",
+    borderRadius: size === "sm" ? 16 : 18,
+    cursor: "pointer",
+    fontSize: size === "sm" ? 13 : 14,
+    lineHeight: size === "sm" ? "18px" : "22px",
+    padding: size === "sm" ? "0 12px" : "0 14px",
+    height: size === "sm" ? 32 : 36,
+    color: t.labelPrimary,
+    background: "transparent",
+    fontFamily: "inherit"
+  };
+  if (variant === "primary") {
+    base.background = t.primaryFill;
+    base.color = t.labelFg;
+  }
+  if (variant === "outline") {
+    base.border = `1px solid ${t.borderL2}`;
+    base.background = "transparent";
+  }
+  const merged = { ...base, ...style };
+  return (0, import_react.createElement)(
+    "button",
+    {
+      type: "button",
+      style: merged,
+      onMouseEnter: (e) => {
+        if (rest.disabled) return;
+        if (variant === "primary") e.currentTarget.style.background = t.primaryHover;
+        else e.currentTarget.style.background = t.interactiveHover;
+      },
+      onMouseLeave: (e) => {
+        if (variant === "primary") e.currentTarget.style.background = t.primaryFill;
+        else e.currentTarget.style.background = variant === "outline" ? "transparent" : "transparent";
+      },
+      ...rest
+    },
+    icon ? (0, import_react.createElement)("span", { style: { display: "inline-flex", width: 16, height: 16, alignItems: "center", justifyContent: "center" } }, icon) : null,
+    children
+  );
+}
+function InputWrap({
+  icon,
+  children,
+  style,
+  focused
+}) {
+  return (0, import_react.createElement)(
+    "span",
+    {
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 8,
+        height: 36,
+        padding: "0 12px",
+        border: `1px solid ${focused ? t.brand : t.borderL2}`,
+        borderRadius: 10,
+        background: t.bgLayer1,
+        flex: 1,
+        minWidth: 0,
+        boxSizing: "border-box",
+        ...style
+      }
+    },
+    icon ? (0, import_react.createElement)("span", { style: { display: "inline-flex", width: 16, height: 16, color: t.labelTertiary } }, icon) : null,
+    children
+  );
+}
+function FieldInput(props) {
+  const [focused, setFocused] = (0, import_react.useState)(false);
+  const { icon, style, ...rest } = props;
+  return (0, import_react.createElement)(
+    InputWrap,
+    { icon, focused, style: { ...style, flex: "1 1 auto" } },
+    (0, import_react.createElement)("input", {
+      ...rest,
+      onFocus: (e) => {
+        setFocused(true);
+        rest.onFocus?.(e);
+      },
+      onBlur: (e) => {
+        setFocused(false);
+        rest.onBlur?.(e);
+      },
+      style: {
+        flex: 1,
+        minWidth: 0,
+        border: "none",
+        outline: "none",
+        background: "transparent",
+        fontSize: 14,
+        lineHeight: "22px",
+        color: t.labelPrimary,
+        fontFamily: "inherit"
+      }
+    })
+  );
+}
+function TextareaField(props) {
+  const [focused, setFocused] = (0, import_react.useState)(false);
+  return (0, import_react.createElement)("textarea", {
+    ...props,
+    onFocus: (e) => {
+      setFocused(true);
+      props.onFocus?.(e);
+    },
+    onBlur: (e) => {
+      setFocused(false);
+      props.onBlur?.(e);
+    },
+    style: {
+      width: "100%",
+      minHeight: 96,
+      padding: "8px 10px",
+      border: `1px solid ${focused ? t.brand : t.borderL2}`,
+      borderRadius: 8,
+      background: t.bgLayer1,
+      color: t.labelPrimary,
+      fontFamily: "inherit",
+      fontSize: 13,
+      lineHeight: "18px",
+      resize: "vertical",
+      boxSizing: "border-box",
+      outline: "none",
+      ...props.style
+    }
+  });
+}
 var fieldLabelStyle = {
-  display: "block",
-  fontSize: 12,
-  lineHeight: 1.5,
-  color: "var(--dsw-alias-label-secondary)",
-  margin: "10px 0 4px"
+  display: "flex",
+  flexDirection: "column",
+  gap: "6px",
+  fontSize: "12px",
+  lineHeight: "16px",
+  fontWeight: "500",
+  color: t.labelSecondary,
+  margin: "12px 0 0"
 };
-var secondaryButtonStyle = {
-  height: 32,
-  padding: "0 14px",
-  borderRadius: 16,
-  border: "1px solid var(--dsw-alias-border-l2)",
-  background: "transparent",
-  color: "var(--dsw-alias-label-primary)",
-  font: "inherit",
-  fontSize: 13,
-  cursor: "pointer",
-  flex: "none"
+var captionStyle = {
+  fontSize: "12px",
+  lineHeight: "16px",
+  color: t.labelSecondary,
+  margin: "4px 0"
 };
-var primaryButtonStyle = {
-  ...secondaryButtonStyle,
-  border: "none",
-  background: "var(--dsw-alias-button-primary-fill)",
-  color: "var(--dsw-alias-label-primary-foreground)"
+var cardInsetStyle = {
+  display: "flex",
+  flexDirection: "column",
+  gap: "8px",
+  padding: "12px",
+  borderRadius: "12px",
+  border: `1px solid ${t.borderL2}`,
+  background: t.bgLayer1
 };
-var captionStyle = {
-  fontSize: 12,
-  lineHeight: 1.5,
-  margin: "4px 0",
-  color: "var(--dsw-alias-label-secondary)"
+var rowStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: "8px",
+  padding: "16px 0",
+  borderBottom: `1px solid ${t.borderL2}`,
+  minWidth: "0"
 };
-var sectionStyle = {
-  marginTop: 20,
-  paddingTop: 16,
-  borderTop: "1px solid var(--dsw-alias-border-l2)"
+var rowTextStyle = {
+  flex: "1",
+  minWidth: "0",
+  display: "flex",
+  flexDirection: "column",
+  gap: "4px",
+  paddingRight: "48px"
 };
-var headingStyle = {
-  margin: "0 0 6px",
-  fontSize: 13,
-  fontWeight: 600,
-  color: "var(--dsw-alias-label-primary)"
+var rowTitleStyle = {
+  fontSize: "14px",
+  fontWeight: "400",
+  lineHeight: "22px",
+  color: t.labelPrimary
 };
-var errorStyle = {
-  color: "var(--dsw-alias-state-error-primary)",
-  fontSize: 12,
-  margin: "8px 0 0"
+var rowDescStyle = {
+  fontSize: "12px",
+  fontWeight: "400",
+  lineHeight: "18px",
+  color: t.labelTertiary
 };
-var codeStyle = {
-  fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
-  fontSize: 12,
-  color: "var(--dsw-alias-label-primary)",
-  wordBreak: "break-all"
+var pillSelectorStyle = {
+  display: "inline-flex",
+  alignItems: "center",
+  gap: "12px",
+  height: "36px",
+  padding: "0 14px",
+  border: "none",
+  borderRadius: "18px",
+  background: "var(--dsw-alias-bg-module-platform, #F5F6F7)",
+  font: "inherit",
+  fontSize: "14px",
+  lineHeight: "22px",
+  color: t.labelPrimary,
+  cursor: "pointer",
+  whiteSpace: "nowrap"
 };
+function SettingRow({ title, description, control }) {
+  return (0, import_react.createElement)(
+    "div",
+    { "data-maestro-row": "", style: rowStyle },
+    (0, import_react.createElement)("div", { "data-maestro-row-text": "", style: rowTextStyle }, (0, import_react.createElement)("div", { style: rowTitleStyle }, title), description ? (0, import_react.createElement)("div", { style: rowDescStyle }, description) : null),
+    (0, import_react.createElement)("div", { "data-maestro-control": "", style: { flex: "none", display: "flex", alignItems: "center", justifyContent: "flex-end", gap: 8, minHeight: "36px" } }, control)
+  );
+}
+function ToggleRow({ title, description, checked, onChange }) {
+  return (0, import_react.createElement)(
+    "label",
+    { "data-maestro-row": "", style: { ...rowStyle, cursor: "pointer", alignItems: "flex-start" } },
+    (0, import_react.createElement)("input", { type: "checkbox", checked: checked === true, onChange: (e) => onChange(e.target.checked), style: { width: 16, height: 16, accentColor: t.primaryFill, marginTop: 4, flex: "none" } }),
+    (0, import_react.createElement)("div", { "data-maestro-row-text": "", style: { ...rowTextStyle, paddingRight: "0" } }, (0, import_react.createElement)("div", { style: rowTitleStyle }, title), description ? (0, import_react.createElement)("div", { style: rowDescStyle }, description) : null)
+  );
+}
 function QrImage({ url, size = 104 }) {
   const [dataUrl, setDataUrl] = (0, import_react.useState)(null);
   (0, import_react.useEffect)(() => {
@@ -2246,34 +2427,24 @@ function QrImage({ url, size = 104 }) {
         alignItems: "center",
         justifyContent: "center",
         lineHeight: 0,
-        flex: "none",
-        alignSelf: "flex-start"
+        flex: "none"
       }
     },
     dataUrl === null ? (0, import_react.createElement)("div", { style: { width: size, height: size, background: "var(--dsw-alias-bg-skeleton)", borderRadius: 4 } }) : (0, import_react.createElement)("img", { src: dataUrl, alt: url, width: size, height: size, style: { display: "block" } })
   );
 }
-function NamedTunnelSetupNote() {
-  return (0, import_react.createElement)(
-    "div",
-    { style: captionStyle },
-    (0, import_react.createElement)("p", { style: { ...captionStyle, marginBottom: 4 } }, "Named tunnel needs a one-time manual setup (requires your own Cloudflare account \u2014 cannot be automated):"),
-    (0, import_react.createElement)(
-      "ol",
-      { style: { margin: "4px 0", paddingLeft: 20 } },
-      (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, the credentials file path (~/.cloudflared/<id>.json), and the hostname below.")
-    )
-  );
-}
-function ReviewModelSelector({ value, catalog, fallbackValue, fallbackLabel, onChange, label }) {
+function ReviewModelSelector({
+  value,
+  catalog,
+  fallbackValue,
+  fallbackLabel,
+  onChange,
+  label
+}) {
   const groups = catalog?.groups ?? [];
   const providers = groups.map((g) => g.provider);
   const selectedProvider = value?.provider ?? "";
   const providerGroup = groups.find((g) => g.provider === selectedProvider);
-  const models = providerGroup?.models ?? [];
   const selectedEffort = value?.reasoningEffort ?? "";
   const [open, setOpen] = (0, import_react.useState)(false);
   const [pane, setPane] = (0, import_react.useState)("root");
@@ -2321,7 +2492,7 @@ function ReviewModelSelector({ value, catalog, fallbackValue, fallbackLabel, onC
     if (filtered.length > 0) return filtered;
     return ["low", "medium", "high"];
   })();
-  const warning = selectedEffort !== "" && !supportsReasoning && selectedModelInfo !== null ? `\u26A0\uFE0F This model does not support reasoning effort "${selectedEffort}" \u2014 reviews will fail. Clear effort or choose a reasoning-capable model.` : null;
+  const warning = selectedEffort !== "" && !supportsReasoning && selectedModelInfo !== null ? `\u26A0\uFE0F This model does not support reasoning effort "${selectedEffort}" \u2014 reviews will fail.` : null;
   const update = (field, newVal) => {
     if (newVal === "" && field === "provider") {
       onChange(null);
@@ -2335,51 +2506,30 @@ function ReviewModelSelector({ value, catalog, fallbackValue, fallbackLabel, onC
       const first = g?.models[0];
       next.provider = newVal;
       next.model = first !== void 0 ? getModelId(first) : "";
-    } else if (field === "model") {
-      next.model = newVal;
-    } else if (field === "reasoningEffort") {
+    } else if (field === "model") next.model = newVal;
+    else if (field === "reasoningEffort") {
       if (newVal === "") delete next.reasoningEffort;
       else next.reasoningEffort = newVal;
     }
-    if (!next.provider || !next.model) {
-      onChange(null);
-    } else {
-      onChange(next);
-    }
+    if (!next.provider || !next.model) onChange(null);
+    else onChange(next);
   };
   const effectiveFallback = fallbackValue !== void 0 ? fallbackValue : catalog?.current ?? null;
-  const effectiveFallbackLabel = fallbackLabel ?? "Use DSH default";
-  const triggerLabel = value ? `${value.provider} / ${value.model}${value.reasoningEffort ? ` \xB7 ${value.reasoningEffort}` : ""}` : effectiveFallback ? `${effectiveFallbackLabel} \xB7 ${effectiveFallback.provider}/${effectiveFallback.model}${effectiveFallback.reasoningEffort ? ` \xB7 ${effectiveFallback.reasoningEffort}` : ""}` : effectiveFallbackLabel;
-  const triggerStyle = {
-    height: 32,
-    padding: "0 12px 0 14px",
-    borderRadius: 20,
-    border: "1px solid var(--dsw-alias-border-l2)",
-    background: "var(--dsw-alias-bg-layer-2)",
-    color: "var(--dsw-alias-label-primary)",
-    font: "inherit",
-    fontSize: 13,
-    display: "inline-flex",
-    alignItems: "center",
-    gap: 8,
-    cursor: "pointer",
-    maxWidth: 320,
-    whiteSpace: "nowrap"
-  };
+  const triggerLabel = value ? `${value.provider} / ${value.model}${value.reasoningEffort ? ` \xB7 ${value.reasoningEffort}` : ""}` : effectiveFallback ? `${fallbackLabel} \xB7 ${effectiveFallback.provider}/${effectiveFallback.model}${effectiveFallback.reasoningEffort ? ` \xB7 ${effectiveFallback.reasoningEffort}` : ""}` : fallbackLabel;
   const menuStyle = {
     position: "absolute",
     top: "calc(100% + 8px)",
-    left: 0,
-    minWidth: 300,
-    maxWidth: 360,
-    background: "var(--dsw-alias-bg-layer-1)",
-    border: "1px solid var(--dsw-alias-border-l2)",
-    borderRadius: 12,
-    boxShadow: "0 8 24px rgba(0,0,0,.12)",
-    zIndex: 20,
-    padding: 6
+    left: "0",
+    minWidth: "300px",
+    maxWidth: "360px",
+    background: t.bgLayer2,
+    border: `1px solid ${t.borderL2}`,
+    borderRadius: "12px",
+    boxShadow: t.shadowLv3,
+    zIndex: "20",
+    padding: "6px"
   };
-  const rowStyle = {
+  const rowStyle2 = {
     width: "100%",
     display: "flex",
     alignItems: "center",
@@ -2389,66 +2539,87 @@ function ReviewModelSelector({ value, catalog, fallbackValue, fallbackLabel, onC
     borderRadius: 8,
     border: "none",
     background: "transparent",
-    color: "var(--dsw-alias-label-primary)",
-    font: "inherit",
+    color: t.labelPrimary,
+    fontFamily: "inherit",
     fontSize: 13,
     cursor: "pointer",
     textAlign: "left"
   };
   const check = (active) => active ? (0, import_react.createElement)("svg", { width: 16, height: 16, viewBox: "0 0 16 16", style: { flex: "none" } }, (0, import_react.createElement)("path", { d: "M3.5 8.2l2.8 2.8L12.5 4.8", fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round" })) : (0, import_react.createElement)("span", { style: { width: 16, flex: "none" } });
-  const chevronDown = (0, import_react.createElement)("svg", { width: 14, height: 14, viewBox: "0 0 14 14", style: { flex: "none", opacity: 0.7 } }, (0, import_react.createElement)("path", { d: "M3.5 5L7 8.5L10.5 5", fill: "none", stroke: "currentColor", strokeWidth: 1.4, strokeLinecap: "round", strokeLinejoin: "round" }));
   const chevronRight = (0, import_react.createElement)("svg", { width: 14, height: 14, viewBox: "0 0 14 14", style: { flex: "none", opacity: 0.6 } }, (0, import_react.createElement)("path", { d: "M5 3.5L8.5 7L5 10.5", fill: "none", stroke: "currentColor", strokeWidth: 1.4, strokeLinecap: "round", strokeLinejoin: "round" }));
   const effortLabel = selectedEffort === "" ? "Default effort" : selectedEffort;
   const modelLabel = selectedProvider === "" ? "Select model" : value?.model ?? "Select model";
   return (0, import_react.createElement)(
     "div",
-    { ref: rootRef, style: { position: "relative", display: "inline-block", maxWidth: "100%" } },
-    label && (0, import_react.createElement)("span", { style: fieldLabelStyle }, label),
+    { ref: rootRef, "data-maestro-trigger-wrap": "", style: { position: "relative", display: "inline-block", maxWidth: "100%" } },
+    label ? (0, import_react.createElement)("span", { style: fieldLabelStyle }, label) : null,
     (0, import_react.createElement)(
       "button",
-      { type: "button", style: triggerStyle, onClick: () => {
-        setOpen((v) => !v);
-        setPane("root");
-      }, "aria-expanded": open, "aria-haspopup": "menu", title: triggerLabel },
+      {
+        type: "button",
+        style: {
+          height: 36,
+          padding: "0 14px 0 16px",
+          borderRadius: 18,
+          border: "none",
+          background: "var(--dsw-alias-bg-module-platform, #F5F6F7)",
+          color: t.labelPrimary,
+          fontFamily: "inherit",
+          fontSize: 13,
+          display: "inline-flex",
+          alignItems: "center",
+          gap: 8,
+          cursor: "pointer",
+          maxWidth: 320,
+          whiteSpace: "nowrap"
+        },
+        onClick: () => {
+          setOpen((v) => !v);
+          setPane("root");
+        },
+        "aria-expanded": open,
+        "aria-haspopup": "menu",
+        title: triggerLabel
+      },
       (0, import_react.createElement)("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, triggerLabel),
-      chevronDown
+      (0, import_react.createElement)("svg", { width: 14, height: 14, viewBox: "0 0 14 14", style: { flex: "none", opacity: 0.7 } }, (0, import_react.createElement)("path", { d: "M3.5 5L7 8.5L10.5 5", fill: "none", stroke: "currentColor", strokeWidth: 1.4, strokeLinecap: "round", strokeLinejoin: "round" }))
     ),
-    open && (0, import_react.createElement)(
+    open ? (0, import_react.createElement)(
       "div",
-      { style: menuStyle, role: "menu" },
-      pane === "root" && (0, import_react.createElement)(
+      { "data-maestro-menu": "", style: menuStyle, role: "menu" },
+      pane === "root" ? (0, import_react.createElement)(
         "div",
         null,
         (0, import_react.createElement)(
           "button",
-          { type: "button", style: { ...rowStyle, background: !value ? "var(--dsw-alias-bg-layer-2)" : "transparent" }, onClick: () => {
+          { type: "button", style: { ...rowStyle2, background: !value ? t.bgLayer1 : "transparent" }, onClick: () => {
             onChange(null);
             setOpen(false);
           } },
-          (0, import_react.createElement)("span", null, effectiveFallbackLabel),
+          (0, import_react.createElement)("span", null, fallbackLabel),
           check(!value)
         ),
-        (0, import_react.createElement)("div", { style: { height: 1, background: "var(--dsw-alias-border-l2)", margin: "6px 2px" } }),
+        (0, import_react.createElement)("div", { style: { height: 1, background: t.borderL2, margin: "6px 2px" } }),
         (0, import_react.createElement)(
           "button",
-          { type: "button", style: rowStyle, onClick: () => setPane("model") },
+          { type: "button", style: rowStyle2, onClick: () => setPane("model") },
           (0, import_react.createElement)("span", null, "Model"),
-          (0, import_react.createElement)("span", { style: { display: "flex", alignItems: "center", gap: 8, color: "var(--dsw-alias-label-secondary)", maxWidth: 160, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, (0, import_react.createElement)("span", { style: { overflow: "hidden", textOverflow: "ellipsis" } }, modelLabel), chevronRight)
+          (0, import_react.createElement)("span", { style: { display: "flex", alignItems: "center", gap: 8, color: t.labelSecondary, maxWidth: 160, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, (0, import_react.createElement)("span", { style: { overflow: "hidden", textOverflow: "ellipsis" } }, modelLabel), chevronRight)
         ),
         (0, import_react.createElement)(
           "button",
-          { type: "button", style: rowStyle, onClick: () => setPane("effort") },
+          { type: "button", style: rowStyle2, onClick: () => setPane("effort") },
           (0, import_react.createElement)("span", null, "Effort"),
-          (0, import_react.createElement)("span", { style: { display: "flex", alignItems: "center", gap: 8, color: "var(--dsw-alias-label-secondary)" } }, effortLabel, chevronRight)
+          (0, import_react.createElement)("span", { style: { display: "flex", alignItems: "center", gap: 8, color: t.labelSecondary } }, effortLabel, chevronRight)
         ),
-        value && (0, import_react.createElement)("p", { style: { ...captionStyle, margin: "8px 4px 2px" } }, `Selected: ${value.provider} / ${value.model}${value.reasoningEffort ? ` (${value.reasoningEffort})` : ""}`),
-        !value && effectiveFallback && (0, import_react.createElement)("p", { style: { ...captionStyle, margin: "8px 4px 2px" } }, `${effectiveFallbackLabel === "Use Global" ? "Using Global" : "Using DSH default"}: ${effectiveFallback.provider} / ${effectiveFallback.model}${effectiveFallback.reasoningEffort ? ` (${effectiveFallback.reasoningEffort})` : ""}`),
-        warning && (0, import_react.createElement)("p", { style: { ...captionStyle, margin: "4px 4px 2px", color: "var(--dsw-alias-state-error-primary)" } }, warning)
-      ),
-      pane === "model" && (0, import_react.createElement)(
+        value ? (0, import_react.createElement)("p", { style: { ...captionStyle, margin: "8px 4px 2px" } }, `Selected: ${value.provider} / ${value.model}${value.reasoningEffort ? ` (${value.reasoningEffort})` : ""}`) : null,
+        !value && effectiveFallback ? (0, import_react.createElement)("p", { style: { ...captionStyle, margin: "8px 4px 2px" } }, `${fallbackLabel === "Use Global" ? "Using Global" : "Using DSH default"}: ${effectiveFallback.provider} / ${effectiveFallback.model}${effectiveFallback.reasoningEffort ? ` (${effectiveFallback.reasoningEffort})` : ""}`) : null,
+        warning ? (0, import_react.createElement)("p", { style: { ...captionStyle, margin: "4px 4px 2px", color: t.stateError } }, warning) : null
+      ) : null,
+      pane === "model" ? (0, import_react.createElement)(
         "div",
         null,
-        (0, import_react.createElement)("button", { type: "button", style: { ...rowStyle, color: "var(--dsw-alias-label-secondary)" }, onClick: () => setPane("root") }, (0, import_react.createElement)("span", null, "\u2190 Back"), (0, import_react.createElement)("span", { style: { fontSize: 12 } }, "Model")),
+        (0, import_react.createElement)("button", { type: "button", style: { ...rowStyle2, color: t.labelSecondary }, onClick: () => setPane("root") }, (0, import_react.createElement)("span", null, "\u2190 Back"), (0, import_react.createElement)("span", { style: { fontSize: 12 } }, "Model")),
         (0, import_react.createElement)(
           "div",
           { style: { maxHeight: 260, overflowY: "auto", marginTop: 4 } },
@@ -2458,33 +2629,43 @@ function ReviewModelSelector({ value, catalog, fallbackValue, fallbackLabel, onC
             return (0, import_react.createElement)(
               "div",
               { key: p, style: { marginBottom: 8 } },
-              (0, import_react.createElement)("div", { style: { fontSize: 11, fontWeight: 600, color: "var(--dsw-alias-label-secondary)", padding: "6px 10px 2px", textTransform: "uppercase", letterSpacing: 0.4, display: "flex", alignItems: "center", gap: 6 } }, (0, import_react.createElement)("span", { style: { width: 6, height: 6, borderRadius: 3, background: "var(--dsw-alias-border-l2)", flex: "none" } }), g?.name ?? p),
+              (0, import_react.createElement)("div", { style: { fontSize: 11, fontWeight: 600, color: t.labelSecondary, padding: "6px 10px 2px", textTransform: "uppercase", letterSpacing: 0.4, display: "flex", alignItems: "center", gap: 6 } }, (0, import_react.createElement)("span", { style: { width: 6, height: 6, borderRadius: 3, background: t.borderL2, flex: "none" } }), g?.name ?? p),
               ms.length === 0 ? (0, import_react.createElement)("p", { style: { ...captionStyle, padding: "2px 10px 2px 28px" } }, "No models") : (0, import_react.createElement)(
                 "div",
-                { style: { marginLeft: 12, borderLeft: "1px solid var(--dsw-alias-border-l2)", paddingLeft: 6, display: "flex", flexDirection: "column", gap: 2 } },
+                { style: { marginLeft: 12, borderLeft: `1px solid ${t.borderL2}`, paddingLeft: 6, display: "flex", flexDirection: "column", gap: 2 } },
                 ms.map((m) => {
                   const mid = getModelId(m);
                   const mname = getModelName(m);
                   const active = value?.provider === p && value?.model === mid;
-                  return (0, import_react.createElement)("button", { key: mid, type: "button", style: { ...rowStyle, paddingLeft: 10, background: active ? "var(--dsw-alias-bg-layer-2)" : "transparent" }, onClick: () => {
-                    update("model", mid);
-                    if (value?.provider !== p) update("provider", p);
-                    else {
-                      const next = { provider: p, model: mid, ...selectedEffort ? { reasoningEffort: selectedEffort } : {} };
-                      onChange(next);
-                      setPane("root");
-                    }
-                  } }, (0, import_react.createElement)("span", { style: { overflow: "hidden", textOverflow: "ellipsis" } }, mname), check(active));
+                  return (0, import_react.createElement)(
+                    "button",
+                    {
+                      key: mid,
+                      type: "button",
+                      style: { ...rowStyle2, paddingLeft: 10, background: active ? t.bgLayer1 : "transparent" },
+                      onClick: () => {
+                        update("model", mid);
+                        if (value?.provider !== p) update("provider", p);
+                        else {
+                          const next = { provider: p, model: mid, ...selectedEffort ? { reasoningEffort: selectedEffort } : {} };
+                          onChange(next);
+                          setPane("root");
+                        }
+                      }
+                    },
+                    (0, import_react.createElement)("span", { style: { overflow: "hidden", textOverflow: "ellipsis" } }, mname),
+                    check(active)
+                  );
                 })
               )
             );
           })
         )
-      ),
-      pane === "effort" && (0, import_react.createElement)(
+      ) : null,
+      pane === "effort" ? (0, import_react.createElement)(
         "div",
         null,
-        (0, import_react.createElement)("button", { type: "button", style: { ...rowStyle, color: "var(--dsw-alias-label-secondary)" }, onClick: () => setPane("root") }, (0, import_react.createElement)("span", null, "\u2190 Back"), (0, import_react.createElement)("span", { style: { fontSize: 12 } }, "Effort")),
+        (0, import_react.createElement)("button", { type: "button", style: { ...rowStyle2, color: t.labelSecondary }, onClick: () => setPane("root") }, (0, import_react.createElement)("span", null, "\u2190 Back"), (0, import_react.createElement)("span", { style: { fontSize: 12 } }, "Effort")),
         selectedModelInfo === null ? (0, import_react.createElement)("p", { style: { ...captionStyle, margin: "8px 4px 2px" } }, "Select a model first to configure effort.") : !supportsReasoning ? (0, import_react.createElement)(
           "div",
           null,
@@ -2492,133 +2673,228 @@ function ReviewModelSelector({ value, catalog, fallbackValue, fallbackLabel, onC
           (0, import_react.createElement)(
             "div",
             { style: { marginTop: 4 } },
-            [{ id: "", label: "Default effort" }].map((e) => (0, import_react.createElement)("button", { key: e.id || "default", type: "button", style: { ...rowStyle, background: selectedEffort === e.id ? "var(--dsw-alias-bg-layer-2)" : "transparent" }, onClick: () => {
-              update("reasoningEffort", e.id);
-              setPane("root");
-            } }, (0, import_react.createElement)("span", null, e.label), check(selectedEffort === e.id)))
+            [{ id: "", label: "Default effort" }].map(
+              (e) => (0, import_react.createElement)(
+                "button",
+                { key: e.id || "default", type: "button", style: { ...rowStyle2, background: selectedEffort === e.id ? t.bgLayer1 : "transparent" }, onClick: () => {
+                  update("reasoningEffort", e.id);
+                  setPane("root");
+                } },
+                (0, import_react.createElement)("span", null, e.label),
+                check(selectedEffort === e.id)
+              )
+            )
           ),
-          warning && (0, import_react.createElement)("p", { style: { ...captionStyle, margin: "8px 4px 2px", color: "var(--dsw-alias-state-error-primary)" } }, warning)
+          warning ? (0, import_react.createElement)("p", { style: { ...captionStyle, margin: "8px 4px 2px", color: t.stateError } }, warning) : null
         ) : (0, import_react.createElement)(
           "div",
           null,
           (0, import_react.createElement)(
             "div",
             { style: { marginTop: 4 } },
-            [{ id: "", label: "Default effort" }, ...availableEfforts.map((id) => ({ id, label: id }))].map((e) => (0, import_react.createElement)("button", { key: e.id || "default", type: "button", style: { ...rowStyle, background: selectedEffort === e.id ? "var(--dsw-alias-bg-layer-2)" : "transparent" }, onClick: () => {
-              update("reasoningEffort", e.id);
-              setPane("root");
-            } }, (0, import_react.createElement)("span", null, e.label), check(selectedEffort === e.id)))
+            [{ id: "", label: "Default effort" }, ...availableEfforts.map((id) => ({ id, label: id }))].map(
+              (e) => (0, import_react.createElement)(
+                "button",
+                { key: e.id || "default", type: "button", style: { ...rowStyle2, background: selectedEffort === e.id ? t.bgLayer1 : "transparent" }, onClick: () => {
+                  update("reasoningEffort", e.id);
+                  setPane("root");
+                } },
+                (0, import_react.createElement)("span", null, e.label),
+                check(selectedEffort === e.id)
+              )
+            )
           ),
-          warning && (0, import_react.createElement)("p", { style: { ...captionStyle, margin: "8px 4px 2px", color: "var(--dsw-alias-state-error-primary)" } }, warning)
+          warning ? (0, import_react.createElement)("p", { style: { ...captionStyle, margin: "8px 4px 2px", color: t.stateError } }, warning) : null
         )
-      )
-    )
+      ) : null
+    ) : null
   );
 }
 function ProjectMappingsEditor({ mappings, onChange, catalog, globalReviewModel }) {
-  const rows = mappings.length > 0 ? mappings : [{ projectPath: "", localRepoPath: "", reviewProfile: "magento2" }];
+  const rows = mappings;
   const updateRow = (index, field, value) => {
     const next = rows.map((row, i) => i === index ? { ...row, [field]: value } : row);
-    onChange(next.filter((r) => r.projectPath !== "" || r.localRepoPath !== ""));
+    onChange(next.filter((r) => (r.projectPath ?? "") !== "" || (r.localRepoPath ?? "") !== ""));
   };
   const removeRow = (index) => onChange(rows.filter((_, i) => i !== index));
   const addRow = () => onChange([...rows, { projectPath: "", localRepoPath: "", reviewProfile: "magento2" }]);
   return (0, import_react.createElement)(
     "div",
-    null,
-    (0, import_react.createElement)("span", { style: fieldLabelStyle }, "Tracked projects (GitLab path \u2192 local repo checkout \u2192 review profile \u2192 review model override)"),
-    rows.map((row, i) => (0, import_react.createElement)(
+    { "data-maestro-projects": "", style: { display: "flex", flexDirection: "column", gap: 12, paddingTop: 8 } },
+    // Header — count + primary Add
+    (0, import_react.createElement)(
       "div",
-      { key: i, "data-maestro-mapping-row": "", style: { display: "flex", gap: 8, marginBottom: 8, alignItems: "center", flexWrap: "wrap" } },
-      (0, import_react.createElement)("input", { placeholder: "group/project", style: { ...inputStyle, flex: "1 1 120px" }, value: row.projectPath, onChange: (e) => updateRow(i, "projectPath", e.target.value) }),
-      (0, import_react.createElement)("input", { placeholder: "/path/to/local/clone", style: { ...inputStyle, flex: "1 1 140px" }, value: row.localRepoPath, onChange: (e) => updateRow(i, "localRepoPath", e.target.value) }),
-      (0, import_react.createElement)(
-        "select",
-        { style: { ...inputStyle, flex: "0 0 130px" }, value: row.reviewProfile ?? "magento2", onChange: (e) => updateRow(i, "reviewProfile", e.target.value) },
-        (0, import_react.createElement)("option", { value: "magento2" }, "Magento 2"),
-        (0, import_react.createElement)("option", { value: "generic" }, "Generic")
-      ),
+      { style: { display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 12, padding: "4px 0 4px" } },
       (0, import_react.createElement)(
         "div",
-        { style: { flex: "0 0 auto" } },
-        (0, import_react.createElement)(ReviewModelSelector, {
-          value: row.reviewModel ?? null,
-          catalog,
-          fallbackValue: globalReviewModel ?? catalog?.current ?? null,
-          fallbackLabel: globalReviewModel ? "Use Global" : "Use DSH default",
-          onChange: (v) => updateRow(i, "reviewModel", v),
-          label: null
-        })
+        { style: { flex: 1, minWidth: 0 } },
+        (0, import_react.createElement)("div", { style: { fontSize: 14, fontWeight: 600, color: t.labelPrimary, lineHeight: "20px" } }, `Projects \u2014 ${rows.length} tracked`),
+        (0, import_react.createElement)("div", { style: { fontSize: 12, color: t.labelSecondary, lineHeight: "16px", marginTop: 2 } }, "GitLab path \u2192 local checkout \u2192 profile \u2192 model override")
       ),
-      (0, import_react.createElement)("button", { onClick: () => removeRow(i), style: secondaryButtonStyle, title: "Remove mapping" }, "\u2715")
-    )),
-    (0, import_react.createElement)("button", { onClick: addRow, style: secondaryButtonStyle }, "+ Add mapping")
-  );
-}
-function SecretInput({ label, placeholder, hasSaved, onSave }) {
-  const [draft, setDraft] = (0, import_react.useState)("");
-  const clear = () => {
-    setDraft("");
-    onSave("");
-  };
-  return (0, import_react.createElement)(
-    "div",
-    null,
-    (0, import_react.createElement)("label", { style: fieldLabelStyle }, label),
-    (0, import_react.createElement)(
+      (0, import_react.createElement)(Button, { variant: "primary", size: "md", onClick: addRow }, "+ Add project")
+    ),
+    rows.length === 0 ? (0, import_react.createElement)(
       "div",
-      { style: { display: "flex", gap: 8 } },
-      (0, import_react.createElement)("input", {
-        placeholder: hasSaved === true ? "saved \u2014 leave blank to keep" : placeholder,
-        type: "password",
-        autoComplete: "off",
-        style: inputStyle,
-        value: draft,
-        onChange: (e) => setDraft(e.target.value),
-        onBlur: () => {
-          if (draft !== "") onSave(draft);
+      {
+        "data-maestro-project-empty": "",
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          gap: 10,
+          padding: "20px 16px",
+          borderRadius: 12,
+          border: `1px dashed ${t.borderL2}`,
+          background: "transparent",
+          textAlign: "center"
         }
-      }),
-      hasSaved === true && (0, import_react.createElement)("button", { type: "button", style: secondaryButtonStyle, onClick: clear }, "Clear")
-    )
-  );
-}
-function ToggleField({ label, caption, checked, onChange }) {
-  return (0, import_react.createElement)(
-    "label",
-    { style: { display: "flex", alignItems: "flex-start", gap: 8, margin: "8px 0", cursor: "pointer" } },
-    (0, import_react.createElement)("input", { type: "checkbox", checked: checked === true, onChange: (e) => onChange(e.target.checked), style: { marginTop: 3 } }),
-    (0, import_react.createElement)(
-      "span",
-      null,
-      (0, import_react.createElement)("div", { style: { fontSize: 13 } }, label),
-      caption != null && (0, import_react.createElement)("div", { style: captionStyle }, caption)
-    )
-  );
-}
-function ReviewHistoryPanel({ rpcCall }) {
-  const [entries, setEntries] = (0, import_react.useState)(null);
-  (0, import_react.useEffect)(() => {
-    rpcCall(MAESTRO_ENDPOINTS.reviewsList, {}).then((res) => {
-      if (res?.ok) setEntries(res.value ?? []);
-    }).catch(() => setEntries([]));
-  }, []);
-  if (entries === null) return (0, import_react.createElement)("p", { style: captionStyle }, "Loading review history\u2026");
-  if (entries.length === 0) return (0, import_react.createElement)("p", { style: captionStyle }, "No reviews recorded yet.");
-  const icon = (entry) => entry.status === "completed" ? "\u2705" : entry.status === "failed" ? "\u26A0\uFE0F" : "\u{1F440}";
-  return (0, import_react.createElement)(
-    "ul",
-    { style: { listStyle: "none", margin: 0, padding: 0 } },
-    entries.map((entry) => (0, import_react.createElement)(
-      "li",
-      { key: entry.id, style: { padding: "6px 0", borderBottom: "1px solid var(--dsw-alias-separator-default, #333)", fontSize: 13 } },
-      (0, import_react.createElement)("span", null, `${icon(entry)} ${entry.projectPath} !${entry.mrIid} \xB7 ${entry.mode}${entry.trigger !== "mention" ? ` \xB7 ${entry.trigger}` : ""}`),
-      (0, import_react.createElement)(
-        "div",
-        { style: captionStyle },
-        `${new Date(entry.startedAt).toLocaleString()}${entry.summary ? ` \u2014 ${entry.summary}` : ""}${entry.error ? ` \u2014 ${entry.error}` : ""}`
+      },
+      (0, import_react.createElement)("div", { style: { fontSize: 13, color: t.labelSecondary, lineHeight: "18px" } }, "No projects yet \u2014 add your first mapping"),
+      (0, import_react.createElement)(Button, { variant: "outline", size: "md", onClick: addRow }, "+ Add project")
+    ) : (0, import_react.createElement)(
+      "div",
+      { style: { display: "flex", flexDirection: "column", gap: 12 } },
+      ...rows.map(
+        (row, i) => (0, import_react.createElement)(
+          "div",
+          {
+            key: i,
+            "data-maestro-project-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 + path + remove
+          (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.projectPath ? t.labelPrimary : t.labelTertiary,
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap",
+                    minWidth: 0
+                  }
+                },
+                row.projectPath || "Untitled project"
+              )
+            ),
+            (0, import_react.createElement)(
+              Button,
+              { variant: "outline", size: "sm", onClick: () => removeRow(i), "aria-label": `Remove project ${i + 1}`, title: "Remove mapping" },
+              "\u2715"
+            )
+          ),
+          // Grid 2-col for paths
+          (0, import_react.createElement)(
+            "div",
+            { "data-maestro-project-grid": "", style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 } },
+            (0, import_react.createElement)(
+              "label",
+              { style: fieldLabelStyle, "data-maestro-field": "" },
+              "GitLab path",
+              (0, import_react.createElement)(FieldInput, {
+                placeholder: "group/project",
+                value: row.projectPath,
+                onChange: (e) => updateRow(i, "projectPath", e.target.value),
+                "aria-label": `GitLab path ${i + 1}`,
+                style: { width: "100%" }
+              })
+            ),
+            (0, import_react.createElement)(
+              "label",
+              { style: fieldLabelStyle, "data-maestro-field": "" },
+              "Local checkout",
+              (0, import_react.createElement)(FieldInput, {
+                placeholder: "/path/to/local/clone",
+                value: row.localRepoPath,
+                onChange: (e) => updateRow(i, "localRepoPath", e.target.value),
+                "aria-label": `Local checkout ${i + 1}`,
+                style: { width: "100%" }
+              })
+            )
+          ),
+          // Row for profile + model — unified label+control, gap 12, pill h36
+          (0, import_react.createElement)(
+            "div",
+            { "data-maestro-project-profile-row": "", style: { display: "flex", gap: 12, flexWrap: "wrap", alignItems: "flex-start" } },
+            (0, import_react.createElement)(
+              "label",
+              { style: { ...fieldLabelStyle, flex: "1 1 160px", minWidth: 0 } },
+              "Review profile",
+              (0, import_react.createElement)(
+                "select",
+                {
+                  value: row.reviewProfile ?? "magento2",
+                  onChange: (e) => updateRow(i, "reviewProfile", e.target.value),
+                  "aria-label": `Review profile ${i + 1}`,
+                  style: {
+                    height: 36,
+                    width: "100%",
+                    padding: "0 14px",
+                    border: "none",
+                    borderRadius: 18,
+                    background: "var(--dsw-alias-bg-module-platform, #F5F6F7)",
+                    color: t.labelPrimary,
+                    font: "inherit",
+                    fontSize: 13
+                  }
+                },
+                (0, import_react.createElement)("option", { value: "magento2" }, "Magento 2"),
+                (0, import_react.createElement)("option", { value: "generic" }, "Generic")
+              )
+            ),
+            (0, import_react.createElement)(
+              "label",
+              { style: { ...fieldLabelStyle, flex: "1 1 200px", minWidth: 0 } },
+              "Model override",
+              (0, import_react.createElement)(ReviewModelSelector, {
+                value: row.reviewModel ?? null,
+                catalog,
+                fallbackValue: globalReviewModel ?? catalog?.current ?? null,
+                fallbackLabel: globalReviewModel ? "Use Global" : "Use DSH default",
+                onChange: (v) => updateRow(i, "reviewModel", v),
+                label: null
+              })
+            )
+          )
+        )
       )
-    ))
+    )
   );
 }
 function LanAccess({ proxyStatus, lanPin }) {
@@ -2626,40 +2902,26 @@ function LanAccess({ proxyStatus, lanPin }) {
   const [selected, setSelected] = (0, import_react.useState)(0);
   const index = Math.min(selected, Math.max(urls.length - 1, 0));
   if (!proxyStatus?.running) {
-    return (0, import_react.createElement)("p", { style: errorStyle }, proxyStatus?.errorMessage ?? "Proxy not running");
+    return (0, import_react.createElement)("p", { style: { color: t.stateError, fontSize: 12, margin: "8px 0 0" } }, proxyStatus?.errorMessage ?? "Proxy not running");
   }
   return (0, import_react.createElement)(
     "div",
     null,
-    (0, import_react.createElement)("p", { style: captionStyle }, lanPin?.enabled === true ? "Open this full DSH UI from any device on your network \u2014 visitors enter the LAN PIN below." : "Open this full DSH UI from any device on your network \u2014 no PIN needed."),
-    urls.length > 0 && (0, import_react.createElement)(
+    (0, import_react.createElement)("p", { style: captionStyle }, lanPin?.enabled === true ? "Open this DSH UI from any device on your network \u2014 visitors enter the LAN PIN below." : "Open this DSH UI from any device on your network \u2014 no PIN needed."),
+    urls.length > 0 ? (0, import_react.createElement)(
       "div",
       { style: { display: "flex", gap: 6, flexWrap: "wrap", marginBottom: 12 } },
-      urls.map((url, i) => (0, import_react.createElement)("button", {
-        key: url,
-        onClick: () => setSelected(i),
-        style: {
-          ...secondaryButtonStyle,
-          height: 26,
-          padding: "0 10px",
-          fontSize: 12,
-          borderRadius: 13,
-          ...i === index ? { background: "var(--dsw-alias-button-primary-fill)", borderColor: "transparent", color: "var(--dsw-alias-label-primary-foreground)" } : {}
-        }
-      }, url.replace(/^http:\/\//, "")))
-    ),
-    urls.length > 0 && (0, import_react.createElement)(
+      ...urls.map(
+        (url, i) => (0, import_react.createElement)(Button, { key: url, variant: i === index ? "primary" : "outline", size: "sm", onClick: () => setSelected(i) }, url.replace(/^http:\/\//, ""))
+      )
+    ) : null,
+    urls.length > 0 ? (0, import_react.createElement)(
       "div",
-      { style: { display: "flex", gap: 14, alignItems: "center" } },
+      { "data-maestro-qr-row": "", style: { display: "flex", gap: 14, alignItems: "center", flexWrap: "wrap" } },
       (0, import_react.createElement)(QrImage, { url: urls[index], size: 116 }),
-      (0, import_react.createElement)(
-        "div",
-        null,
-        (0, import_react.createElement)("div", { style: codeStyle }, urls[index]),
-        (0, import_react.createElement)("p", { style: captionStyle }, "Scan with a phone connected to the same network.")
-      )
-    ),
-    lanPin !== null && (0, import_react.createElement)(LanPinRow, { lanPin })
+      (0, import_react.createElement)("div", null, (0, import_react.createElement)("div", { style: { fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontSize: 12, color: t.labelPrimary, wordBreak: "break-all" } }, urls[index]), (0, import_react.createElement)("p", { style: captionStyle }, "Scan with a phone on the same network."))
+    ) : null,
+    lanPin !== null ? (0, import_react.createElement)(LanPinRow, { lanPin }) : null
   );
 }
 function LanPinRow({ lanPin }) {
@@ -2669,22 +2931,17 @@ function LanPinRow({ lanPin }) {
     (0, import_react.createElement)(
       "label",
       { style: { display: "flex", gap: 8, alignItems: "center", cursor: "pointer" } },
-      (0, import_react.createElement)("input", {
-        type: "checkbox",
-        checked: lanPin.enabled,
-        onChange: (e) => lanPin.onToggle(e.target.checked),
-        style: { width: 15, height: 15, accentColor: "var(--dsw-alias-button-primary-fill)" }
-      }),
+      (0, import_react.createElement)("input", { type: "checkbox", checked: lanPin.enabled, onChange: (e) => lanPin.onToggle(e.target.checked), style: { width: 15, height: 15, accentColor: t.primaryFill } }),
       (0, import_react.createElement)("span", { style: { ...fieldLabelStyle, margin: 0 } }, "Require a PIN on the LAN")
     ),
-    lanPin.enabled && (0, import_react.createElement)(
+    lanPin.enabled ? (0, import_react.createElement)(
       "div",
-      { style: { display: "flex", gap: 8, alignItems: "center", marginTop: 8 } },
+      { style: { display: "flex", gap: 8, alignItems: "center", marginTop: 8, flexWrap: "wrap" } },
       (0, import_react.createElement)("span", { style: { ...fieldLabelStyle, margin: 0 } }, "LAN PIN"),
-      (0, import_react.createElement)("code", { style: { ...codeStyle, fontSize: 15, letterSpacing: 2 } }, lanPin.show ? lanPin.pin ?? "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022" : "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022"),
-      lanPin.show ? (0, import_react.createElement)("button", { onClick: lanPin.onHide, style: secondaryButtonStyle }, "Hide") : (0, import_react.createElement)("button", { onClick: lanPin.onShow, style: secondaryButtonStyle }, "Show"),
-      (0, import_react.createElement)("button", { onClick: lanPin.onRotate, style: secondaryButtonStyle }, "Rotate")
-    )
+      (0, import_react.createElement)("code", { style: { fontFamily: "ui-monospace, monospace", fontSize: 15, letterSpacing: 2, color: t.labelPrimary } }, lanPin.show ? lanPin.pin ?? "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022" : "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022"),
+      lanPin.show ? (0, import_react.createElement)(Button, { variant: "outline", size: "sm", onClick: lanPin.onHide }, "Hide") : (0, import_react.createElement)(Button, { variant: "outline", size: "sm", onClick: lanPin.onShow }, "Show"),
+      (0, import_react.createElement)(Button, { variant: "outline", size: "sm", onClick: lanPin.onRotate }, "Rotate")
+    ) : null
   );
 }
 function PublicAccess({ status, pin, showPin, onRevealPin, onHidePin, onRotatePin }) {
@@ -2696,27 +2953,30 @@ function PublicAccess({ status, pin, showPin, onRevealPin, onHidePin, onRotatePi
       null,
       (0, import_react.createElement)(
         "div",
-        { style: { display: "flex", gap: 14, alignItems: "center", marginBottom: 12 } },
+        { "data-maestro-qr-row": "", style: { display: "flex", gap: 14, alignItems: "center", marginBottom: 12, flexWrap: "wrap" } },
         (0, import_react.createElement)(QrImage, { url: status.publicUrl, size: 116 }),
-        (0, import_react.createElement)(
-          "div",
-          null,
-          (0, import_react.createElement)("div", { style: codeStyle }, status.publicUrl),
-          (0, import_react.createElement)("p", { style: captionStyle }, "Works from anywhere; visitors enter the PIN below.")
-        )
+        (0, import_react.createElement)("div", null, (0, import_react.createElement)("div", { style: { fontFamily: "ui-monospace, monospace", fontSize: 12, color: t.labelPrimary, wordBreak: "break-all" } }, status.publicUrl), (0, import_react.createElement)("p", { style: captionStyle }, "Works from anywhere; visitors enter the PIN below."))
       )
     ) : (0, import_react.createElement)("p", { style: captionStyle }, "Start the tunnel to get a public address."),
     (0, import_react.createElement)(
       "div",
-      { style: { display: "flex", gap: 8, alignItems: "center" } },
+      { style: { display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" } },
       (0, import_react.createElement)("span", { style: { ...fieldLabelStyle, margin: 0 } }, "Access PIN"),
-      (0, import_react.createElement)("code", { style: { ...codeStyle, fontSize: 15, letterSpacing: 2 } }, showPin && pin !== null ? pin : "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022"),
-      showPin ? (0, import_react.createElement)("button", { onClick: onHidePin, style: secondaryButtonStyle }, "Hide") : (0, import_react.createElement)("button", { onClick: onRevealPin, style: secondaryButtonStyle }, "Show"),
-      (0, import_react.createElement)("button", { onClick: onRotatePin, style: secondaryButtonStyle }, "Rotate")
+      (0, import_react.createElement)("code", { style: { fontFamily: "ui-monospace, monospace", fontSize: 15, letterSpacing: 2, color: t.labelPrimary } }, showPin && pin !== null ? pin : "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022"),
+      showPin ? (0, import_react.createElement)(Button, { variant: "outline", size: "sm", onClick: onHidePin }, "Hide") : (0, import_react.createElement)(Button, { variant: "outline", size: "sm", onClick: onRevealPin }, "Show"),
+      (0, import_react.createElement)(Button, { variant: "outline", size: "sm", onClick: onRotatePin }, "Rotate")
     ),
     (0, import_react.createElement)("p", { style: captionStyle }, "Stays the same across tunnel and DSH restarts; use Rotate when you need a new PIN.")
   );
 }
+function NamedTunnelSetupNote() {
+  return (0, import_react.createElement)(
+    "div",
+    { style: { ...cardInsetStyle, marginTop: "12px" } },
+    (0, import_react.createElement)("p", { style: { ...captionStyle, marginBottom: 4, fontWeight: 500, color: t.labelPrimary } }, "Named tunnel \u2014 one-time manual setup (requires your own Cloudflare account):"),
+    (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 MaestroSettingsTab({ rpcCall, configRpcCall }) {
   const [status, setStatus] = (0, import_react.useState)(null);
   const [proxyStatus, setProxyStatus] = (0, import_react.useState)(null);
@@ -2729,11 +2989,141 @@ function MaestroSettingsTab({ rpcCall, configRpcCall }) {
   const [lanPinEnabled, setLanPinEnabled] = (0, import_react.useState)(false);
   const [lanPin, setLanPin] = (0, import_react.useState)(null);
   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 [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)); }
+      [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]: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-panel] { width:100%; min-width:0; box-sizing:border-box; }
+      /* label \u2192 input d\xEDnh nhau 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 (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-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-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; }
+        [data-maestro-control] { width:100% !important; justify-content:flex-start !important; }
+        [data-maestro-control] > span { width:100% !important; }
+        [data-maestro-control] select { width:100% !important; }
+        [data-maestro-project-grid] { grid-template-columns:1fr !important; }
+        [data-maestro-project-card] { padding:10px !important; }
+        [data-maestro-project-profile-row] { flex-direction:column !important; align-items:stretch !important; }
+        [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; }
+      }
+    `;
+    const tag = document.createElement("style");
+    tag.dataset.plugin = "@ddtcorex/dsh-maestro-config";
+    tag.dataset.pluginCss = "maestro/mobile-tabs.css";
+    tag.textContent = css;
+    document.head.appendChild(tag);
+    return () => tag.remove();
+  }, []);
   const call = async (endpoint, payload) => {
     const res = await rpcCall(endpoint, payload);
     if (!res?.ok) throw new Error(res?.error?.message ?? "RPC failed");
     return res.value;
   };
+  const unwrap = (res) => {
+    if (res && typeof res === "object" && "ok" in res) {
+      if (res.ok) return res.value;
+      throw new Error(res.error?.message ?? "RPC failed");
+    }
+    return res;
+  };
+  const cfgGet = async (domain) => {
+    if (!configRpcCall) throw new Error("config RPC not available");
+    const res = await configRpcCall("get", { domain });
+    return unwrap(res);
+  };
+  const cfgSet = async (domain, patch) => {
+    if (!configRpcCall) throw new Error("config RPC not available");
+    const res = await configRpcCall("set", { domain, patch });
+    return unwrap(res);
+  };
+  const saveGuard = async (patch) => {
+    setError(null);
+    const next = { ...guard, ...patch };
+    if (patch.gitProtection && guard.gitProtection) next.gitProtection = { ...guard.gitProtection, ...patch.gitProtection };
+    setGuard(next);
+    try {
+      await cfgSet("guard", patch);
+    } catch (e) {
+      setError(e.message ?? String(e));
+    }
+  };
+  const commitBlacklistPatterns = async (text) => {
+    const patterns = text.split("\n").map((s) => s.trim()).filter(Boolean);
+    setError(null);
+    try {
+      await cfgSet("guardBlacklist", { patterns });
+    } catch (e) {
+      setError(e.message ?? String(e));
+    }
+  };
+  const commitPlaceholders = async () => {
+    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;
+    }
+    try {
+      await cfgSet("guardBlacklist", { placeholders: obj });
+    } catch (e) {
+      setError(e.message ?? String(e));
+    }
+  };
+  const saveSupervisorCfg = async (patch) => {
+    setError(null);
+    setSupervisorCfg((prev) => ({ ...prev, ...patch }));
+    try {
+      await cfgSet("supervisor", patch);
+    } catch (e) {
+      setError(e.message ?? String(e));
+    }
+  };
+  const saveNotifierCfg = async (patch) => {
+    setError(null);
+    setNotifierCfg((prev) => {
+      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 next[k] = v;
+      }
+      return next;
+    });
+    try {
+      await cfgSet("notifier", patch);
+    } catch (e) {
+      setError(e.message ?? String(e));
+    }
+  };
   const refresh = async () => {
     try {
       setStatus(await call(MAESTRO_ENDPOINTS.status, {}));
@@ -2749,9 +3139,17 @@ function MaestroSettingsTab({ rpcCall, configRpcCall }) {
     });
     if (configRpcCall) {
       configRpcCall("get", { domain: "supervisor" }).then((res) => {
-        if (res?.ok && res.value?.model) {
-          setConfig((prev) => ({ ...prev, supervisorModel: res.value.model }));
-        }
+        if (res?.ok && res.value?.model) setConfig((prev) => ({ ...prev, supervisorModel: res.value.model }));
+      }).catch(() => {
+      });
+      Promise.all([cfgGet("guard").catch(() => ({})), cfgGet("guardBlacklist").catch(() => ({ patterns: [], placeholders: {} })), cfgGet("supervisor").catch(() => ({})), cfgGet("notifier").catch(() => ({}))]).then(([g, bl, sup, not]) => {
+        setGuard(g ?? {});
+        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));
+        setSupervisorCfg(sup ?? {});
+        setNotifierCfg(not ?? {});
       }).catch(() => {
       });
     }
@@ -2765,8 +3163,8 @@ function MaestroSettingsTab({ rpcCall, configRpcCall }) {
   }, []);
   (0, import_react.useEffect)(() => {
     refresh();
-    const t = setInterval(refresh, 3e3);
-    return () => clearInterval(t);
+    const t2 = setInterval(refresh, 3e3);
+    return () => clearInterval(t2);
   }, []);
   const revealPin = async () => {
     if (pin === null) {
@@ -2856,7 +3254,7 @@ function MaestroSettingsTab({ rpcCall, configRpcCall }) {
       try {
         const res = await configRpcCall("set", { domain: "supervisor", patch: { model: value } });
         if (res?.ok) return;
-      } catch (e) {
+      } catch {
       }
     }
     try {
@@ -2865,150 +3263,131 @@ function MaestroSettingsTab({ rpcCall, configRpcCall }) {
       setError(err.message);
     }
   };
-  return (0, import_react.createElement)(
-    "div",
-    { "data-maestro-settings-card": "", style: { maxWidth: 520 } },
-    (0, import_react.createElement)("h3", { style: { ...headingStyle, fontSize: 15, margin: "0 0 12px" } }, "Maestro"),
-    (0, import_react.createElement)("label", { style: fieldLabelStyle }, "Tunnel mode"),
-    (0, import_react.createElement)(
-      "select",
-      { value: config.tunnelMode, style: inputStyle, onChange: (e) => saveField("tunnelMode", e.target.value) },
-      (0, import_react.createElement)("option", { value: "quick" }, "Quick (no setup, URL changes on restart)"),
-      (0, import_react.createElement)("option", { value: "named" }, "Named (stable URL, one-time setup)")
-    ),
-    config.tunnelMode === "named" && (0, import_react.createElement)(NamedTunnelSetupNote),
-    config.tunnelMode === "named" && (0, import_react.createElement)(
+  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" }
+  ];
+  const tabContents = {
+    tunnel: (0, import_react.createElement)(
       "div",
-      null,
-      (0, import_react.createElement)("label", { style: fieldLabelStyle }, "Tunnel ID"),
-      (0, import_react.createElement)("input", { placeholder: "Tunnel ID", style: inputStyle, value: config.tunnelId ?? "", onChange: (e) => saveField("tunnelId", e.target.value) }),
-      (0, import_react.createElement)("label", { style: fieldLabelStyle }, "Credentials file path"),
-      (0, import_react.createElement)("input", { placeholder: "~/.cloudflared/<id>.json", style: inputStyle, value: config.tunnelCredentialsFile ?? "", onChange: (e) => saveField("tunnelCredentialsFile", e.target.value) }),
-      (0, import_react.createElement)("label", { style: fieldLabelStyle }, "Hostname"),
-      (0, import_react.createElement)("input", { placeholder: "dsh.example.com", style: inputStyle, value: config.tunnelHostname ?? "", onChange: (e) => saveField("tunnelHostname", e.target.value) })
+      { style: { display: "flex", flexDirection: "column" } },
+      (0, import_react.createElement)(SettingRow, { title: "Tunnel mode", description: "Quick = ephemeral URL, Named = stable URL with Cloudflare setup.", control: (0, import_react.createElement)("select", { value: config.tunnelMode, onChange: (e) => saveField("tunnelMode", e.target.value), style: { height: 36, padding: "0 12px", border: `1px solid ${t.borderL2}`, borderRadius: 18, background: "var(--dsw-alias-bg-module-platform, #F5F6F7)", color: t.labelPrimary, font: "inherit", fontSize: 13 } }, (0, import_react.createElement)("option", { value: "quick" }, "Quick"), (0, import_react.createElement)("option", { value: "named" }, "Named")) }),
+      config.tunnelMode === "named" ? (0, import_react.createElement)(NamedTunnelSetupNote, null) : null,
+      config.tunnelMode === "named" ? (0, import_react.createElement)(
+        "div",
+        { style: { display: "flex", flexDirection: "column" } },
+        (0, import_react.createElement)(SettingRow, { title: "Tunnel ID", description: "Cloudflare tunnel ID.", control: (0, import_react.createElement)(FieldInput, { placeholder: "Tunnel ID", value: config.tunnelId ?? "", onChange: (e) => saveField("tunnelId", e.target.value), style: { width: 260 } }) }),
+        (0, import_react.createElement)(SettingRow, { title: "Credentials file", description: "Path to tunnel credentials JSON.", control: (0, import_react.createElement)(FieldInput, { placeholder: "~/.cloudflared/<id>.json", value: config.tunnelCredentialsFile ?? "", onChange: (e) => saveField("tunnelCredentialsFile", e.target.value), style: { width: 260 } }) }),
+        (0, import_react.createElement)(SettingRow, { title: "Hostname", description: "Public hostname for the tunnel.", control: (0, import_react.createElement)(FieldInput, { placeholder: "dsh.example.com", value: config.tunnelHostname ?? "", onChange: (e) => saveField("tunnelHostname", e.target.value), style: { width: 260 } }) })
+      ) : null,
+      (0, import_react.createElement)("div", { style: { display: "flex", gap: 8, flexWrap: "wrap", padding: "12px 0", borderBottom: `1px solid ${t.borderL2}` } }, status?.running ? (0, import_react.createElement)(Button, { variant: "outline", size: "md", disabled: busy, onClick: stopTunnel }, "Stop tunnel") : (0, import_react.createElement)(Button, { variant: "primary", size: "md", disabled: busy, onClick: startTunnel }, "Start tunnel")),
+      (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 }))
     ),
-    (0, import_react.createElement)(
+    notify: (0, import_react.createElement)(
       "div",
-      { style: { marginTop: 12 } },
-      status?.running ? (0, import_react.createElement)("button", { disabled: busy, onClick: stopTunnel, style: secondaryButtonStyle }, "Stop tunnel") : (0, import_react.createElement)("button", { disabled: busy, onClick: startTunnel, style: primaryButtonStyle }, "Start tunnel")
+      { 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) })
     ),
-    (0, import_react.createElement)(
+    gitlab: (0, import_react.createElement)(
       "div",
-      { style: sectionStyle },
-      (0, import_react.createElement)("h4", { style: headingStyle }, "Remote access (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
-        }
-      })
+      { style: { display: "flex", flexDirection: "column" } },
+      (0, import_react.createElement)(SettingRow, { title: "GitLab base URL", description: "e.g. https://gitlab.example.com", control: (0, import_react.createElement)(FieldInput, { placeholder: "https://gitlab.example.com", value: config.gitlabBaseUrl ?? "", onChange: (e) => saveField("gitlabBaseUrl", e.target.value), style: { width: 260 } }) }),
+      (0, import_react.createElement)(SettingRow, { title: "GitLab token", description: "Personal access token with api scope.", control: (0, import_react.createElement)("div", { style: { display: "flex", gap: 8, alignItems: "center" } }, (0, import_react.createElement)(FieldInput, { type: "password", autoComplete: "off", value: config.hasGitlabToken ? "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022" : "", placeholder: "GitLab token", onChange: (e) => saveField("gitlabToken", e.target.value), style: { width: 200 } }), config.hasGitlabToken ? (0, import_react.createElement)(Button, { variant: "outline", size: "md", onClick: () => saveField("gitlabToken", "") }, "Clear") : null) }),
+      (0, import_react.createElement)(SettingRow, { title: "Bot username", description: "Username of the bot that posts reviews.", control: (0, import_react.createElement)(FieldInput, { placeholder: "maestro-bot", value: config.botUsername ?? "", onChange: (e) => saveField("botUsername", e.target.value), style: { width: 220 } }) }),
+      (0, import_react.createElement)(SettingRow, { title: "Webhook secret", description: "Secret token for GitLab webhooks.", control: (0, import_react.createElement)("div", { style: { display: "flex", gap: 8, alignItems: "center" } }, (0, import_react.createElement)(FieldInput, { type: "password", autoComplete: "off", value: config.hasWebhookSecret ? "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022" : "", placeholder: "Webhook secret", onChange: (e) => saveField("webhookSecret", e.target.value), style: { width: 200 } }), (0, import_react.createElement)(Button, { variant: "outline", size: "md", onClick: () => saveField("webhookSecret", generateWebhookSecret()) }, "Generate")) }),
+      (0, import_react.createElement)(
+        "div",
+        { style: { padding: "16px 0", display: "flex", flexDirection: "column", gap: 6 } },
+        (0, import_react.createElement)("p", { style: captionStyle }, "In GitLab: Settings \u2192 Webhooks, Secret token = this value, enable Merge request events. Webhook URL:"),
+        (0, import_react.createElement)("div", { style: { fontFamily: "ui-monospace, monospace", fontSize: 12, color: t.labelPrimary, wordBreak: "break-all", padding: "10px 12px", borderRadius: 8, background: t.bgLayer3, border: `1px solid ${t.borderL2}`, overflowWrap: "anywhere" } }, gitlabWebhookUrl(config.tunnelHostname))
+      )
     ),
-    (0, import_react.createElement)(
+    review: (0, import_react.createElement)(
       "div",
-      { style: sectionStyle },
-      (0, import_react.createElement)("h4", { style: headingStyle }, "Public access"),
-      (0, import_react.createElement)(PublicAccess, { status, pin, showPin, onRevealPin: revealPin, onHidePin: () => setShowPin(false), onRotatePin: rotatePin })
+      { style: { display: "flex", flexDirection: "column" } },
+      (0, import_react.createElement)(ToggleRow, { title: "Re-review on push", description: "When new commits are pushed, trigger an automatic re-review.", checked: config.autoRereviewOnPush === true, onChange: (v) => saveField("autoRereviewOnPush", v) }),
+      (0, import_react.createElement)(SettingRow, { title: "Global review model", description: "Model for automated reviews. Empty = DSH default.", control: (0, import_react.createElement)(ReviewModelSelector, { value: config.reviewModel ?? null, catalog, fallbackValue: catalog?.current ?? null, fallbackLabel: "Use DSH default", onChange: (v) => saveField("reviewModel", v), label: null }) }),
+      (0, import_react.createElement)(SettingRow, { title: "Supervisor model", description: "Model for auto-fixing DSH Web crashes.", control: (0, import_react.createElement)(ReviewModelSelector, { value: config.supervisorModel ?? null, catalog, fallbackValue: catalog?.current ?? null, fallbackLabel: "Use DSH default", onChange: (v) => saveField("supervisorModel", v), label: null }) }),
+      (0, import_react.createElement)(ProjectMappingsEditor, { mappings: config.projectMappings ?? [], onChange: (mappings) => saveField("projectMappings", mappings), catalog, globalReviewModel: config.reviewModel ?? null })
     ),
-    (0, import_react.createElement)(
+    guard: (0, import_react.createElement)(
       "div",
-      { style: sectionStyle },
-      (0, import_react.createElement)("h4", { style: headingStyle }, "Telegram notifications"),
-      (0, import_react.createElement)("p", { style: captionStyle }, "Send one protected startup update with the current public-access PIN to a single Telegram chat."),
-      (0, import_react.createElement)(SecretInput, {
-        label: "Bot token",
-        placeholder: "123456:ABC-DEF...",
-        hasSaved: config.hasTelegramBotToken,
-        onSave: (value) => saveField("telegramBotToken", value)
-      }),
-      (0, import_react.createElement)("label", { style: fieldLabelStyle }, "Chat ID"),
-      (0, import_react.createElement)("input", { placeholder: "-1001234567890", autoComplete: "off", style: inputStyle, value: config.telegramChatId ?? "", onChange: (e) => saveField("telegramChatId", e.target.value) }),
-      (0, import_react.createElement)(ToggleField, {
-        label: "Also notify about finished reviews",
-        caption: "One message per review run with its outcome and a short summary.",
-        checked: config.telegramReviewNotifications,
-        onChange: (checked) => saveField("telegramReviewNotifications", checked)
-      }),
-      (0, import_react.createElement)("p", { style: captionStyle }, "Leave either credential blank to disable notifications. Telegram delivery failures never prevent DSH from starting.")
+      { style: { display: "flex", flexDirection: "column" } },
+      (0, import_react.createElement)(ToggleRow, { title: "Block publish commands", description: "Prevent publish-related commands when enabled.", checked: guard.publishBlocked === true, onChange: (v) => saveGuard({ publishBlocked: v }) }),
+      (0, import_react.createElement)(ToggleRow, { title: "Protect git branches", description: "Block direct pushes to protected branches.", checked: guard.gitProtection?.enabled === true, onChange: (v) => saveGuard({ gitProtection: { enabled: v, branches: guard.gitProtection?.branches ?? ["master", "main"] } }) }),
+      (0, import_react.createElement)(SettingRow, { title: "Protected branches", description: "Comma-separated list, e.g. master, main.", control: (0, import_react.createElement)(FieldInput, { value: (guard.gitProtection?.branches ?? ["master", "main"]).join(", "), placeholder: "master, main", onChange: (e) => saveGuard({ gitProtection: { enabled: guard.gitProtection?.enabled ?? true, branches: e.target.value.split(",").map((s) => s.trim()).filter(Boolean) } }), style: { width: 260 } }) }),
+      (0, import_react.createElement)(ToggleRow, { title: "Contain working directory", description: "Restrict file operations to the session working directory.", checked: guard.cwdContainment === true, onChange: (v) => saveGuard({ cwdContainment: v }) }),
+      (0, import_react.createElement)(SettingRow, { title: "Credential file paths", description: "Comma-separated paths to credential files.", control: (0, import_react.createElement)(FieldInput, { value: (guard.credentialPaths ?? []).join(", "), placeholder: "~/.config/credentials.yaml", onChange: (e) => saveGuard({ credentialPaths: e.target.value.split(",").map((s) => s.trim()).filter(Boolean) }), style: { width: 260 } }) })
     ),
-    (0, import_react.createElement)(
+    blacklist: (0, import_react.createElement)(
       "div",
-      { style: sectionStyle },
-      (0, import_react.createElement)("h4", { style: headingStyle }, "GitLab"),
-      (0, import_react.createElement)("label", { style: fieldLabelStyle }, "GitLab base URL"),
-      (0, import_react.createElement)("input", { placeholder: "https://gitlab.example.com", style: inputStyle, value: config.gitlabBaseUrl ?? "", onChange: (e) => saveField("gitlabBaseUrl", e.target.value) }),
-      (0, import_react.createElement)(SecretInput, {
-        label: "GitLab token",
-        placeholder: "GitLab token",
-        hasSaved: config.hasGitlabToken,
-        onSave: (value) => saveField("gitlabToken", value)
-      }),
-      (0, import_react.createElement)("label", { style: fieldLabelStyle }, "Bot username"),
-      (0, import_react.createElement)("input", { placeholder: "maestro-bot", style: inputStyle, value: config.botUsername ?? "", onChange: (e) => saveField("botUsername", e.target.value) }),
-      (0, import_react.createElement)(SecretInput, {
-        label: "Webhook secret",
-        placeholder: "Webhook secret",
-        hasSaved: config.hasWebhookSecret,
-        onSave: (value) => saveField("webhookSecret", value)
-      }),
-      (0, import_react.createElement)("button", { type: "button", style: { ...secondaryButtonStyle, marginTop: 10 }, onClick: () => saveField("webhookSecret", generateWebhookSecret()) }, "Generate new secret"),
-      (0, import_react.createElement)("p", { style: captionStyle }, "In GitLab: Settings \u2192 Webhooks, set Secret token to this value and enable Merge request events."),
-      (0, import_react.createElement)("p", { style: captionStyle }, "Webhook URL:"),
-      (0, import_react.createElement)("code", { style: codeStyle }, gitlabWebhookUrl(config.tunnelHostname)),
-      (0, import_react.createElement)("p", { style: captionStyle }, "Overrides MAESTRO_GITLAB_WEBHOOK_SECRET immediately, no restart needed.")
+      { style: { display: "flex", flexDirection: "column" } },
+      (0, import_react.createElement)(
+        "div",
+        { style: { ...rowStyle, flexDirection: "column", alignItems: "stretch", gap: 8 } },
+        (0, import_react.createElement)("div", { style: rowTitleStyle }, "Blacklist patterns"),
+        (0, import_react.createElement)("div", { style: rowDescStyle }, "One pattern per line. Matching files are blocked from commit."),
+        (0, import_react.createElement)(TextareaField, { value: patternsText, placeholder: "example-project\nacme-shop", onChange: (e) => setPatternsText(e.target.value), onBlur: (e) => commitBlacklistPatterns(e.target.value) })
+      ),
+      (0, import_react.createElement)(
+        "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: { marginTop: 8 } }, (0, import_react.createElement)(Button, { variant: "outline", size: "sm", onClick: () => {
+          commitBlacklistPatterns(patternsText);
+          commitPlaceholders();
+        } }, "Save Blacklist"))
+      )
     ),
-    (0, import_react.createElement)(
+    supervisor: (0, import_react.createElement)(
       "div",
-      { style: sectionStyle },
-      (0, import_react.createElement)("h4", { style: headingStyle }, "Review automation"),
-      (0, import_react.createElement)(ToggleField, {
-        label: "Re-review when new commits are pushed",
-        caption: "After a completed review, further pushes to the same MR trigger an automatic quick re-review.",
-        checked: config.autoRereviewOnPush,
-        onChange: (checked) => saveField("autoRereviewOnPush", checked)
-      }),
-      (0, import_react.createElement)(ReviewHistoryPanel, { rpcCall })
+      { style: { display: "flex", flexDirection: "column" } },
+      (0, import_react.createElement)(SettingRow, { title: "Check interval", description: "Milliseconds between supervisor checks. Default 5000.", control: (0, import_react.createElement)(FieldInput, { type: "number", value: supervisorCfg.intervalMs ?? "", placeholder: "5000", onChange: (e) => {
+        const v = e.target.value === "" ? void 0 : Number(e.target.value);
+        saveSupervisorCfg({ intervalMs: v });
+      }, style: { width: 160 } }) }),
+      (0, import_react.createElement)(SettingRow, { title: "Down threshold", description: "Consecutive failures before marking a session as down.", control: (0, import_react.createElement)(FieldInput, { type: "number", value: supervisorCfg.downThreshold ?? "", placeholder: "3", onChange: (e) => {
+        const v = e.target.value === "" ? void 0 : Number(e.target.value);
+        saveSupervisorCfg({ downThreshold: v });
+      }, style: { width: 160 } }) }),
+      (0, import_react.createElement)(ToggleRow, { title: "Auto-resume sessions", description: "Automatically resume sessions marked as down.", checked: supervisorCfg.autoResumeEnabled === true, onChange: (v) => saveSupervisorCfg({ autoResumeEnabled: v }) })
     ),
-    (0, import_react.createElement)(
+    notifier: (0, import_react.createElement)(
       "div",
-      { style: sectionStyle },
-      (0, import_react.createElement)("h4", { style: headingStyle }, "Review model"),
-      (0, import_react.createElement)("p", { style: captionStyle }, "Model used for automated GitLab reviews (reviewer & auditor). Empty = DSH default. Per-project empty = inherits Global, or DSH default when Global is empty."),
-      (0, import_react.createElement)(ReviewModelSelector, {
-        value: config.reviewModel ?? null,
-        catalog,
-        fallbackValue: catalog?.current ?? null,
-        fallbackLabel: "Use DSH default",
-        onChange: (v) => saveField("reviewModel", v),
-        label: "Global review model"
-      })
-    ),
+      { 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 } }) })
+    )
+  };
+  return (0, import_react.createElement)(
+    "div",
+    { "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: sectionStyle },
-      (0, import_react.createElement)("h4", { style: headingStyle }, "Supervisor LLM"),
-      (0, import_react.createElement)("p", { style: captionStyle }, "Model used by the supervisor debug-agent to auto-fix DSH Web crashes. Empty = DSH default (or Review model if set). Uses the same provider catalog as Review."),
-      (0, import_react.createElement)(ReviewModelSelector, {
-        value: config.supervisorModel ?? null,
-        catalog,
-        fallbackValue: catalog?.current ?? null,
-        fallbackLabel: "Use DSH default",
-        onChange: (v) => saveField("supervisorModel", v),
-        label: "Supervisor model"
-      })
+      { 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.")
     ),
     (0, import_react.createElement)(
       "div",
-      { style: sectionStyle },
-      (0, import_react.createElement)("h4", { style: headingStyle }, "Projects"),
-      (0, import_react.createElement)(ProjectMappingsEditor, { mappings: config.projectMappings ?? [], onChange: (mappings) => saveField("projectMappings", mappings), catalog, globalReviewModel: config.reviewModel ?? null })
+      { "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))
     ),
-    error && (0, import_react.createElement)("p", { style: errorStyle }, error)
+    (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
   );
 }
 
@@ -3049,9 +3428,9 @@ function registerSettingsNavIcon(label, root) {
 }
 
 // src/client/index.tsx
-var SETTINGS_NAV_CSS2 = `
+var SETTINGS_NAV_CSS = `
 
-/* maestro: replace the settings-nav fallback gear with the maestro glyph */
+/* maestro: replace the settings-nav fallback gear with the Maestro M-logo glyph */
 [${SETTINGS_NAV_MARKER}] > svg:first-child {
   display: none;
 }
@@ -3062,15 +3441,16 @@ var SETTINGS_NAV_CSS2 = `
   width: 16px;
   height: 16px;
   background: currentColor;
-  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 10v3'/%3E%3Cpath d='M6 4v16'/%3E%3Cpath d='M10 8v8'/%3E%3Cpath d='M14 4v16'/%3E%3Cpath d='M18 6v12'/%3E%3Cpath d='M22 10v3'/%3E%3C/svg%3E") center / contain no-repeat;
-  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 10v3'/%3E%3Cpath d='M6 4v16'/%3E%3Cpath d='M10 8v8'/%3E%3Cpath d='M14 4v16'/%3E%3Cpath d='M18 6v12'/%3E%3Cpath d='M22 10v3'/%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.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;
 }
 `;
+var inject = ["slots", "connection"];
 function installNavIconStyle() {
   const tag = document.createElement("style");
   tag.dataset.plugin = "@ddtcorex/dsh-maestro-config";
   tag.dataset.pluginCss = "maestro/settings-nav.css";
-  tag.textContent = SETTINGS_NAV_CSS2;
+  tag.textContent = SETTINGS_NAV_CSS;
   document.head.appendChild(tag);
   return () => {
     document.querySelector('style[data-plugin-css="maestro/settings-nav.css"]')?.remove();