@harness-mix/cli 0.1.4 → 0.1.6

package/output/native-build/renderer-extension.js

@@ -15580,7 +15580,9 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
     planType: codexAccountPlanTypeSchema.optional(),
     codexHome: nonBlankTextSchema3.max(16384),
     active: external_exports.boolean(),
-    isDefault: external_exports.boolean()
+    isDefault: external_exports.boolean(),
+    authenticated: external_exports.boolean().optional(),
+    management: external_exports.enum(["native", "isolated"]).optional()
   }).strict();
   var codexAccountListResultSchema = external_exports.object({ accounts: external_exports.array(codexAccountSchema).max(128) }).strict();
   var codexAccountCreateParamsSchema = external_exports.object({ label: nonBlankTextSchema3.max(256).optional() }).strict();
@@ -15698,13 +15700,24 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
   }).strict();
 
   // src/native-ui/shared-contracts/src/thread-harness-switch.ts
+  var harnessHandoffIntentSchema = external_exports.enum(["continue", "execute-plan", "review", "reanalyze"]);
+  var harnessHandoffIncludesSchema = external_exports.object({
+    conversation: external_exports.boolean(),
+    plan: external_exports.boolean(),
+    evidence: external_exports.boolean(),
+    files: external_exports.boolean(),
+    unresolved: external_exports.boolean()
+  }).strict();
   var threadHarnessSwitchParamsSchema = external_exports.object({
     threadId: hostThreadIdSchema,
     harnessId: external_exports.string().min(1),
-    note: external_exports.string().max(2e3).optional()
+    note: external_exports.string().max(2e3).optional(),
+    intent: harnessHandoffIntentSchema.optional(),
+    includes: harnessHandoffIncludesSchema.optional()
   }).strict();
   var threadHarnessSwitchResultSchema = external_exports.object({
-    threadId: hostThreadIdSchema
+    threadId: hostThreadIdSchema,
+    checkpointId: external_exports.string().min(1)
   }).strict();
 
   // src/native-ui/shared-contracts/src/harness-commands.ts
@@ -16051,7 +16064,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 
   // src/native-ui/renderer-extension/src/renderer-agent-icon.ts
   var RENDERER_AGENT_LABELS = {
-    codex: "Codex",
+    codex: "Codex\uFF08\u5B98\u65B9\u539F\u751F\uFF09",
     pi: "Pi",
     "claude-code": "Claude Code",
     "deepseek-harness": "DeepSeek Harness",
@@ -16067,7 +16080,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
     zcode: "ZCode",
     trae: "Trae",
     "cursor-cli": "Cursor",
-    "codex-harness": "Codex\uFF08\u534F\u4F5C\uFF09"
+    "codex-harness": "Codex\uFF08Harness Mix \u534F\u4F5C\uFF09"
   };
   var PI_PATHS = [
     {
@@ -18023,8 +18036,8 @@ ${error51.stderrTail}`] : []
     sessionImportRetryOpen: "Try opening again",
     sessionImportRetrying: "Opening...",
     connectionsDescription: "View runtime status by Host. Select an item to inspect details or complete its setup.",
-    accountsDescription: "Choose the default account for new Codex tasks and check account limits.",
-    accountTaskHint: "Existing tasks keep the account they were created with. Multi-account is currently available for Codex.",
+    accountsDescription: "Manage isolated native Codex accounts and compare each account's live limits.",
+    accountTaskHint: "Signing in or switching accounts does not affect tasks already running. New tasks use the selected account.",
     accountConnected: "Connected accounts",
     accountDefaultBadge: "Default",
     accountAdd: "Add Account",
@@ -18051,6 +18064,11 @@ ${error51.stderrTail}`] : []
     accountActive: "Default",
     accountUse: "Set as default",
     accountSignIn: "Sign in",
+    accountSignOut: "Sign out",
+    accountSignOutConfirm: "Sign out of the current official Codex account?",
+    accountSigningOut: "Signing out of official Codex...",
+    accountSignedOut: "Signed out of official Codex.",
+    accountSignOutFailed: "Could not sign out of official Codex.",
     accountSigningIn: "Starting device sign-in...",
     accountDeviceCodePrerequisite: "Before signing in, enable \u201CEnable device code authorization for Codex\u201D in Web Settings \u2192 Account security & sign-in.",
     accountVerificationDescription: "Open the verification page and enter this one-time code:",
@@ -18214,6 +18232,8 @@ ${error51.stderrTail}`] : []
     pageLabels: Object.freeze({
       connections: "Connections",
       accounts: "Accounts",
+      mcp: "MCP",
+      skills: "Skills",
       "session-import": "Session Import",
       updates: "Updates",
       about: "About"
@@ -18263,8 +18283,8 @@ ${error51.stderrTail}`] : []
     sessionImportRetryOpen: "\u91CD\u8BD5\u6253\u5F00",
     sessionImportRetrying: "\u6B63\u5728\u6253\u5F00\u2026\u2026",
     connectionsDescription: "\u6309 Host \u67E5\u770B\u8FD0\u884C\u65F6\u72B6\u6001\u3002\u9009\u62E9\u4E00\u9879\uFF0C\u5728\u53F3\u4FA7\u68C0\u67E5\u8BE6\u60C5\u6216\u5B8C\u6210\u914D\u7F6E\u3002",
-    accountsDescription: "\u9009\u62E9\u65B0\u5EFA Codex \u4EFB\u52A1\u7684\u9ED8\u8BA4\u8D26\u53F7\uFF0C\u5E76\u67E5\u770B\u5404\u8D26\u53F7\u989D\u5EA6\u3002",
-    accountTaskHint: "\u5207\u6362\u9ED8\u8BA4\u8D26\u53F7\u4E0D\u4F1A\u5F71\u54CD\u5DF2\u5F00\u59CB\u7684\u4EFB\u52A1\u3002\u76EE\u524D\u4EC5\u652F\u6301 Codex \u591A\u8D26\u53F7\u3002",
+    accountsDescription: "\u7BA1\u7406\u76F8\u4E92\u9694\u79BB\u7684\u539F\u751F Codex \u8D26\u53F7\uFF0C\u5E76\u5BF9\u6BD4\u6BCF\u4E2A\u8D26\u53F7\u7684\u5B9E\u65F6\u989D\u5EA6\u3002",
+    accountTaskHint: "\u767B\u5F55\u6216\u5207\u6362\u8D26\u53F7\u4E0D\u4F1A\u5F71\u54CD\u5DF2\u5F00\u59CB\u7684\u4EFB\u52A1\uFF1B\u65B0\u4EFB\u52A1\u4F7F\u7528\u5F53\u524D\u9009\u4E2D\u7684\u8D26\u53F7\u3002",
     accountConnected: "\u5DF2\u8FDE\u63A5\u8D26\u53F7",
     accountDefaultBadge: "\u9ED8\u8BA4",
     accountAdd: "\u6DFB\u52A0\u8D26\u53F7",
@@ -18291,6 +18311,11 @@ ${error51.stderrTail}`] : []
     accountActive: "\u9ED8\u8BA4\u8D26\u53F7",
     accountUse: "\u8BBE\u4E3A\u9ED8\u8BA4",
     accountSignIn: "\u767B\u5F55",
+    accountSignOut: "\u9000\u51FA\u767B\u5F55",
+    accountSignOutConfirm: "\u786E\u5B9A\u9000\u51FA\u5F53\u524D\u5B98\u65B9 Codex \u8D26\u53F7\u5417\uFF1F",
+    accountSigningOut: "\u6B63\u5728\u9000\u51FA\u5B98\u65B9 Codex...",
+    accountSignedOut: "\u5DF2\u9000\u51FA\u5B98\u65B9 Codex\u3002",
+    accountSignOutFailed: "\u9000\u51FA\u5B98\u65B9 Codex \u5931\u8D25\u3002",
     accountSigningIn: "\u6B63\u5728\u542F\u52A8\u8BBE\u5907\u767B\u5F55...",
     accountDeviceCodePrerequisite: "\u767B\u5F55\u524D\uFF0C\u8BF7\u5148\u5728 Web \u7AEF\u7684\u201C\u8BBE\u7F6E \u2192 \u8D26\u53F7\u5B89\u5168\u4E0E\u767B\u5F55\u201D\u4E2D\u5F00\u542F\u201C\u4E3A Codex \u542F\u7528\u8BBE\u5907\u4EE3\u7801\u6388\u6743\u201D\u3002",
     accountVerificationDescription: "\u6253\u5F00\u9A8C\u8BC1\u9875\u9762\u5E76\u8F93\u5165\u4EE5\u4E0B\u4E00\u6B21\u6027\u4EE3\u7801\uFF1A",
@@ -18454,6 +18479,8 @@ ${error51.stderrTail}`] : []
     pageLabels: Object.freeze({
       connections: "\u8FDE\u63A5",
       accounts: "\u8D26\u53F7",
+      mcp: "MCP",
+      skills: "Skills",
       "session-import": "\u4F1A\u8BDD\u5BFC\u5165",
       updates: "\u66F4\u65B0",
       about: "\u5173\u4E8E"
@@ -18536,10 +18563,11 @@ ${error51.stderrTail}`] : []
     return `Agent: ${RENDERER_AGENT_LABELS[state.agent]}${account}${state.phase === "locked" ? " (locked)" : ""}`;
   }
   function rendererAgentPickerView(state, adapterState, switching, agents, availability = {}, codexAccountCount = 0) {
+    const handoffMode = state.phase === "locked" && state.agent !== "codex";
     const optionDisabled = Object.fromEntries(
       agents.map((agent) => [
         agent,
-        switching || state.phase === "locked" || agent !== "codex" && (adapterState !== "ready" || availability[agent] !== "ready")
+        switching || state.phase === "locked" && (!handoffMode || agent === "codex" || agent === state.agent) || agent !== "codex" && (adapterState !== "ready" || availability[agent] !== "ready")
       ])
     );
     const downloadVisible = Object.fromEntries(
@@ -18550,7 +18578,7 @@ ${error51.stderrTail}`] : []
     );
     return {
       label: RENDERER_AGENT_LABELS[state.agent],
-      triggerDisabled: switching || state.phase === "locked" || agents.length < 2 && codexAccountCount < 2,
+      triggerDisabled: switching || (state.phase === "locked" ? !handoffMode || !agents.some((agent) => optionDisabled[agent] === false) : agents.length < 2 && codexAccountCount < 2),
       nativeModelHidden: switching || state.agent !== "codex",
       optionDisabled,
       downloadVisible,
@@ -18631,7 +18659,21 @@ ${error51.stderrTail}`] : []
     ownershipError.setAttribute("aria-hidden", "true");
     ownershipError.style.display = "none";
     ownershipError.style.font = "bold 16px/1 system-ui, sans-serif";
-    trigger.append(iconSlot, spinner, ownershipError);
+    const handoffBadge = document.createElement("span");
+    handoffBadge.textContent = "\u2197";
+    handoffBadge.setAttribute("aria-hidden", "true");
+    handoffBadge.style.display = "none";
+    handoffBadge.style.position = "absolute";
+    handoffBadge.style.right = "1px";
+    handoffBadge.style.bottom = "0";
+    handoffBadge.style.width = "11px";
+    handoffBadge.style.height = "11px";
+    handoffBadge.style.borderRadius = "999px";
+    handoffBadge.style.background = "#4f7ff0";
+    handoffBadge.style.color = "white";
+    handoffBadge.style.font = "700 9px/11px system-ui, sans-serif";
+    handoffBadge.style.textAlign = "center";
+    trigger.append(iconSlot, spinner, ownershipError, handoffBadge);
     const menu = document.createElement("div");
     menu.id = `${composerId}-agent-menu`;
     menu.setAttribute("role", "menu");
@@ -18656,6 +18698,11 @@ ${error51.stderrTail}`] : []
     const options = {};
     const rowsByAgent = /* @__PURE__ */ new Map();
     const groupMessages = pickerGroupMessages();
+    const modeHeading = document.createElement("div");
+    modeHeading.hidden = true;
+    modeHeading.style.padding = "6px 8px 7px";
+    modeHeading.style.font = "600 11px/1 system-ui, sans-serif";
+    modeHeading.style.opacity = "0.58";
     const close = () => {
       if (!popoverOpen(menu)) return;
       if (typeof menu.hidePopover === "function") menu.hidePopover();
@@ -18930,7 +18977,7 @@ ${error51.stderrTail}`] : []
     });
     regroup();
     const unsubscribeGroup = groupPreference.subscribe(regroup);
-    menu.append(mainGroup, moreToggle, morePanel, cta);
+    menu.append(modeHeading, mainGroup, moreToggle, morePanel, cta);
     root.append(trigger, menu);
     const onTriggerClick = () => {
       if (popoverOpen(menu)) close();
@@ -18979,6 +19026,8 @@ ${error51.stderrTail}`] : []
       iconSlot,
       spinner,
       ownershipError,
+      handoffBadge,
+      modeHeading,
       menu,
       agents: [...enabledAgents],
       options,
@@ -19022,7 +19071,7 @@ ${error51.stderrTail}`] : []
     control.trigger.setAttribute("aria-busy", String(switching));
     control.trigger.setAttribute(
       "aria-label",
-      ownershipError ? pickerGroupMessages().ownershipErrorLabel : state.phase === "locked" ? `Agent: ${view.label}` : `Select Agent, current ${view.label}`
+      ownershipError ? pickerGroupMessages().ownershipErrorLabel : state.phase === "locked" ? state.agent === "codex" ? `Agent: ${view.label}` : `Hand off task from ${view.label}` : `Select Agent, current ${view.label}`
     );
     const activeAccount = codexAccounts.find(({ active }) => active);
     control.codexAccountGroup.render({
@@ -19031,12 +19080,16 @@ ${error51.stderrTail}`] : []
       disabled: switching || state.phase === "locked",
       showBadge: state.agent === "codex" && codexAccounts.length > 1
     });
-    control.trigger.title = ownershipError ? pickerGroupMessages().ownershipErrorLabel : rendererAgentPickerTooltip(state, activeAccount);
+    control.trigger.title = ownershipError ? pickerGroupMessages().ownershipErrorLabel : state.phase === "locked" && state.agent !== "codex" ? `Hand off this task from ${view.label} to another Harness` : rendererAgentPickerTooltip(state, activeAccount);
     control.trigger.style.cursor = control.trigger.disabled ? "not-allowed" : "pointer";
     control.trigger.style.opacity = control.trigger.disabled && !switching ? "0.72" : "1";
     control.iconSlot.style.display = switching || ownershipError ? "none" : "inline-flex";
     control.spinner.style.display = switching ? "block" : "none";
     control.ownershipError.style.display = ownershipError && !switching ? "block" : "none";
+    const handoffMode = state.phase === "locked" && state.agent !== "codex";
+    control.handoffBadge.style.display = handoffMode && !switching && !ownershipError ? "block" : "none";
+    control.modeHeading.hidden = !handoffMode;
+    control.modeHeading.textContent = pickerGroupMessages().locale === "zh-CN" ? `\u63A5\u529B\u5230\u5176\u4ED6 Harness` : "Hand off to another Harness";
     if (control.trigger.disabled) control.close();
     for (const agent of control.agents) {
       const option = control.options[agent];
@@ -21277,6 +21330,291 @@ ${error51.stderrTail}`] : []
     return control;
   }
 
+  // src/native-ui/renderer-extension/src/renderer-harness-handoff.ts
+  var HARNESS_HANDOFF_NOTE_MAX_LENGTH = 2e3;
+  function rendererHarnessHandoffMessages(locale) {
+    return locale === "zh-CN" ? {
+      title: "\u63A5\u529B\u5F53\u524D\u4EFB\u52A1",
+      description: "\u4FDD\u7559\u6B64\u4EFB\u52A1\u7A97\u53E3\u3001\u5BF9\u8BDD\u8BB0\u5F55\u548C\u6587\u4EF6\u73B0\u573A\uFF0C\u53EA\u66F4\u6362\u7EE7\u7EED\u6267\u884C\u7684 Harness\u3002",
+      noteLabel: "\u4EA4\u63A5\u8BF4\u660E\uFF08\u53EF\u9009\uFF09",
+      intentLabel: "\u63A5\u529B\u65B9\u5F0F",
+      intentOptions: { continue: "\u7EE7\u7EED\u6267\u884C", "execute-plan": "\u6267\u884C\u4E0A\u4E00\u65B9\u6848", review: "\u72EC\u7ACB\u5BA1\u67E5", reanalyze: "\u91CD\u65B0\u5206\u6790" },
+      includeLabel: "\u5C06\u8981\u4EA4\u63A5",
+      includeOptions: { conversation: "\u8FD1\u671F\u5BF9\u8BDD", plan: "\u5F53\u524D\u8BA1\u5212", evidence: "\u6D4B\u8BD5\u4E0E\u5DE5\u5177\u8BC1\u636E", files: "\u6587\u4EF6\u53D8\u66F4", unresolved: "\u672A\u89E3\u51B3\u95EE\u9898" },
+      notePlaceholder: "\u4F8B\u5982\uFF1A\u6309\u4E0A\u9762\u7684\u65B9\u6848\u7EE7\u7EED\u5B9E\u73B0\uFF0C\u5148\u6838\u5BF9\u5F53\u524D\u6587\u4EF6\u72B6\u6001\u548C\u672A\u5B8C\u6210\u6B65\u9AA4",
+      context: "\u4E0B\u4E00\u6761\u6D88\u606F\u4F1A\u81EA\u52A8\u643A\u5E26\u8FD1\u671F\u5BF9\u8BDD\u3001\u6700\u65B0\u65B9\u6848\u3001\u8BA1\u5212\u548C\u53D8\u66F4\u6587\u4EF6\u3002",
+      running: "\u82E5\u5F53\u524D\u56DE\u5408\u4ECD\u5728\u8FD0\u884C\uFF0C\u8BF7\u5148\u505C\u6B62\u6216\u7B49\u5F85\u5B8C\u6210\u3002",
+      cancel: "\u53D6\u6D88",
+      confirm: "\u786E\u8BA4\u63A5\u529B",
+      submitting: "\u6B63\u5728\u5207\u6362\u2026"
+    } : {
+      title: "Hand off this task",
+      description: "Keep this task, transcript, and working tree; only change the Harness that continues it.",
+      noteLabel: "Handoff note (optional)",
+      intentLabel: "Handoff mode",
+      intentOptions: { continue: "Continue", "execute-plan": "Execute prior plan", review: "Independent review", reanalyze: "Reanalyze" },
+      includeLabel: "Include",
+      includeOptions: { conversation: "Recent conversation", plan: "Current plan", evidence: "Test and tool evidence", files: "File changes", unresolved: "Open issues" },
+      notePlaceholder: "For example: implement the plan above; verify the working tree and remaining steps first",
+      context: "Your next message will include recent context, the latest solution, plan, and changed files.",
+      running: "If a turn is still running, stop it or wait for it to finish first.",
+      cancel: "Cancel",
+      confirm: "Hand off",
+      submitting: "Switching\u2026"
+    };
+  }
+  function setButtonChrome(button, primary = false) {
+    button.style.height = "34px";
+    button.style.padding = "0 14px";
+    button.style.border = primary ? "1px solid color-mix(in srgb, #5b8cff 70%, CanvasText 30%)" : "1px solid color-mix(in srgb, CanvasText 18%, transparent)";
+    button.style.borderRadius = "7px";
+    button.style.background = primary ? "#4f7ff0" : "color-mix(in srgb, Canvas 94%, CanvasText 6%)";
+    button.style.color = primary ? "white" : "CanvasText";
+    button.style.font = "500 13px/1 system-ui, sans-serif";
+    button.style.cursor = "pointer";
+  }
+  function mountRendererHarnessHandoff(composerId, onConfirm) {
+    const dialog = document.createElement("dialog");
+    dialog.id = `${composerId}-harness-handoff`;
+    dialog.setAttribute("aria-modal", "true");
+    dialog.style.width = "min(440px, calc(100vw - 32px))";
+    dialog.style.boxSizing = "border-box";
+    dialog.style.padding = "0";
+    dialog.style.border = "1px solid color-mix(in srgb, CanvasText 18%, transparent)";
+    dialog.style.borderRadius = "14px";
+    dialog.style.background = "Canvas";
+    dialog.style.color = "CanvasText";
+    dialog.style.boxShadow = "0 24px 70px rgba(0, 0, 0, 0.42)";
+    dialog.style.font = "13px/1.45 system-ui, sans-serif";
+    dialog.style.zIndex = "2147483647";
+    const frame = document.createElement("div");
+    frame.style.display = "flex";
+    frame.style.flexDirection = "column";
+    frame.style.gap = "14px";
+    frame.style.padding = "20px";
+    const title = document.createElement("h2");
+    title.style.margin = "0";
+    title.style.font = "600 17px/1.25 system-ui, sans-serif";
+    const description = document.createElement("p");
+    description.style.margin = "-6px 0 0";
+    description.style.opacity = "0.72";
+    const route = document.createElement("div");
+    route.style.display = "grid";
+    route.style.gridTemplateColumns = "1fr auto 1fr";
+    route.style.alignItems = "center";
+    route.style.gap = "10px";
+    route.style.padding = "12px";
+    route.style.borderRadius = "10px";
+    route.style.background = "color-mix(in srgb, CanvasText 6%, transparent)";
+    const fromBox = document.createElement("div");
+    const toBox = document.createElement("div");
+    for (const box of [fromBox, toBox]) {
+      box.style.display = "flex";
+      box.style.alignItems = "center";
+      box.style.gap = "8px";
+      box.style.minWidth = "0";
+      box.style.fontWeight = "600";
+    }
+    const arrow = document.createElement("span");
+    arrow.textContent = "\u2192";
+    arrow.setAttribute("aria-hidden", "true");
+    arrow.style.opacity = "0.55";
+    route.append(fromBox, arrow, toBox);
+    const intentLabel = document.createElement("label");
+    intentLabel.style.display = "flex";
+    intentLabel.style.flexDirection = "column";
+    intentLabel.style.gap = "7px";
+    const intentLabelText = document.createElement("span");
+    intentLabelText.style.fontWeight = "600";
+    const intent = document.createElement("select");
+    intent.style.height = "36px";
+    intent.style.padding = "0 10px";
+    intent.style.border = "1px solid color-mix(in srgb, CanvasText 20%, transparent)";
+    intent.style.borderRadius = "8px";
+    intent.style.background = "Canvas";
+    intent.style.color = "CanvasText";
+    intent.style.font = "13px/1 system-ui, sans-serif";
+    for (const value of ["continue", "execute-plan", "review", "reanalyze"]) {
+      const option = document.createElement("option");
+      option.value = value;
+      intent.append(option);
+    }
+    intentLabel.append(intentLabelText, intent);
+    const includeSection = document.createElement("fieldset");
+    includeSection.style.margin = "0";
+    includeSection.style.padding = "10px 11px";
+    includeSection.style.border = "1px solid color-mix(in srgb, CanvasText 14%, transparent)";
+    includeSection.style.borderRadius = "8px";
+    const includeLegend = document.createElement("legend");
+    includeLegend.style.padding = "0 5px";
+    includeLegend.style.fontWeight = "600";
+    includeSection.append(includeLegend);
+    const includeGrid = document.createElement("div");
+    includeGrid.style.display = "grid";
+    includeGrid.style.gridTemplateColumns = "repeat(2, minmax(0, 1fr))";
+    includeGrid.style.gap = "8px 12px";
+    const includeInputs = {};
+    const includeLabels = {};
+    for (const key of ["conversation", "plan", "evidence", "files", "unresolved"]) {
+      const row = document.createElement("label");
+      row.style.display = "flex";
+      row.style.alignItems = "center";
+      row.style.gap = "7px";
+      const input = document.createElement("input");
+      input.type = "checkbox";
+      input.checked = true;
+      const text = document.createTextNode("");
+      row.append(input, text);
+      includeGrid.append(row);
+      includeInputs[key] = input;
+      includeLabels[key] = text;
+    }
+    includeSection.append(includeGrid);
+    const label = document.createElement("label");
+    label.style.display = "flex";
+    label.style.flexDirection = "column";
+    label.style.gap = "7px";
+    const labelText = document.createElement("span");
+    labelText.style.fontWeight = "600";
+    const note = document.createElement("textarea");
+    note.rows = 3;
+    note.maxLength = HARNESS_HANDOFF_NOTE_MAX_LENGTH;
+    note.style.boxSizing = "border-box";
+    note.style.width = "100%";
+    note.style.minHeight = "76px";
+    note.style.resize = "vertical";
+    note.style.padding = "10px 11px";
+    note.style.border = "1px solid color-mix(in srgb, CanvasText 20%, transparent)";
+    note.style.borderRadius = "8px";
+    note.style.outline = "none";
+    note.style.background = "color-mix(in srgb, Canvas 96%, CanvasText 4%)";
+    note.style.color = "CanvasText";
+    note.style.font = "13px/1.45 system-ui, sans-serif";
+    label.append(labelText, note);
+    const context = document.createElement("p");
+    context.style.margin = "0";
+    context.style.padding = "9px 10px";
+    context.style.borderRadius = "8px";
+    context.style.background = "color-mix(in srgb, #5b8cff 10%, transparent)";
+    const running = document.createElement("p");
+    running.style.margin = "-8px 0 0";
+    running.style.opacity = "0.65";
+    const error51 = document.createElement("p");
+    error51.setAttribute("role", "alert");
+    error51.hidden = true;
+    error51.style.margin = "-8px 0 0";
+    error51.style.color = "#ef6666";
+    const actions = document.createElement("div");
+    actions.style.display = "flex";
+    actions.style.justifyContent = "flex-end";
+    actions.style.gap = "8px";
+    const cancel = document.createElement("button");
+    cancel.type = "button";
+    setButtonChrome(cancel);
+    const confirm = document.createElement("button");
+    confirm.type = "button";
+    setButtonChrome(confirm, true);
+    actions.append(cancel, confirm);
+    frame.append(title, description, route, intentLabel, includeSection, label, context, running, error51, actions);
+    dialog.append(frame);
+    document.body.append(dialog);
+    let from = "pi";
+    let to = "claude-code";
+    let locale = "en";
+    let submitting = false;
+    const render = () => {
+      const messages = rendererHarnessHandoffMessages(locale);
+      title.textContent = messages.title;
+      description.textContent = messages.description;
+      labelText.textContent = messages.noteLabel;
+      intentLabelText.textContent = messages.intentLabel;
+      includeLegend.textContent = messages.includeLabel;
+      for (const [value, text] of Object.entries(messages.intentOptions)) {
+        const option = [...intent.options].find((candidate) => candidate.value === value);
+        if (option) option.textContent = text;
+      }
+      for (const key of Object.keys(includeInputs)) includeLabels[key].data = messages.includeOptions[key];
+      note.placeholder = messages.notePlaceholder;
+      context.textContent = messages.context;
+      running.textContent = messages.running;
+      cancel.textContent = messages.cancel;
+      confirm.textContent = submitting ? messages.submitting : messages.confirm;
+      fromBox.replaceChildren(createRendererAgentIcon(from, 24), document.createTextNode(RENDERER_AGENT_LABELS[from]));
+      toBox.replaceChildren(createRendererAgentIcon(to, 24), document.createTextNode(RENDERER_AGENT_LABELS[to]));
+      note.disabled = submitting;
+      intent.disabled = submitting;
+      includeSection.disabled = submitting;
+      cancel.disabled = submitting;
+      confirm.disabled = submitting;
+      cancel.style.cursor = submitting ? "not-allowed" : "pointer";
+      confirm.style.cursor = submitting ? "wait" : "pointer";
+      confirm.setAttribute("aria-busy", String(submitting));
+    };
+    const close = () => {
+      if (submitting) return;
+      if (dialog.open) dialog.close();
+    };
+    cancel.addEventListener("click", close);
+    confirm.addEventListener("click", () => {
+      if (submitting) return;
+      onConfirm({
+        from,
+        to,
+        note: note.value.trim(),
+        intent: intent.value,
+        includes: Object.fromEntries(Object.entries(includeInputs).map(([key, input]) => [key, input.checked]))
+      });
+    });
+    note.addEventListener("keydown", (event) => {
+      if ((event.ctrlKey || event.metaKey) && event.key === "Enter" && !submitting) {
+        event.preventDefault();
+        confirm.click();
+      }
+    });
+    dialog.addEventListener("cancel", (event) => {
+      if (submitting) event.preventDefault();
+    });
+    const control = {
+      dialog,
+      note,
+      intent,
+      includeInputs,
+      confirm,
+      cancel,
+      error: error51,
+      open(nextFrom, nextTo, nextLocale) {
+        from = nextFrom;
+        to = nextTo;
+        locale = nextLocale;
+        submitting = false;
+        note.value = "";
+        intent.value = "continue";
+        for (const input of Object.values(includeInputs)) input.checked = true;
+        error51.hidden = true;
+        error51.textContent = "";
+        render();
+        if (!dialog.open) dialog.showModal();
+        queueMicrotask(() => note.focus());
+      },
+      close,
+      setSubmitting(nextSubmitting) {
+        submitting = nextSubmitting;
+        render();
+      },
+      showError(message) {
+        error51.textContent = message;
+        error51.hidden = false;
+      },
+      dispose() {
+        submitting = false;
+        if (dialog.open) dialog.close();
+        dialog.remove();
+      }
+    };
+    render();
+    return control;
+  }
+
   // src/native-ui/renderer-extension/src/renderer-composer-dom.ts
   var CODEX_COMPOSER_SELECTOR = "[data-codex-composer-root]";
   var EDITOR_SELECTOR = 'textarea, [contenteditable="true"], [role="textbox"]';
@@ -21564,7 +21902,7 @@ ${error51.stderrTail}`] : []
     setNativeControlHidden(control.nativeContextUsageControl, false);
     setNativeControlHidden(control.nativePermissionModeControl, hidePermissionMode);
   }
-  function mountComposerAgentControl(composer, composerId, sendButton, enabledAgents, onSelect, onDownload, onSelectCodexAccount, onOpenProviderPicker, onSelectModel, onSelectThinking, onSelectPermissionMode, onSelectCommand) {
+  function mountComposerAgentControl(composer, composerId, sendButton, enabledAgents, onSelect, onDownload, onSelectCodexAccount, onOpenProviderPicker, onSelectModel, onSelectThinking, onSelectPermissionMode, onSelectCommand, onConfirmHandoff) {
     const nativeModelControl = captureNativeControl(nativeModelControlForComposer(composer));
     const nativeContextUsageControl = captureNativeControl(
       nativeContextUsageControlForComposer(composer)
@@ -21592,6 +21930,7 @@ ${error51.stderrTail}`] : []
       trailingActionAnchor(sendButton),
       onSelectCommand
     );
+    const harnessHandoff = mountRendererHarnessHandoff(composerId, onConfirmHandoff);
     const permissionParent = nativePermissionModeControl?.element.parentElement;
     if (permissionParent && nativePermissionModeControl && nativePermissionModeControlVerified) {
       permissionParent.insertBefore(permissionModePicker.root, nativePermissionModeControl.element);
@@ -21613,6 +21952,7 @@ ${error51.stderrTail}`] : []
       credits,
       usage: null,
       harnessCommands,
+      harnessHandoff,
       sendButton,
       sendDisabledBeforeSwitch: null
     };
@@ -21690,6 +22030,7 @@ ${error51.stderrTail}`] : []
     control.usage?.dispose();
     control.usage = null;
     control.harnessCommands.dispose();
+    control.harnessHandoff.dispose();
     control.permissionModePicker.dispose();
     control.modelPicker.dispose();
     control.picker.dispose();
@@ -21705,6 +22046,10 @@ ${error51.stderrTail}`] : []
       selectedAccountId: validOverrideAccountId ?? activeAccountId
     };
   }
+  function codexAccountRouteOverride(accounts, accountId) {
+    if (!accountId) return null;
+    return accounts.find((account) => account.accountId === accountId)?.management === "isolated" ? accountId : null;
+  }
   var RendererCodexAccountState = class {
     constructor(client) {
       this.client = client;
@@ -22511,6 +22856,39 @@ ${error51.stderrTail}`] : []
     };
   }
 
+  // src/native-ui/renderer-extension/src/renderer-integrations-client.ts
+  var serverSchema = external_exports.object({
+    id: external_exports.string(),
+    name: external_exports.string(),
+    transportType: external_exports.enum(["stdio", "streamable_http"]).optional(),
+    command: external_exports.string().optional().default(""),
+    args: external_exports.array(external_exports.string()).optional().default([]),
+    env: external_exports.record(external_exports.string(), external_exports.string()).optional(),
+    env_vars: external_exports.array(external_exports.string()).optional(),
+    cwd: external_exports.string().nullable().optional(),
+    url: external_exports.string().optional(),
+    bearer_token_env_var: external_exports.string().optional(),
+    http_headers: external_exports.record(external_exports.string(), external_exports.string()).optional(),
+    env_http_headers: external_exports.record(external_exports.string(), external_exports.string()).optional(),
+    enabled: external_exports.boolean(),
+    scope: external_exports.enum(["global", "project"]),
+    editable: external_exports.boolean(),
+    effective: external_exports.boolean(),
+    appliedSessions: external_exports.number()
+  });
+  var skillSchema = external_exports.object({ name: external_exports.string(), path: external_exports.string(), root: external_exports.string(), enabled: external_exports.boolean(), writable: external_exports.boolean(), scope: external_exports.enum(["global", "project"]), status: external_exports.string() });
+  var snapshotSchema = external_exports.object({ harnessId: external_exports.string(), mcpSupported: external_exports.boolean(), skillsSupported: external_exports.boolean(), servers: external_exports.array(serverSchema), native: external_exports.array(external_exports.object({ sessionId: external_exports.string(), name: external_exports.string(), status: external_exports.string(), tools: external_exports.array(external_exports.string()) })), skills: external_exports.array(skillSchema), note: external_exports.string() });
+  var catalogSchema = external_exports.object({ harnesses: external_exports.array(external_exports.object({ id: external_exports.string(), name: external_exports.string(), available: external_exports.boolean(), mcp: external_exports.boolean(), skills: external_exports.boolean() })) });
+  function createRendererIntegrationsClient(send) {
+    return {
+      integrationCatalog: async () => catalogSchema.parse(await send("codexhost/integrations/catalog", {})),
+      listIntegrations: async (input) => snapshotSchema.parse(await send("codexhost/integrations/list", input)),
+      saveMcp: (input) => send("codexhost/integrations/mcp/save", input),
+      removeMcp: (input) => send("codexhost/integrations/mcp/remove", input),
+      changeSkill: (input) => send("codexhost/integrations/skill/change", input)
+    };
+  }
+
   // src/native-ui/renderer-extension/src/renderer-session-import-client.ts
   var RendererSessionImportUnavailableError = class extends Error {
     constructor() {
@@ -22578,6 +22956,7 @@ ${error51.stderrTail}`] : []
   var UPDATE_CHECK_METHOD = "codexhost/update/check";
   var UPDATE_START_METHOD = "codexhost/update/start";
   var UPDATE_STATUS_METHOD = "codexhost/update/status";
+  var RUNTIME_VERSION_METHOD = "harness-mix/runtime/version";
   var CODEX_ACCOUNT_LIST_METHOD = "codexhost/account/list";
   var CODEX_ACCOUNT_REFRESH_METHOD = "codexhost/account/refresh";
   var CODEX_ACCOUNT_CREATE_METHOD = "codexhost/account/create";
@@ -22691,6 +23070,7 @@ ${error51.stderrTail}`] : []
         if (!Array.isArray(result) || !result.every((a) => a && typeof a.id === "string" && typeof a.name === "string" && typeof a.available === "boolean" && typeof a.lead === "boolean")) throw new Error("Invalid collaboration catalog");
         return result;
       },
+      ...createRendererIntegrationsClient((method, params) => manager.sendRequest(method, params)),
       ...createRendererSessionImportClient(
         async (method, params) => manager.sendRequest(method, params)
       ),
@@ -22817,6 +23197,13 @@ ${error51.stderrTail}`] : []
         );
         return updateStatusResultSchema.parse(result);
       },
+      async readCurrentVersion() {
+        const result = await manager.sendRequest(RUNTIME_VERSION_METHOD, {});
+        if (!isRecord6(result) || typeof result.version !== "string" || !result.version.trim()) {
+          throw new Error("Invalid Harness Mix version response");
+        }
+        return { version: result.version.trim() };
+      },
       async inspectCodexAccountUsage(input) {
         const result = await manager.sendRequest(
           "codexhost/account/usage/inspect",
@@ -22879,6 +23266,10 @@ ${error51.stderrTail}`] : []
         );
         return codexAccountLoginCancelResultSchema.parse(result);
       },
+      async logoutCodexAccount() {
+        const result = await manager.sendRequest("codexhost/account/logout", {});
+        return codexAccountMutationResultSchema.parse(result);
+      },
       subscribeCodexAccountLogin(listener) {
         const notifications = notificationTarget(source);
         if (!notifications?.addNotificationCallback) {
@@ -23710,8 +24101,66 @@ ${error51.stderrTail}`] : []
   }
 
   // src/native-ui/renderer-extension/src/renderer-harness-mentions.ts
-  var entryKey = (entry) => entry.kind === "agent" ? `agent:${entry.id}` : `session:${entry.id}`;
-  var entryLiteral = (entry) => entry.kind === "agent" ? `@${entry.id} ` : `@[${entry.title.replace(/[\[\]()\r\n]/g, "")}](harness-mix://session/${entry.id}) `;
+  var entryKey = (entry) => {
+    if (entry.kind === "agent") return `agent:${entry.id}`;
+    if (entry.kind === "session") return `session:${entry.id}`;
+    return `codex:${entry.id}`;
+  };
+  var entryLiteral = (entry) => {
+    if (entry.kind === "agent") return `#${entry.id} `;
+    if (entry.kind === "session") return `#[${entry.title.replace(/[\[\]()\r\n]/g, "")}](harness-mix://session/${entry.id}) `;
+    return "";
+  };
+  var AGENT_DESCRIPTIONS = {
+    codex: "\u5B98\u65B9 Codex CLI \u539F\u751F\u534F\u540C",
+    "codex-cli": "\u5B98\u65B9 Codex CLI \u539F\u751F\u534F\u540C",
+    pi: "\u8F7B\u91CF\u5FEB\u901F\u539F\u751F\u7F16\u7801 Harness",
+    omp: "Oh My Pi \u589E\u5F3A\u7248\u4EA4\u4E92 Harness",
+    dsh: "DeepSeek Harness \u539F\u751F\u6DF1\u5EA6\u63A8\u7406\u4E0E\u5DE5\u5177\u8C03\u7528",
+    "deepseek-harness": "DeepSeek Harness \u539F\u751F\u6DF1\u5EA6\u63A8\u7406\u4E0E\u5DE5\u5177\u8C03\u7528",
+    claude: "Anthropic Claude Code \u539F\u751F\u534F\u540C",
+    "claude-code": "Anthropic Claude Code \u539F\u751F\u534F\u540C",
+    antigravity: "Google Antigravity 2.0 \u539F\u751F Harness",
+    opencode: "\u5F00\u6E90\u81EA\u4E3B\u7F16\u7801\u667A\u80FD\u4F53",
+    grok: "xAI Grok \u539F\u751F\u534F\u540C\u4E0E\u6DF1\u5EA6\u63A8\u7406",
+    openclaw: "OpenClaw \u4E2A\u4EBA AI \u81EA\u4E3B\u667A\u80FD\u4F53",
+    hermes: "Nous Research Hermes \u81EA\u6211\u8FED\u4EE3\u667A\u80FD\u4F53",
+    qoder: "Qoder \u7F16\u7A0B\u52A9\u624B",
+    codebuddy: "CodeBuddy \u539F\u751F\u667A\u80FD\u4F53",
+    zcode: "ZCode \u81EA\u52A8\u5316\u5DE5\u7A0B\u4EE3\u7406",
+    trae: "Trae \u539F\u751F\u534F\u540C",
+    "kiro-cli": "Kiro CLI \u667A\u80FD\u7F16\u7A0B",
+    "cursor-cli": "Cursor CLI \u539F\u751F\u534F\u540C"
+  };
+  var AGENT_COLORS = {
+    codex: "#3b82f6",
+    "codex-cli": "#3b82f6",
+    "codex-harness": "#3b82f6",
+    grok: "#8b5cf6",
+    opencode: "#a855f7",
+    "claude-code": "#ea580c",
+    claude: "#ea580c",
+    antigravity: "#0284c7",
+    pi: "#d97706",
+    omp: "#d97706",
+    dsh: "#2563eb",
+    "deepseek-harness": "#2563eb",
+    "kiro-cli": "#db2777",
+    openclaw: "#dc2626",
+    hermes: "#059669",
+    qoder: "#7c3aed",
+    codebuddy: "#0891b2",
+    zcode: "#4f46e5",
+    trae: "#0284c7",
+    "cursor-cli": "#475569"
+  };
+  function getAgentColor(agentId) {
+    const normalized = agentId.toLowerCase();
+    for (const [key, color] of Object.entries(AGENT_COLORS)) {
+      if (normalized.includes(key)) return color;
+    }
+    return "#6366f1";
+  }
   function installHarnessMentions(load) {
     const menu = document.createElement("div");
     menu.dataset.harnessMixMentions = "true";
@@ -23721,24 +24170,74 @@ ${error51.stderrTail}`] : []
     menu.hidden = true;
     document.body.append(menu);
     const style = document.createElement("style");
-    style.textContent = '[data-harness-mix-mention-active] [data-composer-overlay-floating-ui="true"]{display:none!important}';
+    style.textContent = `
+    [data-harness-mix-has-mentions="true"] {
+      display: flex !important;
+      flex-wrap: wrap !important;
+      align-items: baseline !important;
+      gap: 8px !important;
+    }
+    [data-harness-mix-has-mentions="true"] > [data-harness-mix-selected-mentions] {
+      display: inline-flex !important;
+      align-items: center !important;
+      gap: 8px !important;
+      flex-wrap: wrap !important;
+      vertical-align: baseline !important;
+      line-height: 1.5 !important;
+    }
+    [data-harness-mix-has-mentions="true"] > textarea,
+    [data-harness-mix-has-mentions="true"] > [contenteditable="true"],
+    [data-harness-mix-has-mentions="true"] > .ProseMirror {
+      display: inline-block !important;
+      width: auto !important;
+      min-width: 60px !important;
+      flex: 1 1 auto !important;
+      margin: 0 !important;
+      padding: 0 !important;
+      vertical-align: baseline !important;
+    }
+    [data-harness-mix-mention-badge]:hover {
+      background: rgba(128, 128, 128, 0.14) !important;
+    }
+  `;
     document.head.append(style);
     let activeComposer = null;
     let generation = 0, disposed = false, selected = 0;
     let editor = null;
     let range = null, start = 0, end = 0;
     let entries = [];
-    let matches = [], activeKind = "agent", canDelegate = true;
+    let matches = [];
+    let activeKind = "agent";
+    let canDelegate = true;
     const catalogs = /* @__PURE__ */ new Map();
     const badges = /* @__PURE__ */ new Map();
-    const selections = /* @__PURE__ */ new Map();
+    const sessionSelections = /* @__PURE__ */ new Map();
+    const conversationKeyFor = (target) => {
+      const composer = target.closest("[data-codex-composer-root]");
+      if (!composer) return target.__harnessMixEditorKey || "default";
+      const portal = composer.querySelector("[data-above-composer-portal]");
+      const portalId = portal?.getAttribute("data-above-composer-conversation-id");
+      if (portalId) return `conversation:${portalId}`;
+      const convEl = composer.closest("[data-conversation-id]") || composer.querySelector("[data-conversation-id]");
+      const convId = convEl?.getAttribute("data-conversation-id");
+      if (convId) return `conversation:${convId}`;
+      const draftId = composer.getAttribute("data-composer-draft-id");
+      if (draftId) return `draft:${draftId}`;
+      const all = composer.querySelectorAll('textarea, [contenteditable="true"]');
+      if (all.length > 1) {
+        const index = Array.from(all).indexOf(target);
+        return `editor:${index >= 0 ? index : "default"}`;
+      }
+      return "default";
+    };
     const selectionsFor = (target) => {
-      let perEditor = selections.get(target);
-      if (!perEditor) {
-        perEditor = /* @__PURE__ */ new Map();
-        selections.set(target, perEditor);
+      const key = conversationKeyFor(target);
+      let perSession = sessionSelections.get(key);
+      if (!perSession) {
+        perSession = /* @__PURE__ */ new Map();
+        sessionSelections.set(key, perSession);
       }
-      return perEditor;
+      return perSession;
     };
     const replaceSelectionWith = (target, replacement) => {
       if (target instanceof HTMLTextAreaElement) {
@@ -23772,66 +24271,76 @@ ${error51.stderrTail}`] : []
       return true;
     };
     const syncBadges = (target) => {
-      for (const [old, strip2] of badges) if (!old.isConnected) {
-        strip2.remove();
-        badges.delete(old);
-        catalogs.delete(old);
+      for (const [old, strip2] of badges) {
+        if (!old.isConnected) {
+          strip2.remove();
+          badges.delete(old);
+          catalogs.delete(old);
+        }
       }
-      const perEditor = selections.get(target);
+      const perEditor = selectionsFor(target);
       const hasAny = !!perEditor && perEditor.size > 0;
       let strip = badges.get(target);
+      const container = target.parentElement;
+      if (hasAny) {
+        container?.setAttribute("data-harness-mix-has-mentions", "true");
+      } else {
+        container?.removeAttribute("data-harness-mix-has-mentions");
+      }
       if (!strip && !hasAny) return;
       if (!strip) {
         strip = document.createElement("div");
         strip.dataset.harnessMixSelectedMentions = "true";
         strip.setAttribute("aria-label", "\u5DF2\u63D0\u53CA\u7684\u534F\u4F5C\u8005");
-        strip.style.cssText = "display:flex;gap:6px;flex-wrap:wrap;padding:6px 0";
-        target.after(strip);
+        strip.style.cssText = "display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0;margin:0 4px 0 0;vertical-align:baseline;line-height:normal;";
+        target.before(strip);
         badges.set(target, strip);
       }
+      const newKeys = perEditor ? [...perEditor.values()].map((e) => e.kind === "agent" ? `agent:${e.id}` : e.kind === "session" ? `session:${e.id}` : `codex:${e.id}`).join(",") : "";
+      const currentKeys = [...strip.querySelectorAll("[data-harness-mix-mention-badge]")].map((b) => b.dataset.harnessMixMentionBadge).join(",");
+      if (strip.isConnected && currentKeys === newKeys && strip.style.display === (hasAny ? "inline-flex" : "none")) {
+        return;
+      }
       strip.replaceChildren();
-      strip.style.display = hasAny ? "flex" : "none";
+      strip.style.display = hasAny ? "inline-flex" : "none";
       if (!perEditor) return;
       for (const entry of perEditor.values()) {
-        const badge = document.createElement("span");
-        badge.dataset.harnessMixMentionBadge = entry.kind === "agent" ? `agent:${entry.id}` : `session:${entry.id}`;
-        badge.style.cssText = "display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border:1px solid #8883;border-radius:8px;font:12px inherit;background:#8881";
-        const iconWrap = document.createElement("span");
-        iconWrap.style.cssText = "display:inline-flex;align-items:center;gap:6px";
-        iconWrap.append(
-          collaborationIcon(entry.kind === "agent" ? entry.id : entry.harnessId, entry.kind === "agent" ? entry.name : entry.title, 16),
-          document.createTextNode(entry.kind === "agent" ? entry.name : entry.title)
-        );
-        const remove = document.createElement("button");
-        remove.type = "button";
-        remove.dataset.harnessMixMentionRemove = entry.kind === "agent" ? `agent:${entry.id}` : `session:${entry.id}`;
-        const removeLabel = entry.kind === "agent" ? `\u79FB\u9664 ${entry.name}` : `\u79FB\u9664\u4F1A\u8BDD ${entry.title}`;
-        remove.setAttribute("aria-label", removeLabel);
-        remove.title = removeLabel;
-        remove.textContent = "\xD7";
-        remove.style.cssText = "border:0;background:transparent;color:inherit;cursor:pointer;padding:0 0 0 2px;margin:0;font:600 14px/1 inherit;opacity:.55;line-height:1;display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:50%";
-        remove.addEventListener("mouseenter", () => {
-          remove.style.opacity = "1";
-          remove.style.background = "#8883";
+        const badge = document.createElement("button");
+        badge.type = "button";
+        badge.dataset.harnessMixMentionBadge = entry.kind === "agent" ? `agent:${entry.id}` : entry.kind === "session" ? `session:${entry.id}` : `codex:${entry.id}`;
+        const removeLabel = entry.kind === "agent" ? `\u79FB\u9664\u534F\u4F5C Agent ${entry.name}` : entry.kind === "session" ? `\u79FB\u9664\u5386\u53F2\u4F1A\u8BDD ${entry.title}` : `\u79FB\u9664 Codex \u9009\u9879 ${entry.title}`;
+        badge.setAttribute("aria-label", removeLabel);
+        badge.title = `${removeLabel}\uFF08\u70B9\u51FB\u79FB\u9664\uFF09`;
+        const agentColor = entry.kind === "agent" ? getAgentColor(entry.id) : entry.kind === "codex" ? "#0ea5e9" : "#8b5cf6";
+        badge.style.cssText = `display:inline-flex;align-items:center;gap:4px;padding:1px 5px;border:0;border-radius:4px;background:transparent;color:${agentColor};font:500 15px/1.4 system-ui,-apple-system,BlinkMacSystemFont,sans-serif;user-select:none;cursor:pointer;transition:background 0.15s,opacity 0.15s;`;
+        badge.addEventListener("mouseenter", () => {
+          badge.style.background = "rgba(128,128,128,0.12)";
         });
-        remove.addEventListener("mouseleave", () => {
-          remove.style.opacity = ".55";
-          remove.style.background = "transparent";
+        badge.addEventListener("mouseleave", () => {
+          badge.style.background = "transparent";
         });
-        remove.addEventListener("mousedown", (event) => {
+        badge.addEventListener("click", (event) => {
           event.preventDefault();
           event.stopPropagation();
-        });
-        remove.addEventListener("click", (event) => {
-          event.preventDefault();
-          event.stopPropagation();
-          const live = selections.get(target);
-          if (!live) return;
+          const live = selectionsFor(target);
           live.delete(entryKey(entry));
           syncBadges(target);
+          target.focus();
         });
-        badge.append(iconWrap, remove);
-        badge.title = entry.kind === "agent" ? `@${entry.id}${entry.available ? "" : " \xB7 \u672A\u5C31\u7EEA"}` : `\u5386\u53F2\u4F1A\u8BDD \xB7 ${entry.cwd}`;
+        const iconWrap = document.createElement("span");
+        iconWrap.style.cssText = "display:inline-flex;align-items:center;gap:4px;";
+        if (entry.kind === "agent" || entry.kind === "session") {
+          iconWrap.append(
+            collaborationIcon(entry.kind === "agent" ? entry.id : entry.harnessId, entry.kind === "agent" ? entry.name : entry.title, 16),
+            document.createTextNode(entry.kind === "agent" ? entry.name : entry.title)
+          );
+        } else {
+          const iconSpan = document.createElement("span");
+          iconSpan.textContent = entry.icon || "\u{1F4CC}";
+          iconSpan.style.cssText = "font-size:14px;line-height:1;";
+          iconWrap.append(iconSpan, document.createTextNode(entry.title));
+        }
+        badge.append(iconWrap);
         strip.append(badge);
       }
     };
@@ -23839,14 +24348,33 @@ ${error51.stderrTail}`] : []
       generation++;
       menu.hidden = true;
       activeComposer?.removeAttribute("data-harness-mix-mention-active");
+      activeComposer?.removeAttribute("data-harness-mix-show-native");
       activeComposer = null;
     };
     const choose = (entry) => {
-      if (!editor || (entry.kind === "agent" ? !entry.available || !canDelegate : entry.running === true)) return;
+      if (!editor) return;
+      if (entry.kind === "agent" && (!entry.available || !canDelegate)) return;
+      if (entry.kind === "session" && entry.running === true) return;
       const target = editor;
       close();
       target.focus();
       replaceSelectionWith(target, "");
+      if (entry.kind === "codex") {
+        const nativeOverlay = document.querySelector('[data-composer-overlay-floating-ui="true"]');
+        if (nativeOverlay) {
+          const buttons = [...nativeOverlay.querySelectorAll('button, [role="option"]')];
+          const match = buttons.find((b) => (b.innerText || b.textContent || "").includes(entry.title));
+          if (match) {
+            match.click();
+            return;
+          }
+        }
+        if (entry.action === "files") {
+          const fileInput = document.querySelector('input[type="file"]');
+          fileInput?.click();
+        }
+        return;
+      }
       const perEditor = selectionsFor(target);
       const key = entryKey(entry);
       if (perEditor.has(key)) perEditor.delete(key);
@@ -23858,16 +24386,21 @@ ${error51.stderrTail}`] : []
       const tabs = document.createElement("div");
       tabs.setAttribute("role", "tablist");
       tabs.style.cssText = "display:flex;gap:4px;padding:2px 2px 6px;border-bottom:1px solid #8882;margin-bottom:4px";
-      for (const kind of ["agent", "session"]) {
+      const tabDefinitions = [
+        { kind: "agent", label: "Agents" },
+        { kind: "session", label: "\u4F1A\u8BDD" }
+      ];
+      for (const tabInfo of tabDefinitions) {
         const tab = document.createElement("button");
         tab.type = "button";
         tab.setAttribute("role", "tab");
-        tab.setAttribute("aria-selected", String(activeKind === kind));
-        tab.textContent = `${kind === "agent" ? "Agents" : "\u4F1A\u8BDD"}  ${matches.filter((entry) => entry.kind === kind).length}`;
-        tab.style.cssText = `border:0;border-radius:6px;padding:6px 10px;color:inherit;font:inherit;cursor:pointer;background:${activeKind === kind ? "#8882" : "transparent"}`;
+        tab.setAttribute("aria-selected", String(activeKind === tabInfo.kind));
+        const count = matches.filter((entry) => entry.kind === tabInfo.kind).length;
+        tab.textContent = `${tabInfo.label}  ${count}`;
+        tab.style.cssText = `border:0;border-radius:6px;padding:6px 10px;color:inherit;font:inherit;cursor:pointer;background:${activeKind === tabInfo.kind ? "#8882" : "transparent"};transition:background .15s;`;
         tab.addEventListener("mousedown", (event) => event.preventDefault());
         tab.addEventListener("click", () => {
-          activeKind = kind;
+          activeKind = tabInfo.kind;
           selected = 0;
           render();
         });
@@ -23890,7 +24423,7 @@ ${error51.stderrTail}`] : []
         row.type = "button";
         row.setAttribute("role", "option");
         row.setAttribute("aria-selected", String(index === selected));
-        const available = entry.kind === "agent" ? entry.available && canDelegate : entry.running !== true;
+        const available = entry.kind === "agent" ? entry.available && canDelegate : entry.kind === "session" ? entry.running !== true : true;
         row.disabled = !available;
         row.id = `harness-mention-option-${index}`;
         row.style.cssText = `display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:0;border-radius:7px;padding:7px 8px;color:inherit;font:inherit;cursor:pointer;background:${index === selected ? "#8882" : "transparent"};opacity:${available ? 1 : 0.45}`;
@@ -23898,15 +24431,24 @@ ${error51.stderrTail}`] : []
         copy.style.cssText = "display:flex;flex-direction:column;gap:3px;flex:1;min-width:0";
         const name = document.createElement("span");
         name.textContent = entry.kind === "agent" ? entry.name : entry.title;
-        name.style.cssText = "overflow:hidden;text-overflow:ellipsis;white-space:nowrap";
+        name.style.cssText = "overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;";
         const detail = document.createElement("span");
-        detail.textContent = entry.kind === "agent" ? `@${entry.id}` : entry.cwd;
+        detail.textContent = entry.kind === "agent" ? AGENT_DESCRIPTIONS[entry.id] || entry.description || `#${entry.id}` : entry.kind === "session" ? entry.cwd : entry.description || entry.category;
         detail.style.cssText = "font-size:11px;opacity:.55;overflow:hidden;text-overflow:ellipsis;white-space:nowrap";
         copy.append(name, detail);
         const status = document.createElement("span");
-        status.textContent = entry.kind === "agent" ? entry.available ? "\u53EF\u534F\u4F5C" : "\u672A\u5C31\u7EEA" : entry.running ? "\u8FD0\u884C\u4E2D" : "\u5F15\u7528";
+        status.textContent = entry.kind === "agent" ? entry.available ? "\u53EF\u534F\u4F5C" : "\u672A\u5C31\u7EEA" : entry.kind === "session" ? entry.running ? "\u8FD0\u884C\u4E2D" : "\u5F15\u7528" : entry.category || "\u539F\u751F";
         status.style.cssText = "font-size:11px;opacity:.6";
-        row.append(collaborationIcon(entry.kind === "agent" ? entry.id : entry.harnessId, name.textContent || ""), copy, status);
+        let iconEl;
+        if (entry.kind === "agent" || entry.kind === "session") {
+          iconEl = collaborationIcon(entry.kind === "agent" ? entry.id : entry.harnessId, name.textContent || "", 18);
+        } else {
+          const iconSpan = document.createElement("span");
+          iconSpan.textContent = entry.icon || "\u{1F4CE}";
+          iconSpan.style.cssText = "font-size:16px;line-height:1;width:18px;text-align:center;";
+          iconEl = iconSpan;
+        }
+        row.append(iconEl, copy, status);
         row.addEventListener("mousedown", (event) => event.preventDefault());
         row.addEventListener("click", () => choose(entry));
         list.append(row);
@@ -23946,7 +24488,7 @@ ${error51.stderrTail}`] : []
         end = prefix.length;
         range = caret.cloneRange();
       }
-      const match = /(?:^|[\s，。；：])@([\p{L}\p{N}_-]*)$/u.exec(prefix);
+      const match = /(?:^|[\s，。；：])#([\p{L}\p{N}_-]*)$/u.exec(prefix);
       if (!match) {
         close();
         return;
@@ -23961,15 +24503,18 @@ ${error51.stderrTail}`] : []
         syncBadges(editable);
         const query = match[1].toLowerCase();
         canDelegate = catalog.canDelegate !== false;
-        matches = [
-          ...catalog.agents.filter((a) => a.id.toLowerCase().includes(query) || a.name.toLowerCase().includes(query)).map((a) => ({ kind: "agent", ...a })),
-          ...catalog.sessions.filter((session) => `${session.title} ${session.cwd}`.toLowerCase().includes(query)).map((session) => ({ kind: "session", ...session }))
-        ];
-        activeKind = query && !matches.some((entry) => entry.kind === "agent") && matches.some((entry) => entry.kind === "session") ? "session" : "agent";
+        const matchingAgents = catalog.agents.filter((a) => a.id.toLowerCase().includes(query) || a.name.toLowerCase().includes(query)).map((a) => ({ kind: "agent", title: a.name, ...a }));
+        const matchingSessions = catalog.sessions.filter((s) => `${s.title} ${s.cwd}`.toLowerCase().includes(query)).map((s) => ({ kind: "session", ...s }));
+        matches = [...matchingAgents, ...matchingSessions];
+        if (query && !matchingAgents.length && matchingSessions.length) {
+          activeKind = "session";
+        } else {
+          activeKind = "agent";
+        }
         entries = matches.filter((entry) => entry.kind === activeKind);
-        selected = Math.max(0, entries.findIndex((entry) => entry.kind === "agent" ? entry.available && canDelegate : entry.running !== true));
+        selected = Math.max(0, entries.findIndex((entry) => entry.kind === "agent" ? entry.available && canDelegate : entry.kind === "session" ? entry.running !== true : true));
         render();
-        menu.hidden = !catalog.agents.length && !catalog.sessions.length && catalog.canDelegate === void 0;
+        menu.hidden = !matches.length && catalog.canDelegate === void 0;
         activeComposer?.removeAttribute("data-harness-mix-mention-active");
         activeComposer = !menu.hidden ? editable.closest("[data-codex-composer-root]") : null;
         activeComposer?.setAttribute("data-harness-mix-mention-active", "true");
@@ -23985,6 +24530,33 @@ ${error51.stderrTail}`] : []
       }
     };
     const keydown = (event) => {
+      const target = event.target;
+      if (target instanceof HTMLElement && target.closest("[data-codex-composer-root]")) {
+        const editable = target.closest('textarea,[contenteditable="true"]');
+        if (editable && event.key === "Backspace") {
+          let isAtStart = false;
+          if (editable instanceof HTMLTextAreaElement) {
+            isAtStart = editable.selectionStart === 0 && editable.selectionEnd === 0;
+          } else {
+            const sel = window.getSelection();
+            if (sel && sel.isCollapsed && sel.rangeCount > 0) {
+              const r = sel.getRangeAt(0);
+              isAtStart = r.startOffset === 0 && (r.startContainer === editable || r.startContainer.textContent === "" || editable.firstChild === r.startContainer);
+            }
+          }
+          if (isAtStart) {
+            const perSession = selectionsFor(editable);
+            if (perSession && perSession.size > 0) {
+              const keys = [...perSession.keys()];
+              const lastKey = keys[keys.length - 1];
+              if (lastKey) perSession.delete(lastKey);
+              syncBadges(editable);
+              event.preventDefault();
+              return;
+            }
+          }
+        }
+      }
       if (menu.hidden || event.isComposing) return;
       if (event.key === "Escape") {
         close();
@@ -23993,9 +24565,12 @@ ${error51.stderrTail}`] : []
       if (!["ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight", "Enter", "Tab", "Escape"].includes(event.key)) return;
       event.preventDefault();
       event.stopImmediatePropagation();
-      if (event.key === "Escape") close();
-      else if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
-        activeKind = activeKind === "agent" ? "session" : "agent";
+      if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+        const kinds = ["agent", "session"];
+        const curIdx = kinds.indexOf(activeKind);
+        const nextIdx = (curIdx + (event.key === "ArrowRight" ? 1 : -1) + kinds.length) % kinds.length;
+        const next = kinds[nextIdx];
+        if (next) activeKind = next;
         selected = 0;
         render();
       } else if (event.key === "Enter" || event.key === "Tab") {
@@ -24005,7 +24580,7 @@ ${error51.stderrTail}`] : []
         for (let i = 0; i < entries.length; i++) {
           selected = (selected + (event.key === "ArrowDown" ? 1 : -1) + entries.length) % entries.length;
           const entry = entries[selected];
-          if (entry && (entry.kind === "agent" ? entry.available && canDelegate : entry.running !== true)) break;
+          if (entry && (entry.kind === "agent" ? entry.available && canDelegate : entry.kind === "session" ? entry.running !== true : true)) break;
         }
         render();
         menu.querySelector('[role="option"][aria-selected="true"]')?.scrollIntoView({ block: "nearest" });
@@ -24020,7 +24595,7 @@ ${error51.stderrTail}`] : []
       return root.querySelector('textarea,[contenteditable="true"]');
     };
     const injectMentionsInto = (target) => {
-      const perEditor = selections.get(target);
+      const perEditor = selectionsFor(target);
       if (!perEditor || perEditor.size === 0) return false;
       const text = [...perEditor.values()].map(entryLiteral).join("");
       if (!text) return false;
@@ -24029,16 +24604,18 @@ ${error51.stderrTail}`] : []
         target.value = `${text}${target.value}`;
         target.dispatchEvent(new Event("input", { bubbles: true }));
         target.dispatchEvent(new Event("change", { bubbles: true }));
-        return true;
-      }
-      const selection = window.getSelection();
-      const fresh = document.createRange();
-      fresh.selectNodeContents(target);
-      fresh.collapse(true);
-      selection?.removeAllRanges();
-      selection?.addRange(fresh);
-      document.dispatchEvent(new Event("selectionchange"));
-      document.execCommand("insertText", false, text);
+      } else {
+        const selection = window.getSelection();
+        const fresh = document.createRange();
+        fresh.selectNodeContents(target);
+        fresh.collapse(true);
+        selection?.removeAllRanges();
+        selection?.addRange(fresh);
+        document.dispatchEvent(new Event("selectionchange"));
+        document.execCommand("insertText", false, text);
+      }
+      perEditor.clear();
+      syncBadges(target);
       return true;
     };
     const onSubmitCapture = (event) => {
@@ -24049,26 +24626,70 @@ ${error51.stderrTail}`] : []
       if (!editorEl.closest("[data-codex-composer-root]")) return;
       injectMentionsInto(editorEl);
     };
+    const onFocusIn = (event) => {
+      const target = event.target;
+      if (target instanceof HTMLElement && target.closest("[data-codex-composer-root]")) {
+        const editable = target.closest('textarea,[contenteditable="true"]');
+        if (editable) syncBadges(editable);
+      }
+    };
+    const observer = new MutationObserver((mutations) => {
+      let shouldSync = false;
+      for (const m of mutations) {
+        if (m.target instanceof Element) {
+          if (m.target.closest("[data-harness-mix-selected-mentions]") || m.target.closest("[data-harness-mix-mentions]")) {
+            continue;
+          }
+        }
+        shouldSync = true;
+        break;
+      }
+      if (!shouldSync) return;
+      const composers = document.querySelectorAll("[data-codex-composer-root]");
+      for (const composer of composers) {
+        const el = findEditorIn(composer);
+        if (el) syncBadges(el);
+      }
+    });
+    try {
+      observer.observe(document.body, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        attributeFilter: ["data-above-composer-conversation-id", "data-conversation-id", "data-composer-draft-id"]
+      });
+    } catch {
+    }
     document.addEventListener("input", input, true);
     document.addEventListener("keydown", keydown, true);
     document.addEventListener("mousedown", outside);
     document.addEventListener("submit", onSubmitCapture, true);
+    document.addEventListener("focusin", onFocusIn, true);
     window.addEventListener("blur", close);
-    return { dispose() {
-      disposed = true;
-      close();
-      menu.remove();
-      style.remove();
-      for (const strip of badges.values()) strip.remove();
-      badges.clear();
-      catalogs.clear();
-      for (const [target, perEditor] of selections) if (!target.isConnected) selections.delete(target);
-      document.removeEventListener("input", input, true);
-      document.removeEventListener("keydown", keydown, true);
-      document.removeEventListener("mousedown", outside);
-      document.removeEventListener("submit", onSubmitCapture, true);
-      window.removeEventListener("blur", close);
-    } };
+    return {
+      sync(target) {
+        syncBadges(target);
+      },
+      dispose() {
+        disposed = true;
+        close();
+        menu.remove();
+        style.remove();
+        observer.disconnect();
+        for (const el of document.querySelectorAll("[data-harness-mix-has-mentions]")) {
+          el.removeAttribute("data-harness-mix-has-mentions");
+        }
+        for (const strip of badges.values()) strip.remove();
+        badges.clear();
+        catalogs.clear();
+        document.removeEventListener("input", input, true);
+        document.removeEventListener("keydown", keydown, true);
+        document.removeEventListener("mousedown", outside);
+        document.removeEventListener("submit", onSubmitCapture, true);
+        document.removeEventListener("focusin", onFocusIn, true);
+        window.removeEventListener("blur", close);
+      }
+    };
   }
 
   // src/native-ui/renderer-extension/src/renderer-collab-cards.ts
@@ -24398,6 +25019,9 @@ ${error51.stderrTail}`] : []
 
   // src/native-ui/renderer-extension/src/settings/accounts-list.ts
   var resetDetailsSequence = 0;
+  function isCodexAccountAuthenticated(account) {
+    return account.authenticated ?? Boolean(account.email);
+  }
   function accountPlanLabel(planType) {
     if (!planType || planType === "unknown") return null;
     if (planType === "free") return "Free";
@@ -24530,7 +25154,7 @@ ${error51.stderrTail}`] : []
       activate.addEventListener("click", input.onActivate);
       actions.append(activate);
     }
-    if (!account.email) {
+    if (!isCodexAccountAuthenticated(account)) {
       const signIn = document2.createElement("button");
       signIn.type = "button";
       signIn.className = "settings-account-action";
@@ -24540,6 +25164,16 @@ ${error51.stderrTail}`] : []
       signIn.addEventListener("click", input.onSignIn);
       actions.append(signIn);
     }
+    if (account.management === "native" && isCodexAccountAuthenticated(account) && input.onSignOut) {
+      const signOut = document2.createElement("button");
+      signOut.type = "button";
+      signOut.className = "settings-account-action";
+      signOut.textContent = messages.accountSignOut;
+      signOut.dataset.accountFocus = `${account.accountId}:logout`;
+      signOut.disabled = input.actionsDisabled;
+      signOut.addEventListener("click", input.onSignOut);
+      actions.append(signOut);
+    }
     if (!account.isDefault) {
       const remove = document2.createElement("button");
       remove.type = "button";
@@ -24904,12 +25538,12 @@ ${error51.stderrTail}`] : []
           const restoreFocus = accountListFocusRestorer(list, search);
           body.replaceChildren();
           status.textContent = loginMessage ?? "";
-          connectedCount.textContent = String(accounts.filter((account) => account.email).length);
+          connectedCount.textContent = String(accounts.filter(isCodexAccountAuthenticated).length);
           search.disabled = login !== null || loginStartingAccountId !== null;
           for (const [display, button] of displayButtons) {
             button.setAttribute("aria-pressed", String(display === usageDisplay));
           }
-          refreshUsage.disabled = (!getClient()?.inspectCodexAccountUsage || !accounts.some((account) => account.email)) && !getClient()?.listHarnessAccounts || harnessAccounts?.refreshing === true || [...usageByAccountId.values()].some((usage) => usage.status === "loading") || accountBusy();
+          refreshUsage.disabled = (!getClient()?.inspectCodexAccountUsage || !accounts.some(isCodexAccountAuthenticated)) && !getClient()?.listHarnessAccounts || harnessAccounts?.refreshing === true || [...usageByAccountId.values()].some((usage) => usage.status === "loading") || accountBusy();
           const query = search.value.trim().toLocaleLowerCase();
           harnessAccounts?.update(query, usageDisplay);
           const visibleAccounts = accounts.filter(
@@ -24924,6 +25558,7 @@ ${error51.stderrTail}`] : []
             emptyRow.append(emptyCell);
             body.append(emptyRow);
           }
+          add.hidden = false;
           add.disabled = accountBusy();
           for (const account of visibleAccounts) {
             body.append(
@@ -24936,6 +25571,7 @@ ${error51.stderrTail}`] : []
                 resetExpanded: expandedResetAccounts.has(account.accountId),
                 onActivate: () => mutate(() => client().activateCodexAccount({ accountId: account.accountId })),
                 onSignIn: () => startLogin(account.accountId),
+                ...account.management === "native" && getClient()?.logoutCodexAccount ? { onSignOut: () => signOut() } : {},
                 onDelete: () => deleteAccount(account.accountId),
                 onRetry: () => {
                   usageByAccountId.delete(account.accountId);
@@ -25009,7 +25645,7 @@ ${error51.stderrTail}`] : []
         };
         const loadUsage = (nextAccounts) => {
           const inspect = getClient()?.inspectCodexAccountUsage;
-          const signedIn = nextAccounts.filter((account) => account.email);
+          const signedIn = nextAccounts.filter(isCodexAccountAuthenticated);
           const keep = new Set(signedIn.map((account) => account.accountId));
           for (const accountId of [...usageByAccountId.keys()]) {
             if (!keep.has(accountId)) usageByAccountId.delete(accountId);
@@ -25120,6 +25756,27 @@ ${error51.stderrTail}`] : []
             }
           });
         };
+        const signOut = () => {
+          const logout = getClient()?.logoutCodexAccount;
+          if (!logout || accountBusy()) return;
+          if (document2.defaultView?.confirm?.(messages.accountSignOutConfirm) === false) return;
+          accountActivating = true;
+          loginMessage = messages.accountSigningOut;
+          render();
+          void context.runLatest(() => logout(), {
+            success(result) {
+              accountActivating = false;
+              loginMessage = messages.accountSignedOut;
+              usageByAccountId.clear();
+              setAccounts([result.account]);
+            },
+            failure(error51) {
+              accountActivating = false;
+              loginMessage = errorMessage(error51, messages.accountSignOutFailed);
+              render();
+            }
+          });
+        };
         const createAndLogin = () => {
           if (accountBusy()) return;
           accountCreating = true;
@@ -26030,6 +26687,1717 @@ ${error51.stderrTail}`] : []
     }
   }
 
+  // src/native-ui/renderer-extension/src/settings/integrations-page.ts
+  function createIntegrationSettingsPage(kind, messages, getClient) {
+    const zh = messages.locale === "zh-CN";
+    const tr = (cn, en) => zh ? cn : en;
+    return Object.freeze({
+      id: kind,
+      label: kind === "mcp" ? "MCP" : "Skills",
+      icon: kind === "mcp" ? "connections" : "session-import",
+      mount(context) {
+        const { content } = context;
+        const lifecycle = { signal: context.signal, runLatest: context.runLatest, get disposed() {
+          return context.signal.aborted;
+        } };
+        const doc = content.ownerDocument;
+        const el = (tag, text = "") => {
+          const node = doc.createElement(tag);
+          node.textContent = text;
+          return node;
+        };
+        const title = el("h2", kind === "mcp" ? "MCP" : "Skills");
+        const note = el("p", kind === "mcp" ? tr("\u6309 Harness \u7BA1\u7406 MCP \u670D\u52A1\u5668\u3002\u914D\u7F6E\u4F1A\u5728\u4E0B\u6B21\u6253\u5F00\u539F\u751F\u4F1A\u8BDD\u65F6\u4F20\u5165\u3002", "Manage MCP servers per Harness. Configuration is passed to the next native session.") : tr("\u628A\u6280\u80FD\u6587\u4EF6\u6216\u5B8C\u6574\u6280\u80FD\u6587\u4EF6\u5939\u62D6\u5230\u8FD9\u91CC\uFF0C\u76F4\u63A5\u5B89\u88C5\u5230\u539F\u751F\u6280\u80FD\u76EE\u5F55\u3002", "Drop a skill file or a complete skill folder here to install it in the native skill directory."));
+        note.className = "settings-page-description";
+        const controls = el("div");
+        controls.className = "settings-integrations-controls";
+        const harness = el("select");
+        harness.setAttribute("aria-label", "Harness");
+        const level = el("select");
+        level.setAttribute("aria-label", tr("\u4F5C\u7528\u8303\u56F4", "Scope"));
+        for (const [value, label] of [["global", tr("\u5168\u5C40", "Global")], ["project", tr("\u9879\u76EE", "Project")]]) {
+          const option = el("option", label);
+          option.value = value;
+          level.append(option);
+        }
+        const cwd = el("input");
+        cwd.placeholder = tr("\u9879\u76EE\u7EDD\u5BF9\u8DEF\u5F84", "Absolute project path");
+        cwd.setAttribute("aria-label", cwd.placeholder);
+        cwd.hidden = true;
+        const refreshButton = el("button", tr("\u5237\u65B0", "Refresh"));
+        refreshButton.type = "button";
+        refreshButton.className = "settings-command-button settings-command-button--secondary";
+        const status = el("p");
+        status.className = "settings-integrations-status";
+        status.setAttribute("role", "status");
+        status.setAttribute("aria-live", "polite");
+        const body = el("div");
+        body.className = "settings-integrations-body";
+        let busy = false;
+        const selectedScope = () => ({ harnessId: harness.value, scope: level.value === "project" ? "project" : "global", ...level.value === "project" ? { cwd: cwd.value.trim() } : {} });
+        const client = () => {
+          const value = getClient();
+          if (!value) throw new Error(tr("Host \u5C1A\u672A\u8FDE\u63A5\uFF0C\u8BF7\u8FDE\u63A5\u540E\u5237\u65B0\u3002", "Host is not connected. Connect and refresh."));
+          return value;
+        };
+        const fail = (error51) => {
+          status.textContent = error51 instanceof Error ? error51.message : String(error51);
+          status.setAttribute("role", "alert");
+        };
+        const setBusy = (value) => {
+          busy = value;
+          content.dataset.integrationBusy = String(value);
+          for (const node of content.querySelectorAll("button, input, select, textarea")) node.disabled = value || node.dataset.readonly === "true";
+        };
+        const button = (label, action, primary = false) => {
+          const node = el("button", label);
+          node.type = "button";
+          node.className = `settings-command-button ${primary ? "settings-command-button--primary" : "settings-command-button--secondary"}`;
+          node.addEventListener("click", action, { signal: lifecycle.signal });
+          return node;
+        };
+        const mutate = async (operation) => {
+          if (busy) return;
+          const selected = selectedScope();
+          setBusy(true);
+          status.textContent = tr("\u6B63\u5728\u4FDD\u5B58\u2026", "Saving\u2026");
+          status.setAttribute("role", "status");
+          try {
+            await operation(client(), selected);
+            if (!lifecycle.disposed) {
+              setBusy(false);
+              await refresh();
+              status.textContent = tr("\u5DF2\u4FDD\u5B58\uFF0C\u4E0B\u6B21\u6253\u5F00\u539F\u751F\u4F1A\u8BDD\u65F6\u751F\u6548\u3002", "Saved. Applies on the next native session open.");
+            }
+          } catch (error51) {
+            if (!lifecycle.disposed) {
+              setBusy(false);
+              fail(error51);
+            }
+          }
+        };
+        const mutateCustom = async (operation) => {
+          if (busy) return;
+          setBusy(true);
+          status.textContent = tr("\u6B63\u5728\u4FDD\u5B58\u2026", "Saving\u2026");
+          status.setAttribute("role", "status");
+          try {
+            const message = await operation(client());
+            if (!lifecycle.disposed) {
+              setBusy(false);
+              await refresh();
+              status.textContent = message || tr("\u5DF2\u4FDD\u5B58\uFF0C\u4E0B\u6B21\u6253\u5F00\u539F\u751F\u4F1A\u8BDD\u65F6\u751F\u6548\u3002", "Saved. Applies on the next native session open.");
+            }
+          } catch (error51) {
+            if (!lifecycle.disposed) {
+              setBusy(false);
+              fail(error51);
+            }
+          }
+        };
+        const bytesToBase64 = (buffer) => {
+          const bytes = new Uint8Array(buffer);
+          let binary = "";
+          for (let offset = 0; offset < bytes.length; offset += 32768) binary += String.fromCharCode(...bytes.subarray(offset, offset + 32768));
+          return btoa(binary);
+        };
+        const fileFromEntry = (entry) => new Promise((resolve, reject) => entry.file?.(resolve, reject));
+        const entriesFromReader = async (entry) => {
+          const reader = entry.createReader?.();
+          if (!reader) return [];
+          const all = [];
+          while (true) {
+            const batch = await new Promise((resolve, reject) => reader.readEntries(resolve, reject));
+            if (!batch.length) break;
+            all.push(...batch);
+          }
+          return all;
+        };
+        const walkEntry = async (entry, prefix, output) => {
+          if (entry.isFile) {
+            output.push({ path: `${prefix}${entry.name}`, file: await fileFromEntry(entry) });
+            return;
+          }
+          if (entry.isDirectory) for (const child of await entriesFromReader(entry)) await walkEntry(child, `${prefix}${entry.name}/`, output);
+        };
+        const parseDroppedSkills = async (incoming) => {
+          if (!incoming.length) throw new Error(tr("\u6CA1\u6709\u8BFB\u53D6\u5230\u6587\u4EF6\u3002", "No files were read."));
+          if (incoming.length > 500 || incoming.reduce((sum, item) => sum + item.file.size, 0) > 10 * 1024 * 1024) throw new Error(tr("\u6280\u80FD\u8D85\u8FC7 10 MB \u6216 500 \u4E2A\u6587\u4EF6\u3002", "Skill exceeds 10 MB or 500 files."));
+          let normalized = incoming;
+          if (incoming.length === 1) {
+            if (!/\.md$/i.test(incoming[0].file.name)) throw new Error(tr("\u5355\u6587\u4EF6\u6280\u80FD\u5FC5\u987B\u662F Markdown \u6587\u4EF6\u3002", "A single-file skill must be a Markdown file."));
+            normalized = [{ path: "SKILL.md", file: incoming[0].file }];
+          } else {
+            const paths = incoming.map((item) => item.path.replaceAll("\\", "/"));
+            const first = paths[0].split("/")[0];
+            if (first && paths.every((value) => value.startsWith(`${first}/`))) normalized = incoming.map((item, index) => ({ ...item, path: paths[index].slice(first.length + 1) }));
+            if (!normalized.some((item) => item.path === "SKILL.md")) throw new Error(tr("\u6280\u80FD\u6587\u4EF6\u5939\u6839\u76EE\u5F55\u5FC5\u987B\u5305\u542B SKILL.md\u3002", "The skill folder root must contain SKILL.md."));
+          }
+          const skillFile = normalized.find((item) => item.path === "SKILL.md");
+          const markdown = await skillFile.file.text();
+          const declared = markdown.match(/^---[\s\S]*?^name:\s*["']?([^\r\n"']+)/m)?.[1]?.trim();
+          const fallback = incoming.length === 1 ? incoming[0].file.name.replace(/\.md$/i, "") : incoming[0].path.split(/[\\/]/)[0];
+          const name = (declared || fallback || "skill").toLowerCase().replace(/[^a-z0-9_-]+/g, "-").replace(/^-+|-+$/g, "").slice(0, 64);
+          if (!name) throw new Error(tr("\u65E0\u6CD5\u4ECE\u6587\u4EF6\u4E2D\u786E\u5B9A\u6709\u6548\u7684\u6280\u80FD\u540D\u79F0\u3002", "Could not determine a valid skill name from the files."));
+          const files = [];
+          for (const item of normalized) files.push({ path: item.path.replaceAll("\\", "/"), contentBase64: bytesToBase64(await item.file.arrayBuffer()) });
+          return { name, files };
+        };
+        const field = (form, label, node) => {
+          const wrap = el("label", label);
+          wrap.className = "settings-integrations-field";
+          wrap.append(node);
+          form.append(wrap);
+        };
+        let targetEditServerName = void 0;
+        const editInHarness = (harnessId, serverName) => {
+          harness.value = harnessId;
+          targetEditServerName = serverName;
+          void refresh();
+        };
+        const toManagedForCopy = (s, newEnabled) => {
+          const isHttp = s.transportType === "streamable_http" || typeof s.url === "string" && s.url.trim().length > 0;
+          if (isHttp) {
+            return {
+              name: s.name,
+              transportType: "streamable_http",
+              enabled: newEnabled !== void 0 ? newEnabled : s.enabled ?? true,
+              url: s.url || "",
+              ...s.bearer_token_env_var?.trim() ? { bearer_token_env_var: s.bearer_token_env_var.trim() } : {},
+              ...s.http_headers && Object.keys(s.http_headers).length ? { http_headers: s.http_headers } : {},
+              ...s.env_http_headers && Object.keys(s.env_http_headers).length ? { env_http_headers: s.env_http_headers } : {}
+            };
+          }
+          return {
+            name: s.name,
+            transportType: "stdio",
+            enabled: newEnabled !== void 0 ? newEnabled : s.enabled ?? true,
+            command: s.command || "",
+            ...s.args?.length ? { args: s.args } : {},
+            ...s.env && Object.keys(s.env).length ? { env: s.env } : {},
+            ...s.env_vars?.length ? { env_vars: s.env_vars } : {},
+            ...s.cwd?.trim() ? { cwd: s.cwd.trim() } : {}
+          };
+        };
+        const renderMcp = (snapshot) => {
+          const toolbar = el("div");
+          toolbar.className = "settings-integrations-toolbar";
+          const search = el("input");
+          search.type = "search";
+          search.placeholder = tr("\u641C\u7D22 MCP \u670D\u52A1\u5668", "Search MCP servers");
+          search.setAttribute("aria-label", search.placeholder);
+          const list = el("div");
+          list.className = "settings-integrations-list";
+          const editor = el("div");
+          editor.className = "settings-mcp-editor";
+          editor.hidden = true;
+          const showList = () => {
+            editor.hidden = true;
+            list.hidden = false;
+            toolbar.hidden = false;
+          };
+          const showEditor = (server) => {
+            editor.replaceChildren();
+            editor.hidden = false;
+            list.hidden = true;
+            toolbar.hidden = true;
+            const heading = el("div");
+            heading.className = "settings-integrations-editor-head";
+            const backBtn = button(tr("\u2039 \u8FD4\u56DE", "\u2039 Back"), showList);
+            const title2 = el("h3", server ? tr(`\u66F4\u65B0 ${server.name} MCP`, `Update ${server.name} MCP`) : tr("\u8FDE\u63A5\u81F3\u81EA\u5B9A\u4E49 MCP", "Connect to a custom MCP"));
+            const docsLink = el("a", tr("\u6587\u6863 \u2197", "Docs \u2197"));
+            docsLink.href = "https://modelcontextprotocol.io/introduction";
+            docsLink.target = "_blank";
+            docsLink.rel = "noreferrer noopener";
+            docsLink.className = "settings-mcp-docs-link";
+            heading.append(backBtn, title2, docsLink);
+            if (server?.editable) {
+              const uninstallBtn = button(tr("\u5378\u8F7D", "Uninstall"), () => {
+                void mutate(async (value, selected) => {
+                  await value.removeMcp({ ...selected, id: server.id });
+                  if (!lifecycle.disposed) showList();
+                });
+              });
+              uninstallBtn.classList.add("settings-command-button--danger");
+              heading.append(uninstallBtn);
+            }
+            const createTrashBtn = (onRemove) => {
+              const btn = el("button");
+              btn.type = "button";
+              btn.className = "settings-mcp-icon-btn";
+              btn.setAttribute("aria-label", tr("\u79FB\u9664", "Remove"));
+              btn.title = tr("\u79FB\u9664", "Remove");
+              btn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg>';
+              btn.addEventListener("click", onRemove);
+              return btn;
+            };
+            let transportType = server?.transportType === "streamable_http" || !!server?.url ? "streamable_http" : "stdio";
+            const form = el("form");
+            form.className = "settings-integrations-form";
+            const basicCard = el("div");
+            basicCard.className = "settings-integrations-form--card";
+            const name = el("input");
+            name.required = true;
+            name.pattern = "[a-zA-Z0-9](?:[a-zA-Z0-9_]|-){0,63}";
+            name.placeholder = "MCP server name";
+            name.value = server?.name ?? "";
+            field(basicCard, tr("\u540D\u79F0", "Name"), name);
+            const typeField = el("div");
+            typeField.className = "settings-integrations-field";
+            typeField.append(el("span", tr("\u7C7B\u578B", "Type")));
+            const toggle = el("div");
+            toggle.className = "settings-mcp-type-toggle";
+            const stdioBtn = el("button", "STDIO");
+            stdioBtn.type = "button";
+            stdioBtn.className = "settings-mcp-type-btn";
+            const httpBtn = el("button", tr("\u6D41\u5F0F HTTP", "Streamable HTTP"));
+            httpBtn.type = "button";
+            httpBtn.className = "settings-mcp-type-btn";
+            toggle.append(stdioBtn, httpBtn);
+            typeField.append(toggle);
+            basicCard.append(typeField);
+            if (server) {
+              const switchNotice = el("p", tr("\u5982\u9700\u5207\u6362 MCP \u670D\u52A1\u5668\u7C7B\u578B\uFF0C\u8BF7\u5148\u5378\u8F7D\u5F53\u524D\u914D\u7F6E\u3002", "If you would like to switch MCP server type, please uninstall first."));
+              switchNotice.className = "settings-mcp-notice";
+              basicCard.append(switchNotice);
+            }
+            const transportCard = el("div");
+            transportCard.className = "settings-integrations-form--card settings-mcp-transport-card";
+            const stdioSection = el("div");
+            stdioSection.className = "settings-mcp-section";
+            const command = el("input");
+            command.placeholder = "openai-dev-mcp serve-sqlite";
+            command.value = server?.command ?? "";
+            field(stdioSection, tr("\u542F\u52A8\u547D\u4EE4", "Command to launch"), command);
+            const argsField = el("div");
+            argsField.className = "settings-integrations-field";
+            argsField.append(el("span", tr("\u53C2\u6570", "Arguments")));
+            const argsList = el("div");
+            argsList.className = "settings-mcp-args";
+            const addArg = (value = "") => {
+              const row = el("div");
+              row.className = "settings-mcp-arg";
+              const input = el("input");
+              input.value = value;
+              input.placeholder = tr("\u547D\u4EE4\u53C2\u6570", "Command argument");
+              row.append(input, createTrashBtn(() => row.remove()));
+              argsList.append(row);
+            };
+            for (const value of server?.args?.length ? server.args : transportType === "stdio" ? [""] : []) addArg(value);
+            const addArgBtn = button(tr("\uFF0B \u6DFB\u52A0\u53C2\u6570", "+ Add argument"), () => addArg());
+            addArgBtn.classList.add("settings-mcp-add-arg");
+            argsField.append(argsList, addArgBtn);
+            stdioSection.append(argsField);
+            const envField = el("div");
+            envField.className = "settings-integrations-field";
+            envField.append(el("span", tr("\u73AF\u5883\u53D8\u91CF", "Environment variables")));
+            const envList = el("div");
+            envList.className = "settings-mcp-args";
+            const addEnv = (key = "", val = "") => {
+              const row = el("div");
+              row.className = "settings-mcp-kv-row";
+              const keyInput = el("input");
+              keyInput.value = key;
+              keyInput.placeholder = tr("\u952E", "Key");
+              const valInput = el("input");
+              valInput.value = val;
+              valInput.placeholder = tr("\u503C", "Value");
+              row.append(keyInput, valInput, createTrashBtn(() => row.remove()));
+              envList.append(row);
+            };
+            if (server?.env) {
+              for (const [k, v] of Object.entries(server.env)) addEnv(k, String(v ?? ""));
+            }
+            const addEnvBtn = button(tr("\uFF0B \u6DFB\u52A0\u73AF\u5883\u53D8\u91CF", "+ Add environment variable"), () => addEnv());
+            addEnvBtn.classList.add("settings-mcp-add-arg");
+            envField.append(envList, addEnvBtn);
+            stdioSection.append(envField);
+            const envPassField = el("div");
+            envPassField.className = "settings-integrations-field";
+            envPassField.append(el("span", tr("\u73AF\u5883\u53D8\u91CF\u4F20\u9012", "Environment variable passthrough")));
+            const envPassList = el("div");
+            envPassList.className = "settings-mcp-args";
+            const addEnvPass = (value = "") => {
+              const row = el("div");
+              row.className = "settings-mcp-arg";
+              const input = el("input");
+              input.value = value;
+              input.placeholder = tr("\u53D8\u91CF\u540D\uFF0C\u4F8B\u5982\uFF1AGITHUB_TOKEN", "Variable name, e.g. GITHUB_TOKEN");
+              row.append(input, createTrashBtn(() => row.remove()));
+              envPassList.append(row);
+            };
+            if (server?.env_vars) {
+              for (const v of server.env_vars) addEnvPass(v);
+            }
+            const addEnvPassBtn = button(tr("\uFF0B \u6DFB\u52A0\u53D8\u91CF", "+ Add variable"), () => addEnvPass());
+            addEnvPassBtn.classList.add("settings-mcp-add-arg");
+            envPassField.append(envPassList, addEnvPassBtn);
+            stdioSection.append(envPassField);
+            const cwd2 = el("input");
+            cwd2.placeholder = "~/code";
+            cwd2.value = server?.cwd ?? "";
+            field(stdioSection, tr("\u5DE5\u4F5C\u76EE\u5F55", "Working directory"), cwd2);
+            const httpSection = el("div");
+            httpSection.className = "settings-mcp-section";
+            const url2 = el("input");
+            url2.placeholder = "https://mcp.example.com/mcp";
+            url2.value = server?.url ?? "";
+            field(httpSection, "URL", url2);
+            const bearerToken = el("input");
+            bearerToken.placeholder = "MCP_BEARER_TOKEN";
+            bearerToken.value = server?.bearer_token_env_var ?? "";
+            field(httpSection, tr("Bearer \u4EE4\u724C\u73AF\u5883\u53D8\u91CF", "Bearer token env var"), bearerToken);
+            const headersField = el("div");
+            headersField.className = "settings-integrations-field";
+            headersField.append(el("span", tr("\u6807\u5934", "Headers")));
+            const headersList = el("div");
+            headersList.className = "settings-mcp-args";
+            const addHeader = (key = "", val = "") => {
+              const row = el("div");
+              row.className = "settings-mcp-kv-row";
+              const keyInput = el("input");
+              keyInput.value = key;
+              keyInput.placeholder = tr("\u952E", "Key");
+              const valInput = el("input");
+              valInput.value = val;
+              valInput.placeholder = tr("\u503C", "Value");
+              row.append(keyInput, valInput, createTrashBtn(() => row.remove()));
+              headersList.append(row);
+            };
+            if (server?.http_headers) {
+              for (const [k, v] of Object.entries(server.http_headers)) addHeader(k, String(v ?? ""));
+            }
+            const addHeaderBtn = button(tr("\uFF0B \u6DFB\u52A0\u6807\u5934", "+ Add header"), () => addHeader());
+            addHeaderBtn.classList.add("settings-mcp-add-arg");
+            headersField.append(headersList, addHeaderBtn);
+            httpSection.append(headersField);
+            const envHeadersField = el("div");
+            envHeadersField.className = "settings-integrations-field";
+            envHeadersField.append(el("span", tr("\u6765\u81EA\u73AF\u5883\u53D8\u91CF\u7684\u6807\u5934", "Headers from environment variables")));
+            const envHeadersList = el("div");
+            envHeadersList.className = "settings-mcp-args";
+            const addEnvHeader = (key = "", val = "") => {
+              const row = el("div");
+              row.className = "settings-mcp-kv-row";
+              const keyInput = el("input");
+              keyInput.value = key;
+              keyInput.placeholder = tr("\u6807\u5934\u540D\u79F0", "Header name");
+              const valInput = el("input");
+              valInput.value = val;
+              valInput.placeholder = tr("\u73AF\u5883\u53D8\u91CF\u540D\u79F0", "Environment variable name");
+              row.append(keyInput, valInput, createTrashBtn(() => row.remove()));
+              envHeadersList.append(row);
+            };
+            if (server?.env_http_headers) {
+              for (const [k, v] of Object.entries(server.env_http_headers)) addEnvHeader(k, String(v ?? ""));
+            }
+            const addEnvHeaderBtn = button(tr("\uFF0B \u6DFB\u52A0\u53D8\u91CF", "+ Add variable"), () => addEnvHeader());
+            addEnvHeaderBtn.classList.add("settings-mcp-add-arg");
+            envHeadersField.append(envHeadersList, addEnvHeaderBtn);
+            httpSection.append(envHeadersField);
+            const updateTypeView = () => {
+              stdioBtn.dataset.active = String(transportType === "stdio");
+              httpBtn.dataset.active = String(transportType === "streamable_http");
+              stdioSection.hidden = transportType !== "stdio";
+              httpSection.hidden = transportType !== "streamable_http";
+              command.required = transportType === "stdio";
+              url2.required = transportType === "streamable_http";
+            };
+            stdioBtn.addEventListener("click", () => {
+              transportType = "stdio";
+              updateTypeView();
+            });
+            httpBtn.addEventListener("click", () => {
+              transportType = "streamable_http";
+              updateTypeView();
+            });
+            updateTypeView();
+            transportCard.append(stdioSection, httpSection);
+            const security = el("p", tr("\u51ED\u636E\u548C\u73AF\u5883\u53D8\u91CF\u5C06\u5728\u539F\u751F Harness \u8FD0\u884C\u73AF\u5883\u4E2D\u89E3\u6790\u4E0E\u6CE8\u5165\uFF0C\u4E0D\u4F1A\u6CC4\u9732\u5728\u5BBF\u4E3B\u8FDB\u7A0B\u4E2D\u3002", "Credentials and environment variables are resolved and injected within the native Harness environment."));
+            security.className = "settings-integrations-callout";
+            const save = button(tr("\u4FDD\u5B58 MCP", "Save MCP"), () => {
+            }, true);
+            save.type = "submit";
+            form.append(basicCard, transportCard, security, save);
+            form.addEventListener("submit", (event) => {
+              event.preventDefault();
+              if (transportType === "stdio") {
+                const args = [...argsList.querySelectorAll("input")].map((input) => input.value.trim()).filter((value) => value.length > 0);
+                const env = {};
+                for (const row of envList.querySelectorAll(".settings-mcp-kv-row")) {
+                  const [k, v] = row.querySelectorAll("input");
+                  if (k?.value.trim() && v?.value) env[k.value.trim()] = v.value;
+                }
+                const env_vars = [...envPassList.querySelectorAll("input")].map((input) => input.value.trim()).filter((v) => v.length > 0);
+                const cwdVal = cwd2.value.trim();
+                void mutate((value, selected) => value.saveMcp({
+                  ...selected,
+                  server: {
+                    ...server?.id ? { id: server.id } : {},
+                    name: name.value.trim(),
+                    transportType: "stdio",
+                    command: command.value.trim(),
+                    args,
+                    ...Object.keys(env).length ? { env } : {},
+                    ...env_vars.length ? { env_vars } : {},
+                    ...cwdVal ? { cwd: cwdVal } : {},
+                    enabled: server?.enabled ?? true
+                  }
+                }));
+              } else {
+                const http_headers = {};
+                for (const row of headersList.querySelectorAll(".settings-mcp-kv-row")) {
+                  const [k, v] = row.querySelectorAll("input");
+                  if (k?.value.trim() && v?.value) http_headers[k.value.trim()] = v.value;
+                }
+                const env_http_headers = {};
+                for (const row of envHeadersList.querySelectorAll(".settings-mcp-kv-row")) {
+                  const [k, v] = row.querySelectorAll("input");
+                  if (k?.value.trim() && v?.value.trim()) env_http_headers[k.value.trim()] = v.value.trim();
+                }
+                const token = bearerToken.value.trim();
+                void mutate((value, selected) => value.saveMcp({
+                  ...selected,
+                  server: {
+                    ...server?.id ? { id: server.id } : {},
+                    name: name.value.trim(),
+                    transportType: "streamable_http",
+                    url: url2.value.trim(),
+                    ...token ? { bearer_token_env_var: token } : {},
+                    ...Object.keys(http_headers).length ? { http_headers } : {},
+                    ...Object.keys(env_http_headers).length ? { env_http_headers } : {},
+                    enabled: server?.enabled ?? true
+                  }
+                }));
+              }
+            }, { signal: lifecycle.signal });
+            editor.append(heading, form);
+            name.focus();
+          };
+          if (targetEditServerName) {
+            const target = targetEditServerName === "__new__" ? void 0 : snapshot.servers.find((s) => s.name === targetEditServerName);
+            targetEditServerName = void 0;
+            showEditor(target);
+            body.append(toolbar, list, editor);
+            return;
+          }
+          const addButton = button(tr("\uFF0B \u6DFB\u52A0 MCP", "+ Add MCP"), () => showEditor(), true);
+          toolbar.append(search, addButton);
+          for (const native of snapshot.native) {
+            const row = el("section");
+            row.className = "settings-integrations-row settings-integrations-row--native";
+            row.append(el("strong", `${tr("\u539F\u751F\u72B6\u6001", "Native status")} \xB7 ${native.name || native.sessionId}`), el("span", native.status), el("code", native.tools.join(", ")));
+            list.append(row);
+          }
+          const toManaged = (s, newEnabled) => ({
+            id: s.id,
+            name: s.name,
+            enabled: newEnabled,
+            ...s.transportType ? { transportType: s.transportType } : {},
+            ...s.command ? { command: s.command } : {},
+            ...s.args?.length ? { args: s.args } : {},
+            ...s.env ? { env: s.env } : {},
+            ...s.env_vars?.length ? { env_vars: s.env_vars } : {},
+            ...s.cwd ? { cwd: s.cwd } : {},
+            ...s.url ? { url: s.url } : {},
+            ...s.bearer_token_env_var ? { bearer_token_env_var: s.bearer_token_env_var } : {},
+            ...s.http_headers ? { http_headers: s.http_headers } : {},
+            ...s.env_http_headers ? { env_http_headers: s.env_http_headers } : {}
+          });
+          const serverRows = [];
+          for (const server of snapshot.servers) {
+            const row = el("section");
+            row.className = "settings-integrations-row";
+            const isHttp = server.transportType === "streamable_http" || !!server.url;
+            row.dataset.search = `${server.name} ${server.command || ""} ${server.url || ""}`.toLowerCase();
+            const detail = el("div");
+            const state = !server.effective ? tr("\u88AB\u9879\u76EE\u914D\u7F6E\u8986\u76D6", "Overridden by project") : !server.enabled ? tr("\u5DF2\u505C\u7528", "Disabled") : server.appliedSessions ? tr(`\u5DF2\u4F20\u5165 ${server.appliedSessions} \u4E2A\u4F1A\u8BDD`, `Passed to ${server.appliedSessions} sessions`) : tr("\u5DF2\u914D\u7F6E", "Configured");
+            const typeTag = isHttp ? " [HTTP]" : "";
+            const summary = isHttp ? server.url || "" : [server.command, ...server.args || []].filter(Boolean).join(" ");
+            detail.append(el("strong", `${server.name}${typeTag}`), el("p", `${server.scope === "global" ? tr("\u5168\u5C40", "Global") : tr("\u9879\u76EE", "Project")} \xB7 ${state}`), el("code", summary));
+            row.append(detail);
+            if (server.editable) {
+              const editBtn = button(tr("\u7F16\u8F91", "Edit"), () => showEditor(server));
+              const toggleBtn = button(server.enabled ? tr("\u505C\u7528", "Disable") : tr("\u542F\u7528", "Enable"), () => {
+                void mutate((value, selected) => value.saveMcp({ ...selected, server: toManaged(server, !server.enabled) }));
+              });
+              const syncBtn = button(tr("\u540C\u6B65\u2026", "Sync\u2026"), () => {
+                void client().integrationCatalog().then((catalog) => {
+                  const targets = catalog.harnesses.filter((h) => h.mcp && h.id !== harness.value);
+                  showMcpSyncDialog(server, { id: harness.value, name: harness.selectedOptions[0]?.text || harness.value }, targets);
+                });
+              });
+              const delBtn = button(tr("\u5220\u9664", "Delete"), () => {
+                void mutate((value, selected) => value.removeMcp({ ...selected, id: server.id }));
+              });
+              row.append(editBtn, toggleBtn, syncBtn, delBtn);
+            }
+            list.append(row);
+            serverRows.push(row);
+          }
+          if (!snapshot.servers.length) {
+            const empty = el("div", tr("\u8FD8\u6CA1\u6709 MCP \u670D\u52A1\u5668\uFF0C\u70B9\u51FB\u201C\u6DFB\u52A0 MCP\u201D\u5F00\u59CB\u914D\u7F6E\u3002", "No MCP servers yet. Select \u201CAdd MCP\u201D to configure one."));
+            empty.className = "settings-integrations-empty";
+            list.append(empty);
+          }
+          search.addEventListener("input", () => {
+            const query = search.value.trim().toLowerCase();
+            for (const row of serverRows) row.hidden = !!query && !row.dataset.search.includes(query);
+          }, { signal: lifecycle.signal });
+          if (!snapshot.mcpSupported) {
+            addButton.disabled = true;
+            const unavailable = el("div", tr("\u6B64 Harness \u5C1A\u65E0\u5DF2\u786E\u8BA4\u7684 MCP \u914D\u7F6E\u63A5\u53E3\u3002", "This Harness has no verified MCP configuration interface."));
+            unavailable.className = "settings-integrations-callout";
+            list.prepend(unavailable);
+          }
+          body.append(toolbar, list, editor);
+        };
+        const showMcpSyncDialog = (server, sourceHarness, targetHarnesses) => {
+          if (!targetHarnesses.length) {
+            fail(new Error(tr("\u6CA1\u6709\u5176\u4ED6\u652F\u6301 MCP \u7684\u539F\u751F Harness \u53EF\u4F9B\u540C\u6B65\u3002", "No other native Harnesses support MCP for sync.")));
+            return;
+          }
+          const modal = el("dialog");
+          modal.className = "settings-skills-sync-modal settings-mcp-sync-modal";
+          const mTitle = el("h3", tr(`\u540C\u6B65 MCP\u3010${server.name}\u3011`, `Sync MCP [${server.name}]`));
+          const isHttp = server.transportType === "streamable_http" || !!server.url;
+          const summary = isHttp ? server.url || "" : [server.command, ...server.args || []].filter(Boolean).join(" ");
+          const mDesc = el("p", tr(
+            `\u4ECE ${sourceHarness.name} \u590D\u5236\u8BE5 MCP \u914D\u7F6E\uFF08${isHttp ? "HTTP" : "stdio"}\uFF1A${summary}\uFF09\u5230\u9009\u4E2D\u7684 Harness\uFF1A`,
+            `Copy MCP configuration (${isHttp ? "HTTP" : "stdio"}: ${summary}) from ${sourceHarness.name} to selected Harnesses:`
+          ));
+          const form = el("form");
+          const checkList = el("div");
+          checkList.style.display = "grid";
+          checkList.style.gap = "8px";
+          checkList.style.margin = "12px 0";
+          checkList.style.maxHeight = "240px";
+          checkList.style.overflowY = "auto";
+          const checkboxes = [];
+          for (const h of targetHarnesses) {
+            const label = el("label");
+            label.style.display = "flex";
+            label.style.gap = "8px";
+            label.style.alignItems = "center";
+            label.style.cursor = "pointer";
+            const cb = el("input");
+            cb.type = "checkbox";
+            cb.value = h.id;
+            cb.checked = true;
+            checkboxes.push(cb);
+            label.append(cb, el("span", h.name));
+            checkList.append(label);
+          }
+          const btnRow = el("div");
+          btnRow.style.display = "flex";
+          btnRow.style.gap = "8px";
+          btnRow.style.justifyContent = "flex-end";
+          btnRow.style.marginTop = "14px";
+          const cancelBtn = button(tr("\u53D6\u6D88", "Cancel"), () => {
+            modal.close();
+            modal.remove();
+          });
+          const confirmBtn = button(tr("\u786E\u8BA4\u540C\u6B65", "Confirm Sync"), () => {
+            const selectedHarnesses = checkboxes.filter((cb) => cb.checked).map((cb) => cb.value);
+            modal.close();
+            modal.remove();
+            if (!selectedHarnesses.length) return;
+            void mutateCustom(async (c) => {
+              const scopeType = level.value === "project" ? "project" : "global";
+              const currentCwd = level.value === "project" ? cwd.value.trim() : void 0;
+              const successes = [];
+              const errors = [];
+              const cleanConfig = toManagedForCopy(server);
+              for (const targetId of selectedHarnesses) {
+                const targetH = targetHarnesses.find((h) => h.id === targetId);
+                try {
+                  await c.saveMcp({
+                    harnessId: targetId,
+                    scope: scopeType,
+                    ...currentCwd ? { cwd: currentCwd } : {},
+                    server: cleanConfig
+                  });
+                  if (targetH) successes.push(targetH.name);
+                } catch (err) {
+                  errors.push(`${targetH?.name || targetId}: ${err instanceof Error ? err.message : String(err)}`);
+                }
+              }
+              if (!successes.length && errors.length) throw new Error(errors.join("; "));
+              return tr(
+                `\u540C\u6B65\u5B8C\u6210\uFF01\u5DF2\u914D\u7F6E\u5230\uFF1A${successes.join("\u3001")}${errors.length ? `\uFF08\u8DF3\u8FC7: ${errors.join("; ")}\uFF09` : ""}`,
+                `Sync complete! Configured on: ${successes.join(", ")}${errors.length ? ` (Skipped: ${errors.join("; ")})` : ""}`
+              );
+            });
+          }, true);
+          btnRow.append(cancelBtn, confirmBtn);
+          form.append(checkList, btnRow);
+          modal.append(mTitle, mDesc, form);
+          content.append(modal);
+          modal.showModal();
+        };
+        const showMcpDistributeDialog = (targetHarnesses) => {
+          if (!targetHarnesses.length) {
+            fail(new Error(tr("\u6CA1\u6709\u652F\u6301 MCP \u6CE8\u5165\u7684\u539F\u751F Harness\u3002", "No native Harnesses support MCP injection.")));
+            return;
+          }
+          const modal = el("dialog");
+          modal.className = "settings-mcp-distribute-modal";
+          const mTitle = el("h3", tr("\u65B0\u5EFA\u5E76\u6279\u91CF\u5206\u53D1 MCP", "Create & Distribute MCP"));
+          const mDesc = el("p", tr("\u914D\u7F6E MCP \u670D\u52A1\u5668\uFF0C\u5E76\u4E00\u6B21\u6027\u4FDD\u5B58\u5206\u53D1\u81F3\u9009\u4E2D\u7684\u6240\u6709 Harness\u3002", "Configure MCP server once and distribute to all selected Harnesses."));
+          const form = el("form");
+          form.className = "settings-integrations-form";
+          let transportType = "stdio";
+          const typeToggle = el("div");
+          typeToggle.className = "settings-mcp-type-toggle";
+          const stdioBtn = el("button", tr("\u6807\u51C6\u8F93\u5165\u8F93\u51FA (stdio)", "Standard I/O (stdio)"));
+          stdioBtn.type = "button";
+          stdioBtn.className = "settings-mcp-type-btn";
+          stdioBtn.dataset.active = "true";
+          const httpBtn = el("button", tr("\u6D41\u5F0F HTTP (SSE)", "Streamable HTTP (SSE)"));
+          httpBtn.type = "button";
+          httpBtn.className = "settings-mcp-type-btn";
+          typeToggle.append(stdioBtn, httpBtn);
+          const nameInput = el("input");
+          nameInput.required = true;
+          nameInput.placeholder = "my-mcp-server";
+          nameInput.pattern = "[a-zA-Z0-9](?:[a-zA-Z0-9_]|-){0,63}";
+          field(form, tr("MCP \u670D\u52A1\u5668\u540D\u79F0\uFF08\u5FC5\u586B\uFF09", "MCP server name (required)"), nameInput);
+          const typeField = el("div");
+          typeField.className = "settings-integrations-field";
+          typeField.append(el("span", tr("\u4F20\u8F93\u534F\u8BAE", "Transport Protocol")), typeToggle);
+          form.append(typeField);
+          const stdioCard = el("div");
+          stdioCard.className = "settings-integrations-form--card";
+          const cmdInput = el("input");
+          cmdInput.placeholder = "npx / uvx / node / ...";
+          field(stdioCard, tr("\u53EF\u6267\u884C\u547D\u4EE4 (Command)", "Executable Command"), cmdInput);
+          const argsInput = el("input");
+          argsInput.placeholder = "-y @modelcontextprotocol/server-filesystem D:/data";
+          field(stdioCard, tr("\u53C2\u6570\uFF08\u7A7A\u683C\u5206\u9694\uFF0C\u652F\u6301\u5F15\u53F7\uFF09", "Arguments (space separated, quotes supported)"), argsInput);
+          const envInput = el("input");
+          envInput.placeholder = "KEY1=val1, KEY2=val2";
+          field(stdioCard, tr("\u73AF\u5883\u53D8\u91CF\uFF08\u53EF\u9009\uFF0CKEY=VAL \u9017\u53F7\u6216\u6362\u884C\u5206\u9694\uFF09", "Environment variables (optional, KEY=VAL separated)"), envInput);
+          const httpCard = el("div");
+          httpCard.className = "settings-integrations-form--card";
+          httpCard.hidden = true;
+          const urlInput = el("input");
+          urlInput.type = "url";
+          urlInput.placeholder = "https://mcp.example.com/sse";
+          field(httpCard, tr("MCP \u670D\u52A1\u5668 URL", "MCP Server URL"), urlInput);
+          const tokenInput = el("input");
+          tokenInput.placeholder = "API_KEY_ENV_NAME";
+          field(httpCard, tr("Bearer Token \u73AF\u5883\u53D8\u91CF\u540D\uFF08\u53EF\u9009\uFF09", "Bearer token env var name (optional)"), tokenInput);
+          stdioBtn.addEventListener("click", () => {
+            transportType = "stdio";
+            stdioBtn.dataset.active = "true";
+            delete httpBtn.dataset.active;
+            stdioCard.hidden = false;
+            httpCard.hidden = true;
+          });
+          httpBtn.addEventListener("click", () => {
+            transportType = "streamable_http";
+            httpBtn.dataset.active = "true";
+            delete stdioBtn.dataset.active;
+            stdioCard.hidden = true;
+            httpCard.hidden = false;
+          });
+          form.append(stdioCard, httpCard);
+          const targetSection = el("div");
+          targetSection.className = "settings-integrations-form--card";
+          const targetHead = el("div");
+          targetHead.style.display = "flex";
+          targetHead.style.justifyContent = "space-between";
+          targetHead.style.alignItems = "center";
+          targetHead.style.marginBottom = "8px";
+          const targetTitle = el("strong", tr("\u5206\u53D1\u76EE\u6807 Harness\uFF1A", "Target Harnesses:"));
+          targetTitle.style.fontSize = "12px";
+          const toggleAllBtn = el("button", tr("\u5168\u9009 / \u53D6\u6D88\u5168\u9009", "Select / Deselect All"));
+          toggleAllBtn.type = "button";
+          toggleAllBtn.className = "settings-command-button settings-command-button--secondary";
+          toggleAllBtn.style.fontSize = "11px";
+          toggleAllBtn.style.padding = "3px 8px";
+          targetHead.append(targetTitle, toggleAllBtn);
+          targetSection.append(targetHead);
+          const checkList = el("div");
+          checkList.style.display = "grid";
+          checkList.style.gridTemplateColumns = "repeat(auto-fill, minmax(130px, 1fr))";
+          checkList.style.gap = "8px";
+          const checkboxes = [];
+          for (const h of targetHarnesses) {
+            const label = el("label");
+            label.style.display = "flex";
+            label.style.gap = "6px";
+            label.style.alignItems = "center";
+            label.style.cursor = "pointer";
+            label.style.fontSize = "12px";
+            const cb = el("input");
+            cb.type = "checkbox";
+            cb.value = h.id;
+            cb.checked = true;
+            checkboxes.push(cb);
+            label.append(cb, el("span", h.name));
+            checkList.append(label);
+          }
+          targetSection.append(checkList);
+          form.append(targetSection);
+          toggleAllBtn.addEventListener("click", () => {
+            const anyChecked = checkboxes.some((cb) => cb.checked);
+            for (const cb of checkboxes) cb.checked = !anyChecked;
+          });
+          const btnRow = el("div");
+          btnRow.style.display = "flex";
+          btnRow.style.gap = "8px";
+          btnRow.style.justifyContent = "flex-end";
+          btnRow.style.marginTop = "14px";
+          const cancelBtn = button(tr("\u53D6\u6D88", "Cancel"), () => {
+            modal.close();
+            modal.remove();
+          });
+          const submitBtn = el("button", tr("\u786E\u8BA4\u5E76\u5206\u53D1", "Confirm & Distribute"));
+          submitBtn.type = "submit";
+          submitBtn.className = "settings-command-button settings-command-button--primary";
+          btnRow.append(cancelBtn, submitBtn);
+          form.append(btnRow);
+          form.addEventListener("submit", (event) => {
+            event.preventDefault();
+            const serverName = nameInput.value.trim();
+            if (!serverName) return;
+            const selectedHarnesses = checkboxes.filter((cb) => cb.checked).map((cb) => cb.value);
+            if (!selectedHarnesses.length) {
+              fail(new Error(tr("\u8BF7\u81F3\u5C11\u9009\u62E9\u4E00\u4E2A\u76EE\u6807 Harness\u3002", "Please select at least one target Harness.")));
+              return;
+            }
+            let serverConfig;
+            if (transportType === "streamable_http") {
+              const url2 = urlInput.value.trim();
+              if (!url2) {
+                fail(new Error(tr("\u6D41\u5F0F HTTP \u6A21\u5F0F\u5FC5\u987B\u586B\u5199 URL\u3002", "URL is required for streamable HTTP.")));
+                return;
+              }
+              serverConfig = {
+                name: serverName,
+                transportType: "streamable_http",
+                enabled: true,
+                url: url2,
+                ...tokenInput.value.trim() ? { bearer_token_env_var: tokenInput.value.trim() } : {}
+              };
+            } else {
+              const cmd = cmdInput.value.trim();
+              if (!cmd) {
+                fail(new Error(tr("stdio \u6A21\u5F0F\u5FC5\u987B\u586B\u5199\u547D\u4EE4\u3002", "Command is required for stdio mode.")));
+                return;
+              }
+              const rawArgs = argsInput.value.trim().match(/(?:[^\s"']+|"[^"]*"|'[^']*')+/g)?.map((s) => s.replace(/^['"]|['"]$/g, "")) || [];
+              const envMap = {};
+              for (const part of envInput.value.split(/[,;\n]/)) {
+                const eq = part.indexOf("=");
+                if (eq > 0) {
+                  const k = part.slice(0, eq).trim();
+                  const v = part.slice(eq + 1).trim();
+                  if (k) envMap[k] = v;
+                }
+              }
+              serverConfig = {
+                name: serverName,
+                transportType: "stdio",
+                enabled: true,
+                command: cmd,
+                ...rawArgs.length ? { args: rawArgs } : {},
+                ...Object.keys(envMap).length ? { env: envMap } : {}
+              };
+            }
+            modal.close();
+            modal.remove();
+            void mutateCustom(async (c) => {
+              const scopeType = level.value === "project" ? "project" : "global";
+              const currentCwd = level.value === "project" ? cwd.value.trim() : void 0;
+              const successes = [];
+              const errors = [];
+              for (const targetId of selectedHarnesses) {
+                const targetH = targetHarnesses.find((h) => h.id === targetId);
+                try {
+                  await c.saveMcp({
+                    harnessId: targetId,
+                    scope: scopeType,
+                    ...currentCwd ? { cwd: currentCwd } : {},
+                    server: serverConfig
+                  });
+                  if (targetH) successes.push(targetH.name);
+                } catch (err) {
+                  errors.push(`${targetH?.name || targetId}: ${err instanceof Error ? err.message : String(err)}`);
+                }
+              }
+              if (!successes.length && errors.length) throw new Error(errors.join("; "));
+              return tr(
+                `\u5DF2\u6210\u529F\u5206\u53D1\u3010${serverName}\u3011\u81F3\uFF1A${successes.join("\u3001")}${errors.length ? `\uFF08\u8DF3\u8FC7: ${errors.join("; ")}\uFF09` : ""}`,
+                `Distributed [${serverName}] to: ${successes.join(", ")}${errors.length ? ` (Skipped: ${errors.join("; ")})` : ""}`
+              );
+            });
+          });
+          modal.append(mTitle, mDesc, form);
+          content.append(modal);
+          modal.showModal();
+        };
+        const renderMcpOverview = (_catalog, items) => {
+          const supported = items.filter((i) => i.harness.mcp);
+          const uniqueServers = /* @__PURE__ */ new Map();
+          let totalServersCount = 0;
+          let totalNativeCount = 0;
+          for (const item of items) {
+            if (item.snapshot?.servers) {
+              totalServersCount += item.snapshot.servers.length;
+              for (const s of item.snapshot.servers) {
+                const list = uniqueServers.get(s.name) || [];
+                list.push({ harness: item.harness, server: s });
+                uniqueServers.set(s.name, list);
+              }
+            }
+            if (item.snapshot?.native) {
+              totalNativeCount += item.snapshot.native.length;
+            }
+          }
+          const statsBar = el("div");
+          statsBar.className = "settings-skills-overview-stats settings-mcp-overview-stats";
+          const statsSummary = el("span", tr(
+            `\u{1F4CA} \u5171 ${items.length} \u4E2A Harness \xB7 ${supported.length} \u4E2A\u652F\u6301\u539F\u751F MCP \u6CE8\u5165 \xB7 \u5DF2\u914D\u7F6E ${uniqueServers.size} \u79CD\u72EC\u7ACB MCP\uFF08\u5171 ${totalServersCount} \u4E2A\u5B9E\u4F8B\uFF09${totalNativeCount ? ` \xB7 ${totalNativeCount} \u4E2A\u6D3B\u8DC3\u539F\u751F\u8FDE\u63A5` : ""}`,
+            `\u{1F4CA} ${items.length} Harnesses \xB7 ${supported.length} with native MCP injection \xB7 ${uniqueServers.size} unique MCPs (${totalServersCount} instances)${totalNativeCount ? ` \xB7 ${totalNativeCount} active native connections` : ""}`
+          ));
+          statsBar.append(statsSummary);
+          const toolbar = el("div");
+          toolbar.className = "settings-integrations-toolbar";
+          const searchInput = el("input");
+          searchInput.type = "search";
+          searchInput.placeholder = tr("\u6309\u540D\u79F0\u3001\u547D\u4EE4\u6216 URL \u8FC7\u6EE4 MCP \u670D\u52A1\u5668\u2026", "Filter MCP servers by name, command, or URL\u2026");
+          searchInput.setAttribute("aria-label", searchInput.placeholder);
+          const tabsWrap = el("div");
+          tabsWrap.className = "settings-skills-tabs settings-mcp-tabs";
+          const btnByHarness = el("button", tr("\u6309 Harness \u67E5\u770B", "By Harness"));
+          btnByHarness.type = "button";
+          btnByHarness.className = "settings-skills-tab-btn";
+          btnByHarness.dataset.active = "true";
+          const btnByServer = el("button", tr("\u6309 Server \u6C47\u603B", "By Server"));
+          btnByServer.type = "button";
+          btnByServer.className = "settings-skills-tab-btn";
+          tabsWrap.append(btnByHarness, btnByServer);
+          const distributeBtn = button(tr("\uFF0B \u65B0\u5EFA\u5E76\u5206\u53D1 MCP", "\uFF0B New & Distribute MCP"), () => {
+            showMcpDistributeDialog(supported.map((i) => i.harness));
+          }, true);
+          toolbar.append(searchInput, tabsWrap, distributeBtn);
+          const viewsContainer = el("div");
+          viewsContainer.className = "settings-skills-views settings-mcp-views";
+          let activeTab = "harness";
+          const updateView = () => {
+            viewsContainer.replaceChildren();
+            const query = searchInput.value.trim().toLowerCase();
+            if (activeTab === "harness") {
+              const grid = el("div");
+              grid.className = "settings-skills-overview-grid settings-mcp-overview-grid";
+              for (const item of items) {
+                const allServers = item.snapshot?.servers || [];
+                const allNative = item.snapshot?.native || [];
+                const matchingServers = query ? allServers.filter(
+                  (s) => s.name.toLowerCase().includes(query) || s.command && s.command.toLowerCase().includes(query) || s.url && s.url.toLowerCase().includes(query) || s.args && s.args.some((a) => a.toLowerCase().includes(query))
+                ) : allServers;
+                const matchingNative = query ? allNative.filter(
+                  (n) => n.name && n.name.toLowerCase().includes(query) || n.sessionId && n.sessionId.toLowerCase().includes(query) || n.tools && n.tools.some((t) => t.toLowerCase().includes(query))
+                ) : allNative;
+                if (query && !item.harness.name.toLowerCase().includes(query) && matchingServers.length === 0 && matchingNative.length === 0) {
+                  continue;
+                }
+                const card = el("section");
+                card.className = "settings-skills-harness-card settings-mcp-harness-card";
+                const head = el("div");
+                head.className = "settings-skills-harness-head settings-mcp-harness-head";
+                const hTitle = el("strong", item.harness.name);
+                const badge = el("span");
+                badge.className = `settings-skills-badge ${item.harness.mcp ? "settings-skills-badge--active" : ""}`;
+                badge.textContent = item.harness.mcp ? tr(`${allServers.length} \u4E2A MCP`, `${allServers.length} MCPs`) : tr("\u672A\u63D0\u4F9B MCP \u63A5\u53E3", "No native MCP interface");
+                head.append(hTitle, badge);
+                card.append(head);
+                if (!item.harness.mcp) {
+                  const note2 = el("p", tr("\u6B64 Harness \u5C1A\u65E0\u5DF2\u786E\u8BA4\u7684 MCP \u914D\u7F6E\u63A5\u53E3\u3002", "This Harness has no verified MCP configuration interface."));
+                  note2.className = "settings-mcp-notice";
+                  card.append(note2);
+                } else if (item.error) {
+                  const errNote = el("p", item.error);
+                  errNote.className = "settings-mcp-notice";
+                  errNote.style.color = "#ef4444";
+                  card.append(errNote);
+                } else {
+                  if (matchingNative.length > 0) {
+                    const nativeBox = el("div");
+                    nativeBox.className = "settings-mcp-native-box";
+                    const nativeTitle = el("div");
+                    nativeTitle.className = "settings-mcp-native-title";
+                    nativeTitle.textContent = tr(`\u{1F7E2} \u539F\u751F\u8FD0\u884C\u65F6\u6D3B\u8DC3 (${matchingNative.length})`, `\u{1F7E2} Active Native Sessions (${matchingNative.length})`);
+                    nativeBox.append(nativeTitle);
+                    for (const n of matchingNative) {
+                      const nRow = el("div");
+                      nRow.className = "settings-mcp-native-item";
+                      const nHeader = el("div");
+                      nHeader.append(
+                        el("strong", n.name || n.sessionId),
+                        el("span", ` \xB7 ${n.status}${n.tools?.length ? ` \xB7 ${n.tools.length} ${tr("\u5DE5\u5177", "tools")}` : ""}`)
+                      );
+                      nRow.append(nHeader);
+                      if (n.tools?.length) {
+                        const toolPreview = n.tools.slice(0, 4).join(", ") + (n.tools.length > 4 ? ` +${n.tools.length - 4}` : "");
+                        nRow.append(el("code", toolPreview));
+                      }
+                      nativeBox.append(nRow);
+                    }
+                    card.append(nativeBox);
+                  }
+                  if (matchingServers.length === 0) {
+                    const empty = el("p", query ? tr("\u65E0\u5339\u914D MCP \u670D\u52A1\u5668", "No matching MCP servers") : tr("\u6682\u672A\u914D\u7F6E MCP \u670D\u52A1\u5668", "No MCP servers configured"));
+                    empty.className = "settings-mcp-notice";
+                    card.append(empty);
+                  } else {
+                    const list = el("div");
+                    list.className = "settings-skills-list-compact settings-mcp-list-compact";
+                    for (const s of matchingServers) {
+                      const row = el("div");
+                      row.className = "settings-skills-item-row settings-mcp-item-row";
+                      const isHttp = s.transportType === "streamable_http" || !!s.url;
+                      const summary = isHttp ? s.url || "" : [s.command, ...s.args || []].filter(Boolean).join(" ");
+                      const stateText = !s.effective ? tr(" \xB7 \u88AB\u9879\u76EE\u8986\u76D6", " \xB7 Overridden") : !s.enabled ? tr(" \xB7 \u5DF2\u505C\u7528", " \xB7 Disabled") : s.appliedSessions ? tr(` \xB7 \u4F20\u5165 ${s.appliedSessions} \u4F1A\u8BDD`, ` \xB7 ${s.appliedSessions} sessions`) : tr(" \xB7 \u5DF2\u914D\u7F6E", " \xB7 Configured");
+                      const info = el("div");
+                      info.append(
+                        el("strong", `${s.name}${isHttp ? " [HTTP]" : " [stdio]"}`),
+                        el("span", stateText),
+                        el("code", summary)
+                      );
+                      const actions = el("div");
+                      actions.className = "settings-skills-item-actions settings-mcp-item-actions";
+                      actions.append(button(s.enabled ? tr("\u505C\u7528", "Disable") : tr("\u542F\u7528", "Enable"), () => {
+                        void mutateCustom(async (c) => {
+                          const scopeType = level.value === "project" ? "project" : "global";
+                          const currentCwd = level.value === "project" ? cwd.value.trim() : void 0;
+                          await c.saveMcp({
+                            harnessId: item.harness.id,
+                            scope: scopeType,
+                            ...currentCwd ? { cwd: currentCwd } : {},
+                            server: toManagedForCopy(s, !s.enabled)
+                          });
+                          return tr(
+                            `\u5DF2${s.enabled ? "\u505C\u7528" : "\u542F\u7528"}\u3010${s.name}\u3011\uFF08${item.harness.name}\uFF09\u3002`,
+                            `${s.enabled ? "Disabled" : "Enabled"} [${s.name}] (${item.harness.name}).`
+                          );
+                        });
+                      }));
+                      const otherSupported = supported.filter((h) => h.harness.id !== item.harness.id);
+                      if (otherSupported.length > 0) {
+                        actions.append(button(tr("\u540C\u6B65\u2026", "Sync\u2026"), () => {
+                          showMcpSyncDialog(s, item.harness, otherSupported.map((h) => h.harness));
+                        }));
+                      }
+                      actions.append(button(tr("\u7F16\u8F91", "Edit"), () => {
+                        editInHarness(item.harness.id, s.name);
+                      }));
+                      row.append(info, actions);
+                      list.append(row);
+                    }
+                    card.append(list);
+                  }
+                  const cardFooter = el("div");
+                  cardFooter.className = "settings-mcp-card-footer";
+                  const addBtn = button(tr("\uFF0B \u6DFB\u52A0 MCP", "\uFF0B Add MCP"), () => {
+                    editInHarness(item.harness.id, "__new__");
+                  });
+                  cardFooter.append(addBtn);
+                  card.append(cardFooter);
+                }
+                grid.append(card);
+              }
+              viewsContainer.append(grid);
+            } else {
+              const matrixList = el("div");
+              matrixList.className = "settings-skills-matrix-list settings-mcp-matrix-list";
+              let matchedCount = 0;
+              for (const [serverName, installations] of uniqueServers.entries()) {
+                const firstServer = installations[0].server;
+                const isHttp = firstServer.transportType === "streamable_http" || !!firstServer.url;
+                const summary = isHttp ? firstServer.url || "" : [firstServer.command, ...firstServer.args || []].filter(Boolean).join(" ");
+                if (query && !serverName.toLowerCase().includes(query) && !summary.toLowerCase().includes(query) && !installations.some((i) => i.harness.name.toLowerCase().includes(query))) {
+                  continue;
+                }
+                matchedCount++;
+                const card = el("section");
+                card.className = "settings-skills-matrix-card settings-mcp-matrix-card";
+                const head = el("div");
+                head.className = "settings-skills-matrix-head settings-mcp-matrix-head";
+                const titleWrap = el("div");
+                titleWrap.style.display = "flex";
+                titleWrap.style.alignItems = "center";
+                titleWrap.style.gap = "8px";
+                titleWrap.append(el("strong", serverName), el("span", `[${isHttp ? "HTTP" : "stdio"}]`));
+                head.append(
+                  titleWrap,
+                  el("span", tr(`\u5DF2\u5728 ${installations.length} \u4E2A Harness \u914D\u7F6E`, `Configured in ${installations.length} harnesses`))
+                );
+                const codeSummary = el("code");
+                codeSummary.style.fontSize = "11px";
+                codeSummary.style.color = "var(--settings-muted)";
+                codeSummary.style.overflowWrap = "anywhere";
+                codeSummary.textContent = summary;
+                const tags = el("div");
+                tags.className = "settings-skills-tags settings-mcp-tags";
+                for (const inst of installations) {
+                  const tag = el("span");
+                  tag.className = `settings-skills-tag settings-mcp-tag ${inst.server.enabled ? "" : "settings-mcp-tag--disabled"}`;
+                  tag.textContent = `\u2713 ${inst.harness.name}${inst.server.enabled ? "" : tr(" (\u5DF2\u505C\u7528)", " (disabled)")}`;
+                  tags.append(tag);
+                }
+                const installedIds = new Set(installations.map((i) => i.harness.id));
+                const missingHarnesses = supported.filter((h) => !installedIds.has(h.harness.id));
+                const syncRow = el("div");
+                syncRow.className = "settings-skills-sync-actions settings-mcp-sync-actions";
+                if (missingHarnesses.length > 0) {
+                  const label = el("span", tr("\u672A\u914D\u7F6E\u4E8E\uFF1A", "Not configured in: "));
+                  label.style.fontSize = "11px";
+                  label.style.color = "var(--settings-muted)";
+                  syncRow.append(label);
+                  for (const missing of missingHarnesses) {
+                    const installBtn = button(`+ ${missing.harness.name}`, () => {
+                      void mutateCustom(async (c) => {
+                        const scopeType = level.value === "project" ? "project" : "global";
+                        const currentCwd = level.value === "project" ? cwd.value.trim() : void 0;
+                        await c.saveMcp({
+                          harnessId: missing.harness.id,
+                          scope: scopeType,
+                          ...currentCwd ? { cwd: currentCwd } : {},
+                          server: toManagedForCopy(firstServer)
+                        });
+                        return tr(`\u5DF2\u5C06 MCP\u3010${serverName}\u3011\u540C\u6B65\u5230 ${missing.harness.name}\u3002`, `Configured [${serverName}] to ${missing.harness.name}.`);
+                      });
+                    });
+                    syncRow.append(installBtn);
+                  }
+                  if (missingHarnesses.length > 1) {
+                    const installAllBtn = button(tr("\u4E00\u952E\u540C\u6B65\u5230\u5168\u90E8\u652F\u6301\u7684 Harness", "Sync to all supported"), () => {
+                      void mutateCustom(async (c) => {
+                        const scopeType = level.value === "project" ? "project" : "global";
+                        const currentCwd = level.value === "project" ? cwd.value.trim() : void 0;
+                        const successes = [];
+                        for (const missing of missingHarnesses) {
+                          try {
+                            await c.saveMcp({
+                              harnessId: missing.harness.id,
+                              scope: scopeType,
+                              ...currentCwd ? { cwd: currentCwd } : {},
+                              server: toManagedForCopy(firstServer)
+                            });
+                            successes.push(missing.harness.name);
+                          } catch {
+                          }
+                        }
+                        return tr(`\u5DF2\u5C06 MCP\u3010${serverName}\u3011\u540C\u6B65\u5230\uFF1A${successes.join("\u3001")}\u3002`, `Synced [${serverName}] to: ${successes.join(", ")}.`);
+                      });
+                    }, true);
+                    syncRow.append(installAllBtn);
+                  }
+                } else {
+                  const complete = el("span", tr("\u2713 \u5DF2\u5728\u6240\u6709\u652F\u6301\u7684 Harness \u4E2D\u914D\u7F6E\u5C31\u7EEA", "\u2713 Ready across all supported Harnesses"));
+                  complete.style.fontSize = "11px";
+                  complete.style.color = "#10a37f";
+                  syncRow.append(complete);
+                }
+                card.append(head, codeSummary, tags, syncRow);
+                matrixList.append(card);
+              }
+              if (matchedCount === 0) {
+                const empty = el("div", tr("\u672A\u5339\u914D\u5230\u4EFB\u4F55 MCP \u670D\u52A1\u5668\u3002", "No MCP servers matched the search."));
+                empty.className = "settings-integrations-empty";
+                matrixList.append(empty);
+              }
+              viewsContainer.append(matrixList);
+            }
+          };
+          btnByHarness.addEventListener("click", () => {
+            activeTab = "harness";
+            btnByHarness.dataset.active = "true";
+            delete btnByServer.dataset.active;
+            updateView();
+          }, { signal: lifecycle.signal });
+          btnByServer.addEventListener("click", () => {
+            activeTab = "server";
+            btnByServer.dataset.active = "true";
+            delete btnByHarness.dataset.active;
+            updateView();
+          }, { signal: lifecycle.signal });
+          searchInput.addEventListener("input", () => {
+            updateView();
+          }, { signal: lifecycle.signal });
+          updateView();
+          body.append(statsBar, toolbar, viewsContainer);
+        };
+        const showSyncDialog = (skill, sourceHarness, targetHarnesses) => {
+          const sourceDir = skill.path.replace(/[/\\][^/\\]+$/, "");
+          if (!targetHarnesses.length) {
+            fail(new Error(tr("\u6CA1\u6709\u5176\u4ED6\u652F\u6301\u6280\u80FD\u7684\u539F\u751F Harness \u53EF\u4F9B\u540C\u6B65\u3002", "No other native Harnesses support skills for sync.")));
+            return;
+          }
+          const modal = el("dialog");
+          modal.className = "settings-skills-sync-modal";
+          const mTitle = el("h3", tr(`\u540C\u6B65\u6280\u80FD\u3010${skill.name}\u3011`, `Sync skill [${skill.name}]`));
+          const mDesc = el("p", tr(`\u4ECE ${sourceHarness.name} \u590D\u5236\u8BE5\u6280\u80FD\u5230\u4EE5\u4E0B\u9009\u4E2D\u7684 Harness\uFF1A`, `Copy skill from ${sourceHarness.name} to selected Harnesses:`));
+          const form = el("form");
+          const checkList = el("div");
+          checkList.style.display = "grid";
+          checkList.style.gap = "8px";
+          checkList.style.margin = "12px 0";
+          const checkboxes = [];
+          for (const h of targetHarnesses) {
+            const label = el("label");
+            label.style.display = "flex";
+            label.style.gap = "8px";
+            label.style.alignItems = "center";
+            label.style.cursor = "pointer";
+            const cb = el("input");
+            cb.type = "checkbox";
+            cb.value = h.id;
+            cb.checked = true;
+            checkboxes.push(cb);
+            label.append(cb, el("span", h.name));
+            checkList.append(label);
+          }
+          const btnRow = el("div");
+          btnRow.style.display = "flex";
+          btnRow.style.gap = "8px";
+          btnRow.style.justifyContent = "flex-end";
+          btnRow.style.marginTop = "14px";
+          const cancelBtn = button(tr("\u53D6\u6D88", "Cancel"), () => {
+            modal.close();
+            modal.remove();
+          });
+          const confirmBtn = button(tr("\u786E\u8BA4\u540C\u6B65", "Confirm Sync"), () => {
+            const selectedHarnesses = checkboxes.filter((cb) => cb.checked).map((cb) => cb.value);
+            modal.close();
+            modal.remove();
+            if (!selectedHarnesses.length) return;
+            void mutateCustom(async (c) => {
+              const scopeType = level.value === "project" ? "project" : "global";
+              const currentCwd = level.value === "project" ? cwd.value.trim() : void 0;
+              const successes = [];
+              const errors = [];
+              for (const targetId of selectedHarnesses) {
+                const targetH = targetHarnesses.find((h) => h.id === targetId);
+                try {
+                  await c.changeSkill({
+                    harnessId: targetId,
+                    scope: scopeType,
+                    ...currentCwd ? { cwd: currentCwd } : {},
+                    name: skill.name,
+                    source: sourceDir,
+                    action: "install"
+                  });
+                  if (targetH) successes.push(targetH.name);
+                } catch (err) {
+                  errors.push(`${targetH?.name || targetId}: ${err instanceof Error ? err.message : String(err)}`);
+                }
+              }
+              return tr(
+                `\u540C\u6B65\u5B8C\u6210\uFF01\u5DF2\u5B89\u88C5\u5230\uFF1A${successes.join("\u3001")}${errors.length ? `\uFF08\u8DF3\u8FC7: ${errors.join("; ")}\uFF09` : ""}`,
+                `Sync complete! Installed to: ${successes.join(", ")}${errors.length ? ` (Skipped: ${errors.join("; ")})` : ""}`
+              );
+            });
+          }, true);
+          btnRow.append(cancelBtn, confirmBtn);
+          form.append(checkList, btnRow);
+          modal.append(mTitle, mDesc, form);
+          content.append(modal);
+          modal.showModal();
+        };
+        const renderSkills = (snapshot) => {
+          const drop = el("div");
+          drop.className = "settings-skill-dropzone";
+          drop.tabIndex = 0;
+          drop.setAttribute("role", "button");
+          const dropTitle = el("strong", tr("\u62D6\u62FD\u6280\u80FD\u5230\u8FD9\u91CC", "Drop a skill here"));
+          const dropHint = el("span", tr("\u652F\u6301\u5355\u4E2A Markdown \u6587\u4EF6\u6216\u5305\u542B SKILL.md \u7684\u6587\u4EF6\u5939 \xB7 \u6700\u5927 10 MB / 500 \u4E2A\u6587\u4EF6", "Supports one Markdown file or a folder containing SKILL.md \xB7 up to 10 MB / 500 files"));
+          const picker = el("input");
+          picker.type = "file";
+          picker.multiple = true;
+          picker.hidden = true;
+          picker.setAttribute("webkitdirectory", "");
+          const choose = button(tr("\u9009\u62E9\u6280\u80FD\u6587\u4EF6\u5939", "Choose skill folder"), () => picker.click());
+          drop.append(dropTitle, dropHint, choose, picker);
+          const list = el("div");
+          list.className = "settings-integrations-list";
+          const installFiles = async (incoming) => {
+            const parsed = await parseDroppedSkills(incoming);
+            await mutate((value, selected) => value.changeSkill({ ...selected, name: parsed.name, files: parsed.files, action: "install" }));
+          };
+          const receiveFiles = async (transfer) => {
+            try {
+              let incoming = [];
+              if ("items" in transfer && transfer.items.length) {
+                const entries = [...transfer.items].map((item) => item.webkitGetAsEntry?.() ?? null).filter((entry) => entry !== null);
+                if (entries.length) for (const entry of entries) await walkEntry(entry, "", incoming);
+              }
+              const fileList = "files" in transfer ? transfer.files : transfer;
+              if (!incoming.length) incoming = [...fileList].map((file2) => ({ path: file2.webkitRelativePath || file2.name, file: file2 }));
+              await installFiles(incoming);
+            } catch (error51) {
+              fail(error51);
+            }
+          };
+          for (const eventName of ["dragenter", "dragover"]) drop.addEventListener(eventName, (event) => {
+            event.preventDefault();
+            if (!busy) drop.dataset.dragOver = "true";
+          }, { signal: lifecycle.signal });
+          drop.addEventListener("dragleave", () => {
+            delete drop.dataset.dragOver;
+          }, { signal: lifecycle.signal });
+          drop.addEventListener("drop", (event) => {
+            event.preventDefault();
+            delete drop.dataset.dragOver;
+            if (!busy && event.dataTransfer) void receiveFiles(event.dataTransfer);
+          }, { signal: lifecycle.signal });
+          picker.addEventListener("change", () => {
+            if (picker.files?.length) void receiveFiles(picker.files);
+            picker.value = "";
+          }, { signal: lifecycle.signal });
+          if (!snapshot.skillsSupported) {
+            drop.dataset.disabled = "true";
+            choose.disabled = true;
+            dropHint.textContent = tr("\u6B64 Harness \u7684\u539F\u751F\u6280\u80FD\u76EE\u5F55\u5C1A\u672A\u786E\u8BA4\u3002", "This Harness has no verified native skill directory.");
+          }
+          for (const skill of snapshot.skills) {
+            const row = el("section");
+            row.className = "settings-integrations-row";
+            const detail = el("div");
+            detail.append(el("strong", skill.name), el("p", skill.enabled ? tr("\u5DF2\u5B89\u88C5 \xB7 \u52A0\u8F7D\u72B6\u6001\u672A\u62A5\u544A", "Installed \xB7 load status unreported") : tr("\u5DF2\u505C\u7528 \xB7 \u6587\u4EF6\u5DF2\u4FDD\u7559", "Disabled \xB7 files retained")), el("code", skill.path));
+            row.append(detail);
+            if (skill.writable) {
+              row.append(button(skill.enabled ? tr("\u505C\u7528", "Disable") : tr("\u6062\u590D", "Restore"), () => {
+                void mutate((value, selected) => value.changeSkill({ ...selected, name: skill.name, root: skill.root, action: skill.enabled ? "disable" : "enable" }));
+              }));
+            } else {
+              row.append(el("span", tr("\u94FE\u63A5\u76EE\u5F55\uFF0C\u53EA\u8BFB", "Linked directory, read-only")));
+            }
+            const syncBtn = button(tr("\u540C\u6B65\u5230\u2026", "Sync to\u2026"), () => {
+              void lifecycle.runLatest(() => client().integrationCatalog(), {
+                success: (cat) => {
+                  const targetHarnesses = cat.harnesses.filter((h) => h.skills && h.id !== snapshot.harnessId);
+                  showSyncDialog(skill, { id: snapshot.harnessId, name: snapshot.harnessId }, targetHarnesses);
+                },
+                failure: fail
+              });
+            });
+            row.append(syncBtn);
+            list.append(row);
+          }
+          if (!snapshot.skills.length) {
+            const empty = el("div", tr("\u8FD8\u6CA1\u6709\u53D1\u73B0\u6280\u80FD\u3002\u62D6\u5165\u6587\u4EF6\u5373\u53EF\u5B89\u88C5\u3002", "No skills found. Drop files above to install one."));
+            empty.className = "settings-integrations-empty";
+            list.append(empty);
+          }
+          body.append(drop, list);
+        };
+        const renderSkillsOverview = (catalog, items) => {
+          const drop = el("div");
+          drop.className = "settings-skill-dropzone";
+          drop.tabIndex = 0;
+          drop.setAttribute("role", "button");
+          const dropTitle = el("strong", tr("\u62D6\u62FD\u6280\u80FD\u5230\u8FD9\u91CC\uFF0C\u4E00\u952E\u5206\u53D1\u5B89\u88C5", "Drop a skill here to distribute and install"));
+          const dropHint = el("span", tr("\u652F\u6301\u5355\u4E2A Markdown \u6587\u4EF6\u6216\u5305\u542B SKILL.md \u7684\u6587\u4EF6\u5939 \xB7 \u81EA\u52A8\u5B89\u88C5\u81F3\u6240\u9009 Harness", "Supports one Markdown file or folder with SKILL.md \xB7 Installs to target Harnesses"));
+          const targetRow = el("div");
+          targetRow.className = "settings-skills-target-row";
+          const targetLabel = el("span", tr("\u5B89\u88C5\u76EE\u6807\uFF1A", "Target: "));
+          const targetSelect = el("select");
+          targetSelect.setAttribute("aria-label", tr("\u9009\u62E9\u76EE\u6807 Harness", "Select target Harness"));
+          const allOption = el("option", tr("\u5168\u90E8\u652F\u6301\u7684 Harness", "All supported Harnesses"));
+          allOption.value = "__all__";
+          targetSelect.append(allOption);
+          for (const item of items) {
+            if (item.harness.skills) {
+              const opt = el("option", item.harness.name);
+              opt.value = item.harness.id;
+              targetSelect.append(opt);
+            }
+          }
+          const picker = el("input");
+          picker.type = "file";
+          picker.multiple = true;
+          picker.hidden = true;
+          picker.setAttribute("webkitdirectory", "");
+          const choose = button(tr("\u9009\u62E9\u6280\u80FD\u6587\u4EF6\u5939", "Choose skill folder"), () => picker.click());
+          targetRow.append(targetLabel, targetSelect, choose, picker);
+          drop.append(dropTitle, dropHint, targetRow);
+          const receiveOverviewFiles = async (transfer) => {
+            try {
+              let incoming = [];
+              if ("items" in transfer && transfer.items.length) {
+                const entries = [...transfer.items].map((item) => item.webkitGetAsEntry?.() ?? null).filter((entry) => entry !== null);
+                if (entries.length) for (const entry of entries) await walkEntry(entry, "", incoming);
+              }
+              const fileList = "files" in transfer ? transfer.files : transfer;
+              if (!incoming.length) incoming = [...fileList].map((file2) => ({ path: file2.webkitRelativePath || file2.name, file: file2 }));
+              const parsed = await parseDroppedSkills(incoming);
+              await mutateCustom(async (c) => {
+                const scopeType = level.value === "project" ? "project" : "global";
+                const currentCwd = level.value === "project" ? cwd.value.trim() : void 0;
+                const targets = targetSelect.value === "__all__" ? items.filter((i) => i.harness.skills).map((i) => i.harness) : items.filter((i) => i.harness.id === targetSelect.value).map((i) => i.harness);
+                if (!targets.length) throw new Error(tr("\u6CA1\u6709\u53EF\u5B89\u88C5\u7684\u76EE\u6807 Harness\u3002", "No available target Harnesses."));
+                const successNames = [];
+                const errors = [];
+                for (const target of targets) {
+                  try {
+                    await c.changeSkill({
+                      harnessId: target.id,
+                      scope: scopeType,
+                      ...currentCwd ? { cwd: currentCwd } : {},
+                      name: parsed.name,
+                      files: parsed.files,
+                      action: "install"
+                    });
+                    successNames.push(target.name);
+                  } catch (err) {
+                    errors.push(`${target.name}: ${err instanceof Error ? err.message : String(err)}`);
+                  }
+                }
+                if (!successNames.length && errors.length) throw new Error(errors.join("; "));
+                return tr(
+                  `\u5DF2\u6210\u529F\u5C06\u6280\u80FD\u3010${parsed.name}\u3011\u5B89\u88C5\u5230\uFF1A${successNames.join("\u3001")}${errors.length ? `\uFF08\u8DF3\u8FC7: ${errors.join("; ")}\uFF09` : ""}`,
+                  `Successfully installed skill [${parsed.name}] to: ${successNames.join(", ")}${errors.length ? ` (Skipped: ${errors.join("; ")})` : ""}`
+                );
+              });
+            } catch (error51) {
+              fail(error51);
+            }
+          };
+          for (const eventName of ["dragenter", "dragover"]) drop.addEventListener(eventName, (event) => {
+            event.preventDefault();
+            if (!busy) drop.dataset.dragOver = "true";
+          }, { signal: lifecycle.signal });
+          drop.addEventListener("dragleave", () => {
+            delete drop.dataset.dragOver;
+          }, { signal: lifecycle.signal });
+          drop.addEventListener("drop", (event) => {
+            event.preventDefault();
+            delete drop.dataset.dragOver;
+            if (!busy && event.dataTransfer) void receiveOverviewFiles(event.dataTransfer);
+          }, { signal: lifecycle.signal });
+          picker.addEventListener("change", () => {
+            if (picker.files?.length) void receiveOverviewFiles(picker.files);
+            picker.value = "";
+          }, { signal: lifecycle.signal });
+          const supported = items.filter((i) => i.harness.skills);
+          const uniqueSkills = /* @__PURE__ */ new Map();
+          for (const item of items) {
+            if (!item.snapshot?.skills) continue;
+            for (const s of item.snapshot.skills) {
+              const list = uniqueSkills.get(s.name) || [];
+              list.push({ harness: item.harness, skill: s });
+              uniqueSkills.set(s.name, list);
+            }
+          }
+          const statsBar = el("div");
+          statsBar.className = "settings-skills-overview-stats";
+          const statsSummary = el("span", tr(
+            `\u{1F4CA} \u5171 ${items.length} \u4E2A Harness \xB7 ${supported.length} \u4E2A\u5DF2\u914D\u7F6E\u539F\u751F\u6280\u80FD\u76EE\u5F55 \xB7 \u53D1\u73B0 ${uniqueSkills.size} \u4E2A\u53BB\u91CD\u6280\u80FD`,
+            `\u{1F4CA} ${items.length} Harnesses \xB7 ${supported.length} with native skills \xB7 ${uniqueSkills.size} unique skills found`
+          ));
+          statsBar.append(statsSummary);
+          const toolbar = el("div");
+          toolbar.className = "settings-integrations-toolbar";
+          const searchInput = el("input");
+          searchInput.type = "search";
+          searchInput.placeholder = tr("\u6309\u540D\u79F0\u8FC7\u6EE4\u6280\u80FD\u2026", "Filter skills by name\u2026");
+          searchInput.setAttribute("aria-label", searchInput.placeholder);
+          const tabsWrap = el("div");
+          tabsWrap.className = "settings-skills-tabs";
+          const btnByHarness = el("button", tr("\u6309 Harness \u67E5\u770B", "By Harness"));
+          btnByHarness.type = "button";
+          btnByHarness.className = "settings-skills-tab-btn";
+          btnByHarness.dataset.active = "true";
+          const btnBySkill = el("button", tr("\u6309 Skill \u6C47\u603B", "By Skill"));
+          btnBySkill.type = "button";
+          btnBySkill.className = "settings-skills-tab-btn";
+          tabsWrap.append(btnByHarness, btnBySkill);
+          toolbar.append(searchInput, tabsWrap);
+          const viewsContainer = el("div");
+          viewsContainer.className = "settings-skills-views";
+          let activeTab = "harness";
+          const updateView = () => {
+            viewsContainer.replaceChildren();
+            const query = searchInput.value.trim().toLowerCase();
+            if (activeTab === "harness") {
+              const grid = el("div");
+              grid.className = "settings-skills-overview-grid";
+              for (const item of items) {
+                const allSkills = item.snapshot?.skills || [];
+                const matchingSkills = query ? allSkills.filter((s) => s.name.toLowerCase().includes(query) || s.path.toLowerCase().includes(query)) : allSkills;
+                if (query && !item.harness.name.toLowerCase().includes(query) && matchingSkills.length === 0) {
+                  continue;
+                }
+                const card = el("section");
+                card.className = "settings-skills-harness-card";
+                const head = el("div");
+                head.className = "settings-skills-harness-head";
+                const hTitle = el("strong", item.harness.name);
+                const badge = el("span");
+                badge.className = `settings-skills-badge ${item.harness.skills ? "settings-skills-badge--active" : ""}`;
+                badge.textContent = item.harness.skills ? tr(`${allSkills.length} \u4E2A\u6280\u80FD`, `${allSkills.length} skills`) : tr("\u672A\u914D\u7F6E\u76EE\u5F55", "No native directory");
+                head.append(hTitle, badge);
+                card.append(head);
+                if (!item.harness.skills) {
+                  const note2 = el("p", tr("\u6B64 Harness \u6682\u672A\u914D\u7F6E\u539F\u751F\u6280\u80FD\u76EE\u5F55\u3002", "This Harness has no verified native skill directory."));
+                  note2.className = "settings-mcp-notice";
+                  card.append(note2);
+                } else if (matchingSkills.length === 0) {
+                  const empty = el("p", query ? tr("\u65E0\u5339\u914D\u6280\u80FD", "No matching skills") : tr("\u6682\u672A\u5B89\u88C5\u6280\u80FD", "No skills installed"));
+                  empty.className = "settings-mcp-notice";
+                  card.append(empty);
+                } else {
+                  const list = el("div");
+                  list.className = "settings-skills-list-compact";
+                  for (const s of matchingSkills) {
+                    const row = el("div");
+                    row.className = "settings-skills-item-row";
+                    const info = el("div");
+                    info.append(
+                      el("strong", s.name),
+                      el("span", s.enabled ? tr(" \xB7 \u5DF2\u5B89\u88C5", " \xB7 Installed") : tr(" \xB7 \u5DF2\u505C\u7528", " \xB7 Disabled")),
+                      el("code", s.path)
+                    );
+                    const actions = el("div");
+                    actions.className = "settings-skills-item-actions";
+                    if (s.writable) {
+                      actions.append(button(s.enabled ? tr("\u505C\u7528", "Disable") : tr("\u6062\u590D", "Restore"), () => {
+                        void mutateCustom(async (c) => {
+                          const scopeType = level.value === "project" ? "project" : "global";
+                          const currentCwd = level.value === "project" ? cwd.value.trim() : void 0;
+                          await c.changeSkill({
+                            harnessId: item.harness.id,
+                            scope: scopeType,
+                            ...currentCwd ? { cwd: currentCwd } : {},
+                            name: s.name,
+                            root: s.root,
+                            action: s.enabled ? "disable" : "enable"
+                          });
+                        });
+                      }));
+                    }
+                    const otherSupported = supported.filter((h) => h.harness.id !== item.harness.id);
+                    if (otherSupported.length > 0) {
+                      const syncBtn = button(tr("\u540C\u6B65\u2026", "Sync\u2026"), () => {
+                        showSyncDialog(s, item.harness, otherSupported.map((h) => h.harness));
+                      });
+                      actions.append(syncBtn);
+                    }
+                    row.append(info, actions);
+                    list.append(row);
+                  }
+                  card.append(list);
+                }
+                grid.append(card);
+              }
+              viewsContainer.append(grid);
+            } else {
+              const matrixList = el("div");
+              matrixList.className = "settings-skills-matrix-list";
+              let matchedCount = 0;
+              for (const [skillName, installations] of uniqueSkills.entries()) {
+                if (query && !skillName.toLowerCase().includes(query) && !installations.some((i) => i.skill.path.toLowerCase().includes(query))) {
+                  continue;
+                }
+                matchedCount++;
+                const card = el("section");
+                card.className = "settings-skills-matrix-card";
+                const head = el("div");
+                head.className = "settings-skills-matrix-head";
+                head.append(
+                  el("strong", skillName),
+                  el("span", tr(`\u5DF2\u5728 ${installations.length} \u4E2A Harness \u5B89\u88C5`, `Installed in ${installations.length} harnesses`))
+                );
+                const tags = el("div");
+                tags.className = "settings-skills-tags";
+                for (const inst of installations) {
+                  const tag = el("span");
+                  tag.className = "settings-skills-tag";
+                  tag.textContent = `\u2713 ${inst.harness.name}${inst.skill.enabled ? "" : tr(" (\u5DF2\u505C\u7528)", " (disabled)")}`;
+                  tags.append(tag);
+                }
+                const installedIds = new Set(installations.map((i) => i.harness.id));
+                const missingHarnesses = supported.filter((h) => !installedIds.has(h.harness.id));
+                const syncRow = el("div");
+                syncRow.className = "settings-skills-sync-actions";
+                if (missingHarnesses.length > 0) {
+                  const label = el("span", tr("\u672A\u5B89\u88C5\u4E8E\uFF1A", "Not installed in: "));
+                  label.style.fontSize = "11px";
+                  label.style.color = "var(--settings-muted)";
+                  syncRow.append(label);
+                  const sourceSkill = installations[0].skill;
+                  const sourceDir = sourceSkill.path.replace(/[/\\][^/\\]+$/, "");
+                  for (const missing of missingHarnesses) {
+                    const installBtn = button(`+ ${missing.harness.name}`, () => {
+                      void mutateCustom(async (c) => {
+                        const scopeType = level.value === "project" ? "project" : "global";
+                        const currentCwd = level.value === "project" ? cwd.value.trim() : void 0;
+                        await c.changeSkill({
+                          harnessId: missing.harness.id,
+                          scope: scopeType,
+                          ...currentCwd ? { cwd: currentCwd } : {},
+                          name: skillName,
+                          source: sourceDir,
+                          action: "install"
+                        });
+                        return tr(`\u5DF2\u5C06\u3010${skillName}\u3011\u540C\u6B65\u5B89\u88C5\u5230 ${missing.harness.name}\u3002`, `Installed [${skillName}] to ${missing.harness.name}.`);
+                      });
+                    });
+                    syncRow.append(installBtn);
+                  }
+                  if (missingHarnesses.length > 1) {
+                    const installAllBtn = button(tr("\u4E00\u952E\u540C\u6B65\u5230\u5168\u90E8", "Sync to all"), () => {
+                      void mutateCustom(async (c) => {
+                        const scopeType = level.value === "project" ? "project" : "global";
+                        const currentCwd = level.value === "project" ? cwd.value.trim() : void 0;
+                        const successes = [];
+                        for (const missing of missingHarnesses) {
+                          try {
+                            await c.changeSkill({
+                              harnessId: missing.harness.id,
+                              scope: scopeType,
+                              ...currentCwd ? { cwd: currentCwd } : {},
+                              name: skillName,
+                              source: sourceDir,
+                              action: "install"
+                            });
+                            successes.push(missing.harness.name);
+                          } catch {
+                          }
+                        }
+                        return tr(`\u5DF2\u5C06\u3010${skillName}\u3011\u540C\u6B65\u5B89\u88C5\u5230\uFF1A${successes.join("\u3001")}\u3002`, `Synced [${skillName}] to: ${successes.join(", ")}.`);
+                      });
+                    }, true);
+                    syncRow.append(installAllBtn);
+                  }
+                } else {
+                  const complete = el("span", tr("\u5DF2\u5728\u6240\u6709\u652F\u6301\u7684 Harness \u4E2D\u5C31\u7EEA", "Ready across all supported Harnesses"));
+                  complete.style.fontSize = "11px";
+                  complete.style.color = "#10a37f";
+                  syncRow.append(complete);
+                }
+                card.append(head, tags, syncRow);
+                matrixList.append(card);
+              }
+              if (matchedCount === 0) {
+                const empty = el("div", tr("\u672A\u5339\u914D\u5230\u4EFB\u4F55\u6280\u80FD\u3002", "No skills matched the search."));
+                empty.className = "settings-integrations-empty";
+                matrixList.append(empty);
+              }
+              viewsContainer.append(matrixList);
+            }
+          };
+          btnByHarness.addEventListener("click", () => {
+            activeTab = "harness";
+            btnByHarness.dataset.active = "true";
+            delete btnBySkill.dataset.active;
+            updateView();
+          }, { signal: lifecycle.signal });
+          btnBySkill.addEventListener("click", () => {
+            activeTab = "skill";
+            btnBySkill.dataset.active = "true";
+            delete btnByHarness.dataset.active;
+            updateView();
+          }, { signal: lifecycle.signal });
+          searchInput.addEventListener("input", () => {
+            updateView();
+          }, { signal: lifecycle.signal });
+          updateView();
+          body.append(drop, statsBar, toolbar, viewsContainer);
+        };
+        const render = (snapshot) => {
+          body.replaceChildren();
+          if (kind === "mcp") renderMcp(snapshot);
+          else renderSkills(snapshot);
+        };
+        const refresh = async () => {
+          if (busy || lifecycle.disposed) return;
+          if (level.value === "project" && !cwd.value.trim()) {
+            body.replaceChildren();
+            status.textContent = tr("\u586B\u5199\u9879\u76EE\u8DEF\u5F84\u540E\u5373\u53EF\u8BFB\u53D6\u3002", "Enter the project path to continue.");
+            cwd.focus();
+            return;
+          }
+          setBusy(true);
+          status.textContent = tr("\u6B63\u5728\u8BFB\u53D6\u2026", "Loading\u2026");
+          status.setAttribute("role", "status");
+          if (harness.value === "__all__") {
+            await lifecycle.runLatest(async () => {
+              const catalog = await client().integrationCatalog();
+              const scopeType = level.value === "project" ? "project" : "global";
+              const currentCwd = level.value === "project" ? cwd.value.trim() : void 0;
+              const items = await Promise.all(
+                catalog.harnesses.map(async (h) => {
+                  try {
+                    const snap = await client().listIntegrations({
+                      harnessId: h.id,
+                      scope: scopeType,
+                      ...currentCwd ? { cwd: currentCwd } : {}
+                    });
+                    return { harness: h, snapshot: snap, error: null };
+                  } catch (err) {
+                    return { harness: h, snapshot: null, error: err instanceof Error ? err.message : String(err) };
+                  }
+                })
+              );
+              return { catalog, items };
+            }, {
+              success: (data) => {
+                body.replaceChildren();
+                if (kind === "mcp") {
+                  renderMcpOverview(data.catalog, data.items);
+                } else {
+                  renderSkillsOverview(data.catalog, data.items);
+                }
+                status.textContent = "";
+              },
+              failure: fail
+            });
+          } else {
+            await lifecycle.runLatest(() => client().listIntegrations(selectedScope()), { success: (data) => {
+              render(data);
+              status.textContent = "";
+            }, failure: fail });
+          }
+          if (!lifecycle.disposed) setBusy(false);
+        };
+        refreshButton.addEventListener("click", () => {
+          void refresh();
+        }, { signal: lifecycle.signal });
+        controls.append(harness, level, cwd, refreshButton);
+        content.append(title, note, controls, status, body);
+        harness.addEventListener("change", () => {
+          void refresh();
+        }, { signal: lifecycle.signal });
+        level.addEventListener("change", () => {
+          cwd.hidden = level.value !== "project";
+          void refresh();
+        }, { signal: lifecycle.signal });
+        cwd.addEventListener("change", () => {
+          void refresh();
+        }, { signal: lifecycle.signal });
+        void lifecycle.runLatest(() => client().integrationCatalog(), { success: (data) => {
+          const allOption = el("option", tr("\u5168\u90E8 Harness\uFF08\u603B\u89C8\uFF09", "All Harnesses (Overview)"));
+          allOption.value = "__all__";
+          harness.append(allOption);
+          for (const item of data.harnesses) {
+            const option = el("option", `${item.name}${item.available ? "" : tr(" \xB7 \u672A\u5C31\u7EEA", " \xB7 not ready")}`);
+            option.value = item.id;
+            harness.append(option);
+          }
+          void refresh();
+        }, failure: fail });
+        return void 0;
+      }
+    });
+  }
+  var createMcpSettingsPage = (messages, getClient) => createIntegrationSettingsPage("mcp", messages, getClient);
+  var createSkillsSettingsPage = (messages, getClient) => createIntegrationSettingsPage("skills", messages, getClient);
+
   // src/native-ui/renderer-extension/src/settings/update-request.ts
   var RENDERER_UPDATE_REQUEST_TIMEOUT_MS = 15e3;
   var RendererUpdateRequestTimeoutError = class extends Error {
@@ -26149,7 +28517,7 @@ ${error51.stderrTail}`] : []
     }
     return `${scaled.toFixed(scaled >= 10 ? 0 : 1)} ${unit}`;
   }
-  function aboutPage(messages) {
+  function aboutPage(messages, getClient = () => null) {
     return Object.freeze({
       id: "about",
       label: messages.pageLabels.about,
@@ -26171,7 +28539,7 @@ ${error51.stderrTail}`] : []
         versionRow.className = "settings-about-version-row";
         const versionBadge = document2.createElement("span");
         versionBadge.className = "settings-about-version-badge";
-        versionBadge.textContent = "v0.1.2";
+        versionBadge.textContent = "v\u2026";
         const checkUpdateBtn = document2.createElement("button");
         checkUpdateBtn.type = "button";
         checkUpdateBtn.className = "settings-command-button settings-command-button--secondary";
@@ -26213,6 +28581,20 @@ ${error51.stderrTail}`] : []
         repositorySection.append(openSource, repository);
         panel.append(product, tagline, versionRow, introduction, starCallout, repositorySection);
         context.content.append(heading, panel);
+        const client = getClient();
+        const readVersion = client?.readCurrentVersion ? () => client.readCurrentVersion() : client ? () => client.checkUpdate().then(({ currentVersion }) => ({ version: currentVersion })) : null;
+        if (readVersion) {
+          void context.runLatest(readVersion, {
+            success(result) {
+              versionBadge.textContent = `v${result.version}`;
+            },
+            failure() {
+              versionBadge.textContent = "v\u2014";
+            }
+          });
+        } else {
+          versionBadge.textContent = "v\u2014";
+        }
         return void 0;
       }
     });
@@ -26526,16 +28908,18 @@ ${error51.stderrTail}`] : []
       }
     });
   }
-  function createDefaultRendererSettingsPages(messages = DEFAULT_RENDERER_SETTINGS_MESSAGES, getUpdateClient = () => null, getDiagnostics = () => null, getAccountClient = () => null, getSessionImportClient = () => null, openImportedThread = () => Promise.reject(new Error("Imported Thread navigation is unavailable"))) {
+  function createDefaultRendererSettingsPages(messages = DEFAULT_RENDERER_SETTINGS_MESSAGES, getUpdateClient = () => null, getDiagnostics = () => null, getAccountClient = () => null, getSessionImportClient = () => null, openImportedThread = () => Promise.reject(new Error("Imported Thread navigation is unavailable")), getIntegrationsClient = () => null) {
     return Object.freeze([
       createConnectionsSettingsPage(messages, getDiagnostics),
       createAccountsSettingsPage(messages, getAccountClient),
+      createMcpSettingsPage(messages, getIntegrationsClient),
+      createSkillsSettingsPage(messages, getIntegrationsClient),
       createSessionImportSettingsPage(messages, getSessionImportClient, openImportedThread),
       updatesPage(messages, getUpdateClient),
-      aboutPage(messages)
+      aboutPage(messages, getUpdateClient)
     ]);
   }
-  function createDefaultRendererSettingsRegistry(messages = DEFAULT_RENDERER_SETTINGS_MESSAGES, getUpdateClient = () => null, getDiagnostics = () => null, getAccountClient = () => null, getSessionImportClient = () => null, openImportedThread) {
+  function createDefaultRendererSettingsRegistry(messages = DEFAULT_RENDERER_SETTINGS_MESSAGES, getUpdateClient = () => null, getDiagnostics = () => null, getAccountClient = () => null, getSessionImportClient = () => null, openImportedThread, getIntegrationsClient) {
     return createRendererSettingsPageRegistry(
       createDefaultRendererSettingsPages(
         messages,
@@ -26543,13 +28927,14 @@ ${error51.stderrTail}`] : []
         getDiagnostics,
         getAccountClient,
         getSessionImportClient,
-        openImportedThread
+        openImportedThread,
+        getIntegrationsClient
       )
     );
   }
 
   // src/native-ui/renderer-extension/src/settings/shell.css
-  var shell_default = ':host {\r\n  --settings-bg: light-dark(#ffffff, #202020);\r\n  --settings-sidebar: light-dark(#f7f7f8, #191919);\r\n  --settings-panel: light-dark(#ffffff, #232323);\r\n  --settings-surface: light-dark(#f6f6f6, #292929);\r\n  --settings-surface-hover: light-dark(#eeeeee, #303030);\r\n  --settings-inset: light-dark(#f3f3f3, #161616);\r\n  --settings-text: light-dark(#0d0d0d, #ececec);\r\n  --settings-muted: light-dark(#676767, #a3a3a3);\r\n  --settings-subtle: light-dark(#8a8a8a, #777777);\r\n  --settings-border: light-dark(rgb(13 13 13 / 9%), rgb(255 255 255 / 9%));\r\n  --settings-divider: light-dark(rgb(13 13 13 / 7%), rgb(255 255 255 / 7%));\r\n  --settings-hover: light-dark(rgb(13 13 13 / 5%), rgb(255 255 255 / 7%));\r\n  --settings-active: light-dark(rgb(13 13 13 / 7%), rgb(255 255 255 / 9%));\r\n  --settings-focus: light-dark(#0b75d1, #66aaf9);\r\n  --settings-primary: light-dark(#171717, #f4f4f4);\r\n  --settings-primary-hover: light-dark(#2f2f2f, #ffffff);\r\n  --settings-primary-text: light-dark(#ffffff, #171717);\r\n  --settings-warning: light-dark(#8a5500, #f5c96a);\r\n  --settings-warning-bg: light-dark(#fff8e6, rgb(245 201 106 / 8%));\r\n  --settings-warning-border: light-dark(#ead8a8, rgb(245 201 106 / 24%));\r\n  --settings-danger: light-dark(#b42318, #f87171);\r\n  --settings-danger-bg: light-dark(#fff1f0, rgb(239 68 68 / 8%));\r\n  --settings-danger-border: light-dark(#f3c7c3, rgb(239 68 68 / 22%));\r\n  --settings-success: light-dark(#16784a, #4ade80);\r\n  color: var(--settings-text);\r\n  color-scheme: inherit;\r\n  font:\r\n    13px/1.5 system-ui,\r\n    -apple-system,\r\n    BlinkMacSystemFont,\r\n    "Segoe UI",\r\n    sans-serif;\r\n  letter-spacing: 0;\r\n}\r\n\r\n*,\r\n*::before,\r\n*::after {\r\n  box-sizing: border-box;\r\n  letter-spacing: 0;\r\n}\r\n\r\nbutton,\r\ninput,\r\nselect {\r\n  font: inherit;\r\n}\r\n\r\nbutton {\r\n  color: inherit;\r\n}\r\n\r\n[hidden] {\r\n  display: none !important;\r\n}\r\n\r\n.settings-visually-hidden {\r\n  position: absolute;\r\n  width: 1px;\r\n  height: 1px;\r\n  padding: 0;\r\n  margin: -1px;\r\n  overflow: hidden;\r\n  clip-path: inset(50%);\r\n  white-space: nowrap;\r\n  border: 0;\r\n}\r\n\r\n.codexhost-settings-dialog {\r\n  width: min(1120px, calc(100vw - 32px));\r\n  height: min(780px, calc(100vh - 32px));\r\n  max-width: none;\r\n  max-height: none;\r\n  margin: auto;\r\n  padding: 0;\r\n  overflow: hidden;\r\n  color: var(--settings-text);\r\n  background: var(--settings-bg);\r\n  border: 1px solid var(--settings-border);\r\n  border-radius: 14px;\r\n  box-shadow: light-dark(0 16px 42px rgb(0 0 0 / 16%), 0 20px 54px rgb(0 0 0 / 42%));\r\n}\r\n\r\n.codexhost-settings-dialog::backdrop {\r\n  background: light-dark(rgb(0 0 0 / 24%), rgb(0 0 0 / 56%));\r\n  backdrop-filter: blur(1px);\r\n}\r\n\r\n.settings-frame,\r\n.settings-layout {\r\n  width: 100%;\r\n  height: 100%;\r\n  min-width: 0;\r\n  min-height: 0;\r\n}\r\n\r\n.settings-frame {\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n\r\n.settings-layout {\r\n  flex: 1;\r\n  display: grid;\r\n  grid-template-columns: 184px minmax(0, 1fr);\r\n  background: var(--settings-bg);\r\n}\r\n\r\n.settings-sidebar {\r\n  display: flex;\r\n  min-width: 0;\r\n  min-height: 0;\r\n  flex-direction: column;\r\n  overflow: hidden;\r\n  background: var(--settings-sidebar);\r\n  border-right: 1px solid var(--settings-border);\r\n  padding-top: 14px;\r\n}\r\n\r\n.settings-header {\r\n  display: flex;\r\n  align-items: center;\r\n  min-width: 0;\r\n  height: 48px;\r\n  flex: none;\r\n  padding: 0 12px;\r\n  border-bottom: 1px solid var(--settings-border);\r\n}\r\n\r\n.settings-header-actions {\r\n  display: flex;\r\n  align-items: center;\r\n  flex: none;\r\n  gap: 12px;\r\n  margin-left: auto;\r\n}\r\n\r\n.settings-brand {\r\n  display: flex;\r\n  align-items: center;\r\n  min-width: 0;\r\n  gap: 7px;\r\n}\r\n\r\n.settings-brand__mark {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 26px;\r\n  height: 26px;\r\n  flex: none;\r\n  color: var(--settings-text);\r\n}\r\n\r\n.settings-brand__mark .codexhost-settings-icon {\r\n  width: 24px;\r\n  height: 24px;\r\n  object-fit: contain;\r\n}\r\n\r\n.settings-brand__copy {\r\n  display: flex;\r\n  min-width: 0;\r\n  align-items: baseline;\r\n  gap: 0;\r\n  line-height: 20px;\r\n}\r\n\r\n.settings-brand__name {\r\n  overflow: hidden;\r\n  color: var(--settings-text);\r\n  font-size: 13px;\r\n  font-weight: 600;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n}\r\n\r\n.settings-brand__title {\r\n  margin-left: 8px;\r\n  padding-left: 8px;\r\n  color: var(--settings-muted);\r\n  font-size: 13px;\r\n  font-weight: 400;\r\n  border-left: 1px solid var(--settings-border);\r\n}\r\n\r\n.settings-nav {\r\n  display: flex;\r\n  min-width: 0;\r\n  min-height: 0;\r\n  flex: 1;\r\n  flex-direction: column;\r\n  gap: 2px;\r\n  padding: 0 7px 10px;\r\n  overflow-y: auto;\r\n}\r\n\r\n.settings-nav-section-label {\r\n  min-height: 24px;\r\n  padding: 4px 9px 2px;\r\n  color: var(--settings-subtle);\r\n  font-size: 11px;\r\n  font-weight: 600;\r\n  line-height: 18px;\r\n}\r\n\r\n.settings-nav-section-label:not(:first-child) {\r\n  margin-top: 8px;\r\n}\r\n\r\n.settings-nav-button {\r\n  display: grid;\r\n  grid-template-columns: 16px minmax(0, 1fr);\r\n  align-items: center;\r\n  width: 100%;\r\n  position: relative;\r\n  min-height: 34px;\r\n  flex: none;\r\n  gap: 9px;\r\n  padding: 6px 9px;\r\n  color: var(--settings-text);\r\n  font-size: 13px;\r\n  line-height: 20px;\r\n  text-align: left;\r\n  background: transparent;\r\n  border: 0;\r\n  border-radius: 8px;\r\n  cursor: pointer;\r\n}\r\n\r\n.settings-nav-button .codexhost-settings-icon {\r\n  width: 16px;\r\n  height: 16px;\r\n  opacity: 0.9;\r\n}\r\n\r\n.settings-nav-button:hover {\r\n  background: var(--settings-hover);\r\n}\r\n\r\n.settings-nav-button[aria-current="page"] {\r\n  background: var(--settings-active);\r\n  color: var(--settings-text);\r\n  font-weight: 500;\r\n}\r\n\r\n.settings-nav-button span {\r\n  min-width: 0;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n}\r\n\r\n.settings-nav-star-link {\r\n  margin-top: 0;\r\n  color: var(--settings-text);\r\n  text-decoration: none;\r\n}\r\n\r\n.settings-nav-star-link .codexhost-settings-icon {\r\n  color: var(--settings-warning);\r\n}\r\n\r\n.settings-nav-star-link:hover {\r\n  color: var(--settings-warning);\r\n  background: var(--settings-warning-bg);\r\n}\r\n\r\n.settings-icon-button {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 28px;\r\n  height: 28px;\r\n  flex: none;\r\n  padding: 0;\r\n  color: var(--settings-muted);\r\n  background: transparent;\r\n  border: 0;\r\n  border-radius: 8px;\r\n  cursor: pointer;\r\n}\r\n\r\n.settings-icon-button:hover {\r\n  color: var(--settings-text);\r\n  background: var(--settings-hover);\r\n}\r\n\r\n.settings-icon-button:focus-visible,\r\n.settings-nav-button:focus-visible {\r\n  outline: 2px solid var(--settings-focus);\r\n  outline-offset: 1px;\r\n}\r\n\r\n.settings-page {\r\n  display: block;\r\n  position: relative;\r\n  min-width: 0;\r\n  min-height: 0;\r\n  overflow-y: auto;\r\n  background: var(--settings-bg);\r\n  scrollbar-gutter: stable;\r\n}\r\n\r\n.settings-page__content {\r\n  width: min(930px, calc(100% - 80px));\r\n  margin-inline: auto;\r\n}\r\n\r\n.settings-page__content {\r\n  min-width: 0;\r\n  padding: 28px 0 36px;\r\n}\r\n\r\n.settings-section-label {\r\n  min-height: auto;\r\n  margin: 0;\r\n  padding: 0 0 18px;\r\n  color: var(--settings-text);\r\n  font-size: 18px;\r\n  font-weight: 600;\r\n  line-height: 26px;\r\n}\r\n\r\n.settings-status-list,\r\n.settings-empty {\r\n  overflow: hidden;\r\n  background: var(--settings-panel);\r\n}\r\n\r\n.settings-status-row {\r\n  display: grid;\r\n  grid-template-columns: minmax(170px, 1fr) auto minmax(280px, 1.45fr);\r\n  position: relative;\r\n  align-items: center;\r\n  min-height: 72px;\r\n  gap: 20px;\r\n  padding: 12px 0;\r\n}\r\n\r\n.settings-status-row:not(:last-child)::after {\r\n  content: "";\r\n  position: absolute;\r\n  right: 0;\r\n  bottom: 0;\r\n  left: 0;\r\n  height: 1px;\r\n  background: var(--settings-divider);\r\n}\r\n\r\n.settings-status-row__identity {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  min-width: 0;\r\n  color: var(--settings-text);\r\n  gap: 10px;\r\n  font-size: 14px;\r\n  font-weight: 500;\r\n  line-height: 22px;\r\n}\r\n\r\n.settings-status-row__icon {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 36px;\r\n  height: 36px;\r\n  flex: none;\r\n  color: var(--settings-muted);\r\n  background: var(--settings-surface);\r\n  border-radius: 50%;\r\n}\r\n\r\n.settings-status-badge {\r\n  flex: none;\r\n  padding: 3px 8px;\r\n  color: var(--settings-muted);\r\n  font-size: 11px;\r\n  font-weight: 500;\r\n  line-height: 18px;\r\n  background: var(--settings-surface);\r\n  border: 1px solid var(--settings-border);\r\n  border-radius: 6px;\r\n}\r\n\r\n.settings-status-row__detail {\r\n  min-width: 0;\r\n  color: var(--settings-muted);\r\n  font-size: 13px;\r\n  line-height: 20px;\r\n}\r\n\r\n.settings-page-description {\r\n  max-width: 760px;\r\n  margin: -10px 0 20px;\r\n  color: var(--settings-muted);\r\n  font-size: 12px;\r\n  line-height: 18px;\r\n}\r\n\r\n.settings-session-import-header {\r\n  display: flex;\r\n  align-items: flex-start;\r\n  justify-content: space-between;\r\n  gap: 24px;\r\n}\r\n\r\n.settings-session-import-header .settings-section-label {\r\n  min-width: 0;\r\n}\r\n\r\n.settings-session-import-harness {\r\n  display: flex;\r\n  align-items: center;\r\n  min-width: 0;\r\n  gap: 12px;\r\n  margin: -12px 0 16px;\r\n  color: var(--settings-muted);\r\n  font-size: 13px;\r\n}\r\n\r\n.settings-session-import-harness > span {\r\n  flex: none;\r\n}\r\n\r\n.settings-session-import-harness__options {\r\n  display: flex;\r\n  align-items: center;\r\n  min-width: 0;\r\n  flex: 1;\r\n  gap: 6px;\r\n  overflow-x: auto;\r\n  overflow-y: hidden;\r\n  scrollbar-width: none;\r\n}\r\n\r\n.settings-session-import-harness__options::-webkit-scrollbar {\r\n  display: none;\r\n}\r\n\r\n.settings-session-import-harness__option {\r\n  min-height: 32px;\r\n  flex: none;\r\n  padding: 6px 10px;\r\n  color: var(--settings-muted);\r\n  font: inherit;\r\n  font-size: 12px;\r\n  white-space: nowrap;\r\n  background: rgb(255 255 255 / 4%);\r\n  border: 1px solid var(--settings-border);\r\n  border-radius: 6px;\r\n  cursor: pointer;\r\n}\r\n\r\n.settings-session-import-harness__option[aria-pressed="true"] {\r\n  color: var(--settings-text);\r\n  background: var(--settings-active);\r\n  border-color: rgb(51 156 255 / 50%);\r\n}\r\n\r\n.settings-session-import-harness__option:disabled {\r\n  opacity: 0.38;\r\n  cursor: not-allowed;\r\n}\r\n\r\n.settings-session-import-harness__option:focus-visible {\r\n  outline: 2px solid var(--settings-focus);\r\n  outline-offset: 2px;\r\n}\r\n\r\n.settings-session-import-harness + .settings-page-description {\r\n  margin-top: 0;\r\n  margin-bottom: 4px;\r\n}\r\n\r\n.settings-session-import-availability-note {\r\n  margin-top: 0;\r\n}\r\n\r\n.settings-session-import-search,\r\n.settings-session-import-pagination {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  align-items: center;\r\n  gap: 10px;\r\n  margin: 16px 0;\r\n}\r\n\r\n.settings-session-import-search input {\r\n  flex: 1;\r\n  min-width: 160px;\r\n}\r\n\r\n.settings-session-import-search input,\r\n.settings-session-import-pagination select {\r\n  min-height: 36px;\r\n  padding: 6px 10px;\r\n  color: var(--settings-text);\r\n  background: var(--settings-bg);\r\n  border: 1px solid var(--settings-border);\r\n  border-radius: 6px;\r\n}\r\n\r\n.settings-session-import-search input:focus-visible,\r\n.settings-session-import-pagination select:focus-visible {\r\n  outline: 2px solid var(--settings-focus);\r\n  outline-offset: 2px;\r\n}\r\n\r\n.settings-session-import-pagination {\r\n  color: var(--settings-muted);\r\n  font-size: 12px;\r\n}\r\n\r\n.settings-session-import-pagination label {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n}\r\n\r\n.settings-session-import-pagination > span {\r\n  flex: 1;\r\n  min-width: 130px;\r\n}\r\n\r\n.settings-session-import-pagination__navigation {\r\n  display: flex;\r\n  gap: 8px;\r\n  margin-left: auto;\r\n}\r\n\r\n.settings-session-import-content,\r\n.settings-session-import-list {\r\n  display: grid;\r\n  gap: 10px;\r\n}\r\n\r\n.settings-session-import-status {\r\n  display: flex;\r\n  align-items: center;\r\n  min-height: 64px;\r\n  gap: 12px;\r\n  padding: 16px;\r\n  color: var(--settings-muted);\r\n  background: var(--settings-panel);\r\n  border: 1px solid var(--settings-border);\r\n  border-radius: 8px;\r\n}\r\n\r\n.settings-session-import-status.is-error {\r\n  color: #ef4444;\r\n}\r\n\r\n.settings-session-import-recovery {\r\n  display: grid;\r\n  justify-items: start;\r\n  gap: 14px;\r\n  padding: 16px;\r\n  background: var(--settings-panel);\r\n  border: 1px solid var(--settings-border);\r\n  border-radius: 8px;\r\n}\r\n\r\n.settings-session-import-recovery:focus-visible {\r\n  outline: 2px solid var(--settings-focus);\r\n  outline-offset: 2px;\r\n}\r\n\r\n.settings-session-import-recovery__copy {\r\n  display: grid;\r\n  gap: 4px;\r\n}\r\n\r\n.settings-session-import-recovery__copy strong {\r\n  color: var(--settings-text);\r\n  font-size: 14px;\r\n}\r\n\r\n.settings-session-import-recovery__copy p {\r\n  margin: 0;\r\n  color: var(--settings-muted);\r\n  font-size: 13px;\r\n  line-height: 20px;\r\n}\r\n\r\n.settings-session-import-recovery__path {\r\n  display: flex;\r\n  align-items: stretch;\r\n  width: 100%;\r\n  min-width: 0;\r\n  overflow: hidden;\r\n  border: 1px solid var(--settings-border);\r\n  border-radius: 6px;\r\n}\r\n\r\n.settings-session-import-recovery__path code {\r\n  min-width: 0;\r\n  flex: 1;\r\n  padding: 8px 10px;\r\n  overflow-x: auto;\r\n  color: var(--settings-text);\r\n  font-size: 12px;\r\n  line-height: 20px;\r\n  white-space: nowrap;\r\n}\r\n\r\n.settings-session-import-recovery__path .settings-command-button {\r\n  min-height: 0;\r\n  flex: none;\r\n  border-width: 0 0 0 1px;\r\n  border-radius: 0;\r\n}\r\n\r\n.settings-session-import-row {\r\n  display: grid;\r\n  grid-template-columns: minmax(0, 1fr) auto;\r\n  align-items: center;\r\n  gap: 20px;\r\n  min-width: 0;\r\n  padding: 16px;\r\n  background: var(--settings-panel);\r\n  border: 1px solid var(--settings-border);\r\n  border-radius: 8px;\r\n}\r\n\r\n.settings-session-import-row__copy {\r\n  display: grid;\r\n  min-width: 0;\r\n  gap: 4px;\r\n}\r\n\r\n.settings-session-import-row__copy strong {\r\n  overflow: hidden;\r\n  color: var(--settings-text);\r\n  font-size: 14px;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n}\r\n\r\n.settings-session-import-row__copy span,\r\n.settings-session-import-row__cwd {\r\n  overflow: hidden;\r\n  color: var(--settings-muted);\r\n  font-size: 12px;\r\n  line-height: 18px;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n}\r\n\r\n.settings-session-import-row__cwd {\r\n  display: block;\r\n  min-width: 0;\r\n  background: transparent;\r\n}\r\n\r\n.settings-session-import-row__action {\r\n  display: flex;\r\n  align-items: flex-end;\r\n  flex-direction: column;\r\n  gap: 8px;\r\n}\r\n\r\n.settings-session-import-running {\r\n  color: var(--settings-muted);\r\n  font-size: 12px;\r\n}\r\n\r\n.settings-preference-row {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  gap: 32px;\r\n  min-height: 88px;\r\n  padding: 18px 0;\r\n  border-top: 1px solid var(--settings-divider);\r\n  border-bottom: 1px solid var(--settings-divider);\r\n}\r\n\r\n.settings-preference-row__copy {\r\n  display: flex;\r\n  flex: 1 1 auto;\r\n  flex-direction: column;\r\n  min-width: 0;\r\n  gap: 5px;\r\n}\r\n\r\n.settings-preference-row__copy strong {\r\n  color: var(--settings-text);\r\n  font-size: 15px;\r\n  font-weight: 600;\r\n  line-height: 22px;\r\n}\r\n\r\n.settings-preference-row__copy span {\r\n  max-width: 680px;\r\n  color: var(--settings-muted);\r\n  font-size: 13px;\r\n  line-height: 20px;\r\n}\r\n\r\n.settings-preference-switch {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  width: 42px;\r\n  height: 24px;\r\n  flex: none;\r\n  padding: 2px;\r\n  border: 0;\r\n  border-radius: 999px;\r\n  background: var(--settings-surface-hover);\r\n  cursor: pointer;\r\n  transition: background 120ms ease;\r\n}\r\n\r\n.settings-preference-switch[aria-checked="true"] {\r\n  justify-content: flex-end;\r\n  background: var(--settings-focus);\r\n}\r\n\r\n.settings-preference-switch:focus-visible {\r\n  outline: 2px solid var(--settings-focus);\r\n  outline-offset: 2px;\r\n}\r\n\r\n.settings-preference-switch__thumb {\r\n  width: 20px;\r\n  height: 20px;\r\n  border-radius: 50%;\r\n  background: var(--settings-primary-text);\r\n  box-shadow: 0 1px 3px rgb(0 0 0 / 24%);\r\n}\r\n\r\n.settings-connection-page-header {\r\n  display: flex;\r\n  align-items: flex-start;\r\n  justify-content: space-between;\r\n  gap: 18px;\r\n  margin-bottom: 18px;\r\n}\r\n\r\n.settings-connection-page-header .settings-section-label {\r\n  padding-bottom: 0;\r\n}\r\n\r\n.settings-connection-page-header .settings-page-description {\r\n  margin: 5px 0 0;\r\n}\r\n\r\n.settings-connections-content,\r\n.settings-connections-layout,\r\n.settings-connection-list,\r\n.settings-connection-rows {\r\n  min-width: 0;\r\n}\r\n\r\n.settings-connections-layout {\r\n  display: grid;\r\n  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.85fr);\r\n  align-items: start;\r\n  gap: 18px;\r\n}\r\n\r\n.settings-connection-list,\r\n.settings-connection-inspector {\r\n  overflow: hidden;\r\n  background: var(--settings-panel);\r\n  border: 1px solid var(--settings-border);\r\n  border-radius: 10px;\r\n}\r\n\r\n.settings-connection-host-strip {\r\n  display: grid;\r\n  grid-template-columns: 30px minmax(0, 1fr) 30px;\r\n  align-items: center;\r\n  min-width: 0;\r\n  gap: 5px;\r\n  padding: 9px 10px;\r\n  border-bottom: 1px solid var(--settings-divider);\r\n}\r\n\r\n.settings-connection-host-scroll {\r\n  display: none;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 30px;\r\n  height: 34px;\r\n  padding: 0;\r\n  color: var(--settings-muted);\r\n  background: var(--settings-inset);\r\n  border: 1px solid var(--settings-border);\r\n  border-radius: 8px;\r\n  cursor: pointer;\r\n}\r\n\r\n.settings-connection-host-strip[data-connection-host-overflow="true"]\r\n  .settings-connection-host-scroll {\r\n  display: inline-flex;\r\n}\r\n\r\n.settings-connection-host-strip:not([data-connection-host-overflow="true"]) {\r\n  grid-template-columns: minmax(0, 1fr);\r\n}\r\n\r\n.settings-connection-host-scroll:hover:not(:disabled) {\r\n  color: var(--settings-text);\r\n  background: var(--settings-hover);\r\n}\r\n\r\n.settings-connection-host-scroll:disabled {\r\n  cursor: default;\r\n  opacity: 0.35;\r\n}\r\n\r\n.settings-connection-host-scroll:focus-visible,\r\n.settings-connection-host-tab:focus-visible,\r\n.settings-connection-row:focus-visible,\r\n.settings-connection-install-link:focus-visible,\r\n.settings-connection-view-error:focus-visible {\r\n  outline: 2px solid var(--settings-focus);\r\n  outline-offset: 1px;\r\n}\r\n\r\n.settings-connection-host-tabs {\r\n  display: flex;\r\n  align-items: center;\r\n  min-width: 0;\r\n  gap: 6px;\r\n  overflow-x: auto;\r\n  overflow-y: hidden;\r\n  overscroll-behavior-x: contain;\r\n  scrollbar-width: none;\r\n  scroll-behavior: smooth;\r\n  scroll-snap-type: x proximity;\r\n  touch-action: pan-x;\r\n}\r\n\r\n.settings-connection-host-tabs::-webkit-scrollbar {\r\n  display: none;\r\n}\r\n\r\n.settings-connection-host-tab {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  height: 30px;\r\n  min-width: max-content;\r\n  flex: none;\r\n  padding: 0 9px;\r\n  color: var(--settings-muted);\r\n  font: inherit;\r\n  font-size: 12px;\r\n  line-height: 18px;\r\n  white-space: nowrap;\r\n  background: var(--settings-inset);\r\n  border: 1px solid var(--settings-border);\r\n  border-radius: 7px;\r\n  cursor: pointer;\r\n  scroll-snap-align: start;\r\n}\r\n\r\n.settings-connection-host-tab:hover {\r\n  color: var(--settings-text);\r\n  background: var(--settings-hover);\r\n}\r\n\r\n.settings-connection-host-tab[aria-selected="true"] {\r\n  color: var(--settings-text);\r\n  font-weight: 600;\r\n  background: var(--settings-active);\r\n  border-color: var(--settings-border);\r\n}\r\n\r\n.settings-connection-table-header,\r\n.settings-connection-row {\r\n  display: grid;\r\n  grid-template-columns: minmax(160px, 1fr) minmax(92px, auto) 108px;\r\n  align-items: center;\r\n  min-width: 0;\r\n  gap: 10px;\r\n}\r\n\r\n.settings-connection-table-header {\r\n  min-height: 30px;\r\n  padding: 0 10px;\r\n  color: var(--settings-muted);\r\n  font-size: 10px;\r\n  font-weight: 600;\r\n  line-height: 16px;\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.06em;\r\n  background: transparent;\r\n  border-bottom: 1px solid var(--settings-divider);\r\n}\r\n\r\n.settings-connection-row {\r\n  min-height: 52px;\r\n  padding: 8px 10px;\r\n  cursor: pointer;\r\n  border-bottom: 1px solid var(--settings-divider);\r\n}\r\n\r\n.settings-connection-row:last-child {\r\n  border-bottom: 0;\r\n}\r\n\r\n.settings-connection-row:hover {\r\n  background: var(--settings-hover);\r\n}\r\n\r\n.settings-connection-row[data-connection-selected="true"] {\r\n  background: var(--settings-surface);\r\n}\r\n\r\n.settings-connection-row__identity,\r\n.settings-connection-inspector__identity {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  min-width: 0;\r\n  gap: 8px;\r\n  color: var(--settings-text);\r\n}\r\n\r\n.settings-connection-row__identity strong,\r\n.settings-connection-inspector__identity strong {\r\n  min-width: 0;\r\n  overflow-wrap: anywhere;\r\n  font-size: 12px;\r\n  font-weight: 500;\r\n  line-height: 18px;\r\n}\r\n\r\n.settings-connection-row__mark {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 24px;\r\n  height: 24px;\r\n  flex: none;\r\n  color: var(--settings-muted);\r\n  font-size: 10px;\r\n  font-weight: 700;\r\n  background: var(--settings-surface);\r\n  border-radius: 6px;\r\n}\r\n\r\n.settings-connection-row__mark--logo {\r\n  color: var(--settings-text);\r\n  background: transparent;\r\n}\r\n\r\n.settings-connection-row__mark--logo > img,\r\n.settings-connection-row__mark--logo > svg {\r\n  display: block;\r\n  max-width: 18px;\r\n  max-height: 18px;\r\n}\r\n\r\n.settings-connection-row__status {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  width: fit-content;\r\n  gap: 5px;\r\n  color: var(--settings-muted);\r\n  font-size: 11px;\r\n  font-weight: 500;\r\n  line-height: 18px;\r\n}\r\n\r\n.settings-connection-row__status::before {\r\n  width: 6px;\r\n  height: 6px;\r\n  flex: none;\r\n  content: "";\r\n  background: currentColor;\r\n  border-radius: 50%;\r\n}\r\n\r\n.settings-connection-row__status[data-connection-tone="ready"] {\r\n  color: var(--settings-success);\r\n}\r\n\r\n.settings-connection-row__status[data-connection-tone="checking"] {\r\n  color: var(--settings-warning);\r\n}\r\n\r\n.settings-connection-row__status[data-connection-tone="setup"] {\r\n  color: var(--settings-muted);\r\n}\r\n\r\n.settings-connection-row__status[data-connection-tone="setup"]::before {\r\n  background: transparent;\r\n  border: 1.5px solid currentColor;\r\n}\r\n\r\n.settings-connection-row__status[data-connection-tone="failed"] {\r\n  color: var(--settings-danger);\r\n}\r\n\r\n.settings-connection-row__action {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: flex-end;\r\n  min-width: 0;\r\n  gap: 4px;\r\n}\r\n\r\n.settings-connection-row__handle {\r\n  display: inline-flex;\r\n  flex: none;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 16px;\r\n  color: var(--settings-muted);\r\n  cursor: grab;\r\n  opacity: 0.6;\r\n}\r\n\r\n.settings-connection-row__handle:hover {\r\n  opacity: 1;\r\n}\r\n\r\n.settings-connection-row[draggable="true"] {\r\n  cursor: grab;\r\n}\r\n\r\n.settings-connection-row[data-connection-dragging="true"] {\r\n  opacity: 0.4;\r\n}\r\n\r\n.settings-connection-row[data-connection-drop-indicator="before"] {\r\n  box-shadow: inset 0 2px 0 0 var(--settings-focus);\r\n}\r\n\r\n.settings-connection-row[data-connection-drop-indicator="after"] {\r\n  box-shadow: inset 0 -2px 0 0 var(--settings-focus);\r\n}\r\n\r\n.settings-connection-row__group-toggle {\r\n  display: inline-flex;\r\n  flex: none;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 26px;\r\n  height: 26px;\r\n  color: var(--settings-muted);\r\n  background: transparent;\r\n  border: 0;\r\n  border-radius: 6px;\r\n  cursor: pointer;\r\n}\r\n\r\n.settings-connection-row__group-toggle:hover {\r\n  color: var(--settings-text);\r\n  background: var(--settings-hover);\r\n}\r\n\r\n.settings-connection-group-divider {\r\n  padding: 10px 12px 6px;\r\n  color: var(--settings-muted);\r\n  font-size: 10px;\r\n  font-weight: 600;\r\n  line-height: 16px;\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.06em;\r\n  /* No border-top here: the row immediately above already carries its own\r\n     border-bottom (it is no longer :last-child once this divider follows\r\n     it), so adding one here would double the separator line. */\r\n}\r\n\r\n.settings-connection-group-more[data-connection-drag-over="true"] {\r\n  background: rgb(51 156 255 / 8%);\r\n}\r\n\r\n.settings-connection-group-hint {\r\n  display: grid;\r\n  gap: 3px;\r\n  margin: 0 12px 12px;\r\n  padding: 14px 16px;\r\n  text-align: center;\r\n  border: 1.5px dashed var(--settings-border);\r\n  border-radius: 10px;\r\n}\r\n\r\n.settings-connection-group-more[data-connection-drag-over="true"] .settings-connection-group-hint {\r\n  border-color: var(--settings-focus);\r\n}\r\n\r\n.settings-connection-group-hint strong {\r\n  color: var(--settings-text);\r\n  font-size: 12.5px;\r\n  font-weight: 500;\r\n  line-height: 18px;\r\n}\r\n\r\n.settings-connection-group-hint span {\r\n  color: var(--settings-muted);\r\n  font-size: 12px;\r\n  line-height: 17px;\r\n}\r\n\r\n.settings-connection-group-reset {\r\n  display: flex;\r\n  width: 100%;\r\n  align-items: center;\r\n  gap: 6px;\r\n  padding: 10px 12px;\r\n  color: var(--settings-muted);\r\n  font: inherit;\r\n  font-size: 12px;\r\n  text-align: left;\r\n  background: transparent;\r\n  border: 0;\r\n  border-top: 1px solid var(--settings-divider);\r\n  cursor: pointer;\r\n}\r\n\r\n.settings-connection-group-reset:hover {\r\n  color: var(--settings-text);\r\n  background: var(--settings-hover);\r\n}\r\n\r\n.settings-connection-install-link {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 26px;\r\n  height: 26px;\r\n  color: var(--settings-focus);\r\n  text-decoration: none;\r\n  background: transparent;\r\n  border: 1px solid transparent;\r\n  border-radius: 7px;\r\n  opacity: 0;\r\n  transition: opacity 120ms ease;\r\n}\r\n\r\n.settings-connection-row:hover .settings-connection-install-link,\r\n.settings-connection-install-link:focus-visible {\r\n  opacity: 1;\r\n}\r\n\r\n.settings-connection-install-link:hover {\r\n  color: var(--settings-focus);\r\n  background: var(--settings-active);\r\n  border-color: var(--settings-border);\r\n}\r\n\r\n.settings-connection-view-error {\r\n  padding: 4px 7px;\r\n  color: var(--settings-danger);\r\n  font: inherit;\r\n  font-size: 11px;\r\n  line-height: 18px;\r\n  background: transparent;\r\n  border: 0;\r\n  border-radius: 6px;\r\n  cursor: pointer;\r\n}\r\n\r\n.settings-connection-view-error:hover {\r\n  color: var(--settings-danger);\r\n  background: var(--settings-danger-bg);\r\n}\r\n\r\n.settings-connection-inspector {\r\n  position: sticky;\r\n  top: 18px;\r\n}\r\n\r\n.settings-connection-inspector__header {\r\n  display: flex;\r\n  align-items: flex-start;\r\n  justify-content: space-between;\r\n  min-width: 0;\r\n  gap: 10px;\r\n  padding: 12px;\r\n  border-bottom: 1px solid var(--settings-divider);\r\n}\r\n\r\n.settings-connection-inspector__body {\r\n  display: grid;\r\n  min-width: 0;\r\n  gap: 12px;\r\n  padding: 12px;\r\n}\r\n\r\n.settings-connection-install-callout {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 14px;\r\n  padding: 14px;\r\n  background: var(--settings-surface);\r\n  border: 1px solid var(--settings-border);\r\n  border-radius: 10px;\r\n}\r\n\r\n.settings-connection-install-head {\r\n  display: flex;\r\n  align-items: flex-start;\r\n  gap: 12px;\r\n  min-width: 0;\r\n}\r\n\r\n.settings-connection-install-head > div {\r\n  min-width: 0;\r\n  flex: 1;\r\n}\r\n\r\n.settings-connection-install-callout__icon {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 32px;\r\n  height: 32px;\r\n  flex: none;\r\n  color: var(--settings-focus);\r\n  background: var(--settings-active);\r\n  border-radius: 8px;\r\n}\r\n\r\n.settings-connection-install-callout strong,\r\n.settings-connection-install-head strong,\r\n.settings-connection-error-summary strong,\r\n.settings-connection-state-summary strong {\r\n  display: block;\r\n  margin: 0 0 4px;\r\n  color: var(--settings-text);\r\n  font-size: 13px;\r\n  font-weight: 600;\r\n  line-height: 19px;\r\n}\r\n\r\n.settings-connection-install-callout p,\r\n.settings-connection-install-head p,\r\n.settings-connection-error-summary p,\r\n.settings-connection-state-summary p,\r\n.settings-connection-issue-note {\r\n  margin: 0;\r\n  color: var(--settings-muted);\r\n  font-size: 12px;\r\n  line-height: 18px;\r\n}\r\n\r\n.settings-connection-install-button {\r\n  width: 100%;\r\n}\r\n\r\n.settings-connection-error-summary {\r\n  padding: 13px 14px;\r\n  color: var(--settings-danger);\r\n  background: var(--settings-danger-bg);\r\n  border: 1px solid var(--settings-danger-border);\r\n  border-radius: 10px;\r\n}\r\n\r\n.settings-connection-error-metadata {\r\n  display: grid;\r\n  gap: 7px;\r\n  padding: 12px;\r\n  background: var(--settings-inset);\r\n  border: 1px solid var(--settings-border);\r\n  border-radius: 9px;\r\n}\r\n\r\n.settings-connection-detail-line {\r\n  display: grid;\r\n  grid-template-columns: 92px minmax(0, 1fr);\r\n  gap: 10px;\r\n  min-width: 0;\r\n  color: var(--settings-muted);\r\n  font-size: 10px;\r\n  line-height: 16px;\r\n}\r\n\r\n.settings-connection-detail-line code {\r\n  min-width: 0;\r\n  overflow-wrap: anywhere;\r\n  color: var(--settings-text);\r\n  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;\r\n  white-space: pre-wrap;\r\n}\r\n\r\n.settings-connection-error-log-header {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  gap: 10px;\r\n}\r\n\r\n.settings-connection-error-log-header strong {\r\n  color: var(--settings-text);\r\n  font-size: 11px;\r\n  font-weight: 600;\r\n}\r\n\r\n.settings-connection-error-log-header .settings-command-button {\r\n  min-height: 30px;\r\n  padding: 5px 9px;\r\n  font-size: 11px;\r\n}\r\n\r\n.settings-connection-stderr {\r\n  max-height: 220px;\r\n  min-width: 0;\r\n  margin: 0;\r\n  padding: 11px;\r\n  overflow: auto;\r\n  color: var(--settings-text);\r\n  font:\r\n    10px/16px ui-monospace,\r\n    "SFMono-Regular",\r\n    Consolas,\r\n    "Liberation Mono",\r\n    monospace;\r\n  white-space: pre-wrap;\r\n  overflow-wrap: anywhere;\r\n  background: var(--settings-inset);\r\n  border: 1px solid var(--settings-border);\r\n  border-radius: 9px;\r\n}\r\n\r\n.settings-connection-error-actions {\r\n  display: grid;\r\n  grid-template-columns: minmax(0, 1fr);\r\n  gap: 8px;\r\n}\r\n\r\n.settings-connection-error-actions .settings-command-button {\r\n  width: 100%;\r\n}\r\n\r\n.settings-connection-issue-note {\r\n  margin-top: -4px;\r\n}\r\n\r\n.settings-connection-state-summary {\r\n  padding: 14px;\r\n  background: var(--settings-surface);\r\n  border: 1px solid var(--settings-border);\r\n  border-radius: 10px;\r\n}\r\n\r\n.settings-empty {\r\n  display: flex;\r\n  align-items: center;\r\n  min-height: 72px;\r\n  padding: 12px 16px;\r\n}\r\n\r\n.settings-empty > div {\r\n  display: grid;\r\n  min-width: 0;\r\n  gap: 2px;\r\n}\r\n\r\n.settings-empty strong {\r\n  color: var(--settings-text);\r\n  font-size: 13px;\r\n  font-weight: 500;\r\n  line-height: 19px;\r\n}\r\n\r\n.settings-empty span {\r\n  color: var(--settings-muted);\r\n  font-size: 13px;\r\n  line-height: 19px;\r\n}\r\n\r\n.settings-about-panel {\r\n  display: grid;\r\n  max-width: 720px;\r\n  gap: 18px;\r\n  padding: 24px;\r\n  background: var(--settings-panel);\r\n  border: 1px solid var(--settings-border);\r\n  border-radius: 12px;\r\n}\r\n\r\n.settings-about-product {\r\n  color: var(--settings-text);\r\n  font-size: 24px;\r\n  font-weight: 700;\r\n  line-height: 32px;\r\n}\r\n\r\n.settings-about-tagline {\r\n  color: var(--settings-text);\r\n  font-size: 16px;\r\n  font-weight: 600;\r\n  line-height: 24px;\r\n}\r\n\r\n.settings-about-version-row {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 12px;\r\n  margin: 4px 0 8px;\r\n}\r\n\r\n.settings-about-version-badge {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  font-size: 13px;\r\n  font-weight: 600;\r\n  color: var(--settings-text);\r\n  background: var(--settings-surface);\r\n  border: 1px solid var(--settings-border);\r\n  padding: 4px 10px;\r\n  border-radius: 6px;\r\n}\r\n\r\n.settings-about-copy {\r\n  display: grid;\r\n  max-width: 660px;\r\n  gap: 12px;\r\n}\r\n\r\n.settings-about-copy p,\r\n.settings-about-repository p {\r\n  margin: 0;\r\n  color: var(--settings-muted);\r\n  font-size: 13px;\r\n  line-height: 21px;\r\n}\r\n\r\n.settings-about-star-callout {\r\n  margin: 2px 0;\r\n  color: var(--settings-warning);\r\n  font-size: 14px;\r\n  font-weight: 600;\r\n  line-height: 22px;\r\n}\r\n\r\n.settings-about-repository {\r\n  display: grid;\r\n  gap: 10px;\r\n  padding-top: 18px;\r\n  border-top: 1px solid var(--settings-divider);\r\n}\r\n\r\n.settings-about-repository-link {\r\n  display: flex;\r\n  align-items: center;\r\n  width: fit-content;\r\n  min-width: 0;\r\n  max-width: 100%;\r\n  gap: 8px;\r\n  color: var(--settings-focus);\r\n  font-size: 13px;\r\n  font-weight: 600;\r\n  text-decoration: none;\r\n}\r\n\r\n.settings-about-repository-link:hover {\r\n  text-decoration: underline;\r\n}\r\n\r\n.settings-about-repository-link code {\r\n  min-width: 0;\r\n  overflow: hidden;\r\n  color: var(--settings-muted);\r\n  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;\r\n  font-size: 11px;\r\n  font-weight: 400;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n}\r\n\r\n.settings-page-error {\r\n  padding: 16px;\r\n  color: var(--settings-text);\r\n  font-size: 13px;\r\n  background: var(--settings-panel);\r\n  border: 1px solid var(--settings-border);\r\n  border-radius: 20px;\r\n}\r\n\r\n.settings-update-metadata {\r\n  display: grid;\r\n  grid-template-columns: repeat(3, minmax(0, 1fr));\r\n  gap: 24px;\r\n  margin-bottom: 24px;\r\n  padding: 0 4px 20px;\r\n  border-bottom: 1px solid var(--settings-divider);\r\n}\r\n\r\n.settings-update-metadata__item {\r\n  display: grid;\r\n  min-width: 0;\r\n  gap: 4px;\r\n}\r\n\r\n.settings-update-metadata__item span {\r\n  color: var(--settings-muted);\r\n  font-size: 12px;\r\n  line-height: 18px;\r\n}\r\n\r\n.settings-update-metadata__item strong {\r\n  min-width: 0;\r\n  overflow-wrap: anywhere;\r\n  color: var(--settings-text);\r\n  font-size: 15px;\r\n  font-weight: 500;\r\n  line-height: 22px;\r\n}\r\n\r\n/* The only emphasis on this screen: a latest version newer than the installed one. */\r\n.settings-update-metadata__value--newer {\r\n  color: var(--settings-focus);\r\n}\r\n\r\n.settings-update-panel {\r\n  display: grid;\r\n  gap: 12px;\r\n  padding: 20px;\r\n  color: var(--settings-text);\r\n  background: var(--settings-panel);\r\n  border: 1px solid var(--settings-border);\r\n  border-radius: 8px;\r\n}\r\n\r\n.settings-update-panel__head {\r\n  display: flex;\r\n  align-items: center;\r\n  min-width: 0;\r\n  gap: 8px;\r\n}\r\n\r\n.settings-update-panel__head .codexhost-settings-icon {\r\n  color: var(--settings-muted);\r\n}\r\n\r\n.settings-update-panel[data-update-state="available"] .codexhost-settings-icon,\r\n.settings-update-panel[data-update-state="downloading"] .codexhost-settings-icon,\r\n.settings-update-panel[data-update-state="installing"] .codexhost-settings-icon,\r\n.settings-update-panel[data-update-state="restarting"] .codexhost-settings-icon {\r\n  color: var(--settings-focus);\r\n}\r\n\r\n.settings-update-panel[data-update-state="current"] .codexhost-settings-icon {\r\n  color: var(--settings-success);\r\n}\r\n\r\n.settings-update-panel[data-update-state="failed"] .codexhost-settings-icon,\r\n.settings-update-panel[data-update-state="error"] .codexhost-settings-icon {\r\n  color: var(--settings-danger);\r\n}\r\n\r\n.settings-update-panel__title {\r\n  min-width: 0;\r\n  overflow-wrap: anywhere;\r\n  color: var(--settings-text);\r\n  font-size: 14px;\r\n  font-weight: 600;\r\n  line-height: 22px;\r\n}\r\n\r\n.settings-update-summary,\r\n.settings-update-error {\r\n  margin: 0;\r\n  overflow-wrap: anywhere;\r\n  font-size: 13px;\r\n  line-height: 20px;\r\n}\r\n\r\n.settings-update-summary {\r\n  color: var(--settings-muted);\r\n}\r\n\r\n.settings-update-error {\r\n  color: var(--settings-danger);\r\n}\r\n\r\n.settings-update-progress {\r\n  width: 100%;\r\n  height: 8px;\r\n  accent-color: var(--settings-focus);\r\n}\r\n\r\n.settings-update-progress-detail {\r\n  color: var(--settings-muted);\r\n  font-size: 12px;\r\n  line-height: 18px;\r\n}\r\n\r\n/* Release notes scroll with the page; a scroller inside a scroller traps the wheel. */\r\n.settings-update-notes-section {\r\n  min-width: 0;\r\n  margin-top: 24px;\r\n  padding-top: 24px;\r\n  border-top: 1px solid var(--settings-divider);\r\n}\r\n\r\n.settings-update-notes-section:empty {\r\n  display: none;\r\n}\r\n\r\n.settings-update-notes {\r\n  display: grid;\r\n  min-width: 0;\r\n  gap: 12px;\r\n  color: var(--settings-muted);\r\n  font-size: 14px;\r\n  line-height: 22px;\r\n  overflow-wrap: anywhere;\r\n}\r\n\r\n.settings-update-notes > :first-child {\r\n  margin-top: 0;\r\n}\r\n\r\n.settings-update-notes > :last-child {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.settings-update-notes h1,\r\n.settings-update-notes h2,\r\n.settings-update-notes h3,\r\n.settings-update-notes h4,\r\n.settings-update-notes h5,\r\n.settings-update-notes h6 {\r\n  margin: 6px 0 0;\r\n  color: var(--settings-text);\r\n  font-weight: 600;\r\n}\r\n\r\n.settings-update-notes h1 {\r\n  font-size: 18px;\r\n  line-height: 26px;\r\n}\r\n\r\n.settings-update-notes h2 {\r\n  font-size: 17px;\r\n  line-height: 24px;\r\n}\r\n\r\n.settings-update-notes h3,\r\n.settings-update-notes h4,\r\n.settings-update-notes h5,\r\n.settings-update-notes h6 {\r\n  font-size: 14px;\r\n  line-height: 22px;\r\n}\r\n\r\n.settings-update-notes p,\r\n.settings-update-notes ul,\r\n.settings-update-notes ol,\r\n.settings-update-notes pre,\r\n.settings-update-notes blockquote {\r\n  margin: 0;\r\n}\r\n\r\n.settings-update-notes ul,\r\n.settings-update-notes ol {\r\n  padding-left: 24px;\r\n}\r\n\r\n.settings-update-notes li {\r\n  padding-left: 4px;\r\n}\r\n\r\n.settings-update-notes li::marker {\r\n  color: var(--settings-muted);\r\n  font-size: 0.85em;\r\n}\r\n\r\n.settings-update-notes li + li {\r\n  margin-top: 14px;\r\n}\r\n\r\n.settings-update-notes .release-note-translation {\r\n  display: block;\r\n  margin-top: 3px;\r\n  color: var(--settings-muted);\r\n  font-size: 13px;\r\n  line-height: 20px;\r\n}\r\n\r\n.settings-update-notes blockquote {\r\n  padding: 8px 12px;\r\n  color: var(--settings-muted);\r\n  border-left: 3px solid var(--settings-focus);\r\n  background: var(--settings-surface);\r\n}\r\n\r\n.settings-update-notes hr {\r\n  width: 100%;\r\n  margin: 2px 0;\r\n  border: 0;\r\n  border-top: 1px solid var(--settings-divider);\r\n}\r\n\r\n.settings-update-notes strong {\r\n  color: var(--settings-text);\r\n  font-weight: 600;\r\n}\r\n\r\n.settings-update-notes a {\r\n  color: var(--settings-focus);\r\n  text-decoration: none;\r\n}\r\n\r\n.settings-update-notes a:hover {\r\n  text-decoration: underline;\r\n}\r\n\r\n.settings-update-notes code {\r\n  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;\r\n  font-size: 12px;\r\n}\r\n\r\n.settings-update-notes :not(pre) > code {\r\n  padding: 1px 5px;\r\n  background: var(--settings-surface);\r\n  border-radius: 4px;\r\n}\r\n\r\n.settings-update-notes pre {\r\n  min-width: 0;\r\n  max-width: 100%;\r\n  padding: 10px 12px;\r\n  overflow-x: auto;\r\n  overflow-y: hidden;\r\n  background: var(--settings-inset);\r\n  border-radius: 6px;\r\n}\r\n\r\n.settings-update-notes pre code {\r\n  line-height: 18px;\r\n  white-space: pre-wrap;\r\n}\r\n\r\n/* Manual update sits directly under the status panel, not behind a disclosure:\r\n   automatic updates can fail for machine-local reasons and this is the way out. */\r\n.settings-update-controls {\r\n  display: grid;\r\n  min-width: 0;\r\n  gap: 10px;\r\n  margin-top: 24px;\r\n}\r\n\r\n.settings-update-manual-title {\r\n  color: var(--settings-text);\r\n  font-size: 15px;\r\n  font-weight: 600;\r\n  line-height: 22px;\r\n}\r\n\r\n.settings-update-manual {\r\n  display: grid;\r\n  min-width: 0;\r\n  gap: 8px;\r\n}\r\n\r\n.settings-update-manual[hidden] {\r\n  display: none;\r\n}\r\n\r\n.settings-update-manual-description {\r\n  margin: 0;\r\n  color: var(--settings-muted);\r\n  font-size: 12px;\r\n  line-height: 18px;\r\n}\r\n\r\n.settings-update-manual-description.is-fallback {\r\n  color: var(--settings-danger);\r\n}\r\n\r\n.settings-update-command {\r\n  display: flex;\r\n  align-items: stretch;\r\n  min-width: 0;\r\n  overflow: hidden;\r\n  border: 1px solid var(--settings-border);\r\n  border-radius: 6px;\r\n}\r\n\r\n.settings-update-command code {\r\n  min-width: 0;\r\n  flex: 1;\r\n  padding: 9px 12px;\r\n  overflow-x: auto;\r\n  color: var(--settings-text);\r\n  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;\r\n  font-size: 12px;\r\n  line-height: 20px;\r\n  white-space: nowrap;\r\n}\r\n\r\n.settings-update-command__copy {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  flex: none;\r\n  gap: 6px;\r\n  padding: 0 12px;\r\n  color: var(--settings-muted);\r\n  font-size: 12px;\r\n  background: transparent;\r\n  border: 0;\r\n  border-left: 1px solid var(--settings-border);\r\n  cursor: pointer;\r\n}\r\n\r\n.settings-update-command__copy:hover {\r\n  color: var(--settings-text);\r\n  background: var(--settings-hover);\r\n}\r\n\r\n.settings-update-command__copy:focus-visible {\r\n  outline: 2px solid var(--settings-focus);\r\n  outline-offset: -2px;\r\n}\r\n\r\n.settings-update-actions {\r\n  display: flex;\r\n  align-items: center;\r\n  min-width: 0;\r\n  gap: 12px;\r\n  flex-wrap: wrap;\r\n}\r\n\r\n.settings-command-button,\r\n.settings-update-link {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex: none;\r\n  width: max-content;\r\n  max-width: 100%;\r\n  min-height: 30px;\r\n  gap: 6px;\r\n  padding: 5px 10px;\r\n  white-space: nowrap;\r\n  color: var(--settings-primary-text);\r\n  font: inherit;\r\n  font-size: 12px;\r\n  text-decoration: none;\r\n  background: var(--settings-primary);\r\n  border: 1px solid var(--settings-primary);\r\n  border-radius: 7px;\r\n  cursor: pointer;\r\n}\r\n\r\n.settings-command-button--secondary,\r\n.settings-update-link {\r\n  color: var(--settings-text);\r\n  background: var(--settings-panel);\r\n  border-color: var(--settings-border);\r\n}\r\n\r\n.settings-command-button:hover:not(:disabled) {\r\n  background: var(--settings-primary-hover);\r\n  border-color: var(--settings-primary-hover);\r\n}\r\n\r\n.settings-command-button--secondary:hover:not(:disabled),\r\n.settings-update-link:hover {\r\n  background: var(--settings-hover);\r\n  border-color: var(--settings-border);\r\n}\r\n\r\n.settings-command-button--danger {\r\n  color: #f87171;\r\n}\r\n\r\n.settings-command-button--danger:hover:not(:disabled) {\r\n  color: #fecaca;\r\n  background: rgb(127 29 29 / 24%);\r\n  border-color: rgb(248 113 113 / 45%);\r\n}\r\n\r\n.settings-command-button:disabled {\r\n  cursor: default;\r\n  opacity: 0.45;\r\n}\r\n\r\n.settings-command-button:disabled,\r\n.settings-command-button[aria-disabled="true"] {\r\n  opacity: 0.55;\r\n  cursor: not-allowed;\r\n  filter: none;\r\n}\r\n\r\n.settings-command-button:focus-visible,\r\n.settings-update-link:focus-visible {\r\n  outline: 2px solid var(--settings-focus);\r\n  outline-offset: 2px;\r\n}\r\n\r\n.codexhost-settings-icon {\r\n  display: block;\r\n  flex: none;\r\n  stroke: currentColor;\r\n}\r\n\r\n@media (max-width: 720px) {\r\n  .codexhost-settings-dialog {\r\n    width: calc(100vw - 16px);\r\n    height: calc(100vh - 16px);\r\n    border-radius: 10px;\r\n  }\r\n\r\n  .settings-layout {\r\n    grid-template-columns: minmax(0, 1fr);\r\n    grid-template-rows: auto minmax(0, 1fr);\r\n  }\r\n\r\n  .settings-session-import-row {\r\n    grid-template-columns: minmax(0, 1fr);\r\n  }\r\n\r\n  .settings-session-import-row__action {\r\n    align-items: flex-start;\r\n  }\r\n\r\n  .settings-sidebar {\r\n    border-right: 0;\r\n    border-bottom: 1px solid var(--settings-border);\r\n  }\r\n\r\n  .settings-header {\r\n    height: 56px;\r\n    padding-inline: 14px;\r\n  }\r\n\r\n  .settings-sidebar {\r\n    padding-top: 20px;\r\n  }\r\n\r\n  .settings-nav {\r\n    flex: none;\r\n    flex-direction: row;\r\n    gap: 4px;\r\n    padding: 7px 8px 8px;\r\n    overflow-x: auto;\r\n    overflow-y: hidden;\r\n  }\r\n\r\n  .settings-nav-section-label {\r\n    display: none;\r\n  }\r\n\r\n  .settings-nav-button {\r\n    width: auto;\r\n    min-width: max-content;\r\n    min-height: 34px;\r\n    grid-template-columns: 16px auto;\r\n    border-radius: 10px;\r\n  }\r\n\r\n  .settings-nav-star-link {\r\n    margin-top: 0;\r\n  }\r\n\r\n  .settings-page__content {\r\n    width: calc(100% - 40px);\r\n  }\r\n\r\n  .settings-page__content {\r\n    padding-top: 32px;\r\n    padding-bottom: 32px;\r\n  }\r\n\r\n  .settings-section-label {\r\n    padding-bottom: 20px;\r\n    font-size: 20px;\r\n    line-height: 26px;\r\n  }\r\n\r\n  .settings-update-metadata {\r\n    grid-template-columns: minmax(0, 1fr);\r\n    gap: 16px;\r\n  }\r\n\r\n  .settings-status-row {\r\n    grid-template-columns: minmax(0, 1fr) auto;\r\n    gap: 16px;\r\n  }\r\n\r\n  .settings-account-header,\r\n  .settings-connection-page-header {\r\n    flex-direction: column;\r\n  }\r\n\r\n  .settings-account-header > .settings-command-button,\r\n  .settings-connection-page-header > .settings-command-button {\r\n    width: 100%;\r\n  }\r\n\r\n  .settings-connections-layout {\r\n    grid-template-columns: minmax(0, 1fr);\r\n  }\r\n\r\n  .settings-connection-inspector {\r\n    position: static;\r\n  }\r\n\r\n  .settings-status-row__detail {\r\n    grid-column: 1 / -1;\r\n    margin: -8px 0 0 58px;\r\n  }\r\n}\r\n\r\n@media (forced-colors: active) {\r\n  :host {\r\n    --settings-bg: Canvas;\r\n    --settings-sidebar: Canvas;\r\n    --settings-panel: Canvas;\r\n    --settings-surface: Canvas;\r\n    --settings-surface-hover: Highlight;\r\n    --settings-inset: Canvas;\r\n    --settings-text: CanvasText;\r\n    --settings-muted: GrayText;\r\n    --settings-subtle: GrayText;\r\n    --settings-border: ButtonBorder;\r\n    --settings-divider: ButtonBorder;\r\n    --settings-hover: Highlight;\r\n    --settings-active: Highlight;\r\n    --settings-focus: Highlight;\r\n    --settings-primary: ButtonFace;\r\n    --settings-primary-hover: Highlight;\r\n    --settings-primary-text: ButtonText;\r\n    --settings-warning: CanvasText;\r\n    --settings-warning-bg: Canvas;\r\n    --settings-warning-border: ButtonBorder;\r\n    --settings-danger: CanvasText;\r\n    --settings-danger-bg: Canvas;\r\n    --settings-danger-border: ButtonBorder;\r\n    --settings-success: CanvasText;\r\n  }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  *,\r\n  *::before,\r\n  *::after {\r\n    scroll-behavior: auto !important;\r\n    transition-duration: 0s !important;\r\n  }\r\n}\r\n\r\n/* Harness Mix: Model Configuration & One-click Install */\r\n.settings-model-config-panel {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 12px;\r\n  padding: 14px;\r\n  margin-top: 14px;\r\n  border-radius: 8px;\r\n  background: var(--settings-surface);\r\n  border: 1px solid var(--settings-border);\r\n}\r\n\r\n.settings-model-config-head {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 4px;\r\n}\r\n\r\n.settings-model-config-title {\r\n  font-size: 13px;\r\n  font-weight: 600;\r\n  color: var(--settings-text);\r\n}\r\n\r\n.settings-model-config-description {\r\n  font-size: 11px;\r\n  color: var(--settings-muted);\r\n  margin: 0;\r\n}\r\n\r\n.settings-model-config-loading,\r\n.settings-model-config-empty {\r\n  font-size: 12px;\r\n  color: var(--settings-muted);\r\n  padding: 8px 0;\r\n}\r\n\r\n.settings-model-config-form {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 12px;\r\n  margin-top: 4px;\r\n}\r\n\r\n.settings-model-config-field {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 6px;\r\n}\r\n\r\n.settings-model-config-label {\r\n  font-size: 11px;\r\n  font-weight: 600;\r\n  color: var(--settings-muted);\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.5px;\r\n}\r\n\r\n.settings-model-config-select {\r\n  height: 32px;\r\n  padding: 0 10px;\r\n  border-radius: 6px;\r\n  border: 1px solid var(--settings-border);\r\n  background: var(--settings-panel);\r\n  color: var(--settings-text);\r\n  font-size: 12px;\r\n  outline: none;\r\n}\r\n\r\n.settings-model-config-select:focus {\r\n  border-color: var(--settings-primary);\r\n}\r\n\r\n.settings-model-config-actions {\r\n  display: flex;\r\n  align-items: center;\r\n  flex-wrap: wrap;\r\n  gap: 8px;\r\n  margin-top: 6px;\r\n}\r\n\r\n.settings-model-config-feedback {\r\n  font-size: 12px;\r\n  font-weight: 500;\r\n}\r\n\r\n.settings-feedback-success {\r\n  color: var(--settings-success);\r\n}\r\n\r\n.settings-feedback-error {\r\n  color: var(--settings-danger);\r\n}\r\n\r\n.settings-feedback-info {\r\n  color: var(--settings-primary);\r\n}\r\n\r\n.settings-install-command-box {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 6px;\r\n  min-width: 0;\r\n  margin: 0;\r\n}\r\n\r\n.settings-install-command-label {\r\n  font-size: 11px;\r\n  font-weight: 600;\r\n  color: var(--settings-muted);\r\n}\r\n\r\n.settings-install-command-row {\r\n  display: flex;\r\n  align-items: center;\r\n  background: var(--settings-inset);\r\n  padding: 8px 12px;\r\n  border-radius: 6px;\r\n  border: 1px solid var(--settings-border);\r\n  min-width: 0;\r\n  overflow-x: auto;\r\n}\r\n\r\n.settings-install-command-row code {\r\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;\r\n  font-size: 12px;\r\n  line-height: 18px;\r\n  color: var(--settings-text);\r\n  user-select: all;\r\n  white-space: pre-wrap;\r\n  word-break: break-all;\r\n}\r\n\r\n.settings-install-actions {\r\n  display: grid;\r\n  grid-template-columns: minmax(0, 1fr);\r\n  gap: 8px;\r\n  margin-top: 4px;\r\n}\r\n\r\n.settings-install-actions .settings-command-button {\r\n  width: 100%;\r\n  justify-content: center;\r\n}\r\n\r\n.settings-install-feedback {\r\n  font-size: 12px;\r\n  font-weight: 500;\r\n  line-height: 18px;\r\n  margin-top: 2px;\r\n  overflow-wrap: anywhere;\r\n}\r\n\r\n.settings-install-manual-card {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 8px;\r\n  background: var(--settings-inset);\r\n  padding: 12px 14px;\r\n  border-radius: 8px;\r\n  border: 1px solid var(--settings-border);\r\n  margin-top: 6px;\r\n  margin-bottom: 4px;\r\n}\r\n\r\n.settings-install-manual-badge {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  font-size: 11px;\r\n  font-weight: 600;\r\n  color: var(--settings-accent, #10a37f);\r\n  background: var(--settings-accent-subtle, rgba(16, 163, 127, 0.1));\r\n  padding: 2px 8px;\r\n  border-radius: 4px;\r\n  width: fit-content;\r\n}\r\n\r\n.settings-install-manual-notice {\r\n  font-size: 12px;\r\n  line-height: 18px;\r\n  color: var(--settings-text);\r\n  margin: 0;\r\n}\r\n\r\n.settings-install-steps {\r\n  margin: 0;\r\n  padding-left: 18px;\r\n  font-size: 12px;\r\n  line-height: 20px;\r\n  color: var(--settings-muted);\r\n}\r\n\r\n.settings-install-steps li {\r\n  margin-bottom: 2px;\r\n}\r\n';
+  var shell_default = ':host {\r\n  --settings-bg: light-dark(#ffffff, #202020);\r\n  --settings-sidebar: light-dark(#f7f7f8, #191919);\r\n  --settings-panel: light-dark(#ffffff, #232323);\r\n  --settings-surface: light-dark(#f6f6f6, #292929);\r\n  --settings-surface-hover: light-dark(#eeeeee, #303030);\r\n  --settings-inset: light-dark(#f3f3f3, #161616);\r\n  --settings-text: light-dark(#0d0d0d, #ececec);\r\n  --settings-muted: light-dark(#676767, #a3a3a3);\r\n  --settings-subtle: light-dark(#8a8a8a, #777777);\r\n  --settings-border: light-dark(rgb(13 13 13 / 9%), rgb(255 255 255 / 9%));\r\n  --settings-divider: light-dark(rgb(13 13 13 / 7%), rgb(255 255 255 / 7%));\r\n  --settings-hover: light-dark(rgb(13 13 13 / 5%), rgb(255 255 255 / 7%));\r\n  --settings-active: light-dark(rgb(13 13 13 / 7%), rgb(255 255 255 / 9%));\r\n  --settings-focus: light-dark(#0b75d1, #66aaf9);\r\n  --settings-primary: light-dark(#171717, #f4f4f4);\r\n  --settings-primary-hover: light-dark(#2f2f2f, #ffffff);\r\n  --settings-primary-text: light-dark(#ffffff, #171717);\r\n  --settings-warning: light-dark(#8a5500, #f5c96a);\r\n  --settings-warning-bg: light-dark(#fff8e6, rgb(245 201 106 / 8%));\r\n  --settings-warning-border: light-dark(#ead8a8, rgb(245 201 106 / 24%));\r\n  --settings-danger: light-dark(#b42318, #f87171);\r\n  --settings-danger-bg: light-dark(#fff1f0, rgb(239 68 68 / 8%));\r\n  --settings-danger-border: light-dark(#f3c7c3, rgb(239 68 68 / 22%));\r\n  --settings-success: light-dark(#16784a, #4ade80);\r\n  color: var(--settings-text);\r\n  color-scheme: inherit;\r\n  font:\r\n    13px/1.5 system-ui,\r\n    -apple-system,\r\n    BlinkMacSystemFont,\r\n    "Segoe UI",\r\n    sans-serif;\r\n  letter-spacing: 0;\r\n}\r\n\r\n*,\r\n*::before,\r\n*::after {\r\n  box-sizing: border-box;\r\n  letter-spacing: 0;\r\n}\r\n\r\nbutton,\r\ninput,\r\nselect {\r\n  font: inherit;\r\n}\r\n\r\nbutton {\r\n  color: inherit;\r\n}\r\n\r\n[hidden] {\r\n  display: none !important;\r\n}\r\n\r\n.settings-visually-hidden {\r\n  position: absolute;\r\n  width: 1px;\r\n  height: 1px;\r\n  padding: 0;\r\n  margin: -1px;\r\n  overflow: hidden;\r\n  clip-path: inset(50%);\r\n  white-space: nowrap;\r\n  border: 0;\r\n}\r\n\r\n.codexhost-settings-dialog {\r\n  width: min(1120px, calc(100vw - 32px));\r\n  height: min(780px, calc(100vh - 32px));\r\n  max-width: none;\r\n  max-height: none;\r\n  margin: auto;\r\n  padding: 0;\r\n  overflow: hidden;\r\n  color: var(--settings-text);\r\n  background: var(--settings-bg);\r\n  border: 1px solid var(--settings-border);\r\n  border-radius: 14px;\r\n  box-shadow: light-dark(0 16px 42px rgb(0 0 0 / 16%), 0 20px 54px rgb(0 0 0 / 42%));\r\n}\r\n\r\n.codexhost-settings-dialog::backdrop {\r\n  background: light-dark(rgb(0 0 0 / 24%), rgb(0 0 0 / 56%));\r\n  backdrop-filter: blur(1px);\r\n}\r\n\r\n.settings-frame,\r\n.settings-layout {\r\n  width: 100%;\r\n  height: 100%;\r\n  min-width: 0;\r\n  min-height: 0;\r\n}\r\n\r\n.settings-frame {\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n\r\n.settings-layout {\r\n  flex: 1;\r\n  display: grid;\r\n  grid-template-columns: 184px minmax(0, 1fr);\r\n  background: var(--settings-bg);\r\n}\r\n\r\n.settings-sidebar {\r\n  display: flex;\r\n  min-width: 0;\r\n  min-height: 0;\r\n  flex-direction: column;\r\n  overflow: hidden;\r\n  background: var(--settings-sidebar);\r\n  border-right: 1px solid var(--settings-border);\r\n  padding-top: 14px;\r\n}\r\n\r\n.settings-header {\r\n  display: flex;\r\n  align-items: center;\r\n  min-width: 0;\r\n  height: 48px;\r\n  flex: none;\r\n  padding: 0 12px;\r\n  border-bottom: 1px solid var(--settings-border);\r\n}\r\n\r\n.settings-header-actions {\r\n  display: flex;\r\n  align-items: center;\r\n  flex: none;\r\n  gap: 12px;\r\n  margin-left: auto;\r\n}\r\n\r\n.settings-brand {\r\n  display: flex;\r\n  align-items: center;\r\n  min-width: 0;\r\n  gap: 7px;\r\n}\r\n\r\n.settings-brand__mark {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 26px;\r\n  height: 26px;\r\n  flex: none;\r\n  color: var(--settings-text);\r\n}\r\n\r\n.settings-brand__mark .codexhost-settings-icon {\r\n  width: 24px;\r\n  height: 24px;\r\n  object-fit: contain;\r\n}\r\n\r\n.settings-brand__copy {\r\n  display: flex;\r\n  min-width: 0;\r\n  align-items: baseline;\r\n  gap: 0;\r\n  line-height: 20px;\r\n}\r\n\r\n.settings-brand__name {\r\n  overflow: hidden;\r\n  color: var(--settings-text);\r\n  font-size: 13px;\r\n  font-weight: 600;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n}\r\n\r\n.settings-brand__title {\r\n  margin-left: 8px;\r\n  padding-left: 8px;\r\n  color: var(--settings-muted);\r\n  font-size: 13px;\r\n  font-weight: 400;\r\n  border-left: 1px solid var(--settings-border);\r\n}\r\n\r\n.settings-nav {\r\n  display: flex;\r\n  min-width: 0;\r\n  min-height: 0;\r\n  flex: 1;\r\n  flex-direction: column;\r\n  gap: 2px;\r\n  padding: 0 7px 10px;\r\n  overflow-y: auto;\r\n}\r\n\r\n.settings-nav-section-label {\r\n  min-height: 24px;\r\n  padding: 4px 9px 2px;\r\n  color: var(--settings-subtle);\r\n  font-size: 11px;\r\n  font-weight: 600;\r\n  line-height: 18px;\r\n}\r\n\r\n.settings-nav-section-label:not(:first-child) {\r\n  margin-top: 8px;\r\n}\r\n\r\n.settings-nav-button {\r\n  display: grid;\r\n  grid-template-columns: 16px minmax(0, 1fr);\r\n  align-items: center;\r\n  width: 100%;\r\n  position: relative;\r\n  min-height: 34px;\r\n  flex: none;\r\n  gap: 9px;\r\n  padding: 6px 9px;\r\n  color: var(--settings-text);\r\n  font-size: 13px;\r\n  line-height: 20px;\r\n  text-align: left;\r\n  background: transparent;\r\n  border: 0;\r\n  border-radius: 8px;\r\n  cursor: pointer;\r\n}\r\n\r\n.settings-nav-button .codexhost-settings-icon {\r\n  width: 16px;\r\n  height: 16px;\r\n  opacity: 0.9;\r\n}\r\n\r\n.settings-nav-button:hover {\r\n  background: var(--settings-hover);\r\n}\r\n\r\n.settings-nav-button[aria-current="page"] {\r\n  background: var(--settings-active);\r\n  color: var(--settings-text);\r\n  font-weight: 500;\r\n}\r\n\r\n.settings-nav-button span {\r\n  min-width: 0;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n}\r\n\r\n.settings-nav-star-link {\r\n  margin-top: 0;\r\n  color: var(--settings-text);\r\n  text-decoration: none;\r\n}\r\n\r\n.settings-nav-star-link .codexhost-settings-icon {\r\n  color: var(--settings-warning);\r\n}\r\n\r\n.settings-nav-star-link:hover {\r\n  color: var(--settings-warning);\r\n  background: var(--settings-warning-bg);\r\n}\r\n\r\n.settings-icon-button {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 28px;\r\n  height: 28px;\r\n  flex: none;\r\n  padding: 0;\r\n  color: var(--settings-muted);\r\n  background: transparent;\r\n  border: 0;\r\n  border-radius: 8px;\r\n  cursor: pointer;\r\n}\r\n\r\n.settings-icon-button:hover {\r\n  color: var(--settings-text);\r\n  background: var(--settings-hover);\r\n}\r\n\r\n.settings-icon-button:focus-visible,\r\n.settings-nav-button:focus-visible {\r\n  outline: 2px solid var(--settings-focus);\r\n  outline-offset: 1px;\r\n}\r\n\r\n.settings-page {\r\n  display: block;\r\n  position: relative;\r\n  min-width: 0;\r\n  min-height: 0;\r\n  overflow-y: auto;\r\n  background: var(--settings-bg);\r\n  scrollbar-gutter: stable;\r\n}\r\n\r\n.settings-page__content {\r\n  width: min(930px, calc(100% - 80px));\r\n  margin-inline: auto;\r\n}\r\n\r\n.settings-page__content {\r\n  min-width: 0;\r\n  padding: 28px 0 36px;\r\n}\r\n\r\n.settings-section-label {\r\n  min-height: auto;\r\n  margin: 0;\r\n  padding: 0 0 18px;\r\n  color: var(--settings-text);\r\n  font-size: 18px;\r\n  font-weight: 600;\r\n  line-height: 26px;\r\n}\r\n\r\n.settings-status-list,\r\n.settings-empty {\r\n  overflow: hidden;\r\n  background: var(--settings-panel);\r\n}\r\n\r\n.settings-status-row {\r\n  display: grid;\r\n  grid-template-columns: minmax(170px, 1fr) auto minmax(280px, 1.45fr);\r\n  position: relative;\r\n  align-items: center;\r\n  min-height: 72px;\r\n  gap: 20px;\r\n  padding: 12px 0;\r\n}\r\n\r\n.settings-status-row:not(:last-child)::after {\r\n  content: "";\r\n  position: absolute;\r\n  right: 0;\r\n  bottom: 0;\r\n  left: 0;\r\n  height: 1px;\r\n  background: var(--settings-divider);\r\n}\r\n\r\n.settings-status-row__identity {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  min-width: 0;\r\n  color: var(--settings-text);\r\n  gap: 10px;\r\n  font-size: 14px;\r\n  font-weight: 500;\r\n  line-height: 22px;\r\n}\r\n\r\n.settings-status-row__icon {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 36px;\r\n  height: 36px;\r\n  flex: none;\r\n  color: var(--settings-muted);\r\n  background: var(--settings-surface);\r\n  border-radius: 50%;\r\n}\r\n\r\n.settings-status-badge {\r\n  flex: none;\r\n  padding: 3px 8px;\r\n  color: var(--settings-muted);\r\n  font-size: 11px;\r\n  font-weight: 500;\r\n  line-height: 18px;\r\n  background: var(--settings-surface);\r\n  border: 1px solid var(--settings-border);\r\n  border-radius: 6px;\r\n}\r\n\r\n.settings-status-row__detail {\r\n  min-width: 0;\r\n  color: var(--settings-muted);\r\n  font-size: 13px;\r\n  line-height: 20px;\r\n}\r\n\r\n.settings-page-description {\r\n  max-width: 760px;\r\n  margin: -10px 0 20px;\r\n  color: var(--settings-muted);\r\n  font-size: 12px;\r\n  line-height: 18px;\r\n}\r\n\r\n.settings-session-import-header {\r\n  display: flex;\r\n  align-items: flex-start;\r\n  justify-content: space-between;\r\n  gap: 24px;\r\n}\r\n\r\n.settings-session-import-header .settings-section-label {\r\n  min-width: 0;\r\n}\r\n\r\n.settings-session-import-harness {\r\n  display: flex;\r\n  align-items: center;\r\n  min-width: 0;\r\n  gap: 12px;\r\n  margin: -12px 0 16px;\r\n  color: var(--settings-muted);\r\n  font-size: 13px;\r\n}\r\n\r\n.settings-session-import-harness > span {\r\n  flex: none;\r\n}\r\n\r\n.settings-session-import-harness__options {\r\n  display: flex;\r\n  align-items: center;\r\n  min-width: 0;\r\n  flex: 1;\r\n  gap: 6px;\r\n  overflow-x: auto;\r\n  overflow-y: hidden;\r\n  scrollbar-width: none;\r\n}\r\n\r\n.settings-session-import-harness__options::-webkit-scrollbar {\r\n  display: none;\r\n}\r\n\r\n.settings-session-import-harness__option {\r\n  min-height: 32px;\r\n  flex: none;\r\n  padding: 6px 10px;\r\n  color: var(--settings-muted);\r\n  font: inherit;\r\n  font-size: 12px;\r\n  white-space: nowrap;\r\n  background: rgb(255 255 255 / 4%);\r\n  border: 1px solid var(--settings-border);\r\n  border-radius: 6px;\r\n  cursor: pointer;\r\n}\r\n\r\n.settings-session-import-harness__option[aria-pressed="true"] {\r\n  color: var(--settings-text);\r\n  background: var(--settings-active);\r\n  border-color: rgb(51 156 255 / 50%);\r\n}\r\n\r\n.settings-session-import-harness__option:disabled {\r\n  opacity: 0.38;\r\n  cursor: not-allowed;\r\n}\r\n\r\n.settings-session-import-harness__option:focus-visible {\r\n  outline: 2px solid var(--settings-focus);\r\n  outline-offset: 2px;\r\n}\r\n\r\n.settings-session-import-harness + .settings-page-description {\r\n  margin-top: 0;\r\n  margin-bottom: 4px;\r\n}\r\n\r\n.settings-session-import-availability-note {\r\n  margin-top: 0;\r\n}\r\n\r\n.settings-session-import-search,\r\n.settings-session-import-pagination {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  align-items: center;\r\n  gap: 10px;\r\n  margin: 16px 0;\r\n}\r\n\r\n.settings-session-import-search input {\r\n  flex: 1;\r\n  min-width: 160px;\r\n}\r\n\r\n.settings-session-import-search input,\r\n.settings-session-import-pagination select {\r\n  min-height: 36px;\r\n  padding: 6px 10px;\r\n  color: var(--settings-text);\r\n  background: var(--settings-bg);\r\n  border: 1px solid var(--settings-border);\r\n  border-radius: 6px;\r\n}\r\n\r\n.settings-session-import-search input:focus-visible,\r\n.settings-session-import-pagination select:focus-visible {\r\n  outline: 2px solid var(--settings-focus);\r\n  outline-offset: 2px;\r\n}\r\n\r\n.settings-session-import-pagination {\r\n  color: var(--settings-muted);\r\n  font-size: 12px;\r\n}\r\n\r\n.settings-session-import-pagination label {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n}\r\n\r\n.settings-session-import-pagination > span {\r\n  flex: 1;\r\n  min-width: 130px;\r\n}\r\n\r\n.settings-session-import-pagination__navigation {\r\n  display: flex;\r\n  gap: 8px;\r\n  margin-left: auto;\r\n}\r\n\r\n.settings-session-import-content,\r\n.settings-session-import-list {\r\n  display: grid;\r\n  gap: 10px;\r\n}\r\n\r\n.settings-session-import-status {\r\n  display: flex;\r\n  align-items: center;\r\n  min-height: 64px;\r\n  gap: 12px;\r\n  padding: 16px;\r\n  color: var(--settings-muted);\r\n  background: var(--settings-panel);\r\n  border: 1px solid var(--settings-border);\r\n  border-radius: 8px;\r\n}\r\n\r\n.settings-session-import-status.is-error {\r\n  color: #ef4444;\r\n}\r\n\r\n.settings-session-import-recovery {\r\n  display: grid;\r\n  justify-items: start;\r\n  gap: 14px;\r\n  padding: 16px;\r\n  background: var(--settings-panel);\r\n  border: 1px solid var(--settings-border);\r\n  border-radius: 8px;\r\n}\r\n\r\n.settings-session-import-recovery:focus-visible {\r\n  outline: 2px solid var(--settings-focus);\r\n  outline-offset: 2px;\r\n}\r\n\r\n.settings-session-import-recovery__copy {\r\n  display: grid;\r\n  gap: 4px;\r\n}\r\n\r\n.settings-session-import-recovery__copy strong {\r\n  color: var(--settings-text);\r\n  font-size: 14px;\r\n}\r\n\r\n.settings-session-import-recovery__copy p {\r\n  margin: 0;\r\n  color: var(--settings-muted);\r\n  font-size: 13px;\r\n  line-height: 20px;\r\n}\r\n\r\n.settings-session-import-recovery__path {\r\n  display: flex;\r\n  align-items: stretch;\r\n  width: 100%;\r\n  min-width: 0;\r\n  overflow: hidden;\r\n  border: 1px solid var(--settings-border);\r\n  border-radius: 6px;\r\n}\r\n\r\n.settings-session-import-recovery__path code {\r\n  min-width: 0;\r\n  flex: 1;\r\n  padding: 8px 10px;\r\n  overflow-x: auto;\r\n  color: var(--settings-text);\r\n  font-size: 12px;\r\n  line-height: 20px;\r\n  white-space: nowrap;\r\n}\r\n\r\n.settings-session-import-recovery__path .settings-command-button {\r\n  min-height: 0;\r\n  flex: none;\r\n  border-width: 0 0 0 1px;\r\n  border-radius: 0;\r\n}\r\n\r\n.settings-session-import-row {\r\n  display: grid;\r\n  grid-template-columns: minmax(0, 1fr) auto;\r\n  align-items: center;\r\n  gap: 20px;\r\n  min-width: 0;\r\n  padding: 16px;\r\n  background: var(--settings-panel);\r\n  border: 1px solid var(--settings-border);\r\n  border-radius: 8px;\r\n}\r\n\r\n.settings-session-import-row__copy {\r\n  display: grid;\r\n  min-width: 0;\r\n  gap: 4px;\r\n}\r\n\r\n.settings-session-import-row__copy strong {\r\n  overflow: hidden;\r\n  color: var(--settings-text);\r\n  font-size: 14px;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n}\r\n\r\n.settings-session-import-row__copy span,\r\n.settings-session-import-row__cwd {\r\n  overflow: hidden;\r\n  color: var(--settings-muted);\r\n  font-size: 12px;\r\n  line-height: 18px;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n}\r\n\r\n.settings-session-import-row__cwd {\r\n  display: block;\r\n  min-width: 0;\r\n  background: transparent;\r\n}\r\n\r\n.settings-session-import-row__action {\r\n  display: flex;\r\n  align-items: flex-end;\r\n  flex-direction: column;\r\n  gap: 8px;\r\n}\r\n\r\n.settings-session-import-running {\r\n  color: var(--settings-muted);\r\n  font-size: 12px;\r\n}\r\n\r\n.settings-preference-row {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  gap: 32px;\r\n  min-height: 88px;\r\n  padding: 18px 0;\r\n  border-top: 1px solid var(--settings-divider);\r\n  border-bottom: 1px solid var(--settings-divider);\r\n}\r\n\r\n.settings-preference-row__copy {\r\n  display: flex;\r\n  flex: 1 1 auto;\r\n  flex-direction: column;\r\n  min-width: 0;\r\n  gap: 5px;\r\n}\r\n\r\n.settings-preference-row__copy strong {\r\n  color: var(--settings-text);\r\n  font-size: 15px;\r\n  font-weight: 600;\r\n  line-height: 22px;\r\n}\r\n\r\n.settings-preference-row__copy span {\r\n  max-width: 680px;\r\n  color: var(--settings-muted);\r\n  font-size: 13px;\r\n  line-height: 20px;\r\n}\r\n\r\n.settings-preference-switch {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  width: 42px;\r\n  height: 24px;\r\n  flex: none;\r\n  padding: 2px;\r\n  border: 0;\r\n  border-radius: 999px;\r\n  background: var(--settings-surface-hover);\r\n  cursor: pointer;\r\n  transition: background 120ms ease;\r\n}\r\n\r\n.settings-preference-switch[aria-checked="true"] {\r\n  justify-content: flex-end;\r\n  background: var(--settings-focus);\r\n}\r\n\r\n.settings-preference-switch:focus-visible {\r\n  outline: 2px solid var(--settings-focus);\r\n  outline-offset: 2px;\r\n}\r\n\r\n.settings-preference-switch__thumb {\r\n  width: 20px;\r\n  height: 20px;\r\n  border-radius: 50%;\r\n  background: var(--settings-primary-text);\r\n  box-shadow: 0 1px 3px rgb(0 0 0 / 24%);\r\n}\r\n\r\n.settings-connection-page-header {\r\n  display: flex;\r\n  align-items: flex-start;\r\n  justify-content: space-between;\r\n  gap: 18px;\r\n  margin-bottom: 18px;\r\n}\r\n\r\n.settings-connection-page-header .settings-section-label {\r\n  padding-bottom: 0;\r\n}\r\n\r\n.settings-connection-page-header .settings-page-description {\r\n  margin: 5px 0 0;\r\n}\r\n\r\n.settings-connections-content,\r\n.settings-connections-layout,\r\n.settings-connection-list,\r\n.settings-connection-rows {\r\n  min-width: 0;\r\n}\r\n\r\n.settings-connections-layout {\r\n  display: grid;\r\n  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.85fr);\r\n  align-items: start;\r\n  gap: 18px;\r\n}\r\n\r\n.settings-connection-list,\r\n.settings-connection-inspector {\r\n  overflow: hidden;\r\n  background: var(--settings-panel);\r\n  border: 1px solid var(--settings-border);\r\n  border-radius: 10px;\r\n}\r\n\r\n.settings-connection-host-strip {\r\n  display: grid;\r\n  grid-template-columns: 30px minmax(0, 1fr) 30px;\r\n  align-items: center;\r\n  min-width: 0;\r\n  gap: 5px;\r\n  padding: 9px 10px;\r\n  border-bottom: 1px solid var(--settings-divider);\r\n}\r\n\r\n.settings-connection-host-scroll {\r\n  display: none;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 30px;\r\n  height: 34px;\r\n  padding: 0;\r\n  color: var(--settings-muted);\r\n  background: var(--settings-inset);\r\n  border: 1px solid var(--settings-border);\r\n  border-radius: 8px;\r\n  cursor: pointer;\r\n}\r\n\r\n.settings-connection-host-strip[data-connection-host-overflow="true"]\r\n  .settings-connection-host-scroll {\r\n  display: inline-flex;\r\n}\r\n\r\n.settings-connection-host-strip:not([data-connection-host-overflow="true"]) {\r\n  grid-template-columns: minmax(0, 1fr);\r\n}\r\n\r\n.settings-connection-host-scroll:hover:not(:disabled) {\r\n  color: var(--settings-text);\r\n  background: var(--settings-hover);\r\n}\r\n\r\n.settings-connection-host-scroll:disabled {\r\n  cursor: default;\r\n  opacity: 0.35;\r\n}\r\n\r\n.settings-connection-host-scroll:focus-visible,\r\n.settings-connection-host-tab:focus-visible,\r\n.settings-connection-row:focus-visible,\r\n.settings-connection-install-link:focus-visible,\r\n.settings-connection-view-error:focus-visible {\r\n  outline: 2px solid var(--settings-focus);\r\n  outline-offset: 1px;\r\n}\r\n\r\n.settings-connection-host-tabs {\r\n  display: flex;\r\n  align-items: center;\r\n  min-width: 0;\r\n  gap: 6px;\r\n  overflow-x: auto;\r\n  overflow-y: hidden;\r\n  overscroll-behavior-x: contain;\r\n  scrollbar-width: none;\r\n  scroll-behavior: smooth;\r\n  scroll-snap-type: x proximity;\r\n  touch-action: pan-x;\r\n}\r\n\r\n.settings-connection-host-tabs::-webkit-scrollbar {\r\n  display: none;\r\n}\r\n\r\n.settings-connection-host-tab {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  height: 30px;\r\n  min-width: max-content;\r\n  flex: none;\r\n  padding: 0 9px;\r\n  color: var(--settings-muted);\r\n  font: inherit;\r\n  font-size: 12px;\r\n  line-height: 18px;\r\n  white-space: nowrap;\r\n  background: var(--settings-inset);\r\n  border: 1px solid var(--settings-border);\r\n  border-radius: 7px;\r\n  cursor: pointer;\r\n  scroll-snap-align: start;\r\n}\r\n\r\n.settings-connection-host-tab:hover {\r\n  color: var(--settings-text);\r\n  background: var(--settings-hover);\r\n}\r\n\r\n.settings-connection-host-tab[aria-selected="true"] {\r\n  color: var(--settings-text);\r\n  font-weight: 600;\r\n  background: var(--settings-active);\r\n  border-color: var(--settings-border);\r\n}\r\n\r\n.settings-connection-table-header,\r\n.settings-connection-row {\r\n  display: grid;\r\n  grid-template-columns: minmax(160px, 1fr) minmax(92px, auto) 108px;\r\n  align-items: center;\r\n  min-width: 0;\r\n  gap: 10px;\r\n}\r\n\r\n.settings-connection-table-header {\r\n  min-height: 30px;\r\n  padding: 0 10px;\r\n  color: var(--settings-muted);\r\n  font-size: 10px;\r\n  font-weight: 600;\r\n  line-height: 16px;\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.06em;\r\n  background: transparent;\r\n  border-bottom: 1px solid var(--settings-divider);\r\n}\r\n\r\n.settings-connection-row {\r\n  min-height: 52px;\r\n  padding: 8px 10px;\r\n  cursor: pointer;\r\n  border-bottom: 1px solid var(--settings-divider);\r\n}\r\n\r\n.settings-connection-row:last-child {\r\n  border-bottom: 0;\r\n}\r\n\r\n.settings-connection-row:hover {\r\n  background: var(--settings-hover);\r\n}\r\n\r\n.settings-connection-row[data-connection-selected="true"] {\r\n  background: var(--settings-surface);\r\n}\r\n\r\n.settings-connection-row__identity,\r\n.settings-connection-inspector__identity {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  min-width: 0;\r\n  gap: 8px;\r\n  color: var(--settings-text);\r\n}\r\n\r\n.settings-connection-row__identity strong,\r\n.settings-connection-inspector__identity strong {\r\n  min-width: 0;\r\n  overflow-wrap: anywhere;\r\n  font-size: 12px;\r\n  font-weight: 500;\r\n  line-height: 18px;\r\n}\r\n\r\n.settings-connection-row__mark {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 24px;\r\n  height: 24px;\r\n  flex: none;\r\n  color: var(--settings-muted);\r\n  font-size: 10px;\r\n  font-weight: 700;\r\n  background: var(--settings-surface);\r\n  border-radius: 6px;\r\n}\r\n\r\n.settings-connection-row__mark--logo {\r\n  color: var(--settings-text);\r\n  background: transparent;\r\n}\r\n\r\n.settings-connection-row__mark--logo > img,\r\n.settings-connection-row__mark--logo > svg {\r\n  display: block;\r\n  max-width: 18px;\r\n  max-height: 18px;\r\n}\r\n\r\n.settings-connection-row__status {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  width: fit-content;\r\n  gap: 5px;\r\n  color: var(--settings-muted);\r\n  font-size: 11px;\r\n  font-weight: 500;\r\n  line-height: 18px;\r\n}\r\n\r\n.settings-connection-row__status::before {\r\n  width: 6px;\r\n  height: 6px;\r\n  flex: none;\r\n  content: "";\r\n  background: currentColor;\r\n  border-radius: 50%;\r\n}\r\n\r\n.settings-connection-row__status[data-connection-tone="ready"] {\r\n  color: var(--settings-success);\r\n}\r\n\r\n.settings-connection-row__status[data-connection-tone="checking"] {\r\n  color: var(--settings-warning);\r\n}\r\n\r\n.settings-connection-row__status[data-connection-tone="setup"] {\r\n  color: var(--settings-muted);\r\n}\r\n\r\n.settings-connection-row__status[data-connection-tone="setup"]::before {\r\n  background: transparent;\r\n  border: 1.5px solid currentColor;\r\n}\r\n\r\n.settings-connection-row__status[data-connection-tone="failed"] {\r\n  color: var(--settings-danger);\r\n}\r\n\r\n.settings-connection-row__action {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: flex-end;\r\n  min-width: 0;\r\n  gap: 4px;\r\n}\r\n\r\n.settings-connection-row__handle {\r\n  display: inline-flex;\r\n  flex: none;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 16px;\r\n  color: var(--settings-muted);\r\n  cursor: grab;\r\n  opacity: 0.6;\r\n}\r\n\r\n.settings-connection-row__handle:hover {\r\n  opacity: 1;\r\n}\r\n\r\n.settings-connection-row[draggable="true"] {\r\n  cursor: grab;\r\n}\r\n\r\n.settings-connection-row[data-connection-dragging="true"] {\r\n  opacity: 0.4;\r\n}\r\n\r\n.settings-connection-row[data-connection-drop-indicator="before"] {\r\n  box-shadow: inset 0 2px 0 0 var(--settings-focus);\r\n}\r\n\r\n.settings-connection-row[data-connection-drop-indicator="after"] {\r\n  box-shadow: inset 0 -2px 0 0 var(--settings-focus);\r\n}\r\n\r\n.settings-connection-row__group-toggle {\r\n  display: inline-flex;\r\n  flex: none;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 26px;\r\n  height: 26px;\r\n  color: var(--settings-muted);\r\n  background: transparent;\r\n  border: 0;\r\n  border-radius: 6px;\r\n  cursor: pointer;\r\n}\r\n\r\n.settings-connection-row__group-toggle:hover {\r\n  color: var(--settings-text);\r\n  background: var(--settings-hover);\r\n}\r\n\r\n.settings-connection-group-divider {\r\n  padding: 10px 12px 6px;\r\n  color: var(--settings-muted);\r\n  font-size: 10px;\r\n  font-weight: 600;\r\n  line-height: 16px;\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.06em;\r\n  /* No border-top here: the row immediately above already carries its own\r\n     border-bottom (it is no longer :last-child once this divider follows\r\n     it), so adding one here would double the separator line. */\r\n}\r\n\r\n.settings-connection-group-more[data-connection-drag-over="true"] {\r\n  background: rgb(51 156 255 / 8%);\r\n}\r\n\r\n.settings-connection-group-hint {\r\n  display: grid;\r\n  gap: 3px;\r\n  margin: 0 12px 12px;\r\n  padding: 14px 16px;\r\n  text-align: center;\r\n  border: 1.5px dashed var(--settings-border);\r\n  border-radius: 10px;\r\n}\r\n\r\n.settings-connection-group-more[data-connection-drag-over="true"] .settings-connection-group-hint {\r\n  border-color: var(--settings-focus);\r\n}\r\n\r\n.settings-connection-group-hint strong {\r\n  color: var(--settings-text);\r\n  font-size: 12.5px;\r\n  font-weight: 500;\r\n  line-height: 18px;\r\n}\r\n\r\n.settings-connection-group-hint span {\r\n  color: var(--settings-muted);\r\n  font-size: 12px;\r\n  line-height: 17px;\r\n}\r\n\r\n.settings-connection-group-reset {\r\n  display: flex;\r\n  width: 100%;\r\n  align-items: center;\r\n  gap: 6px;\r\n  padding: 10px 12px;\r\n  color: var(--settings-muted);\r\n  font: inherit;\r\n  font-size: 12px;\r\n  text-align: left;\r\n  background: transparent;\r\n  border: 0;\r\n  border-top: 1px solid var(--settings-divider);\r\n  cursor: pointer;\r\n}\r\n\r\n.settings-connection-group-reset:hover {\r\n  color: var(--settings-text);\r\n  background: var(--settings-hover);\r\n}\r\n\r\n.settings-connection-install-link {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 26px;\r\n  height: 26px;\r\n  color: var(--settings-focus);\r\n  text-decoration: none;\r\n  background: transparent;\r\n  border: 1px solid transparent;\r\n  border-radius: 7px;\r\n  opacity: 0;\r\n  transition: opacity 120ms ease;\r\n}\r\n\r\n.settings-connection-row:hover .settings-connection-install-link,\r\n.settings-connection-install-link:focus-visible {\r\n  opacity: 1;\r\n}\r\n\r\n.settings-connection-install-link:hover {\r\n  color: var(--settings-focus);\r\n  background: var(--settings-active);\r\n  border-color: var(--settings-border);\r\n}\r\n\r\n.settings-connection-view-error {\r\n  padding: 4px 7px;\r\n  color: var(--settings-danger);\r\n  font: inherit;\r\n  font-size: 11px;\r\n  line-height: 18px;\r\n  background: transparent;\r\n  border: 0;\r\n  border-radius: 6px;\r\n  cursor: pointer;\r\n}\r\n\r\n.settings-connection-view-error:hover {\r\n  color: var(--settings-danger);\r\n  background: var(--settings-danger-bg);\r\n}\r\n\r\n.settings-connection-inspector {\r\n  position: sticky;\r\n  top: 18px;\r\n}\r\n\r\n.settings-connection-inspector__header {\r\n  display: flex;\r\n  align-items: flex-start;\r\n  justify-content: space-between;\r\n  min-width: 0;\r\n  gap: 10px;\r\n  padding: 12px;\r\n  border-bottom: 1px solid var(--settings-divider);\r\n}\r\n\r\n.settings-connection-inspector__body {\r\n  display: grid;\r\n  min-width: 0;\r\n  gap: 12px;\r\n  padding: 12px;\r\n}\r\n\r\n.settings-connection-install-callout {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 14px;\r\n  padding: 14px;\r\n  background: var(--settings-surface);\r\n  border: 1px solid var(--settings-border);\r\n  border-radius: 10px;\r\n}\r\n\r\n.settings-connection-install-head {\r\n  display: flex;\r\n  align-items: flex-start;\r\n  gap: 12px;\r\n  min-width: 0;\r\n}\r\n\r\n.settings-connection-install-head > div {\r\n  min-width: 0;\r\n  flex: 1;\r\n}\r\n\r\n.settings-connection-install-callout__icon {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 32px;\r\n  height: 32px;\r\n  flex: none;\r\n  color: var(--settings-focus);\r\n  background: var(--settings-active);\r\n  border-radius: 8px;\r\n}\r\n\r\n.settings-connection-install-callout strong,\r\n.settings-connection-install-head strong,\r\n.settings-connection-error-summary strong,\r\n.settings-connection-state-summary strong {\r\n  display: block;\r\n  margin: 0 0 4px;\r\n  color: var(--settings-text);\r\n  font-size: 13px;\r\n  font-weight: 600;\r\n  line-height: 19px;\r\n}\r\n\r\n.settings-connection-install-callout p,\r\n.settings-connection-install-head p,\r\n.settings-connection-error-summary p,\r\n.settings-connection-state-summary p,\r\n.settings-connection-issue-note {\r\n  margin: 0;\r\n  color: var(--settings-muted);\r\n  font-size: 12px;\r\n  line-height: 18px;\r\n}\r\n\r\n.settings-connection-install-button {\r\n  width: 100%;\r\n}\r\n\r\n.settings-connection-error-summary {\r\n  padding: 13px 14px;\r\n  color: var(--settings-danger);\r\n  background: var(--settings-danger-bg);\r\n  border: 1px solid var(--settings-danger-border);\r\n  border-radius: 10px;\r\n}\r\n\r\n.settings-connection-error-metadata {\r\n  display: grid;\r\n  gap: 7px;\r\n  padding: 12px;\r\n  background: var(--settings-inset);\r\n  border: 1px solid var(--settings-border);\r\n  border-radius: 9px;\r\n}\r\n\r\n.settings-connection-detail-line {\r\n  display: grid;\r\n  grid-template-columns: 92px minmax(0, 1fr);\r\n  gap: 10px;\r\n  min-width: 0;\r\n  color: var(--settings-muted);\r\n  font-size: 10px;\r\n  line-height: 16px;\r\n}\r\n\r\n.settings-connection-detail-line code {\r\n  min-width: 0;\r\n  overflow-wrap: anywhere;\r\n  color: var(--settings-text);\r\n  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;\r\n  white-space: pre-wrap;\r\n}\r\n\r\n.settings-connection-error-log-header {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  gap: 10px;\r\n}\r\n\r\n.settings-connection-error-log-header strong {\r\n  color: var(--settings-text);\r\n  font-size: 11px;\r\n  font-weight: 600;\r\n}\r\n\r\n.settings-connection-error-log-header .settings-command-button {\r\n  min-height: 30px;\r\n  padding: 5px 9px;\r\n  font-size: 11px;\r\n}\r\n\r\n.settings-connection-stderr {\r\n  max-height: 220px;\r\n  min-width: 0;\r\n  margin: 0;\r\n  padding: 11px;\r\n  overflow: auto;\r\n  color: var(--settings-text);\r\n  font:\r\n    10px/16px ui-monospace,\r\n    "SFMono-Regular",\r\n    Consolas,\r\n    "Liberation Mono",\r\n    monospace;\r\n  white-space: pre-wrap;\r\n  overflow-wrap: anywhere;\r\n  background: var(--settings-inset);\r\n  border: 1px solid var(--settings-border);\r\n  border-radius: 9px;\r\n}\r\n\r\n.settings-connection-error-actions {\r\n  display: grid;\r\n  grid-template-columns: minmax(0, 1fr);\r\n  gap: 8px;\r\n}\r\n\r\n.settings-connection-error-actions .settings-command-button {\r\n  width: 100%;\r\n}\r\n\r\n.settings-connection-issue-note {\r\n  margin-top: -4px;\r\n}\r\n\r\n.settings-connection-state-summary {\r\n  padding: 14px;\r\n  background: var(--settings-surface);\r\n  border: 1px solid var(--settings-border);\r\n  border-radius: 10px;\r\n}\r\n\r\n.settings-empty {\r\n  display: flex;\r\n  align-items: center;\r\n  min-height: 72px;\r\n  padding: 12px 16px;\r\n}\r\n\r\n.settings-empty > div {\r\n  display: grid;\r\n  min-width: 0;\r\n  gap: 2px;\r\n}\r\n\r\n.settings-empty strong {\r\n  color: var(--settings-text);\r\n  font-size: 13px;\r\n  font-weight: 500;\r\n  line-height: 19px;\r\n}\r\n\r\n.settings-empty span {\r\n  color: var(--settings-muted);\r\n  font-size: 13px;\r\n  line-height: 19px;\r\n}\r\n\r\n.settings-about-panel {\r\n  display: grid;\r\n  max-width: 720px;\r\n  gap: 18px;\r\n  padding: 24px;\r\n  background: var(--settings-panel);\r\n  border: 1px solid var(--settings-border);\r\n  border-radius: 12px;\r\n}\r\n\r\n.settings-about-product {\r\n  color: var(--settings-text);\r\n  font-size: 24px;\r\n  font-weight: 700;\r\n  line-height: 32px;\r\n}\r\n\r\n.settings-about-tagline {\r\n  color: var(--settings-text);\r\n  font-size: 16px;\r\n  font-weight: 600;\r\n  line-height: 24px;\r\n}\r\n\r\n.settings-about-version-row {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 12px;\r\n  margin: 4px 0 8px;\r\n}\r\n\r\n.settings-about-version-badge {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  font-size: 13px;\r\n  font-weight: 600;\r\n  color: var(--settings-text);\r\n  background: var(--settings-surface);\r\n  border: 1px solid var(--settings-border);\r\n  padding: 4px 10px;\r\n  border-radius: 6px;\r\n}\r\n\r\n.settings-about-copy {\r\n  display: grid;\r\n  max-width: 660px;\r\n  gap: 12px;\r\n}\r\n\r\n.settings-about-copy p,\r\n.settings-about-repository p {\r\n  margin: 0;\r\n  color: var(--settings-muted);\r\n  font-size: 13px;\r\n  line-height: 21px;\r\n}\r\n\r\n.settings-about-star-callout {\r\n  margin: 2px 0;\r\n  color: var(--settings-warning);\r\n  font-size: 14px;\r\n  font-weight: 600;\r\n  line-height: 22px;\r\n}\r\n\r\n.settings-about-repository {\r\n  display: grid;\r\n  gap: 10px;\r\n  padding-top: 18px;\r\n  border-top: 1px solid var(--settings-divider);\r\n}\r\n\r\n.settings-about-repository-link {\r\n  display: flex;\r\n  align-items: center;\r\n  width: fit-content;\r\n  min-width: 0;\r\n  max-width: 100%;\r\n  gap: 8px;\r\n  color: var(--settings-focus);\r\n  font-size: 13px;\r\n  font-weight: 600;\r\n  text-decoration: none;\r\n}\r\n\r\n.settings-about-repository-link:hover {\r\n  text-decoration: underline;\r\n}\r\n\r\n.settings-about-repository-link code {\r\n  min-width: 0;\r\n  overflow: hidden;\r\n  color: var(--settings-muted);\r\n  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;\r\n  font-size: 11px;\r\n  font-weight: 400;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n}\r\n\r\n.settings-page-error {\r\n  padding: 16px;\r\n  color: var(--settings-text);\r\n  font-size: 13px;\r\n  background: var(--settings-panel);\r\n  border: 1px solid var(--settings-border);\r\n  border-radius: 20px;\r\n}\r\n\r\n.settings-update-metadata {\r\n  display: grid;\r\n  grid-template-columns: repeat(3, minmax(0, 1fr));\r\n  gap: 24px;\r\n  margin-bottom: 24px;\r\n  padding: 0 4px 20px;\r\n  border-bottom: 1px solid var(--settings-divider);\r\n}\r\n\r\n.settings-update-metadata__item {\r\n  display: grid;\r\n  min-width: 0;\r\n  gap: 4px;\r\n}\r\n\r\n.settings-update-metadata__item span {\r\n  color: var(--settings-muted);\r\n  font-size: 12px;\r\n  line-height: 18px;\r\n}\r\n\r\n.settings-update-metadata__item strong {\r\n  min-width: 0;\r\n  overflow-wrap: anywhere;\r\n  color: var(--settings-text);\r\n  font-size: 15px;\r\n  font-weight: 500;\r\n  line-height: 22px;\r\n}\r\n\r\n/* The only emphasis on this screen: a latest version newer than the installed one. */\r\n.settings-update-metadata__value--newer {\r\n  color: var(--settings-focus);\r\n}\r\n\r\n.settings-update-panel {\r\n  display: grid;\r\n  gap: 12px;\r\n  padding: 20px;\r\n  color: var(--settings-text);\r\n  background: var(--settings-panel);\r\n  border: 1px solid var(--settings-border);\r\n  border-radius: 8px;\r\n}\r\n\r\n.settings-update-panel__head {\r\n  display: flex;\r\n  align-items: center;\r\n  min-width: 0;\r\n  gap: 8px;\r\n}\r\n\r\n.settings-update-panel__head .codexhost-settings-icon {\r\n  color: var(--settings-muted);\r\n}\r\n\r\n.settings-update-panel[data-update-state="available"] .codexhost-settings-icon,\r\n.settings-update-panel[data-update-state="downloading"] .codexhost-settings-icon,\r\n.settings-update-panel[data-update-state="installing"] .codexhost-settings-icon,\r\n.settings-update-panel[data-update-state="restarting"] .codexhost-settings-icon {\r\n  color: var(--settings-focus);\r\n}\r\n\r\n.settings-update-panel[data-update-state="current"] .codexhost-settings-icon {\r\n  color: var(--settings-success);\r\n}\r\n\r\n.settings-update-panel[data-update-state="failed"] .codexhost-settings-icon,\r\n.settings-update-panel[data-update-state="error"] .codexhost-settings-icon {\r\n  color: var(--settings-danger);\r\n}\r\n\r\n.settings-update-panel__title {\r\n  min-width: 0;\r\n  overflow-wrap: anywhere;\r\n  color: var(--settings-text);\r\n  font-size: 14px;\r\n  font-weight: 600;\r\n  line-height: 22px;\r\n}\r\n\r\n.settings-update-summary,\r\n.settings-update-error {\r\n  margin: 0;\r\n  overflow-wrap: anywhere;\r\n  font-size: 13px;\r\n  line-height: 20px;\r\n}\r\n\r\n.settings-update-summary {\r\n  color: var(--settings-muted);\r\n}\r\n\r\n.settings-update-error {\r\n  color: var(--settings-danger);\r\n}\r\n\r\n.settings-update-progress {\r\n  width: 100%;\r\n  height: 8px;\r\n  accent-color: var(--settings-focus);\r\n}\r\n\r\n.settings-update-progress-detail {\r\n  color: var(--settings-muted);\r\n  font-size: 12px;\r\n  line-height: 18px;\r\n}\r\n\r\n/* Release notes scroll with the page; a scroller inside a scroller traps the wheel. */\r\n.settings-update-notes-section {\r\n  min-width: 0;\r\n  margin-top: 24px;\r\n  padding-top: 24px;\r\n  border-top: 1px solid var(--settings-divider);\r\n}\r\n\r\n.settings-update-notes-section:empty {\r\n  display: none;\r\n}\r\n\r\n.settings-update-notes {\r\n  display: grid;\r\n  min-width: 0;\r\n  gap: 12px;\r\n  color: var(--settings-muted);\r\n  font-size: 14px;\r\n  line-height: 22px;\r\n  overflow-wrap: anywhere;\r\n}\r\n\r\n.settings-update-notes > :first-child {\r\n  margin-top: 0;\r\n}\r\n\r\n.settings-update-notes > :last-child {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.settings-update-notes h1,\r\n.settings-update-notes h2,\r\n.settings-update-notes h3,\r\n.settings-update-notes h4,\r\n.settings-update-notes h5,\r\n.settings-update-notes h6 {\r\n  margin: 6px 0 0;\r\n  color: var(--settings-text);\r\n  font-weight: 600;\r\n}\r\n\r\n.settings-update-notes h1 {\r\n  font-size: 18px;\r\n  line-height: 26px;\r\n}\r\n\r\n.settings-update-notes h2 {\r\n  font-size: 17px;\r\n  line-height: 24px;\r\n}\r\n\r\n.settings-update-notes h3,\r\n.settings-update-notes h4,\r\n.settings-update-notes h5,\r\n.settings-update-notes h6 {\r\n  font-size: 14px;\r\n  line-height: 22px;\r\n}\r\n\r\n.settings-update-notes p,\r\n.settings-update-notes ul,\r\n.settings-update-notes ol,\r\n.settings-update-notes pre,\r\n.settings-update-notes blockquote {\r\n  margin: 0;\r\n}\r\n\r\n.settings-update-notes ul,\r\n.settings-update-notes ol {\r\n  padding-left: 24px;\r\n}\r\n\r\n.settings-update-notes li {\r\n  padding-left: 4px;\r\n}\r\n\r\n.settings-update-notes li::marker {\r\n  color: var(--settings-muted);\r\n  font-size: 0.85em;\r\n}\r\n\r\n.settings-update-notes li + li {\r\n  margin-top: 14px;\r\n}\r\n\r\n.settings-update-notes .release-note-translation {\r\n  display: block;\r\n  margin-top: 3px;\r\n  color: var(--settings-muted);\r\n  font-size: 13px;\r\n  line-height: 20px;\r\n}\r\n\r\n.settings-update-notes blockquote {\r\n  padding: 8px 12px;\r\n  color: var(--settings-muted);\r\n  border-left: 3px solid var(--settings-focus);\r\n  background: var(--settings-surface);\r\n}\r\n\r\n.settings-update-notes hr {\r\n  width: 100%;\r\n  margin: 2px 0;\r\n  border: 0;\r\n  border-top: 1px solid var(--settings-divider);\r\n}\r\n\r\n.settings-update-notes strong {\r\n  color: var(--settings-text);\r\n  font-weight: 600;\r\n}\r\n\r\n.settings-update-notes a {\r\n  color: var(--settings-focus);\r\n  text-decoration: none;\r\n}\r\n\r\n.settings-update-notes a:hover {\r\n  text-decoration: underline;\r\n}\r\n\r\n.settings-update-notes code {\r\n  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;\r\n  font-size: 12px;\r\n}\r\n\r\n.settings-update-notes :not(pre) > code {\r\n  padding: 1px 5px;\r\n  background: var(--settings-surface);\r\n  border-radius: 4px;\r\n}\r\n\r\n.settings-update-notes pre {\r\n  min-width: 0;\r\n  max-width: 100%;\r\n  padding: 10px 12px;\r\n  overflow-x: auto;\r\n  overflow-y: hidden;\r\n  background: var(--settings-inset);\r\n  border-radius: 6px;\r\n}\r\n\r\n.settings-update-notes pre code {\r\n  line-height: 18px;\r\n  white-space: pre-wrap;\r\n}\r\n\r\n/* Manual update sits directly under the status panel, not behind a disclosure:\r\n   automatic updates can fail for machine-local reasons and this is the way out. */\r\n.settings-update-controls {\r\n  display: grid;\r\n  min-width: 0;\r\n  gap: 10px;\r\n  margin-top: 24px;\r\n}\r\n\r\n.settings-update-manual-title {\r\n  color: var(--settings-text);\r\n  font-size: 15px;\r\n  font-weight: 600;\r\n  line-height: 22px;\r\n}\r\n\r\n.settings-update-manual {\r\n  display: grid;\r\n  min-width: 0;\r\n  gap: 8px;\r\n}\r\n\r\n.settings-update-manual[hidden] {\r\n  display: none;\r\n}\r\n\r\n.settings-update-manual-description {\r\n  margin: 0;\r\n  color: var(--settings-muted);\r\n  font-size: 12px;\r\n  line-height: 18px;\r\n}\r\n\r\n.settings-update-manual-description.is-fallback {\r\n  color: var(--settings-danger);\r\n}\r\n\r\n.settings-update-command {\r\n  display: flex;\r\n  align-items: stretch;\r\n  min-width: 0;\r\n  overflow: hidden;\r\n  border: 1px solid var(--settings-border);\r\n  border-radius: 6px;\r\n}\r\n\r\n.settings-update-command code {\r\n  min-width: 0;\r\n  flex: 1;\r\n  padding: 9px 12px;\r\n  overflow-x: auto;\r\n  color: var(--settings-text);\r\n  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;\r\n  font-size: 12px;\r\n  line-height: 20px;\r\n  white-space: nowrap;\r\n}\r\n\r\n.settings-update-command__copy {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  flex: none;\r\n  gap: 6px;\r\n  padding: 0 12px;\r\n  color: var(--settings-muted);\r\n  font-size: 12px;\r\n  background: transparent;\r\n  border: 0;\r\n  border-left: 1px solid var(--settings-border);\r\n  cursor: pointer;\r\n}\r\n\r\n.settings-update-command__copy:hover {\r\n  color: var(--settings-text);\r\n  background: var(--settings-hover);\r\n}\r\n\r\n.settings-update-command__copy:focus-visible {\r\n  outline: 2px solid var(--settings-focus);\r\n  outline-offset: -2px;\r\n}\r\n\r\n.settings-update-actions {\r\n  display: flex;\r\n  align-items: center;\r\n  min-width: 0;\r\n  gap: 12px;\r\n  flex-wrap: wrap;\r\n}\r\n\r\n.settings-command-button,\r\n.settings-update-link {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex: none;\r\n  width: max-content;\r\n  max-width: 100%;\r\n  min-height: 30px;\r\n  gap: 6px;\r\n  padding: 5px 10px;\r\n  white-space: nowrap;\r\n  color: var(--settings-primary-text);\r\n  font: inherit;\r\n  font-size: 12px;\r\n  text-decoration: none;\r\n  background: var(--settings-primary);\r\n  border: 1px solid var(--settings-primary);\r\n  border-radius: 7px;\r\n  cursor: pointer;\r\n}\r\n\r\n.settings-command-button--secondary,\r\n.settings-update-link {\r\n  color: var(--settings-text);\r\n  background: var(--settings-panel);\r\n  border-color: var(--settings-border);\r\n}\r\n\r\n.settings-command-button:hover:not(:disabled) {\r\n  background: var(--settings-primary-hover);\r\n  border-color: var(--settings-primary-hover);\r\n}\r\n\r\n.settings-command-button--secondary:hover:not(:disabled),\r\n.settings-update-link:hover {\r\n  background: var(--settings-hover);\r\n  border-color: var(--settings-border);\r\n}\r\n\r\n.settings-command-button--danger {\r\n  color: #f87171;\r\n}\r\n\r\n.settings-command-button--danger:hover:not(:disabled) {\r\n  color: #fecaca;\r\n  background: rgb(127 29 29 / 24%);\r\n  border-color: rgb(248 113 113 / 45%);\r\n}\r\n\r\n.settings-command-button:disabled {\r\n  cursor: default;\r\n  opacity: 0.45;\r\n}\r\n\r\n.settings-command-button:disabled,\r\n.settings-command-button[aria-disabled="true"] {\r\n  opacity: 0.55;\r\n  cursor: not-allowed;\r\n  filter: none;\r\n}\r\n\r\n.settings-command-button:focus-visible,\r\n.settings-update-link:focus-visible {\r\n  outline: 2px solid var(--settings-focus);\r\n  outline-offset: 2px;\r\n}\r\n\r\n.codexhost-settings-icon {\r\n  display: block;\r\n  flex: none;\r\n  stroke: currentColor;\r\n}\r\n\r\n@media (max-width: 720px) {\r\n  .codexhost-settings-dialog {\r\n    width: calc(100vw - 16px);\r\n    height: calc(100vh - 16px);\r\n    border-radius: 10px;\r\n  }\r\n\r\n  .settings-layout {\r\n    grid-template-columns: minmax(0, 1fr);\r\n    grid-template-rows: auto minmax(0, 1fr);\r\n  }\r\n\r\n  .settings-session-import-row {\r\n    grid-template-columns: minmax(0, 1fr);\r\n  }\r\n\r\n  .settings-session-import-row__action {\r\n    align-items: flex-start;\r\n  }\r\n\r\n  .settings-sidebar {\r\n    border-right: 0;\r\n    border-bottom: 1px solid var(--settings-border);\r\n  }\r\n\r\n  .settings-header {\r\n    height: 56px;\r\n    padding-inline: 14px;\r\n  }\r\n\r\n  .settings-sidebar {\r\n    padding-top: 20px;\r\n  }\r\n\r\n  .settings-nav {\r\n    flex: none;\r\n    flex-direction: row;\r\n    gap: 4px;\r\n    padding: 7px 8px 8px;\r\n    overflow-x: auto;\r\n    overflow-y: hidden;\r\n  }\r\n\r\n  .settings-nav-section-label {\r\n    display: none;\r\n  }\r\n\r\n  .settings-nav-button {\r\n    width: auto;\r\n    min-width: max-content;\r\n    min-height: 34px;\r\n    grid-template-columns: 16px auto;\r\n    border-radius: 10px;\r\n  }\r\n\r\n  .settings-nav-star-link {\r\n    margin-top: 0;\r\n  }\r\n\r\n  .settings-page__content {\r\n    width: calc(100% - 40px);\r\n  }\r\n\r\n  .settings-page__content {\r\n    padding-top: 32px;\r\n    padding-bottom: 32px;\r\n  }\r\n\r\n  .settings-section-label {\r\n    padding-bottom: 20px;\r\n    font-size: 20px;\r\n    line-height: 26px;\r\n  }\r\n\r\n  .settings-update-metadata {\r\n    grid-template-columns: minmax(0, 1fr);\r\n    gap: 16px;\r\n  }\r\n\r\n  .settings-status-row {\r\n    grid-template-columns: minmax(0, 1fr) auto;\r\n    gap: 16px;\r\n  }\r\n\r\n  .settings-account-header,\r\n  .settings-connection-page-header {\r\n    flex-direction: column;\r\n  }\r\n\r\n  .settings-account-header > .settings-command-button,\r\n  .settings-connection-page-header > .settings-command-button {\r\n    width: 100%;\r\n  }\r\n\r\n  .settings-connections-layout {\r\n    grid-template-columns: minmax(0, 1fr);\r\n  }\r\n\r\n  .settings-connection-inspector {\r\n    position: static;\r\n  }\r\n\r\n  .settings-status-row__detail {\r\n    grid-column: 1 / -1;\r\n    margin: -8px 0 0 58px;\r\n  }\r\n}\r\n\r\n@media (forced-colors: active) {\r\n  :host {\r\n    --settings-bg: Canvas;\r\n    --settings-sidebar: Canvas;\r\n    --settings-panel: Canvas;\r\n    --settings-surface: Canvas;\r\n    --settings-surface-hover: Highlight;\r\n    --settings-inset: Canvas;\r\n    --settings-text: CanvasText;\r\n    --settings-muted: GrayText;\r\n    --settings-subtle: GrayText;\r\n    --settings-border: ButtonBorder;\r\n    --settings-divider: ButtonBorder;\r\n    --settings-hover: Highlight;\r\n    --settings-active: Highlight;\r\n    --settings-focus: Highlight;\r\n    --settings-primary: ButtonFace;\r\n    --settings-primary-hover: Highlight;\r\n    --settings-primary-text: ButtonText;\r\n    --settings-warning: CanvasText;\r\n    --settings-warning-bg: Canvas;\r\n    --settings-warning-border: ButtonBorder;\r\n    --settings-danger: CanvasText;\r\n    --settings-danger-bg: Canvas;\r\n    --settings-danger-border: ButtonBorder;\r\n    --settings-success: CanvasText;\r\n  }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  *,\r\n  *::before,\r\n  *::after {\r\n    scroll-behavior: auto !important;\r\n    transition-duration: 0s !important;\r\n  }\r\n}\r\n\r\n/* Harness Mix: Model Configuration & One-click Install */\r\n.settings-model-config-panel {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 12px;\r\n  padding: 14px;\r\n  margin-top: 14px;\r\n  border-radius: 8px;\r\n  background: var(--settings-surface);\r\n  border: 1px solid var(--settings-border);\r\n}\r\n\r\n.settings-model-config-head {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 4px;\r\n}\r\n\r\n.settings-model-config-title {\r\n  font-size: 13px;\r\n  font-weight: 600;\r\n  color: var(--settings-text);\r\n}\r\n\r\n.settings-model-config-description {\r\n  font-size: 11px;\r\n  color: var(--settings-muted);\r\n  margin: 0;\r\n}\r\n\r\n.settings-model-config-loading,\r\n.settings-model-config-empty {\r\n  font-size: 12px;\r\n  color: var(--settings-muted);\r\n  padding: 8px 0;\r\n}\r\n\r\n.settings-model-config-form {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 12px;\r\n  margin-top: 4px;\r\n}\r\n\r\n.settings-model-config-field {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 6px;\r\n}\r\n\r\n.settings-model-config-label {\r\n  font-size: 11px;\r\n  font-weight: 600;\r\n  color: var(--settings-muted);\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.5px;\r\n}\r\n\r\n.settings-model-config-select {\r\n  height: 32px;\r\n  padding: 0 10px;\r\n  border-radius: 6px;\r\n  border: 1px solid var(--settings-border);\r\n  background: var(--settings-panel);\r\n  color: var(--settings-text);\r\n  font-size: 12px;\r\n  outline: none;\r\n}\r\n\r\n.settings-model-config-select:focus {\r\n  border-color: var(--settings-primary);\r\n}\r\n\r\n.settings-model-config-actions {\r\n  display: flex;\r\n  align-items: center;\r\n  flex-wrap: wrap;\r\n  gap: 8px;\r\n  margin-top: 6px;\r\n}\r\n\r\n.settings-model-config-feedback {\r\n  font-size: 12px;\r\n  font-weight: 500;\r\n}\r\n\r\n.settings-feedback-success {\r\n  color: var(--settings-success);\r\n}\r\n\r\n.settings-feedback-error {\r\n  color: var(--settings-danger);\r\n}\r\n\r\n.settings-feedback-info {\r\n  color: var(--settings-primary);\r\n}\r\n\r\n.settings-install-command-box {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 6px;\r\n  min-width: 0;\r\n  margin: 0;\r\n}\r\n\r\n.settings-install-command-label {\r\n  font-size: 11px;\r\n  font-weight: 600;\r\n  color: var(--settings-muted);\r\n}\r\n\r\n.settings-install-command-row {\r\n  display: flex;\r\n  align-items: center;\r\n  background: var(--settings-inset);\r\n  padding: 8px 12px;\r\n  border-radius: 6px;\r\n  border: 1px solid var(--settings-border);\r\n  min-width: 0;\r\n  overflow-x: auto;\r\n}\r\n\r\n.settings-install-command-row code {\r\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;\r\n  font-size: 12px;\r\n  line-height: 18px;\r\n  color: var(--settings-text);\r\n  user-select: all;\r\n  white-space: pre-wrap;\r\n  word-break: break-all;\r\n}\r\n\r\n.settings-install-actions {\r\n  display: grid;\r\n  grid-template-columns: minmax(0, 1fr);\r\n  gap: 8px;\r\n  margin-top: 4px;\r\n}\r\n\r\n.settings-install-actions .settings-command-button {\r\n  width: 100%;\r\n  justify-content: center;\r\n}\r\n\r\n.settings-install-feedback {\r\n  font-size: 12px;\r\n  font-weight: 500;\r\n  line-height: 18px;\r\n  margin-top: 2px;\r\n  overflow-wrap: anywhere;\r\n}\r\n\r\n.settings-install-manual-card {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 8px;\r\n  background: var(--settings-inset);\r\n  padding: 12px 14px;\r\n  border-radius: 8px;\r\n  border: 1px solid var(--settings-border);\r\n  margin-top: 6px;\r\n  margin-bottom: 4px;\r\n}\r\n\r\n.settings-install-manual-badge {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  font-size: 11px;\r\n  font-weight: 600;\r\n  color: var(--settings-accent, #10a37f);\r\n  background: var(--settings-accent-subtle, rgba(16, 163, 127, 0.1));\r\n  padding: 2px 8px;\r\n  border-radius: 4px;\r\n  width: fit-content;\r\n}\r\n\r\n.settings-install-manual-notice {\r\n  font-size: 12px;\r\n  line-height: 18px;\r\n  color: var(--settings-text);\r\n  margin: 0;\r\n}\r\n\r\n.settings-install-steps {\r\n  margin: 0;\r\n  padding-left: 18px;\r\n  font-size: 12px;\r\n  line-height: 20px;\r\n  color: var(--settings-muted);\r\n}\r\n\r\n.settings-install-steps li {\r\n  margin-bottom: 2px;\r\n}\r\n/* MCP and Skills share native settings controls while keeping separate flows. */\n.settings-integrations-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 18px 0 12px; }\n.settings-integrations-controls input { flex: 1; min-width: 180px; }\n.settings-integrations-controls input[hidden] { display: none; }\n.settings-integrations-controls select, .settings-integrations-controls input,\n.settings-integrations-field input, .settings-integrations-toolbar input { box-sizing: border-box; padding: 9px 11px; border: 1px solid var(--settings-border, #8885); border-radius: 8px; color: inherit; background: var(--settings-input, transparent); font: inherit; }\n.settings-integrations-status { min-height: 18px; margin: 0 0 6px; color: var(--settings-muted); font-size: 12px; }\n.settings-integrations-body p { font-size: 12px; line-height: 1.6; opacity: .8; }\n.settings-integrations-toolbar { display: flex; gap: 10px; align-items: center; margin: 8px 0 16px; }\n.settings-integrations-toolbar input { flex: 1; }\n.settings-integrations-list { display: grid; gap: 8px; }\n.settings-integrations-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; border: 1px solid var(--settings-border, #8885); padding: 14px; border-radius: 10px; background: var(--settings-surface, transparent); }\n.settings-integrations-row > div { flex: 1; min-width: 180px; }\n.settings-integrations-row p { margin: 3px 0; }\n.settings-integrations-row code { display: block; overflow-wrap: anywhere; font-size: 11px; color: var(--settings-muted); }\n.settings-integrations-row--native { border-style: dashed; }\n.settings-integrations-empty { padding: 36px 18px; border: 1px dashed var(--settings-border, #8885); border-radius: 10px; text-align: center; color: var(--settings-muted); font-size: 12px; }\n.settings-integrations-editor-head { display: flex; align-items: center; gap: 12px; }\n.settings-integrations-editor-head h3 { margin: 0; }\n.settings-integrations-form { display: grid; gap: 14px; margin: 16px 0 28px; }\n.settings-integrations-form--card { padding: 16px; border: 1px solid var(--settings-border, #8885); border-radius: 12px; }\n.settings-integrations-field { display: grid; gap: 6px; font-size: 12px; }\n.settings-integrations-form > button { justify-self: start; }\n.settings-mcp-args { display: grid; gap: 7px; }\n.settings-mcp-arg { display: flex; gap: 8px; align-items: center; }\n.settings-mcp-arg input { flex: 1; }\n.settings-mcp-kv-row { display: flex; gap: 8px; align-items: center; }\n.settings-mcp-kv-row input { flex: 1; }\n.settings-mcp-add-arg { margin-top: 7px; }\n.settings-mcp-docs-link { display: inline-flex; align-items: center; gap: 4px; color: var(--settings-muted, #888); font-size: 13px; text-decoration: none; transition: color 150ms ease; }\n.settings-mcp-docs-link:hover { color: var(--settings-text, #fff); text-decoration: underline; }\n.settings-integrations-editor-head .settings-command-button--danger { margin-left: auto; }\n.settings-mcp-type-toggle { display: inline-flex; padding: 3px; border-radius: 8px; background: var(--settings-inset, rgba(255, 255, 255, 0.06)); border: 1px solid var(--settings-border, #8885); gap: 2px; width: fit-content; }\n.settings-mcp-type-btn { padding: 5px 14px; border-radius: 6px; border: none; background: transparent; color: var(--settings-muted, #888); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; transition: all 120ms ease; }\n.settings-mcp-type-btn:hover { color: var(--settings-text, #fff); }\n.settings-mcp-type-btn[data-active="true"] { background: var(--settings-active, rgba(255, 255, 255, 0.15)); color: var(--settings-text, #fff); font-weight: 600; }\n.settings-mcp-notice { margin: 4px 0 0; color: var(--settings-muted, #888); font-size: 12px; line-height: 1.5; }\n.settings-mcp-section { display: grid; gap: 14px; }\n.settings-mcp-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--settings-border, #8885); border-radius: 8px; background: var(--settings-input, transparent); color: var(--settings-muted, #888); cursor: pointer; flex: none; transition: all 120ms ease; }\n.settings-mcp-icon-btn:hover:not(:disabled) { background: rgba(239, 68, 68, 0.15); border-color: rgba(239, 68, 68, 0.4); color: #f87171; }\n.settings-mcp-icon-btn svg { width: 14px; height: 14px; display: block; }\n.settings-integrations-callout { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--settings-inset); }\n.settings-skill-dropzone { display: grid; justify-items: center; gap: 8px; padding: 34px 22px; margin: 8px 0 18px; border: 1.5px dashed var(--settings-border, #8887); border-radius: 14px; background: var(--settings-inset); text-align: center; transition: border-color 120ms ease, background 120ms ease, transform 120ms ease; }\n.settings-skill-dropzone > span { max-width: 520px; color: var(--settings-muted); font-size: 12px; line-height: 18px; }\n.settings-skill-dropzone[data-drag-over="true"] { border-color: var(--settings-accent, #10a37f); background: var(--settings-accent-subtle, rgba(16, 163, 127, .1)); transform: scale(.995); }\n.settings-skill-dropzone[data-disabled="true"] { opacity: .55; }\n.settings-skills-target-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; margin-top: 6px; }\n.settings-skills-target-row select { padding: 6px 10px; border: 1px solid var(--settings-border, #8885); border-radius: 8px; background: var(--settings-input, transparent); color: inherit; font: inherit; font-size: 12px; }\n.settings-skills-overview-stats { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 6px 0 10px; font-size: 12px; color: var(--settings-muted); }\n.settings-skills-tabs { display: inline-flex; padding: 3px; border-radius: 8px; background: var(--settings-inset, rgba(255, 255, 255, 0.06)); border: 1px solid var(--settings-border, #8885); gap: 2px; }\n.settings-skills-tab-btn { padding: 5px 14px; border-radius: 6px; border: none; background: transparent; color: var(--settings-muted, #888); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; transition: all 120ms ease; }\n.settings-skills-tab-btn:hover { color: var(--settings-text, #fff); }\n.settings-skills-tab-btn[data-active="true"] { background: var(--settings-active, rgba(255, 255, 255, 0.15)); color: var(--settings-text, #fff); font-weight: 600; }\n.settings-skills-overview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; margin-top: 10px; }\n.settings-skills-harness-card { border: 1px solid var(--settings-border, #8885); border-radius: 12px; padding: 14px; background: var(--settings-surface, transparent); display: flex; flex-direction: column; gap: 10px; }\n.settings-skills-harness-head { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--settings-border, #8883); padding-bottom: 8px; }\n.settings-skills-harness-head strong { font-size: 14px; }\n.settings-skills-badge { font-size: 11px; padding: 2px 8px; border-radius: 10px; background: var(--settings-inset, rgba(255, 255, 255, 0.08)); color: var(--settings-muted); }\n.settings-skills-badge--active { background: rgba(16, 163, 127, 0.15); color: #10a37f; }\n.settings-skills-list-compact { display: flex; flex-direction: column; gap: 8px; max-height: 280px; overflow-y: auto; }\n.settings-skills-item-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; background: var(--settings-inset, rgba(255, 255, 255, 0.03)); font-size: 12px; }\n.settings-skills-item-row strong { font-size: 13px; }\n.settings-skills-item-row code { font-size: 10px; color: var(--settings-muted); overflow-wrap: anywhere; display: block; }\n.settings-skills-item-actions { display: flex; gap: 6px; align-items: center; flex: none; }\n.settings-skills-matrix-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }\n.settings-skills-matrix-card { border: 1px solid var(--settings-border, #8885); border-radius: 10px; padding: 12px 14px; background: var(--settings-surface, transparent); display: flex; flex-direction: column; gap: 8px; }\n.settings-skills-matrix-head { display: flex; justify-content: space-between; align-items: center; }\n.settings-skills-matrix-head span { font-size: 11px; color: var(--settings-muted); }\n.settings-skills-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.settings-skills-tag { font-size: 11px; padding: 3px 8px; border-radius: 6px; background: rgba(16, 163, 127, 0.15); color: #10a37f; border: 1px solid rgba(16, 163, 127, 0.3); }\n.settings-skills-sync-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }\n.settings-skills-sync-modal { border: 1px solid var(--settings-border, #8885); border-radius: 12px; background: var(--settings-bg, #1e1e1e); color: inherit; padding: 20px 24px; max-width: 420px; box-shadow: 0 16px 32px rgba(0, 0, 0, 0.5); }\n.settings-skills-sync-modal::backdrop { background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(2px); }\n.settings-skills-sync-modal h3 { margin: 0 0 8px; font-size: 16px; }\n.settings-skills-sync-modal p { margin: 0 0 12px; font-size: 12px; color: var(--settings-muted); }\n.settings-mcp-overview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; margin-top: 10px; }\n.settings-mcp-harness-card { border: 1px solid var(--settings-border, #8885); border-radius: 12px; padding: 14px; background: var(--settings-surface, transparent); display: flex; flex-direction: column; gap: 10px; }\n.settings-mcp-harness-head { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--settings-border, #8883); padding-bottom: 8px; }\n.settings-mcp-harness-head strong { font-size: 14px; }\n.settings-mcp-native-box { padding: 8px 10px; border-radius: 8px; background: rgba(16, 163, 127, 0.08); border: 1px dashed rgba(16, 163, 127, 0.3); font-size: 11px; display: flex; flex-direction: column; gap: 4px; }\n.settings-mcp-native-title { font-weight: 600; color: #10a37f; display: flex; align-items: center; gap: 6px; }\n.settings-mcp-native-item { display: flex; flex-direction: column; gap: 2px; color: var(--settings-muted); }\n.settings-mcp-native-item code { font-size: 10px; overflow-wrap: anywhere; }\n.settings-mcp-list-compact { display: flex; flex-direction: column; gap: 8px; max-height: 280px; overflow-y: auto; }\n.settings-mcp-item-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; background: var(--settings-inset, rgba(255, 255, 255, 0.03)); font-size: 12px; }\n.settings-mcp-item-row strong { font-size: 13px; }\n.settings-mcp-item-row code { font-size: 10px; color: var(--settings-muted); overflow-wrap: anywhere; display: block; }\n.settings-mcp-item-actions { display: flex; gap: 6px; align-items: center; flex: none; }\n.settings-mcp-card-footer { display: flex; justify-content: flex-end; margin-top: auto; padding-top: 6px; border-top: 1px solid var(--settings-border, #8882); }\n.settings-mcp-matrix-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }\n.settings-mcp-matrix-card { border: 1px solid var(--settings-border, #8885); border-radius: 10px; padding: 12px 14px; background: var(--settings-surface, transparent); display: flex; flex-direction: column; gap: 8px; }\n.settings-mcp-matrix-head { display: flex; justify-content: space-between; align-items: center; }\n.settings-mcp-matrix-head span { font-size: 11px; color: var(--settings-muted); }\n.settings-mcp-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.settings-mcp-tag { font-size: 11px; padding: 3px 8px; border-radius: 6px; background: rgba(16, 163, 127, 0.15); color: #10a37f; border: 1px solid rgba(16, 163, 127, 0.3); }\n.settings-mcp-tag--disabled { background: rgba(255, 255, 255, 0.05); color: var(--settings-muted); border-color: var(--settings-border, #8885); }\n.settings-mcp-sync-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }\n.settings-mcp-distribute-modal { border: 1px solid var(--settings-border, #8885); border-radius: 12px; background: var(--settings-bg, #1e1e1e); color: inherit; padding: 20px 24px; max-width: 540px; width: 92%; max-height: 85vh; overflow-y: auto; box-shadow: 0 16px 32px rgba(0, 0, 0, 0.5); }\n.settings-mcp-distribute-modal::backdrop { background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(2px); }\n.settings-mcp-distribute-modal h3 { margin: 0 0 8px; font-size: 16px; }\n.settings-mcp-distribute-modal p { margin: 0 0 12px; font-size: 12px; color: var(--settings-muted); }\n\n\n';
 
   // src/native-ui/renderer-extension/src/settings/accounts.css
   var accounts_default = '.settings-harness-accounts {\n  margin-top: 32px;\n}\n\n.settings-harness-accounts__title {\n  margin: 0 0 16px;\n  font-size: 14px;\n  font-weight: 500;\n}\n\n.settings-harness-account__identity {\n  min-width: 0;\n}\n\n.settings-harness-account__identity > .settings-account-email {\n  display: block;\n  max-width: 24ch;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.settings-harness-account__logo {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  flex: none;\n}\n\n.settings-harness-account {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-wrap: wrap;\n  gap: 20px;\n  padding: 20px 24px;\n}\n\n.settings-harness-account > .settings-account-row__person {\n  flex: 1 1 280px;\n  min-width: 0;\n}\n\n.settings-harness-account > .settings-account-usage {\n  flex: 1 1 220px;\n  min-width: 0;\n}\n\n.settings-harness-account > .settings-harness-account__actions {\n  flex: 0 0 auto;\n}\n\n.settings-harness-account__badge {\n  display: inline-flex;\n  align-items: center;\n  padding: 1px 7px;\n  border-radius: 999px;\n  font-size: 11px;\n  font-weight: 500;\n  line-height: 16px;\n}\n\n.settings-harness-account__badge--ready {\n  background: rgba(16, 185, 129, 0.12);\n  color: #10b981;\n  border: 1px solid rgba(16, 185, 129, 0.28);\n}\n\n.settings-harness-account__badge--unconfigured {\n  background: rgba(245, 158, 11, 0.12);\n  color: #f59e0b;\n  border: 1px solid rgba(245, 158, 11, 0.28);\n}\n\n.settings-harness-account__badge--not_installed {\n  background: rgba(156, 163, 175, 0.12);\n  color: var(--settings-muted);\n  border: 1px solid rgba(156, 163, 175, 0.25);\n}\n\n.settings-harness-account__config-hint {\n  margin-top: 6px;\n  font-size: 11px;\n  color: var(--settings-muted);\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.settings-harness-account__config-hint code {\n  font-family: ui-monospace, Consolas, monospace;\n  font-size: 11px;\n  background: var(--settings-surface);\n  border: 1px solid var(--settings-border);\n  padding: 1px 5px;\n  border-radius: 4px;\n}\n\n.settings-harness-account__actions {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.settings-harness-account__login-btn {\n  font-size: 12px;\n  padding: 6px 12px;\n  white-space: nowrap;\n}\n\n.settings-harness-account + .settings-harness-account {\n  border-top: 1px solid var(--settings-border);\n}\n\n.settings-harness-account > div {\n  min-width: 0;\n  overflow-wrap: anywhere;\n}\n\n@media (max-width: 700px) {\n  .settings-harness-account {\n    grid-template-columns: minmax(0, 1fr);\n    padding: 16px;\n  }\n}\n\n.settings-account-header {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 20px;\n}\n\n.settings-account-eyebrow {\n  margin: 0 0 8px;\n  color: var(--settings-muted);\n  font-size: 11px;\n  letter-spacing: 0.13em;\n}\n\n.settings-account-header > :first-child {\n  min-width: 0;\n  flex: 1 1 auto;\n}\n\n.settings-account-header > .settings-command-button {\n  flex: none;\n  white-space: nowrap;\n  margin-top: 20px;\n  min-height: 36px;\n  padding: 8px 12px;\n  border-radius: 7px;\n}\n\n.settings-account-header .settings-section-label {\n  margin: 0;\n  padding: 0;\n  font-size: 27px;\n  line-height: 1.4;\n  font-weight: 650;\n  letter-spacing: -0.035em;\n}\n.settings-account-header .settings-page-description {\n  margin: 8px 0 0;\n  font-size: 13px;\n}\n\n.settings-account-status {\n  margin: 0;\n  color: var(--settings-muted);\n  font-size: 12px;\n}\n.settings-account-status:empty {\n  display: none;\n}\n\n.settings-account-help-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 16px;\n  margin-top: 20px;\n  flex-wrap: wrap;\n}\n.settings-account-task-hint {\n  display: flex;\n  align-items: flex-start;\n  gap: 9px;\n  margin: 0;\n  color: var(--settings-muted);\n  font-size: 12px;\n  flex: 1 1 280px;\n}\n.settings-account-task-hint svg {\n  flex: none;\n  margin-top: 1px;\n}\n.settings-account-help-button {\n  display: inline-flex;\n  align-items: center;\n  gap: 7px;\n  padding: 8px 12px;\n  color: var(--settings-muted);\n  font-size: 12px;\n  background: transparent;\n  border: 0;\n  border-radius: 7px;\n  cursor: pointer;\n}\n.settings-account-help-button:hover {\n  color: var(--settings-text);\n  background: var(--settings-hover);\n}\n.settings-account-device-code-note {\n  margin: 12px 0 0;\n  font-size: 12px;\n  padding: 10px 12px;\n  color: var(--settings-warning);\n  background: var(--settings-warning-bg);\n  border: 1px solid var(--settings-warning-border);\n  border-radius: 8px;\n}\n\n.settings-account-toolbar {\n  margin-top: 27px;\n  padding: 18px 0;\n  border-top: 1px solid var(--settings-border);\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  flex-wrap: wrap;\n}\n.settings-account-count {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 13px;\n  white-space: nowrap;\n}\n.settings-account-count > :last-child {\n  color: var(--settings-muted);\n  font-variant-numeric: tabular-nums;\n}\n.settings-account-search {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: var(--settings-muted);\n  margin-right: auto;\n  min-width: 0;\n  max-width: 100%;\n}\n.settings-account-search svg {\n  flex: none;\n}\n.settings-account-toolbar input {\n  min-width: 80px;\n  width: 150px;\n  max-width: 100%;\n  padding: 5px 0;\n  color: var(--settings-text);\n  background: transparent;\n  border: 0;\n  font-size: 13px;\n}\n.settings-account-toolbar input::placeholder {\n  color: var(--settings-muted);\n}\n.settings-account-display-controls {\n  display: flex;\n  padding: 3px;\n  border: 1px solid var(--settings-border);\n  border-radius: 7px;\n  background: var(--settings-inset);\n}\n.settings-account-display-controls button {\n  padding: 4px 10px;\n  color: var(--settings-muted);\n  background: transparent;\n  border: 0;\n  border-radius: 4px;\n  font-size: 12px;\n  cursor: pointer;\n}\n.settings-account-display-controls button:hover {\n  color: var(--settings-text);\n}\n.settings-account-display-controls button[aria-pressed="true"] {\n  color: var(--settings-text);\n  background: var(--settings-active);\n}\n\n.settings-account-list {\n  --account-border: light-dark(#e2e2e8, #36363b);\n  --account-muted: light-dark(#676773, #a5a5af);\n  border: 1px solid var(--account-border);\n  border-radius: 11px;\n  overflow: hidden;\n  container-type: inline-size;\n}\n.settings-account-table {\n  width: 100%;\n  table-layout: fixed;\n  border-collapse: collapse;\n  font-size: 12px;\n}\n.settings-account-table th {\n  padding: 13px 20px;\n  color: var(--account-muted);\n  background: light-dark(#f8f8fa, #202024);\n  font-size: 11px;\n  font-weight: 500;\n  text-align: left;\n}\n.settings-account-table th:nth-child(1) {\n  width: 32%;\n}\n.settings-account-table th:nth-child(2) {\n  width: 38%;\n}\n.settings-account-table th:nth-child(3) {\n  width: 12%;\n}\n.settings-account-table th:nth-child(4) {\n  width: 18%;\n  text-align: right;\n}\n.settings-account-table td {\n  padding: 19px 20px;\n  vertical-align: middle;\n  border-top: 1px solid var(--settings-divider);\n}\n.settings-account-row {\n  background: light-dark(#ffffff, #232326);\n}\n.settings-account-row:hover {\n  background: light-dark(#f7f7fa, #26262a);\n}\n.settings-account-row__person {\n  display: grid;\n  grid-template-columns: 34px minmax(0, 1fr);\n  align-items: center;\n  gap: 11px;\n  min-width: 0;\n}\n.settings-account-row__mark {\n  display: grid;\n  place-items: center;\n  width: 34px;\n  height: 34px;\n  color: light-dark(#67558d, #c3baff);\n  background: light-dark(#f0ecf7, #353044);\n  border: 1px solid light-dark(#d9d0e6, #4d435f);\n  border-radius: 10px;\n}\n.settings-account-row__identity {\n  min-width: 0;\n}\n.settings-account-title {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex-wrap: wrap;\n}\n.settings-account-email {\n  min-width: 0;\n  overflow: hidden;\n  font-size: 13px;\n  font-weight: 550;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.settings-account-metadata {\n  display: flex;\n  align-items: center;\n  min-width: 0;\n  gap: 7px;\n  margin-top: 4px;\n  color: var(--settings-muted);\n}\n.settings-account-domain {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.settings-account-plan-separator {\n  flex: none;\n}\n.settings-account-plan {\n  flex: none;\n  padding: 1px 6px;\n  color: var(--settings-muted);\n  border: 1px solid var(--settings-border);\n  border-radius: 5px;\n  font-size: 11px;\n  white-space: nowrap;\n}\n.settings-account-plan--highlighted {\n  color: light-dark(#654f91, #c8bfff);\n  background: light-dark(#f2edf9, #a99bff18);\n  border-color: light-dark(#d9ccea, #a99bff52);\n  font-weight: 600;\n}\n.settings-account-active {\n  flex: none;\n  padding: 2px 7px;\n  color: light-dark(#66548e, #bdb4ff);\n  background: light-dark(#f4f0fb, #aca0ff12);\n  border: 1px solid light-dark(#dfd5f1, #aca0ff24);\n  border-radius: 5px;\n  font-size: 11px;\n  white-space: nowrap;\n}\n\n.settings-account-usage {\n  display: grid;\n  gap: 14px;\n  max-width: 380px;\n}\n.settings-account-usage__meter {\n  display: grid;\n  grid-template-columns: 48px minmax(36px, 1fr) 96px;\n  align-items: center;\n  gap: 3px 10px;\n}\n:host([lang="zh-CN"]) .settings-account-usage__meter {\n  grid-template-columns: 48px minmax(36px, 1fr) 72px;\n}\n\n.settings-account-usage__title {\n  color: light-dark(#5d5d68, #c3c3cd);\n  font-size: 12px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.settings-account-usage__percent {\n  display: flex;\n  align-items: baseline;\n  justify-content: flex-end;\n  gap: 4px;\n  font-size: 14px;\n  font-weight: 600;\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n}\n.settings-account-usage__value-label {\n  color: var(--settings-muted);\n  font-size: 11px;\n  font-weight: 400;\n}\n.settings-account-usage__percent--warn {\n  color: var(--settings-warning);\n}\n.settings-account-usage__percent--hot {\n  color: var(--settings-danger);\n}\n.settings-account-usage__bar {\n  height: 4px;\n  overflow: hidden;\n  background: light-dark(#e3e1e8, #3c3c43);\n  border-radius: 4px;\n}\n.settings-account-usage__bar > span {\n  display: block;\n  height: 100%;\n  background: light-dark(#81769e, #9993b8);\n  border-radius: inherit;\n}\n.settings-account-usage__bar--warn > span {\n  background: var(--settings-warning);\n}\n.settings-account-usage__bar--hot > span {\n  background: var(--settings-danger);\n}\n.settings-account-usage__sub {\n  grid-column: 2 / -1;\n  color: var(--account-muted);\n  font-size: 11px;\n  font-variant-numeric: tabular-nums;\n  overflow-wrap: anywhere;\n}\n.settings-account-usage__message,\n.settings-account-unknown {\n  color: var(--settings-muted);\n}\n.settings-account-usage > button {\n  justify-self: start;\n}\n.settings-account-actions {\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  gap: 4px;\n  flex-wrap: wrap;\n}\n.settings-account-action {\n  padding: 8px 10px;\n  min-height: 36px;\n  font-size: 12px;\n  color: var(--settings-text);\n  background: transparent;\n  border: 1px solid transparent;\n  border-radius: 7px;\n  white-space: nowrap;\n  cursor: pointer;\n}\n.settings-account-action:hover {\n  background: var(--settings-hover);\n}\n.settings-account-action:disabled {\n  opacity: 0.45;\n  cursor: not-allowed;\n}\n.settings-account-actions .settings-account-delete {\n  color: var(--settings-muted);\n}\n.settings-account-actions .settings-account-delete:hover,\n.settings-account-actions .settings-account-delete:focus-visible {\n  color: var(--settings-danger);\n  background: var(--settings-danger-bg);\n}\n.settings-account-mobile-label {\n  display: none;\n}\n.settings-account-reset-summary {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  min-height: 32px;\n  padding: 3px 0;\n  font-size: 12px;\n  white-space: nowrap;\n  color: var(--settings-text);\n  background: transparent;\n  border: 0;\n  border-radius: 5px;\n  cursor: pointer;\n}\n.settings-account-reset-summary:hover {\n  background: var(--settings-hover);\n}\n.settings-account-reset-summary[aria-expanded="true"] > svg:last-child {\n  transform: rotate(90deg);\n}\n.settings-account-details-row > td {\n  background: var(--settings-inset);\n}\n.settings-account-reset-details {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 16px;\n  flex-wrap: wrap;\n}\n.settings-account-reset-details strong {\n  font-size: 12px;\n}\n.settings-account-reset-expiry {\n  margin: 6px 0;\n  color: var(--settings-muted);\n  font-size: 11px;\n}\n.settings-account-reset-expiry.is-warn {\n  color: var(--settings-warning);\n}\n.settings-account-reset-expiry.is-hot {\n  color: var(--settings-danger);\n}\n.settings-account-reset-list {\n  margin: 8px 0 0;\n  padding: 0;\n  list-style: none;\n  color: var(--settings-muted);\n  font-size: 11px;\n}\n.settings-account-reset-list li + li {\n  margin-top: 4px;\n}\n.settings-account-empty {\n  text-align: center;\n  color: var(--settings-muted);\n}\n.settings-account-verification {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-wrap: wrap;\n  color: var(--settings-muted);\n}\n.settings-account-verification a {\n  color: var(--settings-focus);\n  overflow-wrap: anywhere;\n}\n.settings-account-verification code {\n  padding: 5px 8px;\n  color: var(--settings-text);\n  font-size: 15px;\n  font-weight: 600;\n  letter-spacing: 0.08em;\n  background: var(--settings-inset);\n  border-radius: 6px;\n}\n.settings-account-list :focus-visible,\n.settings-account-toolbar :focus-visible,\n.settings-account-help-button:focus-visible {\n  outline: 2px solid var(--settings-focus);\n  outline-offset: -2px;\n}\n\n@container (min-width: 611px) and (max-width: 800px) {\n  .settings-account-table th,\n  .settings-account-table td {\n    padding-left: 12px;\n    padding-right: 12px;\n  }\n  .settings-account-table th:nth-child(1) {\n    width: 30%;\n  }\n  .settings-account-table th:nth-child(2) {\n    width: 37%;\n  }\n  .settings-account-table th:nth-child(4) {\n    width: 21%;\n  }\n}\n\n@container (max-width: 610px) {\n  .settings-account-table,\n  .settings-account-table tbody {\n    display: block;\n  }\n  .settings-account-table thead {\n    display: none;\n  }\n  .settings-account-row {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    padding: 16px;\n    gap: 12px;\n    border-bottom: 1px solid var(--settings-divider);\n  }\n  .settings-account-table .settings-account-row > td {\n    padding: 0;\n    border: 0;\n  }\n  .settings-account-row > td:nth-child(1),\n  .settings-account-row > td:nth-child(2) {\n    grid-column: 1 / -1;\n  }\n  .settings-account-row > td:nth-child(3) {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n  }\n  .settings-account-mobile-label {\n    display: inline;\n    color: var(--settings-muted);\n    font-size: 11px;\n  }\n  .settings-account-usage {\n    max-width: none;\n  }\n  .settings-account-table tr:not(.settings-account-row),\n  .settings-account-table tr:not(.settings-account-row) > td {\n    display: block;\n  }\n}\n\n@media (forced-colors: active) {\n  .settings-account-usage__bar {\n    border: 1px solid CanvasText;\n  }\n  .settings-account-usage__bar > span {\n    background: Highlight;\n  }\n}\n';
@@ -27014,8 +29399,10 @@ ${accounts_default}`;
       const pages = [
         createConnectionsSettingsPage(messages, options.getConnectionDiagnostics ?? (() => null)),
         createAccountsSettingsPage(messages, options.getAccountClient ?? (() => null)),
+        createMcpSettingsPage(messages, options.getIntegrationsClient ?? (() => null)),
+        createSkillsSettingsPage(messages, options.getIntegrationsClient ?? (() => null)),
         updatesPage(messages, options.getUpdateClient ?? (() => null)),
-        aboutPage(messages)
+        aboutPage(messages, options.getUpdateClient ?? (() => null))
       ];
       const nextShell = installRendererSettingsShell(pages, messages, ownerWindow.document);
       const nextTrigger = installRendererSettingsHeaderTrigger({
@@ -27401,13 +29788,19 @@ ${accounts_default}`;
       const composer = editor.closest("[data-codex-composer-root]");
       if (!composer) return { agents: [], sessions: [] };
       const state = controller.get(composer);
-      if (state.agent === "codex") return { agents: [], sessions: [] };
       const client = modelClientForHost(modelControl?.currentHostId?.() ?? "local");
       const [agentResult, sessionResult] = await Promise.allSettled([
         client?.listCollaborationAgents?.() ?? Promise.resolve([]),
         client?.listHarnessSessions?.({ harnessId: harnessIdSchema.parse("all-harnesses"), query, offset: 0, limit: 12 }) ?? Promise.resolve({ candidates: [], total: 0 })
       ]);
       const agents = agentResult.status === "fulfilled" ? agentResult.value : [];
+      window.__lastMentionDebug = {
+        hasClient: !!client,
+        agentStatus: agentResult.status,
+        agentValue: agentResult.status === "fulfilled" ? agentResult.value : agentResult.reason?.message,
+        sessionStatus: sessionResult.status,
+        sessionValue: sessionResult.status === "fulfilled" ? sessionResult.value : sessionResult.reason?.message
+      };
       const sessions = sessionResult.status === "fulfilled" ? sessionResult.value.candidates.map((candidate) => {
         const match = /^\[([^\]]+)\]\s*/.exec(candidate.title ?? "");
         return { id: candidate.nativeSessionId, title: (candidate.title ?? "\u672A\u547D\u540D\u4F1A\u8BDD").replace(/^\[[^\]]+\]\s*/, ""), harnessId: match?.[1] ?? "codex", cwd: candidate.cwd, running: candidate.running };
@@ -27430,6 +29823,11 @@ ${accounts_default}`;
       getUpdateClient: () => modelControl,
       getAccountClient: () => modelControl,
       getConnectionDiagnostics: () => connectionDiagnostics,
+      getIntegrationsClient: () => {
+        const client = modelClientForHost("local");
+        if (!client?.integrationCatalog || !client.listIntegrations || !client.saveMcp || !client.removeMcp || !client.changeSkill) return null;
+        return { integrationCatalog: () => client.integrationCatalog(), listIntegrations: (input) => client.listIntegrations(input), saveMcp: (input) => client.saveMcp(input), removeMcp: (input) => client.removeMcp(input), changeSkill: (input) => client.changeSkill(input) };
+      },
       getSessionImportClient: () => {
         const client = modelClientForHost("local");
         const sources = client?.listSessionImportSources;
@@ -27553,7 +29951,7 @@ ${accounts_default}`;
         mounted.control,
         controller.get(mounted.composer),
         adapterStatus.state,
-        accounts?.switching === true || controller.isSwitching(mounted.composer) || mounted.ownershipStatus === "loading",
+        accounts?.switching === true || controller.isSwitching(mounted.composer) || mounted.harnessSwitching || mounted.ownershipStatus === "loading",
         activeHarnessAvailabilityState().availability,
         mounted.modelView,
         mounted.permissionModeView,
@@ -27825,6 +30223,54 @@ ${accounts_default}`;
         }
       }
     };
+    const handoffComposerThread = async (mounted, request) => {
+      const threadId = threadIdFromComposerModelTarget(mounted.modelTarget);
+      const current = controller.get(mounted.composer);
+      if (!threadId || current.phase !== "locked" || current.agent === "codex" || current.agent !== request.from || request.to === current.agent || mounted.harnessSwitching) {
+        return;
+      }
+      const client = modelClientForHostFrom(modelControl, mounted.hostId);
+      if (!client?.switchHarness) {
+        mounted.control.harnessHandoff.showError(
+          settingsLifecycle.locale === "zh-CN" ? "\u5F53\u524D\u4EFB\u52A1\u65E0\u6CD5\u4F7F\u7528 Harness \u63A5\u529B\u3002" : "Harness handoff is unavailable for this task."
+        );
+        return;
+      }
+      mounted.harnessSwitching = true;
+      mounted.control.harnessHandoff.setSubmitting(true);
+      renderMounted(mounted);
+      try {
+        await client.switchHarness({
+          threadId,
+          harnessId: externalHarnessIds[request.to],
+          ...request.note ? { note: request.note } : {},
+          intent: request.intent,
+          includes: request.includes
+        });
+        if (disposed || mountedByComposer.get(mounted.composer) !== mounted || threadIdFromComposerModelTarget(mounted.modelTarget) !== threadId) {
+          return;
+        }
+        mounted.harnessSwitching = false;
+        mounted.control.harnessHandoff.setSubmitting(false);
+        mounted.control.harnessHandoff.close();
+        mounted.modelView = { status: "loading" };
+        mounted.permissionModeView = { status: "loading" };
+        mounted.threadConfiguration = void 0;
+        mounted.usage = null;
+        mounted.accountCredits = null;
+        await loadThreadOwnership(mounted);
+      } catch (error51) {
+        mounted.control.harnessHandoff.showError(
+          error51 instanceof Error ? error51.message : String(error51)
+        );
+      } finally {
+        if (mountedByComposer.get(mounted.composer) === mounted) {
+          mounted.harnessSwitching = false;
+          mounted.control.harnessHandoff.setSubmitting(false);
+          renderMounted(mounted);
+        }
+      }
+    };
     const refreshMountedConversationTarget = (mounted) => {
       const currentTarget = findComposerModelTarget(mounted.composer);
       const resolution = lateConversationTargetResolution(
@@ -28517,9 +30963,8 @@ ${accounts_default}`;
         await policy.clear();
         if (!isCurrent() || window.__codexhostDraftPrewarmPolicyV1 !== policy) return;
         if (!policy.selectAccount) throw new Error("Codex Account selection is unavailable");
-        const override = accountId === accounts.selection.activeAccountId ? null : accountId;
-        policy.selectAccount(override);
-        accounts.overrideAccountId = override;
+        policy.selectAccount(codexAccountRouteOverride(accounts.accounts, accountId));
+        accounts.overrideAccountId = accountId === accounts.selection.activeAccountId ? null : accountId;
       } catch {
         if (isCurrent()) void loadCodexAccounts();
       } finally {
@@ -28809,6 +31254,13 @@ ${accounts_default}`;
         (agent) => {
           const mounted2 = mountedByComposer.get(composer);
           if (!composer.isConnected || !mounted2) return;
+          const current = controller.get(composer);
+          if (current.phase === "locked") {
+            if (current.agent !== "codex" && agent !== "codex") {
+              mounted2.control.harnessHandoff.open(current.agent, agent, settingsLifecycle.locale);
+            }
+            return;
+          }
           void switchComposerAgent(mounted2, agent);
         },
         openInstallPage,
@@ -28838,6 +31290,11 @@ ${accounts_default}`;
         (command) => {
           const mounted2 = mountedByComposer.get(composer);
           if (mounted2) selectCommand(mounted2, command);
+        },
+        (request) => {
+          const mounted2 = mountedByComposer.get(composer);
+          if (!composer.isConnected || !mounted2) return;
+          void handoffComposerThread(mounted2, request);
         }
       );
       const mounted = {
@@ -28853,7 +31310,8 @@ ${accounts_default}`;
         accountCredits: inherited?.accountCredits ?? null,
         hostId: inherited?.hostId ?? hostId,
         usageRequestGeneration: 0,
-        commandRequestGeneration: 0
+        commandRequestGeneration: 0,
+        harnessSwitching: false
       };
       mountedByComposer.set(composer, mounted);
       if (isComposerModelWriteAllowed(modelTarget)) {
@@ -29020,7 +31478,10 @@ ${accounts_default}`;
       if (current.agent === "codex") {
         const selection = composerCodexAccounts(composer)?.selection;
         const accountId = controller.isSubmissionPending(composer) && current.codexAccountId ? current.codexAccountId : selection?.selectedAccountId;
-        const override = accountId === selection?.activeAccountId ? null : accountId ?? null;
+        const override = codexAccountRouteOverride(
+          composerCodexAccounts(composer)?.accounts ?? [],
+          accountId
+        );
         const policy = window.__codexhostDraftPrewarmPolicyV1;
         if (override !== null && (policy?.hostId !== mounted.hostId || !policy.selectAccount)) {
           return false;
@@ -29065,7 +31526,7 @@ ${accounts_default}`;
     const onKeyDown = (event) => {
       const composer = isComposerInputIntent(event) ? composerForTarget(event.target) : null;
       const mounted = composer ? mountedByComposer.get(composer) : void 0;
-      if (composer && (composerCodexAccounts(composer)?.switching || controller.isSwitching(composer))) {
+      if (composer && (composerCodexAccounts(composer)?.switching || controller.isSwitching(composer) || mounted?.harnessSwitching)) {
         if (isComposerSubmissionKey(event)) blockEvent(event);
         return;
       }