rovloom 0.5.0 → 0.6.1

package/dist/src/webui/index.js

@@ -1,7 +1,4 @@
 // @bun
-import {
-  DEFAULT_PAIRING_POLICY_REF
-} from "../chunk-5j0gj6w2.js";
 import {
   ReadError2,
   createSnapshotReader2,
@@ -13,6 +10,100 @@ import {
 
 // src/webui/i18n.ts
 var chinese = Object.freeze({
+  "resources.tokens": "MCP Token",
+  "resources.pairingCodes": "\u914D\u5BF9\u7801",
+  "resources.createCode": "\u751F\u6210\u914D\u5BF9\u7801",
+  "resources.codesNote": "\u4E00\u673A\u4E00\u7801\uFF1A\u751F\u6210\u540E\u628A\u52A0\u5165\u547D\u4EE4\u590D\u5236\u5230\u76EE\u6807\u673A\u5668\u6267\u884C\uFF0C\u5373\u5B8C\u6210\u914D\u5BF9\u3002\u672A\u4F7F\u7528\u7684\u7801\u53EF\u968F\u65F6\u4F5C\u5E9F\u3002",
+  "resources.codeCreatedNote": "\u5DF2\u751F\u6210\u3002\u590D\u5236\u4E0B\u9762\u7684\u547D\u4EE4\u5230 Connector \u673A\u5668\u8FD0\u884C\u5373\u53EF\uFF08\u7801\u53EA\u663E\u793A\u4E00\u6B21\u547D\u4EE4\u5F62\u6001\uFF0C\u5217\u8868\u4E2D\u53EF\u518D\u6B21\u590D\u5236\uFF09\u3002",
+  "resources.code_unused": "\u672A\u4F7F\u7528",
+  "resources.code_used": "\u5DF2\u4F7F\u7528",
+  "resources.code_revoked": "\u5DF2\u4F5C\u5E9F",
+  "resources.code_failed": "\u5931\u8D25",
+  "resources.revokeCode": "\u4F5C\u5E9F",
+  "resources.confirmRevokeCode": "\u4F5C\u5E9F\u8FD9\u5F20\u914D\u5BF9\u7801\uFF1F\u76EE\u6807\u8BBE\u5907\u9700\u751F\u6210\u65B0\u7801\u3002",
+  "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.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.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",
+  "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.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.record": "\u89C2\u6D4B\u8BE6\u60C5",
+  "devices.open": "\u67E5\u770B {name} \u7684\u8BE6\u60C5",
+  "overview.available": "\u53EF\u7528",
+  "overview.degraded": "\u964D\u7EA7",
+  "overview.unavailable": "\u4E0D\u53EF\u7528",
+  "overview.unverified": "\u672A\u6838\u9A8C",
+  "pairing.pageTitle": "\u8FDE\u63A5\u4E00\u53F0\u65B0\u8BBE\u5907",
+  "pairing.pageDescription": "\u751F\u6210\u4E00\u673A\u4E00\u7801\uFF0C\u628A\u52A0\u5165\u547D\u4EE4\u590D\u5236\u5230\u76EE\u6807\u673A\u5668\u8FD0\u884C\u5373\u53EF\uFF1B\u6CA1\u6709\u7533\u8BF7\u3001\u6279\u51C6\u6216\u6838\u5BF9\u7801\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\u751F\u6210\u914D\u5BF9\u7801\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.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,14 +112,13 @@ 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",
   "language.english": "English",
   "theme.label": "\u4E3B\u9898",
-  "theme.system": "\u8DDF\u968F\u7CFB\u7EDF",
   "theme.light": "\u6D45\u8272",
   "theme.dark": "\u6DF1\u8272",
   "manage.heading": "\u8BBE\u5907\u7BA1\u7406\u64CD\u4F5C",
@@ -59,28 +149,6 @@ var chinese = Object.freeze({
   "manage.revokeEffect": "\u6301\u4E45\u64A4\u9500\u6210\u529F\u540E\uFF0C\u65E7\u8EAB\u4EFD\u5C06\u4E0D\u80FD\u91CD\u65B0\u63A5\u5165\uFF1B\u7ED3\u679C\u4EE5\u5F53\u524D\u6301\u4E45\u56DE\u6267\u4E3A\u51C6\uFF0C\u539F\u751F\u5DE5\u4F5C\u53EF\u80FD\u7EE7\u7EED\u3002",
   "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.name": "\u65B0\u8BBE\u5907\u540D\u79F0",
-  "pairing.policy": "\u6388\u6743\u653F\u7B56\u5F15\u7528",
-  "pairing.create": "\u65B0\u5EFA\u914D\u5BF9\u7533\u8BF7",
-  "pairing.preparing": "\u6B63\u5728\u51C6\u5907\u540E\u53F0\u786E\u8BA4\u2026",
-  "pairing.review": "\u8BF7\u6838\u5BF9\u4EE5\u4E0B\u540E\u53F0\u6458\u8981\uFF0C\u786E\u8BA4\u540E\u624D\u4F1A\u63D0\u4EA4\u3002",
-  "pairing.confirm": "\u786E\u8BA4\u6267\u884C",
-  "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.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",
-  "pairing.paired": "\u8BBE\u5907\u5DF2\u53D6\u56DE\u51ED\u636E\uFF0C\u914D\u5BF9\u5B8C\u6210\u3002",
-  "pairing.activated": "\u8BBE\u5907\u5DF2\u53D6\u56DE\u51ED\u636E\u5E76\u5B8C\u6210\u539F\u751F\u6FC0\u6D3B\uFF0C\u53EF\u6B63\u5F0F\u4F7F\u7528\u3002",
-  "pairing.statusPending": "\u7533\u8BF7\u5F85\u8BA4\u9886",
-  "pairing.expired": "\u7533\u8BF7\u5DF2\u8FC7\u671F\uFF0C\u8BF7\u91CD\u65B0\u65B0\u5EFA\u3002",
-  "pairing.failed": "\u64CD\u4F5C\u672A\u5B8C\u6210\uFF0C\u8BF7\u91CD\u65B0\u51C6\u5907\u3002",
-  "pairing.application": "\u7533\u8BF7\u7F16\u53F7",
-  "pairing.machine": "\u8BBE\u5907",
   "manage.machine": "\u76EE\u6807\u8BBE\u5907",
   "manage.epoch": "\u8FDE\u63A5\u4EE3\u6B21",
   "manage.revision": "\u8D44\u6E90\u7248\u672C",
@@ -102,7 +170,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",
@@ -113,6 +181,15 @@ var chinese = Object.freeze({
   "error.timeout": "\u8BFB\u53D6\u8D85\u8FC7 5 \u79D2\u3002\u5F53\u524D\u663E\u793A\u4E0D\u662F\u5B9E\u65F6\u72B6\u6001\u3002",
   "error.cancelled": "\u5DF2\u53D6\u6D88\u672C\u6B21\u8BFB\u53D6\u3002",
   "time.noObservation": "\u5C1A\u65E0\u53EF\u4FE1\u89C2\u6D4B",
+  "reason.auth_failed": "\u8BA4\u8BC1\u5931\u8D25",
+  "reason.backend_unavailable": "\u540E\u7AEF\u4E0D\u53EF\u7528",
+  "reason.binding_mismatch": "\u7ED1\u5B9A\u4E0D\u4E00\u81F4",
+  "reason.connection_closed": "\u8FDE\u63A5\u5DF2\u5173\u95ED",
+  "reason.credential_expired": "\u51ED\u636E\u5DF2\u8FC7\u671F",
+  "reason.heartbeat_timeout": "\u5FC3\u8DF3\u8D85\u65F6",
+  "reason.not_recorded": "\u672A\u8BB0\u5F55",
+  "reason.protocol_error": "\u534F\u8BAE\u9519\u8BEF",
+  "reason.stale": "\u72B6\u6001\u8FC7\u671F",
   "time.noHeartbeat": "\u5C1A\u65E0\u53EF\u4FE1\u5FC3\u8DF3",
   "time.observed": "{time} \xB7 {age}{expired}",
   "time.expiredSuffix": " \xB7 \u5DF2\u8FC7\u671F",
@@ -144,15 +221,6 @@ var chinese = Object.freeze({
   "persisted.offline": "\u79BB\u7EBF\u767B\u8BB0 (offline)",
   "persisted.online": "\u5728\u7EBF\u767B\u8BB0 (online)",
   "persisted.revoked": "\u8EAB\u4EFD\u5DF2\u64A4\u9500 (revoked)",
-  "reason.backend_unavailable": "\u540E\u7AEF\u4E0D\u53EF\u7528",
-  "reason.not_recorded": "\u672A\u8BB0\u5F55",
-  "reason.stale": "\u89C2\u6D4B\u5DF2\u8FC7\u671F",
-  "reason.auth_failed": "\u8BA4\u8BC1\u5931\u8D25",
-  "reason.credential_expired": "\u51ED\u636E\u8FC7\u671F",
-  "reason.heartbeat_timeout": "\u5FC3\u8DF3\u8D85\u65F6",
-  "reason.protocol_error": "\u534F\u8BAE\u9519\u8BEF",
-  "reason.connection_closed": "\u8FDE\u63A5\u5DF2\u5173\u95ED",
-  "reason.binding_mismatch": "\u914D\u7F6E\u4E0D\u4E00\u81F4",
   "device.expired": "\u8BBE\u5907\u89C2\u6D4B\u5DF2\u8FC7\u671F",
   "device.revokedHistory": "\u4E0A\u6B21\u6301\u4E45\u767B\u8BB0\uFF1A\u8EAB\u4EFD\u5DF2\u64A4\u9500\uFF08\u5DF2\u8FC7\u671F\uFF09",
   "device.oldRecords": "\u65E7\u8FDE\u63A5\u4E0E\u8BA4\u8BC1\u8BB0\u5F55\u4E0D\u80FD\u6062\u590D\u6388\u6743",
@@ -181,10 +249,6 @@ var chinese = Object.freeze({
   "devices.health": "\u8FDE\u63A5\u4E0E\u8BA4\u8BC1",
   "devices.activity": "\u6700\u8FD1\u5FC3\u8DF3",
   "devices.received": "Gateway \u63A5\u6536 {time}",
-  "devices.observations": "\u89C2\u6D4B\u65F6\u95F4",
-  "devices.emptyHeading": "\u5C1A\u65E0\u53EF\u5C55\u793A\u7684\u8BBE\u5907",
-  "devices.empty": "\u6B64\u8303\u56F4\u5C1A\u65E0\u8BBE\u5907\u3002\u7531\u53D7\u4FDD\u62A4\u7684\u672C\u673A\u7BA1\u7406\u6E20\u9053\u5EFA\u7ACB\u914D\u5BF9\u7533\u8BF7\u540E\u518D\u5237\u65B0\u3002",
-  "devices.heartbeat": "\u6700\u8FD1\u5FC3\u8DF3\uFF1A{age} \xB7 Gateway \u63A5\u6536 {time}",
   "devices.observed": "\u8BBE\u5907\u72B6\u6001\u89C2\u6D4B\uFF1A{time}",
   "devices.connectionObserved": "\u8FDE\u63A5\u89C2\u6D4B\uFF1A{time}",
   "devices.authObserved": "\u8BA4\u8BC1\u89C2\u6D4B\uFF1A{time}",
@@ -245,6 +309,100 @@ 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.tokens": "MCP tokens",
+  "resources.pairingCodes": "Pairing codes",
+  "resources.createCode": "Generate code",
+  "resources.codesNote": "One code per device: run the displayed join command on the target machine to pair. Unused codes can be revoked anytime.",
+  "resources.codeCreatedNote": "Code created. Copy the command below and run it on the Connector machine.",
+  "resources.code_unused": "Unused",
+  "resources.code_used": "Used",
+  "resources.code_revoked": "Revoked",
+  "resources.code_failed": "Failed",
+  "resources.revokeCode": "Revoke",
+  "resources.confirmRevokeCode": "Revoke this pairing code? Generate a new one for the device.",
+  "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.emptyTokens": "No MCP tokens yet. Create one above to connect your AI client.",
+  "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.",
+  "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.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.record": "Observation details",
+  "devices.open": "View details for {name}",
+  "overview.available": "Available",
+  "overview.degraded": "Degraded",
+  "overview.unavailable": "Unavailable",
+  "overview.unverified": "Unverified",
+  "pairing.pageTitle": "Bring a new device on board",
+  "pairing.pageDescription": "Generate a per-device code and run the join command on the target machine. No applications, approvals or verification codes.",
+  "pairing.loginRequired": "A management session is required",
+  "pairing.loginHint": "Sign in through the Gateway management entry to generate pairing codes.",
+  "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.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,14 +411,13 @@ 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",
   "language.english": "English",
   "theme.label": "Theme",
-  "theme.system": "System theme",
   "theme.light": "Light",
   "theme.dark": "Dark",
   "manage.heading": "Device management",
@@ -291,28 +448,6 @@ var english = Object.freeze({
   "manage.revokeEffect": "After durable revocation, that identity cannot reconnect. The current durable receipt determines the outcome; native work may continue.",
   "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.name": "New device name",
-  "pairing.policy": "Authorization policy reference",
-  "pairing.create": "Create pairing application",
-  "pairing.preparing": "Preparing the background confirmation\u2026",
-  "pairing.review": "Review the background summary below; nothing is submitted until you confirm.",
-  "pairing.confirm": "Confirm",
-  "pairing.cancel": "Cancel",
-  "pairing.created": "Application created. Give this pairing ID to the new device:",
-  "pairing.waitingClaim": "Waiting for the device to submit its claim\u2026",
-  "pairing.claimArrived": "The device submitted a claim. Approve issuance only if the check code matches the device screen:",
-  "pairing.userCode": "Check code",
-  "pairing.approve": "Approve credential issuance",
-  "pairing.approved": "Approved. The credential is held for delivery; waiting for the device to collect it\u2026",
-  "pairing.paired": "The device collected its credential. Pairing complete.",
-  "pairing.activated": "Credential collected and native activation complete. Ready to use.",
-  "pairing.statusPending": "Awaiting claim",
-  "pairing.expired": "This application expired; create a new one.",
-  "pairing.failed": "The operation did not complete; prepare it again.",
-  "pairing.application": "Pairing ID",
-  "pairing.machine": "Device",
   "manage.machine": "Target device",
   "manage.epoch": "Connection epoch",
   "manage.revision": "Resource revision",
@@ -334,7 +469,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.",
@@ -345,6 +480,15 @@ var english = Object.freeze({
   "error.timeout": "The read exceeded 5 seconds. The displayed state is not live.",
   "error.cancelled": "This read was cancelled.",
   "time.noObservation": "No trusted observation",
+  "reason.auth_failed": "Authentication failed",
+  "reason.backend_unavailable": "Backend unavailable",
+  "reason.binding_mismatch": "Binding mismatch",
+  "reason.connection_closed": "Connection closed",
+  "reason.credential_expired": "Credential expired",
+  "reason.heartbeat_timeout": "Heartbeat timed out",
+  "reason.not_recorded": "Not recorded",
+  "reason.protocol_error": "Protocol error",
+  "reason.stale": "Stale",
   "time.noHeartbeat": "No trusted heartbeat",
   "time.observed": "{time} \xB7 {age}{expired}",
   "time.expiredSuffix": " \xB7 expired",
@@ -376,15 +520,6 @@ var english = Object.freeze({
   "persisted.offline": "Registered offline (offline)",
   "persisted.online": "Registered online (online)",
   "persisted.revoked": "Identity revoked (revoked)",
-  "reason.backend_unavailable": "Backend unavailable",
-  "reason.not_recorded": "Not recorded",
-  "reason.stale": "Observation expired",
-  "reason.auth_failed": "Authentication failed",
-  "reason.credential_expired": "Credential expired",
-  "reason.heartbeat_timeout": "Heartbeat timed out",
-  "reason.protocol_error": "Protocol error",
-  "reason.connection_closed": "Connection closed",
-  "reason.binding_mismatch": "Binding mismatch",
   "device.expired": "Device observation expired",
   "device.revokedHistory": "Last stored registration: identity revoked (expired)",
   "device.oldRecords": "Old connection and authentication records cannot restore authorization",
@@ -413,10 +548,6 @@ var english = Object.freeze({
   "devices.health": "Connection & authentication",
   "devices.activity": "Last heartbeat",
   "devices.received": "Gateway received {time}",
-  "devices.observations": "Observations",
-  "devices.emptyHeading": "No devices to display",
-  "devices.empty": "There are no devices in this scope. Create a pairing request through the protected local management channel, then refresh.",
-  "devices.heartbeat": "Last heartbeat: {age} \xB7 Gateway received {time}",
   "devices.observed": "Device state observed: {time}",
   "devices.connectionObserved": "Connection observed: {time}",
   "devices.authObserved": "Authentication observed: {time}",
@@ -508,6 +639,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 +788,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 +799,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 +808,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 +837,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 +874,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 +918,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 +1073,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 +1271,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 +1308,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 +1348,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 +1487,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 +1503,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
@@ -1293,49 +1647,6 @@ function checkDeviceIntent(value) {
   summary({ ...operation, recovery_generation: "validation", expected_revision: 0, reason: "administrator_request" }, "invalid_request");
   return JSON.parse(JSON.stringify(value));
 }
-function checkPairingIntent(value) {
-  record(value, ["action"], ["machine_id", "name", "policy_ref", "labels", "pairing_id", "claim_id", "user_code"], "invalid_request");
-  const action = value.action;
-  if (action === "pairing_create") {
-    const hasName = Object.hasOwn(value, "name");
-    const keys = hasName ? ["action", "name", "policy_ref", "labels"] : ["action", "machine_id", "policy_ref"];
-    record(value, keys, [], "invalid_request");
-    const intent = value;
-    const operation = intent.action === "pairing_create" && "name" in intent ? {
-      action: "pairing_create",
-      target: { name: intent.name, policy_ref: intent.policy_ref, labels: intent.labels }
-    } : {
-      action: "pairing_create",
-      target: {
-        machine_id: intent.machine_id,
-        policy_ref: intent.policy_ref
-      }
-    };
-    summary({ ...operation, recovery_generation: "validation", expected_revision: 0, reason: "administrator_request" }, "invalid_request");
-    return JSON.parse(JSON.stringify(value));
-  }
-  if (action === "pairing_claim_approve") {
-    record(value, ["action", "machine_id", "pairing_id", "claim_id", "user_code"], [], "invalid_request");
-    const intent = value;
-    if (intent.action !== "pairing_claim_approve") {
-      invalid("invalid_request");
-    }
-    summary({
-      action: "pairing_claim_approve",
-      target: {
-        machine_id: intent.machine_id,
-        pairing_id: intent.pairing_id,
-        claim_id: intent.claim_id,
-        user_code: intent.user_code
-      },
-      recovery_generation: "validation",
-      expected_revision: 0,
-      reason: "administrator_request"
-    }, "invalid_request");
-    return JSON.parse(JSON.stringify(value));
-  }
-  invalid("invalid_request");
-}
 function pairingSummary(v, problem) {
   const target = v.target;
   if (v.action === "pairing_create") {
@@ -2285,597 +2596,339 @@ function createDeviceActions(options) {
   };
 }
 
-// src/webui/pairing-flow.ts
-function snapshot2(value) {
-  const copy = JSON.parse(JSON.stringify(value));
-  function freeze(item) {
-    if (item && typeof item === "object") {
-      for (const child of Object.values(item)) {
-        freeze(child);
-      }
-      Object.freeze(item);
-    }
+// src/webui/resource-client.ts
+class ResourceError extends Error {
+  code;
+  constructor(code) {
+    super(code);
+    this.code = code;
   }
-  freeze(copy);
-  return copy;
-}
-function failure2(error) {
-  return error instanceof ManagementClientError ? error.problem : "unavailable";
 }
-function operationOf(intent) {
-  if (intent.action === "pairing_claim_approve") {
-    return {
-      action: "pairing_claim_approve",
-      target: {
-        machine_id: intent.machine_id,
-        pairing_id: intent.pairing_id,
-        claim_id: intent.claim_id,
-        user_code: intent.user_code
-      }
-    };
-  }
-  return "name" in intent ? { action: "pairing_create", target: { name: intent.name, policy_ref: intent.policy_ref, labels: intent.labels } } : { action: "pairing_create", target: { machine_id: intent.machine_id, policy_ref: intent.policy_ref } };
+
+// src/webui/resource-panel.ts
+function node3(tag, text = "", className = "") {
+  const element = document.createElement(tag);
+  element.textContent = text;
+  element.className = className;
+  return element;
 }
-var operationName = {
-  pairing_create: "pairings_create",
-  pairing_claim_approve: "pairings_claim_approve"
-};
-function createPairingManagementFlow(options) {
-  let state = { phase: "idle" };
-  let intent;
-  let write;
-  let review;
-  let original;
-  let active;
-  let generation = 0;
-  let disposed = false;
-  const requestId = options.requestId ?? managementRequestId;
-  async function execute(operation, args, signal) {
-    if (signal.aborted) {
-      throw new ManagementClientError("aborted");
-    }
-    managementWriteBody(operation, args);
-    const reply = await options.transport.execute(operation, args, signal);
-    return checkManagementWriteReply(operation, reply, args);
+function createResourcePanel(options) {
+  const region = node3("section", "", "resource-panel");
+  const feedback = node3("p", "", "resource-feedback");
+  feedback.setAttribute("role", "status");
+  let i18n;
+  let key = "";
+  let active = false;
+  let pending = false;
+  let controller = new AbortController;
+  let data;
+  let tokenName = "";
+  let tokenDays = "365";
+  let codeName = "";
+  let created;
+  let version = 0;
+  let route;
+  let language = "";
+  function button(label, action, danger = false) {
+    const result = node3("button", label, danger ? "danger-button" : "");
+    result.type = "button";
+    result.disabled = pending;
+    result.addEventListener("click", action);
+    return result;
   }
-  function begin(phase, signal) {
-    if (disposed || active || state.phase !== phase || signal?.aborted) {
-      throw new ManagementClientError("invalid_request");
-    }
-    const controller = new AbortController;
-    active = controller;
-    const current = ++generation;
-    const abort = () => cancel();
-    signal?.addEventListener("abort", abort, { once: true });
-    return {
-      controller,
-      current: () => !disposed && generation === current && !controller.signal.aborted,
-      done() {
-        signal?.removeEventListener("abort", abort);
-        if (active === controller) {
-          active = undefined;
-        }
-      }
-    };
+  async function request(operation, args) {
+    return options.transport(operation, args, controller.signal);
   }
-  function unconfirmed(problem) {
-    if (!original) {
-      state = { phase: "failed", problem: problem ?? "unavailable" };
+  function failure(error) {
+    if (error instanceof ResourceError && (error.code === "forbidden" || error.code === "unauthenticated")) {
+      clear();
+      options.authorizationLost(error.code);
       return;
     }
-    state = { phase: "unconfirmed", operation: original, ...problem ? { problem } : {} };
-  }
-  function accept(receipt) {
-    if (!original || !intent || !review || receipt.request_id !== original.request_id || receipt.history_epoch !== original.history_epoch || receipt.recovery_generation !== original.recovery_generation || receipt.action !== intent.action || receipt.operation_digest !== review.operation_digest) {
-      throw new ManagementClientError("invalid_response", true);
-    }
-    if (intent.action === "pairing_claim_approve" && receipt.target.machine_id !== intent.machine_id) {
-      throw new ManagementClientError("invalid_response", true);
-    }
-    if (receipt.evidence !== "current_durable" || receipt.operation_state === "outcome_unknown") {
-      unconfirmed("outcome_unconfirmed");
-    } else {
-      state = receipt.operation_state === "committed" ? { phase: "committed", receipt } : { phase: "not_committed", receipt };
-    }
+    feedback.textContent = i18n.t(error instanceof ResourceError && error.code === "invalid_arguments" ? "resources.invalid" : "resources.failed");
   }
-  function cancel() {
-    if (!active) {
-      if (state.phase === "idle" || state.phase === "awaiting_confirmation") {
-        generation++;
-        state = { phase: "cancelled" };
-      }
-      return;
-    }
-    generation++;
-    const controller = active;
-    active = undefined;
-    const uncertain = state.phase === "submitting" || state.phase === "checking";
+  async function refresh() {
+    const generation = ++version;
     controller.abort();
-    if (uncertain) {
-      unconfirmed("aborted");
-    } else {
-      state = { phase: "cancelled" };
-    }
-  }
-  return {
-    state() {
-      return snapshot2(state);
-    },
-    async prepare(value, signal) {
-      const pending = begin("idle", signal);
-      try {
-        intent = checkPairingIntent(value);
-        state = { phase: "preparing", intent };
-        const id = requestId();
-        const history = await execute("history_open", {}, pending.controller.signal);
-        if (!pending.current()) {
-          return snapshot2(state);
-        }
-        const resource = "machine_id" in intent ? await execute("write_state_get", { machine_id: intent.machine_id }, pending.controller.signal) : {
-          resource_revision: 0,
-          recovery_generation: history.recovery_generation,
-          connection_epoch: null,
-          binding_revision: null
-        };
-        if (!pending.current()) {
-          return snapshot2(state);
-        }
-        if (history.recovery_generation !== resource.recovery_generation) {
-          throw new ManagementClientError("conflict");
-        }
-        const draft = {
-          ...operationOf(intent),
-          request_id: id,
-          history_epoch: history.history_epoch,
-          recovery_generation: history.recovery_generation,
-          expected_revision: resource.resource_revision,
-          reason: "administrator_request"
-        };
-        const confirmation = await execute("confirmations_create", draft, pending.controller.signal);
-        if (!pending.current()) {
-          return snapshot2(state);
-        }
-        review = snapshot2(confirmation);
-        write = {
-          request_id: id,
-          history_epoch: history.history_epoch,
-          recovery_generation: history.recovery_generation,
-          expected_revision: resource.resource_revision,
-          reason: draft.reason,
-          confirmation_id: confirmation.confirmation_id
-        };
-        original = {
-          request_id: id,
-          history_epoch: history.history_epoch,
-          recovery_generation: history.recovery_generation
-        };
-        if (confirmation.state === "expired") {
-          throw new ManagementClientError("conflict");
-        }
-        if (confirmation.state === "consumed") {
-          unconfirmed("outcome_unconfirmed");
-        } else {
-          state = { phase: "awaiting_confirmation", review };
-        }
-      } catch (error) {
-        if (pending.current()) {
-          state = { phase: "failed", problem: failure2(error) };
-        }
-      } finally {
-        pending.done();
+    controller = new AbortController;
+    pending = true;
+    feedback.textContent = i18n.t("resources.loading");
+    try {
+      const value = await request(key === "connect" ? "tokens_list" : "pairing_codes_list", key === "connect" ? {} : {});
+      if (generation !== version || !active) {
+        return;
       }
-      return snapshot2(state);
-    },
-    async confirm(signal) {
-      const pending = begin("awaiting_confirmation", signal);
-      try {
-        if (!write || !review || !intent) {
-          throw new ManagementClientError("invalid_request");
-        }
-        state = { phase: "confirming", review };
-        const confirmed = await execute("confirmations_confirm", { ...write, operation_digest: review.operation_digest }, pending.controller.signal);
-        if (!pending.current()) {
-          return snapshot2(state);
-        }
-        if (managementConfirmationKey(confirmed) !== managementConfirmationKey(review)) {
-          throw new ManagementClientError("invalid_response");
-        }
-        if (confirmed.state === "consumed") {
-          unconfirmed("outcome_unconfirmed");
-          return snapshot2(state);
-        }
-        if (confirmed.state !== "confirmed") {
-          throw new ManagementClientError("conflict");
-        }
-        const operation = operationName[intent.action];
-        const target = intent.action === "pairing_claim_approve" ? {
-          machine_id: intent.machine_id,
-          pairing_id: intent.pairing_id,
-          claim_id: intent.claim_id,
-          user_code: intent.user_code
-        } : ("name" in intent) ? { name: intent.name, policy_ref: intent.policy_ref, labels: intent.labels } : { machine_id: intent.machine_id, policy_ref: intent.policy_ref };
-        state = { phase: "submitting", review };
-        const receipt = await execute(operation, { ...write, ...target }, pending.controller.signal);
-        if (pending.current()) {
-          accept(receipt);
-        }
-      } catch (error) {
-        if (pending.current()) {
-          if (state.phase === "submitting") {
-            unconfirmed(failure2(error));
-          } else {
-            state = { phase: "failed", problem: failure2(error) };
-          }
-        }
-      } finally {
-        pending.done();
+      if (!value || !Array.isArray(value.items)) {
+        throw new Error("invalid_reply");
       }
-      return snapshot2(state);
-    },
-    async checkReceipt(signal) {
-      const pending = begin("unconfirmed", signal);
-      try {
-        if (!original) {
-          throw new ManagementClientError("invalid_request");
-        }
-        state = { phase: "checking", operation: original };
-        const receipt = await execute("operations_get", original, pending.controller.signal);
-        if (pending.current()) {
-          accept(receipt);
-        }
-      } catch (error) {
-        if (pending.current()) {
-          unconfirmed(failure2(error));
-        }
-      } finally {
-        pending.done();
+      data = value;
+      feedback.textContent = "";
+    } catch (error) {
+      if (generation === version && active) {
+        failure(error);
+      }
+    } finally {
+      if (generation === version && active) {
+        pending = false;
+        render();
       }
-      return snapshot2(state);
-    },
-    cancel,
-    dispose() {
-      cancel();
-      disposed = true;
     }
-  };
-}
-
-// src/webui/pairing-actions.ts
-var errors2 = {
-  invalid_request: "manage.invalid",
-  invalid_response: "manage.invalid",
-  unauthenticated: "manage.unauthenticated",
-  forbidden: "manage.forbidden",
-  conflict: "manage.conflict",
-  busy: "manage.busy",
-  unavailable: "manage.unavailable",
-  outcome_unconfirmed: "manage.unknown",
-  aborted: "manage.cancelled"
-};
-function node3(tag, className = "") {
-  const element = document.createElement(tag);
-  element.className = className;
-  return element;
-}
-function createPairingActions(options) {
-  const region = node3("section", "pairing-section");
-  const heading = node3("h2");
-  const intro = node3("p", "muted");
-  const form = node3("form", "pairing-form");
-  const nameLabel = node3("label");
-  const nameCaption = node3("span");
-  const nameInput = node3("input");
-  nameInput.name = "pairing-name";
-  nameInput.required = true;
-  nameInput.maxLength = 63;
-  nameInput.pattern = "[a-z0-9][a-z0-9._-]{0,62}";
-  nameInput.autocomplete = "off";
-  nameLabel.append(nameCaption, nameInput);
-  const policyLabel = node3("label");
-  const policyCaption = node3("span");
-  const policyInput = node3("input");
-  policyInput.name = "pairing-policy";
-  policyInput.required = true;
-  policyInput.maxLength = 128;
-  policyInput.autocomplete = "off";
-  policyInput.value = DEFAULT_PAIRING_POLICY_REF;
-  policyLabel.append(policyCaption, policyInput);
-  const create = node3("button", "pairing-confirm");
-  create.type = "submit";
-  form.append(nameLabel, policyLabel, create);
-  const reviewBox = node3("div", "pairing-review");
-  reviewBox.hidden = true;
-  const reviewText = node3("p", "pairing-status");
-  const reviewFacts = node3("dl", "facts pairing-facts");
-  const controls = node3("div", "pairing-controls");
-  const confirm = node3("button", "pairing-confirm");
-  const check = node3("button");
-  const cancel = node3("button");
-  for (const button of [confirm, check, cancel]) {
-    button.type = "button";
   }
-  controls.append(confirm, check, cancel);
-  reviewBox.append(reviewText, reviewFacts, controls);
-  const message = node3("p", "pairing-status");
-  message.setAttribute("role", "status");
-  message.setAttribute("aria-live", "polite");
-  const list = node3("ul", "pairing-entries");
-  region.append(heading, intro, form, reviewBox, message, list);
-  let i18n;
-  let available = false;
-  let disposed = false;
-  let flow;
-  let flowIntent;
-  let timer;
-  const entries = new Map;
-  const pollMs = options.pollMs ?? 4000;
-  function fact(term, value) {
-    const dt = node3("dt");
-    dt.textContent = term;
-    const dd = node3("dd");
-    dd.textContent = value;
-    reviewFacts.append(dt, dd);
-  }
-  function paintFlow(state) {
-    if (!i18n) {
+  async function mutate(operation, args) {
+    if (pending || !active) {
       return;
     }
-    const t = i18n.t.bind(i18n);
-    check.hidden = true;
-    confirm.hidden = true;
-    if (state.phase === "idle" || state.phase === "cancelled") {
-      reviewBox.hidden = true;
-      return;
-    }
-    reviewBox.hidden = false;
-    if (state.phase === "preparing" || state.phase === "confirming" || state.phase === "submitting") {
-      reviewText.textContent = t("pairing.preparing");
-      return;
-    }
-    if (state.phase === "awaiting_confirmation") {
-      reviewText.textContent = t("pairing.review");
-      reviewFacts.replaceChildren();
-      const summary = state.review.summary;
-      fact(t("manage.action"), t(summary.action === "pairing_create" ? "pairing.create" : "pairing.approve"));
-      if (summary.action === "pairing_create") {
-        fact(t("pairing.name"), "name" in summary.target ? summary.target.name : summary.target.machine_id);
-        fact(t("pairing.policy"), summary.target.policy_ref);
-      } else if (summary.action === "pairing_claim_approve") {
-        fact(t("pairing.machine"), summary.target.machine_id);
-        fact(t("pairing.userCode"), summary.target.user_code);
-      }
-      fact(t("manage.expires"), new Date(state.review.expires_at).toISOString());
-      confirm.hidden = false;
-      confirm.textContent = t("pairing.confirm");
-      return;
-    }
-    if (state.phase === "committed") {
-      reviewBox.hidden = true;
-      const receipt = state.receipt;
-      if (state.receipt.action === "pairing_create" && receipt.pairing_id && receipt.machine_id) {
-        const name = flowIntent?.action === "pairing_create" && "name" in flowIntent ? flowIntent.name : entries.get(receipt.pairing_id)?.name ?? receipt.machine_id;
-        addEntry({
-          name,
-          machine_id: receipt.machine_id,
-          pairing_id: receipt.pairing_id,
-          status: "pending",
-          item: node3("li", "pairing-entry")
-        });
-        message.textContent = t("pairing.created");
-      } else if (state.receipt.action === "pairing_claim_approve") {
-        message.textContent = t("pairing.approved");
+    const generation = version;
+    pending = true;
+    feedback.textContent = i18n.t("resources.saving");
+    render();
+    try {
+      const reply = operation === "pairing_codes_create" ? await request(operation, args) : await request(operation, args);
+      if (operation === "pairing_codes_create" && reply && typeof reply.code === "string") {
+        created = reply;
       }
-      flow = undefined;
-      flowIntent = undefined;
-      ensurePolling();
-      return;
-    }
-    if (state.phase === "not_committed") {
-      reviewText.textContent = t("manage.notCommitted");
-      flow = undefined;
-      flowIntent = undefined;
-      return;
-    }
-    if (state.phase === "unconfirmed") {
-      reviewText.textContent = t("manage.unknown");
-      check.hidden = false;
-      check.textContent = t("manage.check");
-      return;
-    }
-    if (state.phase === "failed") {
-      reviewText.textContent = t(errors2[state.problem]);
-      if (state.problem === "unauthenticated" || state.problem === "forbidden") {
-        options.authorizationLost(state.problem);
+      if (generation !== version || !active) {
+        return;
+      }
+      feedback.textContent = i18n.t("resources.saved");
+      if (operation === "tokens_create") {
+        tokenName = "";
+        tokenDays = "365";
+      }
+      if (operation === "pairing_codes_create") {
+        codeName = "";
+      }
+      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();
       }
-      flow = undefined;
-      flowIntent = undefined;
-      return;
     }
-    reviewBox.hidden = true;
   }
-  async function start(intent) {
-    if (disposed || !available || flow) {
-      return;
+  function remove(operation, args, message) {
+    if (window.confirm(message)) {
+      mutate(operation, args);
     }
-    flowIntent = intent;
-    flow = createPairingManagementFlow({ transport: options.transport });
-    paintFlow(await flow.prepare(intent));
   }
-  function renderEntry(entry) {
-    if (!i18n) {
+  function render() {
+    if (!active) {
       return;
     }
-    const t = i18n.t.bind(i18n);
-    entry.item.replaceChildren();
-    const head = node3("div", "pairing-entry-head");
-    const title = node3("strong");
-    title.textContent = entry.name;
-    const status = node3("span", "muted");
-    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);
-    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);
-    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);
-    if (entry.status === "pending" && entry.claim?.status === "pending") {
-      const codeLabel = node3("p", "muted");
-      codeLabel.textContent = t("pairing.userCode");
-      const code = node3("div", "pairing-code");
-      code.textContent = entry.claim.user_code;
-      const approve = node3("button", "pairing-confirm");
-      approve.type = "button";
-      approve.textContent = t("pairing.approve");
-      const claim = entry.claim;
-      approve.addEventListener("click", () => {
-        start({
-          action: "pairing_claim_approve",
-          machine_id: entry.machine_id,
-          pairing_id: entry.pairing_id,
-          claim_id: claim.claim_id,
-          user_code: claim.user_code
+    const { t } = i18n;
+    const body = node3("div", "", "resource-body");
+    if (key === "device") {
+      const card = node3("article", "", "resource-delete-card");
+      card.append(node3("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 = node3("div", "", "section-heading");
+      heading.append(node3("h2", t(key === "connect" ? "resources.tokens" : "resources.pairingCodes")), button(t("action.refresh"), () => {
+        refresh();
+      }));
+      body.append(heading);
+      if (key === "connect") {
+        const form = node3("form", "", "token-create-form");
+        const nameLabel = node3("label", t("resources.name"));
+        const name = node3("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;
         });
-      });
-      entry.item.append(codeLabel, code, approve);
-    }
-  }
-  function addEntry(entry) {
-    const existing = entries.get(entry.pairing_id);
-    if (existing) {
-      existing.status = entry.status;
-      renderEntry(existing);
-      return;
-    }
-    entries.set(entry.pairing_id, entry);
-    list.append(entry.item);
-    renderEntry(entry);
-  }
-  function unfinished(entry) {
-    return entry.status === "pending" || entry.status === "paired" && entry.claim?.status === "delivered";
-  }
-  async function poll() {
-    for (const entry of entries.values()) {
-      if (disposed || !unfinished(entry)) {
-        continue;
-      }
-      try {
-        const args = { machine_id: entry.machine_id, pairing_id: entry.pairing_id };
-        managementWriteBody("pairings_get", args);
-        const reply = await options.transport.execute("pairings_get", args, new AbortController().signal);
-        const status = checkManagementWriteReply("pairings_get", reply, args);
-        entry.status = status.status;
-        entry.claim = status.claim;
-        renderEntry(entry);
-      } catch (error) {
-        if (error instanceof ManagementClientError && (error.problem === "unauthenticated" || error.problem === "forbidden")) {
-          stopPolling();
-          options.authorizationLost(error.problem);
-          return;
+        nameLabel.append(name);
+        const daysLabel = node3("label", t("resources.expiry"));
+        const days = node3("select");
+        days.name = "token-days";
+        days.disabled = pending;
+        for (const value of [365, 90, 30, 7]) {
+          const option = node3("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 = node3("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(node3("p", t("resources.tokenNote"), "muted"), form);
+        if (data?.resource) {
+          const endpoint = node3("div", "", "mcp-endpoint");
+          endpoint.append(node3("span", t("resources.endpoint")), node3("code", data.resource), copyControl(data.resource, t("copy.action")));
+          body.append(endpoint, node3("p", t("resources.endpointNote"), "muted"));
+        }
+        for (const item of data?.items ?? []) {
+          const token = item;
+          const card = node3("article", "", "token-card");
+          card.dataset.tokenPrincipal = token.principal;
+          const summary = node3("div", "", "token-summary");
+          summary.append(node3("h3", token.principal), node3("span", t(token.expires_at > Date.now() ? "resources.active" : "resources.expired"), "badge"), node3("span", t("resources.expiresAt", { time: i18n.timestamp(token.expires_at) }), "muted"));
+          const controls = node3("div", "", "token-controls");
+          if (token.token) {
+            const value = node3("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(node3("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 {
+        const host = typeof location === "undefined" ? "127.0.0.1" : location.hostname;
+        const form = node3("form", "", "token-create-form");
+        const nameLabel = node3("label", t("resources.name"));
+        const name = node3("input");
+        name.name = "code-name";
+        name.pattern = "[A-Za-z0-9._-]{0,63}";
+        name.maxLength = 63;
+        name.placeholder = "workstation";
+        name.disabled = pending;
+        name.value = codeName;
+        name.addEventListener("input", () => {
+          codeName = name.value;
+        });
+        nameLabel.append(name);
+        const submit = node3("button", t("resources.createCode"), "primary-button");
+        submit.type = "submit";
+        submit.disabled = pending;
+        form.append(nameLabel, submit);
+        form.addEventListener("submit", (event) => {
+          event.preventDefault();
+          mutate("pairing_codes_create", name.value.trim() ? { name: name.value.trim() } : {});
+        });
+        body.append(node3("p", t("resources.codesNote"), "muted"), form);
+        if (created) {
+          const command = "rovloom connector --join ws://" + host + ":" + created.device_port + "#" + created.code;
+          const card = node3("article", "", "pairing-record code-created");
+          const details = node3("div");
+          details.append(node3("h3", created.name), node3("p", t("resources.codeCreatedNote"), "muted"));
+          const block = node3("div", "", "command-snippet");
+          block.append(node3("code", command), copyControl(command, t("copy.action")));
+          card.append(details, block);
+          body.append(card);
+          created = undefined;
+        }
+        const port = data?.device_port ?? 9443;
+        for (const item of data?.items ?? []) {
+          const entry = item;
+          const card = node3("article", "", "pairing-record");
+          const details = node3("div");
+          const label = t("resources.code_" + entry.status);
+          details.append(node3("h3", entry.name), node3("code", entry.machine_id), node3("p", label + " \xB7 " + i18n.timestamp(entry.created_at) + (entry.used_at ? " \xB7 " + i18n.timestamp(entry.used_at) : ""), "muted"));
+          card.append(details);
+          if (entry.status === "unused" && entry.code) {
+            const command = "rovloom connector --join ws://" + host + ":" + port + "#" + entry.code;
+            const block = node3("div", "", "command-snippet");
+            block.append(node3("code", command), copyControl(command, t("copy.action")));
+            card.append(block);
+            card.append(button(t("resources.revokeCode"), () => remove("pairing_codes_revoke", { code_id: entry.code_id }, t("resources.confirmRevokeCode")), true));
+          }
+          body.append(card);
         }
       }
+      if (data?.items.length === 0 && key === "connect") {
+        body.append(node3("p", t("resources.emptyTokens"), "empty"));
+      }
     }
-    if (![...entries.values()].some(unfinished)) {
-      stopPolling();
-    }
-  }
-  function ensurePolling() {
-    if (disposed || timer || ![...entries.values()].some(unfinished)) {
-      return;
-    }
-    timer = setInterval(() => {
-      poll();
-    }, pollMs);
+    region.replaceChildren(body, feedback);
   }
-  function stopPolling() {
-    if (timer) {
-      clearInterval(timer);
-      timer = undefined;
-    }
+  function clear() {
+    active = false;
+    key = "";
+    data = undefined;
+    tokenName = "";
+    tokenDays = "365";
+    codeName = "";
+    created = undefined;
+    version++;
+    controller.abort();
+    pending = false;
+    region.replaceChildren();
+    region.hidden = true;
   }
-  form.addEventListener("submit", (event) => {
-    event.preventDefault();
-    const name = nameInput.value.trim();
-    const policy = policyInput.value.trim();
-    if (!name || !policy) {
-      return;
-    }
-    start({ action: "pairing_create", name, policy_ref: policy, labels: [] });
-  });
-  confirm.addEventListener("click", () => {
-    if (flow) {
-      flow.confirm().then(paintFlow);
-    }
-  });
-  check.addEventListener("click", () => {
-    if (flow) {
-      flow.checkReceipt().then(paintFlow);
-    }
-  });
-  cancel.addEventListener("click", () => {
-    flow?.cancel();
-    if (flow) {
-      paintFlow(flow.state());
-    }
-    if (flow?.state().phase === "cancelled") {
-      flow = undefined;
-      flowIntent = undefined;
-    }
-  });
   return {
     region,
-    update(localizer, isAvailable) {
-      i18n = localizer;
-      available = isAvailable;
-      region.hidden = !isAvailable;
-      const t = localizer.t.bind(localizer);
-      heading.textContent = t("pairing.title");
-      intro.textContent = t("pairing.intro");
-      nameCaption.textContent = t("pairing.name");
-      policyCaption.textContent = t("pairing.policy");
-      create.textContent = t("pairing.create");
-      cancel.textContent = t("pairing.cancel");
-      for (const entry of entries.values()) {
-        renderEntry(entry);
-      }
-      if (flow) {
-        paintFlow(flow.state());
-      }
-      if (isAvailable) {
-        ensurePolling();
+    clear,
+    dispose: clear,
+    refresh() {
+      if (active && key !== "device") {
+        refresh();
       }
     },
-    suspend() {
-      stopPolling();
-    },
-    clear() {
-      stopPolling();
-      flow?.dispose();
-      flow = undefined;
-      flowIntent = undefined;
-      entries.clear();
-      list.replaceChildren();
-      reviewBox.hidden = true;
-      message.textContent = "";
-    },
-    dispose() {
-      disposed = true;
-      stopPolling();
-      flow?.dispose();
+    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;
+        data = undefined;
+        created = 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 +2937,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 +2995,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");
@@ -2954,20 +3036,21 @@ function mountWebUi(root, read = unavailableRead, clock, management) {
   if (actions) {
     footer.before(actions.region);
   }
-  const pairing = management ? createPairingActions({
-    transport: management,
-    authorizationLost(problem) {
-      if (disposed) {
-        return;
+  const resourcePanel = resources ? createResourcePanel({
+    transport: resources,
+    committed(machine) {
+      if (machine) {
+        location.hash = "#view=devices";
       }
+    },
+    authorizationLost(problem) {
       reader.dispose();
       actions?.clear();
-      pairing?.clear();
       paint({ snapshot: null, pending: false, stale: true, ageMs: 0, problem }, route);
     }
   }) : undefined;
-  if (pairing) {
-    footer.before(pairing.region);
+  if (resourcePanel) {
+    footer.before(resourcePanel.region);
   }
   function paint(state, current) {
     refresh.disabled = state.pending || ["unauthenticated", "forbidden", "not_found"].includes(state.problem ?? "");
@@ -2975,14 +3058,32 @@ function mountWebUi(root, read = unavailableRead, clock, management) {
     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");
+    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 +3095,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 +3133,7 @@ function mountWebUi(root, read = unavailableRead, clock, management) {
     content.focus();
   }
   function refreshPage() {
+    resourcePanel?.refresh();
     reader.refresh();
   }
   function cancelRead() {
@@ -3064,11 +3174,40 @@ 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;
@@ -3081,7 +3220,6 @@ function mountWebUi(root, read = unavailableRead, clock, management) {
   function visibility() {
     if (document.visibilityState === "hidden") {
       actions?.suspend();
-      pairing?.suspend();
     }
     reader.visible(document.visibilityState !== "hidden");
   }
@@ -3095,10 +3233,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 +3243,12 @@ 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 +3265,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);
@@ -3509,7 +3651,6 @@ export {
   createManagementPageCsrf,
   createManagementPageRead,
   createManagementWriteClient,
-  createPairingManagementFlow,
   createSnapshotReader2 as createSnapshotReader,
   mountWebUi,
   parseRoute,
@@ -3517,4 +3658,4 @@ export {
   unavailableRead
 };
 
-//# debugId=D52975500C6ECA9664756E2164756E21
+//# debugId=57232E8032FB7D7964756E2164756E21