npm - @easyai-canvas/canvas-plugin-sdk - Versions diffs - 0.1.0 - Mend

@easyai-canvas/canvas-plugin-sdk 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (34) hide show

package/LICENSE +5 -0
package/README.md +22 -0
package/bin/easyai-plugin.mjs +267 -0
package/dist/customer-main.d.ts +1 -0
package/dist/customer-main.js +256 -0
package/dist/protocol/index.d.ts +295 -0
package/dist/protocol/index.js +454 -0
package/dist/runtime/auth.d.ts +1 -0
package/dist/runtime/auth.js +68 -0
package/dist/runtime/engine.d.ts +49 -0
package/dist/runtime/engine.js +296 -0
package/dist/runtime/host-files.d.ts +16 -0
package/dist/runtime/host-files.js +208 -0
package/dist/runtime/instance-lock.d.ts +1 -0
package/dist/runtime/instance-lock.js +52 -0
package/dist/runtime/package-runtime.d.ts +44 -0
package/dist/runtime/package-runtime.js +361 -0
package/dist/runtime/packaged-plugins.d.ts +14 -0
package/dist/runtime/packaged-plugins.js +58 -0
package/dist/runtime/plugin-config.d.ts +4 -0
package/dist/runtime/plugin-config.js +31 -0
package/dist/runtime/store.d.ts +48 -0
package/dist/runtime/store.js +151 -0
package/dist/runtime/worker.d.ts +1 -0
package/dist/runtime/worker.js +38 -0
package/dist/sdk/frontend.d.ts +62 -0
package/dist/sdk/frontend.js +40 -0
package/dist/sdk/index.d.ts +38 -0
package/dist/sdk/index.js +10 -0
package/dist/studio/index.html +649 -0
package/dist/studio/remote-connector.d.ts +60 -0
package/dist/studio/remote-connector.js +295 -0
package/package.json +45 -0
package/tools/build-plugin-package.mjs +99 -0

package/dist/studio/index.html ADDED Viewed

