@yezack/dsh-remote-mobile 1.9.2 → 1.10.2

package/lib/client.js

@@ -47,10 +47,10 @@ __export(index_exports, {
   inject: () => inject
 });
 module.exports = __toCommonJS(index_exports);
-var import_react10 = __toESM(require("react"), 1);
+var import_react11 = __toESM(require("react"), 1);
 
 // src/client/components/MainSection.jsx
-var import_react9 = __toESM(require("react"), 1);
+var import_react10 = __toESM(require("react"), 1);
 
 // src/client/api.js
 var RM_API_BASE = (function() {
@@ -103,6 +103,13 @@ function updateAdvancedSecurityOptions(payload) {
     body: JSON.stringify(payload)
   });
 }
+function updateProxyConfig(payload) {
+  return safeFetchJson(RM_API_BASE + "update-options", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(payload)
+  });
+}
 function updateSecret(secret) {
   return safeFetchJson(RM_API_BASE + "set-secret", {
     method: "POST",
@@ -172,6 +179,13 @@ function resetStylesApi() {
     headers: { "Content-Type": "application/json" }
   });
 }
+function toggleDirectoryPickerApi(enabled) {
+  return safeFetchJson(RM_API_BASE + "directory-picker", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ enabled: Boolean(enabled) })
+  });
+}
 
 // src/client/qrcode.js
 var generateQrSvg = (function() {
@@ -687,6 +701,18 @@ var generateQrSvg = (function() {
   };
 })();
 
+// src/client/utils/access.js
+function resolveAccessPort(status) {
+  const port = Number(status?.proxy?.activePort);
+  if (!Number.isInteger(port) || port <= 0 || port > 65535) {
+    return null;
+  }
+  return port;
+}
+function buildDirectLink(host, port, token) {
+  return `http://${host}:${port}/auth?token=${token || ""}`;
+}
+
 // src/client/components/NetworkCard.jsx
 var import_react = __toESM(require("react"), 1);
 
@@ -798,6 +824,30 @@ var translations = {
     saveConfigSuccessToast: "\u9AD8\u7EA7\u5B89\u5168\u53C2\u6570\u5DF2\u6210\u529F\u4FDD\u5B58\u5E76\u540C\u6B65\u5230 settings.json\uFF01",
     restoreDefaultsSuccessToast: "\u5DF2\u6210\u529F\u6062\u590D\u9ED8\u8BA4\u5B89\u5168\u53C2\u6570\u5E76\u7ACB\u5373\u751F\u6548\uFF01",
     saveConfigFailTip: "\u53C2\u6570\u5FC5\u987B\u4E3A\u5927\u4E8E 0 \u7684\u6709\u6548\u6574\u6570",
+    // 卡片 9: 接入代理配置
+    proxyConfigCardTitle: "\u63A5\u5165\u4EE3\u7406\u914D\u7F6E",
+    proxyConfigCardDesc: "\u63A7\u5236\u63A5\u5165\u6A21\u5F0F\u3001\u4EE3\u7406\u76D1\u542C\u5730\u5740\u4E0E\u53D7\u4FE1\u4EFB\u57DF\u540D\u3002\u4FDD\u5B58\u540E\u9700\u91CD\u542F DSH \u751F\u6548\u3002",
+    proxyModeLabel: "\u63A5\u5165\u6A21\u5F0F",
+    proxyModeHint: "proxy\uFF1A\u6838\u5FC3\u56DE\u73AF\uFF0C\u7531\u63D2\u4EF6\u8F6C\u53D1\uFF1Bdirect\uFF1A\u4E0D\u542F\u52A8\u4EE3\u7406\uFF0C\u76F4\u63A5\u8BBF\u95EE\u6838\u5FC3",
+    proxyModeProxy: "\u5B89\u5168\u63A5\u5165\u4EE3\u7406\uFF08proxy\uFF09",
+    proxyModeDirect: "\u76F4\u8FDE\u6838\u5FC3\uFF08direct\uFF09",
+    proxyPortLabel: "\u4EE3\u7406\u7AEF\u53E3",
+    proxyPortHint: "\u9ED8\u8BA4 3081\uFF1B\u7AEF\u53E3\u5360\u7528\u65F6\u4F1A\u81EA\u52A8\u9012\u589E",
+    proxyHostLabel: "\u4EE3\u7406\u76D1\u542C\u5730\u5740",
+    proxyHostHint: "0.0.0.0 \u8868\u793A\u6240\u6709\u7F51\u5361\uFF1B127.0.0.1 \u4EC5\u672C\u673A",
+    proxyTrustedHostsLabel: "\u53D7\u4FE1\u4EFB\u57DF\u540D",
+    proxyTrustedHostsHint: "\u6BCF\u884C\u4E00\u4E2A\uFF0C\u4F8B\u5982 xxx.tailnet.ts.net\uFF1B\u81EA\u5B9A\u4E49\u53CD\u4EE3\u57DF\u540D\u5FC5\u987B\u52A0\u5165",
+    proxyRestartNote: "\u4FDD\u5B58\u540E\u9700\u91CD\u542F DSH \u624D\u4F1A\u91CD\u65B0\u7ED1\u5B9A\u76D1\u542C\u5730\u5740/\u7AEF\u53E3\u3002",
+    proxySaveBtn: "\u{1F4BE} \u4FDD\u5B58\u63A5\u5165\u914D\u7F6E",
+    proxySavingBtn: "\u6B63\u5728\u4FDD\u5B58...",
+    proxyResetBtn: "\u{1F504} \u6062\u590D\u9ED8\u8BA4",
+    proxySaveConfirm: "\u786E\u5B9A\u4FDD\u5B58\u63A5\u5165\u914D\u7F6E\u5417\uFF1F\u4FDD\u5B58\u540E\u9700\u91CD\u542F DSH \u751F\u6548\u3002",
+    proxyResetConfirm: "\u786E\u5B9A\u6062\u590D\u9ED8\u8BA4\u63A5\u5165\u914D\u7F6E\uFF08proxy\u30013081\u30010.0.0.0\u3001\u65E0\u53D7\u4FE1\u4EFB\u57DF\u540D\uFF09\u5417\uFF1F",
+    proxySavedToast: "\u63A5\u5165\u914D\u7F6E\u5DF2\u4FDD\u5B58\uFF1B\u91CD\u542F DSH \u540E\u751F\u6548\u3002",
+    proxyResetToast: "\u5DF2\u6062\u590D\u9ED8\u8BA4\u63A5\u5165\u914D\u7F6E\uFF1B\u91CD\u542F DSH \u540E\u751F\u6548\u3002",
+    proxySaveFailTip: "\u8BF7\u68C0\u67E5\u7AEF\u53E3\u3001\u76D1\u542C\u5730\u5740\u4E0E\u53D7\u4FE1\u4EFB\u57DF\u540D\u683C\u5F0F",
+    proxyCurrentRuntime: "\u5F53\u524D\u8FD0\u884C",
+    proxyNotReady: "\u5B89\u5168\u63A5\u5165\u4EE3\u7406\u672A\u5C31\u7EEA\uFF0C\u8BF7\u5148\u542F\u52A8\u4EE3\u7406",
     // 卡片 8: 移动端样式片段（样式小插件）
     tabAccess: "\u63A5\u5165",
     tabDevices: "\u8BBE\u5907\u4E0E\u5B89\u5168",
@@ -841,6 +891,26 @@ var translations = {
     conflictReportText: "[DSH \u63D2\u4EF6\u51B2\u7A81\u8BCA\u65AD\u62A5\u544A]\n\u73B0\u8C61\uFF1Adsh-remote-mobile \u8BBE\u7F6E\u9762\u677F\u63D0\u793A\u300C\u68C0\u6D4B\u5230\u5176\u4ED6\u8FDC\u7A0B\u63A5\u5165\u63D2\u4EF6\u300D\u3002\n\u539F\u56E0\uFF1A\u53E6\u4E00\u6B3E\u8FDC\u7A0B/Web \u63A5\u5165\u7C7B\u63D2\u4EF6\u5360\u7528\u4E86 Cordis \u5171\u4EAB\u670D\u52A1 remoteWebUiPairing\uFF0Cdsh-remote-mobile \u4E3A\u4FDD\u8BC1\u6B63\u5E38\u542F\u52A8\u5DF2\u81EA\u52A8\u8BA9\u51FA\u8BE5\u670D\u52A1\uFF0C\u5F53\u524D\u4E24\u5957\u8FDC\u7A0B\u63A5\u5165\u529F\u80FD\u5E76\u5B58\u3002\n\u5360\u7528\u65B9\u63D2\u4EF6\u5305\u540D\uFF1A{plugin}\n\u5360\u7528\u65B9 loader entry id\uFF1A{entryId}\n\u5904\u7406\u65B9\u6848\uFF08\u4E8C\u9009\u4E00\uFF09\uFF1A\n\u65B9\u6848 A\uFF08\u4FDD\u7559 dsh-remote-mobile\uFF0C\u7981\u7528\u5360\u7528\u65B9\uFF09\uFF1A\n1. \u6253\u5F00\u914D\u7F6E\u6587\u4EF6 ~/.dsh/profiles/web/cordis.patch.yml\n2. \u5728\u6587\u4EF6\u672B\u5C3E\u8FFD\u52A0\u4EE5\u4E0B\u4E24\u884C\uFF08\u6CE8\u610F YAML \u7F29\u8FDB\uFF0C\u7B2C\u4E8C\u884C\u524D\u6709\u4E24\u4E2A\u7A7A\u683C\uFF09\uFF1A\n- id: {entryId}\n  disabled: true\n3. \u7ED3\u675F\u5F53\u524D\u6B63\u5728\u8FD0\u884C\u7684 dsh web \u8FDB\u7A0B\uFF0C\u91CD\u65B0\u6267\u884C dsh web --no-open\n\u65B9\u6848 B\uFF08\u4FDD\u7559\u5360\u7528\u65B9\uFF0C\u5378\u8F7D dsh-remote-mobile\uFF09\uFF1A\n\u6267\u884C\u547D\u4EE4 dsh plugin --profile web remove dsh-remote-mobile \u540E\u91CD\u542F dsh web",
     conflictReportNoEntryIdText: "[DSH \u63D2\u4EF6\u51B2\u7A81\u8BCA\u65AD\u62A5\u544A]\n\u73B0\u8C61\uFF1Adsh-remote-mobile \u8BBE\u7F6E\u9762\u677F\u63D0\u793A\u300C\u68C0\u6D4B\u5230\u5176\u4ED6\u8FDC\u7A0B\u63A5\u5165\u63D2\u4EF6\u300D\u3002\n\u539F\u56E0\uFF1A\u53E6\u4E00\u6B3E\u8FDC\u7A0B/Web \u63A5\u5165\u7C7B\u63D2\u4EF6\u5360\u7528\u4E86 Cordis \u5171\u4EAB\u670D\u52A1 remoteWebUiPairing\uFF0Cdsh-remote-mobile \u4E3A\u4FDD\u8BC1\u6B63\u5E38\u542F\u52A8\u5DF2\u81EA\u52A8\u8BA9\u51FA\u8BE5\u670D\u52A1\uFF0C\u5F53\u524D\u4E24\u5957\u8FDC\u7A0B\u63A5\u5165\u529F\u80FD\u5E76\u5B58\u3002\n\u5360\u7528\u65B9\u63D2\u4EF6\u5305\u540D\uFF1A{plugin}\n\u5360\u7528\u65B9 loader entry id\uFF1A\u672A\u80FD\u81EA\u52A8\u8BC6\u522B\n\u5904\u7406\u65B9\u6848\uFF08\u4E8C\u9009\u4E00\uFF09\uFF1A\n\u65B9\u6848 A\uFF08\u4FDD\u7559 dsh-remote-mobile\uFF0C\u7981\u7528\u5360\u7528\u65B9\uFF09\uFF1A\n1. \u6267\u884C dsh --dump-config \u67E5\u770B\u5168\u90E8 loader entry\uFF0C\u627E\u5230\u5360\u7528\u65B9\u63D2\u4EF6\u5BF9\u5E94\u7684\u6761\u76EE id\n2. \u6253\u5F00\u914D\u7F6E\u6587\u4EF6 ~/.dsh/profiles/web/cordis.patch.yml\uFF0C\u5728\u6587\u4EF6\u672B\u5C3E\u8FFD\u52A0\uFF08\u6CE8\u610F YAML \u7F29\u8FDB\uFF09\uFF1A\n- id: <\u5360\u7528\u65B9\u6761\u76EEid>\n  disabled: true\n3. \u7ED3\u675F\u5F53\u524D\u6B63\u5728\u8FD0\u884C\u7684 dsh web \u8FDB\u7A0B\uFF0C\u91CD\u65B0\u6267\u884C dsh web --no-open\n\u65B9\u6848 B\uFF08\u4FDD\u7559\u5360\u7528\u65B9\uFF0C\u5378\u8F7D dsh-remote-mobile\uFF09\uFF1A\n\u6267\u884C\u547D\u4EE4 dsh plugin --profile web remove dsh-remote-mobile \u540E\u91CD\u542F dsh web",
     conflictBannerDismiss: "\u77E5\u9053\u4E86",
+    // 移动端目录选择器（添加工作区 / 选择文件夹）提醒与一键配置
+    dirPickerBannerTitle: "\u624B\u673A\u7AEF\u300C\u6DFB\u52A0\u5DE5\u4F5C\u533A / \u9009\u62E9\u6587\u4EF6\u5939\u300D\u53D7\u9650\u63D0\u9192",
+    dirPickerBannerBody: "\u5F53\u524D DSH \u6838\u5FC3\u7ED1\u5B9A\u5728\u672C\u5730\u56DE\u73AF\uFF08127.0.0.1\uFF09\uFF0C\u5B98\u65B9\u76EE\u5F55\u9009\u62E9\u5668\uFF08dsh-host-directory-picker-auto\uFF09\u4F1A\u5C06\u6765\u81EA 3081 \u4EE3\u7406\u7684\u624B\u673A\u8BF7\u6C42\u8BEF\u5224\u4E3A\u300C\u672C\u673A\u64CD\u4F5C\u300D\uFF0C\u4ECE\u800C\u628A\u6587\u4EF6\u5939\u9009\u62E9\u7A97\u53E3\u5F39\u5728\u7535\u8111\u5C4F\u5E55\u4E0A\uFF0C\u5BFC\u81F4\u624B\u673A\u7AEF\u4E00\u76F4\u7B49\u5F85\u3001\u65E0\u6CD5\u6DFB\u52A0\u5DE5\u4F5C\u533A\u3002\n\u53EF\u70B9\u51FB\u4E0B\u65B9\u6309\u94AE\u4E00\u952E\u5199\u5165\u7F51\u9875\u5185\u76EE\u5F55\u9009\u62E9\u5668\uFF08browse \u6A21\u5F0F\uFF0C\u5DF2\u5185\u7F6E\u9632\u91CD\u590D\u53BB\u91CD\uFF09\uFF0C\u5F00\u542F\u540E\u624B\u673A\u4E0E\u7535\u8111\u5747\u53EF\u76F4\u63A5\u5728\u7F51\u9875\u5185\u6D4F\u89C8\u5E76\u9009\u62E9\u6587\u4EF6\u5939\u3002",
+    dirPickerEnableBtn: "\u26A1 \u4E00\u952E\u5F00\u542F\u7F51\u9875\u76EE\u5F55\u9009\u62E9\u5668",
+    dirPickerEnablingBtn: "\u6B63\u5728\u5199\u5165\u914D\u7F6E...",
+    dirPickerCopyYamlBtn: "\u{1F4CB} \u590D\u5236 YAML \u914D\u7F6E",
+    dirPickerCopiedYamlTip: "\u5DF2\u590D\u5236\u76EE\u5F55\u9009\u62E9\u5668 YAML \u914D\u7F6E\uFF0C\u53EF\u7C98\u8D34\u5230 cordis.patch.yml",
+    dirPickerBannerDismiss: "\u6682\u4E0D\u5904\u7406",
+    dirPickerRestartBannerTitle: "\u7F51\u9875\u76EE\u5F55\u9009\u62E9\u5668\u914D\u7F6E\u5DF2\u5199\u5165\uFF08\u7B49\u5F85\u751F\u6548\uFF09",
+    dirPickerRestartBannerBody: "\u5DF2\u5C06\u7F51\u9875\u5185\u76EE\u5F55\u9009\u62E9\u5668\u914D\u7F6E\u5199\u5165 {path}\u3002\u82E5 DSH \u672A\u81EA\u52A8\u70ED\u91CD\u8F7D\uFF0C\u8BF7\u91CD\u542F dsh web \u5E76\u5237\u65B0\u624B\u673A\u9875\u9762\uFF0C\u5373\u53EF\u5728\u624B\u673A\u7AEF\u6B63\u5E38\u6DFB\u52A0\u5DE5\u4F5C\u533A\u3002",
+    dirPickerEnabledToast: "\u5DF2\u6210\u529F\u5199\u5165\u7F51\u9875\u76EE\u5F55\u9009\u62E9\u5668\u914D\u7F6E\uFF01\u82E5\u672A\u81EA\u52A8\u70ED\u91CD\u8F7D\uFF0C\u8BF7\u91CD\u542F dsh web \u751F\u6548\u3002",
+    dirPickerDisabledToast: "\u5DF2\u79FB\u9664\u7F51\u9875\u76EE\u5F55\u9009\u62E9\u5668\u914D\u7F6E\uFF08\u6062\u590D PC \u539F\u751F\u5F39\u7A97\uFF09\uFF0C\u91CD\u542F dsh web \u540E\u751F\u6548\u3002",
+    dirPickerDisableConfirm: "\u786E\u5B9A\u8981\u6062\u590D\u4E3A PC \u539F\u751F\u7CFB\u7EDF\u76EE\u5F55\u9009\u62E9\u5668\u5417\uFF1F\n\n\u6062\u590D\u540E\uFF0C\u7535\u8111\u7AEF\u5C06\u91CD\u65B0\u5F39\u51FA macOS / Windows \u539F\u751F\u6587\u4EF6\u5939\u7A97\u53E3\uFF0C\u4F46\u624B\u673A\u7AEF\u70B9\u51FB\u300C\u6DFB\u52A0\u5DE5\u4F5C\u533A / \u9009\u62E9\u6587\u4EF6\u5939\u300D\u65F6\u4F1A\u5F39\u5728\u7535\u8111\u684C\u9762\u4E0A\uFF0C\u5BFC\u81F4\u624B\u673A\u7AEF\u65E0\u6CD5\u72EC\u7ACB\u6DFB\u52A0\u5DE5\u4F5C\u533A\u3002",
+    dirPickerSectionTitle: "\u{1F4C1} \u79FB\u52A8\u7AEF\u6DFB\u52A0\u5DE5\u4F5C\u533A\uFF08\u76EE\u5F55\u9009\u62E9\u5668\u6A21\u5F0F\uFF09",
+    dirPickerSectionDesc: "\u63A7\u5236\u70B9\u51FB\u300C\u6DFB\u52A0\u5DE5\u4F5C\u533A / \u9009\u62E9\u6587\u4EF6\u5939\u300D\u65F6\u4F7F\u7528\u7F51\u9875\u5185\u76EE\u5F55\u6D4F\u89C8\u5668\uFF08\u624B\u673A+\u7535\u8111\u901A\u7528\uFF09\u8FD8\u662F\u7535\u8111\u7CFB\u7EDF\u539F\u751F\u5F39\u7A97\uFF08\u4EC5\u7535\u8111\u53EF\u7528\uFF09\u3002\u63D2\u4EF6\u5728\u5199\u5165 cordis.patch.yml \u65F6\u4F1A\u81EA\u52A8\u6267\u884C\u4E25\u683C\u5E42\u7B49\u53BB\u91CD\u3002",
+    dirPickerStatusActive: "\u{1F7E2} \u5DF2\u542F\u7528\u7F51\u9875\u5185\u76EE\u5F55\u9009\u62E9\u5668\uFF08\u624B\u673A\u7AEF\u53EF\u6B63\u5E38\u6DFB\u52A0\u5DE5\u4F5C\u533A\uFF09",
+    dirPickerStatusPendingRestart: "\u23F3 \u5DF2\u5199\u5165\u914D\u7F6E\uFF08\u91CD\u542F DSH \u6216\u70ED\u91CD\u8F7D\u540E\u751F\u6548\uFF09",
+    dirPickerStatusNativeWarn: "\u26A0\uFE0F \u5F53\u524D\u4E3A\u7CFB\u7EDF\u539F\u751F\u5F39\u7A97\uFF08\u624B\u673A\u7AEF\u65E0\u6CD5\u9009\u62E9\u6587\u4EF6\u5939\uFF09",
+    dirPickerRestoreNativeBtn: "\u{1F504} \u6062\u590D PC \u539F\u751F\u76EE\u5F55\u9009\u62E9\u5668",
+    dirPickerPatchFileLabel: "\u76EE\u6807\u914D\u7F6E\u6587\u4EF6\uFF1A",
     // Toast 提示
     toastDeviceConnected: "\u{1F389} \u65B0\u8BBE\u5907\u63A5\u5165\u6210\u529F\uFF1A{name} ({ip})",
     toastDeviceOnline: "\u{1F4F6} \u8BBE\u5907\u91CD\u65B0\u4E0A\u7EBF\uFF1A{name} ({ip})",
@@ -952,6 +1022,30 @@ var translations = {
     saveConfigSuccessToast: "Security policy successfully saved and synced to settings.json!",
     restoreDefaultsSuccessToast: "Default security policies restored and applied immediately!",
     saveConfigFailTip: "Parameters must be valid integers greater than 0",
+    // Card 9: Access Proxy Configuration
+    proxyConfigCardTitle: "Access Proxy Configuration",
+    proxyConfigCardDesc: "Configure the access mode, proxy listener, and trusted hosts. Restart DSH after saving.",
+    proxyModeLabel: "Access mode",
+    proxyModeHint: "proxy: core stays on loopback and the plugin forwards; direct: no proxy, access the core directly",
+    proxyModeProxy: "Secure access proxy (proxy)",
+    proxyModeDirect: "Direct core (direct)",
+    proxyPortLabel: "Proxy port",
+    proxyPortHint: "Default 3081; automatically increments if occupied",
+    proxyHostLabel: "Proxy listen address",
+    proxyHostHint: "0.0.0.0 means all interfaces; 127.0.0.1 means local only",
+    proxyTrustedHostsLabel: "Trusted hosts",
+    proxyTrustedHostsHint: "One per line, e.g. xxx.tailnet.ts.net; custom reverse-proxy domains must be listed",
+    proxyRestartNote: "Restart DSH after saving to rebind the listen address/port.",
+    proxySaveBtn: "\u{1F4BE} Save Access Config",
+    proxySavingBtn: "Saving...",
+    proxyResetBtn: "\u{1F504} Restore Defaults",
+    proxySaveConfirm: "Save the access configuration? A DSH restart is required.",
+    proxyResetConfirm: "Restore defaults (proxy, 3081, 0.0.0.0, no trusted hosts)?",
+    proxySavedToast: "Access configuration saved; restart DSH to apply.",
+    proxyResetToast: "Default access configuration restored; restart DSH to apply.",
+    proxySaveFailTip: "Check the port, listen address, and trusted-host format",
+    proxyCurrentRuntime: "Current runtime",
+    proxyNotReady: "Secure access proxy is not ready. Start the proxy first.",
     // Card 8: Mobile Style Snippets (style mini-plugin)
     tabAccess: "Access",
     tabDevices: "Devices & Security",
@@ -995,6 +1089,26 @@ var translations = {
     conflictReportText: '[DSH plugin conflict diagnosis]\nSymptom: the dsh-remote-mobile settings panel shows "Another remote-access plugin detected".\nCause: another remote/Web access plugin registered the shared Cordis service remoteWebUiPairing first; dsh-remote-mobile yielded it to keep startup safe, so both remote features now run in parallel.\nConflicting plugin package: {plugin}\nConflicting loader entry id: {entryId}\nFix (choose ONE):\nOption A (keep dsh-remote-mobile, disable the other):\n1. Open ~/.dsh/profiles/web/cordis.patch.yml\n2. Append these two lines at the end (mind YAML indentation, two spaces before disabled):\n- id: {entryId}\n  disabled: true\n3. Stop the running dsh web process, then run dsh web --no-open again\nOption B (keep the other, remove dsh-remote-mobile):\nRun dsh plugin --profile web remove dsh-remote-mobile and restart dsh web',
     conflictReportNoEntryIdText: '[DSH plugin conflict diagnosis]\nSymptom: the dsh-remote-mobile settings panel shows "Another remote-access plugin detected".\nCause: another remote/Web access plugin registered the shared Cordis service remoteWebUiPairing first; dsh-remote-mobile yielded it to keep startup safe, so both remote features now run in parallel.\nConflicting plugin package: {plugin}\nConflicting loader entry id: could not be detected automatically\nFix (choose ONE):\nOption A (keep dsh-remote-mobile, disable the other):\n1. Run dsh --dump-config to list all loader entries and find the entry id of the conflicting plugin\n2. Open ~/.dsh/profiles/web/cordis.patch.yml and append at the end (mind YAML indentation):\n- id: <the conflicting entry id>\n  disabled: true\n3. Stop the running dsh web process, then run dsh web --no-open again\nOption B (keep the other, remove dsh-remote-mobile):\nRun dsh plugin --profile web remove dsh-remote-mobile and restart dsh web',
     conflictBannerDismiss: "Got it",
+    // Mobile directory picker (Add Workspace / Select Folder) reminder & one-click patch
+    dirPickerBannerTitle: 'Mobile "Add Workspace / Select Folder" Limitation',
+    dirPickerBannerBody: "Because the DSH core stays on loopback (127.0.0.1), the official auto directory picker (dsh-host-directory-picker-auto) mistakes mobile requests via proxy 3081 for local desktop sessions and opens the native OS folder dialog on your PC screen \u2014 leaving your phone stuck waiting and unable to add workspaces.\nClick below to enable the in-app web directory browser (browse mode, with strict deduplication) so both mobile and PC can pick folders directly inside the web UI.",
+    dirPickerEnableBtn: "\u26A1 Enable In-App Directory Browser",
+    dirPickerEnablingBtn: "Applying patch...",
+    dirPickerCopyYamlBtn: "\u{1F4CB} Copy YAML Snippet",
+    dirPickerCopiedYamlTip: "YAML snippet copied! Paste it into cordis.patch.yml",
+    dirPickerBannerDismiss: "Dismiss",
+    dirPickerRestartBannerTitle: "In-App Directory Browser Configured (Pending Reload)",
+    dirPickerRestartBannerBody: "Configuration has been written to {path}. If DSH does not hot-reload automatically, please restart dsh web and refresh your mobile browser to add workspaces on mobile.",
+    dirPickerEnabledToast: "In-app directory browser enabled! Restart dsh web if HMR did not reload automatically.",
+    dirPickerDisabledToast: "Restored PC native directory picker; restart dsh web to apply.",
+    dirPickerDisableConfirm: "Restore the PC native OS folder dialog?\n\nOnce restored, PC will open the native macOS / Windows folder window again, but mobile devices will NOT be able to pick folders or add workspaces.",
+    dirPickerSectionTitle: "\u{1F4C1} Mobile Workspace Directory Picker Mode",
+    dirPickerSectionDesc: "Choose between the in-app web directory browser (works on both mobile and PC) and the native OS folder dialog (PC only). Writing to cordis.patch.yml automatically deduplicates entries.",
+    dirPickerStatusActive: "\u{1F7E2} In-App Web Directory Browser Enabled (Mobile Ready)",
+    dirPickerStatusPendingRestart: "\u23F3 Configured in patch file (Restart DSH or wait for HMR)",
+    dirPickerStatusNativeWarn: "\u26A0\uFE0F Native OS Dialog Active (Mobile cannot add workspaces)",
+    dirPickerRestoreNativeBtn: "\u{1F504} Restore PC Native Picker",
+    dirPickerPatchFileLabel: "Target patch file: ",
     // Toast
     toastDeviceConnected: "\u{1F389} New device connected: {name} ({ip})",
     toastDeviceOnline: "\u{1F4F6} Device reconnected: {name} ({ip})",
@@ -1065,7 +1179,10 @@ var import_jsx_runtime = require("react/jsx-runtime");
 function NetworkCard({ status, toggleTailscale, toggleLan, copyText, lang }) {
   const tsHost = status.tailscaleIp || "100.x.y.z";
   const lanHost = status.lanIp || "127.0.0.1";
-  const port = typeof window !== "undefined" && window.location.port || "3080";
+  const port = resolveAccessPort(status);
+  const portReady = port !== null;
+  const tailscaleAddress = portReady ? `http://${tsHost}:${port}` : null;
+  const lanAddress = portReady ? `http://${lanHost}:${port}` : null;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
     {
@@ -1099,6 +1216,29 @@ function NetworkCard({ status, toggleTailscale, toggleLan, copyText, lang }) {
             children: t("netCardDesc", lang)
           }
         ),
+        status?.proxy?.mode === "proxy" && status.proxy.running === false ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            style: {
+              background: "rgba(239, 68, 68, 0.12)",
+              border: "1px solid rgba(239, 68, 68, 0.35)",
+              borderRadius: "8px",
+              padding: "10px 12px",
+              marginBottom: "16px",
+              fontSize: "12px",
+              color: "var(--dsw-alias-label-error, #ef4444)",
+              lineHeight: "1.5",
+              textAlign: "left"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("strong", { children: [
+                "\u26A0\uFE0F ",
+                lang === "en" ? "Secure Proxy Not Ready" : "\u5B89\u5168\u63A5\u5165\u4EE3\u7406\u672A\u5C31\u7EEA"
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: status.proxy.error ? `${lang === "en" ? "Failure reason: " : "\u542F\u52A8\u5931\u8D25\uFF1A"}${status.proxy.error}` : lang === "en" ? "Secure proxy is initializing or failed to bind port. External devices cannot connect currently." : "\u5B89\u5168\u63A5\u5165\u4EE3\u7406\u6B63\u5728\u542F\u52A8\u6216\u7AEF\u53E3\u7ED1\u5B9A\u5931\u8D25\uFF0C\u5916\u90E8\u624B\u673A\u8BBE\u5907\u5F53\u524D\u6682\u65F6\u65E0\u6CD5\u8FDE\u63A5\u3002" })
+            ]
+          }
+        ) : null,
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
           "div",
           {
@@ -1237,7 +1377,7 @@ function NetworkCard({ status, toggleTailscale, toggleLan, copyText, lang }) {
                   style: {
                     fontSize: "13px",
                     fontFamily: "monospace",
-                    color: "var(--dsw-alias-brand-primary, #3b82f6)",
+                    color: portReady ? "var(--dsw-alias-brand-primary, #3b82f6)" : "var(--dsw-alias-label-error, #ef4444)",
                     display: "flex",
                     alignItems: "center",
                     justifyContent: "space-between",
@@ -1258,22 +1398,24 @@ function NetworkCard({ status, toggleTailscale, toggleLan, copyText, lang }) {
                           flex: 1,
                           minWidth: 0
                         },
-                        children: `http://${tsHost}:${port}`
+                        children: tailscaleAddress || t("proxyNotReady", lang)
                       }
                     ),
                     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                       "button",
                       {
                         type: "button",
-                        onClick: () => copyText(`http://${tsHost}:${port}`, t("copiedTip", lang)),
+                        disabled: !portReady,
+                        onClick: () => tailscaleAddress && copyText(tailscaleAddress, t("copiedTip", lang)),
                         style: {
                           padding: "3px 10px",
                           background: "var(--dsw-alias-bg-layer-3, rgba(255, 255, 255, 0.08))",
                           border: "1px solid var(--dsw-alias-border-l2, rgba(128,128,128,0.25))",
                           borderRadius: "4px",
                           fontSize: "11px",
-                          cursor: "pointer",
+                          cursor: portReady ? "pointer" : "not-allowed",
                           color: "var(--dsw-alias-label-secondary, inherit)",
+                          opacity: portReady ? 1 : 0.4,
                           whiteSpace: "nowrap",
                           flexShrink: 0
                         },
@@ -1423,7 +1565,7 @@ function NetworkCard({ status, toggleTailscale, toggleLan, copyText, lang }) {
               style: {
                 fontSize: "13px",
                 fontFamily: "monospace",
-                color: "var(--dsw-alias-brand-primary, #3b82f6)",
+                color: portReady ? "var(--dsw-alias-brand-primary, #3b82f6)" : "var(--dsw-alias-label-error, #ef4444)",
                 display: "flex",
                 alignItems: "center",
                 justifyContent: "space-between",
@@ -1444,22 +1586,24 @@ function NetworkCard({ status, toggleTailscale, toggleLan, copyText, lang }) {
                       flex: 1,
                       minWidth: 0
                     },
-                    children: `http://${lanHost}:${port}`
+                    children: lanAddress || t("proxyNotReady", lang)
                   }
                 ),
                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                   "button",
                   {
                     type: "button",
-                    onClick: () => copyText(`http://${lanHost}:${port}`, t("copiedTip", lang)),
+                    disabled: !portReady,
+                    onClick: () => lanAddress && copyText(lanAddress, t("copiedTip", lang)),
                     style: {
                       padding: "3px 10px",
                       background: "var(--dsw-alias-bg-layer-3, rgba(255, 255, 255, 0.08))",
                       border: "1px solid var(--dsw-alias-border-l2, rgba(128,128,128,0.25))",
                       borderRadius: "4px",
                       fontSize: "11px",
-                      cursor: "pointer",
+                      cursor: portReady ? "pointer" : "not-allowed",
                       color: "var(--dsw-alias-label-secondary, inherit)",
+                      opacity: portReady ? 1 : 0.4,
                       whiteSpace: "nowrap",
                       flexShrink: 0
                     },
@@ -1568,10 +1712,12 @@ function QrPairingCard({
   copyDirectLink,
   lang
 }) {
-  const port = typeof window !== "undefined" && window.location.port || "3080";
+  const port = resolveAccessPort(status);
+  const portReady = port !== null;
+  const proxyUnavailable = status?.proxy?.mode === "proxy" && status.proxy.running === false;
   const isExpired = timeLeft <= 0;
   const currentHost = selectedTab === "lan" && status.lanIp ? status.lanIp : status.tailscaleIp || status.lanIp || typeof window !== "undefined" && window.location.hostname || "127.0.0.1";
-  const directLink = `http://${currentHost}:${port}/auth?token=${status.code || ""}`;
+  const directLink = portReady ? buildDirectLink(currentHost, port, status.code || "") : "";
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "div",
     {
@@ -1606,7 +1752,51 @@ function QrPairingCard({
             children: t("pairingCardDesc", lang)
           }
         ),
-        showQr ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        status?.proxy?.mode === "proxy" && status.proxy.running === false ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          "div",
+          {
+            style: {
+              background: "rgba(239, 68, 68, 0.12)",
+              border: "1px solid rgba(239, 68, 68, 0.35)",
+              borderRadius: "8px",
+              padding: "12px 14px",
+              marginBottom: "14px",
+              fontSize: "13px",
+              color: "var(--dsw-alias-label-error, #ef4444)",
+              lineHeight: "1.6",
+              textAlign: "left"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("strong", { children: [
+                "\u26A0\uFE0F ",
+                lang === "en" ? "Secure Proxy Error" : "\u5B89\u5168\u63A5\u5165\u4EE3\u7406\u672A\u5C31\u7EEA"
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { marginTop: "4px", fontSize: "12px" }, children: status.proxy.error ? `${lang === "en" ? "Failure reason: " : "\u542F\u52A8\u5931\u8D25\uFF1A"}${status.proxy.error}` : lang === "en" ? "Secure proxy is initializing or port binding failed. External devices cannot connect currently." : "\u5B89\u5168\u63A5\u5165\u4EE3\u7406\u6B63\u5728\u542F\u52A8\u6216\u7AEF\u53E3\u7ED1\u5B9A\u5931\u8D25\uFF0C\u5916\u90E8\u624B\u673A\u8BBE\u5907\u6682\u65F6\u65E0\u6CD5\u626B\u7801\u8FDE\u63A5\u3002" }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { marginTop: "4px", fontSize: "11px", color: "var(--dsw-alias-label-tertiary, #888)" }, children: lang === "en" ? "Tip: Check whether the secure proxy port (default 3081) is in use or inspect background logs." : "\u6392\u67E5\u5EFA\u8BAE\uFF1A\u8BF7\u68C0\u67E5\u5B89\u5168\u63A5\u5165\u4EE3\u7406\u7AEF\u53E3\uFF08\u9ED8\u8BA4 3081\uFF09\u662F\u5426\u88AB\u5176\u4ED6\u8FDB\u7A0B\u5360\u7528\uFF0C\u6216\u68C0\u67E5\u540E\u53F0\u7EC8\u7AEF\u65E5\u5FD7\u3002" })
+            ]
+          }
+        ) : null,
+        !portReady && !status.loading && !proxyUnavailable ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "div",
+          {
+            style: {
+              background: "rgba(245, 158, 11, 0.12)",
+              border: "1px solid rgba(245, 158, 11, 0.35)",
+              borderRadius: "8px",
+              padding: "12px 14px",
+              marginBottom: "14px",
+              fontSize: "13px",
+              color: "var(--dsw-alias-label-secondary, inherit)",
+              lineHeight: "1.6",
+              textAlign: "left"
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("strong", { children: [
+              "\u26A0\uFE0F ",
+              t("proxyNotReady", lang)
+            ] })
+          }
+        ) : null,
+        showQr && portReady && !proxyUnavailable ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
           "div",
           {
             style: {
@@ -1767,28 +1957,30 @@ function QrPairingCard({
                     fontSize: "32px",
                     fontWeight: "800",
                     letterSpacing: showCode ? "6px" : "4px",
-                    color: isExpired ? "var(--dsw-alias-label-error, #ef4444)" : "var(--dsw-alias-brand-primary, #3b82f6)",
+                    color: status?.proxy?.mode === "proxy" && status.proxy.running === false || isExpired ? "var(--dsw-alias-label-error, #ef4444)" : "var(--dsw-alias-brand-primary, #3b82f6)",
                     fontFamily: "monospace",
                     userSelect: "all"
                   },
-                  children: isExpired ? lang === "en" ? "EXPIRED" : "\u5DF2\u8FC7\u671F" : showCode ? status.code : "\u2022\u2022\u2022\u2022\u2022\u2022"
+                  children: status?.proxy?.mode === "proxy" && status.proxy.running === false ? lang === "en" ? "DISABLED" : "\u5DF2\u505C\u7528" : isExpired ? lang === "en" ? "EXPIRED" : "\u5DF2\u8FC7\u671F" : showCode ? status.code : "\u2022\u2022\u2022\u2022\u2022\u2022"
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                 "button",
                 {
                   type: "button",
+                  disabled: status?.proxy?.mode === "proxy" && status.proxy.running === false,
                   onClick: () => setShowCode(!showCode),
                   title: showCode ? t("clickToHide", lang) : t("clickToReveal", lang),
                   style: {
                     background: "transparent",
                     border: "none",
                     color: "var(--dsw-alias-label-secondary, #888)",
-                    cursor: "pointer",
+                    cursor: status?.proxy?.mode === "proxy" && status.proxy.running === false ? "not-allowed" : "pointer",
                     display: "flex",
                     alignItems: "center",
                     justifyContent: "center",
-                    padding: "4px"
+                    padding: "4px",
+                    opacity: status?.proxy?.mode === "proxy" && status.proxy.running === false ? 0.4 : 1
                   },
                   children: showCode ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { style: { width: "20px", height: "20px", fill: "currentColor" }, viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" }) }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { style: { width: "20px", height: "20px", fill: "currentColor" }, viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z" }) })
                 }
@@ -1801,7 +1993,7 @@ function QrPairingCard({
           {
             style: {
               fontSize: "12px",
-              color: isExpired ? "var(--dsw-alias-label-error, #ef4444)" : "var(--dsw-alias-label-secondary, #888)",
+              color: status?.proxy?.mode === "proxy" && status.proxy.running === false || isExpired ? "var(--dsw-alias-label-error, #ef4444)" : "var(--dsw-alias-label-secondary, #888)",
               margin: "4px 0 16px 0",
               display: "flex",
               alignItems: "center",
@@ -1817,11 +2009,11 @@ function QrPairingCard({
                     width: "8px",
                     height: "8px",
                     borderRadius: "50%",
-                    background: isExpired ? "#ef4444" : "#10b981"
+                    background: status?.proxy?.mode === "proxy" && status.proxy.running === false || isExpired ? "#ef4444" : "#10b981"
                   }
                 }
               ),
-              isExpired ? `\u26A0\uFE0F ${t("codeExpired", lang)}` : `${t("codeValidUntil", lang)}${formatCountdown(timeLeft, lang)}`
+              status?.proxy?.mode === "proxy" && status.proxy.running === false ? `\u26A0\uFE0F ${lang === "en" ? "Proxy Service Error" : "\u5B89\u5168\u63A5\u5165\u4EE3\u7406\u670D\u52A1\u5F02\u5E38"}` : isExpired ? `\u26A0\uFE0F ${t("codeExpired", lang)}` : `${t("codeValidUntil", lang)}${formatCountdown(timeLeft, lang)}`
             ]
           }
         ),
@@ -1839,6 +2031,7 @@ function QrPairingCard({
                 "button",
                 {
                   type: "button",
+                  disabled: proxyUnavailable || !portReady,
                   onClick: () => setShowQr(!showQr),
                   style: {
                     padding: "7px 16px",
@@ -1848,7 +2041,8 @@ function QrPairingCard({
                     borderRadius: "8px",
                     fontSize: "13px",
                     fontWeight: "600",
-                    cursor: "pointer",
+                    cursor: proxyUnavailable || !portReady ? "not-allowed" : "pointer",
+                    opacity: proxyUnavailable || !portReady ? 0.4 : 1,
                     whiteSpace: "nowrap",
                     flexShrink: 0
                   },
@@ -1859,6 +2053,7 @@ function QrPairingCard({
                 "button",
                 {
                   type: "button",
+                  disabled: status?.proxy?.mode === "proxy" && status.proxy.running === false,
                   onClick: refreshStatusAndCode,
                   style: {
                     padding: "7px 16px",
@@ -1868,7 +2063,8 @@ function QrPairingCard({
                     borderRadius: "8px",
                     fontSize: "13px",
                     fontWeight: "600",
-                    cursor: "pointer",
+                    cursor: status?.proxy?.mode === "proxy" && status.proxy.running === false ? "not-allowed" : "pointer",
+                    opacity: status?.proxy?.mode === "proxy" && status.proxy.running === false ? 0.4 : 1,
                     whiteSpace: "nowrap",
                     flexShrink: 0
                   },
@@ -3037,21 +3233,365 @@ function ConfigCard({
   );
 }
 
-// src/client/components/StylesCard.jsx
+// src/client/components/ProxyConfigCard.jsx
 var import_react8 = __toESM(require("react"), 1);
 var import_jsx_runtime8 = require("react/jsx-runtime");
+function ProxyConfigCard({
+  status,
+  modeInput,
+  setModeInput,
+  proxyPortInput,
+  setProxyPortInput,
+  proxyHostInput,
+  setProxyHostInput,
+  trustedHostsInput,
+  setTrustedHostsInput,
+  saveProxyConfig,
+  resetProxyConfigDefaults,
+  toggleDirectoryPicker,
+  isPatchingDirPicker,
+  copyText,
+  isSaving,
+  lang
+}) {
+  const isDirect = modeInput === "direct";
+  const dirPicker = status && status.directoryPicker || {};
+  const isBrowseEnabled = Boolean(dirPicker.patchEnabled || dirPicker.runtimeActive);
+  const fieldLabelStyle = {
+    fontSize: "12px",
+    fontWeight: "600",
+    color: "var(--dsw-alias-label-primary, inherit)"
+  };
+  const fieldHintStyle = {
+    fontSize: "11px",
+    color: "var(--dsw-alias-label-tertiary, #888)",
+    lineHeight: 1.5
+  };
+  const inputStyle = {
+    height: "34px",
+    background: "var(--dsw-alias-bg-layer-1, rgba(0,0,0,0.15))",
+    border: "1px solid var(--dsw-alias-border-l2, rgba(128,128,128,0.25))",
+    borderRadius: "6px",
+    padding: "0 10px",
+    color: "inherit",
+    fontSize: "13px",
+    outline: "none",
+    boxSizing: "border-box",
+    width: "100%"
+  };
+  const fieldBoxStyle = {
+    display: "flex",
+    flexDirection: "column",
+    gap: "6px",
+    background: "var(--dsw-alias-bg-layer-2, rgba(128,128,128,0.06))",
+    border: "1px solid var(--dsw-alias-border-l2, rgba(128,128,128,0.12))",
+    borderRadius: "8px",
+    padding: "10px 12px"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    "div",
+    {
+      style: {
+        background: "var(--dsw-alias-bg-layer-3, rgba(128,128,128,0.06))",
+        border: "1px solid var(--dsw-alias-border-l2, rgba(128,128,128,0.15))",
+        borderRadius: "12px",
+        padding: "14px",
+        display: "flex",
+        flexDirection: "column",
+        gap: "12px"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: "8px 12px", flexWrap: "wrap" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { fontSize: "16px" }, children: "\u{1F50C}" }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { fontSize: "15px", fontWeight: "600", color: "var(--dsw-alias-label-primary, inherit)" }, children: t("proxyConfigCardTitle", lang) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+            "span",
+            {
+              style: {
+                fontSize: "11px",
+                color: "var(--dsw-alias-label-tertiary, #888)",
+                background: "var(--dsw-alias-bg-layer-2, rgba(128,128,128,0.08))",
+                border: "1px solid var(--dsw-alias-border-l2, rgba(128,128,128,0.15))",
+                borderRadius: "999px",
+                padding: "3px 8px",
+                whiteSpace: "nowrap"
+              },
+              children: [
+                t("proxyCurrentRuntime", lang),
+                ": ",
+                status?.proxy?.mode || "-",
+                " / ",
+                status?.proxy?.activePort || "-"
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { fontSize: "12px", color: "var(--dsw-alias-label-tertiary, #888)", lineHeight: 1.5 }, children: t("proxyConfigCardDesc", lang) }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))", gap: "12px" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: fieldBoxStyle, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("label", { style: fieldLabelStyle, children: t("proxyModeLabel", lang) }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+              "select",
+              {
+                value: modeInput,
+                onChange: (e) => setModeInput(e.target.value),
+                style: { ...inputStyle, cursor: "pointer" },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: "proxy", children: t("proxyModeProxy", lang) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: "direct", children: t("proxyModeDirect", lang) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: fieldHintStyle, children: t("proxyModeHint", lang) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: fieldBoxStyle, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("label", { style: fieldLabelStyle, children: t("proxyPortLabel", lang) }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              "input",
+              {
+                type: "number",
+                min: "1",
+                max: "65535",
+                value: proxyPortInput,
+                onChange: (e) => setProxyPortInput(e.target.value),
+                disabled: isDirect,
+                style: { ...inputStyle, opacity: isDirect ? 0.55 : 1 }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: fieldHintStyle, children: t("proxyPortHint", lang) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: fieldBoxStyle, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("label", { style: fieldLabelStyle, children: t("proxyHostLabel", lang) }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              "input",
+              {
+                type: "text",
+                value: proxyHostInput,
+                onChange: (e) => setProxyHostInput(e.target.value),
+                placeholder: "0.0.0.0",
+                disabled: isDirect,
+                style: { ...inputStyle, opacity: isDirect ? 0.55 : 1 }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: fieldHintStyle, children: t("proxyHostHint", lang) })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: fieldBoxStyle, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("label", { style: fieldLabelStyle, children: t("proxyTrustedHostsLabel", lang) }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "textarea",
+            {
+              value: trustedHostsInput,
+              onChange: (e) => setTrustedHostsInput(e.target.value),
+              placeholder: "xxx.tailnet.ts.net\ndsh.example.com",
+              rows: 3,
+              spellCheck: false,
+              style: {
+                ...inputStyle,
+                height: "auto",
+                minHeight: "70px",
+                padding: "8px 10px",
+                resize: "vertical",
+                fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace"
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: fieldHintStyle, children: t("proxyTrustedHostsHint", lang) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { fontSize: "11px", color: "#f59e0b", lineHeight: 1.5 }, children: [
+          "\u26A0\uFE0F ",
+          t("proxyRestartNote", lang)
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "flex-end", gap: "10px", flexWrap: "wrap" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: resetProxyConfigDefaults,
+              disabled: isSaving,
+              style: {
+                padding: "6px 14px",
+                background: "transparent",
+                border: "1px solid var(--dsw-alias-border-l2, rgba(128,128,128,0.25))",
+                color: "var(--dsw-alias-label-secondary, inherit)",
+                borderRadius: "6px",
+                fontSize: "12px",
+                cursor: isSaving ? "not-allowed" : "pointer",
+                opacity: isSaving ? 0.6 : 1,
+                whiteSpace: "nowrap"
+              },
+              children: t("proxyResetBtn", lang)
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: saveProxyConfig,
+              disabled: isSaving,
+              style: {
+                padding: "6px 18px",
+                background: "#2563eb",
+                border: "none",
+                color: "#ffffff",
+                borderRadius: "6px",
+                fontSize: "12px",
+                fontWeight: "600",
+                cursor: isSaving ? "not-allowed" : "pointer",
+                opacity: isSaving ? 0.7 : 1,
+                whiteSpace: "nowrap",
+                boxShadow: "0 2px 6px rgba(37, 99, 235, 0.3)"
+              },
+              children: isSaving ? t("proxySavingBtn", lang) : t("proxySaveBtn", lang)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+          "div",
+          {
+            style: {
+              ...fieldBoxStyle,
+              marginTop: "4px",
+              border: isBrowseEnabled ? "1px solid rgba(16, 185, 129, 0.3)" : "1px solid rgba(245, 158, 11, 0.35)",
+              background: isBrowseEnabled ? "rgba(16, 185, 129, 0.06)" : "rgba(245, 158, 11, 0.08)"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    gap: "8px",
+                    flexWrap: "wrap"
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: fieldLabelStyle, children: t("dirPickerSectionTitle", lang) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      "span",
+                      {
+                        style: {
+                          fontSize: "11px",
+                          fontWeight: "600",
+                          color: isBrowseEnabled ? "#10b981" : "#f59e0b"
+                        },
+                        children: dirPicker.restartRequired ? t("dirPickerStatusPendingRestart", lang) : isBrowseEnabled ? t("dirPickerStatusActive", lang) : t("dirPickerStatusNativeWarn", lang)
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: fieldHintStyle, children: t("dirPickerSectionDesc", lang) }),
+              dirPicker.patchFilePath ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                "div",
+                {
+                  style: {
+                    fontSize: "11px",
+                    color: "var(--dsw-alias-label-tertiary, #888)",
+                    fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+                    wordBreak: "break-all"
+                  },
+                  children: [
+                    t("dirPickerPatchFileLabel", lang),
+                    dirPicker.patchFilePath
+                  ]
+                }
+              ) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "8px",
+                    flexWrap: "wrap",
+                    marginTop: "4px"
+                  },
+                  children: [
+                    typeof toggleDirectoryPicker === "function" ? isBrowseEnabled ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      "button",
+                      {
+                        type: "button",
+                        disabled: isPatchingDirPicker,
+                        onClick: () => toggleDirectoryPicker(false),
+                        style: {
+                          padding: "5px 12px",
+                          background: "transparent",
+                          border: "1px solid var(--dsw-alias-border-l2, rgba(128,128,128,0.3))",
+                          color: "var(--dsw-alias-label-secondary, inherit)",
+                          borderRadius: "6px",
+                          fontSize: "12px",
+                          cursor: isPatchingDirPicker ? "not-allowed" : "pointer",
+                          opacity: isPatchingDirPicker ? 0.6 : 1
+                        },
+                        children: t("dirPickerRestoreNativeBtn", lang)
+                      }
+                    ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      "button",
+                      {
+                        type: "button",
+                        disabled: isPatchingDirPicker,
+                        onClick: () => toggleDirectoryPicker(true),
+                        style: {
+                          padding: "5px 12px",
+                          background: "#2563eb",
+                          border: "none",
+                          color: "#ffffff",
+                          borderRadius: "6px",
+                          fontSize: "12px",
+                          fontWeight: "600",
+                          cursor: isPatchingDirPicker ? "not-allowed" : "pointer",
+                          opacity: isPatchingDirPicker ? 0.7 : 1
+                        },
+                        children: isPatchingDirPicker ? t("dirPickerEnablingBtn", lang) : t("dirPickerEnableBtn", lang)
+                      }
+                    ) : null,
+                    typeof copyText === "function" && dirPicker.yamlSnippet ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => copyText(dirPicker.yamlSnippet, t("dirPickerCopiedYamlTip", lang)),
+                        style: {
+                          padding: "5px 10px",
+                          background: "transparent",
+                          border: "1px solid var(--dsw-alias-border-l2, rgba(128,128,128,0.25))",
+                          color: "var(--dsw-alias-label-secondary, inherit)",
+                          borderRadius: "6px",
+                          fontSize: "12px",
+                          cursor: "pointer"
+                        },
+                        children: t("dirPickerCopyYamlBtn", lang)
+                      }
+                    ) : null
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/client/components/StylesCard.jsx
+var import_react9 = __toESM(require("react"), 1);
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function StylesCard({ lang, showToast }) {
-  const [snippets, setSnippets] = (0, import_react8.useState)([]);
-  const [loading, setLoading] = (0, import_react8.useState)(true);
-  const [editingId, setEditingId] = (0, import_react8.useState)(null);
-  const [showForm, setShowForm] = (0, import_react8.useState)(false);
-  const [name, setName] = (0, import_react8.useState)("");
-  const [css, setCss] = (0, import_react8.useState)("");
-  const [pcEnabled, setPcEnabled] = (0, import_react8.useState)(false);
-  const [mobileEnabled, setMobileEnabled] = (0, import_react8.useState)(true);
-  const [expanded, setExpanded] = (0, import_react8.useState)({});
-  const [feedback, setFeedback] = (0, import_react8.useState)("");
-  const showFeedback = (0, import_react8.useCallback)((msg, type = "success") => {
+  const [snippets, setSnippets] = (0, import_react9.useState)([]);
+  const [loading, setLoading] = (0, import_react9.useState)(true);
+  const [editingId, setEditingId] = (0, import_react9.useState)(null);
+  const [showForm, setShowForm] = (0, import_react9.useState)(false);
+  const [name, setName] = (0, import_react9.useState)("");
+  const [css, setCss] = (0, import_react9.useState)("");
+  const [pcEnabled, setPcEnabled] = (0, import_react9.useState)(false);
+  const [mobileEnabled, setMobileEnabled] = (0, import_react9.useState)(true);
+  const [expanded, setExpanded] = (0, import_react9.useState)({});
+  const [feedback, setFeedback] = (0, import_react9.useState)("");
+  const showFeedback = (0, import_react9.useCallback)((msg, type = "success") => {
     if (typeof showToast === "function") {
       showToast(msg, type);
     } else {
@@ -3059,7 +3599,7 @@ function StylesCard({ lang, showToast }) {
       setTimeout(() => setFeedback(""), 3500);
     }
   }, [showToast]);
-  const load = (0, import_react8.useCallback)(() => {
+  const load = (0, import_react9.useCallback)(() => {
     fetchStyles().then((data) => {
       setSnippets(data.snippets || []);
       setLoading(false);
@@ -3068,7 +3608,7 @@ function StylesCard({ lang, showToast }) {
       showFeedback(t("stylesLoadFail", lang), "danger");
     });
   }, [lang, showFeedback]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     load();
   }, [load]);
   const toggle = (id, scope, enabled) => {
@@ -3210,7 +3750,7 @@ function StylesCard({ lang, showToast }) {
     color: "var(--dsw-alias-brand-primary, #3b82f6)",
     border: "1px solid rgba(59,130,246,0.3)"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "div",
     {
       style: {
@@ -3223,15 +3763,15 @@ function StylesCard({ lang, showToast }) {
         gap: "14px"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: "10px", flexWrap: "wrap" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { fontSize: "16px" }, children: "\u{1F3A8}" }),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { fontSize: "15px", fontWeight: "600", color: "var(--dsw-alias-label-primary, inherit)" }, children: t("stylesCardTitle", lang) })
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: "10px", flexWrap: "wrap" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { fontSize: "16px" }, children: "\u{1F3A8}" }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { fontSize: "15px", fontWeight: "600", color: "var(--dsw-alias-label-primary, inherit)" }, children: t("stylesCardTitle", lang) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", onClick: resetAll, style: miniBtnStyle, children: t("stylesResetAll", lang) })
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", onClick: resetAll, style: miniBtnStyle, children: t("stylesResetAll", lang) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { fontSize: "12px", color: "var(--dsw-alias-label-tertiary, #888)", lineHeight: "1.5" }, children: t("stylesCardDesc", lang) }),
-        feedback && typeof showToast !== "function" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { fontSize: "12px", color: "var(--dsw-alias-label-tertiary, #888)", lineHeight: "1.5" }, children: t("stylesCardDesc", lang) }),
+        feedback && typeof showToast !== "function" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "div",
           {
             style: {
@@ -3245,15 +3785,15 @@ function StylesCard({ lang, showToast }) {
             children: feedback
           }
         ) : null,
-        loading ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { fontSize: "12px", color: "var(--dsw-alias-label-tertiary, #888)" }, children: lang === "en" ? "Loading style snippets..." : "\u6B63\u5728\u52A0\u8F7D\u6837\u5F0F\u7247\u6BB5..." }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-          snippets.some((s) => s.builtin) ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { fontSize: "13px", fontWeight: "600", color: "var(--dsw-alias-label-secondary, inherit)" }, children: t("stylesPresetsTitle", lang) }),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: snippets.filter((s) => s.builtin).map((s) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: rowStyle, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: "8px", flexWrap: "wrap" }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { flex: "1 1 180px", minWidth: 0, maxWidth: "100%" }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "6px", flexWrap: "wrap" }, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { fontSize: "12px", fontWeight: "600", color: "var(--dsw-alias-label-primary, inherit)" }, children: s.name }),
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        loading ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { fontSize: "12px", color: "var(--dsw-alias-label-tertiary, #888)" }, children: lang === "en" ? "Loading style snippets..." : "\u6B63\u5728\u52A0\u8F7D\u6837\u5F0F\u7247\u6BB5..." }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+          snippets.some((s) => s.builtin) ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { fontSize: "13px", fontWeight: "600", color: "var(--dsw-alias-label-secondary, inherit)" }, children: t("stylesPresetsTitle", lang) }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: snippets.filter((s) => s.builtin).map((s) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: rowStyle, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: "8px", flexWrap: "wrap" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { flex: "1 1 180px", minWidth: 0, maxWidth: "100%" }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "6px", flexWrap: "wrap" }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { fontSize: "12px", fontWeight: "600", color: "var(--dsw-alias-label-primary, inherit)" }, children: s.name }),
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                       "span",
                       {
                         style: {
@@ -3267,7 +3807,7 @@ function StylesCard({ lang, showToast }) {
                         children: "Preset"
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                       "span",
                       {
                         style: {
@@ -3282,11 +3822,11 @@ function StylesCard({ lang, showToast }) {
                       }
                     )
                   ] }),
-                  s.description ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { fontSize: "11px", color: "var(--dsw-alias-label-tertiary, #888)", marginTop: "3px" }, children: s.description }) : null
+                  s.description ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { fontSize: "11px", color: "var(--dsw-alias-label-tertiary, #888)", marginTop: "3px" }, children: s.description }) : null
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "6px 8px", flexWrap: "wrap", maxWidth: "100%" }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { style: { display: "inline-flex", alignItems: "center", gap: "4px", fontSize: "11px", cursor: "pointer", whiteSpace: "nowrap" }, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "6px 8px", flexWrap: "wrap", maxWidth: "100%" }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("label", { style: { display: "inline-flex", alignItems: "center", gap: "4px", fontSize: "11px", cursor: "pointer", whiteSpace: "nowrap" }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                       "input",
                       {
                         type: "checkbox",
@@ -3298,8 +3838,8 @@ function StylesCard({ lang, showToast }) {
                     "\u{1F5A5}\uFE0F ",
                     t("stylesPcShort", lang)
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { style: { display: "inline-flex", alignItems: "center", gap: "4px", fontSize: "11px", cursor: "pointer", whiteSpace: "nowrap" }, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("label", { style: { display: "inline-flex", alignItems: "center", gap: "4px", fontSize: "11px", cursor: "pointer", whiteSpace: "nowrap" }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                       "input",
                       {
                         type: "checkbox",
@@ -3311,13 +3851,13 @@ function StylesCard({ lang, showToast }) {
                     "\u{1F4F1} ",
                     t("stylesMobileShort", lang)
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "inline-flex", alignItems: "center", gap: "6px", flexWrap: "wrap" }, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", onClick: () => toggleExpand(s.id), style: miniBtnStyle, children: expanded[s.id] ? t("stylesHideCss", lang) : t("stylesViewCss", lang) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", onClick: () => copyCss(s.css), style: miniBtnStyle, children: t("stylesCopyCss", lang) })
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: "inline-flex", alignItems: "center", gap: "6px", flexWrap: "wrap" }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", onClick: () => toggleExpand(s.id), style: miniBtnStyle, children: expanded[s.id] ? t("stylesHideCss", lang) : t("stylesViewCss", lang) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", onClick: () => copyCss(s.css), style: miniBtnStyle, children: t("stylesCopyCss", lang) })
                   ] })
                 ] })
               ] }),
-              expanded[s.id] ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              expanded[s.id] ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 "pre",
                 {
                   style: {
@@ -3340,8 +3880,8 @@ function StylesCard({ lang, showToast }) {
               ) : null
             ] }, s.id)) })
           ] }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { fontSize: "13px", fontWeight: "600", color: "var(--dsw-alias-label-secondary, inherit)", marginTop: "4px" }, children: t("stylesCustomTitle", lang) }),
-          !showForm ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { fontSize: "13px", fontWeight: "600", color: "var(--dsw-alias-label-secondary, inherit)", marginTop: "4px" }, children: t("stylesCustomTitle", lang) }),
+          !showForm ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
             "button",
             {
               type: "button",
@@ -3359,7 +3899,7 @@ function StylesCard({ lang, showToast }) {
               },
               children: t("stylesAddNew", lang)
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
             "div",
             {
               style: {
@@ -3372,8 +3912,8 @@ function StylesCard({ lang, showToast }) {
                 padding: "12px"
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", gap: "8px", flexWrap: "wrap" }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: "flex", gap: "8px", flexWrap: "wrap" }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                     "input",
                     {
                       type: "text",
@@ -3393,8 +3933,8 @@ function StylesCard({ lang, showToast }) {
                       }
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { style: { display: "inline-flex", alignItems: "center", gap: "4px", fontSize: "11px", cursor: "pointer", whiteSpace: "nowrap" }, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("label", { style: { display: "inline-flex", alignItems: "center", gap: "4px", fontSize: "11px", cursor: "pointer", whiteSpace: "nowrap" }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                       "input",
                       {
                         type: "checkbox",
@@ -3406,8 +3946,8 @@ function StylesCard({ lang, showToast }) {
                     "\u{1F5A5}\uFE0F ",
                     t("stylesPcShort", lang)
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { style: { display: "inline-flex", alignItems: "center", gap: "4px", fontSize: "11px", cursor: "pointer", whiteSpace: "nowrap" }, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("label", { style: { display: "inline-flex", alignItems: "center", gap: "4px", fontSize: "11px", cursor: "pointer", whiteSpace: "nowrap" }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                       "input",
                       {
                         type: "checkbox",
@@ -3420,7 +3960,7 @@ function StylesCard({ lang, showToast }) {
                     t("stylesMobileShort", lang)
                   ] })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                   "textarea",
                   {
                     value: css,
@@ -3443,20 +3983,20 @@ function StylesCard({ lang, showToast }) {
                     }
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", gap: "8px", flexWrap: "wrap" }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", onClick: save, style: primaryBtnStyle, children: t("stylesSave", lang) }),
-                  editingId !== null ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", onClick: cancelEdit, style: miniBtnStyle, children: t("stylesCancelEdit", lang) }) : null,
-                  showForm && !editingId ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", onClick: cancelEdit, style: miniBtnStyle, children: t("stylesCancelEdit", lang) }) : null
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: "flex", gap: "8px", flexWrap: "wrap" }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", onClick: save, style: primaryBtnStyle, children: t("stylesSave", lang) }),
+                  editingId !== null ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", onClick: cancelEdit, style: miniBtnStyle, children: t("stylesCancelEdit", lang) }) : null,
+                  showForm && !editingId ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", onClick: cancelEdit, style: miniBtnStyle, children: t("stylesCancelEdit", lang) }) : null
                 ] })
               ]
             }
           ),
-          snippets.filter((s) => !s.builtin).length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { fontSize: "12px", color: "var(--dsw-alias-label-tertiary, #888)" }, children: t("stylesEmptyCustom", lang) }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: snippets.filter((s) => !s.builtin).map((s) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: rowStyle, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: "8px", flexWrap: "wrap" }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { flex: "1 1 180px", minWidth: 0, maxWidth: "100%" }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "6px", flexWrap: "wrap" }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { fontSize: "12px", fontWeight: "600", color: "var(--dsw-alias-label-primary, inherit)" }, children: s.name }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          snippets.filter((s) => !s.builtin).length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { fontSize: "12px", color: "var(--dsw-alias-label-tertiary, #888)" }, children: t("stylesEmptyCustom", lang) }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: snippets.filter((s) => !s.builtin).map((s) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: rowStyle, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: "8px", flexWrap: "wrap" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { flex: "1 1 180px", minWidth: 0, maxWidth: "100%" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "6px", flexWrap: "wrap" }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { fontSize: "12px", fontWeight: "600", color: "var(--dsw-alias-label-primary, inherit)" }, children: s.name }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                     "span",
                     {
                       style: {
@@ -3471,11 +4011,11 @@ function StylesCard({ lang, showToast }) {
                     }
                   )
                 ] }),
