@windypro-rourou/dsh-eda 0.1.3 → 0.1.5

package/lib/client.js

@@ -1,189 +1,252 @@
 /**
- * dsh-lichuang-eda — browser half. Runs inside the dsh web GUI.
+ * dsh-lichuang-eda — browser half (DSH 0.1.x / 0.2 desktop adapted).
  *
- * 平台仪表盘 + 监看器（生成在对话里由 agent 驱动官方 eda.* API 完成）：
- *   - header（品牌 + 状态版本）
- *   - 连接卡：状态 + 一键动作（装/启/打开编辑器/扩展直达）
- *   - 连接教程（可折叠，默认收起，精简步骤）
- *   - 活动监视（主体）：当前会话 agent 对官方 API 的实时调用流（动作/耗时/结果）
- *   - 离线导出（底部小结）：仅兜底，导出可导入的标准版 JSON
+ * Design read: a technical side-panel for the shell's overlay layer — dark-first,
+ * editorial and restrained, wearing the host's own tokens + UI primitives so it
+ * reads as native chrome rather than a bolted-on widget.
  *
- * Bundle format: `window.__ModuleLoader__.load({id, factory})` (lazy CJS) —
- * the only client bundle format the web shell materializes. The apply/inject
- * export shape and ctx.effect disposer follow the DSH client-bundle contract.
+ * 0.2 adaptation (the "挡到" fix):
+ *   - the panel is registered into the `shell.overlay` SLOT (position:absolute,
+ *     z-index 30) instead of a fixed body overlay with a 9999 z-index — it no
+ *     longer covers the conversation, other panels, or the desktop chrome;
+ *   - the entry point is a `conversation.session.header.utilities` pill (0.2's
+ *     left sidebar is slot-owned); the 0.1.x sidebar DOM entry is kept as a
+ *     compatibility path and the two never fight;
+ *   - the panel is drag-resizable (120–760px, persisted) and follows the host
+ *     theme through `--dsw-alias-*` tokens.
+ *
+ * Bundle format: `window.__ModuleLoader__.load({id, factory})` (lazy CJS).
  */
 window.__ModuleLoader__.load({
 	id: "@windypro-rourou/dsh-eda",
 	factory: (require) => {
 		var module = { exports: {} };
 		var exports = module.exports;
+		Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 
-		const { createElement: h, useEffect, useState } = require("react");
+		const React = require("react");
+		const { createElement: h, useEffect, useMemo, useRef, useState } = React;
 		const { createRoot } = require("react-dom/client");
 
+		// ── host UI kit (same components the native chrome uses); degrade to our
+		//    own token-based markup when a build does not ship it. ────────────────
+		let P = null;
+		try { P = require("@deepseek-ai/dsh-client-ui-primitives"); } catch (e) { P = null; }
+		const dsButton = P && P.Button ? P.Button : null;
+		const dsPill = P && P.Pill ? P.Pill : null;
+		const dsTooltip = P && P.Tooltip ? P.Tooltip : null;
+		const dsIcon = (name) => (P && P[name] ? P[name] : null);
+
 		//#region styles
+		/**
+		 * Token-first styling: every colour comes from `--dsw-alias-*` with a
+		 * dark-first fallback, so the panel inherits light/dark from the shell.
+		 * Reused accent = one blue; no gradients, no heavy shadows (taste rule:
+		 * restraint over decoration).
+		 */
 		const STYLE = `
-[data-dsh-eda-entry] {
-  display: flex; align-items: center; gap: 8px; width: 100%;
-  padding: 9px 12px; margin: 2px 0; border: 0; border-radius: 8px;
-  background: transparent; color: inherit; font: inherit; cursor: pointer; text-align: left;
+.dsh-eda-root {
+  --eda-bg: var(--dsw-alias-bg-layer-1, #151922);
+  --eda-bg-base: var(--dsw-alias-bg-base, #0f1115);
+  --eda-bg-soft: var(--dsw-alias-bg-layer-2, #1a1f2b);
+  --eda-fg: var(--dsw-alias-label-primary, #d7dde6);
+  --eda-fg-2: var(--dsw-alias-label-secondary, #b6bdc9);
+  --eda-fg-3: var(--dsw-alias-label-tertiary, #8b93a3);
+  --eda-line: var(--dsw-alias-border-l1, #262a33);
+  --eda-line-soft: var(--dsw-alias-border-l2, rgba(255,255,255,.06));
+  --eda-accent: #4c8dff;
+  --eda-ok: var(--dsw-alias-state-success-primary, #22c55e);
+  --eda-warn: var(--dsw-alias-state-warn-primary, #eab308);
+  --eda-err: var(--dsw-alias-state-error-primary, #ef4444);
+  --eda-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+  --eda-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
+
+  position: absolute; top: 0; right: 0; bottom: 0;
+  width: var(--eda-w, 400px); max-width: 96vw;
+  display: flex; flex-direction: column; min-height: 0;
+  background: var(--eda-bg); color: var(--eda-fg);
+  border-left: 1px solid var(--eda-line);
+  font: 13px/1.55 var(--eda-sans);
+  font-variant-numeric: tabular-nums;
+  z-index: 30;
+  box-shadow: -14px 0 40px rgba(0,0,0,.22);
+  animation: edaIn .16s cubic-bezier(.22,.61,.36,1);
 }
+.dsh-eda-root[hidden] { display: none !important; }
+@keyframes edaIn { from { transform: translateX(14px); opacity: 0; } to { transform: none; opacity: 1; } }
+@media (prefers-reduced-motion: reduce) { .dsh-eda-root { animation: none; } }
+
+.dsh-eda-grip { position: absolute; left: -3px; top: 0; bottom: 0; width: 7px; cursor: col-resize; z-index: 6; }
+.dsh-eda-grip:hover { background: linear-gradient(90deg, transparent, rgba(76,141,255,.35)); }
+
+/* top bar — sticky, quiet, 48px */
+.eda-top { flex: none; height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 12px 0 14px;
+  border-bottom: 1px solid var(--eda-line); background: var(--eda-bg); }
+.eda-mark { flex: none; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center;
+  color: #fff; background: linear-gradient(160deg, #3b7bf6, #2b5fd0); font-size: 11px; font-weight: 700; letter-spacing: .02em; }
+.eda-title { min-width: 0; flex: 1; }
+.eda-title b { display: block; font-size: 13px; font-weight: 600; letter-spacing: .01em; }
+.eda-title span { display: block; font-size: 10.5px; color: var(--eda-fg-3); font-family: var(--eda-mono); }
+.eda-iconbtn { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px;
+  border: 1px solid transparent; background: transparent; color: var(--eda-fg-3); cursor: pointer; font-size: 12px; line-height: 1; }
+.eda-iconbtn:hover { color: var(--eda-fg); background: var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,.12)); }
+
+.eda-scroll { flex: 1 1 0; min-height: 0; overflow-y: auto; padding: 14px 14px 18px;
+  display: flex; flex-direction: column; gap: 12px; scrollbar-width: thin; }
+.eda-scroll::-webkit-scrollbar { width: 9px; }
+.eda-scroll::-webkit-scrollbar-thumb { background: var(--eda-line); border-radius: 9px; border: 2px solid transparent; background-clip: content-box; }
+
+.eda-card { border: 1px solid var(--eda-line); border-radius: 10px; background: var(--eda-bg-soft); padding: 12px 13px; }
+.eda-card-title { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
+  color: var(--eda-fg-3); margin: 0 0 10px; }
+.eda-note { font-size: 11.5px; color: var(--eda-fg-2); margin: 9px 0 0; line-height: 1.6; }
+.eda-muted { font-size: 11px; color: var(--eda-fg-3); }
+.eda-mono { font-family: var(--eda-mono); }
+
+/* status row */
+.eda-state { display: flex; align-items: center; gap: 9px; }
+.eda-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--eda-fg-3); }
+.eda-dot.on { background: var(--eda-ok); box-shadow: 0 0 0 3px rgba(34,197,94,.16); }
+.eda-dot.off { background: var(--eda-warn); }
+.eda-dot.wait { background: var(--eda-fg-3); animation: edaPulse 1.3s ease-in-out infinite; }
+@keyframes edaPulse { 0%,100% { opacity: .4 } 50% { opacity: 1 } }
+.eda-state b { font-size: 12.5px; font-weight: 600; }
+.eda-state small { font-family: var(--eda-mono); font-size: 10.5px; color: var(--eda-fg-3); margin-left: 7px; }
+
+.eda-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
+.eda-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
+  border: 1px solid var(--eda-line); border-radius: 8px; padding: 5px 11px; background: transparent;
+  color: var(--eda-fg); font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer;
+  transition: background .12s ease, border-color .12s ease, opacity .12s ease; }
+.eda-btn:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,.12)); }
+.eda-btn:disabled { opacity: .45; cursor: default; }
+.eda-btn.primary { background: var(--eda-accent); border-color: transparent; color: #fff; }
+.eda-btn.primary:hover:not(:disabled) { background: #3f80f5; }
+.eda-btn.big { width: 100%; padding: 8px 12px; font-size: 12.5px; }
+.eda-btn.tiny { padding: 2px 8px; font-size: 10.5px; font-weight: 500; }
+.eda-link { color: var(--eda-accent); text-decoration: none; font-size: 11.5px; }
+.eda-link:hover { text-decoration: underline; }
+
+/* connected CTA */
+.eda-cta { display: flex; align-items: center; gap: 10px; margin-top: 11px; padding: 9px 11px;
+  border: 1px solid color-mix(in srgb, var(--eda-accent) 34%, transparent); border-radius: 9px;
+  background: color-mix(in srgb, var(--eda-accent) 8%, transparent); cursor: pointer; }
+.eda-cta:hover { background: color-mix(in srgb, var(--eda-accent) 13%, transparent); }
+.eda-cta-t { min-width: 0; flex: 1; }
+.eda-cta-t i { display: block; font-style: normal; font-size: 10px; color: var(--eda-fg-3); letter-spacing: .04em; }
+.eda-cta-t b { font-size: 12.5px; font-weight: 600; color: var(--eda-accent); }
+.eda-cta-c { flex: none; font-size: 10.5px; color: var(--eda-fg-3); }
+.eda-cta.ok .eda-cta-c { color: var(--eda-ok); }
+
+/* guide */
+.eda-steps { display: flex; flex-direction: column; gap: 10px; }
+.eda-step { display: flex; gap: 10px; }
+.eda-step-no { flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
+  font-family: var(--eda-mono); font-size: 10px; color: var(--eda-fg-3); border: 1px solid var(--eda-line); margin-top: 1px; }
+.eda-step b { display: block; font-size: 12px; font-weight: 600; }
+.eda-step p { margin: 2px 0 0; font-size: 11px; color: var(--eda-fg-3); line-height: 1.55; }
+
+/* timeline */
+.eda-tl-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
+.eda-tl-head .eda-card-title { flex: 1; margin: 0; }
+.eda-select { font: inherit; font-size: 10.5px; font-family: var(--eda-mono); color: var(--eda-fg-2);
+  background: var(--eda-bg-base); border: 1px solid var(--eda-line); border-radius: 6px; padding: 2px 5px; max-width: 132px; }
+.eda-tl { position: relative; margin: 6px 0 0; }
+.eda-row { position: relative; display: flex; gap: 10px; padding: 8px 0 8px 2px; cursor: pointer;
+  border-bottom: 1px solid var(--eda-line-soft); }
+.eda-row:last-child { border-bottom: 0; }
+.eda-row:hover { background: color-mix(in srgb, var(--eda-fg) 4%, transparent); }
+.eda-row-dot { flex: none; width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: var(--eda-fg-3); position: relative; z-index: 1; }
+.eda-row.ok .eda-row-dot { background: var(--eda-ok); }
+.eda-row.err .eda-row-dot { background: var(--eda-err); }
+.eda-row.pend .eda-row-dot { background: var(--eda-warn); animation: edaPulse 1s ease-in-out infinite; }
+.eda-row-body { min-width: 0; flex: 1; }
+.eda-row-line { display: flex; align-items: baseline; gap: 8px; }
+.eda-seq { flex: none; font-family: var(--eda-mono); font-size: 10px; color: var(--eda-fg-3); }
+.eda-row-name { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.eda-row-meta { flex: none; font-family: var(--eda-mono); font-size: 10px; color: var(--eda-fg-3); }
+.eda-row-meta .eda-pend { color: var(--eda-warn); }
+.eda-row-code, .eda-row-out { margin-top: 3px; font-family: var(--eda-mono); font-size: 10.5px; color: var(--eda-fg-3);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.eda-row-out.err { color: var(--eda-err); }
+.eda-row-full { margin-top: 7px; padding: 8px 9px; border-radius: 8px; background: var(--eda-bg-base);
+  border: 1px solid var(--eda-line-soft); font-family: var(--eda-mono); font-size: 10.5px; line-height: 1.6;
+  color: var(--eda-fg-2); white-space: pre-wrap; word-break: break-word; max-height: 260px; overflow: auto; }
+.eda-row-full i { display: block; font-style: normal; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
+  color: var(--eda-fg-3); margin: 6px 0 2px; }
+.eda-row-full i:first-child { margin-top: 0; }
+.eda-empty { font-size: 11.5px; color: var(--eda-fg-3); line-height: 1.6; }
+.eda-hints { margin-top: 9px; display: flex; flex-direction: column; gap: 5px; }
+.eda-hint { display: flex; gap: 7px; font-size: 11px; color: var(--eda-fg-2); }
+.eda-hint s { text-decoration: none; color: var(--eda-fg-3); }
+.eda-tl-foot { margin-top: 7px; font-size: 10.5px; color: var(--eda-fg-3); }
+
+.eda-foot { flex: none; padding: 9px 14px; border-top: 1px solid var(--eda-line);
+  font-family: var(--eda-mono); font-size: 10px; color: var(--eda-fg-3); text-align: center; }
+
+/* header pill (0.2 entry point) */
+.eda-pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px;
+  border: 1px solid var(--eda-line); border-radius: 999px; background: transparent; color: inherit;
+  font: inherit; font-size: 11.5px; cursor: pointer; transition: background .12s ease; }
+.eda-pill:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,.12)); }
+.eda-pill[data-active="true"] { border-color: color-mix(in srgb, var(--eda-accent) 46%, transparent);
+  background: color-mix(in srgb, var(--eda-accent) 12%, transparent); }
+.eda-pill .eda-dot { width: 6px; height: 6px; }
+.eda-pill[hidden] { display: none !important; }
+
+/* update hint (top bar) — one quiet warning-tinted pill, click to copy */
+.eda-update { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px;
+  border: 1px solid color-mix(in srgb, var(--eda-warn) 42%, transparent); border-radius: 999px;
+  background: color-mix(in srgb, var(--eda-warn) 10%, transparent); color: var(--eda-warn);
+  font: inherit; font-size: 10.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
+.eda-update:hover { background: color-mix(in srgb, var(--eda-warn) 18%, transparent); }
+
+/* 0.1.x sidebar entry */
+[data-dsh-eda-entry] { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 12px; margin: 2px 0;
+  border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit; cursor: pointer; text-align: left; }
 [data-dsh-eda-entry]:hover { background: rgba(128,128,128,.14); }
 [data-dsh-eda-entry][data-active] { background: rgba(128,128,128,.22); }
-[data-dsh-eda-entry] .eda-entry-icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex: none; }
 [data-dsh-eda-entry] .eda-entry-label { font-size: 13px; line-height: 1.2; opacity: .92; }
-
-.dsh-eda-view { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 94vw); z-index: 9999; }
-.dsh-eda-view[hidden] { display: none !important; }
-.dsh-eda-panel {
-  position: absolute; inset: 0; background: light-dark(#fbfbfc, #121417);
-  color: light-dark(#1c1f24, #e3e6ea);
-  border-left: 1px solid light-dark(rgba(0,0,0,.09), rgba(255,255,255,.10));
-  font: 13px/1.6 -apple-system, "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
-  color-scheme: light dark;
-  display: flex; flex-direction: column;
-}
-.eda-panel { display: flex; flex-direction: column; height: 100%; min-height: 0; }
-
-.eda-head {
-  flex: none; display: flex; align-items: center; gap: 10px;
-  padding: 13px 16px; border-bottom: 1px solid light-dark(rgba(0,0,0,.08), rgba(255,255,255,.09));
-}
-.eda-head .eda-mark { width: 26px; height: 26px; border-radius: 6px; flex: none; background: #2563eb; color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
-.eda-head .eda-tt { min-width: 0; flex: 1; }
-.eda-head h1 { font-size: 14px; font-weight: 700; margin: 0; line-height: 1.3; }
-.eda-head .eda-sub { font-size: 11px; opacity: .55; margin: 0; }
-.eda-close { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 15px; line-height: 1; padding: 5px 8px; border-radius: 6px; opacity: .6; }
-.eda-close:hover { opacity: 1; background: light-dark(rgba(0,0,0,.06), rgba(255,255,255,.08)); }
-
-.eda-scroll { flex: 1 1 0; min-height: 0; overflow-y: auto; padding: 13px 16px 18px; display: flex; flex-direction: column; gap: 12px; }
-
-.eda-card { border: 1px solid light-dark(rgba(0,0,0,.09), rgba(255,255,255,.10)); border-radius: 10px; padding: 12px 14px; background: light-dark(#ffffff, #17191d); }
-.eda-card-title { font-size: 12px; font-weight: 600; opacity: .75; margin: 0 0 8px; }
-
-.eda-note { font-size: 11.5px; opacity: .62; margin: 8px 0 0; line-height: 1.6; }
-.eda-muted { font-size: 11px; opacity: .5; }
-
-.eda-status { display: flex; align-items: center; gap: 8px; }
-.eda-status .eda-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
-.eda-status .eda-dot.on { background: #16a34a; }
-.eda-status .eda-dot.off { background: #d97706; }
-.eda-status .eda-dot.wait { background: #9ca3af; animation: edaPulse 1.2s ease-in-out infinite; }
-.eda-status .eda-txt { font-size: 13px; font-weight: 600; }
-.eda-status .eda-txt small { font-weight: 400; opacity: .55; margin-left: 6px; }
-@keyframes edaPulse { 0%,100% { opacity: .45; } 50% { opacity: 1; } }
-
-.eda-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
-.eda-btn {
-  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
-  border: 1px solid transparent; border-radius: 8px; padding: 6px 12px;
-  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
-  transition: background .12s ease, border-color .12s ease;
-}
-.eda-btn.primary { background: #2563eb; color: #fff; }
-.eda-btn.primary:hover { background: #1d4ed8; }
-.eda-btn.primary:disabled { opacity: .5; cursor: default; }
-.eda-btn.ghost { background: transparent; border-color: light-dark(rgba(0,0,0,.14), rgba(255,255,255,.16)); color: inherit; }
-.eda-btn.ghost:hover { background: light-dark(rgba(0,0,0,.04), rgba(255,255,255,.06)); }
-.eda-btn.ghost:disabled { opacity: .45; cursor: default; }
-.eda-btn.big { width: 100%; padding: 8px 13px; font-size: 13px; }
-.eda-link { color: #2563eb; text-decoration: none; font-size: 12px; }
-.eda-link:hover { text-decoration: underline; }
-
-/* connect wizard (collapsed by default, compact) */
-.eda-steps { display: flex; flex-direction: column; gap: 9px; margin-top: 2px; }
-.eda-step { display: flex; gap: 9px; }
-.eda-step .eda-step-no { width: 19px; height: 19px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 10.5px; font-weight: 700; background: light-dark(#eef2f7, #24272c); opacity: .85; }
-.eda-step .eda-step-body { min-width: 0; flex: 1; }
-.eda-step .eda-step-name { font-size: 12.5px; font-weight: 600; }
-.eda-step .eda-step-hint { font-size: 11px; opacity: .58; margin-top: 1px; line-height: 1.5; }
-.eda-step .eda-step-action { margin-top: 5px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
-.eda-step .eda-step-result { font-size: 11.5px; opacity: .7; }
-
-/* activity monitor (main) */
-.eda-act { display: flex; flex-direction: column; gap: 0; }
-.eda-act-item { display: flex; gap: 9px; padding: 9px 0; border-bottom: 1px solid light-dark(rgba(0,0,0,.05), rgba(255,255,255,.06)); cursor: pointer; }
-.eda-act-item:hover { background: light-dark(rgba(0,0,0,.03), rgba(255,255,255,.03)); }
-.eda-act-item:last-child { border-bottom: 0; }
-.eda-act-item .eda-act-dot { flex: none; margin-top: 5px; width: 7px; height: 7px; border-radius: 50%; background: #9ca3af; }
-.eda-act-item.ok .eda-act-dot { background: #16a34a; }
-.eda-act-item.err .eda-act-dot { background: #dc2626; }
-.eda-act-item.pend .eda-act-dot { background: #f59e0b; animation: edaPulse 1s ease-in-out infinite; }
-.eda-act-item .eda-act-body { min-width: 0; flex: 1; }
-.eda-act-item .eda-act-line { display: flex; align-items: baseline; gap: 8px; }
-.eda-act-item .eda-act-seq { font-family: ui-monospace, Consolas, monospace; font-size: 10px; opacity: .45; flex: none; }
-.eda-act-item .eda-act-name { font-size: 12.5px; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.eda-act-item .eda-act-meta { font-size: 10.5px; opacity: .5; }
-.eda-revoke { padding: 2px 8px !important; font-size: 10px !important; }
-.eda-hints { display: flex; flex-direction: column; gap: 5px; margin-top: 2px; }
-.eda-hint { font-size: 11px; opacity: .68; }
-.eda-act-item .eda-act-meta .eda-pend { color: #f59e0b; opacity: 1; font-weight: 600; }
-.eda-act-item .eda-act-code { font-family: ui-monospace, Consolas, monospace; font-size: 10.5px; opacity: .55; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.eda-act-item .eda-act-out { font-size: 11px; opacity: .65; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.eda-act-item .eda-act-out.err { color: #dc2626; opacity: .9; }
-.eda-act-item .eda-act-full {
-  white-space: pre-wrap; word-break: break-all; font-family: ui-monospace, Consolas, monospace;
-  font-size: 10.5px; line-height: 1.55; opacity: .8; margin-top: 5px; padding: 7px 9px;
-  background: light-dark(rgba(0,0,0,.045), rgba(255,255,255,.05)); border-radius: 7px;
-  max-height: 240px; overflow: auto;
-}
-.eda-act-item .eda-act-full .eda-act-full-label { font-family: inherit; font-size: 10px; opacity: .5; margin: 0 0 2px; }
-.eda-act-empty { font-size: 11.5px; opacity: .5; padding: 6px 0; }
-
-/* activity header row: title + session switcher */
-.eda-act-head { display: flex; align-items: center; gap: 8px; }
-.eda-act-head .eda-card-title { flex: 1; margin: 0; }
-.eda-sess {
-  font: inherit; font-size: 10.5px; border: 1px solid light-dark(rgba(0,0,0,.14), rgba(255,255,255,.16));
-  border-radius: 6px; background: transparent; color: inherit; padding: 2px 6px; max-width: 130px; cursor: pointer;
-}
-.eda-act-hint { font-size: 10.5px; opacity: .5; margin: 6px 0 0; }
-
-/* 醒目对话入口 (connected CTA) */
-.eda-cta {
-  display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 9px 12px;
-  border: 1px solid rgba(37,99,235,.35); border-radius: 10px; cursor: pointer;
-  background: linear-gradient(180deg, rgba(37,99,235,.10), rgba(37,99,235,.03));
-}
-.eda-cta:hover { background: rgba(37,99,235,.14); }
-.eda-cta .eda-cta-bubble { font-size: 16px; flex: none; }
-.eda-cta .eda-cta-text { min-width: 0; flex: 1; }
-.eda-cta .eda-cta-title { font-size: 10.5px; opacity: .6; }
-.eda-cta .eda-cta-phrase { font-family: inherit; font-size: 12.5px; font-weight: 700; color: #2563eb; }
-.eda-cta .eda-cta-copy { flex: none; font-size: 10.5px; opacity: .55; }
-.eda-cta.ok .eda-cta-copy { color: #16a34a; opacity: 1; }
-
-/* offline export (footer, small) */
-.eda-prompt textarea {
-  width: 100%; box-sizing: border-box; resize: vertical; min-height: 56px; border-radius: 8px;
-  border: 1px solid light-dark(rgba(0,0,0,.14), rgba(255,255,255,.16));
-  background: light-dark(#fafafa, #121317); color: inherit; font: inherit; font-size: 12px; line-height: 1.6;
-  padding: 8px 10px; outline: none;
-}
-.eda-prompt textarea:focus { border-color: #2563eb; }
-.eda-prompt textarea::placeholder { opacity: .45; }
-.eda-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
-.eda-chip { border: 1px solid light-dark(rgba(0,0,0,.11), rgba(255,255,255,.13)); border-radius: 999px; padding: 3px 9px; font-size: 11px; cursor: pointer; color: inherit; background: transparent; }
-.eda-chip:hover { border-color: rgba(37,99,235,.55); }
-
-.eda-foot { font-size: 11px; opacity: .5; text-align: center; margin: 2px 0 0; }
 `;
 		//#endregion
 
 		const API_BASE = "/api/dsh-eda";
+		/** The one upgrade command the update pill copies. */
+		const UPDATE_CMD = "dsh plugin --profile desktop add @windypro-rourou/dsh-eda@latest";
 		const LINKS = {
 			editor: "https://pro.lceda.cn/editor",
 			ext: "https://jlc-ext.com/item/oshwhub/run-api-gateway",
-			skill: "https://github.com/easyeda/easyeda-api-skill",
 		};
-
-		//#region data
 		const CONNECT_STEPS = [
-			{ id: 0, name: "一键安装官方桥", hint: "官方 easyeda-api-skill → ~/.dsh/eda/bridge/（离线依赖，无需 npm）。" },
-			{ id: 1, name: "启动官方桥", hint: "Bridge Server 监听 127.0.0.1:49620-49629，自动探测。" },
-			{ id: 2, name: "网页版装扩展 Run API Gateway", hint: "pro.lceda.cn/editor →「高级」→「扩展管理器」→ 搜索安装；「已安装」里开「外部交互」+「显示在顶部菜单」。" },
-			{ id: 3, name: "验证", hint: "刷新编辑器页面；面板状态变绿 = 已连上你的云画板。" },
+			{ n: 1, t: "一键安装官方桥", d: "官方 easyeda-api-skill → 本机 ~/.dsh/eda/bridge/（离线依赖，无需 npm）。" },
+			{ n: 2, t: "启动官方桥", d: "Bridge Server 监听 127.0.0.1:49620-49629，插件自动探测。" },
+			{ n: 3, t: "网页版装扩展 Run API Gateway", d: "编辑器 →「高级」→「扩展管理器」→ 安装；再开「外部交互」+「显示在顶部菜单」。" },
+			{ n: 4, t: "验证", d: "刷新编辑器页面；状态点变绿 = 已连上你的云画板。" },
 		];
+		const HINTS = [
+			"放置任意大类元件（R/C/L/二极管/LED/MCU…）并框内定位",
+			"引脚级连线 + VCC/GND 网络标志",
+			"原理图 / PCB 的 DRC、网表、BOM 导出",
+			"PCB 元件 / 过孔 / 走线（含底层铜）+ 现场截图",
+			"随时「紧急保存」到本地并留动作日志",
+		];
+		const ICON_EDA = "M3 3.6h7.2l2.8 2.8v6h-10z M10.2 3.6v2.8h2.8 M5 8.4h3 M5 10.4h2";
+
+		//#region store
+		/** Tiny external store: panel open/closed, shared by the pill and the overlay. */
+		function PanelStore() {
+			const listeners = new Set();
+			let open = false;
+			this.get = () => open;
+			this.set = (v) => { const next = !!v; if (next === open) return; open = next; for (const fn of listeners) fn(); };
+			this.toggle = () => this.set(!open);
+			this.subscribe = (fn) => { listeners.add(fn); return () => listeners.delete(fn); };
+		}
+		function useStore(store) {
+			const [v, setV] = useState(store.get());
+			useEffect(() => store.subscribe(() => setV(store.get())), [store]);
+			return v;
+		}
 		//#endregion
 
 		//#region hooks
@@ -192,12 +255,10 @@ window.__ModuleLoader__.load({
 			const [error, setError] = useState(false);
 			useEffect(() => {
 				let alive = true;
-				const load = () => {
-					fetch(API_BASE + "/status")
-						.then((r) => (r.ok ? r.json() : Promise.reject(r.status)))
-						.then((b) => { if (alive) { setStatus(b); setError(false); } })
-						.catch(() => { if (alive) { setStatus(null); setError(true); } });
-				};
+				const load = () => fetch(API_BASE + "/status")
+					.then((r) => (r.ok ? r.json() : Promise.reject(r.status)))
+					.then((b) => { if (alive) { setStatus(b); setError(false); } })
+					.catch(() => { if (alive) { setStatus(null); setError(true); } });
 				load();
 				const t = setInterval(load, 4000);
 				return () => { alive = false; clearInterval(t); };
@@ -205,14 +266,8 @@ window.__ModuleLoader__.load({
 			return [status, error];
 		}
 
-		/**
-		 * Poll the agent-activity feed (what the conversation's agent is doing
-		 * through the official API right now). `pinnedSid` = '' means "follow
-		 * the freshest session" (the panel's default for 仅当前会话).
-		 */
-		function useActivity() {
-			const [feed, setFeed] = useState({ activities: [], sessions: [], currentSid: '', error: false });
-			const [pinnedSid, setPinnedSid] = useState("");
+		function useActivity(pinnedSid) {
+			const [feed, setFeed] = useState({ activities: [], sessions: [], currentSid: "", error: false });
 			useEffect(() => {
 				let alive = true;
 				const load = () => {
@@ -221,7 +276,12 @@ window.__ModuleLoader__.load({
 						.then((r) => (r.ok ? r.json() : Promise.reject(r.status)))
 						.then((b) => {
 							if (!alive) return;
-							setFeed({ activities: Array.isArray(b.activities) ? b.activities : [], sessions: Array.isArray(b.sessions) ? b.sessions : [], currentSid: b.currentSid ?? "", error: false });
+							setFeed({
+								activities: Array.isArray(b.activities) ? b.activities : [],
+								sessions: Array.isArray(b.sessions) ? b.sessions : [],
+								currentSid: b.currentSid ?? "",
+								error: false,
+							});
 						})
 						.catch(() => { if (alive) setFeed((prev) => ({ ...prev, error: true })); });
 				};
@@ -229,340 +289,407 @@ window.__ModuleLoader__.load({
 				const t = setInterval(load, 3000);
 				return () => { alive = false; clearInterval(t); };
 			}, [pinnedSid]);
-			return { ...feed, setSid: setPinnedSid, pinned: pinnedSid };
+			return feed;
 		}
 		//#endregion
 
 		//#region components
-		/** Compact connection card: state + one-click platform actions + dialog CTA. */
-		function ConnectCard({ status, error, onInstall, onStartBridge, installState, bridgeState }) {
+		/** Brand mark: host icon when available, else a two-stroke chip glyph. */
+		function Mark() {
+			const Icon = dsIcon("IconBoardOutline16") || dsIcon("IconComponentOutline16");
+			if (Icon) return h("span", { className: "eda-mark" }, h(Icon, null));
+			return h("span", { className: "eda-mark" }, "EDA");
+		}
+
+		function SendIcon() {
+			return h("svg", { width: 13, height: 13, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.3, "aria-hidden": "true" },
+				h("path", { d: "M2.6 3.4l10.8 4.6-10.8 4.6 1.7-4.6z", strokeLinejoin: "round" }));
+		}
+
+		/**
+		 * Compact update hint (top bar): rendered ONLY when /status reports a
+		 * newer published release. One click copies the upgrade command; quiet,
+		 * no modal, no badge hunting. Exported for the bundle runtime test.
+		 */
+		function UpdatePill({ status }) {
+			const [copied, setCopied] = useState(false);
+			if (status?.updateAvailable !== true) return null;
+			const latest = typeof status.latestVersion === "string" ? status.latestVersion : "";
+			if (latest === "") return null;
+			const copy = () => {
+				try { navigator.clipboard?.writeText(UPDATE_CMD); } catch (e) { /* clipboard unavailable */ }
+				setCopied(true);
+				setTimeout(() => setCopied(false), 1600);
+			};
+			return h("button", {
+				type: "button", className: "eda-update", onClick: copy,
+				title: "点击复制升级命令：" + UPDATE_CMD,
+			}, copied ? "已复制 ✓" : "v" + latest + " 可更新");
+		}
+
+		/** Header pill — the 0.2 entry point (slot-owned header utilities). */
+		function HeaderPill({ store }) {
+			const open = useStore(store);
+			const [status] = useStatus();
+			const ready = status?.connected === true;
+			const cls = "eda-pill";
+			const inner = [
+				h("span", { className: "eda-dot " + (status === null ? "wait" : ready ? "on" : "off"), key: "d" }),
+				h("span", { key: "t" }, "嘉立创 EDA"),
+			];
+			if (dsButton) {
+				return h(dsButton, {
+					appearance: "ghost", size: "small", "data-active": open ? "true" : "false",
+					onClick: () => store.toggle(), title: "嘉立创 EDA 助手", className: cls,
+				}, inner);
+			}
+			return h("button", {
+				type: "button", className: cls, "data-active": open ? "true" : "false",
+				onClick: () => store.toggle(), title: "嘉立创 EDA 助手",
+			}, inner);
+		}
+
+		/**
+		 * Connection card: one status line, then the three platform actions, then
+		 * (when connected) the copy-the-prompt CTA. Errors stay inline and quiet.
+		 */
+		function ConnectCard({ status, error, install, bridge, onInstall, onStart }) {
 			const ready = status?.connected === true;
 			const [copied, setCopied] = useState(false);
-			const dot = status === null ? (error ? "off" : "wait") : (ready ? "on" : "off");
-			const state = status === null ? (error ? "状态服务未响应" : "检测中…") : (ready ? "已连接 · " + (status.port ? "127.0.0.1:" + status.port : "") : "未连接");
-			const win = status?.health?.match(/edaWindowCount:(\d+)/)?.[1] ?? null;
 			const inst = status?.bridgeInstalled === true;
-			const copyPrompt = () => {
+			const dot = status === null ? (error ? "off" : "wait") : ready ? "on" : "off";
+			const label = status === null ? (error ? "状态服务未响应" : "检测中…") : ready ? "已连接" : "未连接";
+			const port = ready && status?.port ? "127.0.0.1:" + status.port : "";
+			const win = status?.health?.match(/edaWindowCount:(\d+)/)?.[1];
+			const copy = () => {
 				const text = "嘉立创EDA，启动！帮我画一个 LED 点亮电路";
-				try { navigator.clipboard?.writeText(text); } catch { /* clipboard may be unavailable */ }
+				try { navigator.clipboard?.writeText(text); } catch (e) { /* clipboard unavailable */ }
 				setCopied(true);
 				setTimeout(() => setCopied(false), 1600);
 			};
 			return h("div", { className: "eda-card" },
-				h("div", { className: "eda-status" },
+				h("div", { className: "eda-state" },
 					h("span", { className: "eda-dot " + dot }),
-					h("div", { className: "eda-txt" }, state, win !== null ? h("small", null, "窗口 " + win) : null)),
+					h("b", null, label),
+					h("small", null, [port, win !== undefined ? "窗口 " + win : ""].filter(Boolean).join(" · "))),
 				h("div", { className: "eda-actions" },
 					h("button", {
-						className: "eda-btn " + (inst ? "ghost" : "primary"),
-						disabled: inst || installState?.busy,
-						onClick: onInstall,
-						title: inst ? "官方桥已安装（随本机持久）" : "",
-					}, inst ? "官方桥已安装 ✓" : (installState?.busy ? "安装中…" : "一键安装官方桥")),
-					h("button", { className: "eda-btn ghost", disabled: bridgeState?.busy, onClick: onStartBridge }, bridgeState?.busy ? "启动中…" : "启动官方桥"),
+						className: "eda-btn " + (inst ? "" : "primary"),
+						disabled: inst || install?.busy, onClick: onInstall,
+						title: inst ? "官方桥已安装（随本机持久）" : "下载官方 easyeda-api-skill 到本机",
+					}, inst ? "官方桥已装 ✓" : install?.busy ? "安装中…" : "一键安装官方桥"),
+					h("button", { className: "eda-btn", disabled: bridge?.busy, onClick: onStart },
+						bridge?.busy ? "启动中…" : "启动桥"),
 					h("a", { className: "eda-link", href: LINKS.editor, target: "_blank", rel: "noreferrer" }, "打开编辑器"),
 					h("a", { className: "eda-link", href: LINKS.ext, target: "_blank", rel: "noreferrer" }, "扩展直达")),
 				ready
-					? h("div", { className: "eda-cta" + (copied ? " ok" : ""), onClick: copyPrompt, title: "点击复制到剪贴板，然后在对话里发送" },
-						h("span", { className: "eda-cta-bubble" }, "💬"),
-						h("div", { className: "eda-cta-text" },
-							h("div", { className: "eda-cta-title" }, "去对话里说："),
-							h("span", { className: "eda-cta-phrase" }, "「嘉立创EDA，启动！」")),
-						h("span", { className: "eda-cta-copy" }, copied ? "已复制 ✓" : "点击复制"))
-					: h("p", { className: "eda-note", style: { margin: "8px 0 0" } }, "连接好画板后，在对话里描述需求即可实时生成；下方「导出离线版」仅作兜底。"),
-				installState?.result ? h("p", { className: "eda-note" }, installState.result) : null,
-				bridgeState?.result ? h("p", { className: "eda-note" }, bridgeState.result) : null,
-			);
+					? h("div", { className: "eda-cta" + (copied ? " ok" : ""), onClick: copy,
+						title: "点击复制，然后粘贴到对话里发送" },
+						h(SendIcon, null),
+						h("span", { className: "eda-cta-t" },
+							h("i", null, "去对话里说"),
+							h("b", null, "「嘉立创EDA，启动！」")),
+						h("span", { className: "eda-cta-c" }, copied ? "已复制 ✓" : "复制"))
+					: h("p", { className: "eda-note" }, "连上画板后，在对话里描述需求即可实时生成；离线导出仅作兜底。"),
+				install?.result ? h("p", { className: "eda-note" }, install.result) : null,
+				bridge?.result ? h("p", { className: "eda-note" }, bridge.result) : null);
 		}
 
-		/** Collapsible connect guide (compact). */
-		function ConnectWizard({ open, setOpen }) {
+		function ConnectGuide({ open, setOpen }) {
 			if (!open) {
-				return h("button", { className: "eda-btn ghost", style: { width: "100%" }, onClick: () => setOpen(true) }, "连接教程（4 步 · 网页版）");
+				return h("button", { className: "eda-btn", style: { width: "100%" }, onClick: () => setOpen(true) },
+					"连接教程 · 4 步（网页版官方栈）");
 			}
 			return h("div", { className: "eda-card" },
-				h("div", { className: "eda-card-title" }, "连接教程（官方栈 · 网页版）"),
+				h("div", { className: "eda-card-title" }, "连接教程"),
 				h("div", { className: "eda-steps" }, CONNECT_STEPS.map((s) =>
-					h("div", { className: "eda-step", key: s.id },
-						h("div", { className: "eda-step-no" }, String(s.id + 1)),
-						h("div", { className: "eda-step-body" },
-							h("div", { className: "eda-step-name" }, s.name),
-							h("div", { className: "eda-step-hint" }, s.hint))))),
-				h("p", { className: "eda-note", style: { margin: "10px 0 0" } },
-					[LINKS.editor, LINKS.ext].map((l) => h("a", { className: "eda-link", href: l, target: "_blank", rel: "noreferrer", key: l, style: { marginRight: 12 } }, l)),
-					h("button", { className: "eda-link", onClick: () => setOpen(false), style: { border: 0, background: "transparent", cursor: "pointer", padding: 0 } }, "收起")));
+					h("div", { className: "eda-step", key: s.n },
+						h("span", { className: "eda-step-no" }, String(s.n)),
+						h("div", null, h("b", null, s.t), h("p", null, s.d))))),
+				h("p", { className: "eda-note" },
+					h("a", { className: "eda-link", href: LINKS.editor, target: "_blank", rel: "noreferrer", style: { marginRight: 12 } }, "编辑器"),
+					h("a", { className: "eda-link", href: LINKS.ext, target: "_blank", rel: "noreferrer", style: { marginRight: 12 } }, "扩展"),
+					h("button", { className: "eda-link", onClick: () => setOpen(false),
+						style: { border: 0, background: "transparent", cursor: "pointer", padding: 0, font: "inherit" } }, "收起")));
 		}
 
 		/**
-		 * The monitor: RECORD-STYLE timeline (参考 DSH 轨迹) — every step is
-		 * numbered (persisted on disk, so it is never empty), each entry can be
-		 * 撤回 (deletes the primitives that step created) or expanded; the card
-		 * has 清空记录. When nothing has happened yet, a static capability
-		 * preview keeps the panel informative (not blank).
+		 * Record-style timeline (persisted on disk → never blank). Each step is
+		 * numbered, expandable, and revocable while the bridge is connected.
 		 */
-		function ActivityMonitor({ activities, sessions, currentSid, setSid, pinned, error, connected, onRevoke, busyId, onClear, clearing }) {
+		function Timeline({ feed, pinned, setSid, connected, onRevoke, busyId, onClear, clearing, note }) {
 			const [expanded, setExpanded] = useState(() => new Set());
-			const toggle = (id) => {
-				setExpanded((prev) => {
-					const next = new Set(prev);
-					if (next.has(id)) next.delete(id); else next.add(id);
-					return next;
-				});
-			};
-			const list = Array.isArray(activities) ? activities : [];
-			const sids = Array.isArray(sessions) ? sessions : [];
-			const hasMulti = sids.length > 1;
+			const toggle = (id) => setExpanded((prev) => {
+				const next = new Set(prev);
+				if (next.has(id)) next.delete(id); else next.add(id);
+				return next;
+			});
+			const list = feed.activities;
+			const sids = feed.sessions;
+			const multi = sids.length > 1;
 			return h("div", { className: "eda-card" },
-				h("div", { className: "eda-act-head" },
-					h("div", { className: "eda-card-title" }, "Agent 正在使用官方 API"),
-					hasMulti
+				h("div", { className: "eda-tl-head" },
+					h("div", { className: "eda-card-title" }, "Agent · 官方 API"),
+					multi
 						? h("select", {
-							className: "eda-sess",
-							value: pinned ?? "",
-							onChange: (e) => setSid(e.target.value),
+							className: "eda-select", value: pinned ?? "", onChange: (e) => setSid(e.target.value),
 							title: "切换会话（默认跟随最新）",
 						},
-							h("option", { value: "" }, "跟随最新会话"),
-							sids.map((s) => h("option", { value: s.sid ?? "", key: (s.sid || "(platform)") + s.lastTs }, s.label ?? "会话")))
-						: (currentSid && list.length > 0 ? h("span", { className: "eda-sess", style: { cursor: "default" } }, "当前会话") : null),
+							h("option", { value: "" }, "跟随最新"),
+							sids.map((s) => h("option", { value: s.sid ?? "", key: (s.sid || "platform") + s.lastTs }, s.label ?? "会话")))
+						: null,
 					list.length > 0
-						? h("button", { className: "eda-btn ghost", style: { padding: "3px 9px", fontSize: "10.5px" }, disabled: clearing, onClick: onClear, title: "清空时间线（含磁盘历史）" }, clearing ? "清空中…" : "清空记录")
+						? h("button", { className: "eda-btn tiny", disabled: clearing, onClick: onClear, title: "清空时间线（含磁盘历史）" },
+							clearing ? "清空…" : "清空")
 						: null),
 				list.length === 0
 					? h("div", null,
-						h("div", { className: "eda-act-empty" }, error
-							? "实时活动流暂不可用（服务端新模块待重启后启用）；重启后这里会持续记录 agent 的每一步。"
-							: "还没有记录——历史会保存在 ~/.dsh/eda/activity.jsonl，面板永不空白。你可以让 agent："),
-						h("div", { className: "eda-hints" },
-							["放置任意大类元件（R/C/L/二极管/LED/MCU…）并框内定位", "引脚级连线 + VCC/GND 网络标志", "原理图/PCB 的 DRC、网表、BOM 导出", "PCB 元件/过孔/走线 + 现场截图", "随时「紧急保存」到本地并留动作日志"]
-								.map((t, i) => h("div", { className: "eda-hint", key: i }, "• " + t))))
+						h("div", { className: "eda-empty" }, feed.error
+							? "实时活动流未就绪（服务端模块未加载）。"
+							: "还没有记录。历史写入本机 activity.jsonl，面板不会空着。可以让 agent："),
+						h("div", { className: "eda-hints" }, HINTS.map((t, i) =>
+							h("div", { className: "eda-hint", key: i }, h("s", null, "·"), h("span", null, t)))))
 					: h("div", null,
-						h("div", { className: "eda-act" }, list.slice(0, 50).map((a, i) => {
-							const isPend = a.status === 'pending';
-							const isOpen = expanded.has(a.id);
-							const t = (a.ts ?? "").slice(11, 19);
-							const revokable = connected && !isPend && Array.isArray(a.revoke?.created) && a.revoke.created.length > 0;
+						h("div", { className: "eda-tl" }, list.slice(0, 60).map((a, i) => {
+							const pend = a.status === "pending";
+							const open = expanded.has(a.id);
+							const revokable = connected && !pend && Array.isArray(a.revoke?.created) && a.revoke.created.length > 0;
+							const time = String(a.ts ?? "").slice(11, 19);
+							const meta = pend
+								? h("span", { className: "eda-pend" }, "执行中…")
+								: [time, a.durationMs ? a.durationMs + "ms" : "", a.tool ?? ""].filter(Boolean).join(" · ");
 							return h("div", {
-								className: "eda-act-item " + (isPend ? "pend" : (a.ok === false ? "err" : (a.ok ? "ok" : ""))),
-								key: a.id ?? i,
-								onClick: () => toggle(a.id),
+								className: "eda-row " + (pend ? "pend" : a.ok === false ? "err" : a.ok ? "ok" : ""),
+								key: a.id ?? i, onClick: () => toggle(a.id),
 							},
-								h("span", { className: "eda-act-dot" }),
-								h("div", { className: "eda-act-body" },
-									h("div", { className: "eda-act-line" },
-										h("span", { className: "eda-act-seq" }, "#" + (a.id ?? i)),
-										h("span", { className: "eda-act-name" }, a.action ?? a.tool ?? "调用 API"),
-										h("span", { className: "eda-act-meta" }, isPend
-											? h("span", { className: "eda-pend" }, "执行中…")
-											: (t + (a.durationMs ? " · " + a.durationMs + "ms" : "") + " · " + (a.tool ?? ""))),
+								h("span", { className: "eda-row-dot" }),
+								h("div", { className: "eda-row-body" },
+									h("div", { className: "eda-row-line" },
+										h("span", { className: "eda-seq" }, "#" + (a.id ?? i)),
+										h("span", { className: "eda-row-name" }, a.action ?? a.tool ?? "调用 API"),
+										h("span", { className: "eda-row-meta" }, meta),
 										revokable
 											? h("button", {
-												className: "eda-btn ghost eda-revoke",
-												disabled: busyId === a.id,
+												className: "eda-btn tiny", disabled: busyId === a.id,
 												onClick: (e) => { e.stopPropagation(); onRevoke(a.id); },
 												title: "撤回该步（删除它新建的图元）",
-											}, busyId === a.id ? "撤回中…" : "撤回")
+											}, busyId === a.id ? "撤回…" : "撤回")
 											: null),
-									a.code ? h("div", { className: "eda-act-code" }, a.code) : null,
-									!isPend && a.ok === false && a.error ? h("div", { className: "eda-act-out err" }, a.error)
-										: (!isPend && a.result ? h("div", { className: "eda-act-out" }, a.result) : null),
-									isOpen ? h("div", { className: "eda-act-full" },
-										(a.code ? h("div", null, h("div", { className: "eda-act-full-label" }, "代码"), a.code) : null),
-										(a.revoke ? h("div", null, h("div", { className: "eda-act-full-label" }, "撤回数据"), `该步新建 ${a.revoke.created.length} 个图元` + (a.revoke.deletedCount ? `，删除 ${a.revoke.deletedCount} 个（不可恢复）` : "")) : null),
-										(a.result ? h("div", null, h("div", { className: "eda-act-full-label" }, "结果"), a.result) : null),
-										(a.error ? h("div", null, h("div", { className: "eda-act-full-label" }, "错误"), a.error) : null)) : null));
+									a.code ? h("div", { className: "eda-row-code" }, a.code) : null,
+									!pend && a.ok === false && a.error
+										? h("div", { className: "eda-row-out err" }, a.error)
+										: !pend && a.result ? h("div", { className: "eda-row-out" }, a.result) : null,
+									open ? h("div", { className: "eda-row-full" },
+										a.code ? h("div", null, h("i", null, "代码"), a.code) : null,
+										a.revoke ? h("div", null, h("i", null, "撤回数据"),
+											`新建 ${a.revoke.created.length} 图元` + (a.revoke.deletedCount ? ` · 删除 ${a.revoke.deletedCount}（不可恢复）` : "")) : null,
+										a.result ? h("div", null, h("i", null, "结果"), a.result) : null,
+										a.error ? h("div", null, h("i", null, "错误"), a.error) : null) : null));
 						})),
-						h("div", { className: "eda-act-hint" }, (hasMulti ? "下拉切换会话 · " : "") + "点击条目查看完整内容 · 撤回仅删除该步新建图元")));
+						h("div", { className: "eda-tl-foot" }, (multi ? "下拉切换会话 · " : "") + "点击条目展开 · 撤回只删该步新建图元")),
+				note ? h("p", { className: "eda-note", style: { wordBreak: "break-word" } }, note) : null);
 		}
 
-		/**
-		 * 紧急保存: pull the board state (官方 API .epro2 + SVG 预览 + 网表/BOM)
-		 * AND the agent action log to local disk — a safety net if the cloud sync
-		 * ever fails. Works (log-only) even when the bridge is disconnected.
-		 */
-		function SnapshotCard({ connected, busy, onSave, lastOut }) {
+		/** Emergency save: board state (.epro2 + SVG + netlist/BOM) + action log → disk. */
+		function SnapshotCard({ connected, state, onSave }) {
 			return h("div", { className: "eda-card" },
-				h("div", { className: "eda-card-title" }, "紧急保存（画板断连也不丢工程）"),
-				h("button", { className: "eda-btn primary big", disabled: busy, onClick: onSave },
-					busy ? "保存中…" : "🛟 紧急保存"),
-				lastOut ? h("p", { className: "eda-note", style: { margin: "8px 0 0", wordBreak: "break-all" } }, lastOut) : null,
-				h("p", { className: "eda-muted", style: { margin: "8px 0 0" } },
-					connected
-						? "把 agent 在画板上做的东西抓到本地：专业版 .epro2 完整恢复 + 通用预览 SVG + 网表/BOM。云端没同步上，也能找回最后的工程。"
-						: "画板未连接：仍会保存 agent 动作日志（每一步留档）。"));
+				h("div", { className: "eda-card-title" }, "紧急保存"),
+				h("button", { className: "eda-btn primary big", disabled: state.busy, onClick: onSave },
+					state.busy ? "保存中…" : "🛟 保存画板到本地"),
+				h("p", { className: "eda-muted", style: { marginTop: 8 } }, connected
+					? "专业版 .epro2（可完整恢复）+ 预览 SVG + 网表/BOM。云端没同步上也能找回最后的工程。"
+					: "画板未连接：仍会保存 agent 动作日志，每一步留档。"),
+				state.out ? h("p", { className: "eda-note", style: { wordBreak: "break-all" } }, state.out) : null);
 		}
-		//#endregion
 
-		//#region panel
-		function EdaPanel({ controller }) {
+		/** Panel shell: top bar → scroll body → footer. */
+		function EdaPanel({ store }) {
 			const [status, error] = useStatus();
 			const ready = status?.connected === true;
-			const activity = useActivity();
-			const [wizardOpen, setWizardOpen] = useState(false);
-			const [saveState, setSaveState] = useState({ busy: false, out: null });
-			const [installState, setInstallState] = useState({ busy: false, result: null });
-			const [bridgeState, setBridgeState] = useState({ busy: false, result: null });
-			const [revokeState, setRevokeState] = useState({ busyId: null, out: null });
+			const [pinned, setPinned] = useState("");
+			const feed = useActivity(pinned);
+			const [guide, setGuide] = useState(false);
+			const [install, setInstall] = useState({ busy: false, result: null });
+			const [bridge, setBridge] = useState({ busy: false, result: null });
+			const [save, setSave] = useState({ busy: false, out: null });
+			const [revoke, setRevoke] = useState({ busyId: null, out: null });
 			const [clearing, setClearing] = useState(false);
 
-			const doRevoke = async (id) => {
-				if (revokeState.busyId !== null) return;
-				setRevokeState({ busyId: id, out: null });
+			const post = (path) => fetch(API_BASE + path, {
+				method: "POST", headers: { "content-type": "application/json" }, body: "{}",
+			});
+
+			const doInstall = async () => {
+				if (install.busy) return;
+				setInstall({ busy: true, result: null });
 				try {
-					const res = await fetch(API_BASE + "/activity/revoke?id=" + encodeURIComponent(id), { method: "POST", headers: { "content-type": "application/json" }, body: "{}" });
-					if (!res.ok) { setRevokeState({ busyId: null, out: "撤回接口待重启后生效（当前旧模块）。" }); return; }
+					const res = await post("/install");
+					if (!res.ok) { setInstall({ busy: false, result: "安装接口未就绪（旧模块），可对 AI 说「连接我的画板」。" }); return; }
 					const out = await res.json();
-					setRevokeState({ busyId: null, out: out.ok ? `↩️ 已撤回：${out.note ?? ""}` : "⚠️ " + String(out.error ?? "撤回失败") });
-				} catch (err) { setRevokeState({ busyId: null, out: "请求失败：" + String(err) }); }
+					setInstall({ busy: false, result: out.ok ? "✅ " + (out.script ?? "官方桥已安装") : "❌ " + (out.error ?? "安装失败") });
+				} catch (e) { setInstall({ busy: false, result: "请求失败：" + String(e) }); }
 			};
-			const doClear = async () => {
-				if (clearing) return;
-				setClearing(true);
+			const doStart = async () => {
+				if (bridge.busy) return;
+				setBridge({ busy: true, result: null });
 				try {
-					const res = await fetch(API_BASE + "/activity/clear", { method: "POST", headers: { "content-type": "application/json" }, body: "{}" });
-					if (!res.ok) { setRevokeState({ busyId: null, out: "清空接口待重启后生效（当前旧模块）。" }); return; }
-					setRevokeState({ busyId: null, out: "🗑️ 时间线已清空" });
-				} catch (err) { setRevokeState({ busyId: null, out: "请求失败：" + String(err) }); }
-				finally { setClearing(false); }
+					const res = await post("/bridge");
+					if (!res.ok) { setBridge({ busy: false, result: "启动接口未就绪（旧模块），可对 AI 说「连接我的画板」。" }); return; }
+					const out = await res.json();
+					setBridge({ busy: false, result: out.ok ? `已启动（${out.state}）` : `未启动：${out.error || out.note || "请先安装桥接"}` });
+				} catch (e) { setBridge({ busy: false, result: "请求失败：" + String(e) }); }
 			};
-
-			const doInstall = async () => {
-				if (installState.busy) return;
-				setInstallState({ busy: true, result: null });
+			const doSave = async () => {
+				if (save.busy) return;
+				setSave({ busy: true, out: null });
 				try {
-					const res = await fetch(API_BASE + "/install", { method: "POST", headers: { "content-type": "application/json" }, body: "{}" });
-					if (!res.ok) { setInstallState({ busy: false, result: "官方桥已就绪 / 安装接口在下次重启后生效（当前旧模块）。官方桥源码：" + LINKS.skill }); return; }
+					const res = await post("/snapshot");
+					if (!res.ok) { setSave({ busy: false, out: "紧急保存接口未就绪（旧模块），可对 AI 说「紧急保存」。" }); return; }
 					const out = await res.json();
-					setInstallState({ busy: false, result: out.ok ? "✅ " + (out.script ?? "官方桥已安装") : "❌ " + (out.error ?? "安装失败") });
-				} catch (err) { setInstallState({ busy: false, result: "请求失败：" + String(err) }); }
+					setSave({
+						busy: false,
+						out: out.ok
+							? `✅ ${out.files?.length ?? 0} 个文件 → ${out.dir ?? ""}` + ((out.errors?.length ?? 0) > 0 ? `（${out.errors.length} 项降级）` : "")
+							: "❌ " + String(out.error ?? "保存失败"),
+					});
+				} catch (e) { setSave({ busy: false, out: "请求失败：" + String(e) }); }
 			};
-
-			const doStartBridge = async () => {
-				if (bridgeState.busy) return;
-				setBridgeState({ busy: true, result: null });
+			const doRevoke = async (id) => {
+				if (revoke.busyId !== null) return;
+				setRevoke({ busyId: id, out: null });
 				try {
-					const res = await fetch(API_BASE + "/bridge", { method: "POST", headers: { "content-type": "application/json" }, body: "{}" });
-					if (!res.ok) { setBridgeState({ busy: false, result: "启动接口在下次重启后生效（当前旧模块）；可对 AI 说「连接我的画板」。" }); return; }
+					const res = await fetch(API_BASE + "/activity/revoke?id=" + encodeURIComponent(id), {
+						method: "POST", headers: { "content-type": "application/json" }, body: "{}",
+					});
+					if (!res.ok) { setRevoke({ busyId: null, out: "撤回接口未就绪（旧模块）。" }); return; }
 					const out = await res.json();
-					setBridgeState({ busy: false, result: out.ok ? `已启动（${out.state}）` : `未启动：${out.error || out.note || "请先安装桥接"}` });
-				} catch (err) { setBridgeState({ busy: false, result: "请求失败：" + String(err) }); }
+					setRevoke({ busyId: null, out: out.ok ? "↩️ 已撤回：" + (out.note ?? "") : "⚠️ " + String(out.error ?? "撤回失败") });
+				} catch (e) { setRevoke({ busyId: null, out: "请求失败：" + String(e) }); }
 			};
-
-			const doSave = async () => {
-				if (saveState.busy) return;
-				setSaveState({ busy: true, out: null });
+			const doClear = async () => {
+				if (clearing) return;
+				setClearing(true);
 				try {
-					const res = await fetch(API_BASE + "/snapshot", { method: "POST", headers: { "content-type": "application/json" }, body: "{}" });
-					if (!res.ok) { setSaveState({ busy: false, out: "紧急保存接口在下次重启后生效（当前旧模块）；也可对 AI 说「紧急保存」。" }); return; }
-					const out = await res.json();
-					if (!out.ok) setSaveState({ busy: false, out: "❌ " + String(out.error ?? "保存失败") });
-					else setSaveState({ busy: false, out: `✅ 已保存 ${out.files?.length ?? 0} 个文件 → ${out.dir ?? ""}${(out.errors?.length ?? 0) > 0 ? `（${out.errors.length} 项降级：${out.errors.slice(0, 2).join("；")}）` : ""}` });
-				} catch (err) { setSaveState({ busy: false, out: "请求失败：" + String(err) }); }
+					const res = await post("/activity/clear");
+					setRevoke({ busyId: null, out: res.ok ? "🗑️ 时间线已清空" : "清空接口未就绪（旧模块）。" });
+				} catch (e) { setRevoke({ busyId: null, out: "请求失败：" + String(e) }); }
+				finally { setClearing(false); }
 			};
 
-			return h("div", { className: "eda-panel" },
-				h("div", { className: "eda-head" },
-					h("div", { className: "eda-mark" }, "E"),
-					h("div", { className: "eda-tt" },
-						h("h1", null, "嘉立创 EDA"),
-						h("p", { className: "eda-sub" }, "平台仪表盘 · v" + (status?.version ?? "0.1.0"))),
-					h("button", { className: "eda-close", onClick: () => controller.toggle(), "aria-label": "关闭" }, "✕")),
+			return h("div", { className: "dsh-eda-root" },
+				h("div", { className: "eda-top" },
+					h(Mark, null),
+					h("div", { className: "eda-title" },
+						h("b", null, "嘉立创 EDA"),
+						h("span", null, "official bridge · v" + (status?.version ?? "—"))),
+					h(UpdatePill, { status }),
+					h("button", { className: "eda-iconbtn", onClick: () => store.set(false), title: "关闭面板", "aria-label": "关闭" }, "✕")),
 				h("div", { className: "eda-scroll" },
-					h(ConnectCard, { status, error, onInstall: doInstall, onStartBridge: doStartBridge, installState, bridgeState }),
-					h(ConnectWizard, { open: wizardOpen, setOpen: setWizardOpen }),
-					h(ActivityMonitor, { activities: activity.activities, sessions: activity.sessions, currentSid: activity.currentSid, setSid: activity.setSid, pinned: activity.pinned, error: activity.error, connected: ready, onRevoke: doRevoke, busyId: revokeState.busyId, onClear: doClear, clearing }),
-					(revokeState.out || saveState.out) ? h("p", { className: "eda-note", style: { margin: "0", wordBreak: "break-all" } }, revokeState.out ?? saveState.out) : null,
-					h(SnapshotCard, { connected: ready, busy: saveState.busy, onSave: doSave, lastOut: saveState.out }),
-					h("p", { className: "eda-foot" }, "云端实时 = 对话里生成（官方 eda.* API） · 紧急保存 = 本地留档")));
+					h(ConnectCard, { status, error, install, bridge, onInstall: doInstall, onStart: doStart }),
+					h(ConnectGuide, { open: guide, setOpen: setGuide }),
+					h(Timeline, {
+						feed, pinned, setSid: setPinned, connected: ready,
+						onRevoke: doRevoke, busyId: revoke.busyId, onClear: doClear, clearing,
+						note: revoke.out,
+					}),
+					h(SnapshotCard, { connected: ready, state: save, onSave: doSave })),
+				h("div", { className: "eda-foot" }, "对话里生成（官方 eda.* API） · 本地留档（紧急保存）"));
 		}
-		//#endregion
 
-		//#region mounts
-		const ICON = '<svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.2" aria-hidden="true"><path d="M3.5 2.5h6l3 3v8h-9z" stroke-linejoin="round"/><path d="M9.5 2.5v3h3M6 8h4M6 10.5h2.5" stroke-linecap="round"/></svg>';
+		/** Overlay wrapper: mounted in `shell.overlay`; `hidden` toggles visibility so
+		 *  the feed keeps running while the panel is closed (same surface as 0.1.x). */
+		function EdaOverlay({ store }) {
+			const open = useStore(store);
+			const [width, setWidth] = useState(() => {
+				try { return Math.min(760, Math.max(120, Number(localStorage.getItem("dsh-eda:width")) || 400)); } catch (e) { return 400; }
+			});
+			const drag = useRef(null);
+			const startDrag = (e) => {
+				e.preventDefault();
+				const move = (ev) => {
+					const next = Math.min(760, Math.max(120, window.innerWidth - ev.clientX));
+					drag.current = next;
+					setWidth(next);
+				};
+				const up = () => {
+					window.removeEventListener("mousemove", move);
+					window.removeEventListener("mouseup", up);
+					if (drag.current !== null) { try { localStorage.setItem("dsh-eda:width", String(drag.current)); } catch (err) { /* ignore */ } }
+				};
+				window.addEventListener("mousemove", move);
+				window.addEventListener("mouseup", up);
+			};
+			return h("div", { className: "dsh-eda-root", hidden: !open, style: { "--eda-w": width + "px" } },
+				h("div", { className: "dsh-eda-grip", onMouseDown: startDrag, title: "拖动调整宽度" }),
+				h(EdaPanel, { store }));
+		}
+		//#endregion
 
+		//#region mounts (0.1.x compatibility)
 		function sidebarRoot() {
 			const column = document.querySelector('[data-pane="sidebar"], [class*="sidebarCol"]');
 			if (column === null) return undefined;
 			const logoOwner = column.querySelector('[class*="logoRow"]')?.parentElement;
 			return logoOwner ?? (column.firstElementChild ?? undefined);
 		}
-
 		function newSessionButton(root) {
 			const nested = root.querySelector('button[class*="newSession"]');
 			if (nested !== null) return nested;
-			for (const child of root.children) {
-				if (child.tagName === "BUTTON") return child;
-			}
+			for (const child of root.children) if (child.tagName === "BUTTON") return child;
 			return undefined;
 		}
-
-		function createEntry(controller) {
+		function createEntry(store) {
 			const entry = document.createElement("button");
 			entry.type = "button";
 			entry.dataset.dshEdaEntry = "";
 			entry.setAttribute("aria-label", "嘉立创 EDA 助手");
-			entry.setAttribute("title", "嘉立创 EDA 助手（官方画板平台监控）");
-			entry.innerHTML = '<span class="eda-entry-icon">' + ICON + '</span><span class="eda-entry-label">嘉立创 EDA</span>';
-			entry.addEventListener("click", () => { controller.toggle(); });
+			entry.setAttribute("title", "嘉立创 EDA 助手（官方画板平台）");
+			entry.innerHTML = '<span class="eda-entry-icon"><svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.2" aria-hidden="true"><path d="' + ICON_EDA + '" stroke-linejoin="round" stroke-linecap="round"/></svg></span><span class="eda-entry-label">嘉立创 EDA</span>';
+			entry.addEventListener("click", () => store.toggle());
 			return entry;
 		}
-
-		function placeEntry(root, entry) {
-			const button = newSessionButton(root);
-			if (button === undefined) return false;
-			if (entry.parentElement !== root) {
-				const row = button.closest('[class*="logoRow"]');
-				const base = (row !== null && row.parentElement === root) ? row : button;
-				const family = Array.from(root.children).filter(
-					(el) => el instanceof HTMLElement && el.matches("[data-dsh-taskboard-entry], [data-dsh-ssh-entry], [data-dsh-logcat-entry], [data-dsh-eda-entry]"),
-				);
-				const anchor = family.length > 0 ? family[family.length - 1].nextElementSibling : base.nextElementSibling;
-				root.insertBefore(entry, anchor);
-			}
-			return true;
-		}
-
-		function mountSidebarEntry(controller) {
-			const entry = createEntry(controller);
+		function mountSidebarEntry(store) {
+			const entry = createEntry(store);
 			let root;
 			let placed = false;
 			let rootObserver;
-
-			const tryPlace = () => {
-				if (root !== undefined && !root.isConnected) {
-					rootObserver?.disconnect();
-					root = undefined;
-					placed = false;
+			const place = () => {
+				const button = newSessionButton(root);
+				if (button === undefined) return false;
+				if (entry.parentElement !== root) {
+					const row = button.closest('[class*="logoRow"]');
+					const base = row !== null && row.parentElement === root ? row : button;
+					const family = Array.from(root.children).filter((el) =>
+						el instanceof HTMLElement && el.matches("[data-dsh-taskboard-entry], [data-dsh-ssh-entry], [data-dsh-logcat-entry], [data-dsh-eda-entry]"));
+					const anchor = family.length > 0 ? family[family.length - 1].nextElementSibling : base.nextElementSibling;
+					root.insertBefore(entry, anchor);
 				}
-				if (placed) {
-					if (document.body.contains(entry)) return;
+				return true;
+			};
+			const tryPlace = () => {
+				if (root !== undefined && (!root.isConnected || (placed && !document.body.contains(entry)))) {
 					rootObserver?.disconnect();
 					root = undefined;
 					placed = false;
 				}
+				if (placed) return;
 				root ??= sidebarRoot();
 				if (root === undefined) return;
-				placed = placeEntry(root, entry);
+				placed = place();
 				if (placed) {
 					rootObserver = new MutationObserver(() => {
 						if (root === undefined || !root.isConnected) { placed = false; tryPlace(); return; }
-						if (!root.contains(entry)) placed = placeEntry(root, entry);
+						if (!root.contains(entry)) placed = place();
 					});
 					rootObserver.observe(root, { childList: true, subtree: true });
 				}
 			};
-
-			const waitObserver = new MutationObserver(() => { tryPlace(); });
+			const waitObserver = new MutationObserver(() => tryPlace());
 			waitObserver.observe(document.body, { childList: true, subtree: true });
-
-			const syncActive = () => {
-				if (controller.getSnapshot().panelOpen) entry.dataset.active = "true";
-				else delete entry.dataset.active;
-			};
-			const unsubscribe = controller.subscribe(syncActive);
-			syncActive();
+			const sync = () => { if (store.get()) entry.dataset.active = "true"; else delete entry.dataset.active; };
+			const unsubscribe = store.subscribe(sync);
+			sync();
 			tryPlace();
-
 			return () => {
 				waitObserver.disconnect();
 				rootObserver?.disconnect();
@@ -571,86 +698,83 @@ window.__ModuleLoader__.load({
 			};
 		}
 
-		function mountPanel(controller) {
-			let root;
-			let container;
-			const ensure = () => {
-				if (container !== undefined && container.isConnected) return;
-				root?.unmount();
-				root = undefined;
-				container?.remove();
-				container = document.createElement("div");
-				container.dataset.dshEdaView = "";
-				container.className = "dsh-eda-view";
-				container.hidden = true; // side-drawer: hidden until the sidebar entry is clicked
-				const panel = document.createElement("div");
-				panel.className = "dsh-eda-panel";
-				container.appendChild(panel);
-				document.body.appendChild(container);
-				root = createRoot(panel);
-				root.render(h(EdaPanel, { controller }));
-			};
-
-			ensure();
-
-			const applyOpen = () => {
-				if (container !== undefined) container.hidden = !controller.getSnapshot().panelOpen;
-			};
-			const unsubscribe = controller.subscribe(applyOpen);
-			applyOpen();
-
+		/**
+		 * Fallback mount for shells without the slots service (and for the unit
+		 * test's DOM stub): a body-level overlay. Still absolute-in-shell friendly:
+		 * z-index stays low (40) and the panel keeps its own close affordance.
+		 */
+		function mountFallback(store) {
+			const container = document.createElement("div");
+			container.dataset.dshEdaView = "";
+			container.className = "dsh-eda-fallback";
+			const root = createRoot(container);
+			document.body.appendChild(container);
+			root.render(h(EdaOverlay, { store }));
 			return () => {
-				unsubscribe();
-				root?.unmount();
-				root = undefined;
-				container?.remove();
-				container = undefined;
+				root.unmount();
+				container.remove();
 			};
 		}
 		//#endregion
 
-		//#region controller
-		/** Minimal open/close controller: panelOpen + a tiny subscribe store. */
-		function PanelController() {
-			let panelOpen = false;
-			const listeners = new Set();
-			this.toggle = () => { panelOpen = !panelOpen; for (const fn of listeners) fn(); };
-			this.getSnapshot = () => ({ panelOpen });
-			this.subscribe = (fn) => { listeners.add(fn); return () => { listeners.delete(fn); }; };
-		}
-		//#endregion
-
 		//#region entry
-		/** Required services (fiber inject waiting — the runtime must be up first). */
 		const inject = ["slots"];
 
 		/**
-		 * Mount the 嘉立创 EDA 助手 panel.
+		 * Mount the panel: 0.2 registers into `shell.overlay` + a header utility pill;
+		 * 0.1.x keeps the sidebar DOM entry. Anything unavailable degrades quietly.
 		 * @param ctx - client root context.
 		 */
 		function apply(ctx) {
 			const style = document.createElement("style");
-			style.textContent = STYLE;
+			style.textContent = STYLE + "\n.dsh-eda-fallback { position: fixed; inset: 0; pointer-events: none; z-index: 40; }\n.dsh-eda-fallback > .dsh-eda-root { pointer-events: auto; }";
 			style.dataset.dshEdaStyle = "";
 			document.head.appendChild(style);
 
-			const controller = new PanelController();
+			const store = new PanelStore();
 			const disposers = [];
+			let slotRegistered = false;
+
 			try {
-				disposers.push(mountSidebarEntry(controller));
-				disposers.push(mountPanel(controller));
+				const slots = typeof ctx.get === "function" ? ctx.get("slots") : undefined;
+				if (slots !== undefined && slots !== null) {
+					disposers.push(slots.inject("conversation.session.header.utilities", () => slots.register(
+						{ name: "conversation.session.header.utilities", id: "eda-toggle", order: 30 },
+						() => h(HeaderPill, { store }),
+					)));
+					disposers.push(slots.inject("shell.overlay", () => slots.register(
+						{ name: "shell.overlay", id: "eda", order: 90 },
+						() => h(EdaOverlay, { store }),
+					)));
+					slotRegistered = true;
+				}
 			} catch (error) {
-				console.warn("[dsh-eda] mount failed:", error);
+				console.warn("[dsh-eda] slot registration failed, falling back to DOM mount", error);
 			}
+
+			try {
+				disposers.push(mountSidebarEntry(store));
+			} catch (error) {
+				console.warn("[dsh-eda] sidebar entry failed", error);
+			}
+			if (!slotRegistered) {
+				try {
+					disposers.push(mountFallback(store));
+				} catch (error) {
+					console.warn("[dsh-eda] fallback mount failed", error);
+				}
+			}
+
 			ctx.effect(() => () => {
 				for (const dispose of disposers.splice(0)) dispose();
 				style.remove();
-			}, "dsh-eda: ui mounts");
+			}, "dsh-eda: browser UI");
 		}
-		//#endregion
 
 		exports.apply = apply;
 		exports.inject = inject;
+		// Test seam (bundle runtime test renders the update pill directly).
+		exports.UpdatePill = UpdatePill;
 		return module.exports;
-	}
+	},
 });