@@ -0,0 +1,649 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>画布插件调试</title>
+  <link rel="stylesheet" href="/studio/fonts/studio-fonts.css">
+  <style>
+:root {
+  --ink: #30363d;
+  --muted: #555f69;
+  --quiet: #6b7580;
+  --line: #e6e9ed;
+  --line-strong: #d6dce2;
+  --surface: #fff;
+  --page: #f8f9fb;
+  --soft: #fbfcfd;
+  --accent: #363d45;
+  --control-shadow: 0 1px 2px #26323d12, 0 3px 8px #26323d08;
+  --floating-shadow: 0 18px 48px #26323d1c, 0 3px 10px #26323d0d;
+  --success: #1f7a5b;
+  --warning: #91621f;
+  --danger: #b74742;
+  --font-ui: "Inter Variable", "Noto Sans SC Variable", "PingFang SC", "Microsoft YaHei", sans-serif;
+  --font-code: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;
+  font-family: var(--font-ui);
+  color: var(--ink);
+  background: var(--page);
+}
+* { box-sizing: border-box; }
+body { margin: 0; }
+button, select, input { font: inherit; }
+button { cursor: pointer; }
+button:disabled { cursor: wait; opacity: .52; }
+button:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid #9da8b3; outline-offset: 3px; }
+#canvas { position: fixed; inset: 0; width: 100%; height: 100%; border: 0; background: var(--page); }
+/* Platform connection */
+.setup { position: fixed; z-index: 5; inset: 0; display: flex; flex-direction: column; overflow: auto; background: var(--page); }
+.setup[hidden] { display: none; }
+.setup-header { flex: none; height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 clamp(24px, 4vw, 56px); border-bottom: 1px solid var(--line); background: var(--surface); }
+.brand { display: flex; align-items: center; gap: 13px; min-width: 0; font-size: 13px; font-weight: 600; white-space: nowrap; }
+.brand strong { font-size: 19px; font-weight: 700; letter-spacing: -.055em; }
+.brand-divider { width: 1px; height: 20px; background: var(--line-strong); }
+.local-service { display: flex; align-items: center; gap: 8px; color: var(--quiet); font-size: 12px; white-space: nowrap; }
+.service-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #9da6a2; }
+.local-service[data-state="ready"] .service-dot { background: var(--success); }
+.local-service[data-state="error"] { color: var(--danger); }
+.local-service[data-state="error"] .service-dot { background: var(--danger); }
+.setup-body { flex: none; display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(320px, 1fr); width: min(100% - 48px, 1000px); margin: auto; border: 1px solid var(--line-strong); border-radius: 20px; overflow: hidden; background: var(--surface); box-shadow: 0 18px 54px #26323d0e, 0 2px 8px #26323d08; }
+.setup-content { min-width: 0; padding: 58px clamp(32px, 4vw, 58px) 64px; }
+.setup-content h1 { margin: 0 0 12px; font-size: 30px; line-height: 1.35; font-weight: 600; }
+.setup-intro { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
+#connect-form { max-width: 496px; margin-top: 34px; }
+#connect-form label { display: block; margin-bottom: 10px; font-size: 13px; font-weight: 600; }
+#connect-form input { display: block; width: 100%; height: 50px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 12px; color: var(--ink); background: var(--surface); box-shadow: var(--control-shadow); font-size: 14px; transition: border-color .15s, box-shadow .15s; }
+#connect-form input::placeholder { color: #89918e; }
+#connect-form input:hover { border-color: #abb5be; }
+#connect-form input:focus { border-color: #8996a2; outline: 0; box-shadow: 0 0 0 4px #8795a322, var(--control-shadow); }
+.field-help { margin: 9px 0 0; color: var(--quiet); font-size: 12px; line-height: 1.6; }
+.form-actions { margin-top: 25px; }
+.form-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-width: 174px; min-height: 48px; border: 1px solid var(--line-strong); border-radius: 13px; padding: 0 18px; color: var(--ink); background: #fff; box-shadow: var(--control-shadow); font-size: 14px; font-weight: 600; }
+.form-actions button:hover:not(:disabled) { border-color: #bbc4cd; background: var(--soft); box-shadow: 0 2px 7px #26323d1a; }
+.form-actions button svg { width: 18px; height: 18px; flex: none; }
+#setup-status { color: var(--muted); font-size: 13px; line-height: 1.55; }
+#setup-status:not(:empty) { margin: 20px 0 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); }
+#setup-status:empty { display: none; }
+#setup-status.setup-error { border-color: #eed4d0; color: var(--danger); background: #fff7f5; }
+.diagnostics { min-width: 0; padding: 58px 36px 54px; border-left: 1px solid var(--line); background: var(--soft); }
+.diagnostics-inner { width: 100%; }
+.diagnostics-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 38px; }
+.diagnostics-head h2 { margin: 0; font-size: 16px; font-weight: 600; }
+.phase-code { border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; color: var(--quiet); background: #fff; box-shadow: var(--control-shadow); font: 500 10px/1.2 var(--font-code); letter-spacing: .03em; }
+.diagnostics-overview { margin-bottom: 34px; }
+.diagnostics-overview strong { display: block; margin-bottom: 9px; color: var(--ink); font-size: 23px; line-height: 1.35; font-weight: 600; }
+.diagnostics-overview strong.diag-ready { color: var(--success); }
+.diagnostics-overview strong.diag-error { color: var(--danger); }
+.diagnostics-overview p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
+.diagnostics-list { margin: 0; border-top: 1px solid var(--line-strong); }
+.diagnostics-list > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: center; min-height: 62px; border-bottom: 1px solid var(--line); }
+.diagnostics-list dt { color: var(--quiet); font-size: 12px; }
+.diagnostics-list dd { margin: 0; overflow: hidden; color: var(--ink); font-size: 13px; font-weight: 600; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
+.diagnostics-list code { font: 500 12px var(--font-code); }
+.diagnostics-list .diag-muted { color: var(--quiet); font-weight: 500; }
+.diagnostics-list .diag-error { color: var(--danger); }
+.diagnostics-list .diag-ready { color: var(--success); }
+.diagnostics-footnote { margin: 18px 0 0; color: var(--quiet); font-size: 11px; }
+/* Canvas controls */
+.dock { position: fixed; z-index: 3; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; align-items: center; gap: 3px; max-width: calc(100vw - 16px); padding: 5px; border: 1px solid var(--line-strong); border-radius: 13px; background: #fff; box-shadow: var(--floating-shadow); }
+.dock[hidden] { display: none; }
+.dock-details, .identity, .controls { display: flex; align-items: center; gap: 6px; min-width: 0; }
+.identity { min-height: 36px; max-width: min(40vw, 360px); padding: 0 9px 0 3px; }
+.identity strong { overflow: hidden; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
+.identity small { color: var(--quiet); font-size: 11px; white-space: nowrap; }
+.dock button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; border: 0; border-radius: 8px; padding: 0 9px; color: var(--ink); background: transparent; font-size: 12px; font-weight: 600; white-space: nowrap; }
+.dock button:hover:not(:disabled) { background: var(--page); }
+.dock button svg { display: block; width: 16px; height: 16px; flex: none; }
+.dock-grip { width: 34px; padding: 0 !important; cursor: grab; touch-action: none; color: #8b9590 !important; }
+.dock-grip:active { cursor: grabbing; }
+.dock-collapse { width: 34px; padding: 0 !important; }
+.dock-expand { padding: 0 10px !important; }
+.dock.compact .dock-details, .dock.compact .dock-collapse { display: none; }
+.dock:not(.compact) .dock-expand { display: none; }
+.dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: #9da6a2; }
+.dot.ready { background: var(--success); }
+.dot.warning { background: #b98530; }
+.dot.error { background: var(--danger); }
+.controls { gap: 2px; padding-left: 8px; border-left: 1px solid var(--line); }
+.controls .primary { background: #f2f4f6; }
+.controls .primary:hover:not(:disabled) { background: #e9edf0; }
+.dialog-actions .primary, .empty .primary { color: var(--ink); background: #f2f4f6; }
+.dialog-actions .primary:hover, .empty .primary:hover { color: var(--ink); background: #e9edf0; }
+.notice { position: fixed; z-index: 2; left: 50%; bottom: 74px; transform: translateX(-50%); max-width: min(90vw, 620px); padding: 11px 15px; border: 1px solid #e9d8b8; border-radius: 12px; color: #79551d; background: #fff9ed; box-shadow: var(--control-shadow); font-size: 12px; }
+.notice[hidden], .empty[hidden] { display: none; }
+.workbench-dialog-open .dock, .workbench-dialog-open .notice { visibility: hidden; pointer-events: none; }
+.empty { position: fixed; z-index: 2; inset: 0; display: grid; place-content: center; gap: 14px; padding: 24px; color: var(--ink); background: var(--page); text-align: center; }
+.empty h1 { margin: 0; font-size: 20px; }
+.empty p { margin: 0; color: var(--quiet); font-size: 13px; }
+.empty button { justify-self: center; min-height: 40px; border: 0; border-radius: 10px; padding: 0 16px; font-size: 12px; font-weight: 600; }
+/* Plugin management dialog */
+dialog { width: min(820px, calc(100vw - 32px)); max-width: calc(100vw - 32px); max-height: min(720px, calc(100dvh - 32px)); margin: auto; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 18px; padding: 0; color: var(--ink); background: #fff; box-shadow: var(--floating-shadow); }
+dialog[open] { display: flex; flex-direction: column; }
+dialog::backdrop { background: #30384266; }
+.dialog-head { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 24px 28px 20px; border-bottom: 1px solid var(--line); }
+.dialog-head h2 { margin: 0 0 5px; font-size: 20px; line-height: 1.35; font-weight: 600; }
+.dialog-head p { margin: 0; color: var(--quiet); font-size: 12px; }
+.dialog-head button { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border: 0; border-radius: 9px; color: var(--quiet); background: transparent; }
+.dialog-head button:hover { color: var(--ink); background: var(--page); }
+.dialog-head svg { width: 18px; height: 18px; }
+.dialog-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 290px; overflow: hidden; }
+.dialog-main { min-width: 0; overflow: auto; padding: 0 28px 26px; }
+.target-section, .session-section { padding: 24px 0; }
+.target-section { border-bottom: 1px solid var(--line); }
+.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
+.section-heading h3 { margin: 0; font-size: 13px; font-weight: 700; }
+.status-badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 999px; color: var(--warning); background: #faf1df; font-size: 11px; font-weight: 600; white-space: nowrap; }
+.status-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
+.status-badge.ready { color: var(--success); background: #e9f4ef; }
+.status-badge.error { color: var(--danger); background: #fff1ef; }
+.plugin-list { display: grid; gap: 8px; max-height: 224px; overflow: auto; }
+.plugin-list:empty::before { content: "暂无可调试的插件"; padding: 18px; border: 1px dashed var(--line-strong); border-radius: 12px; color: var(--quiet); font-size: 12px; text-align: center; }
+.plugin-choice { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 68px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: #fff; cursor: pointer; }
+.plugin-choice:hover { border-color: var(--line-strong); background: var(--soft); }
+.plugin-choice:has(input:checked) { border-color: #aab6c1; background: #f9fafb; }
+.plugin-choice:focus-within { outline: 2px solid #8e9ca9; outline-offset: -3px; }
+.plugin-choice input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
+.plugin-choice-mark { width: 16px; height: 16px; border: 1.5px solid #a9b3bd; border-radius: 50%; background: #fff; }
+.plugin-choice:has(input:checked) .plugin-choice-mark { border: 5px solid #46535f; }
+.plugin-choice-copy { display: grid; gap: 3px; min-width: 0; }
+.plugin-choice-copy strong, .plugin-choice-copy code { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.plugin-choice-copy strong { color: var(--ink); font-size: 13px; font-weight: 600; }
+.plugin-choice-copy code { color: var(--quiet); font: 400 10px/1.4 var(--font-code); }
+.plugin-choice-meta { color: var(--quiet); font-size: 11px; white-space: nowrap; }
+.plugin-choice-meta.disabled { color: var(--danger); }
+.plugin-actions { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
+.plugin-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; border: 1px solid var(--line-strong); border-radius: 10px; padding: 0 12px; color: var(--ink); background: #fff; box-shadow: var(--control-shadow); font-size: 12px; font-weight: 600; }
+.plugin-actions button:hover:not(:disabled) { background: var(--page); }
+.plugin-actions #open-plugin { background: #f2f4f6; }
+.plugin-actions svg { width: 16px; height: 16px; flex: none; }
+.package-note { margin: 10px 0 0; color: var(--quiet); font-size: 11px; line-height: 1.5; }
+.package-note:empty { display: none; }
+.package-note.error { color: var(--danger); }
+.section-context { overflow: hidden; color: var(--quiet); font-size: 11px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
+.session-summary { margin: 0; }
+.session-summary > div { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 51px; border-top: 1px solid #e9ebea; }
+.session-summary > div:first-child { border-top: 0; }
+.session-summary dt { color: var(--muted); font-size: 12px; }
+.session-summary dd { max-width: 62%; margin: 0; overflow: hidden; color: var(--ink); font-size: 12px; font-weight: 650; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
+.technical-details { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 18px; }
+.technical-details summary { width: fit-content; color: var(--accent); font-size: 12px; font-weight: 650; cursor: pointer; }
+.technical-details dl { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px 12px; margin: 14px 0 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); font-size: 11px; }
+.technical-details dt { color: var(--quiet); }
+.technical-details dd { margin: 0; overflow-wrap: anywhere; font-family: var(--font-code); }
+.activity-section { display: flex; flex-direction: column; min-width: 0; overflow: hidden; padding: 24px 18px; border-left: 1px solid var(--line); background: var(--soft); }
+.activity-section > p { margin: -6px 0 16px; color: var(--quiet); font-size: 12px; line-height: 1.5; }
+.activity-count { color: var(--quiet); font-size: 11px; }
+.activity-list { flex: 1; min-height: 120px; max-height: 350px; overflow: auto; border-top: 1px solid var(--line); }
+.activity-list:empty::before { content: "暂无活动"; display: block; padding: 25px; color: var(--quiet); font-size: 12px; text-align: center; }
+.activity-item { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 10px; padding: 11px 2px; color: var(--muted); font-size: 12px; line-height: 1.5; }
+.activity-item + .activity-item { border-top: 1px solid #eceeed; }
+.activity-time { color: #69736e; font: 400 11px/1.6 var(--font-code); }
+.activity-message { overflow-wrap: anywhere; }
+.dialog-actions { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 15px 28px; border-top: 1px solid var(--line); background: #fff; }
+.dialog-actions > div { display: flex; gap: 8px; }
+.dialog-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; border: 1px solid var(--line-strong); border-radius: 11px; padding: 0 15px; color: var(--ink); background: #fff; box-shadow: var(--control-shadow); font-size: 12px; font-weight: 600; white-space: nowrap; }
+.dialog-actions button svg { width: 16px; height: 16px; flex: none; }
+.dialog-actions button:hover { background: var(--page); }
+.dialog-actions #disconnect-panel { border-color: transparent; color: var(--muted); box-shadow: none; }
+.dialog-actions .primary { border-color: #c7cdd4; }
+@media (max-width: 900px) {
+  .setup-body { display: flex; flex-direction: column; width: min(620px, calc(100% - 40px)); }
+  .setup-content { padding: 42px 46px 46px; }
+  .diagnostics { padding: 32px 46px 38px; border-top: 1px solid var(--line); border-left: 0; }
+}
+@media (max-width: 760px) {
+  .dialog-body { grid-template-columns: 1fr; overflow: auto; }
+  .dialog-main { overflow: visible; }
+  .activity-section { min-height: 180px; border-top: 1px solid var(--line); border-left: 0; }
+  .activity-list { max-height: 180px; }
+}
+@media (max-width: 520px) {
+  dialog { height: min(760px, calc(100dvh - 32px)); }
+  .setup-header { height: 58px; padding: 0 18px; }
+  .brand strong { font-size: 18px; }
+  .brand { font-size: 12px; }
+  .local-service { font-size: 11px; }
+  .setup-body { width: calc(100% - 28px); margin: 22px auto 28px; border-radius: 16px; }
+  .setup-content { padding: 30px 24px 34px; }
+  .diagnostics { padding: 28px 24px 32px; }
+  .setup-content h1 { font-size: 25px; }
+  #connect-form { margin-top: 32px; }
+  .form-actions button { width: 100%; }
+  .dock { max-width: calc(100vw - 12px); bottom: 8px; }
+  .dock-details { gap: 3px; }
+  .identity { min-height: 44px; max-width: 98px; padding-inline: 7px; }
+  .identity strong { font-size: 11px; }
+  .identity small, .controls #disconnect { display: none; }
+  .controls { gap: 1px; padding-left: 5px; }
+  .controls button { width: 44px; padding-inline: 0; }
+  .controls .button-label { display: none; }
+  .dialog-head { padding: 18px 20px; }
+  .dialog-head button { width: 44px; height: 44px; margin: -6px -6px 0 0; }
+  .dialog-main { padding-inline: 20px; }
+  .target-section, .session-section { padding-block: 18px; }
+  .section-heading { margin-bottom: 12px; }
+  .session-summary > div { min-height: 42px; }
+  .technical-details { padding-top: 12px; }
+  .activity-section { padding: 18px 20px; }
+  .dialog-actions { padding: 12px 20px; }
+  .dialog-actions button { min-height: 44px; padding-inline: 9px; }
+  .dock button { min-height: 44px; padding-inline: 0; }
+  .dock-grip, .dock-collapse { width: 44px; }
+}
+@media (max-width: 375px) {
+  .plugin-choice { grid-template-columns: 18px minmax(0, 1fr); }
+  .plugin-choice-copy code { white-space: normal; overflow-wrap: anywhere; }
+  .plugin-choice-meta { grid-column: 2; }
+  .dialog-actions { flex-wrap: wrap; }
+  .dialog-actions > div { margin-left: auto; }
+  .dialog-actions button { padding-inline: 8px; }
+}
+@media (prefers-reduced-motion: reduce) {
+  #connect-form input { transition: none; }
+}
+  </style>
+</head>
+<body>
+  <iframe id="canvas" title="真实画布插件调试"></iframe>
+  <main class="setup" id="setup">
+    <header class="setup-header"><div class="brand"><strong>EasyAI</strong><span class="brand-divider"></span><span>插件开发工作台</span></div><div id="local-service" class="local-service" data-state="checking" role="status" aria-live="polite"><span class="service-dot" aria-hidden="true"></span><span id="local-service-text">正在检查本地服务</span></div></header>
+    <div class="setup-body">
+      <section class="setup-content" aria-labelledby="connection-title">
+        <h1 id="connection-title">连接画布平台</h1>
+        <p class="setup-intro">输入平台地址，在新窗口授权后进入私人调试画布。</p>
+        <form id="connect-form"><label for="platform-address">画布平台地址</label><input id="platform-address" type="url" placeholder="https://canvas.example.com" autocomplete="url" aria-describedby="address-help" required><p id="address-help" class="field-help">线上平台使用 HTTPS，本机平台可使用 HTTP。</p><div class="form-actions"><button id="connect-button" type="submit" disabled><svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2.5 10h11m-4-4 4 4-4 4M15.5 4h2v12h-2"/></svg><span>登录并连接</span></button></div></form>
+        <p id="setup-status" role="status" aria-live="polite"></p>
+      </section>
+      <aside class="diagnostics" aria-labelledby="diagnostics-title"><div class="diagnostics-inner">
+        <div class="diagnostics-head"><h2 id="diagnostics-title">连接诊断</h2><code id="diag-phase" class="phase-code">CHECKING</code></div>
+        <div class="diagnostics-overview"><strong id="diag-auth">等待连接</strong><p id="diag-description">正在检查本地插件服务。</p></div>
+        <dl class="diagnostics-list"><div><dt>本地服务</dt><dd id="diag-service">检查中</dd></div><div><dt>服务地址</dt><dd><code id="diag-local"></code></dd></div><div><dt>目标平台</dt><dd><code id="diag-platform" class="diag-muted">未指定</code></dd></div></dl>
+        <p class="diagnostics-footnote">状态每 2 秒更新</p>
+      </div></aside>
+    </div>
+  </main>
+  <div class="empty" id="empty"><h1>正在连接插件调试画布</h1><p id="empty-text">读取本地插件目录…</p><button id="retry" class="primary" type="button" hidden>重试</button></div>
+  <div id="dock" class="dock" role="toolbar" aria-label="插件调试工具条">
+    <button id="dock-grip" class="dock-grip" type="button" aria-label="拖动工具条，或用方向键移动" title="拖动或用方向键移动"><svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><circle cx="5" cy="4" r="1.25"/><circle cx="11" cy="4" r="1.25"/><circle cx="5" cy="8" r="1.25"/><circle cx="11" cy="8" r="1.25"/><circle cx="5" cy="12" r="1.25"/><circle cx="11" cy="12" r="1.25"/></svg></button>
+    <div class="dock-details">
+      <div class="identity" aria-live="polite"><span id="dot" class="dot"></span><strong id="plugin-name">插件调试</strong><small id="state">正在连接</small></div>
+      <div class="controls"><button id="refresh" class="primary" type="button" aria-label="刷新构建" disabled><svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16.6 8.5A6.7 6.7 0 1 0 17 12M16.5 3.5v5h-5"/></svg><span class="button-label">刷新构建</span></button><button id="disconnect" type="button"><svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 2.5v7M5.1 5.4a7.5 7.5 0 1 0 9.8 0"/></svg><span class="button-label">断开连接</span></button><button id="manage" type="button" aria-label="管理插件调试"><svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2.5" y="2.5" width="6" height="6" rx="1.4"/><rect x="11.5" y="11.5" width="6" height="6" rx="1.4"/><path d="M8.5 5.5h3a3 3 0 0 1 3 3v3M5.5 8.5v3a3 3 0 0 0 3 3h3"/></svg><span class="button-label">管理</span></button></div>
+    </div>
+    <button id="dock-collapse" class="dock-collapse" type="button" aria-label="收起插件调试工具条" title="收起"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m3.5 6 4.5 4.5L12.5 6"/></svg></button>
+    <button id="dock-expand" class="dock-expand" type="button" aria-label="展开插件调试工具条" title="展开插件调试工具条">插件调试</button>
+  </div>
+  <div id="notice" class="notice" role="status" hidden></div>
+  <dialog id="panel" aria-labelledby="panel-title">
+    <div class="dialog-head"><div><h2 id="panel-title">插件管理</h2><p>选择调试插件并下载可用的插件包</p></div><button id="close" type="button" aria-label="关闭管理面板"><svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true"><path d="M4.5 4.5 15.5 15.5M15.5 4.5 4.5 15.5"/></svg></button></div>
+    <div class="dialog-body"><div class="dialog-main"><section class="target-section" aria-labelledby="target-title"><div class="section-heading"><h3 id="target-title">插件</h3><span id="panel-status" class="status-badge" role="status">正在连接</span></div><div id="plugin-list" class="plugin-list" role="radiogroup" aria-labelledby="target-title"></div><div class="plugin-actions"><button id="open-plugin" type="button"><svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 10h11m-4-4 4 4-4 4M16 4h2v12h-2"/></svg><span>在画布中调试</span></button><button id="download-package" type="button" disabled><svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 2.5v10m-3.5-3.5L10 12.5 13.5 9M3.5 14v2.5h13V14"/></svg><span id="download-label">下载插件包</span></button></div><p id="package-note" class="package-note" role="status" aria-live="polite"></p></section>
+      <section class="session-section" aria-labelledby="session-title"><div class="section-heading"><h3 id="session-title">当前会话</h3><span id="active-plugin" class="section-context"></span></div><dl class="session-summary"><div><dt>开发服务</dt><dd id="connection">—</dd></div><div><dt>当前构建</dt><dd id="build">—</dd></div><div><dt>调试画布</dt><dd id="project">—</dd></div></dl><details class="technical-details"><summary>查看连接详情</summary><dl><dt>连接 ID</dt><dd id="connection-id">—</dd><dt>构建摘要</dt><dd id="build-full">—</dd><dt>项目 ID</dt><dd id="project-id">—</dd></dl></details></section></div>
+      <aside class="activity-section" aria-labelledby="activity-title"><div class="section-heading"><h3 id="activity-title">最近活动</h3><span id="activity-count" class="activity-count">0 条</span></div><p>当前工作台会话的连接与构建记录</p><div id="log" class="activity-list" role="log" aria-label="调试活动" aria-live="polite"></div></aside></div>
+    <div class="dialog-actions"><button id="disconnect-panel" type="button">退出连接</button><div><button id="panel-cancel" type="button">关闭</button><button id="reconnect" class="primary" type="button"><svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16.6 8.5A6.7 6.7 0 1 0 17 12M16.5 3.5v5h-5"/></svg><span>重新连接</span></button></div></div>
+  </dialog>
+  <script>
+    (() => {
+      const protocol = 'easyai.plugin-debug/v1';
+      const $ = id => document.getElementById(id);
+      const frame = $('canvas'), panel = $('panel'), dock = $('dock');
+      let connectorStatus = null, connectAttemptError = '', localServiceAvailable = false, connectInProgress = false;
+      try { $('platform-address').value = localStorage.getItem('plugin-debug-platform-url') || ''; } catch {}
+      $('diag-local').textContent = window.location.host;
+      function renderTargetAddress(raw = $('platform-address').value) {
+        const value = raw.trim();
+        let host = '未指定';
+        if (value) { try { host = new URL(value).host || '地址待确认'; } catch { host = '地址待确认'; } }
+        $('diag-platform').textContent = host;
+        $('diag-platform').title = value;
+        $('diag-platform').className = host === '未指定' || host === '地址待确认' ? 'diag-muted' : '';
+      }
+      $('platform-address').addEventListener('input', () => renderTargetAddress());
+      renderTargetAddress();
+      function setSetupMessage(message) { if ($('setup-status').textContent !== message) $('setup-status').textContent = message; }
+      function renderDiagnosticPhase(phase) {
+        const state = !localServiceAvailable ? 'service-error' : phase === 'idle' && connectInProgress ? 'checking' : phase === 'idle' && connectAttemptError ? 'error' : phase;
+        const labels = { idle: '等待连接', checking: '检查平台地址', authorizing: '等待平台授权', connecting: '正在建立连接', connected: '已授权', disconnected: '连接中断', error: '平台连接失败', 'service-error': '服务不可用' };
+        const descriptions = { idle: '输入平台地址后开始授权。', checking: '正在验证你输入的平台地址。', authorizing: '请在新窗口完成平台登录与授权。', connecting: '正在建立插件服务与画布的连接。', connected: '授权已完成，正在打开调试画布。', disconnected: '连接已中断，请查看左侧错误信息。', error: '请查看左侧错误信息并修改地址后重试。', 'service-error': '检查开发命令，服务恢复后可继续连接。' };
+        $('diag-phase').textContent = state.toUpperCase().replace('-', '_');
+        $('diag-auth').textContent = labels[state] || '等待连接';
+        $('diag-description').textContent = descriptions[state] || descriptions.idle;
+        $('diag-auth').className = state === 'connected' ? 'diag-ready' : state === 'error' || state === 'disconnected' || state === 'service-error' ? 'diag-error' : '';
+      }
+      function setLocalServiceState(state) {
+        $('local-service').dataset.state = state;
+        const message = state === 'ready' ? '本地服务在线' : state === 'error' ? '本地服务不可用' : '正在检查本地服务';
+        if ($('local-service-text').textContent !== message) $('local-service-text').textContent = message;
+        $('diag-service').textContent = state === 'ready' ? '在线' : state === 'error' ? '不可用' : '检查中';
+        $('diag-service').className = state === 'ready' ? 'diag-ready' : state === 'error' ? 'diag-error' : 'diag-muted';
+        localServiceAvailable = state === 'ready';
+        $('connect-button').disabled = !localServiceAvailable || connectInProgress;
+      }
+      async function loadConnectionStatus() {
+        try {
+          const response = await fetch('/studio/status', { cache: 'no-store' });
+          if (!response.ok) throw new Error('本地服务状态读取失败');
+          connectorStatus = await response.json();
+          setLocalServiceState('ready');
+          const targetAddress = connectorStatus.phase === 'idle' ? $('platform-address').value : connectorStatus.platformOrigin || $('platform-address').value;
+          renderTargetAddress(targetAddress);
+          const connected = connectorStatus.phase === 'connected';
+          if (connectorStatus.phase !== 'idle') connectAttemptError = '';
+          renderDiagnosticPhase(connectorStatus.phase);
+          $('setup').hidden = connected;
+          $('dock').hidden = !connected;
+          $('setup-status').classList.toggle('setup-error', connectorStatus.phase === 'disconnected' || Boolean(connectAttemptError));
+          setSetupMessage(connectorStatus.phase === 'authorizing' ? '请在打开的页面登录并允许插件开发连接。' : connectorStatus.phase === 'connecting' ? '正在建立连接…' : connectorStatus.phase === 'disconnected' ? connectorStatus.error || '连接已断开，正在重试…' : connectInProgress ? '正在检查画布平台…' : connectAttemptError);
+          if (connected && (!catalog || catalog.connectionId !== connectorStatus.connectionId)) {
+            frame.removeAttribute('src'); session = null; await loadCatalog();
+          }
+        } catch { setLocalServiceState('error'); renderDiagnosticPhase('service-error'); setSetupMessage('本地插件服务暂时不可用，请检查开发命令。'); $('setup-status').classList.add('setup-error'); }
+      }
+      $('connect-form').addEventListener('submit', async event => {
+        event.preventDefault();
+        const address = $('platform-address').value.trim();
+        const popup = window.open('about:blank', 'plugin-debug-login', 'popup,width=560,height=720');
+        connectInProgress = true;
+        $('connect-button').disabled = true;
+        connectAttemptError = '';
+        renderTargetAddress(address);
+        renderDiagnosticPhase('checking');
+        $('setup-status').classList.remove('setup-error');
+        setSetupMessage('正在检查画布平台…');
+        try {
+          const response = await fetch('/studio/connect', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ platformUrl: address }) });
+          const result = await response.json();
+          if (!response.ok) throw new Error(result.message || result.error || '无法连接画布平台');
+          try { localStorage.setItem('plugin-debug-platform-url', address); } catch {}
+          if (popup) popup.location.href = result.authorizeUrl;
+          else window.open(result.authorizeUrl, '_blank', 'noopener');
+          setSetupMessage('请在打开的页面登录并授权。');
+          renderDiagnosticPhase('authorizing');
+        } catch (error) { popup?.close(); connectAttemptError = error.message; renderDiagnosticPhase('error'); setSetupMessage(error.message); $('setup-status').classList.add('setup-error'); }
+        finally { connectInProgress = false; $('connect-button').disabled = !localServiceAvailable; }
+      });
+      async function disconnect() {
+        if (panel.open) panel.close();
+        await fetch('/studio/connect', { method: 'DELETE' }).catch(() => undefined);
+        connectAttemptError = '';
+        frame.removeAttribute('src'); session = null; catalog = null; await loadConnectionStatus();
+      }
+      $('disconnect').addEventListener('click', disconnect);
+      $('disconnect-panel').addEventListener('click', disconnect);
+      let catalog = null, selected = null, panelSelected = null, session = null, preparedSession = null, busy = false, frameLoading = false, frameFailed = false, waiting = null, readyTimer = null, noticeTimer = null, lastBuildState = '';
+      let pluginListKey = '', packageDownloading = false, packageMessage = '', packageError = false;
+      const requestedPlugin = new URLSearchParams(window.location.search).get('plugin');
+      let canvasDialogOpen = false, manuallyCollapsed = false, expandedOverDialog = false, dockPosition = null, drag = null;
+      const lines = [];
+      const log = message => {
+        const time = new Date().toLocaleTimeString('zh-CN', { hour12: false });
+        lines.push({ time, message });
+        const item = document.createElement('div'); item.className = 'activity-item';
+        const stamp = document.createElement('time'); stamp.className = 'activity-time'; stamp.textContent = time;
+        const content = document.createElement('span'); content.className = 'activity-message'; content.textContent = message;
+        item.append(stamp, content); $('log').append(item);
+        while ($('log').children.length > 70) $('log').firstElementChild.remove();
+        $('activity-count').textContent = `${lines.length} 条`;
+        $('log').scrollTop = $('log').scrollHeight;
+      };
+      const show = (message, warning = true) => {
+        clearTimeout(noticeTimer);
+        $('notice').hidden = !message;
+        $('notice').textContent = message;
+        $('dot').className = `dot ${warning ? 'warning' : 'ready'}`;
+        if (message && !warning) noticeTimer = setTimeout(() => { $('notice').hidden = true; }, 4500);
+      };
+      function placeDock(left, top) {
+        const rect = dock.getBoundingClientRect();
+        dockPosition = {
+          left: Math.min(Math.max(8, left), Math.max(8, window.innerWidth - rect.width - 8)),
+          top: Math.min(Math.max(8, top), Math.max(8, window.innerHeight - rect.height - 8))
+        };
+        Object.assign(dock.style, { left: `${dockPosition.left}px`, top: `${dockPosition.top}px`, bottom: 'auto', transform: 'none' });
+      }
+      function rememberDock() {
+        try {
+          if (dockPosition) localStorage.setItem('plugin-debug-dock-position', JSON.stringify(dockPosition));
+        } catch { /* 拒绝存储时仍可在当前页面移动工具条。 */ }
+      }
+      function renderDock() {
+        document.body.classList.toggle('workbench-dialog-open', panel.open);
+        dock.classList.toggle('compact', manuallyCollapsed || (canvasDialogOpen && !expandedOverDialog));
+        if (dockPosition) requestAnimationFrame(() => placeDock(dockPosition.left, dockPosition.top));
+      }
+      try {
+        const saved = JSON.parse(localStorage.getItem('plugin-debug-dock-position') || 'null');
+        if (Number.isFinite(saved?.left) && Number.isFinite(saved?.top)) requestAnimationFrame(() => placeDock(saved.left, saved.top));
+      } catch { /* Saved layout is optional. */ }
+      dock.addEventListener('pointerdown', event => {
+        if (event.button !== 0 || event.target.closest('button:not(#dock-grip)')) return;
+        const rect = dock.getBoundingClientRect();
+        drag = { pointerId: event.pointerId, x: event.clientX, y: event.clientY, left: rect.left, top: rect.top };
+        dock.setPointerCapture(event.pointerId);
+      });
+      dock.addEventListener('pointermove', event => {
+        if (!drag || event.pointerId !== drag.pointerId) return;
+        placeDock(drag.left + event.clientX - drag.x, drag.top + event.clientY - drag.y);
+      });
+      const finishDrag = event => {
+        if (!drag || event.pointerId !== drag.pointerId) return;
+        drag = null;
+        rememberDock();
+      };
+      dock.addEventListener('pointerup', finishDrag);
+      dock.addEventListener('pointercancel', finishDrag);
+      $('dock-grip').addEventListener('keydown', event => {
+        const directions = { ArrowLeft: [-20, 0], ArrowRight: [20, 0], ArrowUp: [0, -20], ArrowDown: [0, 20] };
+        const delta = directions[event.key];
+        if (!delta) return;
+        event.preventDefault();
+        const rect = dock.getBoundingClientRect();
+        placeDock(rect.left + delta[0], rect.top + delta[1]);
+        rememberDock();
+      });
+      window.addEventListener('resize', () => { if (dockPosition) placeDock(dockPosition.left, dockPosition.top); });
+      $('dock-collapse').addEventListener('click', () => { manuallyCollapsed = true; expandedOverDialog = false; renderDock(); });
+      $('dock-expand').addEventListener('click', () => { manuallyCollapsed = false; expandedOverDialog = canvasDialogOpen; renderDock(); });
+      const chosen = () => catalog?.plugins.find(item => item.id === selected);
+      const panelPlugin = () => catalog?.plugins.find(item => item.id === panelSelected);
+      function renderPluginList() {
+        const plugins = catalog?.plugins || [];
+        const key = JSON.stringify(plugins.map(item => [item.id, item.name, item.nodes, item.actions, item.enabled]));
+        if (key !== pluginListKey) {
+          pluginListKey = key;
+          $('plugin-list').replaceChildren();
+          for (const item of plugins) {
+            const row = document.createElement('label'); row.className = 'plugin-choice';
+            const input = document.createElement('input'); input.type = 'radio'; input.name = 'studio-plugin'; input.value = item.id;
+            const mark = document.createElement('span'); mark.className = 'plugin-choice-mark'; mark.setAttribute('aria-hidden', 'true');
+            const copy = document.createElement('span'); copy.className = 'plugin-choice-copy';
+            const name = document.createElement('strong'); name.textContent = item.name;
+            const id = document.createElement('code'); id.textContent = item.id;
+            copy.append(name, id);
+            const meta = document.createElement('span'); meta.className = `plugin-choice-meta${item.enabled ? '' : ' disabled'}`;
+            meta.textContent = item.enabled ? `${item.nodes} 个节点 / ${item.actions} 个操作` : '已停用';
+            row.append(input, mark, copy, meta); $('plugin-list').append(row);
+          }
+        }
+        for (const input of $('plugin-list').querySelectorAll('input[name="studio-plugin"]')) {
+          input.checked = input.value === panelSelected;
+          input.disabled = packageDownloading;
+        }
+      }
+      const url = () => {
+        const address = new URL('/developer/plugin-debug', catalog.platformOrigin);
+        address.searchParams.set('pluginId', selected);
+        address.searchParams.set('connectionId', catalog.connectionId);
+        if (preparedSession?.sessionId) address.searchParams.set('sessionId', preparedSession.sessionId);
+        return address.toString();
+      };
+      function render() {
+        const plugin = chosen();
+        $('plugin-name').textContent = plugin?.name || '插件调试';
+        const building = catalog?.devBuild?.state;
+        $('state').textContent = building === 'error' ? '构建失败' : building === 'building' ? '正在构建' : frameFailed ? '画布加载失败' : busy ? (session ? '正在刷新' : '正在打开画布') : session ? (!session.active ? '会话已失效' : plugin?.buildKey === session.fingerprint ? '已连接' : '发现新构建') : '等待画布';
+        $('dot').className = `dot ${building === 'error' || frameFailed ? 'error' : building === 'building' ? 'warning' : session ? !session.active ? 'error' : plugin?.buildKey === session.fingerprint ? 'ready' : 'warning' : ''}`;
+        $('refresh').disabled = !session?.active || busy || frameFailed || Boolean(building && building !== 'ready');
+        const stateText = $('state').textContent;
+        $('panel-status').textContent = stateText;
+        $('panel-status').className = `status-badge ${$('dot').classList.contains('error') ? 'error' : $('dot').classList.contains('ready') ? 'ready' : ''}`;
+        $('connection').textContent = connectorStatus?.phase === 'connected' ? '已连接 · 本机' : '未连接';
+        $('active-plugin').textContent = plugin?.name || '';
+        $('build').textContent = building === 'error' ? '构建失败' : building === 'building' ? '构建中' : plugin?.buildKey ? plugin.buildKey.slice(0, 8) : '等待构建';
+        $('project').textContent = session?.active ? '私人调试画布' : session ? '会话已失效' : '等待打开';
+        $('connection-id').textContent = catalog?.connectionId || '—';
+        $('build-full').textContent = plugin?.buildKey || '—';
+        $('project-id').textContent = session?.projectId || '—';
+        renderPluginList();
+        const inspected = panelPlugin();
+        $('open-plugin').disabled = !inspected?.enabled || busy || packageDownloading;
+        $('download-package').disabled = !inspected?.package || packageDownloading;
+        $('download-package').setAttribute('aria-busy', String(packageDownloading));
+        $('download-label').textContent = packageDownloading ? '正在准备…' : inspected?.package?.mode === 'build' ? '打包并下载' : '下载插件包';
+        $('package-note').textContent = packageMessage || (inspected?.package?.mode === 'build' ? '从当前源码生成 ZIP，可用于平台安装。' : inspected?.package?.mode === 'download' ? '下载本地服务已加载的 ZIP 插件包。' : '当前插件暂无可下载的插件包。');
+        $('package-note').className = `package-note${packageError ? ' error' : ''}`;
+        $('empty').hidden = Boolean(plugin) && !frameLoading && !frameFailed;
+      }
+      async function connect() {
+        if (!catalog?.connectionId || !chosen() || connectorStatus?.phase !== 'connected') return;
+        clearTimeout(readyTimer);
+        session = null; preparedSession = null; busy = true; frameLoading = true; frameFailed = false; waiting = null;
+        $('retry').hidden = true;
+        $('empty-text').textContent = '正在打开调试画布…';
+        canvasDialogOpen = false; expandedOverDialog = false; renderDock(); render();
+        try {
+          const response = await fetch('/studio/open', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ pluginId: selected }) });
+          const next = await response.json();
+          if (!response.ok) throw new Error(next.message || next.error || '调试画布创建失败');
+          preparedSession = next;
+        } catch (error) { busy = false; frameLoading = false; frameFailed = true; $('empty-text').textContent = error.message; $('retry').hidden = false; show(error.message); log(error.message); render(); return; }
+        frame.src = url();
+        log(`打开真实画布：${selected}`);
+        readyTimer = setTimeout(() => {
+          if (!session) {
+            busy = false; frameLoading = false; frameFailed = true; $('retry').hidden = false;
+            $('empty-text').textContent = '调试画布加载超时，请重新打开画布。';
+            log('等待调试画布超时'); render();
+          }
+        }, 45000);
+        render();
+      }
+      async function loadCatalog() {
+        try {
+          const response = await fetch('/studio/catalog', { cache: 'no-store' });
+          if (!response.ok) throw new Error(`插件服务返回 ${response.status}`);
+          const next = await response.json();
+          if (next.protocol !== protocol || !Array.isArray(next.plugins)) throw new Error('插件目录格式无效');
+          const old = chosen();
+          catalog = next;
+          const buildState = next.devBuild?.state || '';
+          if (buildState !== lastBuildState) {
+            if (buildState === 'error') { show(`插件界面构建失败：${next.devBuild.message || '请检查开发服务日志'}`); log('插件界面构建失败'); }
+            if (buildState === 'ready' && lastBuildState === 'error') { show('插件界面已重新构建，请刷新画布。', false); log('插件界面构建恢复'); }
+            lastBuildState = buildState;
+          }
+          if (!next.plugins.some(item => item.id === selected))
+            selected = next.plugins.find(item => item.id === requestedPlugin)?.id || next.plugins[0]?.id || null;
+          if (!next.plugins.some(item => item.id === panelSelected)) panelSelected = selected;
+          if (selected && !frame.getAttribute('src') && !busy && !frameFailed) connect();
+          if (!selected) { $('empty-text').textContent = '本地服务尚未注册插件，请在源码中注册并启动开发服务。'; $('retry').hidden = false; }
+          if (session && old?.buildKey !== chosen()?.buildKey) { show('检测到新构建。完成当前任务后，点击“刷新构建”。'); log('检测到插件构建更新'); }
+          render();
+        } catch (error) {
+          $('empty-text').textContent = `暂时无法读取本地插件目录：${error.message}`;
+          $('retry').hidden = false; show('本地插件服务暂时不可用，请检查开发命令。'); log(error.message);
+        }
+      }
+      window.addEventListener('message', event => {
+        if (event.origin === window.location.origin && event.data?.type === 'plugin-debug-auth-complete') { void loadConnectionStatus(); return; }
+        if (!catalog || event.origin !== catalog.platformOrigin || event.source !== frame.contentWindow) return;
+        const data = event.data;
+        if (!data || typeof data !== 'object' || data.protocol !== protocol || data.pluginId !== selected) return;
+        if (data.type === 'bootstrap.request' && preparedSession?.sessionId === data.sessionId &&
+            typeof data.codeChallenge === 'string' && /^[A-Za-z0-9_-]{43,128}$/.test(data.codeChallenge)) {
+          void (async () => {
+            try {
+              const response = await fetch('/studio/embed-ticket', { method: 'POST', headers: { 'content-type': 'application/json' },
+                body: JSON.stringify({ debugSessionId: data.sessionId, codeChallenge: data.codeChallenge }) });
+              const issued = await response.json();
+              if (!response.ok) throw new Error(issued.message || issued.error || '画布登录失败');
+              frame.contentWindow.postMessage({ protocol, type: 'bootstrap.ticket', pluginId: selected,
+                sessionId: data.sessionId, ticket: issued.ticket }, catalog.platformOrigin);
+            } catch (error) { show(error.message); log(error.message); }
+          })();
+          return;
+        }
+        if (data.type === 'ready' && data.status?.sessionId === data.sessionId) {
+          clearTimeout(readyTimer); session = data.status; busy = false; frameLoading = false; frameFailed = false; show(''); log(`已连接私人画布 ${session.projectId}`); render(); return;
+        }
+        if (data.type === 'error' && !data.sessionId) {
+          clearTimeout(readyTimer); busy = false; frameLoading = false; frameFailed = true; $('retry').hidden = false;
+          $('empty-text').textContent = data.message || '调试画布加载失败，请重新打开画布。';
+          log($('empty-text').textContent); render(); return;
+        }
+        if (!session || data.sessionId !== session.sessionId) return;
+        if (data.type === 'canvasDialogState' && typeof data.open === 'boolean') {
+          if (data.open !== canvasDialogOpen) expandedOverDialog = false;
+          canvasDialogOpen = data.open; renderDock(); return;
+        }
+        if (data.type === 'status' && data.status?.sessionId === session.sessionId) { session = data.status; if (!session.active) show('调试会话已失效，请在管理菜单中重新连接。'); render(); return; }
+        if (data.type === 'refreshing' && data.requestId === waiting) { busy = true; log('正在保存画布并检查新构建'); render(); }
+        if (data.type === 'refreshResult' && data.requestId === waiting) {
+          session = data.status; waiting = null; busy = Boolean(data.changed); frameLoading = Boolean(data.changed); show(data.changed ? '新构建已启用，正在重新加载画布…' : '当前已经是最新构建。', false); log(data.changed ? '构建已更新，画布正在重载' : '当前构建没有变化');
+          if (data.changed) $('empty-text').textContent = '正在加载新构建…';
+          if (data.changed) readyTimer = setTimeout(() => {
+            busy = false; session = null; frameLoading = false; frameFailed = true; $('retry').hidden = false;
+            $('empty-text').textContent = '新构建已启用，但画布重新加载失败。请重新打开画布。';
+            render();
+          }, 45000);
+          render();
+        }
+        if (data.type === 'refreshError' && data.requestId === waiting) { busy = false; waiting = null; show(data.message || '刷新失败，请稍后重试'); log(data.message || '刷新失败'); render(); }
+      });
+      $('refresh').addEventListener('click', () => {
+        if (!session || busy) return;
+        waiting = crypto.randomUUID(); busy = true;
+        frame.contentWindow.postMessage({ protocol, type: 'refresh', sessionId: session.sessionId, pluginId: selected, requestId: waiting }, catalog.platformOrigin);
+        render();
+      });
+      $('manage').addEventListener('click', () => { panelSelected = selected; packageMessage = ''; packageError = false; render(); panel.showModal(); $('plugin-list').querySelector('input:checked')?.focus(); renderDock(); });
+      panel.addEventListener('close', () => { renderDock(); $('manage').focus(); });
+      $('close').addEventListener('click', () => panel.close());
+      $('panel-cancel').addEventListener('click', () => panel.close());
+      $('plugin-list').addEventListener('change', event => {
+        if (!event.target.matches('input[name="studio-plugin"]')) return;
+        panelSelected = event.target.value; packageMessage = ''; packageError = false; render();
+      });
+      $('open-plugin').addEventListener('click', () => {
+        if (!panelPlugin()?.enabled || busy) return;
+        selected = panelSelected; show(''); panel.close(); connect();
+      });
+      $('download-package').addEventListener('click', async () => {
+        const plugin = panelPlugin();
+        if (!plugin?.package || packageDownloading) return;
+        packageDownloading = true; packageMessage = ''; packageError = false; render();
+        try {
+          const response = await fetch(`/studio/packages/${encodeURIComponent(plugin.id)}/download`, { method: 'POST' });
+          if (!response.ok) {
+            const details = await response.json().catch(() => ({}));
+            throw new Error(details.error || details.message || '插件包下载失败');
+          }
+          const blob = await response.blob();
+          const filename = `${plugin.id.replace(/[^A-Za-z0-9._-]/g, '_')}.zip`;
+          const link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.download = filename;
+          link.click(); setTimeout(() => URL.revokeObjectURL(link.href), 10_000);
+          packageMessage = `已下载 ${filename}`; log(`下载插件包：${plugin.id}`);
+        } catch (error) {
+          packageMessage = error.message || '插件包下载失败'; packageError = true; log(packageMessage);
+        } finally { packageDownloading = false; render(); }
+      });
+      $('reconnect').addEventListener('click', () => { show(''); connect(); panel.close(); });
+      $('retry').addEventListener('click', () => frameFailed ? connect() : loadCatalog());
+      void loadConnectionStatus(); setInterval(loadConnectionStatus, 2000);
+      loadCatalog(); setInterval(loadCatalog, 3000);
+    })();
+  </script>
+</body>
+</html>