-                s.description ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { fontSize: "11px", color: "var(--dsw-alias-label-tertiary, #888)", marginTop: "3px" }, children: s.description }) : null
+                s.description ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { fontSize: "11px", color: "var(--dsw-alias-label-tertiary, #888)", marginTop: "3px" }, children: s.description }) : null
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "6px 8px", flexWrap: "wrap", maxWidth: "100%" }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { style: { display: "inline-flex", alignItems: "center", gap: "4px", fontSize: "11px", cursor: "pointer", whiteSpace: "nowrap" }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "6px 8px", flexWrap: "wrap", maxWidth: "100%" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("label", { style: { display: "inline-flex", alignItems: "center", gap: "4px", fontSize: "11px", cursor: "pointer", whiteSpace: "nowrap" }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                     "input",
                     {
                       type: "checkbox",
@@ -3487,8 +4027,8 @@ function StylesCard({ lang, showToast }) {
                   "\u{1F5A5}\uFE0F ",
                   t("stylesPcShort", lang)
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { style: { display: "inline-flex", alignItems: "center", gap: "4px", fontSize: "11px", cursor: "pointer", whiteSpace: "nowrap" }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("label", { style: { display: "inline-flex", alignItems: "center", gap: "4px", fontSize: "11px", cursor: "pointer", whiteSpace: "nowrap" }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                     "input",
                     {
                       type: "checkbox",
@@ -3500,15 +4040,15 @@ function StylesCard({ lang, showToast }) {
                   "\u{1F4F1} ",
                   t("stylesMobileShort", lang)
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "inline-flex", alignItems: "center", gap: "6px", flexWrap: "wrap" }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", onClick: () => startEdit(s), style: miniBtnStyle, children: t("stylesEditBtn", lang) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", onClick: () => remove(s), style: { ...miniBtnStyle, color: "#ef4444" }, children: t("stylesDeleteBtn", lang) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", onClick: () => toggleExpand(s.id), style: miniBtnStyle, children: expanded[s.id] ? t("stylesHideCss", lang) : t("stylesViewCss", lang) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", onClick: () => copyCss(s.css), style: miniBtnStyle, children: t("stylesCopyCss", lang) })
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: "inline-flex", alignItems: "center", gap: "6px", flexWrap: "wrap" }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", onClick: () => startEdit(s), style: miniBtnStyle, children: t("stylesEditBtn", lang) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", onClick: () => remove(s), style: { ...miniBtnStyle, color: "#ef4444" }, children: t("stylesDeleteBtn", lang) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", onClick: () => toggleExpand(s.id), style: miniBtnStyle, children: expanded[s.id] ? t("stylesHideCss", lang) : t("stylesViewCss", lang) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", onClick: () => copyCss(s.css), style: miniBtnStyle, children: t("stylesCopyCss", lang) })
                 ] })
               ] })
             ] }),
