dsh-mutipleagent 0.0.0-stage → 0.2.1

package/public/demo-icons/arrow-counterclockwise.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-counterclockwise" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2z"/>
+  <path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466"/>
+</svg>

package/public/demo-icons/arrow-right.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8"/>
+</svg>

package/public/demo-icons/bell.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bell" viewBox="0 0 16 16">
+  <path d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2M8 1.918l-.797.161A4 4 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4 4 0 0 0-3.203-3.92zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5 5 0 0 1 13 6c0 .88.32 4.2 1.22 6"/>
+</svg>

package/public/demo-icons/box-seam-fill.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-seam-fill" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M15.528 2.973a.75.75 0 0 1 .472.696v8.662a.75.75 0 0 1-.472.696l-7.25 2.9a.75.75 0 0 1-.557 0l-7.25-2.9A.75.75 0 0 1 0 12.331V3.669a.75.75 0 0 1 .471-.696L7.443.184l.01-.003.268-.108a.75.75 0 0 1 .558 0l.269.108.01.003zM10.404 2 4.25 4.461 1.846 3.5 1 3.839v.4l6.5 2.6v7.922l.5.2.5-.2V6.84l6.5-2.6v-.4l-.846-.339L8 5.961 5.596 5l6.154-2.461z"/>
+</svg>

package/public/demo-icons/chat-left-text-fill.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chat-left-text-fill" viewBox="0 0 16 16">
+  <path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4.414a1 1 0 0 0-.707.293L.854 15.146A.5.5 0 0 1 0 14.793zm3.5 1a.5.5 0 0 0 0 1h9a.5.5 0 0 0 0-1zm0 2.5a.5.5 0 0 0 0 1h9a.5.5 0 0 0 0-1zm0 2.5a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1z"/>
+</svg>

package/public/demo-icons/check-lg.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-lg" viewBox="0 0 16 16">
+  <path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z"/>
+</svg>

package/public/demo-icons/chevron-down.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708"/>
+</svg>

package/public/demo-icons/cpu-fill.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cpu-fill" viewBox="0 0 16 16">
+  <path d="M6.5 6a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5z"/>
+  <path d="M5.5.5a.5.5 0 0 0-1 0V2A2.5 2.5 0 0 0 2 4.5H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2A2.5 2.5 0 0 0 4.5 14v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14a2.5 2.5 0 0 0 2.5-2.5h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14A2.5 2.5 0 0 0 11.5 2V.5a.5.5 0 0 0-1 0V2h-1V.5a.5.5 0 0 0-1 0V2h-1V.5a.5.5 0 0 0-1 0V2h-1zm1 4.5h3A1.5 1.5 0 0 1 11 6.5v3A1.5 1.5 0 0 1 9.5 11h-3A1.5 1.5 0 0 1 5 9.5v-3A1.5 1.5 0 0 1 6.5 5"/>
+</svg>

package/public/demo-icons/crosshair.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-crosshair" viewBox="0 0 16 16">
+  <path d="M8.5.5a.5.5 0 0 0-1 0v.518A7 7 0 0 0 1.018 7.5H.5a.5.5 0 0 0 0 1h.518A7 7 0 0 0 7.5 14.982v.518a.5.5 0 0 0 1 0v-.518A7 7 0 0 0 14.982 8.5h.518a.5.5 0 0 0 0-1h-.518A7 7 0 0 0 8.5 1.018zm-6.48 7A6 6 0 0 1 7.5 2.02v.48a.5.5 0 0 0 1 0v-.48a6 6 0 0 1 5.48 5.48h-.48a.5.5 0 0 0 0 1h.48a6 6 0 0 1-5.48 5.48v-.48a.5.5 0 0 0-1 0v.48A6 6 0 0 1 2.02 8.5h.48a.5.5 0 0 0 0-1zM8 10a2 2 0 1 0 0-4 2 2 0 0 0 0 4"/>
+</svg>

package/public/demo-icons/diagram-3-fill.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-diagram-3-fill" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M6 3.5A1.5 1.5 0 0 1 7.5 2h1A1.5 1.5 0 0 1 10 3.5v1A1.5 1.5 0 0 1 8.5 6v1H14a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0V8h-5v.5a.5.5 0 0 1-1 0V8h-5v.5a.5.5 0 0 1-1 0v-1A.5.5 0 0 1 2 7h5.5V6A1.5 1.5 0 0 1 6 4.5zm-6 8A1.5 1.5 0 0 1 1.5 10h1A1.5 1.5 0 0 1 4 11.5v1A1.5 1.5 0 0 1 2.5 14h-1A1.5 1.5 0 0 1 0 12.5zm6 0A1.5 1.5 0 0 1 7.5 10h1a1.5 1.5 0 0 1 1.5 1.5v1A1.5 1.5 0 0 1 8.5 14h-1A1.5 1.5 0 0 1 6 12.5zm6 0a1.5 1.5 0 0 1 1.5-1.5h1a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1-1.5 1.5h-1a1.5 1.5 0 0 1-1.5-1.5z"/>
+</svg>

package/public/demo-icons/file-earmark-code-fill.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-code-fill" viewBox="0 0 16 16">
+  <path d="M9.293 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.707A1 1 0 0 0 13.707 4L10 .293A1 1 0 0 0 9.293 0M9.5 3.5v-2l3 3h-2a1 1 0 0 1-1-1M6.646 7.646a.5.5 0 1 1 .708.708L5.707 10l1.647 1.646a.5.5 0 0 1-.708.708l-2-2a.5.5 0 0 1 0-.708zm2.708 0 2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L10.293 10 8.646 8.354a.5.5 0 1 1 .708-.708"/>
+</svg>

package/public/demo-icons/fullscreen.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-fullscreen" viewBox="0 0 16 16">
+  <path d="M1.5 1a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0v-4A1.5 1.5 0 0 1 1.5 0h4a.5.5 0 0 1 0 1zM10 .5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 16 1.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5M.5 10a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 0 14.5v-4a.5.5 0 0 1 .5-.5m15 0a.5.5 0 0 1 .5.5v4a1.5 1.5 0 0 1-1.5 1.5h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5"/>
+</svg>

package/public/demo-icons/pause-fill.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pause-fill" viewBox="0 0 16 16">
+  <path d="M5.5 3.5A1.5 1.5 0 0 1 7 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5m5 0A1.5 1.5 0 0 1 12 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5"/>
+</svg>

package/public/demo-icons/people-fill.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-people-fill" viewBox="0 0 16 16">
+  <path d="M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6m-5.784 6A2.24 2.24 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.3 6.3 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1zM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5"/>
+</svg>

package/public/demo-icons/pie-chart-fill.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pie-chart-fill" viewBox="0 0 16 16">
+  <path d="M15.985 8.5H8.207l-5.5 5.5a8 8 0 0 0 13.277-5.5zM2 13.292A8 8 0 0 1 7.5.015v7.778zM8.5.015V7.5h7.485A8 8 0 0 0 8.5.015"/>
+</svg>

package/public/demo-icons/play-fill.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-play-fill" viewBox="0 0 16 16">
+  <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393"/>
+</svg>

package/public/demo-icons/search.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
+  <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/>
+</svg>

package/public/demo-icons/shield-check.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-shield-check" viewBox="0 0 16 16">
+  <path d="M5.338 1.59a61 61 0 0 0-2.837.856.48.48 0 0 0-.328.39c-.554 4.157.726 7.19 2.253 9.188a10.7 10.7 0 0 0 2.287 2.233c.346.244.652.42.893.533q.18.085.293.118a1 1 0 0 0 .101.025 1 1 0 0 0 .1-.025q.114-.034.294-.118c.24-.113.547-.29.893-.533a10.7 10.7 0 0 0 2.287-2.233c1.527-1.997 2.807-5.031 2.253-9.188a.48.48 0 0 0-.328-.39c-.651-.213-1.75-.56-2.837-.855C9.552 1.29 8.531 1.067 8 1.067c-.53 0-1.552.223-2.662.524zM5.072.56C6.157.265 7.31 0 8 0s1.843.265 2.928.56c1.11.3 2.229.655 2.887.87a1.54 1.54 0 0 1 1.044 1.262c.596 4.477-.787 7.795-2.465 9.99a11.8 11.8 0 0 1-2.517 2.453 7 7 0 0 1-1.048.625c-.28.132-.581.24-.829.24s-.548-.108-.829-.24a7 7 0 0 1-1.048-.625 11.8 11.8 0 0 1-2.517-2.453C1.928 10.487.545 7.169 1.141 2.692A1.54 1.54 0 0 1 2.185 1.43 63 63 0 0 1 5.072.56"/>
+  <path d="M10.854 5.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 7.793l2.646-2.647a.5.5 0 0 1 .708 0"/>
+</svg>

