rovloom 0.5.0 → 0.6.0

package/dist/src/webui/index.js

@@ -13,6 +13,111 @@ import {
 
 // src/webui/i18n.ts
 var chinese = Object.freeze({
+  "resources.previous": "\u4E0A\u4E00\u9875",
+  "resources.next": "\u4E0B\u4E00\u9875",
+  "resources.tokens": "MCP Token",
+  "resources.pairings": "\u914D\u5BF9\u8BB0\u5F55",
+  "resources.name": "\u540D\u79F0",
+  "resources.expiry": "\u6709\u6548\u671F",
+  "resources.days": "{count} \u5929",
+  "resources.create": "\u521B\u5EFA Token",
+  "resources.tokenNote": "\u4E3A AI \u5BA2\u6237\u7AEF\u521B\u5EFA Token\uFF0C\u53EF\u968F\u65F6\u67E5\u770B\u3001\u590D\u5236\u548C\u5220\u9664\u3002\u652F\u6301\u5F53\u524D\u548C\u4E4B\u540E\u914D\u5BF9\u7684\u8BBE\u5907\u3002",
+  "resources.endpoint": "MCP \u5730\u5740",
+  "resources.endpointNote": "\u8FDC\u7A0B\u8FDE\u63A5\u65F6\uFF0C\u5C06 127.0.0.1 \u6362\u6210 Gateway \u7684\u5730\u5740\u3002\u5728 AI \u5BA2\u6237\u7AEF\u7684 Authorization \u4E2D\u586B\u5199 Bearer \u52A0 Token\u3002",
+  "resources.expiresAt": "\u6709\u6548\u81F3 {time}",
+  "resources.active": "\u6709\u6548",
+  "resources.expired": "\u5DF2\u8FC7\u671F",
+  "resources.show": "\u663E\u793A",
+  "resources.hide": "\u9690\u85CF",
+  "resources.legacy": "\u65E7 Token \u4EC5\u4FDD\u5B58\u6458\u8981\uFF0C\u65E0\u6CD5\u8FD8\u539F\u3002",
+  "resources.reissue": "\u91CD\u65B0\u7B7E\u53D1",
+  "resources.confirmReissue": "\u91CD\u65B0\u7B7E\u53D1\u4F1A\u7ACB\u5373\u4F7F\u65E7 Token \u5931\u6548\uFF0C\u662F\u5426\u7EE7\u7EED\uFF1F",
+  "resources.delete": "\u5220\u9664",
+  "resources.deleteDevice": "\u5220\u9664\u8BBE\u5907",
+  "resources.deleteDeviceNote": "\u5220\u9664\u8BBE\u5907\u53CA\u5176\u8FD0\u884C\u914D\u7F6E\u3001\u914D\u5BF9\u8BB0\u5F55\u548C\u8C03\u7528\u5185\u5BB9\uFF0C\u5F53\u524D\u8FDE\u63A5\u4F1A\u65AD\u5F00\u3002",
+  "resources.confirmDevice": "\u5220\u9664\u8BE5\u8BBE\u5907\u53CA\u5176\u914D\u5BF9\u3001\u8C03\u7528\u8BB0\u5F55\uFF1F\u5982\u9700\u518D\u6B21\u8FDE\u63A5\uFF0C\u8BF7\u91CD\u65B0\u914D\u5BF9\u3002",
+  "resources.confirmToken": "\u5220\u9664 Token\u300C{name}\u300D\uFF1F\u4F7F\u7528\u5B83\u7684\u5BA2\u6237\u7AEF\u5C06\u65E0\u6CD5\u7EE7\u7EED\u8BBF\u95EE\u3002",
+  "resources.confirmPairing": "\u5220\u9664\u8FD9\u6761\u914D\u5BF9\u8BB0\u5F55\uFF1F\u672A\u5B8C\u6210\u7684\u914D\u5BF9\u4F1A\u7EC8\u6B62\uFF0C\u5DF2\u914D\u5BF9\u8BBE\u5907\u4ECD\u4FDD\u7559\u3002",
+  "resources.emptyTokens": "\u8FD8\u6CA1\u6709 MCP Token\u3002\u5728\u4E0A\u65B9\u521B\u5EFA\u4E00\u4E2A\uFF0C\u5373\u53EF\u8FDE\u63A5\u4F60\u7684 AI \u5BA2\u6237\u7AEF\u3002",
+  "resources.emptyPairings": "\u6682\u65E0\u914D\u5BF9\u8BB0\u5F55\u3002",
+  "resources.loading": "\u6B63\u5728\u52A0\u8F7D\u2026",
+  "resources.saving": "\u6B63\u5728\u4FDD\u5B58\u2026",
+  "resources.saved": "\u5DF2\u4FDD\u5B58",
+  "resources.failed": "\u64CD\u4F5C\u672A\u5B8C\u6210\uFF0C\u8BF7\u5237\u65B0\u540E\u91CD\u8BD5\u3002",
+  "resources.invalid": "\u8BF7\u4F7F\u7528\u4E0D\u91CD\u590D\u7684\u540D\u79F0\uFF08\u5B57\u6BCD\u3001\u6570\u5B57\u3001- \u6216 _\uFF09\uFF0C\u5E76\u9009\u62E9\u6709\u6548\u671F\u3002",
+  "resources.pending": "\u7B49\u5F85\u914D\u5BF9",
+  "resources.paired": "\u5DF2\u914D\u5BF9",
+  "resources.cancelled": "\u5DF2\u53D6\u6D88",
+  "nav.workspace": "\u5DE5\u4F5C\u7A7A\u95F4",
+  "nav.overview": "\u6982\u89C8",
+  "nav.devices": "\u8BBE\u5907\u7BA1\u7406",
+  "nav.pairing": "\u914D\u5BF9\u8BBE\u5907",
+  "nav.connect": "\u8FDE\u63A5 MCP",
+  "nav.resources": "\u5E2E\u52A9\u4E0E\u8D44\u6E90",
+  "nav.docs": "\u5FEB\u901F\u5F00\u59CB",
+  "nav.console": "\u7BA1\u7406\u63A7\u5236\u53F0",
+  "overview.eyebrow": "\u4F60\u7684\u5DE5\u4F5C\u7A7A\u95F4\uFF0C\u5C3D\u5728\u638C\u63E1",
+  "overview.title": "\u5DE5\u4F5C\u53F0",
+  "overview.description": "\u67E5\u770B\u7F51\u5173\u4E0E\u8BBE\u5907\u72B6\u6001\uFF0C\u8BA9\u8FDC\u7A0B\u5DE5\u4F5C\u6D41\u987A\u7545\u8FDE\u63A5\u3002",
+  "overview.visible": "\u672C\u9875\u8BBE\u5907",
+  "overview.visibleNote": "\u5F53\u524D\u6388\u6743\u8303\u56F4\u4E2D\u7684\u5217\u8868\u9875",
+  "overview.online": "\u8FDE\u63A5\u5DF2\u9A8C\u8BC1",
+  "overview.onlineNote": "\u8FDE\u63A5\u4E0E\u8EAB\u4EFD\u8BA4\u8BC1\u5747\u6709\u6548",
+  "overview.attention": "\u9700\u8981\u5173\u6CE8",
+  "overview.attentionNote": "\u672C\u9875\u5C1A\u672A\u9A8C\u8BC1\u8FDE\u63A5\u7684\u8BBE\u5907",
+  "overview.scope": "\u8BBE\u5907\u7EDF\u8BA1\u4EC5\u8986\u76D6\u5F53\u524D\u9875\uFF1B\u8FC7\u671F\u89C2\u6D4B\u4E0D\u4EE3\u8868\u5F53\u524D\u72B6\u6001\u3002",
+  "overview.gateway": "\u7F51\u5173\u8FD0\u884C\u72B6\u6001",
+  "overview.available": "\u53EF\u7528",
+  "overview.degraded": "\u53D7\u9650",
+  "overview.unavailable": "\u4E0D\u53EF\u7528",
+  "overview.unverified": "\u672A\u6838\u5B9E",
+  "overview.store": "\u6570\u636E\u5B58\u50A8",
+  "overview.transport": "\u8BBE\u5907\u901A\u9053",
+  "overview.native": "\u539F\u751F\u8FD0\u884C\u73AF\u5883",
+  "overview.manage": "\u7BA1\u7406\u8BBE\u5907",
+  "overview.deviceSection": "\u5DF2\u8FDE\u63A5\u7684\u5DE5\u4F5C\u7A7A\u95F4",
+  "overview.deviceSubtitle": "\u4ECE\u4E00\u53F0\u8BBE\u5907\u5F00\u59CB\uFF0C\u5C06\u4F60\u7684\u5DE5\u5177\u548C\u5DE5\u4F5C\u533A\u8FDE\u63A5\u8D77\u6765\u3002",
+  "devices.search": "\u641C\u7D22\u5F53\u524D\u9875\u8BBE\u5907",
+  "devices.searchPlaceholder": "\u641C\u7D22\u8BBE\u5907\u540D\u79F0\u3001ID \u6216\u6807\u7B7E\u2026",
+  "devices.filterAll": "\u5168\u90E8",
+  "devices.filterOnline": "\u5DF2\u9A8C\u8BC1\u8FDE\u63A5",
+  "devices.filterAttention": "\u9700\u8981\u5173\u6CE8",
+  "devices.results": "\u5F53\u524D\u9875\u663E\u793A {shown} / {count} \u53F0\u8BBE\u5907",
+  "devices.noMatches": "\u6CA1\u6709\u5339\u914D\u7684\u8BBE\u5907",
+  "devices.noMatchesHint": "\u8BD5\u8BD5\u5176\u4ED6\u540D\u79F0\u3001ID \u6216\u6807\u7B7E\uFF0C\u6216\u5207\u6362\u72B6\u6001\u7B5B\u9009\u3002",
+  "devices.inspect": "\u67E5\u770B\u8BE6\u60C5",
+  "devices.record": "\u89C2\u6D4B\u8BE6\u60C5",
+  "devices.open": "\u67E5\u770B {name} \u7684\u8BE6\u60C5",
+  "pairing.pageTitle": "\u8FDE\u63A5\u4E00\u53F0\u65B0\u8BBE\u5907",
+  "pairing.pageDescription": "\u521B\u5EFA\u7533\u8BF7\u3001\u8FD0\u884C Connector\u3001\u6838\u5BF9\u4EE3\u7801\u3002\u4E09\u6B65\u628A\u5DE5\u4F5C\u7AD9\u52A0\u5165\u4F60\u7684\u5DE5\u4F5C\u7A7A\u95F4\u3002",
+  "pairing.stepCreate": "\u521B\u5EFA\u914D\u5BF9\u7533\u8BF7",
+  "pairing.stepRun": "\u8FD0\u884C Connector",
+  "pairing.stepApprove": "\u6838\u5BF9\u5E76\u6279\u51C6",
+  "pairing.formTitle": "\u6DFB\u52A0\u4F60\u7684\u5DE5\u4F5C\u7AD9",
+  "pairing.namePlaceholder": "\u4F8B\u5982 office-workstation",
+  "pairing.nameHint": "\u4F7F\u7528 1\u201363 \u4F4D\u5C0F\u5199\u5B57\u6BCD\u3001\u6570\u5B57\u3001\u70B9\u3001\u4E0B\u5212\u7EBF\u6216\u8FDE\u5B57\u7B26\u3002",
+  "pairing.advanced": "\u9AD8\u7EA7\uFF1A\u914D\u5BF9\u7B56\u7565",
+  "pairing.guideTitle": "\u7136\u540E\uFF0C\u5728\u5DE5\u4F5C\u7AD9\u4E0A\u8FD0\u884C",
+  "pairing.guideDescription": "\u5728\u5B89\u88C5\u4E86 Luvus \u6216 Herdr \u7684\u8BBE\u5907\u7EC8\u7AEF\u4E2D\u8FD0\u884C\u4EE5\u4E0B\u547D\u4EE4\uFF0C\u6309\u63D0\u793A\u8F93\u5165 Gateway \u5730\u5740\u548C\u7533\u8BF7\u7F16\u53F7\u3002",
+  "pairing.guideNote": "\u8BA4\u9886\u540E\uFF0C\u6838\u5BF9\u7F51\u9875\u548C\u7EC8\u7AEF\u4E0A\u7684\u4EE3\u7801\uFF0C\u518D\u6279\u51C6\u672C\u673A\u539F\u751F\u5B89\u88C5\u8BBF\u95EE\u3002",
+  "pairing.loginRequired": "\u914D\u5BF9\u9700\u8981\u7BA1\u7406\u4F1A\u8BDD",
+  "pairing.loginHint": "\u4ECE Gateway \u7684\u7BA1\u7406\u5165\u53E3\u767B\u5F55\u540E\uFF0C\u5373\u53EF\u521B\u5EFA\u7533\u8BF7\u5E76\u6279\u51C6\u65B0\u8BBE\u5907\u3002",
+  "connect.title": "\u628A\u5DE5\u4F5C\u7A7A\u95F4\u8FDE\u63A5\u5230 AI",
+  "connect.description": "\u8BBE\u5907\u5B8C\u6210\u914D\u5BF9\u540E\uFF0C\u4E3A AI \u5BA2\u6237\u7AEF\u7B7E\u53D1\u4E13\u7528 MCP Bearer\u3002",
+  "connect.stepOne": "\u627E\u5230\u5DF2\u6709\u8C03\u7528\u65B9",
+  "connect.stepOneNote": "\u5728 Gateway \u673A\u5668\u4E0A\u8FD0\u884C\uFF0C\u8BB0\u4E0B\u5217\u8868\u4E2D\u7684\u5B9E\u9645 caller ID\u3002",
+  "connect.stepTwo": "\u4E3A\u5BA2\u6237\u7AEF\u521B\u5EFA\u4EE4\u724C",
+  "connect.stepTwoNote": "\u628A EXISTING_CALLER_ID \u66FF\u6362\u4E3A\u4E0A\u4E00\u6B65\u7684 ID\u3002\u65B0\u4EE4\u724C\u4E5F\u53EF\u5728\u7BA1\u7406\u9762\u677F\u4E2D\u518D\u6B21\u67E5\u770B\u3002",
+  "connect.stepThree": "\u914D\u7F6E\u4F60\u7684 AI \u5BA2\u6237\u7AEF",
+  "connect.stepThreeNote": "\u9009\u62E9 Streamable HTTP\uFF0C\u586B\u5165 Gateway \u5B9E\u9645 MCP URL\uFF0C\u5E76\u7528\u7B7E\u53D1\u7684\u4EE4\u724C\u4F5C\u4E3A Bearer\u3002\u7BA1\u7406\u5458\u5BC6\u7801\u4EC5\u7528\u4E8E\u7BA1\u7406\u9875\u3002",
+  "connect.docker": "Docker \u90E8\u7F72\u547D\u4EE4",
+  "connect.docs": "\u67E5\u770B\u5B8C\u6574\u8FDE\u63A5\u6307\u5357",
+  "copy.action": "\u590D\u5236\u547D\u4EE4",
+  "copy.id": "\u590D\u5236\u7533\u8BF7\u7F16\u53F7",
+  "copy.done": "\u5DF2\u590D\u5236",
+  "copy.failed": "\u672A\u80FD\u590D\u5236\uFF0C\u8BF7\u624B\u52A8\u9009\u62E9\u6587\u672C",
+  "empty.title": "\u4F60\u7684\u7B2C\u4E00\u53F0\u8BBE\u5907\uFF0C\u4ECE\u8FD9\u91CC\u5F00\u59CB",
+  "empty.description": "\u914D\u5BF9\u4E00\u53F0\u5B89\u88C5\u4E86 Luvus \u6216 Herdr \u7684\u5DE5\u4F5C\u7AD9\uFF0C\u5373\u53EF\u5728\u8FD9\u91CC\u67E5\u770B\u8FDE\u63A5\u3001\u8FD0\u884C\u5B9E\u4F8B\u548C\u8BBF\u95EE\u72B6\u6001\u3002",
   "provider.disable": "\u7981\u7528\u6B64 provider",
   "provider.target": "Provider \u76EE\u6807",
   "provider.effect": "\u4EC5\u7981\u7528\u6B64\u5B9E\u4F8B\u5E76\u9012\u589E binding revision\uFF1B\u8BBE\u5907\u6388\u6743\u53CA\u5176\u5B83\u5B9E\u4F8B\u4E0D\u53D8\u3002\u65E7\u6D41\u3001\u53E5\u67C4\u548C attempt \u4E0D\u590D\u6D3B\uFF0C\u5728\u9014\u539F\u751F\u5DE5\u4F5C\u53EF\u80FD\u7EE7\u7EED\u3002",
@@ -21,8 +126,9 @@ var chinese = Object.freeze({
   "app.subtitle": "\u8BBE\u5907\u4E0E\u8FDE\u63A5\u7BA1\u7406",
   "app.console": "Gateway \u63A7\u5236\u53F0",
   "app.skip": "\u8DF3\u5230\u7BA1\u7406\u5185\u5BB9",
-  "app.managedFooter": "\u7BA1\u7406\u64CD\u4F5C\u987B\u660E\u786E\u786E\u8BA4\uFF1B\u6BCF\u6B21\u8BF7\u6C42\u4ECD\u7531\u540E\u53F0\u9A8C\u8BC1\u5F53\u524D\u4F1A\u8BDD\u4E0E\u6743\u9650\u3002",
-  "app.footer": "\u53EA\u8BFB\u7BA1\u7406\u5207\u7247 \xB7 \u6240\u6709\u7BA1\u7406\u53D8\u66F4\u5C1A\u672A\u63A5\u5165 \xB7 \u6BCF\u6B21\u8BFB\u53D6\u987B\u7531\u540E\u7AEF\u9A8C\u8BC1\u5F53\u524D\u7BA1\u7406\u5458\u4E0E\u76EE\u6807\u6743\u9650",
+  "app.managedFooter": "Rovloom \xB7 \u4F60\u7684\u8BBE\u5907\u3001Agent \u4E0E\u5DE5\u4F5C\u6D41\u3002",
+  "app.footer": "Rovloom \xB7 Gateway \u63A7\u5236\u53F0",
+  "preference.switch": "\u5207\u6362\u4E3A {value}",
   "language.label": "\u8BED\u8A00",
   "language.system": "\u8DDF\u968F\u6D4F\u89C8\u5668",
   "language.chinese": "\u7B80\u4F53\u4E2D\u6587",
@@ -60,7 +166,7 @@ var chinese = Object.freeze({
   "manage.nativeEffect": "\u6B64\u64CD\u4F5C\u4E0D\u4FDD\u8BC1\u505C\u6B62\u6216\u56DE\u6EDA\u539F\u751F\u5DE5\u4F5C\u3002",
   "manage.action": "\u64CD\u4F5C",
   "pairing.title": "\u5728\u7EBF\u6DFB\u52A0\u8BBE\u5907",
-  "pairing.intro": "\u65B0\u5EFA\u914D\u5BF9\u7533\u8BF7\u540E\uFF0C\u628A\u7533\u8BF7\u7F16\u53F7\u4EA4\u7ED9\u65B0\u8BBE\u5907\u8FD0\u884C rovloom connector --claim\uFF1B\u8BBE\u5907\u63D0\u4EA4\u8BA4\u9886\u540E\uFF0C\u5728\u6B64\u6838\u5BF9\u6838\u5BF9\u7801\u5E76\u6279\u51C6\u7B7E\u53D1\u51ED\u636E\u3002",
+  "pairing.intro": "\u4E3A\u5DE5\u4F5C\u7AD9\u8D77\u4E00\u4E2A\u540D\u79F0\u3002\u521B\u5EFA\u914D\u5BF9\u7533\u8BF7\u540E\uFF0C\u6309\u53F3\u4FA7\u6307\u5F15\u5B8C\u6210\u8FDE\u63A5\u3002",
   "pairing.name": "\u65B0\u8BBE\u5907\u540D\u79F0",
   "pairing.policy": "\u6388\u6743\u653F\u7B56\u5F15\u7528",
   "pairing.create": "\u65B0\u5EFA\u914D\u5BF9\u7533\u8BF7",
@@ -70,7 +176,7 @@ var chinese = Object.freeze({
   "pairing.cancel": "\u53D6\u6D88",
   "pairing.created": "\u7533\u8BF7\u5DF2\u521B\u5EFA\u3002\u628A\u7533\u8BF7\u7F16\u53F7\u4EA4\u7ED9\u65B0\u8BBE\u5907\uFF1A",
   "pairing.waitingClaim": "\u7B49\u5F85\u8BBE\u5907\u63D0\u4EA4\u8BA4\u9886\u2026",
-  "pairing.claimArrived": "\u8BBE\u5907\u5DF2\u63D0\u4EA4\u8BA4\u9886\u3002\u6838\u5BF9\u4E0B\u65B9\u6838\u5BF9\u7801\u4E0E\u8BBE\u5907\u5C4F\u5E55\u4E00\u81F4\u540E\u6279\u51C6\u7B7E\u53D1\uFF1A",
+  "pairing.claimArrived": "\u8BBE\u5907\u5DF2\u53D1\u8D77\u8FDE\u63A5\u3002\u786E\u8BA4\u4E0B\u65B9\u4EE3\u7801\u4E0E\u5DE5\u4F5C\u7AD9\u7EC8\u7AEF\u4E00\u81F4\u540E\uFF0C\u518D\u6279\u51C6\u914D\u5BF9\uFF1A",
   "pairing.userCode": "\u6838\u5BF9\u7801",
   "pairing.approve": "\u6279\u51C6\u7B7E\u53D1\u51ED\u636E",
   "pairing.approved": "\u5DF2\u6279\u51C6\uFF0C\u51ED\u636E\u5DF2\u6258\u7BA1\u4EA4\u4ED8\uFF0C\u7B49\u5F85\u8BBE\u5907\u53D6\u56DE\u2026",
@@ -102,7 +208,7 @@ var chinese = Object.freeze({
   "action.cancel": "\u53D6\u6D88\u8BFB\u53D6",
   "reader.pending": "\u6B63\u5728\u8BFB\u53D6\u2026",
   "reader.stale": "\u5FEB\u7167\u5DF2\u8FC7\u671F",
-  "reader.snapshot": "\u53EA\u8BFB\u5FEB\u7167",
+  "reader.snapshot": "\u5DF2\u66F4\u65B0",
   "reader.empty": "\u65E0\u53EF\u7528\u5FEB\u7167",
   "error.unauthenticated": "\u7BA1\u7406\u4F1A\u8BDD\u672A\u767B\u5F55\u6216\u5DF2\u8FC7\u671F\u3002\u8BF7\u901A\u8FC7\u53D7\u4FDD\u62A4\u7684\u7BA1\u7406\u5458\u5165\u53E3\u91CD\u65B0\u767B\u5F55\u3002",
   "error.forbidden": "\u5F53\u524D\u7BA1\u7406\u5458\u6CA1\u6709\u6B64\u8303\u56F4\u7684\u67E5\u770B\u6743\u9650\u3002",
@@ -245,6 +351,111 @@ var chinese = Object.freeze({
   "gateway.degradedNote": "\u5F53\u524D\u7981\u6B62\u7BA1\u7406\u5199\u5165\uFF1B\u6301\u4E45\u64A4\u9500\u7B49\u64CD\u4F5C\u53EF\u80FD\u5C1A\u672A\u751F\u6548\uFF0C\u8BF7\u4F7F\u7528\u53D7\u4FDD\u62A4\u672C\u673A\u8BCA\u65AD\u3002"
 });
 var english = Object.freeze({
+  "resources.previous": "Previous",
+  "resources.next": "Next",
+  "resources.tokens": "MCP tokens",
+  "resources.pairings": "Pairing records",
+  "resources.name": "Name",
+  "resources.expiry": "Valid for",
+  "resources.days": "{count} days",
+  "resources.create": "Create token",
+  "resources.tokenNote": "Create tokens for your AI clients. View, copy or delete them anytime. They work with current and future paired devices.",
+  "resources.endpoint": "MCP endpoint",
+  "resources.endpointNote": "For remote access, replace 127.0.0.1 with your Gateway address. Set Authorization to Bearer followed by the token in your AI client.",
+  "resources.expiresAt": "Expires {time}",
+  "resources.active": "Active",
+  "resources.expired": "Expired",
+  "resources.show": "Show",
+  "resources.hide": "Hide",
+  "resources.legacy": "This older token only has a hash and cannot be recovered.",
+  "resources.reissue": "Reissue",
+  "resources.confirmReissue": "Reissue this token? The previous token will stop working immediately.",
+  "resources.delete": "Delete",
+  "resources.deleteDevice": "Delete device",
+  "resources.deleteDeviceNote": "Remove this device, runtime configuration, pairing records and call content, and disconnect it.",
+  "resources.confirmDevice": "Delete this device and its pairing and call records? Pair it again to reconnect.",
+  "resources.confirmToken": "Delete token \u201C{name}\u201D? Clients using it will lose access.",
+  "resources.confirmPairing": "Delete this pairing record? Unfinished pairing will stop. Paired devices are kept.",
+  "resources.emptyTokens": "No MCP tokens yet. Create one above to connect your AI client.",
+  "resources.emptyPairings": "No pairing records.",
+  "resources.loading": "Loading\u2026",
+  "resources.saving": "Saving\u2026",
+  "resources.saved": "Saved",
+  "resources.failed": "The operation did not complete. Refresh and try again.",
+  "resources.invalid": "Use a unique name (letters, numbers, - or _) and a valid expiry.",
+  "resources.pending": "Pending",
+  "resources.paired": "Paired",
+  "resources.cancelled": "Cancelled",
+  "nav.workspace": "WORKSPACE",
+  "nav.overview": "Overview",
+  "nav.devices": "Devices",
+  "nav.pairing": "Pair a device",
+  "nav.connect": "Connect MCP",
+  "nav.resources": "RESOURCES",
+  "nav.docs": "Quick start",
+  "nav.console": "Management console",
+  "overview.eyebrow": "YOUR WORKSPACE, CONNECTED",
+  "overview.title": "Workspace overview",
+  "overview.description": "Keep your gateway and devices in view. Bring your remote workflow together.",
+  "overview.visible": "Devices on this page",
+  "overview.visibleNote": "In the current authorized list page",
+  "overview.online": "Verified connections",
+  "overview.onlineNote": "Connection and identity are current",
+  "overview.attention": "Needs attention",
+  "overview.attentionNote": "Devices without a verified connection",
+  "overview.scope": "Device counts cover this page only. Expired observations do not establish current state.",
+  "overview.gateway": "Gateway health",
+  "overview.available": "Available",
+  "overview.degraded": "Degraded",
+  "overview.unavailable": "Unavailable",
+  "overview.unverified": "Unverified",
+  "overview.store": "Storage",
+  "overview.transport": "Device transport",
+  "overview.native": "Native runtime",
+  "overview.manage": "Manage devices",
+  "overview.deviceSection": "Your connected workspaces",
+  "overview.deviceSubtitle": "Connect your tools and workspaces, one device at a time.",
+  "devices.search": "Search devices on this page",
+  "devices.searchPlaceholder": "Search by device name, ID or label\u2026",
+  "devices.filterAll": "All devices",
+  "devices.filterOnline": "Verified",
+  "devices.filterAttention": "Needs attention",
+  "devices.results": "Showing {shown} of {count} devices on this page",
+  "devices.noMatches": "No matching devices",
+  "devices.noMatchesHint": "Try another name, ID or label, or change the status filter.",
+  "devices.inspect": "View details",
+  "devices.record": "Observation details",
+  "devices.open": "View details for {name}",
+  "pairing.pageTitle": "Bring a new device on board",
+  "pairing.pageDescription": "Create an application, run Connector, and verify the code. Your workspace is three steps away.",
+  "pairing.stepCreate": "Create an application",
+  "pairing.stepRun": "Run Connector",
+  "pairing.stepApprove": "Verify and approve",
+  "pairing.formTitle": "Add your workstation",
+  "pairing.namePlaceholder": "e.g. office-workstation",
+  "pairing.nameHint": "Use 1\u201363 lowercase letters, digits, dots, underscores or hyphens.",
+  "pairing.advanced": "Advanced: pairing policy",
+  "pairing.guideTitle": "Then, on your workstation",
+  "pairing.guideDescription": "Run this command on the device with Luvus or Herdr installed. Enter the Gateway address and application ID when prompted.",
+  "pairing.guideNote": "Match the code on this page with the terminal, then approve local native installation access.",
+  "pairing.loginRequired": "A management session is required",
+  "pairing.loginHint": "Sign in through the Gateway management entry to create applications and approve new devices.",
+  "connect.title": "Connect your workspace to AI",
+  "connect.description": "Once a device is paired, issue a dedicated MCP Bearer for your AI client.",
+  "connect.stepOne": "Find an existing caller",
+  "connect.stepOneNote": "Run this on the Gateway machine and note the actual caller ID in the list.",
+  "connect.stepTwo": "Issue a client token",
+  "connect.stepTwoNote": "Replace EXISTING_CALLER_ID with that ID. New tokens can also be viewed later in the Dashboard.",
+  "connect.stepThree": "Configure your AI client",
+  "connect.stepThreeNote": "Choose Streamable HTTP, enter the actual Gateway MCP URL, and use the issued token as Bearer. The administrator password is for this console only.",
+  "connect.docker": "Docker deployment commands",
+  "connect.docs": "Read the connection guide",
+  "copy.action": "Copy command",
+  "copy.id": "Copy application ID",
+  "copy.done": "Copied",
+  "copy.failed": "Copy unavailable; select the text manually",
+  "empty.title": "Start with your first device",
+  "empty.description": "Pair a workstation running Luvus or Herdr. Its connection, runtime instances and access status will appear here.",
   "provider.disable": "Disable this provider",
   "provider.target": "Provider target",
   "provider.effect": "Disables only this instance and advances its binding revision. Device authorization and other instances stay independent. Old streams, handles and attempts do not revive; in-flight native work may continue.",
@@ -253,8 +464,9 @@ var english = Object.freeze({
   "app.subtitle": "Device and connection management",
   "app.console": "Gateway console",
   "app.skip": "Skip to management content",
-  "app.managedFooter": "Management actions require explicit confirmation; the server verifies the current session and permissions on every request.",
-  "app.footer": "Read-only management \xB7 Management changes are unavailable \xB7 Each read requires current administrator and target authorization",
+  "app.managedFooter": "Rovloom \xB7 Your devices, agents and workflows.",
+  "app.footer": "Rovloom \xB7 Gateway console",
+  "preference.switch": "Switch to {value}",
   "language.label": "Language",
   "language.system": "Browser language",
   "language.chinese": "\u7B80\u4F53\u4E2D\u6587",
@@ -292,7 +504,7 @@ var english = Object.freeze({
   "manage.nativeEffect": "This operation does not guarantee stopping or rolling back native work.",
   "manage.action": "Action",
   "pairing.title": "Add a device online",
-  "pairing.intro": "Create a pairing application, then hand its ID to the new device running rovloom connector --claim. When the device submits its claim, compare the check code here and approve credential issuance.",
+  "pairing.intro": "Give your workstation a name. Create an application, then follow the steps on the right.",
   "pairing.name": "New device name",
   "pairing.policy": "Authorization policy reference",
   "pairing.create": "Create pairing application",
@@ -334,7 +546,7 @@ var english = Object.freeze({
   "action.cancel": "Cancel read",
   "reader.pending": "Reading\u2026",
   "reader.stale": "Snapshot expired",
-  "reader.snapshot": "Read-only snapshot",
+  "reader.snapshot": "Up to date",
   "reader.empty": "No snapshot",
   "error.unauthenticated": "The management session is missing or expired. Sign in through the protected administrator entry.",
   "error.forbidden": "The current administrator cannot view this scope.",
@@ -508,6 +720,84 @@ function createLocalizer(language) {
   };
 }
 
+// src/webui/icons.ts
+var paths = {
+  overview: "M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h7v7h-7z",
+  devices: "M3 4h18v12H3zM8 21h8M12 16v5",
+  pairing: "M8 3H5a2 2 0 0 0-2 2v3M16 3h3a2 2 0 0 1 2 2v3M3 16v3a2 2 0 0 0 2 2h3M21 16v3a2 2 0 0 1-2 2h-3M12 8v8M8 12h8",
+  connect: "M9 8 6 12l3 4M15 8l3 4-3 4M13 5l-2 14",
+  arrow: "M5 12h14M14 7l5 5-5 5",
+  plus: "M12 5v14M5 12h14",
+  search: "M21 21l-5-5M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0",
+  activity: "M3 12h4l3-8 4 16 3-8h4",
+  shield: "M12 3 4 6v6c0 5 8 9 8 9s8-4 8-9V6zM8 12l3 3 5-6",
+  attention: "M12 3 2 21h20zM12 9v4M12 17h.01",
+  book: "M12 5c-3-2-6-2-10-1v15c4-1 7-1 10 1 3-2 6-2 10-1V4c-4-1-7-1-10 1zM12 5v15",
+  refresh: "M20 7v5h-5M4 17v-5h5M6 7a7 7 0 0 1 12-1l2 3M4 15l2 3a7 7 0 0 0 12-1",
+  copy: "M9 9h12v12H9zM15 9V3H3v12h6",
+  check: "M5 12l4 4L19 6",
+  chevron: "M9 5l7 7-7 7",
+  gateway: "M4 3h16v7H4zM4 14h16v7H4zM8 6.5h.01M8 17.5h.01M16 6.5h1M16 17.5h1"
+};
+function uiIcon(name) {
+  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svg.classList.add("ui-icon");
+  for (const [key, value] of Object.entries({
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    "stroke-width": "1.65",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round",
+    "aria-hidden": "true",
+    focusable: "false"
+  })) {
+    svg.setAttribute(key, value);
+  }
+  const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  path.setAttribute("d", paths[name]);
+  svg.append(path);
+  return svg;
+}
+
+// src/webui/clipboard.ts
+function copyControl(value, label) {
+  const button = document.createElement("button");
+  button.type = "button";
+  button.className = "copy-button";
+  button.dataset.copy = value;
+  button.setAttribute("aria-label", label);
+  button.title = label;
+  button.append(uiIcon("copy"));
+  return button;
+}
+async function copyText(value) {
+  try {
+    if (navigator.clipboard?.writeText) {
+      await navigator.clipboard.writeText(value);
+      return true;
+    }
+  } catch {}
+  const active = document.activeElement;
+  const input = document.createElement("textarea");
+  input.className = "copy-buffer";
+  input.value = value;
+  input.readOnly = true;
+  input.setAttribute("aria-label", "Copy");
+  document.body.append(input);
+  try {
+    input.select();
+    return document.execCommand("copy");
+  } catch {
+    return false;
+  } finally {
+    input.remove();
+    if (active instanceof HTMLElement && active.isConnected) {
+      active.focus({ preventScroll: true });
+    }
+  }
+}
+
 // src/webui/view.ts
 var connectionNames = {
   connecting: "connection.connecting",
@@ -579,6 +869,9 @@ function routeHref(route) {
   if (route.providerCursor !== null) {
     parameters.set("providers", route.providerCursor);
   }
+  if (route.machineId === null && route.section) {
+    parameters.set("view", route.section);
+  }
   return `#${parameters.toString()}`;
 }
 function parseRoute(hash) {
@@ -587,7 +880,7 @@ function parseRoute(hash) {
     return empty;
   }
   const parameters = new URLSearchParams(hash.replace(/^#/, ""));
-  for (const key of ["machine", "cursor", "providers"]) {
+  for (const key of ["machine", "cursor", "providers", "view"]) {
     if (parameters.getAll(key).length > 1 || (parameters.get(key)?.length ?? 0) > 1024) {
       return empty;
     }
@@ -596,7 +889,8 @@ function parseRoute(hash) {
   return {
     machineId,
     cursor: machineId ? null : parameters.get("cursor") || null,
-    providerCursor: machineId ? parameters.get("providers") || null : null
+    providerCursor: machineId ? parameters.get("providers") || null : null,
+    ...!machineId && ["devices", "pairing", "connect"].includes(parameters.get("view") ?? "") ? { section: parameters.get("view") } : {}
   };
 }
 function current(observedAt, freshness) {
@@ -624,7 +918,7 @@ function listObservation(key, observedAt, freshness) {
 function currentDeviceLink(device, freshness) {
   return device.persisted_state === "online" && current(device.observed_at, freshness) && device.connection.verification === "verified" && current(device.connection.observed_at, freshness) && device.connection.value.state === "online" && device.authentication.verification === "verified" && current(device.authentication.observed_at, freshness) && device.authentication.value.state === "authenticated";
 }
-function deviceBadges(device, freshness) {
+function deviceBadges(device, freshness, compact = false) {
   const { i18n } = freshness;
   const { t } = i18n;
   const result = node("div", "", "badges");
@@ -661,7 +955,9 @@ function deviceBadges(device, freshness) {
   } else {
     result.append(badge(t("device.authUnknown", { reason: i18n.reason(authentication.reason_code) }), "warning"));
   }
-  result.append(badge(t("device.readyUnknown")));
+  if (!compact) {
+    result.append(badge(t("device.readyUnknown")));
+  }
   return result;
 }
 function unavailableActions(kind, i18n) {
@@ -703,20 +999,154 @@ function deviceActions(page, freshness, connected) {
   }
   return section;
 }
-function deviceList(page, freshness) {
+function overviewMetrics(page, freshness) {
+  const t = freshness.i18n.t;
+  const online = page.devices.items.filter((device) => currentDeviceLink(device, freshness)).length;
+  const section = node("section", "", "overview-metrics");
+  section.setAttribute("aria-label", t("nav.overview"));
+  const rows = [
+    ["overview.visible", "overview.visibleNote", String(page.devices.items.length), "devices"],
+    ["overview.online", "overview.onlineNote", freshness.pageStale ? "\u2014" : String(online), "shield"],
+    [
+      "overview.attention",
+      "overview.attentionNote",
+      freshness.pageStale ? "\u2014" : String(page.devices.items.length - online),
+      "attention"
+    ]
+  ];
+  for (const [label, description, value, icon] of rows) {
+    const card = node("article", "", "metric-card");
+    const top = node("div", "", "metric-heading");
+    top.append(node("span", t(label)), uiIcon(icon));
+    card.append(top, node("strong", value, "metric-value"), node("p", t(description), "muted"));
+    section.append(card);
+  }
+  section.append(node("p", t("overview.scope"), "metric-scope"));
+  return section;
+}
+function guidePage(section, i18n, management) {
+  const { t } = i18n;
+  const heading = node("header", "", "page-heading");
+  const copy = node("div", "", "heading-copy");
+  copy.append(node("p", t("nav.workspace"), "eyebrow"));
+  copy.append(node("h1", t(section === "pairing" ? "pairing.pageTitle" : "connect.title")));
+  copy.append(node("p", t(section === "pairing" ? "pairing.pageDescription" : "connect.description"), "muted"));
+  heading.append(copy);
+  const body = node("section", "", "connection-guide");
+  if (section === "pairing") {
+    if (!management) {
+      const empty = node("div", "", "empty");
+      empty.append(uiIcon("shield"), node("h2", t("pairing.loginRequired")), node("p", t("pairing.loginHint"), "muted"));
+      body.append(empty);
+    }
+    return { heading, body };
+  }
+  const commands = ["rovloom token list", "rovloom token create --principal my_client --like EXISTING_CALLER_ID"];
+  for (const [index, title, description] of [
+    [0, "connect.stepOne", "connect.stepOneNote"],
+    [1, "connect.stepTwo", "connect.stepTwoNote"],
+    [2, "connect.stepThree", "connect.stepThreeNote"]
+  ]) {
+    const card = node("article", "", "connection-step");
+    const number = node("span", String(index + 1).padStart(2, "0"), "step-number");
+    const details = node("div", "", "connection-step-body");
+    details.append(node("h2", t(title)), node("p", t(description), "muted"));
+    if (index < commands.length) {
+      const command = commands[index];
+      const block = node("div", "", "command-snippet");
+      block.append(node("code", command), copyControl(command, t("copy.action")));
+      const docker = node("details", "", "docker-command");
+      docker.dataset.disclosure = "docker-command-" + index;
+      docker.append(node("summary", t("connect.docker")));
+      const dockerCommand = command.replace(/^rovloom /u, "docker compose run --rm gateway ");
+      const snippet = node("div", "", "command-snippet");
+      snippet.append(node("code", dockerCommand), copyControl(dockerCommand, t("copy.action")));
+      docker.append(snippet);
+      details.append(block, docker);
+    } else {
+      const link = node("a", t("connect.docs"), "text-link");
+      link.href = `https://github.com/ArnoChenFx/rovloom/blob/main/docs/QUICK-START${i18n.language === "zh-CN" ? "-zh" : ""}.md`;
+      link.target = "_blank";
+      link.rel = "noreferrer noopener";
+      details.append(link);
+    }
+    card.append(number, details);
+    body.append(card);
+  }
+  return { heading, body };
+}
+function deviceList(page, freshness, route, filter) {
   const { i18n } = freshness;
   const { t } = i18n;
   const heading = node("header", "", "page-heading");
-  heading.append(node("h1", t("devices.heading")), node("p", t("devices.description"), "muted"));
+  const overview = route.section !== "devices";
+  const copy = node("div", "", "heading-copy");
+  copy.append(node("p", t("overview.eyebrow"), "eyebrow"));
+  copy.append(node("h1", t(overview ? "overview.title" : "devices.heading")), node("p", t(overview ? "overview.description" : "devices.description"), "muted"));
+  heading.append(copy);
+  const add = node("a", "", "primary-button");
+  add.href = "#view=pairing";
+  add.append(uiIcon("plus"), node("span", t("nav.pairing")));
+  heading.append(add);
   const section = node("section", "", "devices-section");
+  const sectionHeader = node("div", "", "section-heading");
+  const sectionCopy = node("div");
+  sectionCopy.append(node("h2", t(overview ? "overview.deviceSection" : "devices.heading")), node("p", t("overview.deviceSubtitle"), "muted"));
+  sectionHeader.append(sectionCopy);
+  if (overview) {
+    const all = node("a", "", "text-link");
+    all.href = "#view=devices";
+    all.append(node("span", t("overview.manage")), uiIcon("arrow"));
+    sectionHeader.append(all);
+  }
+  section.append(sectionHeader);
+  if (page.devices.items.length) {
+    const tools = node("div", "", "device-tools");
+    const search = node("label", "", "search-field");
+    const input = node("input");
+    input.type = "search";
+    input.name = "device-search";
+    input.value = filter.query;
+    input.placeholder = t("devices.searchPlaceholder");
+    input.setAttribute("aria-label", t("devices.search"));
+    search.append(uiIcon("search"), input);
+    const filters = node("div", "", "device-filters");
+    filters.setAttribute("role", "group");
+    filters.setAttribute("aria-label", t("devices.health"));
+    for (const [value, key] of [
+      ["all", "devices.filterAll"],
+      ["online", "devices.filterOnline"],
+      ["attention", "devices.filterAttention"]
+    ]) {
+      const button = node("button", t(key));
+      button.type = "button";
+      button.dataset.deviceFilter = value;
+      button.setAttribute("aria-pressed", String(value === filter.status));
+      filters.append(button);
+    }
+    tools.append(search, filters);
+    section.append(tools);
+  }
+  const items = page.devices.items.filter((device) => {
+    const query = filter.query.trim().toLocaleLowerCase(i18n.language);
+    const matches = !query || [device.name, device.machine_id, ...device.labels ?? []].some((value) => value.toLocaleLowerCase(i18n.language).includes(query));
+    const online = currentDeviceLink(device, freshness);
+    return matches && (filter.status === "all" || (filter.status === "online" ? online : !online));
+  });
   if (page.devices.items.length === 0) {
     const empty = node("div", "", "empty");
-    empty.append(node("h2", t("devices.emptyHeading")), node("p", t("devices.empty"), "muted"));
+    const symbol = node("span", "", "empty-illustration");
+    symbol.append(uiIcon("devices"));
+    empty.append(symbol, node("h2", t("empty.title")), node("p", t("empty.description"), "muted"));
+    const pair = node("a", "", "primary-button");
+    pair.href = "#view=pairing";
+    pair.append(uiIcon("plus"), node("span", t("nav.pairing")));
+    empty.append(pair);
     section.append(empty);
   }
   const columns = node("div", "", "device-columns");
   columns.setAttribute("aria-hidden", "true");
-  for (const key of ["devices.identity", "devices.health", "devices.activity", "devices.observations"]) {
+  for (const key of ["devices.identity", "devices.health", "devices.activity", "devices.record"]) {
     columns.append(node("span", t(key)));
   }
   if (page.devices.items.length) {
@@ -724,32 +1154,60 @@ function deviceList(page, freshness) {
   }
   const list = node("ul", "", "device-list");
   list.setAttribute("aria-label", t("devices.heading"));
-  for (const device of page.devices.items) {
+  for (const device of items) {
     const row = node("li", "", "device-card");
     const identity = node("div", "", "device-identity");
     const link = node("a", device.name, "device-name");
     link.href = routeHref({ machineId: device.machine_id, cursor: null, providerCursor: null });
-    identity.append(link, node("code", device.machine_id));
-    identity.append(node("p", device.labels === null ? t("value.noLabelRecord") : device.labels.length ? device.labels.join(" \xB7 ") : t("value.noLabels"), "muted"));
+    const deviceIcon = node("span", "", "device-icon");
+    deviceIcon.append(uiIcon("devices"));
+    const deviceCopy = node("div", "", "device-copy");
+    const identifier = node("code", device.machine_id);
+    identifier.title = device.machine_id;
+    deviceCopy.append(link, identifier);
+    identity.append(deviceIcon, deviceCopy);
+    deviceCopy.append(node("p", device.labels === null ? t("value.noLabelRecord") : device.labels.length ? device.labels.join(" \xB7 ") : t("value.noLabels"), "muted"));
     const health = node("div", "", "device-health");
-    health.append(node("span", t("devices.health"), "cell-label"), deviceBadges(device, freshness));
+    health.append(node("span", t("devices.health"), "cell-label"), deviceBadges(device, freshness, true));
     const heartbeat = device.connection.verification === "verified" ? device.connection.value.last_heartbeat_at : null;
     const activity = node("div", "", "device-activity");
     activity.append(node("span", t("devices.activity"), "cell-label"));
     activity.append(node("strong", heartbeat === null ? t("time.noHeartbeat") : i18n.age(heartbeat, freshness.now), "activity-age"));
     activity.append(node("p", t("devices.received", { time: i18n.timestamp(heartbeat) }), "muted"));
     const observations = node("div", "", "device-observations");
-    observations.append(node("span", t("devices.observations"), "cell-label"));
-    observations.append(listObservation("devices.observed", device.observed_at, freshness));
-    observations.append(listObservation("devices.connectionObserved", device.connection.verification === "verified" ? device.connection.observed_at : null, freshness));
-    observations.append(listObservation("devices.authObserved", device.authentication.verification === "verified" ? device.authentication.observed_at : null, freshness));
+    const record = node("details", "", "device-record");
+    record.dataset.disclosure = "device-record-" + device.machine_id;
+    const summary = node("summary", t("devices.record"));
+    record.append(summary);
+    record.append(listObservation("devices.observed", device.observed_at, freshness));
+    record.append(listObservation("devices.connectionObserved", device.connection.verification === "verified" ? device.connection.observed_at : null, freshness));
+    record.append(listObservation("devices.authObserved", device.authentication.verification === "verified" ? device.authentication.observed_at : null, freshness));
+    record.append(node("p", t("device.readyUnknown"), "muted"));
+    const inspect = node("a", "", "inspect-device");
+    inspect.href = link.href;
+    inspect.setAttribute("aria-label", t("devices.open", { name: device.name }));
+    inspect.append(uiIcon("arrow"));
+    observations.append(record, inspect);
     row.append(identity, health, activity, observations);
     list.append(row);
   }
   section.append(list);
+  if (page.devices.items.length && !items.length) {
+    const empty = node("div", "", "empty search-empty");
+    empty.append(uiIcon("search"), node("h3", t("devices.noMatches")), node("p", t("devices.noMatchesHint"), "muted"));
+    section.append(empty);
+  }
+  if (page.devices.items.length) {
+    section.append(node("p", t("devices.results", { shown: items.length, count: page.devices.items.length }), "list-count"));
+  }
   if (page.devices.next_cursor !== undefined) {
     const next = node("a", t("devices.next"), "button-link");
-    next.href = routeHref({ machineId: null, cursor: page.devices.next_cursor, providerCursor: null });
+    next.href = routeHref({
+      machineId: null,
+      cursor: page.devices.next_cursor,
+      providerCursor: null,
+      section: route.section
+    });
     section.append(next);
   }
   return { heading, body: section };
@@ -894,11 +1352,15 @@ function syncChildren(parent, desired) {
     parent.removeChild(parent.lastChild);
   }
 }
-function renderPage(content, state, route, i18n = createLocalizer("zh-CN"), management = false) {
+function renderPage(content, state, route, i18n = createLocalizer("zh-CN"), management = false, filter = { query: "", status: "all" }) {
   const { t } = i18n;
   const focused = content.contains(document.activeElement) && document.activeElement instanceof HTMLAnchorElement ? document.activeElement.getAttribute("href") : null;
   const metadataWasOpen = content.querySelector(".gateway-metadata")?.open ?? false;
   const metadataHadFocus = content.contains(document.activeElement) && document.activeElement?.matches(".gateway-metadata > summary");
+  const disclosures = new Map([...content.querySelectorAll("details[data-disclosure]")].map((details) => [
+    details.dataset.disclosure,
+    details.open
+  ]));
   const view = document.createDocumentFragment();
   if (state.problem) {
     const message = node("p", t(problemNames[state.problem]), "notice warning");
@@ -927,8 +1389,28 @@ function renderPage(content, state, route, i18n = createLocalizer("zh-CN"), mana
     gatewayHeading.append(node("h2", t("gateway.heading")));
     gatewayHeading.append(badge(status.mode === "active" ? state.stale ? t("gateway.activeHistory") : t("gateway.active") : t("gateway.degraded"), status.mode === "active" && !state.stale ? "good" : "warning"));
     gatewayHeading.append(badge(state.stale ? t("reader.stale") : t("gateway.fresh"), state.stale ? "warning" : "neutral"));
-    gateway.append(gatewayHeading);
-    gateway.append(facts([
+    const mark = node("span", "", "gateway-symbol");
+    mark.append(uiIcon("gateway"));
+    gatewayHeading.prepend(mark);
+    const components = node("div", "", "gateway-components");
+    for (const [name, key] of [
+      ["store", "overview.store"],
+      ["transport", "overview.transport"],
+      ["native", "overview.native"]
+    ]) {
+      const item = node("div", "", "component-item");
+      item.append(node("span", t(key), "muted"), badge(t(`overview.${status.components[name]}`), status.components[name] === "available" && !state.stale ? "good" : "neutral"));
+      components.append(item);
+    }
+    gateway.append(gatewayHeading, components);
+    const metadata = node("details", "", "gateway-metadata");
+    metadata.open = metadataWasOpen;
+    metadata.append(node("summary", t("gateway.metadata")));
+    metadata.append(facts([
+      [t("gateway.generation"), status.recovery_generation],
+      [t("gateway.policy"), status.policy_revision]
+    ]));
+    metadata.append(facts([
       [t("gateway.listener"), t("gateway.listenerUnknown")],
       [
         t("gateway.authentication"),
@@ -947,22 +1429,28 @@ function renderPage(content, state, route, i18n = createLocalizer("zh-CN"), mana
         })
       ]
     ], "gateway-facts"));
-    const metadata = node("details", "", "gateway-metadata");
-    metadata.open = metadataWasOpen;
-    metadata.append(node("summary", t("gateway.metadata")));
-    metadata.append(facts([
-      [t("gateway.generation"), status.recovery_generation],
-      [t("gateway.policy"), status.policy_revision]
-    ]));
     gateway.append(metadata);
     if (status.mode !== "active") {
       gateway.append(node("p", t("gateway.degradedNote"), "notice warning"));
     }
-    const section = route.machineId === null ? deviceList(page, freshness) : deviceDetail(page, freshness, management && status.mode === "active" && !state.stale);
-    view.append(section.heading, gateway, section.body);
+    const section = route.machineId !== null ? deviceDetail(page, freshness, management && status.mode === "active" && !state.stale) : route.section === "pairing" || route.section === "connect" ? guidePage(route.section, i18n, management) : deviceList(page, freshness, route, filter);
+    view.append(section.heading);
+    if (route.section === "pairing" && (state.stale || status.mode !== "active")) {
+      view.append(node("p", t(state.stale ? "reader.stale" : "gateway.degradedNote"), "notice warning"));
+    }
+    if (route.machineId !== null || !["pairing", "connect"].includes(route.section ?? "")) {
+      if (route.machineId === null) {
+        view.append(overviewMetrics(page, freshness));
+      }
+      view.append(gateway);
+    }
+    view.append(section.body);
   }
   const identity = routeHref(route);
   if (content.dataset.route === identity) {
+    for (const details of view.querySelectorAll("details[data-disclosure]")) {
+      details.open = disclosures.get(details.dataset.disclosure) ?? false;
+    }
     syncChildren(content, view);
   } else {
     content.replaceChildren(view);
@@ -1080,9 +1568,8 @@ function createUiPreferences(changed, host = browserHost) {
 }
 
 // src/webui/preference-control.ts
-var paths = {
+var paths2 = {
   language: "M2 5h12M7 2h1M12 5c-1 6-4 9-8 11M5 8c2 4 4 6 7 8M13 22l5-11 5 11M15 18h6",
-  system: "M3 4h18v12H3zM8 21h8M12 16v5",
   light: "M16 12a4 4 0 1 0-8 0 4 4 0 0 0 8 0M12 2v2M12 20v2M2 12h2M20 12h2M5 5l1.5 1.5M17.5 17.5 19 19M5 19l1.5-1.5M17.5 6.5 19 5",
   dark: "M20.9 13A9 9 0 0 1 11 3.1 9 9 0 1 0 20.9 13Z"
 };
@@ -1097,102 +1584,50 @@ function icon(name) {
   svg.setAttribute("stroke-linecap", "round");
   svg.setAttribute("stroke-linejoin", "round");
   const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
-  path.setAttribute("d", paths[name]);
+  path.setAttribute("d", paths2[name]);
   svg.append(path);
   return svg;
 }
-function createPreferenceControl(kind, choices, onChoose) {
+function createPreferenceControl(kind, onChoose) {
   const root = document.createElement("div");
   root.className = "preference";
   root.dataset.preference = kind;
   const trigger = document.createElement("button");
   trigger.type = "button";
   trigger.className = "preference-trigger";
-  trigger.setAttribute("aria-expanded", "false");
   const current = document.createElement("span");
   current.className = "visually-hidden";
   current.id = `rovloom-${kind}-current`;
   trigger.setAttribute("aria-describedby", current.id);
-  const panel = document.createElement("div");
-  panel.className = "preference-panel";
-  panel.id = `rovloom-${kind}-choices`;
-  panel.hidden = true;
-  panel.setAttribute("role", "group");
-  trigger.setAttribute("aria-controls", panel.id);
-  const buttons = choices.map(([value]) => {
-    const button = document.createElement("button");
-    button.type = "button";
-    button.dataset.choice = value;
-    panel.append(button);
-    return button;
-  });
-  root.append(trigger, current, panel);
-  function close(restoreFocus = false) {
-    panel.hidden = true;
-    trigger.setAttribute("aria-expanded", "false");
-    if (restoreFocus) {
-      trigger.focus();
-    }
-  }
-  function click(event) {
-    const target = event.target instanceof Element ? event.target.closest("button") : null;
-    if (target === trigger) {
-      panel.hidden = !panel.hidden;
-      trigger.setAttribute("aria-expanded", String(!panel.hidden));
-    } else if (target instanceof HTMLButtonElement && buttons.includes(target)) {
-      onChoose(target.dataset.choice);
-      close(true);
-    }
-  }
-  function keydown(event) {
-    if (event.key === "Escape" && !panel.hidden) {
-      event.preventDefault();
-      close(true);
-      return;
-    }
-    if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
-      return;
-    }
-    event.preventDefault();
-    const index = buttons.indexOf(document.activeElement);
-    const next = event.key === "Home" ? 0 : event.key === "End" || index < 0 && event.key === "ArrowUp" ? buttons.length - 1 : (index + (event.key === "ArrowUp" ? -1 : 1) + buttons.length) % buttons.length;
-    panel.hidden = false;
-    trigger.setAttribute("aria-expanded", "true");
-    buttons[next].focus();
-  }
-  function outside(event) {
-    if (event.target instanceof Node && !root.contains(event.target)) {
-      close();
+  root.append(trigger, current);
+  let next = "";
+  function click() {
+    if (next) {
+      onChoose(next);
     }
   }
   function update(i18n, value) {
-    const label = i18n.t(kind === "language" ? "language.label" : "theme.label");
+    const language = kind === "language";
+    const label = i18n.t(language ? "language.label" : "theme.label");
+    next = language ? value === "zh-CN" ? "en" : "zh-CN" : value === "dark" ? "light" : "dark";
+    const name = i18n.t(language ? value === "zh-CN" ? "language.chinese" : "language.english" : value === "dark" ? "theme.dark" : "theme.light");
+    const target = i18n.t(language ? next === "zh-CN" ? "language.chinese" : "language.english" : next === "dark" ? "theme.dark" : "theme.light");
+    current.textContent = `${name}. ${i18n.t("preference.switch", { value: target })}`;
     trigger.setAttribute("aria-label", label);
-    panel.setAttribute("aria-label", label);
-    for (let index = 0;index < buttons.length; index++) {
-      const [choice, key] = choices[index];
-      const button = buttons[index];
-      button.textContent = i18n.t(key);
-      button.setAttribute("aria-pressed", String(choice === value));
-      if (choice === value) {
-        current.textContent = i18n.t(key);
-      }
-    }
     trigger.title = `${label}: ${current.textContent}`;
-    trigger.replaceChildren(icon(kind === "language" ? "language" : value === "dark" ? "dark" : value === "light" ? "light" : "system"));
+    trigger.dataset.value = value;
+    trigger.dataset.nextValue = next;
+    trigger.replaceChildren(icon(language ? "language" : value === "dark" ? "dark" : "light"));
   }
-  function dispose() {
-    root.removeEventListener("click", click);
-    root.removeEventListener("keydown", keydown);
-    document.removeEventListener("pointerdown", outside);
-    document.removeEventListener("focusin", outside);
-    close();
-  }
-  root.addEventListener("click", click);
-  root.addEventListener("keydown", keydown);
-  document.addEventListener("pointerdown", outside);
-  document.addEventListener("focusin", outside);
-  return { root, update, close, dispose };
+  trigger.addEventListener("click", click);
+  return {
+    root,
+    update,
+    dispose() {
+      next = "";
+      trigger.removeEventListener("click", click);
+    }
+  };
 }
 
 // src/webui/request-id.ts
@@ -2552,6 +2987,18 @@ var errors2 = {
   outcome_unconfirmed: "manage.unknown",
   aborted: "manage.cancelled"
 };
+function entryRenderSignature(language, entry) {
+  return [
+    language,
+    entry.name,
+    entry.machine_id,
+    entry.pairing_id,
+    entry.status,
+    entry.claim?.status ?? "",
+    entry.claim?.user_code ?? "",
+    entry.claim?.activation ?? ""
+  ].join("|");
+}
 function node3(tag, className = "") {
   const element = document.createElement(tag);
   element.className = className;
@@ -2559,6 +3006,18 @@ function node3(tag, className = "") {
 }
 function createPairingActions(options) {
   const region = node3("section", "pairing-section");
+  const steps = node3("ol", "pairing-steps");
+  const stepItems = ["pairing.stepCreate", "pairing.stepRun", "pairing.stepApprove"].map((key, index) => {
+    const item = node3("li");
+    const number = node3("span", "pairing-step-number");
+    number.textContent = String(index + 1).padStart(2, "0");
+    const label = node3("span");
+    item.append(number, label);
+    steps.append(item);
+    return { item, label, key };
+  });
+  const layout = node3("div", "pairing-layout");
+  const setup = node3("div", "pairing-setup");
   const heading = node3("h2");
   const intro = node3("p", "muted");
   const form = node3("form", "pairing-form");
@@ -2570,7 +3029,10 @@ function createPairingActions(options) {
   nameInput.maxLength = 63;
   nameInput.pattern = "[a-z0-9][a-z0-9._-]{0,62}";
   nameInput.autocomplete = "off";
-  nameLabel.append(nameCaption, nameInput);
+  const nameHint = node3("small", "field-hint");
+  nameHint.id = "pairing-name-hint";
+  nameInput.setAttribute("aria-describedby", nameHint.id);
+  nameLabel.append(nameCaption, nameInput, nameHint);
   const policyLabel = node3("label");
   const policyCaption = node3("span");
   const policyInput = node3("input");
@@ -2582,7 +3044,10 @@ function createPairingActions(options) {
   policyLabel.append(policyCaption, policyInput);
   const create = node3("button", "pairing-confirm");
   create.type = "submit";
-  form.append(nameLabel, policyLabel, create);
+  const advanced = node3("details", "pairing-advanced");
+  const advancedSummary = node3("summary");
+  advanced.append(advancedSummary, policyLabel);
+  form.append(nameLabel, advanced, create);
   const reviewBox = node3("div", "pairing-review");
   reviewBox.hidden = true;
   const reviewText = node3("p", "pairing-status");
@@ -2600,7 +3065,21 @@ function createPairingActions(options) {
   message.setAttribute("role", "status");
   message.setAttribute("aria-live", "polite");
   const list = node3("ul", "pairing-entries");
-  region.append(heading, intro, form, reviewBox, message, list);
+  setup.append(heading, intro, form, reviewBox, message);
+  const guide = node3("aside", "pairing-guide");
+  const guideIcon = node3("span", "pairing-guide-icon");
+  guideIcon.append(uiIcon("connect"));
+  const guideHeading = node3("h2");
+  const guideDescription = node3("p", "muted");
+  const command = node3("div", "command-snippet");
+  const commandCode = node3("code");
+  commandCode.textContent = "rovloom connector --claim";
+  const commandCopy = copyControl("rovloom connector --claim", "");
+  command.append(commandCode, commandCopy);
+  const guideNote = node3("p", "pairing-guide-note");
+  guide.append(guideIcon, guideHeading, guideDescription, command, guideNote);
+  layout.append(setup, guide);
+  region.append(steps, layout, list);
   let i18n;
   let available = false;
   let disposed = false;
@@ -2705,6 +3184,11 @@ function createPairingActions(options) {
     if (!i18n) {
       return;
     }
+    const signature = entryRenderSignature(i18n.language, entry);
+    if (entry.rendered === signature) {
+      return;
+    }
+    entry.rendered = signature;
     const t = i18n.t.bind(i18n);
     entry.item.replaceChildren();
     const head = node3("div", "pairing-entry-head");
@@ -2714,19 +3198,21 @@ function createPairingActions(options) {
     status.textContent = entry.claim?.activation === "configured" ? t("pairing.activated") : entry.status === "paired" ? t("pairing.paired") : entry.status === "failed" ? t("pairing.failed") : entry.status === "expired" || entry.status === "cancelled" ? t("pairing.expired") : entry.claim?.status === "approved" ? t("pairing.approved") : entry.claim ? t("pairing.claimArrived") : t("pairing.waitingClaim");
     head.append(title, status);
     entry.item.append(head);
+    status.classList.add("badge");
     const facts = node3("dl", "facts");
     const idTerm = node3("dt");
     idTerm.textContent = t("pairing.application");
     const idValue = node3("dd");
     const idCode = node3("code");
     idCode.textContent = entry.pairing_id;
-    idValue.append(idCode);
+    idValue.append(idCode, copyControl(entry.pairing_id, t("copy.id")));
     const machineTerm = node3("dt");
     machineTerm.textContent = t("pairing.machine");
     const machineValue = node3("dd");
     machineValue.textContent = entry.machine_id;
     facts.append(idTerm, idValue, machineTerm, machineValue);
     entry.item.append(facts);
+    updateSteps();
     if (entry.status === "pending" && entry.claim?.status === "pending") {
       const codeLabel = node3("p", "muted");
       codeLabel.textContent = t("pairing.userCode");
@@ -2748,6 +3234,19 @@ function createPairingActions(options) {
       entry.item.append(codeLabel, code, approve);
     }
   }
+  function updateSteps() {
+    const entry = [...entries.values()].at(-1);
+    const finished = entry?.claim?.activation === "configured" || entry?.status === "paired" && !entry.claim;
+    const stage = !entry || ["expired", "failed", "cancelled"].includes(entry.status) ? 0 : finished ? 3 : entry.claim ? 2 : 1;
+    for (const [index, step] of stepItems.entries()) {
+      step.item.dataset.state = index < stage ? "complete" : index === stage ? "current" : "upcoming";
+      if (index === stage) {
+        step.item.setAttribute("aria-current", "step");
+      } else {
+        step.item.removeAttribute("aria-current");
+      }
+    }
+  }
   function addEntry(entry) {
     const existing = entries.get(entry.pairing_id);
     if (existing) {
@@ -2756,6 +3255,7 @@ function createPairingActions(options) {
       return;
     }
     entries.set(entry.pairing_id, entry);
+    options.committed?.();
     list.append(entry.item);
     renderEntry(entry);
   }
@@ -2837,7 +3337,19 @@ function createPairingActions(options) {
       available = isAvailable;
       region.hidden = !isAvailable;
       const t = localizer.t.bind(localizer);
-      heading.textContent = t("pairing.title");
+      heading.textContent = t("pairing.formTitle");
+      for (const step of stepItems) {
+        step.label.textContent = t(step.key);
+      }
+      updateSteps();
+      nameInput.placeholder = t("pairing.namePlaceholder");
+      nameHint.textContent = t("pairing.nameHint");
+      advancedSummary.textContent = t("pairing.advanced");
+      guideHeading.textContent = t("pairing.guideTitle");
+      guideDescription.textContent = t("pairing.guideDescription");
+      guideNote.textContent = t("pairing.guideNote");
+      commandCopy.setAttribute("aria-label", t("copy.action"));
+      commandCopy.title = t("copy.action");
       intro.textContent = t("pairing.intro");
       nameCaption.textContent = t("pairing.name");
       policyCaption.textContent = t("pairing.policy");
@@ -2856,6 +3368,17 @@ function createPairingActions(options) {
     suspend() {
       stopPolling();
     },
+    remove(pairingId) {
+      entries.get(pairingId)?.item.remove();
+      entries.delete(pairingId);
+      if (flowIntent && "pairing_id" in flowIntent && flowIntent.pairing_id === pairingId) {
+        flow?.dispose();
+        flow = undefined;
+        flowIntent = undefined;
+        reviewBox.hidden = true;
+      }
+      updateSteps();
+    },
     clear() {
       stopPolling();
       flow?.dispose();
@@ -2874,8 +3397,305 @@ function createPairingActions(options) {
   };
 }
 
+// src/webui/resource-client.ts
+class ResourceError extends Error {
+  code;
+  constructor(code) {
+    super(code);
+    this.code = code;
+  }
+}
+
+// src/webui/resource-panel.ts
+function node4(tag, text = "", className = "") {
+  const element = document.createElement(tag);
+  element.textContent = text;
+  element.className = className;
+  return element;
+}
+function createResourcePanel(options) {
+  const region = node4("section", "", "resource-panel");
+  const feedback = node4("p", "", "resource-feedback");
+  feedback.setAttribute("role", "status");
+  let i18n;
+  let key = "";
+  let active = false;
+  let pending = false;
+  let controller = new AbortController;
+  let data;
+  let cursor = 0;
+  let tokenName = "";
+  let tokenDays = "365";
+  let version = 0;
+  let route;
+  let language = "";
+  function button(label, action, danger = false) {
+    const result = node4("button", label, danger ? "danger-button" : "");
+    result.type = "button";
+    result.disabled = pending;
+    result.addEventListener("click", action);
+    return result;
+  }
+  async function request(operation, args) {
+    return options.transport(operation, args, controller.signal);
+  }
+  function failure(error) {
+    if (error instanceof ResourceError && (error.code === "forbidden" || error.code === "unauthenticated")) {
+      clear();
+      options.authorizationLost(error.code);
+      return;
+    }
+    feedback.textContent = i18n.t(error instanceof ResourceError && error.code === "invalid_arguments" ? "resources.invalid" : "resources.failed");
+  }
+  async function refresh() {
+    const generation = ++version;
+    controller.abort();
+    controller = new AbortController;
+    pending = true;
+    feedback.textContent = i18n.t("resources.loading");
+    try {
+      const value = await request(key === "connect" ? "tokens_list" : "pairings_list", key === "connect" ? {} : { cursor });
+      if (generation !== version || !active) {
+        return;
+      }
+      if (!value || !Array.isArray(value.items)) {
+        throw new Error("invalid_reply");
+      }
+      data = value;
+      feedback.textContent = "";
+    } catch (error) {
+      if (generation === version && active) {
+        failure(error);
+      }
+    } finally {
+      if (generation === version && active) {
+        pending = false;
+        render();
+      }
+    }
+  }
+  async function mutate(operation, args) {
+    if (pending || !active) {
+      return;
+    }
+    const generation = version;
+    pending = true;
+    feedback.textContent = i18n.t("resources.saving");
+    render();
+    try {
+      await request(operation, args);
+      if (generation !== version || !active) {
+        return;
+      }
+      feedback.textContent = i18n.t("resources.saved");
+      if (operation === "tokens_create") {
+        tokenName = "";
+        tokenDays = "365";
+      }
+      if (operation === "devices_delete") {
+        options.committed(route.machineId ?? undefined);
+      } else {
+        await refresh();
+        if (operation === "pairings_delete") {
+          options.committed(undefined, args.pairing_id);
+        }
+      }
+    } catch (error) {
+      if (generation === version && active) {
+        failure(error);
+      }
+    } finally {
+      if (generation === version && active) {
+        pending = false;
+        render();
+      }
+    }
+  }
+  function remove(operation, args, message) {
+    if (window.confirm(message)) {
+      mutate(operation, args);
+    }
+  }
+  function render() {
+    if (!active) {
+      return;
+    }
+    const { t } = i18n;
+    const body = node4("div", "", "resource-body");
+    if (key === "device") {
+      const card = node4("article", "", "resource-delete-card");
+      card.append(node4("div", t("resources.deleteDeviceNote"), "muted"), button(t("resources.deleteDevice"), () => remove("devices_delete", { machine_id: route.machineId }, t("resources.confirmDevice")), true));
+      body.append(card);
+    } else {
+      const heading = node4("div", "", "section-heading");
+      heading.append(node4("h2", t(key === "connect" ? "resources.tokens" : "resources.pairings")), button(t("action.refresh"), () => {
+        refresh();
+      }));
+      body.append(heading);
+      if (key === "connect") {
+        const form = node4("form", "", "token-create-form");
+        const nameLabel = node4("label", t("resources.name"));
+        const name = node4("input");
+        name.name = "token-name";
+        name.required = true;
+        name.pattern = "[A-Za-z0-9_-]{1,128}";
+        name.maxLength = 128;
+        name.placeholder = "my-client";
+        name.disabled = pending;
+        name.value = tokenName;
+        name.addEventListener("input", () => {
+          tokenName = name.value;
+        });
+        nameLabel.append(name);
+        const daysLabel = node4("label", t("resources.expiry"));
+        const days = node4("select");
+        days.name = "token-days";
+        days.disabled = pending;
+        for (const value of [365, 90, 30, 7]) {
+          const option = node4("option", t("resources.days", { count: value }));
+          option.value = String(value);
+          days.append(option);
+        }
+        days.value = tokenDays;
+        days.addEventListener("change", () => {
+          tokenDays = days.value;
+        });
+        daysLabel.append(days);
+        const submit = node4("button", t("resources.create"), "primary-button");
+        submit.type = "submit";
+        submit.disabled = pending;
+        form.append(nameLabel, daysLabel, submit);
+        form.addEventListener("submit", (event) => {
+          event.preventDefault();
+          mutate("tokens_create", { principal: name.value.trim(), days: Number(days.value) });
+        });
+        body.append(node4("p", t("resources.tokenNote"), "muted"), form);
+        if (data?.resource) {
+          const endpoint = node4("div", "", "mcp-endpoint");
+          endpoint.append(node4("span", t("resources.endpoint")), node4("code", data.resource), copyControl(data.resource, t("copy.action")));
+          body.append(endpoint, node4("p", t("resources.endpointNote"), "muted"));
+        }
+        for (const item of data?.items ?? []) {
+          const token = item;
+          const card = node4("article", "", "token-card");
+          card.dataset.tokenPrincipal = token.principal;
+          const summary = node4("div", "", "token-summary");
+          summary.append(node4("h3", token.principal), node4("span", t(token.expires_at > Date.now() ? "resources.active" : "resources.expired"), "badge"), node4("span", t("resources.expiresAt", { time: i18n.timestamp(token.expires_at) }), "muted"));
+          const controls = node4("div", "", "token-controls");
+          if (token.token) {
+            const value = node4("input");
+            value.type = "password";
+            value.value = token.token;
+            value.readOnly = true;
+            value.setAttribute("aria-label", token.principal + " Token");
+            value.autocomplete = "off";
+            value.spellcheck = false;
+            const toggle = button(t("resources.show"), () => {
+              const hidden = value.type === "password";
+              value.type = hidden ? "text" : "password";
+              toggle.textContent = t(hidden ? "resources.hide" : "resources.show");
+            });
+            controls.append(value, toggle, copyControl(token.token, t("copy.action")));
+          } else {
+            controls.append(node4("span", t("resources.legacy"), "muted"), button(t("resources.reissue"), () => {
+              if (window.confirm(t("resources.confirmReissue"))) {
+                mutate("tokens_rotate", { principal: token.principal });
+              }
+            }));
+          }
+          controls.append(button(t("resources.delete"), () => remove("tokens_delete", { principal: token.principal }, t("resources.confirmToken", { name: token.principal })), true));
+          card.append(summary, controls);
+          body.append(card);
+        }
+      } else {
+        for (const item of data?.items ?? []) {
+          const pairing = item;
+          const card = node4("article", "", "pairing-record");
+          const details = node4("div");
+          const label = ["pending", "paired", "cancelled", "expired"].includes(pairing.status) ? t("resources." + pairing.status) : pairing.status;
+          details.append(node4("h3", pairing.name), node4("code", pairing.pairing_id), node4("p", label + " \xB7 " + i18n.timestamp(pairing.expires), "muted"));
+          card.append(details, button(t("resources.delete"), () => remove("pairings_delete", { pairing_id: pairing.pairing_id }, t("resources.confirmPairing")), true));
+          body.append(card);
+        }
+      }
+      if (key === "pairing" && (cursor > 0 || typeof data?.next_cursor === "number")) {
+        const pages = node4("div", "", "token-controls");
+        if (cursor > 0) {
+          pages.append(button(t("resources.previous"), () => {
+            cursor = Math.max(0, cursor - 50);
+            refresh();
+          }));
+        }
+        if (typeof data?.next_cursor === "number") {
+          pages.append(button(t("resources.next"), () => {
+            cursor = data.next_cursor;
+            refresh();
+          }));
+        }
+        body.append(pages);
+      }
+      if (data?.items.length === 0) {
+        body.append(node4("p", t(key === "connect" ? "resources.emptyTokens" : "resources.emptyPairings"), "empty"));
+      }
+    }
+    region.replaceChildren(body, feedback);
+  }
+  function clear() {
+    active = false;
+    key = "";
+    data = undefined;
+    cursor = 0;
+    tokenName = "";
+    tokenDays = "365";
+    version++;
+    controller.abort();
+    pending = false;
+    region.replaceChildren();
+    region.hidden = true;
+  }
+  return {
+    region,
+    clear,
+    dispose: clear,
+    refresh() {
+      if (active && key !== "device") {
+        refresh();
+      }
+    },
+    update(next, localizer, enabled) {
+      const nextKey = next.machineId ? "device" : next.section === "connect" || next.section === "pairing" ? next.section : "";
+      if (!enabled || !nextKey) {
+        clear();
+        return;
+      }
+      const changed = key !== nextKey || route?.machineId !== next.machineId;
+      const translated = language !== localizer.language;
+      route = next;
+      i18n = localizer;
+      language = localizer.language;
+      active = true;
+      region.hidden = false;
+      if (changed) {
+        key = nextKey;
+        cursor = 0;
+        data = undefined;
+        version++;
+        controller.abort();
+        controller = new AbortController;
+        pending = false;
+        render();
+        if (key !== "device") {
+          refresh();
+        }
+      } else if (translated) {
+        render();
+      }
+    }
+  };
+}
+
 // src/webui/page.ts
-function element(tag, text, className = "") {
+function element(tag, text = "", className = "") {
   const result = document.createElement(tag);
   result.textContent = text;
   result.className = className;
@@ -2884,21 +3704,51 @@ function element(tag, text, className = "") {
 async function unavailableRead() {
   throw new ReadError2("unavailable");
 }
-function mountWebUi(root, read = unavailableRead, clock, management) {
-  const header = element("header", "", "topbar");
+function mountWebUi(root, read = unavailableRead, clock, management, resources) {
+  const sidebar = element("aside", "", "sidebar");
   const brand = element("a", "", "brand");
   brand.href = "#";
   const logo = element("img", "", "brand-logo");
-  logo.src = "./rovloom-mark-transparent.png";
+  logo.src = "./rovloom-logo.png";
   logo.alt = "Rovloom";
-  logo.width = 48;
-  logo.height = 48;
-  brand.append(logo, element("span", "Rovloom", "brand-name"));
+  logo.width = 180;
+  logo.height = 60;
+  brand.append(logo);
+  const sidebarCaption = element("p", "", "sidebar-caption");
+  const navHeading = element("p", "", "nav-heading");
+  const navigation = element("nav", "", "sidebar-nav");
+  const navLinks = ["overview", "devices", "pairing", "connect"].map((section) => {
+    const link = element("a", "", "nav-link");
+    link.href = section === "overview" ? "#" : "#view=" + section;
+    const label = element("span");
+    link.append(uiIcon(section), label);
+    navigation.append(link);
+    return { section, link, label };
+  });
+  const resourceHeading = element("p", "", "nav-heading resource-heading");
+  const docs = element("a", "", "nav-link docs-link");
+  docs.target = "_blank";
+  docs.rel = "noopener noreferrer";
+  const docsLabel = element("span");
+  docs.append(uiIcon("book"), docsLabel);
+  const sidebarStatus = element("div", "", "sidebar-status");
+  const statusIcon = element("span", "", "sidebar-gateway-icon");
+  statusIcon.append(uiIcon("gateway"));
+  const statusCopy = element("div");
+  const statusLabel = element("strong", "Gateway");
+  const statusValue = element("span", "", "sidebar-status-value");
+  statusCopy.append(statusLabel, statusValue);
+  sidebarStatus.append(statusIcon, statusCopy);
+  sidebar.append(brand, sidebarCaption, navHeading, navigation, resourceHeading, docs, sidebarStatus);
+  const workspace = element("div", "", "workspace");
+  const header = element("header", "", "topbar");
+  const headerLabel = element("div", "", "header-label");
+  headerLabel.append(uiIcon("overview"));
   const title = element("span", "", "brand-context");
+  headerLabel.append(title);
   const preferencesBar = element("div", "", "preferences");
-  const commandbar = element("nav", "", "commandbar");
-  const sectionLink = element("a", "", "section-nav");
-  sectionLink.href = "#";
+  const commandbar = element("div", "", "commandbar");
+  commandbar.setAttribute("role", "toolbar");
   const toolbar = element("div", "", "toolbar");
   const refresh = element("button", "");
   refresh.type = "button";
@@ -2912,25 +3762,24 @@ function mountWebUi(root, read = unavailableRead, clock, management) {
   content.tabIndex = -1;
   refresh.setAttribute("aria-controls", content.id);
   cancel.setAttribute("aria-controls", content.id);
-  const language = createPreferenceControl("language", [
-    ["system", "language.system"],
-    ["zh-CN", "language.chinese"],
-    ["en", "language.english"]
-  ], (value) => preferences.setLanguage(value));
-  const theme = createPreferenceControl("theme", [
-    ["system", "theme.system"],
-    ["light", "theme.light"],
-    ["dark", "theme.dark"]
-  ], (value) => preferences.setTheme(value));
+  const language = createPreferenceControl("language", (value) => preferences.setLanguage(value));
+  const theme = createPreferenceControl("theme", (value) => preferences.setTheme(value));
   preferencesBar.append(language.root, theme.root);
   toolbar.append(indicator, refresh, cancel);
-  commandbar.append(sectionLink, toolbar);
-  header.append(brand, title, preferencesBar);
+  commandbar.append(toolbar);
+  const headerActions = element("div", "", "topbar-actions");
+  headerActions.append(commandbar, preferencesBar);
+  header.append(headerLabel, headerActions);
   const skip = element("a", "", "skip-link");
   skip.href = "#management-content";
   const footer = element("footer", "", "muted");
-  root.replaceChildren(skip, header, commandbar, content, footer);
+  const copyFeedback = element("span", "", "visually-hidden");
+  copyFeedback.setAttribute("role", "status");
+  copyFeedback.setAttribute("aria-live", "polite");
+  workspace.append(header, content, copyFeedback, footer);
+  root.replaceChildren(skip, sidebar, workspace);
   let route = parseRoute(location.hash);
+  let filter = { query: "", status: "all" };
   let reader;
   let disposed = false;
   let i18n = createLocalizer("en");
@@ -2956,6 +3805,9 @@ function mountWebUi(root, read = unavailableRead, clock, management) {
   }
   const pairing = management ? createPairingActions({
     transport: management,
+    committed() {
+      resourcePanel?.refresh();
+    },
     authorizationLost(problem) {
       if (disposed) {
         return;
@@ -2969,20 +3821,62 @@ function mountWebUi(root, read = unavailableRead, clock, management) {
   if (pairing) {
     footer.before(pairing.region);
   }
+  const resourcePanel = resources ? createResourcePanel({
+    transport: resources,
+    committed(machine, pairingId) {
+      if (machine) {
+        location.hash = "#view=devices";
+      } else if (pairingId) {
+        pairing?.remove(pairingId);
+      }
+    },
+    authorizationLost(problem) {
+      reader.dispose();
+      actions?.clear();
+      pairing?.clear();
+      paint({ snapshot: null, pending: false, stale: true, ageMs: 0, problem }, route);
+    }
+  }) : undefined;
+  if (resourcePanel) {
+    footer.before(resourcePanel.region);
+  }
   function paint(state, current) {
     refresh.disabled = state.pending || ["unauthenticated", "forbidden", "not_found"].includes(state.problem ?? "");
     cancel.disabled = !state.pending;
     indicator.textContent = i18n.t(state.pending ? "reader.pending" : state.snapshot ? state.stale ? "reader.stale" : "reader.snapshot" : "reader.empty");
     content.setAttribute("aria-busy", String(state.pending));
     indicator.dataset.state = state.pending ? "pending" : state.stale ? "stale" : state.snapshot ? "current" : "empty";
-    sectionLink.setAttribute("aria-current", current.machineId === null ? "page" : "location");
     if (["unauthenticated", "forbidden", "not_found"].includes(state.problem ?? "")) {
       actions?.clear();
       pairing?.clear();
     }
     pairing?.update(i18n, !!state.snapshot && !state.stale && state.snapshot.value.status.mode === "active");
     actions?.update(i18n, !!state.snapshot && !state.stale && state.snapshot.value.status.mode === "active", state.snapshot ? state.snapshot.observedAt + state.ageMs : undefined);
-    renderPage(content, state, current, i18n, !!actions);
+    const section = current.machineId ? "devices" : current.section ?? "overview";
+    content.dataset.section = section;
+    for (const item of navLinks) {
+      if (item.section === section) {
+        item.link.setAttribute("aria-current", "page");
+      } else {
+        item.link.removeAttribute("aria-current");
+      }
+    }
+    title.textContent = i18n.t("nav." + section);
+    const active = !!state.snapshot && !state.stale && state.snapshot.value.status.mode === "active";
+    sidebarStatus.dataset.state = active ? "current" : "unknown";
+    statusValue.textContent = i18n.t(active ? "gateway.active" : state.snapshot ? state.stale ? "reader.stale" : "gateway.degraded" : "reader.empty");
+    if (pairing) {
+      pairing.region.hidden = section !== "pairing" || !active;
+    }
+    renderPage(content, state, current, i18n, !!actions, filter);
+    const authorized = active && !["unauthenticated", "forbidden", "not_found"].includes(state.problem ?? "");
+    resourcePanel?.update(current, i18n, authorized);
+    if (resourcePanel && section === "connect" && authorized) {
+      const guide = content.querySelector(".connection-guide");
+      if (guide) {
+        guide.hidden = true;
+      }
+    }
   }
   function applyPreferences(state) {
     const languageChanged = i18n.language !== state.language;
@@ -2994,15 +3888,23 @@ function mountWebUi(root, read = unavailableRead, clock, management) {
     document.documentElement.dataset.theme = state.theme;
     document.title = t("app.title");
     brand.setAttribute("aria-label", t("app.navigation"));
-    title.textContent = t("app.console");
-    sectionLink.textContent = t("devices.heading");
+    title.textContent = t("nav.console");
+    sidebarCaption.textContent = t("app.console");
+    navHeading.textContent = t("nav.workspace");
+    resourceHeading.textContent = t("nav.resources");
+    navigation.setAttribute("aria-label", t("app.subtitle"));
+    docsLabel.textContent = t("nav.docs");
+    docs.href = `https://github.com/ArnoChenFx/rovloom/blob/main/docs/QUICK-START${state.language === "zh-CN" ? "-zh" : ""}.md`;
+    for (const item of navLinks) {
+      item.label.textContent = t("nav." + item.section);
+    }
     commandbar.setAttribute("aria-label", t("app.subtitle"));
     refresh.textContent = t("action.refresh");
     cancel.textContent = t("action.cancel");
     skip.textContent = t("app.skip");
     footer.textContent = t(actions ? "app.managedFooter" : "app.footer");
-    language.update(i18n, state.languageChoice);
-    theme.update(i18n, state.themeChoice);
+    language.update(i18n, state.language);
+    theme.update(i18n, state.theme);
     if (languageChanged && reader) {
       paint(reader.state(), route);
     }
@@ -3024,6 +3926,7 @@ function mountWebUi(root, read = unavailableRead, clock, management) {
     content.focus();
   }
   function refreshPage() {
+    resourcePanel?.refresh();
     reader.refresh();
   }
   function cancelRead() {
@@ -3064,11 +3967,41 @@ function mountWebUi(root, read = unavailableRead, clock, management) {
       actions.open({ action, machine_id: device.machine_id }, button);
     }
   }
+  function searchDevices(event) {
+    if (event.target instanceof HTMLInputElement && event.target.name === "device-search") {
+      filter.query = event.target.value;
+      paint(reader.state(), route);
+    }
+  }
+  function filterDevices(event) {
+    const button = event.target instanceof Element ? event.target.closest("[data-device-filter]") : null;
+    const selected = button?.dataset.deviceFilter;
+    if (selected === "all" || selected === "online" || selected === "attention") {
+      filter.status = selected;
+      paint(reader.state(), route);
+    }
+  }
+  async function copy(event) {
+    const button = event.target instanceof Element ? event.target.closest("button[data-copy]") : null;
+    if (!button || button.disabled || !root.contains(button)) {
+      return;
+    }
+    const value = button.dataset.copy;
+    if (value === undefined) {
+      return;
+    }
+    copyFeedback.textContent = "";
+    const success = await copyText(value);
+    if (!disposed) {
+      copyFeedback.textContent = i18n.t(success ? "copy.done" : "copy.failed");
+      button.title = copyFeedback.textContent;
+      button.dataset.copied = String(success);
+    }
+  }
   function navigate() {
+    filter = { query: "", status: "all" };
     actions?.suspend();
     pairing?.suspend();
-    language.close();
-    theme.close();
     if (location.hash === "#management-content") {
       content.focus();
       return;
@@ -3096,9 +4029,8 @@ function mountWebUi(root, read = unavailableRead, clock, management) {
   function hide() {
     actions?.suspend();
     pairing?.suspend();
-    language.close();
-    theme.close();
     reader.dispose();
+    resourcePanel?.clear();
     content.replaceChildren();
   }
   function dispose() {
@@ -3107,9 +4039,13 @@ function mountWebUi(root, read = unavailableRead, clock, management) {
     }
     disposed = true;
     reader.dispose();
+    resourcePanel?.dispose();
     actions?.dispose();
     pairing?.dispose();
     content.removeEventListener("click", deviceAction);
+    content.removeEventListener("click", filterDevices);
+    content.removeEventListener("input", searchDevices);
+    root.removeEventListener("click", copy);
     skip.removeEventListener("click", skipContent);
     refresh.removeEventListener("click", refreshPage);
     cancel.removeEventListener("click", cancelRead);
@@ -3126,6 +4062,9 @@ function mountWebUi(root, read = unavailableRead, clock, management) {
   refresh.addEventListener("click", refreshPage);
   cancel.addEventListener("click", cancelRead);
   content.addEventListener("click", deviceAction);
+  content.addEventListener("click", filterDevices);
+  content.addEventListener("input", searchDevices);
+  root.addEventListener("click", copy);
   window.addEventListener("hashchange", navigate);
   document.addEventListener("visibilitychange", visibility);
   window.addEventListener("pageshow", show);
@@ -3517,4 +4456,4 @@ export {
   unavailableRead
 };
 
-//# debugId=D52975500C6ECA9664756E2164756E21
+//# debugId=9FAF58405B4DF80264756E2164756E21