-            expanded[s.id] ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            expanded[s.id] ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
               "pre",
               {
                 style: {
@@ -3530,7 +4070,7 @@ function StylesCard({ lang, showToast }) {
               }
             ) : null
           ] }, s.id)) }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { fontSize: "11px", color: "var(--dsw-alias-label-tertiary, #888)", lineHeight: "1.6" }, children: t("stylesHint", lang) })
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { fontSize: "11px", color: "var(--dsw-alias-label-tertiary, #888)", lineHeight: "1.6" }, children: t("stylesHint", lang) })
         ] })
       ]
     }
@@ -3538,14 +4078,14 @@ function StylesCard({ lang, showToast }) {
 }
 
 // src/client/version.js
-var PLUGIN_VERSION = "v1.9.2";
-var BUILD_TIME = "2026-10-13 13:09:49";
+var PLUGIN_VERSION = "v1.10.2";
+var BUILD_TIME = "2026-11-02 23:13:58";
 
 // src/client/components/MainSection.jsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function TailscaleMobileSection(props) {
   const ctx = props && props.ctx || typeof window !== "undefined" && window.__DSH_CLIENT_CTX__ || null;
-  const [status, setStatus] = (0, import_react9.useState)({
+  const [status, setStatus] = (0, import_react10.useState)({
     tailscaleIp: "",
     lanIp: "",
     code: "",
@@ -3567,36 +4107,53 @@ function TailscaleMobileSection(props) {
     locale: "zh",
     pairingBridgeMode: "pending",
     pairingBridgeConflict: "",
-    pairingBridgeConflictId: ""
+    pairingBridgeConflictId: "",
+    directoryPicker: {
+      patchEnabled: false,
+      patchPartial: false,
+      runtimeActive: false,
+      restartRequired: false,
+      needsWarning: false,
+      patchFilePath: "",
+      yamlSnippet: ""
+    },
+    proxy: null
   });
-  const [secretInput, setSecretInput] = (0, import_react9.useState)("");
-  const [showSecret, setShowSecret] = (0, import_react9.useState)(false);
-  const [showCode, setShowCode] = (0, import_react9.useState)(false);
-  const [showQr, setShowQr] = (0, import_react9.useState)(false);
-  const [selectedTab, setSelectedTab] = (0, import_react9.useState)("lan");
-  const [timeLeft, setTimeLeft] = (0, import_react9.useState)(300);
-  const [toast, setToast] = (0, import_react9.useState)(null);
-  const [maxVisitsInput, setMaxVisitsInput] = (0, import_react9.useState)("60");
-  const [maxFailedInput, setMaxFailedInput] = (0, import_react9.useState)("5");
-  const [lockDurationMinsInput, setLockDurationMinsInput] = (0, import_react9.useState)("15");
-  const [isSaving, setIsSaving] = (0, import_react9.useState)(false);
-  const [showVersionTip, setShowVersionTip] = (0, import_react9.useState)(false);
-  const [currentLang, setCurrentLang] = (0, import_react9.useState)(resolveLocale(ctx, status));
-  const [npmLatestVersion, setNpmLatestVersion] = (0, import_react9.useState)("");
-  const [hasUpdate, setHasUpdate] = (0, import_react9.useState)(false);
-  const [conflictBannerDismissed, setConflictBannerDismissed] = (0, import_react9.useState)(false);
-  const qrTabTouchedRef = (0, import_react9.useRef)(false);
-  const toastTimerRef = (0, import_react9.useRef)(null);
-  const showToast = (0, import_react9.useCallback)((message, type = "success", duration = 2500) => {
+  const [secretInput, setSecretInput] = (0, import_react10.useState)("");
+  const [showSecret, setShowSecret] = (0, import_react10.useState)(false);
+  const [showCode, setShowCode] = (0, import_react10.useState)(false);
+  const [showQr, setShowQr] = (0, import_react10.useState)(false);
+  const [selectedTab, setSelectedTab] = (0, import_react10.useState)("lan");
+  const [timeLeft, setTimeLeft] = (0, import_react10.useState)(300);
+  const [toast, setToast] = (0, import_react10.useState)(null);
+  const [maxVisitsInput, setMaxVisitsInput] = (0, import_react10.useState)("60");
+  const [maxFailedInput, setMaxFailedInput] = (0, import_react10.useState)("5");
+  const [lockDurationMinsInput, setLockDurationMinsInput] = (0, import_react10.useState)("15");
+  const [modeInput, setModeInput] = (0, import_react10.useState)("proxy");
+  const [proxyPortInput, setProxyPortInput] = (0, import_react10.useState)("3081");
+  const [proxyHostInput, setProxyHostInput] = (0, import_react10.useState)("0.0.0.0");
+  const [trustedHostsInput, setTrustedHostsInput] = (0, import_react10.useState)("");
+  const proxyConfigLoadedRef = (0, import_react10.useRef)(false);
+  const [isSaving, setIsSaving] = (0, import_react10.useState)(false);
+  const [showVersionTip, setShowVersionTip] = (0, import_react10.useState)(false);
+  const [currentLang, setCurrentLang] = (0, import_react10.useState)(resolveLocale(ctx, status));
+  const [npmLatestVersion, setNpmLatestVersion] = (0, import_react10.useState)("");
+  const [hasUpdate, setHasUpdate] = (0, import_react10.useState)(false);
+  const [conflictBannerDismissed, setConflictBannerDismissed] = (0, import_react10.useState)(false);
+  const [dirPickerBannerDismissed, setDirPickerBannerDismissed] = (0, import_react10.useState)(false);
+  const [isPatchingDirPicker, setIsPatchingDirPicker] = (0, import_react10.useState)(false);
+  const qrTabTouchedRef = (0, import_react10.useRef)(false);
+  const toastTimerRef = (0, import_react10.useRef)(null);
+  const showToast = (0, import_react10.useCallback)((message, type = "success", duration = 2500) => {
     if (toastTimerRef.current) clearTimeout(toastTimerRef.current);
     setToast({ message, type });
     toastTimerRef.current = setTimeout(() => setToast(null), duration);
   }, []);
-  const updateQrTab = (0, import_react9.useCallback)((tab) => {
+  const updateQrTab = (0, import_react10.useCallback)((tab) => {
     qrTabTouchedRef.current = true;
     setSelectedTab(tab);
   }, []);
-  const [activeTab, setActiveTab] = (0, import_react9.useState)(() => {
+  const [activeTab, setActiveTab] = (0, import_react10.useState)(() => {
     try {
       const saved = localStorage.getItem("dsh-rm-settings-tab");
       if (saved === "access" || saved === "devices" || saved === "style" || saved === "storage") return saved;
@@ -3611,7 +4168,7 @@ function TailscaleMobileSection(props) {
     } catch (e) {
     }
   };
-  const refreshStatusOnly = (0, import_react9.useCallback)(() => {
+  const refreshStatusOnly = (0, import_react10.useCallback)(() => {
     fetchStatus().then((data) => {
       if (data.tailscaleIp && !qrTabTouchedRef.current) {
         setSelectedTab("tailscale");
@@ -3623,6 +4180,14 @@ function TailscaleMobileSection(props) {
       if (data.locale) {
         setCurrentLang(resolveLocale(ctx, data));
       }
+      if (!proxyConfigLoadedRef.current && data.proxy) {
+        setModeInput(data.proxy.configuredMode === "direct" ? "direct" : "proxy");
+        setProxyPortInput(String(data.proxy.proxyPort || 3081));
+        setProxyHostInput(data.proxy.proxyHost || "0.0.0.0");
+        setTrustedHostsInput(Array.isArray(data.proxy.trustedHosts) ? data.proxy.trustedHosts.join("\n") : "");
+        proxyConfigLoadedRef.current = true;
+      }
+      const dp = data.directoryPicker || {};
       setStatus((prev) => ({
         ...prev,
         tailscaleIp: data.tailscaleIp || "",
@@ -3643,12 +4208,22 @@ function TailscaleMobileSection(props) {
         pairingBridgeMode: data.pairingBridgeMode || "pending",
         pairingBridgeConflict: data.pairingBridgeConflict || "",
         pairingBridgeConflictId: data.pairingBridgeConflictId || "",
+        directoryPicker: {
+          patchEnabled: Boolean(dp.patchEnabled),
+          patchPartial: Boolean(dp.patchPartial),
+          runtimeActive: Boolean(dp.runtimeActive),
+          restartRequired: Boolean(dp.restartRequired),
+          needsWarning: Boolean(dp.needsWarning),
+          patchFilePath: dp.patchFilePath || "",
+          yamlSnippet: dp.yamlSnippet || ""
+        },
+        proxy: data.proxy || null,
         loading: false
       }));
     }).catch(() => {
     });
   }, [ctx]);
-  const refreshStatusAndCode = (0, import_react9.useCallback)(() => {
+  const refreshStatusAndCode = (0, import_react10.useCallback)(() => {
     refreshStatusOnly();
     generatePairCode().then((data) => {
       if (data.success) {
@@ -3663,7 +4238,7 @@ function TailscaleMobileSection(props) {
     }).catch(() => {
     });
   }, [refreshStatusOnly]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     let cancelled = false;
     fetch("https://registry.npmjs.org/dsh-remote-mobile/latest", { cache: "no-store" }).then((res) => res.ok ? res.json() : Promise.reject(new Error("npm registry error"))).then((data) => {
       if (cancelled) return;
@@ -3691,7 +4266,7 @@ function TailscaleMobileSection(props) {
     }
     return 0;
   };
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     refreshStatusAndCode();
     const localeUnsubs = [];
     try {
@@ -3759,7 +4334,7 @@ function TailscaleMobileSection(props) {
       }
     };
   }, [refreshStatusAndCode, refreshStatusOnly, currentLang, ctx]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (timeLeft <= 0) return;
     const timer = setInterval(() => {
       setTimeLeft((prev) => {
@@ -3945,14 +4520,118 @@ function TailscaleMobileSection(props) {
       showToast((currentLang === "en" ? "Reset failed: " : "\u91CD\u7F6E\u5931\u8D25\uFF1A") + (err?.message || err), "danger", 3500);
     });
   };
+  const persistProxyConfig = (mode, port, host, hosts) => {
+    setIsSaving(true);
+    updateProxyConfig({
+      mode,
+      proxyPort: port,
+      proxyHost: host,
+      trustedHosts: hosts
+    }).then((data) => {
+      setIsSaving(false);
+      if (data.success) {
+        setStatus((prev) => ({
+          ...prev,
+          proxy: prev.proxy ? {
+            ...prev.proxy,
+            configuredMode: data.mode,
+            proxyPort: data.proxyPort,
+            proxyHost: data.proxyHost,
+            trustedHosts: data.trustedHosts || [],
+            mode: data.activeMode || prev.proxy.mode,
+            activePort: data.activePort || prev.proxy.activePort
+          } : prev.proxy
+        }));
+        refreshStatusOnly();
+        showToast(t("proxySavedToast", currentLang), "success", 5e3);
+      } else {
+        showToast((currentLang === "en" ? "Save failed: " : "\u4FDD\u5B58\u5931\u8D25\uFF1A") + (data.reason || ""), "danger", 3500);
+      }
+    }).catch((err) => {
+      setIsSaving(false);
+      showToast((currentLang === "en" ? "Save failed: " : "\u4FDD\u5B58\u5931\u8D25\uFF1A") + (err?.message || err), "danger", 3500);
+    });
+  };
+  const saveProxyConfig = () => {
+    const port = parseInt(proxyPortInput, 10);
+    const host = proxyHostInput.trim();
+    const hosts = trustedHostsInput.split(/\r?\n/).map((h) => h.trim()).filter(Boolean);
+    if (!Number.isInteger(port) || port < 1 || port > 65535 || !host) {
+      alert(t("proxySaveFailTip", currentLang));
+      return;
+    }
+    if (!confirm(t("proxySaveConfirm", currentLang))) {
+      return;
+    }
+    persistProxyConfig(modeInput === "direct" ? "direct" : "proxy", port, host, hosts);
+  };
+  const resetProxyConfigDefaults = () => {
+    if (!confirm(t("proxyResetConfirm", currentLang))) {
+      return;
+    }
+    setModeInput("proxy");
+    setProxyPortInput("3081");
+    setProxyHostInput("0.0.0.0");
+    setTrustedHostsInput("");
+    persistProxyConfig("proxy", 3081, "0.0.0.0", []);
+  };
+  const toggleDirectoryPicker = (enable) => {
+    if (!enable) {
+      if (!confirm(t("dirPickerDisableConfirm", currentLang))) {
+        return;
+      }
+    }
+    setIsPatchingDirPicker(true);
+    toggleDirectoryPickerApi(enable).then((res) => {
+      setIsPatchingDirPicker(false);
+      if (res && res.success) {
+        const dp = res.directoryPicker || {};
+        setStatus((prev) => ({
+          ...prev,
+          directoryPicker: {
+            patchEnabled: Boolean(dp.patchEnabled),
+            patchPartial: Boolean(dp.patchPartial),
+            runtimeActive: Boolean(dp.runtimeActive),
+            restartRequired: Boolean(dp.restartRequired),
+            needsWarning: Boolean(dp.needsWarning),
+            patchFilePath: dp.patchFilePath || "",
+            yamlSnippet: dp.yamlSnippet || ""
+          }
+        }));
+        refreshStatusOnly();
+        showToast(
+          t(enable ? "dirPickerEnabledToast" : "dirPickerDisabledToast", currentLang),
+          "success",
+          4500
+        );
+      } else {
+        showToast(
+          (currentLang === "en" ? "Operation failed: " : "\u64CD\u4F5C\u5931\u8D25\uFF1A") + (res && res.reason || ""),
+          "danger",
+          3500
+        );
+      }
+    }).catch((err) => {
+      setIsPatchingDirPicker(false);
+      showToast(
+        (currentLang === "en" ? "Operation failed: " : "\u64CD\u4F5C\u5931\u8D25\uFF1A") + (err?.message || err),
+        "danger",
+        3500
+      );
+    });
+  };
   const copyDirectLink = () => {
     if (timeLeft <= 0) {
       alert(t("codeExpired", currentLang));
       return;
     }
     const effectiveQrIp = selectedTab === "tailscale" && status.tailscaleIp ? status.tailscaleIp : status.lanIp || "127.0.0.1";
-    const port = typeof window !== "undefined" && window.location.port || "3080";
-    const directLink = `http://${effectiveQrIp}:${port}/auth?token=${status.code || ""}`;
+    const port = resolveAccessPort(status);
+    if (port === null) {
+      showToast(t("proxyNotReady", currentLang), "danger", 3e3);
+      return;
+    }
+    const directLink = buildDirectLink(effectiveQrIp, port, status.code || "");
     copyText(directLink, t("copiedTip", currentLang));
     setStatus((prev) => ({ ...prev, copied: true }));
     setTimeout(() => {
@@ -3997,7 +4676,7 @@ function TailscaleMobileSection(props) {
       }
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     "div",
     {
       style: {
@@ -4009,7 +4688,7 @@ function TailscaleMobileSection(props) {
         position: "relative"
       },
       children: [
-        toast ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+        toast ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
           "div",
           {
             style: {
@@ -4034,12 +4713,12 @@ function TailscaleMobileSection(props) {
               pointerEvents: "none"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: toast.type === "danger" ? "\u{1F6A8}" : toast.type === "success" ? "\u2705" : "\u2139\uFE0F" }),
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: toast.message })
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: toast.type === "danger" ? "\u{1F6A8}" : toast.type === "success" ? "\u2705" : "\u2139\uFE0F" }),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: toast.message })
             ]
           }
         ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
           "div",
           {
             style: {
@@ -4051,8 +4730,8 @@ function TailscaleMobileSection(props) {
               marginBottom: "4px"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { minWidth: "220px", flex: 1 }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: { minWidth: "220px", flex: 1 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                   "div",
                   {
                     style: {
@@ -4063,7 +4742,7 @@ function TailscaleMobileSection(props) {
                       margin: "0 0 6px 0"
                     },
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                         "h3",
                         {
                           style: {
@@ -4075,7 +4754,7 @@ function TailscaleMobileSection(props) {
                           children: t("title", currentLang)
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                         "div",
                         {
                           style: { position: "relative", display: "inline-flex", alignItems: "center" },
@@ -4089,7 +4768,7 @@ function TailscaleMobileSection(props) {
                             );
                           },
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                               "span",
                               {
                                 style: {
@@ -4106,7 +4785,7 @@ function TailscaleMobileSection(props) {
                                 children: PLUGIN_VERSION
                               }
                             ),
-                            showVersionTip ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                            showVersionTip ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                               "div",
                               {
                                 style: {
@@ -4134,7 +4813,7 @@ function TailscaleMobileSection(props) {
                           ]
                         }
                       ),
-                      hasUpdate && npmLatestVersion ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                      hasUpdate && npmLatestVersion ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                         "a",
                         {
                           href: `https://www.npmjs.com/package/dsh-remote-mobile/v/${npmLatestVersion}`,
@@ -4164,7 +4843,7 @@ function TailscaleMobileSection(props) {
                     ]
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                   "div",
                   {
                     style: {
@@ -4175,7 +4854,7 @@ function TailscaleMobileSection(props) {
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                 "a",
                 {
                   href: "https://github.com/IceApriler/dsh-remote-mobile",
@@ -4197,15 +4876,15 @@ function TailscaleMobileSection(props) {
                     cursor: "pointer"
                   },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("svg", { style: { width: "16px", height: "16px", fill: "currentColor" }, viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" }) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: "dsh-remote-mobile" })
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("svg", { style: { width: "16px", height: "16px", fill: "currentColor" }, viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" }) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "dsh-remote-mobile" })
                   ]
                 }
               )
             ]
           }
         ),
-        status.pairingBridgeConflict && !conflictBannerDismissed ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+        status.pairingBridgeConflict && !conflictBannerDismissed ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
           "div",
           {
             style: {
@@ -4218,9 +4897,9 @@ function TailscaleMobileSection(props) {
               background: "rgba(245, 158, 11, 0.12)"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { fontSize: "16px", lineHeight: "20px" }, children: "\u26A0\uFE0F" }),
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: { fontSize: "16px", lineHeight: "20px" }, children: "\u26A0\uFE0F" }),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                   "div",
                   {
                     style: {
@@ -4232,7 +4911,7 @@ function TailscaleMobileSection(props) {
                     children: t("conflictBannerTitle", currentLang)
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                   "div",
                   {
                     style: {
@@ -4246,7 +4925,7 @@ function TailscaleMobileSection(props) {
                     })
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                   "button",
                   {
                     type: "button",
@@ -4278,7 +4957,7 @@ function TailscaleMobileSection(props) {
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                 "button",
                 {
                   type: "button",
@@ -4304,7 +4983,192 @@ function TailscaleMobileSection(props) {
             ]
           }
         ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        !status.loading && status.directoryPicker.needsWarning && !dirPickerBannerDismissed ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "flex-start",
+              gap: "10px",
+              padding: "12px 14px",
+              borderRadius: "10px",
+              border: "1px solid rgba(245, 158, 11, 0.45)",
+              background: "rgba(245, 158, 11, 0.12)"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: { fontSize: "16px", lineHeight: "20px" }, children: "\u{1F4C1}" }),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  "div",
+                  {
+                    style: {
+                      fontSize: "13px",
+                      fontWeight: "700",
+                      marginBottom: "4px",
+                      color: "var(--dsw-alias-label-primary, inherit)"
+                    },
+                    children: t("dirPickerBannerTitle", currentLang)
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  "div",
+                  {
+                    style: {
+                      fontSize: "12px",
+                      lineHeight: 1.6,
+                      whiteSpace: "pre-line",
+                      color: "var(--dsw-alias-label-secondary, inherit)"
+                    },
+                    children: t("dirPickerBannerBody", currentLang)
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: { marginTop: "10px", display: "flex", alignItems: "center", gap: "8px", flexWrap: "wrap" }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      disabled: isPatchingDirPicker,
+                      onClick: () => toggleDirectoryPicker(true),
+                      style: {
+                        display: "inline-flex",
+                        alignItems: "center",
+                        gap: "6px",
+                        padding: "6px 12px",
+                        fontSize: "12px",
+                        fontWeight: "600",
+                        borderRadius: "7px",
+                        cursor: isPatchingDirPicker ? "not-allowed" : "pointer",
+                        opacity: isPatchingDirPicker ? 0.7 : 1,
+                        border: "none",
+                        background: "#2563eb",
+                        color: "#ffffff",
+                        boxShadow: "0 2px 6px rgba(37, 99, 235, 0.3)"
+                      },
+                      children: isPatchingDirPicker ? t("dirPickerEnablingBtn", currentLang) : t("dirPickerEnableBtn", currentLang)
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => {
+                        const yaml = status.directoryPicker.yamlSnippet || "";
+                        if (yaml) {
+                          copyText(yaml, t("dirPickerCopiedYamlTip", currentLang));
+                        }
+                      },
+                      style: {
+                        display: "inline-flex",
+                        alignItems: "center",
+                        gap: "6px",
+                        padding: "5px 10px",
+                        fontSize: "12px",
+                        fontWeight: "600",
+                        borderRadius: "7px",
+                        cursor: "pointer",
+                        border: "1px solid rgba(245, 158, 11, 0.55)",
+                        background: "rgba(245, 158, 11, 0.18)",
+                        color: "var(--dsw-alias-label-primary, inherit)"
+                      },
+                      children: t("dirPickerCopyYamlBtn", currentLang)
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setDirPickerBannerDismissed(true),
+                  title: t("dirPickerBannerDismiss", currentLang),
+                  style: {
+                    flexShrink: 0,
+                    width: "24px",
+                    height: "24px",
+                    display: "inline-flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    border: "none",
+                    borderRadius: "6px",
+                    cursor: "pointer",
+                    fontSize: "12px",
+                    background: "rgba(128, 128, 128, 0.15)",
+                    color: "var(--dsw-alias-label-secondary, inherit)"
+                  },
+                  children: "\u2715"
+                }
+              )
+            ]
+          }
+        ) : null,
+        !status.loading && status.directoryPicker.patchEnabled && status.directoryPicker.restartRequired && !dirPickerBannerDismissed ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "flex-start",
+              gap: "10px",
+              padding: "12px 14px",
+              borderRadius: "10px",
+              border: "1px solid rgba(59, 130, 246, 0.45)",
+              background: "rgba(59, 130, 246, 0.1)"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: { fontSize: "16px", lineHeight: "20px" }, children: "\u2705" }),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  "div",
+                  {
+                    style: {
+                      fontSize: "13px",
+                      fontWeight: "700",
+                      marginBottom: "4px",
+                      color: "var(--dsw-alias-label-primary, inherit)"
+                    },
+                    children: t("dirPickerRestartBannerTitle", currentLang)
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  "div",
+                  {
+                    style: {
+                      fontSize: "12px",
+                      lineHeight: 1.6,
+                      color: "var(--dsw-alias-label-secondary, inherit)"
+                    },
+                    children: t("dirPickerRestartBannerBody", currentLang, {
+                      path: status.directoryPicker.patchFilePath || "~/.dsh/profiles/web/cordis.patch.yml"
+                    })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setDirPickerBannerDismissed(true),
+                  title: t("dirPickerBannerDismiss", currentLang),
+                  style: {
+                    flexShrink: 0,
+                    width: "24px",
+                    height: "24px",
+                    display: "inline-flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    border: "none",
+                    borderRadius: "6px",
+                    cursor: "pointer",
+                    fontSize: "12px",
+                    background: "rgba(128, 128, 128, 0.15)",
+                    color: "var(--dsw-alias-label-secondary, inherit)"
+                  },
+                  children: "\u2715"
+                }
+              )
+            ]
+          }
+        ) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "div",
           {
             style: {
@@ -4325,7 +5189,7 @@ function TailscaleMobileSection(props) {
               { id: "storage", label: t("tabStorage", currentLang) }
             ].map((item) => {
               const isActive = activeTab === item.id;
-              return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                 "button",
                 {
                   type: "button",
@@ -4352,8 +5216,8 @@ function TailscaleMobileSection(props) {
             })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: activeTab === "access" ? "flex" : "none", flexDirection: "column", gap: "16px" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: { display: activeTab === "access" ? "flex" : "none", flexDirection: "column", gap: "16px" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             NetworkCard,
             {
               status,
@@ -4363,7 +5227,28 @@ function TailscaleMobileSection(props) {
               lang: currentLang
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            ProxyConfigCard,
+            {
+              status,
+              modeInput,
+              setModeInput,
+              proxyPortInput,
+              setProxyPortInput,
+              proxyHostInput,
+              setProxyHostInput,
+              trustedHostsInput,
+              setTrustedHostsInput,
+              saveProxyConfig,
+              resetProxyConfigDefaults,
+              toggleDirectoryPicker,
+              isPatchingDirPicker,
+              copyText,
+              isSaving,
+              lang: currentLang
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             QrPairingCard,
             {
               status,
@@ -4380,7 +5265,7 @@ function TailscaleMobileSection(props) {
               lang: currentLang
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             SecretCard,
             {
               status,
@@ -4394,8 +5279,8 @@ function TailscaleMobileSection(props) {
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: activeTab === "devices" ? "flex" : "none", flexDirection: "column", gap: "16px" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: { display: activeTab === "devices" ? "flex" : "none", flexDirection: "column", gap: "16px" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             DeviceListCard,
             {
               status,
@@ -4404,7 +5289,7 @@ function TailscaleMobileSection(props) {
               lang: currentLang
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             SecurityCard,
             {
               status,
@@ -4413,7 +5298,7 @@ function TailscaleMobileSection(props) {
               lang: currentLang
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             ConfigCard,
             {
               maxVisitsInput,
@@ -4430,8 +5315,8 @@ function TailscaleMobileSection(props) {
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { display: activeTab === "style" ? "flex" : "none", flexDirection: "column", gap: "16px" }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(StylesCard, { lang: currentLang, showToast }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { display: activeTab === "storage" ? "flex" : "none", flexDirection: "column", gap: "16px" }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(StorageCard, { status, lang: currentLang, copyText }) })
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { display: activeTab === "style" ? "flex" : "none", flexDirection: "column", gap: "16px" }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(StylesCard, { lang: currentLang, showToast }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { display: activeTab === "storage" ? "flex" : "none", flexDirection: "column", gap: "16px" }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(StorageCard, { status, lang: currentLang, copyText }) })
       ]
     }
   );