package/public/demo-icons/stack.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-stack" viewBox="0 0 16 16">
+  <path d="m14.12 10.163 1.715.858c.22.11.22.424 0 .534L8.267 15.34a.6.6 0 0 1-.534 0L.165 11.555a.299.299 0 0 1 0-.534l1.716-.858 5.317 2.659c.505.252 1.1.252 1.604 0l5.317-2.66zM7.733.063a.6.6 0 0 1 .534 0l7.568 3.784a.3.3 0 0 1 0 .535L8.267 8.165a.6.6 0 0 1-.534 0L.165 4.382a.299.299 0 0 1 0-.535z"/>
+  <path d="m14.12 6.576 1.715.858c.22.11.22.424 0 .534l-7.568 3.784a.6.6 0 0 1-.534 0L.165 7.968a.299.299 0 0 1 0-.534l1.716-.858 5.317 2.659c.505.252 1.1.252 1.604 0z"/>
+</svg>

package/public/demo-icons/x-lg.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg" viewBox="0 0 16 16">
+  <path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8z"/>
+</svg>

package/public/demo.css

@@ -0,0 +1,173 @@
+:root{--blue:#0862f7;--blue-dark:#084ecb;--ink:#101e40;--muted:#8590a5;--line:#e9edf5;--font:"Segoe UI","Microsoft YaHei UI","PingFang SC",sans-serif;--side:394px;--dock:200px}
+*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{font:14px/1.45 var(--font);color:var(--ink);background:#e8eef8}button,input,select{font:inherit}button{cursor:pointer}button,a,input,select{-webkit-tap-highlight-color:transparent}button{color:inherit}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #94bfff;outline-offset:3px}button:disabled{cursor:default;opacity:.6}a{text-decoration:none;color:inherit}[hidden]{display:none!important}img{display:block}.icon{width:20px;height:20px}.glass{background:rgba(255,255,255,.96);border:1px solid rgba(239,244,253,.9);box-shadow:0 7px 25px #274d9814,0 2px 5px #334f7d05;border-radius:17px;backdrop-filter:blur(14px)}.demo-space,.demo-scene{position:fixed;inset:0}.demo-scene>canvas{position:absolute;inset:0;width:100%;height:100%;display:block}.demo-scene>.office-canvas{z-index:1}.scene-loading{position:absolute;left:40%;top:48%;transform:translate(-50%,-50%);padding:13px 22px;background:#fffffff0;border-radius:10px;color:#687d9e;box-shadow:0 6px 24px #627ba720;z-index:5}.nav{position:fixed;left:16px;right:16px;top:8px;height:72px;z-index:30;display:flex;align-items:center;padding:10px 20px 10px 23px;gap:24px;border-radius:17px;background:#ffffffed}.brand{display:flex;align-items:center;gap:12px;flex:0 0 206px;font-size:24px;letter-spacing:-.7px;font-weight:700;white-space:nowrap}.brand-light{font-weight:650}.brand-icon{width:39px;height:43px;display:grid;place-items:center}.brand-icon img{width:36px;height:36px;filter:invert(27%) sepia(98%) saturate(4035%) hue-rotate(214deg) brightness(105%) contrast(105%);text-shadow:0 3px 4px #3079dd40}.search-wrap{position:relative;flex:1;min-width:150px;max-width:480px}.search-box{display:flex;align-items:center;gap:13px;height:47px;border:1px solid #e3e7ef;border-radius:12px;background:#fcfdff;box-shadow:0 2px 5px #3d548a04;padding:0 13px}.search-box>.icon{width:18px;height:18px;opacity:.75}.search-box input{border:0;background:transparent;outline:0;min-width:0;flex:1;font-size:12px;color:#273c5f}.search-box input::placeholder{color:#7e899a}.search-box kbd{font:14px var(--font);padding:1px 8px;border:1px solid #e4e9f0;border-radius:5px;color:#79849a;background:#f6f8fc}.icon-btn{display:grid;place-items:center;border:0;background:transparent;width:29px;height:30px;flex-shrink:0;border-radius:6px;padding:4px}.icon-btn:hover{background:#f0f5fd}.clear-search{width:22px}.clear-search img{width:12px;height:12px}.workspace-switch{display:flex;align-items:center;gap:10px;height:49px;flex:0 0 224px;margin-left:auto;border:1px solid #e6eaf2;box-shadow:0 2px 5px #314f8510;padding:6px 10px;border-radius:12px;background:#fff}.workspace-icon{width:33px;height:33px;border-radius:9px;background:#1069ef;display:grid;place-items:center;box-shadow:inset 0 2px 5px #b9deff66,0 3px 7px #3686e62a}.workspace-icon img{width:21px;height:21px;filter:brightness(0) invert(1)}.workspace-switch label{min-width:0;flex:1}.workspace-switch strong{font-size:12px;display:block;font-weight:650;line-height:1.4}.workspace-switch select{appearance:none;border:0;background:transparent url('./demo-icons/chevron-down.svg') no-repeat right 0 center;background-size:11px;color:#929bad;font-size:10px;padding:0 16px 0 0;width:100%;outline-offset:0}.nav-right{display:flex;align-items:center;gap:18px;flex-shrink:0}.live-badge{display:flex;align-items:center;gap:7px;font-size:11px;white-space:nowrap;color:#238553;background:#eef9f3;padding:7px 10px;border-radius:20px}.live-badge>i{height:7px;width:7px;background:#34af67;border-radius:50%;box-shadow:0 0 0 3px #dff4e8}.live-badge>span{color:#60738d;margin-left:2px;font-size:11px;font-variant-numeric:tabular-nums}.notification{position:relative;width:24px}.notification>.icon{width:21px;height:21px}.notification>i{position:absolute;right:2px;top:1px;width:5px;height:5px;border-radius:50%;background:#ef7375;box-shadow:0 0 0 2px #fff}.nav-divider{height:28px;border-left:1px solid #e3e9f3}.profile{display:flex;gap:10px;align-items:center;white-space:nowrap}.profile-avatar{background:#e6f0ff;width:39px;height:39px;border-radius:50%;display:grid;place-items:center}.profile-avatar img{width:25px;height:25px}.profile strong{font-size:12px;display:block;font-weight:650}.profile small{font-size:10px;color:#8993a6;display:block;margin-top:2px}.stats{max-width:920px;position:fixed;z-index:20;left:16px;top:96px;right:calc(var(--side) + 48px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.stat{display:flex;align-items:center;gap:15px;height:95px;padding:17px 16px;border-radius:16px;min-width:0}.stat-icon{flex:0 0 58px;height:58px;display:grid;place-items:center;background:#f1f6ff;border-radius:14px;box-shadow:inset 0 0 14px #dfeaff60}.stat-icon img{width:29px;height:29px;filter:invert(34%) sepia(98%) saturate(2811%) hue-rotate(204deg) brightness(101%) contrast(103%)}.stat>div{min-width:0}.stat p{font-size:13px;margin:0 0 2px;white-space:nowrap}.stat-value{display:flex;align-items:center;gap:10px;white-space:nowrap}.stat strong{font-size:27px;line-height:1.3;letter-spacing:-.5px;font-weight:700}.stat .positive{font-size:10px;color:#26925e;background:#f2fbf4;line-height:1.2;padding:2px 0}.stat small{font-size:11px;color:#8b94a7;white-space:nowrap;display:block;margin-top:1px}.stat canvas{width:56px;height:56px;flex-shrink:0}
+.details{position:fixed;z-index:25;top:96px;right:16px;width:var(--side);padding:18px 24px 14px;max-height:calc(100vh - var(--dock) - 160px);overflow:auto;border-radius:17px;scrollbar-width:thin}.detail-head{display:flex;gap:12px;align-items:center;padding-bottom:16px;border-bottom:1px solid var(--line)}.detail-icon{width:53px;height:54px;border-radius:13px;background:#f0f5ff;display:grid;place-items:center;flex-shrink:0}.detail-icon img{width:29px;height:29px;filter:invert(34%) sepia(98%) saturate(2811%) hue-rotate(204deg) brightness(101%) contrast(103%)}.detail-head h1{font-size:16px;font-weight:700;margin:0;white-space:nowrap;letter-spacing:-.2px;flex:1}.detail-head .icon-btn{width:20px;padding:1px}.detail-head .icon{height:16px;width:16px}.badge{font-size:10px;background:#ecf4ff;color:#2866b2;padding:5px 8px;border-radius:5px;white-space:nowrap}.badge.done{color:#2f9165;background:#eaf7ef}.detail-facts{margin:14px 0 16px;display:grid;gap:9px}.detail-facts>div,.detail-meta>div{display:flex;justify-content:space-between;align-items:center;gap:15px;min-width:0}.detail-facts dt{font-size:13px;color:#8a91a2;flex-shrink:0}.detail-facts dd{font-size:13px;margin:0;text-align:right;font-weight:500;max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.detail-progress{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0 16px}.detail-progress>div:first-child{font-size:12px;margin-bottom:5px}.detail-progress>strong{font-size:16px;font-weight:600;display:block}.progress-line{display:flex;align-items:center;gap:17px;margin-top:11px}.progress-track{height:16px;border-radius:12px;background:#eaf0f9;overflow:hidden;flex:1}.progress-track>div{height:100%;background:#0b62f6;border-radius:12px;transition:width .4s linear}.progress-line>span{font-size:12px;min-width:30px;text-align:right;font-weight:600;font-variant-numeric:tabular-nums}.detail-meta{display:grid;gap:0;margin:12px 0 14px}.detail-meta>div{min-height:40px;border-bottom:1px solid #f0f3f8}.detail-meta>div:last-child{border-bottom:0}.detail-meta dt{display:flex;align-items:center;gap:9px;color:#818c9e;font-size:13px;white-space:nowrap}.detail-meta dt>img{width:16px;height:16px;padding:0;opacity:.7}.detail-meta dd{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:500;text-align:right;min-width:0;overflow-wrap:anywhere;margin:0}.mini-avatar{height:25px;width:25px;background:#eff4fb;border-radius:50%;display:grid;place-items:center;flex-shrink:0}.mini-avatar>img{width:14px;height:14px;filter:invert(29%) sepia(55%) saturate(4010%) hue-rotate(211deg) brightness(106%) contrast(103%)}.primary-button{width:100%;height:49px;border:1px solid #075ae0;border-radius:10px;display:flex;gap:18px;align-items:center;justify-content:center;background:#075ffc;box-shadow:0 2px 6px #0c60fb1c;color:#fff;font-size:13px;font-weight:600}.primary-button:hover{background:#0053e8}.primary-button>img{width:17px;height:17px;filter:invert(1)}.demo-disclaimer{display:none;text-align:center;font-size:9px;color:#99a4b9;margin:9px 0 0}.open-details{position:fixed;right:16px;top:97px;z-index:24;border:0;padding:13px 16px;display:flex;align-items:center;gap:9px;font-size:12px}.open-details>img{width:17px;height:17px;filter:invert(30%) sepia(98%) saturate(2530%) hue-rotate(210deg)}.scene-tools{position:fixed;bottom:calc(var(--dock) + 69px);left:22px;z-index:21;display:flex;gap:4px;align-items:center;padding:7px 9px;border-radius:11px;background:#fffffff0}.scene-tools button{height:30px;display:flex;align-items:center;gap:7px;padding:5px 9px;border:0;border-radius:7px;background:transparent;font-size:11px;color:#5274a6}.scene-tools button:hover{background:#edf4ff}.scene-tools img{height:16px;width:16px;opacity:.8}.tool-separator{height:21px;border-left:1px solid #e1e7f0;margin:0 4px}.reduce-label{display:flex;gap:5px;align-items:center;font-size:10px;color:#7c8da5;margin:0 6px;cursor:pointer}.reduce-label input{height:12px;width:12px;accent-color:var(--blue)}.scene-instruction{position:fixed;z-index:10;bottom:calc(var(--dock) + 47px);left:28px;font-size:9px;color:#8296b3;pointer-events:none}
+.workflow-dock{position:fixed;left:16px;right:16px;bottom:36px;z-index:26;height:var(--dock);padding:14px 22px 15px;border-radius:17px;background:#ffffffF5}.dock-content{display:grid;grid-template-columns:54% 20% 26%;height:100%;gap:0}.workflow{padding:0 25px 0 0;min-width:0}.workflow-title{display:flex;gap:12px;align-items:center}.workflow-icon{width:43px;height:43px;display:grid;place-items:center}.workflow-icon>img{width:31px;height:31px;filter:invert(29%) sepia(90%) saturate(4100%) hue-rotate(212deg) brightness(104%)}.workflow-title h2{font-size:23px;line-height:1.3;margin:0 0 2px;font-weight:700;letter-spacing:-.5px}.workflow-title p{margin:0;font-size:11px;color:#8e98aa}.stages{position:relative;display:grid;grid-template-columns:repeat(4,1fr);padding-top:12px;margin-top:5px}.stage-track{position:absolute;height:4px;background:#e0e5ed;left:4%;right:4%;top:35px;border-radius:5px;overflow:hidden}.stage-track>div{height:100%;background:#4389f6;transition:width .4s}.stage{position:relative;z-index:1;border:0;background:transparent;text-align:center;display:flex;flex-direction:column;align-items:center;padding:0;min-width:0}.stage-icon{height:45px;width:45px;background:#fafbfd;box-shadow:0 0 0 2px #e1e6ee,0 0 0 6px #f5f7fa;border-radius:50%;display:grid;place-items:center;margin-bottom:9px}.stage-icon>img{height:21px;width:21px;opacity:.35}.stage strong{font-size:13px;font-weight:600;line-height:1.5}.stage small{font-size:11px;color:#949caf;margin-top:1px;line-height:1.4;white-space:nowrap}.stage em{font-size:10px;line-height:1.4;color:#6494cf;font-style:normal;min-height:13px}.stage.active .stage-icon{background:#0968fc;box-shadow:0 0 0 4px #e3efff,0 0 16px #448cff55}.stage.active .stage-icon>img{filter:invert(1);opacity:1}.stage.completed .stage-icon{background:#f1f7ff;border-color:#b5d2ff;box-shadow:0 0 0 2px #c5dcff,0 0 0 6px #f7faff}.stage.completed .stage-icon>img{filter:invert(35%) sepia(99%) saturate(3532%) hue-rotate(209deg);opacity:1}.current-task{min-width:0;padding:6px 14px 0;border-left:1px solid #f0f3f8;background:#f9fbff8a}.current-task h3,.upcoming h3{font-size:11px;font-weight:600;margin:0 0 12px}.current-task-card{display:flex;align-items:center;gap:12px;width:100%;height:120px;border:0;border-radius:11px;background:#fff;box-shadow:0 2px 10px #43639704;text-align:left;padding:10px;min-width:0}.current-task-card:hover{background:#f4f8ff}.task-thumb{height:61px;width:61px;flex-shrink:0;border-radius:12px;background:#eef5ff;display:grid;place-items:center}.task-thumb>img{height:34px;width:34px;filter:invert(32%) sepia(93%) saturate(3460%) hue-rotate(211deg) brightness(103%)}.current-task-text{display:flex;flex-direction:column;min-width:0;flex:1}.current-task-text strong{font-size:12px;white-space:nowrap;font-weight:600}.current-task-text small{font-size:10px;color:#8a96aa;margin-top:3px}.current-task-text>span:not(.mini-progress){font-size:10px;color:#8a96aa;margin-top:12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.mini-progress{height:6px;border-radius:5px;width:100%;max-width:105px;background:#eaf0fa;margin-top:7px;overflow:hidden}.mini-progress>i{height:100%;display:block;background:#1470fc;border-radius:5px}.arrow-icon{height:14px;width:14px;opacity:.65;flex-shrink:0}.upcoming{padding:6px 0 0 20px;min-width:0;border-left:1px solid #f0f3f8}.queue-heading{display:flex;justify-content:space-between;gap:10px;align-items:baseline}.queue-heading>button{border:0;background:none;font-size:10px;color:#2d68b0;padding:0}.task-queue{display:grid;gap:2px}.queue-item{width:100%;height:40px;border:0;background:transparent;display:grid;grid-template-columns:minmax(70px,1.1fr) minmax(40px,.7fr) auto;gap:9px;align-items:center;font-size:10px;padding:0;text-align:left;border-radius:6px}.queue-item:hover{background:#f4f8ff}.queue-item>strong{font-size:10px;font-weight:600}.queue-item>span{color:#8e98aa;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.queue-item .queue-status{font-size:9px;text-align:center;background:#f1f4f9;color:#8e9db0;padding:4px 8px;border-radius:5px;min-width:51px}.queue-status.done{background:#edf8f0;color:#5c9573}.queue-status.running{background:#edf4ff;color:#5886c0}.queue-empty{font-size:11px;color:#99a5b7;padding:20px 0}.dock-toggle{display:none}
+.scene-pins{position:fixed;inset:0;z-index:12;pointer-events:none}.scene-pin{position:absolute;transform:translate(-50%,-100%);pointer-events:auto;display:flex;align-items:center;gap:9px;border:1px solid #d7e4f8;border-radius:9px;padding:8px 12px;background:#ffffffed;box-shadow:0 5px 14px #1c56a529;white-space:nowrap;color:#416182;font-size:11px;transition:background .15s}.scene-pin img{height:20px;width:20px;filter:invert(37%) sepia(77%) saturate(2118%) hue-rotate(199deg)}.scene-pin strong{display:block;font-size:11px;font-weight:600}.scene-pin small{font-size:9px;color:#96a9bd;display:block;text-align:left}.scene-pin.selected{background:#0969f9;border-color:#1479ff;color:#fff;box-shadow:0 5px 18px #0474ff54}.scene-pin.selected img{filter:brightness(0) invert(1)}.scene-pin.selected small{color:#c4e0ff}.scene-pin.selected:after{content:"";position:absolute;bottom:-7px;left:calc(50% - 7px);width:14px;height:14px;border-radius:2px;background:#0969f9;transform:rotate(45deg)}.scene-pin.done:not(.selected){border-color:#c6e4d1}.search-results{position:absolute;top:54px;left:0;right:0;padding:8px;border-radius:11px;max-height:320px;overflow:auto}.search-result{border:0;width:100%;text-align:left;background:transparent;border-radius:7px;padding:10px;display:flex;gap:11px;align-items:center}.search-result:hover{background:#f2f7ff}.search-result>img{width:19px;height:19px;opacity:.6}.search-result strong{font-size:12px;display:block;font-weight:500}.search-result small{font-size:10px;color:#8e9cb1;display:block}.notifications{position:fixed;right:140px;top:87px;z-index:96;width:320px;padding:17px 18px;border-radius:12px}.popover-title{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:600;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:4px}.popover-title>span{font-size:10px;font-weight:400;color:#97a6ba}.notification-item{padding:11px 0;border-bottom:1px solid #f0f3f8;font-size:11px;color:#5d7394}.notification-item small{font-size:10px;display:block;color:#9aa8bb;margin-top:4px}.notifications .empty{padding:18px 0;color:#95a3b7;font-size:12px}
+dialog{width:min(700px,90vw);max-height:85vh;border:1px solid #e2eaf7;border-radius:18px;padding:25px 28px;color:var(--ink);box-shadow:0 30px 110px #163a7840;background:#fff}dialog::backdrop{background:#203c6e4a;backdrop-filter:blur(5px)}dialog header{display:flex;align-items:center;gap:14px;padding-bottom:21px;border-bottom:1px solid var(--line)}.dialog-icon{display:grid;place-items:center;height:49px;width:49px;border-radius:12px;background:#f0f6ff}.dialog-icon>img{width:27px;height:27px;filter:invert(32%) sepia(80%) saturate(3333%) hue-rotate(208deg)}dialog header>div{flex:1}dialog header small{font-size:9px;letter-spacing:1px;color:#94a3b9}dialog h2{font-size:18px;margin:5px 0 0}dialog pre{font:13px/1.95 var(--font);white-space:pre-wrap;overflow-wrap:anywhere;max-height:50vh;overflow:auto;margin:20px 0 24px;color:#577092}dialog footer{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:17px;font-size:10px;color:#9ba9bd}dialog footer button{border:0;background:#1267ef;color:#fff;padding:9px 15px;border-radius:7px;font-size:12px}.toast{position:fixed;z-index:100;left:50%;bottom:calc(var(--dock) + 60px);transform:translateX(-50%);padding:11px 19px;background:#163f79ed;color:#fff;border-radius:9px;font-size:12px;box-shadow:0 6px 20px #2759ab30}
+@media(min-width:1600px){:root{--side:410px;--dock:210px}.stats{right:calc(var(--side) + 70px);max-width:1060px}.stat{height:100px}.nav{gap:32px}.search-wrap{max-width:600px}.details{padding:22px 27px}.detail-facts{gap:13px;margin-bottom:24px}.detail-meta>div{min-height:49px}.workflow-dock{padding:17px 25px}.workflow-title h2{font-size:23px}.stages{margin-top:7px}}
+@media(max-width:1280px){:root{--side:350px;--dock:190px}.nav{gap:15px;padding:10px 16px}.brand{flex-basis:180px;font-size:22px}.search-wrap{max-width:400px}.workspace-switch{flex-basis:205px}.nav-right{gap:13px}.profile>span:last-child{display:none}.stats{right:calc(var(--side) + 38px);gap:10px}.stat{padding:14px 10px;gap:10px}.stat-icon{flex-basis:43px;height:48px}.stat-icon img{width:26px;height:26px}.stat p{font-size:11px}.stat strong{font-size:24px}.stat small{font-size:9px}.stat .positive{display:none}.stat canvas{width:43px;height:43px}.details{padding:17px 20px 14px}.detail-head{gap:9px}.detail-icon{height:44px;width:44px}.detail-head h1{font-size:13px}.detail-meta>div{min-height:40px}.detail-facts{gap:7px}.workflow-dock{padding:14px 18px}.dock-content{grid-template-columns:51% 22% 27%}.workflow{padding-right:18px}.workflow-title h2{font-size:19px}.workflow-title p{font-size:10px}.task-thumb{height:45px;width:45px}.task-thumb>img{width:27px;height:27px}.current-task{padding-right:9px;padding-left:9px}.current-task-card{gap:8px;padding:8px}.upcoming{padding-left:15px}.queue-item{gap:6px}.stage strong{font-size:10px}.stage small{font-size:9px}.scene-tools{bottom:calc(var(--dock) + 69px)}}
+@media(max-width:1050px){.nav{gap:14px}.brand{flex-basis:166px;font-size:20px;gap:8px}.brand-icon img{height:31px;width:31px}.brand-icon{width:32px}.workspace-switch{flex-basis:190px}.nav-right{gap:12px}.nav-divider,.profile{display:none}.stats{right:16px;grid-template-columns:repeat(4,1fr)}.stat{height:83px;padding:12px 17px;gap:15px}.stat-icon{flex-basis:48px;height:48px}.stat p{font-size:12px}.stat small{font-size:10px}.stat canvas{width:48px;height:48px}.details{top:198px;max-height:calc(100vh - var(--dock) - 260px);width:350px}.open-details{top:198px}.notification{display:none}.dock-content{grid-template-columns:57% 43%}.upcoming{display:none}.current-task{padding-left:20px}.current-task-card{height:115px}.current-task-text>span:not(.mini-progress){margin-top:10px}.notifications{right:16px}.workspace-switch strong{font-size:11px}.workspace-switch select{font-size:9px}.scene-instruction{display:none}}
+@media(max-width:760px){:root{--dock:72px}.nav{height:61px;left:10px;right:10px;padding:7px 12px;border-radius:13px;gap:12px}.brand{font-size:20px;flex:1}.brand-icon{width:30px;height:36px}.brand-icon img{width:30px;height:30px}.workspace-switch{display:none}.nav-right{gap:8px}.live-badge{font-size:10px;gap:6px;padding:6px 9px}.live-badge>span{font-size:10px}.search-wrap{position:fixed;left:0;right:0;top:68px;max-width:none;padding:0;min-width:0}.search-box{height:41px;background:#fffffff5;border-radius:10px;box-shadow:0 3px 12px #3b6caa14}.search-results{top:48px}.search-box input{font-size:11px}.stats{left:10px;right:10px;top:131px;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.stat{height:79px;padding:9px;display:block;border-radius:11px}.stat-icon{display:none}.stat p{font-size:10px}.stat strong{font-size:23px}.stat small{font-size:8px;letter-spacing:-.3px}.stat canvas{display:none}.details{top:224px;left:12px;right:12px;bottom:98px;width:auto;max-height:none;padding:17px 20px;box-shadow:0 15px 80px #174a9140}.detail-head{padding-bottom:12px}.detail-head h1{font-size:14px}.detail-facts{margin:13px 0;gap:7px}.detail-progress{padding:13px 0}.detail-meta{margin:6px 0 10px}.detail-meta>div{min-height:38px}.detail-progress>strong{font-size:14px}.progress-track{height:11px}.primary-button{height:44px}.detail-facts dt,.detail-facts dd,.detail-meta dt{font-size:11px}.open-details{right:12px;top:225px;padding:10px 13px;font-size:11px;border-radius:10px}.scene-pin{padding:6px 9px;gap:6px}.scene-pin img{width:16px;height:16px}.scene-pin strong{font-size:10px}.scene-pin small{font-size:8px}.workflow-dock{left:10px;right:10px;bottom:12px;height:72px;padding:0;border-radius:13px;overflow:hidden}.dock-toggle{height:70px;width:100%;display:flex;align-items:center;justify-content:space-between;border:0;background:transparent;padding:0 19px;color:#16375f;font-size:14px;font-weight:600}.dock-toggle img{width:15px;height:15px;opacity:.6;transform:rotate(180deg)}.dock-content{display:none}.workflow-dock.expanded{height:330px}.workflow-dock.expanded .dock-toggle{height:53px;border-bottom:1px solid var(--line)}.workflow-dock.expanded .dock-toggle img{transform:none}.workflow-dock.expanded .dock-content{display:block;padding:13px 17px}.workflow-dock.expanded .workflow{padding:0}.workflow-title{gap:8px}.workflow-title h2{font-size:15px}.workflow-title p{font-size:9px}.workflow-icon{width:31px;height:31px}.workflow-icon img{width:24px;height:24px}.stages{padding-top:12px;margin-top:3px}.stage-icon{height:36px;width:36px;margin-bottom:7px}.stage-icon img{height:17px;width:17px}.stage-track{top:29px}.stage strong{font-size:9px}.stage small{font-size:8px}.stage em{font-size:8px}.current-task{padding:10px 0 0;border-left:0;background:none;margin-top:7px}.current-task h3{display:none}.current-task-card{height:72px;background:#f8faff;padding:8px 12px;border-radius:8px}.task-thumb{height:44px;width:44px}.current-task-text>span:not(.mini-progress){margin-top:3px}.current-task-text small{margin-top:1px}.mini-progress{margin-top:4px;height:4px}.scene-tools{bottom:96px;left:12px;padding:5px 6px;border-radius:9px}.scene-tools button{height:28px;padding:4px 7px;font-size:10px}.scene-tools img{height:14px;width:14px}.reduce-label{font-size:9px;margin:0 3px}.toast{bottom:155px;max-width:90%;font-size:11px;white-space:nowrap}.scene-loading{left:50%;top:48%;font-size:11px;width:max-content;max-width:85%}dialog{padding:20px;width:calc(100vw - 28px)}dialog h2{font-size:16px}dialog pre{font-size:12px}dialog footer{font-size:9px}}
+@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
+
+.live-badge{border:0}.live-badge #mode-label{color:inherit;margin:0}.live-badge.disconnected{background:#fff4df;color:#9c6d24}.live-badge.disconnected>i{background:#dba43b;box-shadow:0 0 0 3px #faeac8}.text-button{display:block;margin:9px auto 0;border:0;background:transparent;color:#3c76bf;font-size:11px;padding:4px}.source-status{position:fixed;top:205px;left:20px;z-index:22;max-width:min(520px,85vw);padding:10px 16px;font-size:12px;color:#926a31}.unrecorded{background:repeating-linear-gradient(135deg,#eaf0f9,#eaf0f9 8px,#f5f8fc 8px,#f5f8fc 16px)}body[data-mode=live] .demo-disclaimer{display:block}body[data-mode=live] .task-queue{max-height:130px;overflow:auto;scrollbar-width:thin}body[data-mode=live] .queue-item>strong{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}body[data-mode=live] .notifications{width:360px}body[data-mode=live] #notification-list{max-height:55vh;overflow:auto;scrollbar-width:thin}body[data-mode=live] .notification-item{display:block;width:100%;border:0;border-bottom:1px solid #f0f3f8;background:transparent;text-align:left;cursor:pointer}body[data-mode=live] .notification-item:hover{background:#f5f8ff}body[data-mode=live] .event-preview{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#7a8ca7;font-size:10px;margin-top:4px}body[data-mode=live] .workflow-title p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}body[data-mode=live] .workflow-title>div{min-width:0}body[data-mode=live] .detail-meta dd{max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}body[data-mode=live] .detail-meta dd:has(.mini-avatar){display:flex}body[data-mode=live] .scene-pin strong{max-width:140px;overflow:hidden;text-overflow:ellipsis}body[data-mode=live] #profile-caption{max-width:140px;overflow:hidden;text-overflow:ellipsis}body[data-mode=live] .detail-head h1{font-size:13px}body[data-mode=live] .scene-tools{max-width:calc(100vw - 24px);flex-wrap:wrap}body[data-mode=live] .detail-progress>strong{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+@media(max-width:760px){body[data-mode=live] .source-status{top:218px;left:12px}body[data-mode=live] #history-toggle{font-size:9px;padding:4px}body[data-mode=live] .scene-tools{gap:1px}body[data-mode=live] .scene-tools button{padding:4px 5px}body[data-mode=live] .reduce-label{margin:0 2px}body[data-mode=live] .detail-head h1{font-size:12px}body[data-mode=live] .detail-meta dd{max-width:55%}}
+
+
+.session-choice{display:block;width:100%;border:1px solid #e7eef9;border-radius:8px;background:#f8fbff;text-align:left;padding:10px 13px;margin:8px 0 13px;color:#3d628e;font-size:12px;white-space:pre-wrap;overflow-wrap:anywhere}.session-choice:hover,.session-choice[aria-pressed=true]{background:#eaf2ff;border-color:#9bc2ff}body[data-mode=live] .stat small{overflow:hidden;text-overflow:ellipsis}body[data-mode=live] #dialog-content>strong{display:block;margin:10px 0}
+/* 本机 Chromium 的 WebGL 与多层背景模糊组合会遮住指标文字，实时卡片沿用半透明白底。 */
+body[data-mode=live] .glass{backdrop-filter:none}
+/* 目录和会话分开选择，长路径保留在选项与提示中。 */
+.workspace-switch.harness-picker{flex:0 1 440px;min-width:340px;gap:12px}.harness-picker #directory-field{flex:1}.harness-picker label:last-child{flex:1.2}.workspace-switch.harness-picker label>span,.workspace-switch.harness-picker strong{display:block;font-size:11px;line-height:16px;color:#506580;font-weight:600}.workspace-switch.harness-picker select{display:block;min-width:0;height:22px;color:#233d60;font-size:12px;white-space:nowrap;text-overflow:ellipsis}.workspace-switch.harness-picker select:disabled{color:#657792}.session-picker-field{display:flex;flex-direction:column;gap:6px;white-space:normal;margin:18px 0}.session-picker-field>span{font:600 12px var(--font);color:#3d628e}.session-picker-field select{width:100%;min-width:0;padding:9px 10px;border:1px solid #c8d9ee;border-radius:8px;color:#233d60;background:#fff;font:12px var(--font)}
+@media(min-width:761px) and (max-width:1050px){.workspace-switch.harness-picker{flex-basis:380px;min-width:320px}body[data-mode=live] .nav:has(.harness-picker) .brand{flex:0 0 34px}body[data-mode=live] .nav:has(.harness-picker) .brand>span:last-child{display:none}}
+@media(min-width:761px) and (max-width:850px){.workspace-switch.harness-picker{flex-basis:360px;min-width:300px}body[data-mode=live] .nav:has(.harness-picker){gap:10px;padding-inline:12px}}
+@media(max-width:760px){
+  .workspace-switch.harness-picker{display:flex;position:fixed;left:10px;right:10px;top:116px;z-index:24;height:46px;min-width:0;flex:none;padding:0 10px;border:1px solid #e3e7ef;border-radius:12px;background:#fff;box-shadow:0 3px 12px #3b6caa14}
+  .search-wrap{z-index:27}
+  .search-results{z-index:26}
+  .stats{top:170px}
+  .details{top:263px}
+  .open-details{top:264px}
+  body[data-mode=live] .source-status{top:257px}
+  body:has(#agent-details:not([hidden])) .source-status{display:none}
+}
+
+/* 搜索与选择共用紧凑字段样式，目录和会话的标签放在触发器内。 */
+.search-box{height:44px;gap:9px;padding:0 12px;border-color:#dce4ef;background:#fbfcff;box-shadow:none;transition:border-color .16s,background-color .16s}
+.search-box:focus-within{border-color:var(--blue);background:#fff}
+.search-box:has(input:focus-visible){outline:3px solid #c7dcff;outline-offset:2px}
+.search-box input{height:100%;font-size:13px;caret-color:var(--blue)}
+.search-box input::placeholder{color:#64748b}
+.search-box input:focus-visible{outline:none}
+.search-box input::-webkit-search-cancel-button{display:none}
+.search-box kbd{display:grid;place-items:center;flex:0 0 23px;height:24px;padding:0;font-size:12px;color:#5d6d86;border-color:#dce4ef;background:#f3f6fb}
+.search-box .clear-search{width:28px;height:28px;padding:7px;border-radius:7px;transition:opacity .14s}
+.clear-search[aria-hidden=true]{visibility:hidden;pointer-events:none;opacity:0}
+.search-box .clear-search img{width:14px;height:14px}
+.search-box input::selection,.select-filter-input::selection{background:#d9e9ff;color:#153960}
+.search-results{top:52px;padding:6px;border-radius:12px;max-height:min(380px,55vh);overflow:hidden;background:#fff;backdrop-filter:none;box-shadow:0 12px 32px #18366328}
+.search-result-list{max-height:min(322px,calc(55vh - 42px));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#b9cae2 transparent}
+.search-result{min-height:48px;align-items:flex-start;gap:10px;padding:10px;border-radius:8px}
+.search-result>img{flex:0 0 18px;width:18px;height:18px;margin-top:2px;opacity:.75}
+.search-result>span{min-width:0}
+.search-result strong{font-size:12px;line-height:1.55;color:#223755;overflow-wrap:anywhere}
+.search-result small{font-size:11px;line-height:1.55;margin-top:2px;color:#5f718b;overflow-wrap:anywhere}
+.search-result[data-active=true]{background:#eaf2ff}
+.search-result[aria-selected=true]{color:var(--blue)}
+.search-status{margin:5px 5px 0;padding:8px 5px 3px;border-top:1px solid #edf1f7;color:#5f718b;font-size:11px;line-height:1.5}
+.search-note{margin:4px 6px 6px;padding:2px 4px;color:#6b7d95;font-size:11px;line-height:1.5}
+.search-results .queue-empty{padding:18px 12px;color:#61728b;font-size:12px}
+.workspace-switch{height:44px;padding:0;gap:8px;border:0;border-radius:0;background:transparent;box-shadow:none}
+.workspace-switch.harness-picker{gap:8px}
+.workspace-icon{flex:0 0 33px}
+.workspace-switch label{position:relative;display:block;height:44px;min-width:0}
+.workspace-switch label>strong,.workspace-switch label>span,.workspace-switch.harness-picker label>strong,.workspace-switch.harness-picker label>span{position:absolute;z-index:1;top:5px;left:11px;right:27px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#5f718b;font-size:11px;font-weight:500;line-height:14px;pointer-events:none}
+.office-select{min-width:0;width:100%}
+.select-trigger{display:flex;align-items:center;gap:8px;min-width:0;width:100%;height:44px;padding:0 11px;border:1px solid #dce4ef;border-radius:12px;background:#fbfcff;text-align:left;font-size:13px;line-height:1.4;color:#233d60;transition:border-color .16s,background-color .16s}
+.select-trigger:focus-visible{outline:3px solid #c7dcff;outline-offset:2px}
+.select-trigger[aria-expanded=true]{border-color:var(--blue);background:#fff}
+.workspace-switch .select-trigger{align-items:flex-end;padding-top:18px;padding-bottom:6px;font-size:12px;line-height:17px}
+.select-value{min-width:0;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
+.select-chevron{flex:0 0 12px;width:12px;height:12px;align-self:center;opacity:.65}
+.select-trigger[aria-expanded=true] .select-chevron{transform:rotate(180deg)}
+.select-trigger:disabled{opacity:1;cursor:default;background:#f2f5f9;border-color:#e2e8f0;color:#627086}
+.select-trigger:disabled .select-chevron{opacity:.35}
+.session-picker-field .office-select{width:100%}
+.session-picker-field .select-trigger{font-size:13px}
+
+/* Popover 进入顶层，弹窗内的目录列表也不受正文滚动区域裁切。 */
+.select-popover{position:fixed;inset:auto;margin:0;padding:6px;border:0;border-radius:12px;background:#fff;color:var(--ink);box-shadow:0 12px 32px #18366330;overflow:hidden;font:13px/1.45 var(--font);white-space:normal}
+.select-popover:popover-open{display:flex;flex-direction:column}
+.select-popover::backdrop{background:transparent;pointer-events:none}
+.select-filter{display:flex;align-items:center;flex-shrink:0;gap:9px;min-width:0;min-height:44px;margin:0 0 6px;padding:0 10px;border:1px solid #dce4ef;border-radius:9px;background:#fbfcff}
+.select-filter:focus-within{border-color:var(--blue);background:#fff}
+.select-filter>img{flex:0 0 16px;width:16px;height:16px;opacity:.65}
+.select-filter-input{flex:1;width:100%;min-width:0;height:42px;margin:0;padding:0;border:0;outline:none;background:transparent;color:#233d60;font:13px var(--font);caret-color:var(--blue)}
+.select-filter-input::placeholder{color:#64748b}
+.select-filter-input:focus-visible{outline:none}
+.select-filter-input::-webkit-search-cancel-button{display:none}
+.select-filter-clear{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;padding:7px;border:0;border-radius:7px;background:transparent}
+.select-filter-clear>img{width:14px;height:14px}
+.select-filter-clear[aria-hidden=true]{visibility:hidden;pointer-events:none}
+.select-options{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#b9cae2 transparent}
+.select-option{display:flex;align-items:center;gap:12px;min-height:48px;padding:10px;border-radius:8px;cursor:pointer}
+.select-option-copy{min-width:0;flex:1}
+.select-option strong{display:block;font-size:12px;font-weight:500;line-height:1.55;color:#233d60;overflow-wrap:anywhere}
+.select-option small{display:block;margin-top:3px;font-size:11px;line-height:1.55;color:#5f718b;overflow-wrap:anywhere}
+.select-option[data-active=true]{background:#eaf2ff}
+.select-option[aria-selected=true] strong{color:#0755ce;font-weight:600}
+.select-option[aria-disabled=true]{cursor:default;opacity:.55}
+.select-check{flex:0 0 15px;width:15px;height:15px;filter:invert(29%) sepia(97%) saturate(2998%) hue-rotate(211deg) brightness(99%)}
+.select-option:not([aria-selected=true]) .select-check{visibility:hidden}
+.select-empty{margin:0;padding:21px 12px;color:#61728b;font-size:12px;line-height:1.6}
+.select-popover:popover-open,.search-results:not([hidden]){animation:control-reveal .14s cubic-bezier(.16,1,.3,1)}
+@keyframes control-reveal{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
+@media(hover:hover) and (pointer:fine){.search-box:hover,.select-trigger:not(:disabled):hover{border-color:#afc3df}.select-trigger[aria-expanded=true]:hover,.search-box:focus-within:hover{border-color:var(--blue)}.select-option:not([aria-disabled=true]):hover,.search-result:hover{background:#eef4ff}.select-filter-clear:hover{background:#edf3fc}}
+@media(max-width:760px){.search-wrap{left:0;right:0}.search-box{height:44px;border-radius:12px}.search-box input{font-size:13px}.search-results{top:52px}.select-filter-input{font-size:16px}.select-option{min-height:48px}.session-picker-field .select-trigger{height:44px}}
+body[data-reduced-motion=true] .select-popover,body[data-reduced-motion=true] .search-results{animation:none}
+body[data-reduced-motion=true] .search-box,body[data-reduced-motion=true] .select-trigger,body[data-reduced-motion=true] .clear-search{transition:none}
+
+/* 点击显示器后的屏幕详情：放大该工位 Agent 的真实会话摘要与最近事件。 */
+.screen-modal{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:26px;background:#0b1730a8;animation:screen-modal-in .18s ease-out}
+.screen-modal-card{width:min(980px,94vw);max-height:92vh;display:flex;flex-direction:column;border:1px solid #29405f;border-radius:18px;background:#0d1729;color:#e7effc;box-shadow:0 30px 90px #04102199;overflow:hidden}
+.screen-modal-card header{display:flex;align-items:center;gap:12px;padding:14px 18px;background:#111d32;border-bottom:1px solid #22354f;flex-shrink:0}
+.screen-modal-dot{flex:0 0 9px;width:9px;height:9px;border-radius:50%;background:#5ee0a0;box-shadow:0 0 10px #5ee0a0}
+.screen-modal-title{display:flex;flex-direction:column;min-width:0;flex:1}
+.screen-modal-title strong{font-size:16px;font-weight:600;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.screen-modal-title small{font-size:12px;color:#9db1cd;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.screen-modal-close{flex:0 0 32px;width:32px;height:32px;border:0;border-radius:8px;background:#1b2b45;color:#c9d9ef;font-size:18px;line-height:1}
+.screen-modal-close:hover{background:#264063;color:#fff}
+.screen-modal-body{display:flex;justify-content:center;min-height:0;padding:14px 16px 4px;background:radial-gradient(120% 90% at 50% 0%,#16294a 0%,#0b1526 70%)}
+.screen-modal-body canvas{width:100%;max-width:680px;height:auto;max-height:calc(92vh - 210px);object-fit:contain;border:1px solid #2b4364;border-radius:9px;box-shadow:0 0 46px #2b7cff33,0 10px 30px #04102166;background:#0a1020}
+.screen-modal-live{display:none;margin:0;padding:14px 16px 6px;color:#c7d7ec;font:12px/1.7 "Cascadia Mono","Consolas","Microsoft YaHei",monospace;white-space:pre-wrap;overflow-wrap:anywhere;overflow:auto}
+.screen-modal-card footer{display:flex;align-items:center;gap:12px;padding:11px 18px 14px;font-size:12px;color:#9db1cd;min-width:0;flex-shrink:0}
+.screen-modal-meta{white-space:nowrap;color:#7fd1ff}
+.screen-modal-task{flex:1;min-width:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;color:#c7d7ec;line-height:1.5}
+.screen-modal-hint{white-space:nowrap;color:#9db1cd}
+@keyframes screen-modal-in{from{opacity:0}to{opacity:1}}
+@media(max-width:760px){.screen-modal{padding:10px}.screen-modal-card{width:100%;max-height:94vh;border-radius:14px}.screen-modal-body{display:none}.screen-modal-live{display:block;padding:14px}.screen-modal-card footer{flex-wrap:wrap;gap:6px 12px;padding:10px 14px 14px}.screen-modal-meta,.screen-modal-task{display:none}.screen-modal-hint{margin-left:auto}.screen-modal-close{flex-basis:44px;width:44px;height:44px;font-size:22px}.screen-modal-title strong{font-size:15px}}
+@media(prefers-reduced-motion:reduce){.screen-modal{animation:none}}
+
+/* 模式选择与通知中心 */
+.mode-field{position:relative;display:block;width:136px;min-width:136px;height:40px;flex:none}
+.mode-field>.mode-caption{position:absolute;z-index:1;top:4px;left:11px;font-size:10px;line-height:12px;color:#7c8ca4;pointer-events:none}
+.mode-field .office-select{width:100%}
+.mode-field .select-trigger{height:40px;padding:15px 9px 4px;border-radius:11px;font-size:12px;background:#fbfcff}
+.mode-field .select-trigger .select-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.mode-field .select-trigger .select-chevron{width:13px;height:13px;flex:none}
+.mode-field.disconnected .select-trigger{border-color:#f0d9a8;background:#fff8e9;color:#9c6d24}
+.mode-clock{font-size:11px;color:#71849c;font-variant-numeric:tabular-nums;min-width:34px;text-align:center}
+.notification{display:inline-flex!important;align-items:center;justify-content:center;width:34px;height:34px;border:0;background:transparent;border-radius:9px}
+.notification:hover{background:#f1f6ff}
+.notify-icon{width:22px;height:22px;color:#3b5a7d;overflow:visible}
+.notification>.notify-dot{position:absolute;right:4px;top:3px;width:8px;height:8px;border-radius:50%;background:#ef5b5b;box-shadow:0 0 0 2px #fff;animation:notify-pulse 2s ease-in-out infinite}
+.notification.has-unread .notify-icon{transform-origin:50% 12%;animation:notify-swing 2.6s ease-in-out infinite}
+.notification.has-unread .bell-wave{opacity:.55}
+.bell-wave{opacity:0;transition:opacity .2s}
+@keyframes notify-pulse{0%,100%{box-shadow:0 0 0 2px #fff,0 0 0 0 #ef5b5b55}50%{box-shadow:0 0 0 2px #fff,0 0 0 5px #ef5b5b00}}
+@keyframes notify-swing{0%,72%,100%{transform:rotate(0)}76%{transform:rotate(11deg)}80%{transform:rotate(-9deg)}84%{transform:rotate(7deg)}88%{transform:rotate(-4deg)}92%{transform:rotate(2deg)}}
+.popover-title>strong{font-size:13px;font-weight:650;color:#29486d}
+.popover-actions{display:flex;align-items:center;gap:8px}
+.popover-actions>span{font-size:10px;color:#97a6ba}
+#mark-read{border:0;background:transparent;color:#3c76bf;font-size:10px;padding:3px 5px;border-radius:6px}
+#mark-read:hover{background:#eef5ff}
+.notification-item{display:flex;align-items:flex-start;gap:10px;width:100%;border:0;border-bottom:1px solid #f0f3f8;background:transparent;text-align:left;padding:11px 4px;border-radius:8px}
+.notification-item:hover{background:#f6f9ff}
+.notification-item:last-child{border-bottom:0}
+.notify-type{flex:none;width:28px;height:28px;border-radius:9px;background:#eef4ff;display:grid;place-items:center}
+.notify-type img{width:15px;height:15px;opacity:.72}
+.notify-copy{display:block;min-width:0}
+.notify-title{display:block;font-size:11.5px;font-weight:600;color:#2f4c70}
+.notify-preview{display:block;font-size:10.5px;color:#7a8ca7;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.notify-time{display:block;font-style:normal;font-size:9.5px;color:#9aa8bb;margin-top:3px}
+body[data-mode=live] .notification-item{display:flex;border:0;border-bottom:1px solid #f0f3f8;background:transparent}
+body[data-mode=live] .notifications{width:360px}
+@media(max-width:1050px){.notification{display:inline-flex!important}.mode-clock{display:none}}
+@media(max-width:760px){.mode-field{width:118px;min-width:118px}.notifications{left:12px;right:12px;width:auto;top:78px}.notification-item{padding:10px 2px}.notify-preview{white-space:normal}}
+
+/* 语言切换（中 / EN） */
+.lang-switch{display:flex;align-items:center;gap:2px;padding:2px;border:1px solid #e3eaf5;border-radius:9px;background:#f7faff;flex:none}
+.lang-switch button{border:0;background:transparent;color:#7d8ea8;font-size:10.5px;font-weight:600;line-height:1;letter-spacing:.3px;padding:5px 7px;border-radius:6px}
+.lang-switch button:hover{color:#2f4c70;background:#eef4ff}
+.lang-switch button[aria-pressed=true],.lang-switch button.active{background:#fff;color:#2f6fbf;box-shadow:0 1px 3px rgba(47,76,112,.14)}
+@media(max-width:760px){.lang-switch{gap:0;padding:1px}.lang-switch button{padding:4px 5px;font-size:10px}}

package/public/demo.html

@@ -0,0 +1,64 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="color-scheme" content="light">
+  <title data-i18n="meta.demoTitle">Codex Office · 协作空间 Demo</title>
+  <link rel="icon" href="./demo-icons/box-seam-fill.svg">
+  <link rel="stylesheet" href="./demo.css">
+</head>
+<body>
+  <main class="demo-space" aria-label="Agent 三维协作空间" data-i18n-aria-label="demo.spaceAria">
+    <div id="demo-scene" class="demo-scene"></div>
+    <div id="scene-pins" class="scene-pins" aria-label="场景中的 Agent" data-i18n-aria-label="demo.pinsAria"></div>
+    <div id="scene-loading" class="scene-loading" role="status" data-i18n="demo.loading">正在布置协作空间…</div>
+  </main>
+  <header class="nav glass">
+    <a class="brand" href="./demo.html"><span class="brand-icon"><img src="./demo-icons/box-seam-fill.svg" alt=""></span><span>Codex<span class="brand-light">Office</span></span></a>
+    <div class="search-wrap">
+      <form id="search-form" class="search-box" role="search"><img class="icon" src="./demo-icons/search.svg" alt=""><input id="task-search" autocomplete="off" placeholder="搜索会话、任务、Agent 或事件…" data-i18n-placeholder="demo.searchPlaceholder" aria-label="搜索会话、任务或事件" data-i18n-aria-label="demo.searchAria"><button id="clear-search" class="clear-search icon-btn" type="button" aria-label="清除搜索" data-i18n-aria-label="demo.clearSearch" aria-hidden="true" tabindex="-1"><img class="icon" src="./demo-icons/x-lg.svg" alt=""></button><kbd>/</kbd></form>
+      <div id="search-results" class="search-results glass" hidden><div id="search-result-list" class="search-result-list"></div><p id="search-status" class="search-status" role="status" aria-live="polite"></p></div>
+    </div>
+    <div class="workspace-switch"><span class="workspace-icon"><img src="./demo-icons/diagram-3-fill.svg" alt=""></span><label id="directory-field" for="workspace-directory" hidden><span data-i18n="demo.directory">工作目录</span><select id="workspace-directory" aria-label="选择工作目录" data-i18n-aria-label="demo.directoryAria"></select></label><label for="scenario"><strong id="workspace-name">Codex Workspace</strong><select id="scenario" aria-label="选择演示任务" data-i18n-aria-label="demo.scenarioAria"><option value="search" data-label="任务搜索与筛选" data-description="DEMO-01" data-i18n="demo.option.search">任务搜索与筛选 · DEMO-01</option><option value="review" data-label="接口与回归审阅" data-description="DEMO-02" data-i18n="demo.option.review">接口与回归审阅 · DEMO-02</option></select></label></div>
+    <div class="nav-right"><label class="mode-field" for="mode-select"><span class="mode-caption" data-i18n="demo.mode">模式</span><select id="mode-select" aria-label="选择会话模式" data-i18n-aria-label="demo.modeAria" data-popover-min-width="190"><option value="live" data-i18n="demo.modeLive">真实会话</option><option value="demo" selected data-i18n="demo.modeDemo">演示会话</option></select></label><span id="demo-clock" class="mode-clock">00:16</span><div class="lang-switch" data-lang-switch role="group" aria-label="Language"><button type="button" data-lang="zh" aria-pressed="true">中</button><button type="button" data-lang="en" aria-pressed="false">EN</button></div><button id="notifications-button" class="icon-btn notification" aria-label="查看协作通知" data-i18n-aria-label="demo.notificationsAria" aria-expanded="false"><svg class="icon notify-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/><path class="bell-wave" d="M3.2 3.4a11 11 0 0 0-1.6 5.1M20.8 3.4a11 11 0 0 1 1.6 5.1"/></svg><i id="notification-dot" class="notify-dot" hidden></i></button><span class="nav-divider"></span><div class="profile"><span class="profile-avatar"><img src="./assets/agents/codex.png" alt=""></span><span><strong>Agent Team</strong><small id="profile-caption" data-i18n="demo.profile">本地协作演示</small></span></div></div>
+  </header>
+  <section class="stats" aria-label="协作统计" data-i18n-aria-label="demo.statsAria">
+    <article class="stat glass"><span class="stat-icon"><img src="./demo-icons/people-fill.svg" alt=""></span><div><p data-i18n="demo.activeAgents">活跃 Agent</p><div class="stat-value"><strong id="metric-active">4</strong><span id="active-hint" class="positive" data-i18n="demo.parallel">并行协作</span></div><small id="team-count-caption" data-i18n="demo.teamCaption">主 Agent + 3 位子 Agent</small></div></article>
+    <article class="stat glass"><span class="stat-icon"><img src="./demo-icons/stack.svg" alt=""></span><div><p data-i18n="demo.assigned">已分配任务</p><div class="stat-value"><strong id="metric-assigned">3</strong><span id="assigned-hint" class="positive" data-i18n="demo.assignedHint">分工已就绪</span></div><small id="assigned-caption" data-i18n="demo.assignedCaption">共 3 项独立子任务</small></div></article>
+    <article class="stat glass"><span class="stat-icon"><img src="./demo-icons/chat-left-text-fill.svg" alt=""></span><div><p data-i18n="demo.reports">已收到汇报</p><div class="stat-value"><strong id="metric-reports">0</strong><span id="report-hint" class="positive" data-i18n="demo.reportsHint">等待结果</span></div><small data-i18n="demo.reportsCaption">汇报后由主 Agent 汇总</small></div></article>
+    <article class="stat glass"><canvas id="progress-ring" width="112" height="112" aria-hidden="true"></canvas><div><p id="metric-progress-title" data-i18n="demo.progress">演示进度</p><div class="stat-value"><strong id="metric-progress">33%</strong></div><small id="stage-caption" data-i18n="demo.stageCaption">正在执行</small></div></article>
+  </section>
+  <aside id="agent-details" class="details glass" aria-label="Agent 任务详情" data-i18n-aria-label="demo.detailAria">
+    <div class="detail-head"><span class="detail-icon"><img id="detail-icon" src="./demo-icons/file-earmark-code-fill.svg" alt=""></span><h1 id="detail-code">任务 TASK-07845</h1><span id="detail-badge" class="badge">执行中</span><button id="close-details" class="icon-btn" aria-label="关闭 Agent 详情" data-i18n-aria-label="demo.closeDetails"><img class="icon" src="./demo-icons/x-lg.svg" alt=""></button></div>
+    <dl class="detail-facts"><div><dt data-i18n="demo.taskName">任务名称</dt><dd id="detail-task-title">搜索与筛选界面</dd></div><div><dt data-i18n="demo.project">所属项目</dt><dd id="detail-project">task-board</dd></div><div><dt data-i18n="demo.role">当前角色</dt><dd id="detail-role">前端实现</dd></div><div><dt data-i18n="demo.type">任务类型</dt><dd id="detail-type">界面开发</dd></div></dl>
+    <div class="detail-progress"><div data-i18n="demo.progressLabel">任务进度</div><strong id="detail-progress-label">正在执行分配任务</strong><div class="progress-line"><div class="progress-track"><div id="detail-progress-fill"></div></div><span id="detail-percent">42%</span></div></div>
+    <dl class="detail-meta"><div><dt><img src="./demo-icons/box-seam-fill.svg" alt=""><span data-i18n="demo.zone">工作区域</span></dt><dd id="detail-zone">A2 · 前端工作区</dd></div><div><dt><img src="./demo-icons/file-earmark-code-fill.svg" alt=""><span id="detail-activity-label" data-i18n="demo.files">相关文件</span></dt><dd id="detail-file">src/views/Tasks.vue</dd></div><div><dt><img src="./demo-icons/stack.svg" alt=""><span data-i18n="demo.relation">协作关系</span></dt><dd id="detail-parent">主 Agent → 子 Agent</dd></div><div><dt><img src="./demo-icons/people-fill.svg" alt=""><span data-i18n="demo.assignedTo">分配给</span></dt><dd><span class="mini-avatar"><img id="detail-agent-icon" src="./demo-icons/file-earmark-code-fill.svg" alt=""></span><span id="detail-name">前端 Agent</span></dd></div><div><dt><img src="./demo-icons/check-lg.svg" alt=""><span data-i18n="demo.stageMeta">当前阶段</span></dt><dd id="detail-stage">并行执行</dd></div></dl>
+    <button id="view-report" class="primary-button"><span data-i18n="demo.viewReport">查看任务详情</span><img src="./demo-icons/arrow-right.svg" alt=""></button>
+    <button id="view-task" class="text-button" hidden data-i18n="demo.viewSource">查看任务原文</button><p id="detail-disclaimer" class="demo-disclaimer" data-i18n="demo.disclaimer">模拟协作数据 · 不读取或执行真实任务</p>
+  </aside>
+  <button id="open-details" class="open-details glass" hidden><img src="./demo-icons/people-fill.svg" alt=""><span data-i18n="demo.agentDetails">Agent 详情</span></button>
+  <div id="notifications" class="notifications glass" hidden><div class="popover-title"><strong data-i18n="demo.updates">协作动态</strong><span class="popover-actions"><span id="event-mode" data-i18n="demo.simulatedEvents">模拟事件</span><button id="mark-read" type="button" data-i18n="demo.markAllRead">全部已读</button></span></div><div id="notification-list"></div></div>
+  <div class="scene-tools glass"><button id="toggle-play" aria-label="播放演示" data-i18n-aria-label="demo.play" title="播放演示" data-i18n-title="demo.play"><img id="play-icon" src="./demo-icons/play-fill.svg" alt=""><span id="play-label" data-i18n="demo.play">播放演示</span></button><span class="tool-separator"></span><button id="restart-demo" aria-label="重新开始演示" data-i18n-aria-label="demo.restart" title="重新开始" data-i18n-title="demo.restartTitle"><img src="./demo-icons/arrow-counterclockwise.svg" alt=""></button><button id="reset-demo-camera" aria-label="复位三维镜头" data-i18n-aria-label="demo.resetCamera" title="复位镜头" data-i18n-title="demo.resetCameraTitle"><img src="./demo-icons/crosshair.svg" alt=""></button><button id="team-picker" hidden data-i18n="demo.team">团队</button><button id="history-toggle" hidden data-i18n="demo.history">查看历史成员</button><label class="reduce-label"><input id="demo-reduced" type="checkbox"><span data-i18n="demo.reduceMotion">减少动画</span></label></div>
+  <span class="scene-instruction" data-i18n="demo.instruction">拖动旋转 · 滚轮缩放 · 点击工位或显示器查看详情</span>
+  <section id="workflow-dock" class="workflow-dock glass" aria-label="任务协作流程" data-i18n-aria-label="demo.workflowAria">
+    <button id="dock-toggle" class="dock-toggle" aria-expanded="false"><span data-i18n="demo.workflowToggle">协作流程与任务</span><img src="./demo-icons/chevron-down.svg" alt=""></button>
+    <div class="dock-content">
+      <div class="workflow"><div class="workflow-title"><span class="workflow-icon"><img src="./demo-icons/diagram-3-fill.svg" alt=""></span><div><h2 data-i18n="demo.workflowTitle">任务协作流程</h2><p id="workflow-subtitle" data-i18n="demo.workflowSubtitle">任务分析、并行执行与结果汇总</p></div></div>
+        <div class="stages"><div class="stage-track"><div id="stage-track-fill"></div></div>
+          <button class="stage" data-stage="0"><span class="stage-icon"><img src="./demo-icons/diagram-3-fill.svg" alt=""></span><strong data-i18n="demo.stage.analysis">分析与分配</strong><small id="stage-0-description">3 / 3 已分配</small><em></em></button>
+          <button class="stage" data-stage="1"><span class="stage-icon"><img src="./demo-icons/cpu-fill.svg" alt=""></span><strong data-i18n="demo.stage.parallel">并行执行</strong><small id="stage-1-description">3 位子 Agent</small><em></em></button>
+          <button class="stage" data-stage="2"><span class="stage-icon"><img src="./demo-icons/chat-left-text-fill.svg" alt=""></span><strong data-i18n="demo.stage.reports">结果汇报</strong><small id="stage-2-description">等待结果</small><em></em></button>
+          <button class="stage" data-stage="3"><span class="stage-icon"><img src="./demo-icons/check-lg.svg" alt=""></span><strong data-i18n="demo.stage.summary">主 Agent 总结</strong><small id="stage-3-description">等待汇报收齐</small><em></em></button>
+        </div>
+      </div>
+      <div class="current-task"><h3 data-i18n="demo.currentTask">当前任务</h3><button id="current-task-button" class="current-task-card"><span class="task-thumb"><img id="current-task-icon" src="./demo-icons/file-earmark-code-fill.svg" alt=""></span><span class="current-task-text"><strong id="current-task-code">TASK-07845</strong><small id="current-task-agent">前端 Agent · A2</small><span id="current-task-description">实现搜索与筛选</span><span class="mini-progress"><i id="current-progress-fill"></i></span></span><img class="arrow-icon" src="./demo-icons/arrow-right.svg" alt=""></button></div>
+      <div class="upcoming"><div class="queue-heading"><h3 id="queue-heading">团队任务 (3)</h3><button id="show-team" data-i18n="demo.viewAll">查看全部</button></div><div id="task-queue" class="task-queue"></div></div>
+    </div>
+  </section>
+  <dialog id="demo-dialog"><header><span class="dialog-icon"><img id="dialog-icon" src="./demo-icons/file-earmark-code-fill.svg" alt=""></span><div><small id="dialog-mode">CODEX OFFICE / DEMO</small><h2 id="dialog-title">任务详情</h2></div><button id="close-demo-dialog" class="icon-btn" aria-label="关闭任务弹窗" data-i18n-aria-label="demo.closeDialog"><img class="icon" src="./demo-icons/x-lg.svg" alt=""></button></header><pre id="dialog-content"></pre><footer><span id="dialog-caption" data-i18n="demo.dialogCaption">以上内容仅用于协作演示</span><button id="copy-demo-report" data-i18n="demo.copy">复制内容</button></footer></dialog>
+  <div id="source-status" class="source-status glass" role="status" hidden></div><div id="demo-toast" class="toast" role="status" hidden></div>
+  <script src="./vendor/office.js"></script>
+  <script type="module" src="./demo.js"></script>
+</body>
+</html>