@mstar-harness/dsh 3.8.0 → 3.8.2

package/dist/client.js

@@ -72,9 +72,47 @@ __export(exports_client, {
 });
 module.exports = __toCommonJS(exports_client);
 
+// src/client/panel/mstar-glyph.tsx
+var jsx_runtime = require("react/jsx-runtime");
+function MstarGlyph({ size = 16, className }) {
+  return /* @__PURE__ */ jsx_runtime.jsx("svg", {
+    className,
+    width: size,
+    height: size,
+    viewBox: "0 0 512 512",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsx_runtime.jsx("path", {
+      fill: "currentColor",
+      d: "M256 72l36 140 140 36-140 36-36 156-36-156-140-36 140-36 36-140z"
+    })
+  });
+}
+
+// src/client/panel/definition.ts
+var MSTAR_PANEL_ID = "@mstar-harness/dsh";
+var MSTAR_PANEL_KIND = "mstar-workflow";
+var MSTAR_GUIDE_ORDER = 20;
+function mstarPanelDefinition(t) {
+  const title = () => t("view.mstar-workflow");
+  return {
+    id: MSTAR_PANEL_ID,
+    kind: MSTAR_PANEL_KIND,
+    title,
+    guide: [{
+      order: MSTAR_GUIDE_ORDER,
+      title,
+      description: () => t("guide.description"),
+      icon: MstarGlyph
+    }]
+  };
+}
+
 // src/engine-status-wire.ts
 var ENGINE_STATUS_CHANNEL = "/api";
 var ENGINE_STATUS_ENDPOINT = "mstar/engineStatus";
+var MSTAR_ENGINE_STATUS_NAMESPACE = "mstar";
+var MSTAR_SELECT_WORKFLOW_METHOD = "selectWorkflow";
+var SELECT_WORKFLOW_ENDPOINT = `${MSTAR_ENGINE_STATUS_NAMESPACE}/${MSTAR_SELECT_WORKFLOW_METHOD}`;
 
 // src/client/panel/guards.ts
 function str(value) {
@@ -92,6 +130,36 @@ function record(value) {
 function unavailable(reason) {
   return { status: "unavailable", reason };
 }
+function selectionView(value) {
+  const view = record(value);
+  if (view === null)
+    return null;
+  const workflowId = str(view.workflowId);
+  const dir = str(view.dir);
+  if (view.kind === "active" || view.kind === "terminal") {
+    if (workflowId === null || dir === null)
+      return null;
+    if (view.kind === "terminal")
+      return { kind: "terminal", workflowId, dir };
+    const warning = record(view.warning);
+    const code2 = warning === null ? null : str(warning.code);
+    const message2 = warning === null ? null : str(warning.message);
+    return {
+      kind: "active",
+      workflowId,
+      dir,
+      ...code2 === null || message2 === null ? {} : { warning: { code: code2, message: message2 } }
+    };
+  }
+  if (view.kind !== "error")
+    return null;
+  const code = str(view.code);
+  const message = str(view.message);
+  if (code === null || message === null)
+    return null;
+  const ids = Array.isArray(view.activeWorkflowIds) ? view.activeWorkflowIds.filter((id) => str(id) !== null) : undefined;
+  return { kind: "error", code, message, ...ids === undefined ? {} : { activeWorkflowIds: ids } };
+}
 function parseEngineStatusResult(raw, sessionId, cwd) {
   const envelope = record(raw);
   if (envelope === null)
@@ -121,13 +189,45 @@ function parseEngineStatusResult(raw, sessionId, cwd) {
   const payload = record(value.payload);
   if (payload === null)
     return unavailable("malformed-payload");
-  return { status: "ok", payload, at, turn };
+  const binding = record(value.binding);
+  return {
+    status: "ok",
+    payload,
+    at,
+    turn,
+    binding: binding === null ? null : selectionView(binding.selection)
+  };
+}
+function parseSelectWorkflowResult(raw, sessionId, workflowId) {
+  const envelope = record(raw);
+  if (envelope === null)
+    return { status: "unavailable", reason: "malformed-response" };
+  if (envelope.ok !== true) {
+    const error = record(envelope.error);
+    const code = str(error?.code);
+    return { status: "unavailable", reason: code === null ? "transport-error" : `transport-error:${code}` };
+  }
+  const value = record(envelope.value);
+  if (value === null)
+    return { status: "unavailable", reason: "malformed-response" };
+  if (value.status === "unavailable") {
+    return { status: "unavailable", reason: str(value.reason) ?? "unavailable" };
+  }
+  if (value.status !== "selected")
+    return { status: "unavailable", reason: "malformed-response" };
+  const acknowledgedSession = str(value.sessionId);
+  const acknowledgedWorkflow = str(value.workflowId);
+  if (acknowledgedSession !== sessionId)
+    return { status: "unavailable", reason: "session-mismatch" };
+  if (acknowledgedWorkflow !== workflowId)
+    return { status: "unavailable", reason: "workflow-mismatch" };
+  return { status: "selected", sessionId, workflowId };
 }
 
 // src/client/panel/engine-status-client.ts
 var ENGINE_STATUS_REQUEST_TIMEOUT_MS = 5000;
 var ENGINE_STATUS_REFRESH_INTERVAL_MS = 30000;
-var EMPTY = { entries: new Map };
+var EMPTY = { entries: new Map, selections: new Map };
 
 class MstarEngineStatusClient {
   connection;
@@ -141,6 +241,8 @@ class MstarEngineStatusClient {
   refreshTimer = null;
   generationDisposer = null;
   generation = 0;
+  sessionGenerations = new Map;
+  stale = new Set;
   disposed = false;
   constructor(connection, options = {}) {
     this.connection = connection;
@@ -165,8 +267,10 @@ class MstarEngineStatusClient {
   ensure(sessionId, cwd, anchorTime) {
     if (this.disposed)
       return;
-    if (this.snapshot.entries.get(sessionId)?.anchorTime === anchorTime)
-      return;
+    if (this.snapshot.entries.get(sessionId)?.anchorTime === anchorTime) {
+      if (!this.stale.delete(sessionId))
+        return;
+    }
     const key = `${sessionId}\x00${anchorTime}`;
     if (this.inFlight.has(key))
       return;
@@ -182,9 +286,56 @@ class MstarEngineStatusClient {
     this.inFlight.clear();
     if (this.snapshot.entries.size === 0)
       return;
-    this.snapshot = EMPTY;
+    this.snapshot = { ...this.snapshot, entries: new Map };
+    this.notify();
+  }
+  invalidateSession(sessionId) {
+    if (this.disposed)
+      return;
+    this.sessionGenerations.set(sessionId, this.sessionGen(sessionId) + 1);
+    const prefix = `${sessionId}\x00`;
+    for (const key of [...this.inFlight.keys()]) {
+      if (key.startsWith(prefix))
+        this.inFlight.delete(key);
+    }
+    this.stale.add(sessionId);
+  }
+  async selectWorkflow(sessionId, cwd, workflowId) {
+    if (this.disposed)
+      return { status: "unavailable", reason: "disposed" };
+    if (this.snapshot.selections.get(sessionId)?.state === "pending") {
+      return { status: "unavailable", reason: "selection-pending" };
+    }
+    this.setSelection(sessionId, { state: "pending" });
+    const answer = await this.callSelect(sessionId, cwd, workflowId);
+    if (answer.status === "selected") {
+      this.invalidateSession(sessionId);
+      this.setSelection(sessionId, { state: "selected", workflowId: answer.workflowId });
+    } else {
+      this.setSelection(sessionId, { state: "failed", reason: answer.reason });
+    }
+    return answer;
+  }
+  async callSelect(sessionId, cwd, workflowId) {
+    if (this.connection === null || this.connection === undefined || typeof this.connection.rpc?.call !== "function") {
+      return { status: "unavailable", reason: "no-connection" };
+    }
+    try {
+      const raw = await this.withDeadline((signal) => this.connection.rpc.call(ENGINE_STATUS_CHANNEL, SELECT_WORKFLOW_ENDPOINT, { args: { sessionId, cwd, workflowId } }, signal));
+      return parseSelectWorkflowResult(raw, sessionId, workflowId);
+    } catch (error) {
+      return { status: "unavailable", reason: `transport-error:${error?.message ?? "unknown"}` };
+    }
+  }
+  setSelection(sessionId, state) {
+    const selections = new Map(this.snapshot.selections);
+    selections.set(sessionId, state);
+    this.snapshot = { ...this.snapshot, selections };
     this.notify();
   }
+  sessionGen(sessionId) {
+    return this.sessionGenerations.get(sessionId) ?? 0;
+  }
   dispose() {
     this.disposed = true;
     this.generationDisposer?.();
@@ -228,6 +379,7 @@ class MstarEngineStatusClient {
   }
   async fetch(sessionId, cwd, anchorTime) {
     const generation = this.generation;
+    const sessionGeneration = this.sessionGen(sessionId);
     let answer;
     if (this.connection === null || this.connection === undefined || typeof this.connection.rpc?.call !== "function") {
       answer = { status: "unavailable", reason: "no-connection" };
@@ -239,7 +391,7 @@ class MstarEngineStatusClient {
         answer = { status: "unavailable", reason: `transport-error:${error?.message ?? "unknown"}` };
       }
     }
-    this.write(generation, sessionId, cwd, anchorTime, answer);
+    this.write(generation, sessionGeneration, sessionId, cwd, anchorTime, answer);
   }
   async withDeadline(call) {
     if (this.timeoutMs <= 0 || typeof setTimeout !== "function")
@@ -264,19 +416,22 @@ class MstarEngineStatusClient {
       this.abort.signal.removeEventListener("abort", relay);
     }
   }
-  write(generation, sessionId, cwd, anchorTime, fetch) {
+  write(generation, sessionGeneration, sessionId, cwd, anchorTime, fetch) {
     if (this.disposed)
       return;
     if (generation !== this.generation)
       return;
+    if (sessionGeneration !== this.sessionGen(sessionId))
+      return;
     if ((this.snapshot.entries.get(sessionId)?.anchorTime ?? anchorTime) > anchorTime)
       return;
     this.writeEntry(sessionId, { anchorTime, cwd, fetchedAt: Date.now(), fetch });
   }
   writeEntry(sessionId, entry) {
+    this.stale.delete(sessionId);
     const entries = new Map(this.snapshot.entries);
     entries.set(sessionId, entry);
-    this.snapshot = { entries };
+    this.snapshot = { ...this.snapshot, entries };
     this.notify();
   }
   notify() {
@@ -288,10 +443,28 @@ class MstarEngineStatusClient {
   }
 }
 
+// src/client/panel/MstarPanelTitle.tsx
+var jsx_runtime2 = require("react/jsx-runtime");
+function MstarPanelTitle({ useTabInfo }) {
+  const { tab } = useTabInfo();
+  return /* @__PURE__ */ jsx_runtime2.jsxs("span", {
+    style: { display: "inline-flex", alignItems: "center", gap: "var(--mstar-space-1, 4px)" },
+    children: [
+      /* @__PURE__ */ jsx_runtime2.jsx(MstarGlyph, {
+        size: 14
+      }),
+      /* @__PURE__ */ jsx_runtime2.jsx("span", {
+        children: tab.title
+      })
+    ]
+  });
+}
+
 // src/client/panel/locale.ts
 var NS = "mstar-panel";
 var zh = {
-  "view.mstar-workflow": "MStar 工作流",
+  "view.mstar-workflow": "启明星工作流",
+  "guide.description": "查看工作区状态、计划与迭代进度",
   "tab.tasks": "任务迭代",
   "tab.agents": "代理执行",
   "tab.events": "事件记录",
@@ -315,6 +488,7 @@ var zh = {
   "event-log.field.expected": "预期角色",
   "event-log.field.settled": "已结算",
   "event-log.field.duration": "耗时",
+  "event-log.field.child-id": "子会话 ID",
   "event-log.field.run-id": "运行 ID",
   "event-log.field.name": "运行名称",
   "event-log.field.members": "成员数",
@@ -384,6 +558,7 @@ var zh = {
   "zone.agents.group.plan-more": "+{n} 更多",
   "flow.empty": "暂无实际派发（记录自 agent-flow plan 合并起生效）",
   "flow.settle-only": "仅有结算记录（无派发证据）",
+  "flow.link-only": "仅有身份记录（无派发证据）",
   "flow.degraded": "agentFlow 证据缺失",
   "flow.unexpected": "未匹配角色",
   "flow.in-flight": "已派发",
@@ -394,6 +569,10 @@ var zh = {
   "state.title": "工作区状态",
   "state.selection": "所选工作流",
   "state.selection.history": "历史视图（终端快照）",
+  "state.selection.unbound": "存在多个活动工作流——请为本会话选择一个。本会话没有租约，也不在任何工作流工作区内。选择之前写入会暂停。其他会话保持各自的绑定。",
+  "state.selection.pick": "选择 {workflowId}",
+  "state.selection.pending": "正在提交选择…",
+  "state.selection.failed": "选择失败：{reason}",
   "state.plans": "计划",
   "state.residuals": "未决残留",
   "state.policy": "策略",
@@ -414,7 +593,8 @@ var zh = {
   "freshness.refresh-note": "该会话已存储的快照——不是实时值"
 };
 var en = {
-  "view.mstar-workflow": "MStar Workflow",
+  "view.mstar-workflow": "Morning Star Workflow",
+  "guide.description": "Workspace state, plans, and iteration progress",
   "tab.tasks": "Task Iteration",
   "tab.agents": "Agent Run",
   "tab.events": "Event Log",
@@ -438,6 +618,7 @@ var en = {
   "event-log.field.expected": "Expected role",
   "event-log.field.settled": "Settled",
   "event-log.field.duration": "Duration",
+  "event-log.field.child-id": "Child session ID",
   "event-log.field.run-id": "Run ID",
   "event-log.field.name": "Run name",
   "event-log.field.members": "Members",
@@ -507,6 +688,7 @@ var en = {
   "zone.agents.group.plan-more": "+{n} more",
   "flow.empty": "No actual dispatches yet (recording starts at agent-flow plan merge)",
   "flow.settle-only": "Settle records only (no dispatch evidence)",
+  "flow.link-only": "Identity records only (no dispatch evidence)",
   "flow.degraded": "No agent-flow evidence (ledger missing)",
   "flow.unexpected": "Unexpected roles",
   "flow.in-flight": "dispatched",
@@ -517,6 +699,10 @@ var en = {
   "state.title": "Workspace state",
   "state.selection": "Selected workflow",
   "state.selection.history": "history view (terminal snapshot)",
+  "state.selection.unbound": "Multiple active workflows — pick one for this session. This session has no lease and is not inside a workflow worktree. Writes pause until you pick. Other sessions stay on their own binding.",
+  "state.selection.pick": "Select {workflowId}",
+  "state.selection.pending": "Committing your pick…",
+  "state.selection.failed": "Pick failed: {reason}",
   "state.plans": "Plans",
   "state.residuals": "Open residuals",
   "state.policy": "Policy",
@@ -537,8 +723,21 @@ var en = {
   "freshness.refresh-note": "the stored snapshot for this session — never a live value"
 };
 
+// src/client/panel/panel-store.ts
+var import_dsh_client_store = require("@deepseek-ai/dsh-client-store");
+function createPanelStore() {
+  return import_dsh_client_store.defineStore({
+    init: () => ({ byTab: {} }),
+    actions: {
+      select(d, tabId, section) {
+        d.byTab[tabId] = section;
+      }
+    }
+  });
+}
+
 // src/client/panel/PanelView.tsx
-var import_react4 = require("react");
+var React2 = __toESM(require("react"));
 
 // src/client/panel/panel.module.css
 var css = `
@@ -553,37 +752,74 @@ var css = `
 }
 
 
-.\\32 0fd0e45_root {
+.\\32 0fd0e45_root,
+.f83e09fa_emptyRoot {
   --mstar-space-1: 4px;
   --mstar-space-2: 8px;
   --mstar-space-3: 12px;
   --mstar-space-4: 16px;
   --mstar-space-5: 24px;
   --mstar-space-6: 32px;
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) 300px;   
-  grid-template-rows: minmax(0, 1fr);             
-  grid-template-areas: 'main sidebar';
+}
+
+.\\32 0fd0e45_root {
+  display: flex;
+  flex-direction: column;
   height: 100%;
   min-height: 0;
   width: 100%;
-  padding: 0;                                     
-  
-  padding-bottom: calc(var(--dsh-composer-height, 152px) + var(--mstar-space-3));
   overflow: hidden;                               
+  container-type: inline-size;
 }
 
 
-.\\32 0fd0e45_root[data-mstar-panel='no-harness'] {
-  grid-template-columns: 1fr;
-  grid-template-areas: 'main';
+
+.\\31 843711c_groupGrid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: var(--mstar-space-4);
 }
 
 
-.\\35 8245a20_noHarnessCard {
-  flex: 1;
+
+@container (max-width: 480px) {
+  .dd4ec22c_scroll {
+    padding: var(--mstar-space-3);
+  }
+
+  .\\38 1fe4f58_meta {
+    padding: var(--mstar-space-3);
+  }
+
+  .\\31 843711c_groupGrid {
+    gap: var(--mstar-space-3);
+  }
+}
+
+
+
+@container (min-width: 720px) {
+  .\\31 843711c_groupGrid {
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  }
+}
+
+
+.f83e09fa_emptyRoot {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
   min-height: 0;
   width: 100%;
+  padding: var(--mstar-space-4);
+  overflow: hidden;
+}
+
+
+.\\35 8245a20_noHarnessCard {
+  flex: 1 0 auto;
+  width: 100%;
   max-width: 400px;
   align-self: center;
   display: flex;
@@ -618,50 +854,16 @@ var css = `
   font: var(--dsw-font-xxxs-11);
 }
 
-@media (max-width: 860px) {
-  .\\32 0fd0e45_root {
-    grid-template-columns: 1fr;
-    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
-    grid-template-areas:
-      'main'
-      'sidebar';
-  }
-  .c87acfc7_sidebar {
-    border-left: 0;
-    border-top: 1px solid var(--dsw-alias-border-l1);
-  }
-  
-  .\\37 7aea5a6_iterationHeadSplit {
-    flex-direction: column;
-  }
-  .\\37 7aea5a6_iterationHeadSplit > .c3b8dcb0_iterationBranches {
-    flex: 0 1 auto;
-    max-width: none;
-  }
-}
 
 
-.f83e09fa_emptyRoot {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
+.dd4ec22c_scroll {
+  flex: 1 1 auto;
   min-height: 0;
-  width: 100%;
-  padding: var(--mstar-space-4);
-  overflow: hidden;
-}
-
-
-
-.ea90e208_main {
-  grid-area: main;
   display: flex;
   flex-direction: column;
-  min-width: 0;
-  min-height: 0;
   padding: var(--mstar-space-4);
-  overflow: hidden;                               
+  overflow-y: auto;
+  overflow-x: hidden;
 }
 
 
@@ -670,7 +872,7 @@ var css = `
   display: flex;
   flex: none;
   gap: var(--mstar-space-1);
-  padding: 0;
+  padding: var(--mstar-space-1) var(--mstar-space-2);
   margin: 0 0 var(--mstar-space-2);
   border-bottom: 1px solid var(--dsw-alias-border-l1);
 }
@@ -680,7 +882,7 @@ var css = `
   appearance: none;
   border: 0;
   background: none;
-  padding: var(--mstar-space-2) var(--mstar-space-3);
+  padding: var(--mstar-space-1) var(--mstar-space-2);
   color: var(--dsw-alias-label-secondary);
   font: var(--dsw-font-xxs-12);
   cursor: pointer;
@@ -698,19 +900,10 @@ var css = `
 }
 
 
-.\\39 0bec3c2_content {
-  flex: 1;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
 
 
 .\\33 b1c4147_iterationPage {
-  flex: 1;
-  min-height: 0;
+  flex: 1 0 auto;
   display: flex;
   flex-direction: column;
   gap: var(--mstar-space-3);
@@ -820,49 +1013,39 @@ var css = `
 
 .\\37 7aea5a6_iterationHeadSplit {
   display: flex;
-  align-items: stretch;
-  gap: var(--mstar-space-4);
+  flex-direction: column;
+  gap: var(--mstar-space-3);
   min-width: 0;
 }
 
-@media (min-width: 861px) {
-  
-  .\\37 7aea5a6_iterationHeadSplit > .c3b8dcb0_iterationBranches {
-    flex: 0 1 260px;   
-    max-width: 280px;
-    min-width: 0;
-  }
+.\\37 7aea5a6_iterationHeadSplit > .c3b8dcb0_iterationBranches {
+  min-width: 0;
 }
 
 .\\37 7aea5a6_iterationHeadSplit > .c52f7b85_iterationStepsRow {
-  flex: 1 1 0;   
   min-width: 0;
 }
 
 
 .c52f7b85_iterationStepsRow {
   display: flex;
+  flex-direction: column;
   align-items: stretch;
-  gap: var(--mstar-space-3);
+  gap: var(--mstar-space-2);
   margin: 0;
   padding: 0;
   list-style: none;
-  overflow-x: auto;
-  overscroll-behavior: contain;
 }
 
 .\\38 1013a9d_iterationStepItem {
-  flex: 1 1 0;
   min-width: 0;
   display: flex;
-  flex-direction: column;
   align-items: center;
-  justify-content: center;
-  gap: var(--mstar-space-1);
-  text-align: center;
+  gap: var(--mstar-space-2);
 }
 
 .\\37 befde45_iterationStepBadge {
+  flex: none;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -877,6 +1060,7 @@ var css = `
 }
 
 .d6cd23a5_iterationStepPhase {
+  flex: 1 1 auto;
   overflow-wrap: anywhere;
   color: var(--dsw-alias-label-secondary);
   font: var(--dsw-font-xxxs-11);
@@ -884,6 +1068,7 @@ var css = `
 
 
 .de293024_iterationStepChip {
+  flex: none;
   display: inline-flex;
   align-items: center;
   padding: 0 var(--mstar-space-2);
@@ -933,6 +1118,7 @@ var css = `
 
 
 .afea5850_iterationVerdictSeat {
+  flex: none;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1009,32 +1195,19 @@ var css = `
 
 
 .\\38 7f7efbe_iterationTasks {
-  flex: 1;
-  min-height: 0;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-}
-
-
-
-.c87acfc7_sidebar {
-  grid-area: sidebar;
   display: flex;
   flex-direction: column;
+  gap: var(--mstar-space-3);
   min-width: 0;
-  min-height: 0;
-  border-left: 1px solid var(--dsw-alias-border-l1);
 }
 
 
-.a0b80516_sidebarScroll {
-  flex: 1;
-  min-height: 0;
-  overflow-y: auto;
+
+.c87acfc7_sidebar {
   display: flex;
   flex-direction: column;
-  gap: var(--mstar-space-4);
-  padding: var(--mstar-space-4);
+  gap: var(--mstar-space-2);
+  min-width: 0;
 }
 
 
@@ -1240,6 +1413,65 @@ var css = `
   font-weight: 600;
 }
 
+
+.\\36 7818fcf_picker {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mstar-space-2);
+}
+
+.c6520e3e_pickerCopy {
+  margin: 0;
+  color: var(--dsw-alias-label-caption);
+  font: var(--dsw-font-xxxs-11);
+}
+
+.e81be137_pickerList {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mstar-space-1);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.\\36 3bf9208_pickerItem {
+  display: flex;
+  min-width: 0;
+}
+
+.\\35 9b39fff_pickerButton {
+  appearance: none;
+  min-width: 0;
+  max-width: 100%;
+  padding: var(--mstar-space-1) var(--mstar-space-2);
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 999px;
+  background: none;
+  color: var(--dsw-alias-label-secondary);
+  font: var(--dsw-font-xxxs-11);
+  text-align: left;
+  overflow-wrap: anywhere;
+  cursor: pointer;
+  transition: color 150ms ease, border-color 150ms ease;   
+}
+
+.\\35 9b39fff_pickerButton:hover:not(:disabled) {
+  color: var(--dsw-alias-label-primary);
+  border-color: var(--dsw-alias-state-business-primary);
+}
+
+.\\35 9b39fff_pickerButton:disabled {
+  color: var(--dsw-alias-label-caption);
+  cursor: default;
+}
+
+.e14449f9_pickerStatus {
+  margin: 0;
+  color: var(--dsw-alias-label-caption);
+  font: var(--dsw-font-xxxs-11);
+}
+
 .\\31 8a7beee_empty {
   margin: 0;
   color: var(--dsw-alias-label-caption);
@@ -1271,7 +1503,7 @@ if (typeof document !== "undefined" && document.querySelector("style[data-plugin
   tag.textContent = css;
   document.head.appendChild(tag);
 }
-var panel_module_default = { root: "20fd0e45_root", emptyRoot: "f83e09fa_emptyRoot", noHarnessCard: "58245a20_noHarnessCard", noHarnessIcon: "ffb65da7_noHarnessIcon", noHarnessTitle: "81e1817c_noHarnessTitle", noHarnessHint: "a2289da7_noHarnessHint", sidebar: "c87acfc7_sidebar", iterationHeadSplit: "77aea5a6_iterationHeadSplit", iterationBranches: "c3b8dcb0_iterationBranches", main: "ea90e208_main", tabNav: "4bb38bc9_tabNav", tab: "98f72e4c_tab", tabActive: "59e199de_tabActive", content: "90bec3c2_content", iterationPage: "3b1c4147_iterationPage", iterationHead: "8a629a8e_iterationHead", iterationSummary: "2d1bee34_iterationSummary", iterationSummaryId: "17162a99_iterationSummaryId", iterationSummaryVerdict: "d3d74135_iterationSummaryVerdict", iterationSummaryStatus: "d9a886be_iterationSummaryStatus", iterationSummaryStatusMuted: "13bf2f41_iterationSummaryStatusMuted", iterationSummaryHint: "ede5708d_iterationSummaryHint", iterationHeadBody: "64d1da62_iterationHeadBody", iterationStepsRow: "c52f7b85_iterationStepsRow", iterationStepItem: "81013a9d_iterationStepItem", iterationStepBadge: "7befde45_iterationStepBadge", iterationStepPhase: "d6cd23a5_iterationStepPhase", iterationStepChip: "de293024_iterationStepChip", iterationVerdictSeat: "afea5850_iterationVerdictSeat", iterationVerdict: "ebe6bbcd_iterationVerdict", iterationBranchesTitle: "e6921da6_iterationBranchesTitle", iterationBranchList: "8a2cd65c_iterationBranchList", iterationBranchRow: "997b0230_iterationBranchRow", iterationBranchLabel: "6cafc032_iterationBranchLabel", iterationBranchValue: "cdcd06ed_iterationBranchValue", iterationTasks: "87f7efbe_iterationTasks", sidebarScroll: "a0b80516_sidebarScroll", meta: "81fe4f58_meta", metaLine: "0fc275e2_metaLine", section: "fcdd0ccc_section", sectionTitle: "aded23ea_sectionTitle", subTitle: "b7190159_subTitle", defList: "26763614_defList", defTerm: "670df156_defTerm", defValue: "3f1b3a05_defValue", planList: "a129f16e_planList", residualList: "113e0aa2_residualList", leaseList: "33dfcc85_leaseList", violationList: "999efdc0_violationList", planId: "744bf63f_planId", leasePlan: "560663a6_leasePlan", leaseHolder: "a68a6d03_leaseHolder", leaseWorktree: "db027b44_leaseWorktree", findingSeverity: "1797fd51_findingSeverity", findingTitle: "c80b7bb0_findingTitle", findingPlan: "616667ad_findingPlan", violationCode: "e42c0bfd_violationCode", knowledgeCategories: "e2098247_knowledgeCategories", planStatus: "a3021d7c_planStatus", truncated: "1849d129_truncated", knowledge: "3eb5feeb_knowledge", direction: "df6dc76a_direction", selection: "4364e615_selection", selectionId: "0ae21b10_selectionId", selectionMeta: "5e43d3a8_selectionMeta", selectionWarning: "da64723f_selectionWarning", selectionCode: "ac988a64_selectionCode", empty: "18a7beee_empty", freshness: "c75c59b0_freshness" };
+var panel_module_default = { root: "20fd0e45_root", emptyRoot: "f83e09fa_emptyRoot", groupGrid: "1843711c_groupGrid", scroll: "dd4ec22c_scroll", meta: "81fe4f58_meta", noHarnessCard: "58245a20_noHarnessCard", noHarnessIcon: "ffb65da7_noHarnessIcon", noHarnessTitle: "81e1817c_noHarnessTitle", noHarnessHint: "a2289da7_noHarnessHint", tabNav: "4bb38bc9_tabNav", tab: "98f72e4c_tab", tabActive: "59e199de_tabActive", iterationPage: "3b1c4147_iterationPage", iterationHead: "8a629a8e_iterationHead", iterationSummary: "2d1bee34_iterationSummary", iterationSummaryId: "17162a99_iterationSummaryId", iterationSummaryVerdict: "d3d74135_iterationSummaryVerdict", iterationSummaryStatus: "d9a886be_iterationSummaryStatus", iterationSummaryStatusMuted: "13bf2f41_iterationSummaryStatusMuted", iterationSummaryHint: "ede5708d_iterationSummaryHint", iterationHeadBody: "64d1da62_iterationHeadBody", iterationHeadSplit: "77aea5a6_iterationHeadSplit", iterationBranches: "c3b8dcb0_iterationBranches", iterationStepsRow: "c52f7b85_iterationStepsRow", iterationStepItem: "81013a9d_iterationStepItem", iterationStepBadge: "7befde45_iterationStepBadge", iterationStepPhase: "d6cd23a5_iterationStepPhase", iterationStepChip: "de293024_iterationStepChip", iterationVerdictSeat: "afea5850_iterationVerdictSeat", iterationVerdict: "ebe6bbcd_iterationVerdict", iterationBranchesTitle: "e6921da6_iterationBranchesTitle", iterationBranchList: "8a2cd65c_iterationBranchList", iterationBranchRow: "997b0230_iterationBranchRow", iterationBranchLabel: "6cafc032_iterationBranchLabel", iterationBranchValue: "cdcd06ed_iterationBranchValue", iterationTasks: "87f7efbe_iterationTasks", sidebar: "c87acfc7_sidebar", metaLine: "0fc275e2_metaLine", section: "fcdd0ccc_section", sectionTitle: "aded23ea_sectionTitle", subTitle: "b7190159_subTitle", defList: "26763614_defList", defTerm: "670df156_defTerm", defValue: "3f1b3a05_defValue", planList: "a129f16e_planList", residualList: "113e0aa2_residualList", leaseList: "33dfcc85_leaseList", violationList: "999efdc0_violationList", planId: "744bf63f_planId", leasePlan: "560663a6_leasePlan", leaseHolder: "a68a6d03_leaseHolder", leaseWorktree: "db027b44_leaseWorktree", findingSeverity: "1797fd51_findingSeverity", findingTitle: "c80b7bb0_findingTitle", findingPlan: "616667ad_findingPlan", violationCode: "e42c0bfd_violationCode", knowledgeCategories: "e2098247_knowledgeCategories", planStatus: "a3021d7c_planStatus", truncated: "1849d129_truncated", knowledge: "3eb5feeb_knowledge", direction: "df6dc76a_direction", selection: "4364e615_selection", selectionId: "0ae21b10_selectionId", selectionMeta: "5e43d3a8_selectionMeta", selectionWarning: "da64723f_selectionWarning", selectionCode: "ac988a64_selectionCode", picker: "67818fcf_picker", pickerCopy: "c6520e3e_pickerCopy", pickerList: "e81be137_pickerList", pickerItem: "63bf9208_pickerItem", pickerButton: "59b39fff_pickerButton", pickerStatus: "e14449f9_pickerStatus", empty: "18a7beee_empty", freshness: "c75c59b0_freshness" };
 
 // src/client/panel/plan-sort.ts
 var PLAN_CAP = 5;
@@ -1546,23 +1778,6 @@ function bucketOf(role) {
     return "reviewer";
   return null;
 }
-function sddImplementColumnId(stages) {
-  const s = stages.find((x) => x.stage === "sdd-implement");
-  return s === undefined ? null : s.id;
-}
-function superviseEdges(stages, entries) {
-  const columnId = sddImplementColumnId(stages);
-  if (columnId === null)
-    return [];
-  const evidenced = entries.some((e) => e.view.kind === "dispatch" && bucketOf(e.view.role) !== null);
-  return [{
-    kind: "supervise",
-    source: `${columnId}:implementor`,
-    target: `${columnId}:reviewer`,
-    entityKey: null,
-    evidenced
-  }];
-}
 function entityKeyOf(role) {
   if (role !== "" && KNOWN_AGENTS.some((a) => a.id === role))
     return role;
@@ -1637,37 +1852,6 @@ function aggregateEntities(entries, pairStatus, currentStep) {
     idle: false
   }));
 }
-function actualEdges(entries) {
-  const byPlan = new Map;
-  entries.forEach((e, idx) => {
-    const v = e.view;
-    if (v.kind !== "dispatch")
-      return;
-    if (v.planId === null)
-      return;
-    const key = entityKeyOf(v.role);
-    const list = byPlan.get(v.planId);
-    if (list === undefined)
-      byPlan.set(v.planId, [{ key, ts: v.ts, idx }]);
-    else
-      list.push({ key, ts: v.ts, idx });
-  });
-  const pairEdges = new Map;
-  for (const planId of Array.from(byPlan.keys()).sort()) {
-    const rows = byPlan.get(planId).slice().sort((a, b) => a.ts - b.ts || (a.key < b.key ? -1 : a.key > b.key ? 1 : 0) || a.idx - b.idx);
-    for (let i = 0;i + 1 < rows.length; i++) {
-      if (rows[i].key === rows[i + 1].key)
-        continue;
-      const a = rows[i].key;
-      const b = rows[i + 1].key;
-      if (a === GENERAL_BUCKET || b === GENERAL_BUCKET)
-        continue;
-      const pairKey = a < b ? `${a}|${b}` : `${b}|${a}`;
-      pairEdges.set(pairKey, { kind: "actual", source: a, target: b, entityKey: null });
-    }
-  }
-  return Array.from(pairEdges.values());
-}
 function idleEntities(evidencedRoles, litKeys, currentStep) {
   const out = [];
   for (const known of KNOWN_AGENTS) {
@@ -1742,7 +1926,6 @@ function projectAgents(source, currentStep) {
       empty: false,
       note: null,
       entities: idleEntities(new Set, new Set, currentStep),
-      edges: superviseEdges(stages, []),
       executing: 0,
       pending: 0,
       activePlanId,
@@ -1751,7 +1934,7 @@ function projectAgents(source, currentStep) {
   }
   const entries = classifyFlowRows(rawEvents);
   const empty = rawEvents.length === 0;
-  const note = empty ? "empty" : entries.some((e) => e.view.kind === "dispatch") ? null : "settle-only";
+  const note = empty ? "empty" : entries.some((e) => e.view.kind === "dispatch") ? null : entries.length > 0 && entries.every((e) => e.view.kind === "subagent-link") ? "link-only" : "settle-only";
   const iterationRow = source == null ? null : source.iteration;
   const iterationId = iterationRow === null || iterationRow === undefined ? null : str(iterationRow.iterationId);
   const planRows = Array.isArray(rawPlans) ? rawPlans.map(planRow) : [];
@@ -1784,13 +1967,9 @@ function projectAgents(source, currentStep) {
   const lit = aggregateEntities(filtered, pairStatus, currentStep);
   const litKeys = new Set(lit.map((e) => e.key));
   const entities = [...lit, ...idleEntities(evidencedRoles, litKeys, currentStep)];
-  const edges = [
-    ...actualEdges(filtered),
-    ...superviseEdges(stages, entries)
-  ];
   const executing = entities.filter((e) => e.status === "running").length;
   const pending = stages.reduce((sum, s) => sum + (evidenced.has(s.id) ? 0 : s.roles.length), 0);
-  return { stages, degraded: false, empty, note, entities, edges, executing, pending, activePlanId, activePlanCount };
+  return { stages, degraded: false, empty, note, entities, executing, pending, activePlanId, activePlanCount };
 }
 var FLOW_EVENT_WINDOW = 50;
 function roleStageIndex() {
@@ -1835,6 +2014,8 @@ function flowEventOf(raw, index, stageIndex) {
     };
   }
   if (kind === "settle") {
+    const childId2 = str(row?.childId);
+    const taskRef = str(row?.taskRef);
     return {
       id: `${ts}-${kind}-${index}`,
       ts,
@@ -1849,7 +2030,30 @@ function flowEventOf(raw, index, stageIndex) {
       stage: matched ?? null,
       settled: false,
       ...row?.paired === true ? { paired: true } : {},
-      durationMs: count(row?.durationMs)
+      durationMs: count(row?.durationMs),
+      ...childId2 !== null ? { childId: childId2 } : {},
+      ...taskRef !== null ? { taskRef } : {}
+    };
+  }
+  if (kind === "subagent-link") {
+    const childId2 = str(row?.childId);
+    const taskRef = str(row?.taskRef);
+    return {
+      id: `${ts}-${kind}-${index}`,
+      ts,
+      kind,
+      role,
+      planId: str(row?.planId),
+      taskId: str(row?.taskId),
+      taskCategory: null,
+      agent: str(row?.agent),
+      status: "unknown",
+      expected: matched !== undefined,
+      stage: matched ?? null,
+      settled: false,
+      durationMs: null,
+      ...childId2 !== null ? { childId: childId2 } : {},
+      ...taskRef !== null ? { taskRef } : {}
     };
   }
   const runId = str(row?.runId);
@@ -1960,19 +2164,19 @@ function projectFlowEvents(source) {
 }
 
 // src/client/panel/panel-meta.tsx
-var jsx_runtime = require("react/jsx-runtime");
+var jsx_runtime3 = require("react/jsx-runtime");
 function PanelMeta({ t, source }) {
-  return /* @__PURE__ */ jsx_runtime.jsxs("footer", {
+  return /* @__PURE__ */ jsx_runtime3.jsxs("footer", {
     className: panel_module_default.meta,
     "data-mstar-meta": true,
     "data-mstar-watermark": true,
     children: [
-      /* @__PURE__ */ jsx_runtime.jsx("p", {
+      /* @__PURE__ */ jsx_runtime3.jsx("p", {
         className: panel_module_default.metaLine,
         "data-mstar-meta-version": true,
         children: t("watermark.version", { version: str(source.version) ?? t("panel.unknown") })
       }),
-      /* @__PURE__ */ jsx_runtime.jsx("p", {
+      /* @__PURE__ */ jsx_runtime3.jsx("p", {
         className: panel_module_default.metaLine,
         "data-mstar-meta-harness": true,
         children: t("watermark.harness", { dir: source.harnessDir ?? t("watermark.none") })
@@ -1982,7 +2186,8 @@ function PanelMeta({ t, source }) {
 }
 
 // src/client/panel/state-section.tsx
-var jsx_runtime2 = require("react/jsx-runtime");
+var jsx_runtime4 = require("react/jsx-runtime");
+var NO_IDS = [];
 function enforcementLabel(t, enforcement) {
   if (enforcement === null || enforcement === undefined || typeof enforcement !== "object") {
     return t("panel.unknown");
@@ -1992,7 +2197,16 @@ function enforcementLabel(t, enforcement) {
   const flag = hard === null ? t("panel.unknown") : hard ? t("state.enforcement.hard") : t("state.enforcement.soft");
   return source === null ? flag : `${flag} (${source})`;
 }
-function StateSection({ t, state, enforcement }) {
+function ackStandsFor(selection, workflowId) {
+  if (selection === null)
+    return true;
+  if (selection.kind === "active")
+    return selection.workflowId === workflowId;
+  if (selection.kind === "error")
+    return selection.activeWorkflowIds?.includes(workflowId) ?? false;
+  return false;
+}
+function StateSection({ t, state, enforcement, selection, pick, select }) {
   const plans = Array.isArray(state?.plans) ? state.plans : [];
   const sortedPlans = sortPlans(plans);
   const visiblePlans = sortedPlans.slice(0, PLAN_CAP);
@@ -2002,231 +2216,274 @@ function StateSection({ t, state, enforcement }) {
   const hiddenFindings = findings === null ? 0 : Math.max(0, findings.length - FINDINGS_CAP);
   const leases = Array.isArray(state?.leases) ? state.leases : [];
   const knowledge = state?.knowledge ?? null;
-  const selection = state?.selection;
-  return /* @__PURE__ */ jsx_runtime2.jsxs("section", {
+  const acked = pick.state === "selected" && ackStandsFor(selection, pick.workflowId) ? pick.workflowId : null;
+  const activeId = selection?.kind === "active" ? selection.workflowId : acked;
+  const activeWarning = selection?.kind === "active" ? selection.warning : undefined;
+  const errorView = selection?.kind === "error" ? selection : null;
+  const unbound = selection?.kind === "error" && (selection.activeWorkflowIds?.length ?? 0) > 0 ? selection : null;
+  const candidates = unbound?.activeWorkflowIds ?? NO_IDS;
+  const commit = select;
+  return /* @__PURE__ */ jsx_runtime4.jsxs("section", {
     className: panel_module_default.section,
     "data-mstar-section": "state",
     children: [
-      /* @__PURE__ */ jsx_runtime2.jsx("h2", {
+      /* @__PURE__ */ jsx_runtime4.jsx("h2", {
         className: panel_module_default.sectionTitle,
         children: t("state.title")
       }),
-      /* @__PURE__ */ jsx_runtime2.jsx("h3", {
+      /* @__PURE__ */ jsx_runtime4.jsx("h3", {
         className: panel_module_default.subTitle,
         children: t("state.selection")
       }),
-      selection?.kind === "active" ? /* @__PURE__ */ jsx_runtime2.jsxs("p", {
+      activeId !== null ? /* @__PURE__ */ jsx_runtime4.jsxs("p", {
         className: panel_module_default.selection,
         "data-selection-kind": "active",
-        "data-selection-workflow": selection.workflowId,
+        "data-selection-workflow": activeId,
         children: [
-          /* @__PURE__ */ jsx_runtime2.jsx("span", {
+          /* @__PURE__ */ jsx_runtime4.jsx("span", {
             className: panel_module_default.selectionId,
-            children: selection.workflowId
+            children: activeId
           }),
-          selection.warning !== undefined ? /* @__PURE__ */ jsx_runtime2.jsx("span", {
+          activeWarning !== undefined ? /* @__PURE__ */ jsx_runtime4.jsx("span", {
             className: panel_module_default.selectionWarning,
             "data-selection-warning": true,
-            children: selection.warning.message
+            children: activeWarning.message
           }) : null
         ]
-      }) : selection?.kind === "terminal" ? /* @__PURE__ */ jsx_runtime2.jsxs("p", {
+      }) : selection?.kind === "terminal" ? /* @__PURE__ */ jsx_runtime4.jsxs("p", {
         className: panel_module_default.selection,
         "data-selection-kind": "terminal",
         "data-selection-workflow": selection.workflowId,
         children: [
-          /* @__PURE__ */ jsx_runtime2.jsx("span", {
+          /* @__PURE__ */ jsx_runtime4.jsx("span", {
             className: panel_module_default.selectionId,
             children: selection.workflowId
           }),
-          /* @__PURE__ */ jsx_runtime2.jsx("span", {
+          /* @__PURE__ */ jsx_runtime4.jsx("span", {
             className: panel_module_default.selectionMeta,
             "data-selection-history": true,
             children: t("state.selection.history")
           })
         ]
-      }) : /* @__PURE__ */ jsx_runtime2.jsxs("p", {
+      }) : /* @__PURE__ */ jsx_runtime4.jsxs("p", {
         className: panel_module_default.selection,
         "data-selection-kind": "error",
-        "data-selection-code": selection?.code ?? t("panel.unknown"),
+        "data-selection-code": errorView?.code ?? t("panel.unknown"),
         children: [
-          /* @__PURE__ */ jsx_runtime2.jsx("span", {
+          /* @__PURE__ */ jsx_runtime4.jsx("span", {
             className: panel_module_default.selectionCode,
-            children: selection?.code ?? t("panel.unknown")
+            children: errorView?.code ?? t("panel.unknown")
           }),
-          /* @__PURE__ */ jsx_runtime2.jsx("span", {
+          /* @__PURE__ */ jsx_runtime4.jsx("span", {
             className: panel_module_default.selectionMeta,
-            children: selection?.message ?? t("state.none")
+            children: errorView?.message ?? t("state.none")
           })
         ]
       }),
-      /* @__PURE__ */ jsx_runtime2.jsx("h3", {
+      unbound !== null && commit !== null ? /* @__PURE__ */ jsx_runtime4.jsxs("div", {
+        className: panel_module_default.picker,
+        "data-mstar-picker": true,
+        "data-picker-code": unbound.code,
+        children: [
+          /* @__PURE__ */ jsx_runtime4.jsx("p", {
+            className: panel_module_default.pickerCopy,
+            "data-picker-copy": true,
+            children: t("state.selection.unbound")
+          }),
+          /* @__PURE__ */ jsx_runtime4.jsx("ul", {
+            className: panel_module_default.pickerList,
+            children: candidates.map((id) => /* @__PURE__ */ jsx_runtime4.jsx("li", {
+              className: panel_module_default.pickerItem,
+              children: /* @__PURE__ */ jsx_runtime4.jsx("button", {
+                type: "button",
+                className: panel_module_default.pickerButton,
+                "data-picker-option": id,
+                disabled: pick.state === "pending",
+                onClick: () => commit(id),
+                children: t("state.selection.pick", { workflowId: id })
+              })
+            }, id))
+          }),
+          pick.state === "pending" ? /* @__PURE__ */ jsx_runtime4.jsx("p", {
+            className: panel_module_default.pickerStatus,
+            "data-picker-pending": true,
+            children: t("state.selection.pending")
+          }) : null,
+          pick.state === "failed" ? /* @__PURE__ */ jsx_runtime4.jsx("p", {
+            className: panel_module_default.pickerStatus,
+            "data-picker-failed": true,
+            "data-picker-reason": pick.reason,
+            children: t("state.selection.failed", { reason: pick.reason })
+          }) : null
+        ]
+      }) : null,
+      /* @__PURE__ */ jsx_runtime4.jsx("h3", {
         className: panel_module_default.subTitle,
         children: t("state.plans")
       }),
-      visiblePlans.length === 0 ? /* @__PURE__ */ jsx_runtime2.jsx("p", {
+      visiblePlans.length === 0 ? /* @__PURE__ */ jsx_runtime4.jsx("p", {
         className: panel_module_default.empty,
         "data-mstar-empty": "no-plans",
         children: t("state.none")
-      }) : /* @__PURE__ */ jsx_runtime2.jsx("ul", {
+      }) : /* @__PURE__ */ jsx_runtime4.jsx("ul", {
         className: panel_module_default.planList,
-        children: visiblePlans.map((plan, i) => /* @__PURE__ */ jsx_runtime2.jsxs("li", {
+        children: visiblePlans.map((plan, i) => /* @__PURE__ */ jsx_runtime4.jsxs("li", {
           "data-plan-id": str(plan.id) ?? "unknown",
           "data-plan-status": str(plan.status) ?? "unknown",
           children: [
-            /* @__PURE__ */ jsx_runtime2.jsx("span", {
+            /* @__PURE__ */ jsx_runtime4.jsx("span", {
               className: panel_module_default.planStatus,
               "data-status": str(plan.status) ?? "unknown",
               children: str(plan.status) ?? t("panel.unknown")
             }),
-            /* @__PURE__ */ jsx_runtime2.jsx("span", {
+            /* @__PURE__ */ jsx_runtime4.jsx("span", {
               className: panel_module_default.planId,
               children: str(plan.id) ?? t("panel.unknown")
             })
           ]
         }, str(plan.id) ?? `plan-${i}`))
       }),
-      hiddenPlans > 0 ? /* @__PURE__ */ jsx_runtime2.jsx("p", {
+      hiddenPlans > 0 ? /* @__PURE__ */ jsx_runtime4.jsx("p", {
         className: panel_module_default.truncated,
         "data-plan-truncated": true,
         children: t("state.plans.more", { count: String(hiddenPlans) })
       }) : null,
-      /* @__PURE__ */ jsx_runtime2.jsx("h3", {
+      /* @__PURE__ */ jsx_runtime4.jsx("h3", {
         className: panel_module_default.subTitle,
         children: t("state.residuals")
       }),
-      visibleFindings === null || visibleFindings.length === 0 ? /* @__PURE__ */ jsx_runtime2.jsx("p", {
+      visibleFindings === null || visibleFindings.length === 0 ? /* @__PURE__ */ jsx_runtime4.jsx("p", {
         className: panel_module_default.empty,
         "data-mstar-empty": "no-residuals",
         children: t("state.none")
-      }) : /* @__PURE__ */ jsx_runtime2.jsx("ul", {
+      }) : /* @__PURE__ */ jsx_runtime4.jsx("ul", {
         className: panel_module_default.residualList,
-        children: visibleFindings.map((finding, i) => /* @__PURE__ */ jsx_runtime2.jsxs("li", {
+        children: visibleFindings.map((finding, i) => /* @__PURE__ */ jsx_runtime4.jsxs("li", {
           "data-residual-finding": true,
           "data-residual-finding-id": str(finding.id) ?? "unknown",
           "data-residual-finding-severity": str(finding.severity) ?? "unknown",
           "data-residual-finding-plan": str(finding.planId) ?? "unknown",
           children: [
-            /* @__PURE__ */ jsx_runtime2.jsx("span", {
+            /* @__PURE__ */ jsx_runtime4.jsx("span", {
               className: panel_module_default.findingSeverity,
               "data-severity": str(finding.severity) ?? "unknown",
               children: str(finding.severity) ?? t("panel.unknown")
             }),
-            /* @__PURE__ */ jsx_runtime2.jsx("span", {
+            /* @__PURE__ */ jsx_runtime4.jsx("span", {
               className: panel_module_default.findingTitle,
               children: str(finding.title) ?? t("panel.unknown")
             }),
-            str(finding.planId) !== null ? /* @__PURE__ */ jsx_runtime2.jsx("span", {
+            str(finding.planId) !== null ? /* @__PURE__ */ jsx_runtime4.jsx("span", {
               className: panel_module_default.findingPlan,
               children: finding.planId
             }) : null
           ]
         }, str(finding.id) ?? `finding-${i}`))
       }),
-      hiddenFindings > 0 ? /* @__PURE__ */ jsx_runtime2.jsx("p", {
+      hiddenFindings > 0 ? /* @__PURE__ */ jsx_runtime4.jsx("p", {
         className: panel_module_default.truncated,
         "data-residual-truncated": true,
         children: t("state.residual.more", { count: String(hiddenFindings) })
       }) : null,
-      /* @__PURE__ */ jsx_runtime2.jsx("h3", {
+      /* @__PURE__ */ jsx_runtime4.jsx("h3", {
         className: panel_module_default.subTitle,
         children: t("state.policy")
       }),
-      /* @__PURE__ */ jsx_runtime2.jsxs("dl", {
+      /* @__PURE__ */ jsx_runtime4.jsxs("dl", {
         className: panel_module_default.defList,
         children: [
-          /* @__PURE__ */ jsx_runtime2.jsx("dt", {
+          /* @__PURE__ */ jsx_runtime4.jsx("dt", {
             className: panel_module_default.defTerm,
             children: t("state.enforcement")
           }),
-          /* @__PURE__ */ jsx_runtime2.jsx("dd", {
+          /* @__PURE__ */ jsx_runtime4.jsx("dd", {
             className: panel_module_default.defValue,
             "data-field": "enforcement",
             children: enforcementLabel(t, enforcement)
           }),
-          /* @__PURE__ */ jsx_runtime2.jsx("dt", {
+          /* @__PURE__ */ jsx_runtime4.jsx("dt", {
             className: panel_module_default.defTerm,
             children: t("state.policy.push")
           }),
-          /* @__PURE__ */ jsx_runtime2.jsx("dd", {
+          /* @__PURE__ */ jsx_runtime4.jsx("dd", {
             className: panel_module_default.defValue,
             "data-field": "push-policy",
             children: str(state?.pushPolicy) ?? t("state.none")
           }),
-          /* @__PURE__ */ jsx_runtime2.jsx("dt", {
+          /* @__PURE__ */ jsx_runtime4.jsx("dt", {
             className: panel_module_default.defTerm,
             children: t("state.policy.worktree")
           }),
-          /* @__PURE__ */ jsx_runtime2.jsx("dd", {
+          /* @__PURE__ */ jsx_runtime4.jsx("dd", {
             className: panel_module_default.defValue,
             "data-field": "worktree-mode",
             children: str(state?.worktreeMode) ?? t("state.none")
           }),
-          /* @__PURE__ */ jsx_runtime2.jsx("dt", {
+          /* @__PURE__ */ jsx_runtime4.jsx("dt", {
             className: panel_module_default.defTerm,
             children: t("state.policy.control-worktree")
           }),
-          /* @__PURE__ */ jsx_runtime2.jsx("dd", {
+          /* @__PURE__ */ jsx_runtime4.jsx("dd", {
             className: panel_module_default.defValue,
             "data-field": "control-worktree-path",
             children: str(state?.controlWorktreePath) ?? t("state.none")
           })
         ]
       }),
-      /* @__PURE__ */ jsx_runtime2.jsx("h3", {
+      /* @__PURE__ */ jsx_runtime4.jsx("h3", {
         className: panel_module_default.subTitle,
         children: t("state.leases")
       }),
-      leases.length === 0 ? /* @__PURE__ */ jsx_runtime2.jsx("p", {
+      leases.length === 0 ? /* @__PURE__ */ jsx_runtime4.jsx("p", {
         className: panel_module_default.empty,
         "data-mstar-empty": "no-leases",
         children: t("state.none")
-      }) : /* @__PURE__ */ jsx_runtime2.jsx("ul", {
+      }) : /* @__PURE__ */ jsx_runtime4.jsx("ul", {
         className: panel_module_default.leaseList,
-        children: leases.map((lease, i) => /* @__PURE__ */ jsx_runtime2.jsxs("li", {
+        children: leases.map((lease, i) => /* @__PURE__ */ jsx_runtime4.jsxs("li", {
           "data-lease-plan": str(lease.planId) ?? "unknown",
           children: [
-            /* @__PURE__ */ jsx_runtime2.jsx("span", {
+            /* @__PURE__ */ jsx_runtime4.jsx("span", {
               className: panel_module_default.leasePlan,
               children: str(lease.planId) ?? t("panel.unknown")
             }),
-            /* @__PURE__ */ jsx_runtime2.jsx("span", {
+            /* @__PURE__ */ jsx_runtime4.jsx("span", {
               className: panel_module_default.leaseHolder,
               children: str(lease.holder) ?? t("panel.unknown")
             }),
-            str(lease.worktreePath) !== null ? /* @__PURE__ */ jsx_runtime2.jsx("span", {
+            str(lease.worktreePath) !== null ? /* @__PURE__ */ jsx_runtime4.jsx("span", {
               className: panel_module_default.leaseWorktree,
               children: lease.worktreePath
             }) : null
           ]
         }, str(lease.planId) ?? `lease-${i}`))
       }),
-      /* @__PURE__ */ jsx_runtime2.jsx("h3", {
+      /* @__PURE__ */ jsx_runtime4.jsx("h3", {
         className: panel_module_default.subTitle,
         children: t("state.knowledge")
       }),
-      knowledge === null ? /* @__PURE__ */ jsx_runtime2.jsx("p", {
+      knowledge === null ? /* @__PURE__ */ jsx_runtime4.jsx("p", {
         className: panel_module_default.empty,
         "data-mstar-empty": "no-knowledge",
         children: t("state.none")
-      }) : /* @__PURE__ */ jsx_runtime2.jsxs("p", {
+      }) : /* @__PURE__ */ jsx_runtime4.jsxs("p", {
         className: panel_module_default.knowledge,
         "data-knowledge-docs": count(knowledge.docCount) === null ? "unknown" : String(knowledge.docCount),
         children: [
-          /* @__PURE__ */ jsx_runtime2.jsx("span", {
+          /* @__PURE__ */ jsx_runtime4.jsx("span", {
             children: t("state.knowledge.docs", { count: count(knowledge.docCount) === null ? t("panel.unknown") : String(knowledge.docCount) })
           }),
-          Array.isArray(knowledge.categories) && knowledge.categories.length > 0 ? /* @__PURE__ */ jsx_runtime2.jsx("span", {
+          Array.isArray(knowledge.categories) && knowledge.categories.length > 0 ? /* @__PURE__ */ jsx_runtime4.jsx("span", {
             className: panel_module_default.knowledgeCategories,
             children: knowledge.categories.filter((category) => typeof category === "string").join(" · ")
           }) : null
         ]
       }),
-      /* @__PURE__ */ jsx_runtime2.jsx("h3", {
+      /* @__PURE__ */ jsx_runtime4.jsx("h3", {
         className: panel_module_default.subTitle,
         children: t("state.direction")
       }),
-      /* @__PURE__ */ jsx_runtime2.jsx("p", {
+      /* @__PURE__ */ jsx_runtime4.jsx("p", {
         className: panel_module_default.direction,
         "data-direction": true,
         children: str(state?.direction) ?? t("state.none")
@@ -2236,46 +2493,39 @@ function StateSection({ t, state, enforcement }) {
 }
 
 // src/client/panel/sidebar.tsx
-var jsx_runtime3 = require("react/jsx-runtime");
-function Sidebar({ t, state, source }) {
-  return /* @__PURE__ */ jsx_runtime3.jsxs("aside", {
+var jsx_runtime5 = require("react/jsx-runtime");
+function Sidebar({ t, state, source, selection, pick, select }) {
+  return /* @__PURE__ */ jsx_runtime5.jsx("aside", {
     className: panel_module_default.sidebar,
     "data-mstar-sidebar": true,
-    children: [
-      /* @__PURE__ */ jsx_runtime3.jsx("div", {
-        className: panel_module_default.sidebarScroll,
-        "data-mstar-sidebar-scroll": true,
-        children: state === null ? /* @__PURE__ */ jsx_runtime3.jsx("p", {
-          className: panel_module_default.empty,
-          "data-mstar-empty": "no-state",
-          children: t("state.none")
-        }) : /* @__PURE__ */ jsx_runtime3.jsx(StateSection, {
-          t,
-          state,
-          enforcement: source.enforcement
-        })
-      }),
-      /* @__PURE__ */ jsx_runtime3.jsx(PanelMeta, {
-        t,
-        source
-      })
-    ]
+    children: state === null ? /* @__PURE__ */ jsx_runtime5.jsx("p", {
+      className: panel_module_default.empty,
+      "data-mstar-empty": "no-state",
+      children: t("state.none")
+    }) : /* @__PURE__ */ jsx_runtime5.jsx(StateSection, {
+      t,
+      state,
+      enforcement: source.enforcement,
+      selection,
+      pick,
+      select
+    })
   });
 }
 
 // src/client/panel/TabNav.tsx
-var jsx_runtime4 = require("react/jsx-runtime");
+var jsx_runtime6 = require("react/jsx-runtime");
 var TABS = [
   { id: "tasks", label: "tab.tasks" },
   { id: "agents", label: "tab.agents" },
   { id: "events", label: "tab.events" }
 ];
 function TabNav({ active, onChange, t }) {
-  return /* @__PURE__ */ jsx_runtime4.jsx("nav", {
+  return /* @__PURE__ */ jsx_runtime6.jsx("nav", {
     className: panel_module_default.tabNav,
     "data-mstar-tab-nav": true,
     role: "tablist",
-    children: TABS.map((tab) => /* @__PURE__ */ jsx_runtime4.jsx("button", {
+    children: TABS.map((tab) => /* @__PURE__ */ jsx_runtime6.jsx("button", {
       type: "button",
       role: "tab",
       className: active === tab.id ? `${panel_module_default.tab} ${panel_module_default.tabActive}` : panel_module_default.tab,
@@ -2288,7 +2538,7 @@ function TabNav({ active, onChange, t }) {
   });
 }
 
-// src/client/panel/pages/AgentCanvasPage.tsx
+// src/client/panel/pages/AgentListPage.tsx
 var import_react2 = require("react");
 
 // src/client/panel/zones/zones.module.css
@@ -2405,22 +2655,16 @@ var css2 = `
 
 
 .\\31 2dfaa6e_kanban {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--mstar-space-1);
   min-width: 0;
-  overflow-x: auto;
-  overscroll-behavior: contain;
 }
 
 
 .\\31 f8473a4_kanbanColumn {
   box-sizing: border-box;
   display: flex;
-  flex: 1 1 0;
   flex-direction: column;
   gap: var(--mstar-space-2);
-  min-width: 120px;
+  min-width: 0;
   padding: var(--mstar-space-2);
   border: 1px solid var(--dsw-alias-border-l1);
   border-radius: 8px;
@@ -2439,10 +2683,10 @@ var css2 = `
   opacity: 0.7;
 }
 
+
 .\\33 b1cc701_kanbanColumnHeader {
   display: flex;
   align-items: center;
-  justify-content: space-between;
   gap: var(--mstar-space-1);
   min-width: 0;
 }
@@ -2460,6 +2704,7 @@ var css2 = `
 
 .\\34 96af60d_kanbanCount {
   flex: none;
+  margin-left: auto;
   min-width: 18px;
   padding: 0 var(--mstar-space-1);
   border: 1px solid var(--dsw-alias-border-l2);
@@ -2529,7 +2774,6 @@ var css2 = `
 
 .\\36 3518033_kanbanArrow {
   flex: none;
-  align-self: center;
   width: 18px;
   height: 18px;
   display: inline-flex;
@@ -2641,28 +2885,28 @@ if (typeof document !== "undefined" && document.querySelector("style[data-plugin
 var zones_module_default = { zone: "0390dc47_zone", zoneHeader: "fa5472ae_zoneHeader", zoneEmpty: "2358ca74_zoneEmpty", legend: "0214fc64_legend", legendTitle: "7fdf3af2_legendTitle", legendList: "5751e1ec_legendList", legendItem: "c648f79b_legendItem", legendSwatch: "84f03998_legendSwatch", swatchAgentRunning: "637ae7a1_swatchAgentRunning", swatchAgentSettled: "e8a7988b_swatchAgentSettled", swatchAgentIdle: "d34b3834_swatchAgentIdle", tasksHeader: "9c376db8_tasksHeader", tasksTotal: "b5ad0f15_tasksTotal", kanban: "12dfaa6e_kanban", kanbanColumn: "1f8473a4_kanbanColumn", kanbanColumnHeader: "3b1cc701_kanbanColumnHeader", kanbanColumnTitle: "503b6432_kanbanColumnTitle", kanbanCount: "496af60d_kanbanCount", kanbanCards: "161359fd_kanbanCards", planCard: "73f0e028_planCard", planCardId: "a37c7a75_planCardId", planCardStatus: "11b4fd6a_planCardStatus", kanbanArrow: "63518033_kanbanArrow", kanbanMore: "0c600f2f_kanbanMore", kanbanMoreButton: "d0f95d1f_kanbanMoreButton", zoneTitle: "a2f9476f_zoneTitle", rollupList: "1ca74b3b_rollupList", rollupItem: "371169b4_rollupItem", rollupMilestone: "5f3f5403_rollupMilestone", rollupCount: "d87816b2_rollupCount", severityChip: "8f4e5388_severityChip" };
 
 // src/client/panel/zones/Legend.tsx
-var jsx_runtime5 = require("react/jsx-runtime");
+var jsx_runtime7 = require("react/jsx-runtime");
 function Legend({ t }) {
   const items = [
     { key: "agent-running", swatch: zones_module_default.swatchAgentRunning, label: t("zone.legend.agent-running") },
     { key: "agent-settled", swatch: zones_module_default.swatchAgentSettled, label: t("zone.legend.agent-settled") },
     { key: "agent-idle", swatch: zones_module_default.swatchAgentIdle, label: t("zone.legend.agent-idle") }
   ];
-  return /* @__PURE__ */ jsx_runtime5.jsxs("div", {
+  return /* @__PURE__ */ jsx_runtime7.jsxs("div", {
     className: zones_module_default.legend,
     "data-mstar-legend": true,
     children: [
-      /* @__PURE__ */ jsx_runtime5.jsx("span", {
+      /* @__PURE__ */ jsx_runtime7.jsx("span", {
         className: zones_module_default.legendTitle,
         children: t("zone.legend.title")
       }),
-      /* @__PURE__ */ jsx_runtime5.jsx("ul", {
+      /* @__PURE__ */ jsx_runtime7.jsx("ul", {
         className: zones_module_default.legendList,
-        children: items.map((item) => /* @__PURE__ */ jsx_runtime5.jsxs("li", {
+        children: items.map((item) => /* @__PURE__ */ jsx_runtime7.jsxs("li", {
           className: zones_module_default.legendItem,
           "data-mstar-legend-item": item.key,
           children: [
-            /* @__PURE__ */ jsx_runtime5.jsx("span", {
+            /* @__PURE__ */ jsx_runtime7.jsx("span", {
               className: `${zones_module_default.legendSwatch} ${item.swatch}`
             }),
             item.label
@@ -2675,7 +2919,7 @@ function Legend({ t }) {
 
 // src/client/panel/pages/IterationInfoSection.tsx
 var import_react = require("react");
-var jsx_runtime6 = require("react/jsx-runtime");
+var jsx_runtime8 = require("react/jsx-runtime");
 function nextExpandedOnActivation(prev, prevActive, nextActive) {
   return !prevActive && nextActive ? true : prev;
 }
@@ -2704,33 +2948,33 @@ function IterationInfoSection({ iteration, t }) {
   const verdictLabel = (verdict) => verdict === "pass" ? t("graph.pass") : verdict === "fail" ? t("graph.fail") : t("panel.unknown");
   const idLabel = iteration.iterationId ?? t("panel.unknown");
   const statusLabel = active && iteration.currentStep !== null ? t("zone.iteration.step-label", { n: String(iteration.currentStep), total: String(iteration.steps.length) }) : t("page.iteration.not-started");
-  const stepsRow = /* @__PURE__ */ jsx_runtime6.jsx("ol", {
+  const stepsRow = /* @__PURE__ */ jsx_runtime8.jsx("ol", {
     className: panel_module_default.iterationStepsRow,
     "data-iteration-head-steps": true,
-    children: iteration.steps.map((step) => /* @__PURE__ */ jsx_runtime6.jsxs("li", {
+    children: iteration.steps.map((step) => /* @__PURE__ */ jsx_runtime8.jsxs("li", {
       className: panel_module_default.iterationStepItem,
       "data-step": step.step,
       "data-step-state": step.state,
       children: [
-        /* @__PURE__ */ jsx_runtime6.jsx("span", {
+        /* @__PURE__ */ jsx_runtime8.jsx("span", {
           className: panel_module_default.iterationStepBadge,
           "data-step-badge": true,
           children: t("zone.iteration.step-badge", { n: String(step.step) })
         }),
-        /* @__PURE__ */ jsx_runtime6.jsx("span", {
+        /* @__PURE__ */ jsx_runtime8.jsx("span", {
           className: panel_module_default.iterationStepPhase,
           "data-step-phase": true,
           children: t(`zone.phase.${step.id}`)
         }),
-        /* @__PURE__ */ jsx_runtime6.jsx("span", {
+        /* @__PURE__ */ jsx_runtime8.jsx("span", {
           className: panel_module_default.iterationStepChip,
           "data-step-chip": true,
           children: t(STATE_LABEL[step.state])
         }),
-        /* @__PURE__ */ jsx_runtime6.jsx("span", {
+        /* @__PURE__ */ jsx_runtime8.jsx("span", {
           className: panel_module_default.iterationVerdictSeat,
           "data-step-verdict-seat": true,
-          children: step.state === "current" && step.verdict !== "unknown" && /* @__PURE__ */ jsx_runtime6.jsx("span", {
+          children: step.state === "current" && step.verdict !== "unknown" && /* @__PURE__ */ jsx_runtime8.jsx("span", {
             className: panel_module_default.iterationVerdict,
             "data-iteration-verdict": step.verdict,
             children: verdictLabel(step.verdict)
@@ -2739,13 +2983,13 @@ function IterationInfoSection({ iteration, t }) {
       ]
     }, step.step))
   });
-  return /* @__PURE__ */ jsx_runtime6.jsxs("section", {
+  return /* @__PURE__ */ jsx_runtime8.jsxs("section", {
     className: panel_module_default.iterationHead,
     "data-iteration-head": true,
     "data-iteration-head-active": active ? "true" : "false",
     "data-iteration-head-expanded": expanded ? "true" : "false",
     children: [
-      /* @__PURE__ */ jsx_runtime6.jsxs("button", {
+      /* @__PURE__ */ jsx_runtime8.jsxs("button", {
         type: "button",
         className: panel_module_default.iterationSummary,
         "data-iteration-head-toggle": true,
@@ -2754,56 +2998,56 @@ function IterationInfoSection({ iteration, t }) {
         "aria-controls": "iteration-head-body",
         onClick: () => setExpanded((v) => !v),
         children: [
-          /* @__PURE__ */ jsx_runtime6.jsx("span", {
+          /* @__PURE__ */ jsx_runtime8.jsx("span", {
             className: panel_module_default.iterationSummaryId,
             "data-iteration-head-id": idLabel,
             children: idLabel
           }),
-          /* @__PURE__ */ jsx_runtime6.jsx("span", {
+          /* @__PURE__ */ jsx_runtime8.jsx("span", {
             className: panel_module_default.iterationSummaryVerdict,
             "data-iteration-head-verdict": iteration.verdict,
             children: verdictLabel(iteration.verdict)
           }),
-          /* @__PURE__ */ jsx_runtime6.jsx("span", {
+          /* @__PURE__ */ jsx_runtime8.jsx("span", {
             className: active ? panel_module_default.iterationSummaryStatus : panel_module_default.iterationSummaryStatusMuted,
             "data-iteration-head-status": statusLabel,
             children: statusLabel
           }),
-          /* @__PURE__ */ jsx_runtime6.jsx("span", {
+          /* @__PURE__ */ jsx_runtime8.jsx("span", {
             className: panel_module_default.iterationSummaryHint,
             "data-iteration-head-hint": true,
             children: t(expanded ? "page.iteration.collapse" : "page.iteration.expand")
           })
         ]
       }),
-      expanded && /* @__PURE__ */ jsx_runtime6.jsx("div", {
+      expanded && /* @__PURE__ */ jsx_runtime8.jsx("div", {
         className: panel_module_default.iterationHeadBody,
         id: "iteration-head-body",
         "data-iteration-head-body": true,
-        children: iterationSplitActive(active, iteration.branches) ? /* @__PURE__ */ jsx_runtime6.jsxs("div", {
+        children: iterationSplitActive(active, iteration.branches) ? /* @__PURE__ */ jsx_runtime8.jsxs("div", {
           className: panel_module_default.iterationHeadSplit,
           "data-iteration-head-split": true,
           children: [
-            /* @__PURE__ */ jsx_runtime6.jsxs("div", {
+            /* @__PURE__ */ jsx_runtime8.jsxs("div", {
               className: panel_module_default.iterationBranches,
               "data-iteration-head-branches": true,
               children: [
-                /* @__PURE__ */ jsx_runtime6.jsx("h3", {
+                /* @__PURE__ */ jsx_runtime8.jsx("h3", {
                   className: panel_module_default.iterationBranchesTitle,
                   "data-branches-title": true,
                   children: t("zone.branches.title")
                 }),
-                /* @__PURE__ */ jsx_runtime6.jsx("ul", {
+                /* @__PURE__ */ jsx_runtime8.jsx("ul", {
                   className: panel_module_default.iterationBranchList,
-                  children: BRANCH_ROWS.map((row) => /* @__PURE__ */ jsx_runtime6.jsxs("li", {
+                  children: BRANCH_ROWS.map((row) => /* @__PURE__ */ jsx_runtime8.jsxs("li", {
                     className: panel_module_default.iterationBranchRow,
                     "data-branch": row.kind,
                     children: [
-                      /* @__PURE__ */ jsx_runtime6.jsx("span", {
+                      /* @__PURE__ */ jsx_runtime8.jsx("span", {
                         className: panel_module_default.iterationBranchLabel,
                         children: t(row.label)
                       }),
-                      /* @__PURE__ */ jsx_runtime6.jsx("code", {
+                      /* @__PURE__ */ jsx_runtime8.jsx("code", {
                         className: panel_module_default.iterationBranchValue,
                         "data-branch-value": true,
                         children: iteration.branches?.[row.value] ?? "—"
@@ -2821,25 +3065,23 @@ function IterationInfoSection({ iteration, t }) {
   });
 }
 
-// src/client/panel/pages/agent-canvas.module.css
+// src/client/panel/pages/agent-list.module.css
 var css3 = `
 
 
 
-.\\36 2d5f9b2_canvasPage {
-  flex: 1;
-  min-height: 0;
+.c7b89a22_listPage {
   display: flex;
   flex-direction: column;
   gap: var(--mstar-space-2);
-  padding: var(--mstar-space-3);
+  min-width: 0;
   
   --mstar-canvas-emphasis-current: 100%;
   --mstar-canvas-emphasis-next: 75%;
   --mstar-canvas-emphasis-off: 45%;
 }
 
-.\\37 608ed94_canvasHeader {
+.e5d7e3c4_listHeader {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
@@ -2848,7 +3090,7 @@ var css3 = `
   min-width: 0;
 }
 
-.\\39 e2394fd_canvasTitle {
+.\\39 01ce16d_listTitle {
   margin: 0;
   color: var(--dsw-alias-label-primary);
   font: var(--dsw-font-xs-13);
@@ -2856,7 +3098,7 @@ var css3 = `
 }
 
 
-.\\37 4514c6f_canvasSummary {
+.\\36 678f1df_listSummary {
   flex: none;
   color: var(--dsw-alias-label-caption);
   font: var(--dsw-font-xxxs-11);
@@ -2864,7 +3106,7 @@ var css3 = `
 }
 
 
-.\\38 5e71ac9_canvasNote {
+.\\37 f7cda39_listNote {
   flex: none;
   margin: 0;
   color: var(--dsw-alias-label-caption);
@@ -2872,66 +3114,35 @@ var css3 = `
 }
 
 
-.\\34 374ac40_canvasLegend {
+.\\31 bf37650_listLegend {
   flex: none;
 }
 
 
 
-.\\30 ceb0467_canvasViewport {
-  position: relative;
-  flex: 1;
-  min-height: 0;
-  overflow: hidden;          
-  touch-action: none;        
-  background: var(--dsw-alias-bg-layer-1);
-  border: 1px solid var(--dsw-alias-border-l1);
-  border-radius: 8px;
-  cursor: grab;
-  user-select: none;         
-}
-
-.\\30 ceb0467_canvasViewport:active {
-  cursor: grabbing;
+.dccb9592_agentList {
+  min-width: 0;
 }
 
 
 
-.\\34 8d128d6_canvasContent {
-  position: absolute;
-  top: 0;
-  left: 0;
-  background-color: var(--dsw-alias-bg-layer-1);
-  background-image:
-    linear-gradient(var(--dsw-alias-border-l1) 1px, transparent 1px),
-    linear-gradient(90deg, var(--dsw-alias-border-l1) 1px, transparent 1px);
-  background-size: 24px 24px;
-  will-change: transform;
-}
-
-
-.\\37 f010373_canvasColumnLabel {
-  position: absolute;
-  padding: 0 var(--mstar-space-1);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--dsw-alias-label-caption);
-  font: var(--dsw-font-xxxs-11);
-  font-weight: 600;
-  letter-spacing: 0.03em;
-  text-transform: uppercase;
+.\\37 a1e7d59_agentGroup {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mstar-space-2);
+  min-width: 0;
+  padding: var(--mstar-space-3);
+  border: 1px solid var(--dsw-alias-border-l1);
+  border-radius: 8px;
+  background: var(--dsw-alias-bg-layer-1);
 }
 
-
-.fcf0fc76_canvasGroupLabel {
-  position: absolute;
+.a4d5691a_groupLabel {
   display: flex;
   align-items: center;
   gap: var(--mstar-space-2);
   min-width: 0;
   padding: 0 var(--mstar-space-1);
-  overflow: hidden;
   color: var(--dsw-alias-label-primary);
   font: var(--dsw-font-xxxs-11);
   font-weight: 600;
@@ -2940,7 +3151,7 @@ var css3 = `
 }
 
 
-.f17a7dfb_canvasGroupPlan {
+.\\39 6c8bb5f_groupPlan {
   display: flex;
   align-items: center;
   gap: var(--mstar-space-1);
@@ -2960,7 +3171,7 @@ var css3 = `
 }
 
 
-.\\32 387c06e_canvasGroupPlanMore {
+.c775aa0a_groupPlanMore {
   flex: none;
   color: var(--dsw-alias-label-caption);
   font: var(--dsw-font-xxxs-11);
@@ -2969,7 +3180,7 @@ var css3 = `
 }
 
 
-.\\34 eb1cc60_canvasGroupNoPlan {
+.\\35 d27d864_groupNoPlan {
   color: var(--dsw-alias-label-caption);
   font: var(--dsw-font-xxxs-11);
   font-weight: 400;
@@ -2979,41 +3190,64 @@ var css3 = `
 
 
 
-.d0988ac1_canvasEdges {
-  position: absolute;
-  top: 0;
-  left: 0;
-  pointer-events: none;
+.\\32 a00f734_stageGroup {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mstar-space-1);
+  min-width: 0;
+}
+
+.\\37 212d235_stageLabel {
+  padding: 0 var(--mstar-space-1);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--dsw-alias-label-caption);
+  font: var(--dsw-font-xxxs-11);
+  font-weight: 600;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
 }
 
 
-.ee3e51b3_canvasEdgeCurve {
-  fill: none;
+
+.\\31 3172d67_subBucket {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mstar-space-1);
+  min-width: 0;
 }
 
-.e6a1115e_canvasEdgeActual {
-  stroke: var(--dsw-alias-state-business-primary);
-  stroke-width: 1.5;
+.\\37 78a2d3f_subBucketLabel {
+  display: flex;
+  align-items: center;
+  gap: var(--mstar-space-1);
+  color: var(--dsw-alias-label-caption);
+  font: var(--dsw-font-xxxs-11);
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
 }
 
 
-.d3a4fb6c_canvasArrowActual {
-  fill: var(--dsw-alias-state-business-primary);
+.\\37 78a2d3f_subBucketLabel::after {
+  content: '';
+  flex: 1;
+  border-top: 1px dashed var(--dsw-alias-border-l2);
 }
 
 
 
-.\\34 4301340_canvasCards {
-  position: absolute;
-  top: 0;
-  left: 0;
+.b34ac147_cardList {
   margin: 0;
   padding: 0;
   list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: var(--mstar-space-1);
+  min-width: 0;
 }
 
 .a9030174_agentCard {
-  position: absolute;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
@@ -3046,14 +3280,14 @@ var css3 = `
 .\\34 e2c7873_agentCardRunning {
   border-color: var(--dsw-alias-state-business-primary);
   box-shadow: 0 0 0 1px var(--dsw-alias-state-business-primary);
-  animation: canvas-card-pulse 1.6s ease-in-out infinite;
+  animation: agent-card-pulse 1.6s ease-in-out infinite;
 }
 
 .\\34 e2c7873_agentCardRunning:hover {
   border-color: var(--dsw-alias-state-business-primary);
 }
 
-@keyframes canvas-card-pulse {
+@keyframes agent-card-pulse {
   0%, 100% {
     box-shadow: 0 0 0 1px var(--dsw-alias-state-business-primary);
   }
@@ -3083,50 +3317,6 @@ var css3 = `
 }
 
 
-.\\34 fd21091_agentPort {
-  position: absolute;
-  width: 3px;
-  height: 3px;
-  border-radius: 999px;
-  background: var(--dsw-alias-label-caption);
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 150ms ease;
-}
-
-.a9030174_agentCard:hover .\\34 fd21091_agentPort {
-  opacity: 1;
-}
-
-.\\34 e2c7873_agentCardRunning:hover .\\34 fd21091_agentPort {
-  background: var(--dsw-alias-state-business-primary);
-}
-
-.\\34 fd21091_agentPort[data-agent-port='north'] {
-  top: 0;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
-.\\34 fd21091_agentPort[data-agent-port='south'] {
-  bottom: 0;
-  left: 50%;
-  transform: translate(-50%, 50%);
-}
-
-.\\34 fd21091_agentPort[data-agent-port='west'] {
-  left: 0;
-  top: 50%;
-  transform: translate(-50%, -50%);
-}
-
-.\\34 fd21091_agentPort[data-agent-port='east'] {
-  right: 0;
-  top: 50%;
-  transform: translate(50%, -50%);
-}
-
-
 .c2c54212_onDemandBadge {
   align-self: flex-start;
   padding: 0 var(--mstar-space-1);
@@ -3136,46 +3326,6 @@ var css3 = `
   font: var(--dsw-font-xxxs-11);
 }
 
-
-.\\37 78a2d3f_subBucketLabel {
-  position: absolute;
-  display: flex;
-  align-items: center;
-  gap: var(--mstar-space-1);
-  color: var(--dsw-alias-label-caption);
-  font: var(--dsw-font-xxxs-11);
-  letter-spacing: 0.03em;
-  text-transform: uppercase;
-}
-
-
-.\\37 78a2d3f_subBucketLabel::after {
-  content: '';
-  flex: 1;
-  border-top: 1px dashed var(--dsw-alias-border-l2);
-}
-
-
-.\\39 94a2772_canvasEdgeSupervise {
-  stroke: var(--dsw-alias-label-caption);
-  stroke-width: 1.5;
-  stroke-dasharray: 5 4;
-}
-
-.b2bb1e47_canvasEdgeSuperviseLit {
-  
-  stroke: var(--dsw-alias-state-business-primary);
-  stroke-dasharray: none;
-}
-
-.ad3aae58_canvasArrowSupervise {
-  fill: var(--dsw-alias-label-caption);
-}
-
-.\\32 6e265a1_canvasArrowSuperviseLit {
-  fill: var(--dsw-alias-state-business-primary);
-}
-
 .e7716946_agentCardLine {
   display: flex;
   align-items: center;
@@ -3268,7 +3418,7 @@ var css3 = `
   color: var(--dsw-alias-label-caption);
 }
 `;
-var tagId3 = "@mstar-harness/dsh/agent-canvas.module.css";
+var tagId3 = "@mstar-harness/dsh/agent-list.module.css";
 if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId3) + "]") === null) {
   const tag = document.createElement("style");
   tag.dataset.plugin = "@mstar-harness/dsh";
@@ -3276,51 +3426,29 @@ if (typeof document !== "undefined" && document.querySelector("style[data-plugin
   tag.textContent = css3;
   document.head.appendChild(tag);
 }
-var agent_canvas_module_default = { canvasPage: "62d5f9b2_canvasPage", canvasHeader: "7608ed94_canvasHeader", canvasTitle: "9e2394fd_canvasTitle", canvasSummary: "74514c6f_canvasSummary", canvasNote: "85e71ac9_canvasNote", canvasLegend: "4374ac40_canvasLegend", canvasViewport: "0ceb0467_canvasViewport", canvasContent: "48d128d6_canvasContent", canvasColumnLabel: "7f010373_canvasColumnLabel", canvasGroupLabel: "fcf0fc76_canvasGroupLabel", canvasGroupPlan: "f17a7dfb_canvasGroupPlan", canvasGroupPlanMore: "2387c06e_canvasGroupPlanMore", canvasGroupNoPlan: "4eb1cc60_canvasGroupNoPlan", canvasEdges: "d0988ac1_canvasEdges", canvasEdgeCurve: "ee3e51b3_canvasEdgeCurve", canvasEdgeActual: "e6a1115e_canvasEdgeActual", canvasArrowActual: "d3a4fb6c_canvasArrowActual", canvasCards: "44301340_canvasCards", agentCard: "a9030174_agentCard", agentCardRunning: "4e2c7873_agentCardRunning", agentCardIdle: "1a8bb13e_agentCardIdle", agentCardDone: "d6bf2954_agentCardDone", agentPort: "4fd21091_agentPort", onDemandBadge: "c2c54212_onDemandBadge", subBucketLabel: "778a2d3f_subBucketLabel", canvasEdgeSupervise: "994a2772_canvasEdgeSupervise", canvasEdgeSuperviseLit: "b2bb1e47_canvasEdgeSuperviseLit", canvasArrowSupervise: "ad3aae58_canvasArrowSupervise", canvasArrowSuperviseLit: "26e265a1_canvasArrowSuperviseLit", agentCardLine: "e7716946_agentCardLine", agentCardName: "a47ac04f_agentCardName", agentCount: "e2aedf35_agentCount", agentRoleChip: "e26900b4_agentRoleChip", agentRecord: "1e3b3403_agentRecord", agentStatusDot: "030ace7f_agentStatusDot", agentStatusRunning: "23846eb7_agentStatusRunning", agentStatusSettled: "91dcfc09_agentStatusSettled", agentStatusError: "eeb20a6e_agentStatusError", agentStatusAdvisory: "ec5fca43_agentStatusAdvisory", agentStatusIdle: "63e283ba_agentStatusIdle" };
+var agent_list_module_default = { listPage: "c7b89a22_listPage", listHeader: "e5d7e3c4_listHeader", listTitle: "901ce16d_listTitle", listSummary: "6678f1df_listSummary", listNote: "7f7cda39_listNote", listLegend: "1bf37650_listLegend", agentList: "dccb9592_agentList", agentGroup: "7a1e7d59_agentGroup", groupLabel: "a4d5691a_groupLabel", groupPlan: "96c8bb5f_groupPlan", groupPlanMore: "c775aa0a_groupPlanMore", groupNoPlan: "5d27d864_groupNoPlan", stageGroup: "2a00f734_stageGroup", stageLabel: "7212d235_stageLabel", subBucket: "13172d67_subBucket", subBucketLabel: "778a2d3f_subBucketLabel", cardList: "b34ac147_cardList", agentCard: "a9030174_agentCard", agentCardRunning: "4e2c7873_agentCardRunning", agentCardIdle: "1a8bb13e_agentCardIdle", agentCardDone: "d6bf2954_agentCardDone", onDemandBadge: "c2c54212_onDemandBadge", agentCardLine: "e7716946_agentCardLine", agentCardName: "a47ac04f_agentCardName", agentCount: "e2aedf35_agentCount", agentRoleChip: "e26900b4_agentRoleChip", agentRecord: "1e3b3403_agentRecord", agentStatusDot: "030ace7f_agentStatusDot", agentStatusRunning: "23846eb7_agentStatusRunning", agentStatusSettled: "91dcfc09_agentStatusSettled", agentStatusError: "eeb20a6e_agentStatusError", agentStatusAdvisory: "ec5fca43_agentStatusAdvisory", agentStatusIdle: "63e283ba_agentStatusIdle" };
 
-// src/client/panel/pages/AgentCanvasPage.tsx
-var jsx_runtime7 = require("react/jsx-runtime");
-var PAN_ORIGIN = { x: 0, y: 0 };
-function panDragStart(pan, x, y) {
-  return { originX: pan.x, originY: pan.y, startX: x, startY: y };
-}
-function panDragMove(drag, x, y) {
-  return { x: drag.originX + (x - drag.startX), y: drag.originY + (y - drag.startY) };
-}
-function panTransform(pan) {
-  return `translate(${pan.x}px, ${pan.y}px)`;
-}
-var COL_W = 200;
-var COL_GAP = 56;
-var CARD_W = 176;
-var CARD_H = 72;
-var ROW_GAP = 12;
-var PAD_X = 24;
-var PAD_Y = 24;
-var COL_PAD = 12;
-var LABEL_H = 18;
-var SUB_LABEL_H = 14;
-var SUB_GAP = 4;
-var GROUP_GAP = 24;
-var STANDOFF = 10;
-var SIDE_GAP = 18;
+// src/client/panel/pages/AgentListPage.tsx
+var jsx_runtime9 = require("react/jsx-runtime");
 var UNKNOWN_COLUMN = "unknown";
-var GENERAL_SINK_STAGE = "sdd-implement";
-function layoutAgents(view) {
-  const columnIds = view.stages.map((s) => s.id);
-  const unknownSinkId = columnIds[columnIds.length - 1] ?? UNKNOWN_COLUMN;
-  const sddStage = view.stages.find((s) => s.stage === GENERAL_SINK_STAGE);
-  const sddSinkId = sddStage === undefined ? unknownSinkId : sddStage.id;
-  const buckets = new Map;
-  for (const entity of view.entities) {
-    const colId = entity.zone === GENERAL_BUCKET ? unknownSinkId : entity.zone === "on-demand" ? sddSinkId : entity.zone === "flow" && entity.stage !== null ? `${entity.stage.phase}:${entity.stage.stage}` : sddSinkId;
-    const bucketId = columnIds.includes(colId) ? colId : sddSinkId;
-    const bucket = buckets.get(bucketId);
-    if (bucket === undefined)
-      buckets.set(bucketId, [entity]);
-    else
-      bucket.push(entity);
+function orderedByRole(members, order) {
+  const byKey = new Map(members.map((e) => [e.key, e]));
+  const ordered = [];
+  const claimed = new Set;
+  for (const role of order) {
+    const entity = byKey.get(role);
+    if (entity !== undefined) {
+      ordered.push(entity);
+      claimed.add(role);
+    }
   }
+  for (const entity of members) {
+    if (!claimed.has(entity.key))
+      ordered.push(entity);
+  }
+  return ordered;
+}
+function buildGroups(view) {
   const rawGroups = [];
   for (const stage of view.stages) {
     const last = rawGroups[rawGroups.length - 1];
@@ -3328,294 +3456,73 @@ function layoutAgents(view) {
       rawGroups.push({
         phase: stage.phase,
         index: rawGroups.length + 1,
-        columnIds: [stage.id],
+        stageIds: [stage.id],
         planNote: stage.phase === "autonomous-execute"
       });
     } else {
-      last.columnIds.push(stage.id);
+      last.stageIds.push(stage.id);
     }
   }
-  const groups = rawGroups.map((g) => ({ ...g, label: { x: 0, y: 0, w: 0, h: 0 } }));
-  const cards = new Map;
-  const columns = [];
-  const subBuckets = new Map;
-  let unknown = null;
-  const colY = PAD_Y + LABEL_H + COL_PAD;
-  let groupX = PAD_X;
-  let canvasBottom = colY;
-  for (const group of groups) {
-    const groupW = group.columnIds.length * (COL_W + COL_GAP) - COL_GAP;
-    group.label = { x: groupX, y: PAD_Y, w: groupW, h: LABEL_H };
-    let groupBottom = colY;
-    group.columnIds.forEach((id, ci) => {
-      const colX = groupX + ci * (COL_W + COL_GAP);
-      const column = { id, x: colX, y: colY, w: COL_W, h: 0 };
-      columns.push(column);
-      const list = buckets.get(id) ?? [];
-      if (id === sddSinkId && sddStage !== undefined) {
-        const implementor = list.filter((e) => e.bucket === "implementor");
-        const reviewer = list.filter((e) => e.bucket === "reviewer");
-        const rest = list.filter((e) => e.bucket !== "implementor" && e.bucket !== "reviewer");
-        const rosterIndex = new Map(KNOWN_AGENTS.map((a, i) => [a.id, i]));
-        const implementorKey = (e) => {
-          if (e.zone === "flow") {
-            const i = sddStage.roles.indexOf(e.role);
-            return i === -1 ? Number.MAX_SAFE_INTEGER : i;
-          }
-          if (e.zone === "on-demand") {
-            return sddStage.roles.length + (rosterIndex.get(e.role) ?? Number.MAX_SAFE_INTEGER);
-          }
-          return Number.MAX_SAFE_INTEGER;
-        };
-        implementor.sort((a, b) => implementorKey(a) - implementorKey(b));
-        const implLabelY = colY + LABEL_H + COL_PAD;
-        const implCards = [];
-        let cy = implLabelY + SUB_LABEL_H + SUB_GAP;
-        for (const entity of implementor) {
-          const box = { x: colX + (COL_W - CARD_W) / 2, y: cy, w: CARD_W, h: CARD_H };
-          cards.set(entity.key, box);
-          implCards.push(box);
-          cy += CARD_H + ROW_GAP;
-        }
-        const revLabelY = cy;
-        const revCards = [];
-        cy = revLabelY + SUB_LABEL_H + SUB_GAP;
-        for (const entity of reviewer) {
-          const box = { x: colX + (COL_W - CARD_W) / 2, y: cy, w: CARD_W, h: CARD_H };
-          cards.set(entity.key, box);
-          revCards.push(box);
-          cy += CARD_H + ROW_GAP;
-        }
-        for (const entity of rest) {
-          const box = { x: colX + (COL_W - CARD_W) / 2, y: cy, w: CARD_W, h: CARD_H };
-          cards.set(entity.key, box);
-          cy += CARD_H + ROW_GAP;
-        }
-        const colBottom = cy - ROW_GAP;
-        column.h = Math.max(colBottom - colY + COL_PAD, CARD_H + LABEL_H + COL_PAD * 2);
-        const band = (boxes) => boxes.length === 0 ? null : { x: colX, y: boxes[0].y, w: COL_W, h: boxes[boxes.length - 1].y + CARD_H - boxes[0].y };
-        const labelW = CARD_W;
-        subBuckets.set(id, {
-          implementor: { label: { x: colX + (COL_W - CARD_W) / 2, y: implLabelY, w: labelW }, band: band(implCards) },
-          reviewer: { label: { x: colX + (COL_W - CARD_W) / 2, y: revLabelY, w: labelW }, band: band(revCards) }
-        });
-      } else if (id === unknownSinkId) {
-        const flowList = list.filter((e) => e.zone !== GENERAL_BUCKET);
-        const generalList = list.filter((e) => e.zone === GENERAL_BUCKET);
-        let cy = colY + LABEL_H + COL_PAD;
-        for (const entity of flowList) {
-          cards.set(entity.key, { x: colX + (COL_W - CARD_W) / 2, y: cy, w: CARD_W, h: CARD_H });
-          cy += CARD_H + ROW_GAP;
-        }
-        const unknownLabelY = cy;
-        const unknownBoxes = [];
-        cy = unknownLabelY + SUB_LABEL_H + SUB_GAP;
-        for (const entity of generalList) {
-          const box = { x: colX + (COL_W - CARD_W) / 2, y: cy, w: CARD_W, h: CARD_H };
-          cards.set(entity.key, box);
-          unknownBoxes.push(box);
-          cy += CARD_H + ROW_GAP;
-        }
-        const colBottom = cy - ROW_GAP;
-        column.h = Math.max(colBottom - colY + COL_PAD, CARD_H + LABEL_H + COL_PAD * 2);
-        const labelW = CARD_W;
-        unknown = {
-          label: { x: colX + (COL_W - CARD_W) / 2, y: unknownLabelY, w: labelW },
-          band: unknownBoxes.length === 0 ? null : { x: colX, y: unknownBoxes[0].y, w: COL_W, h: unknownBoxes[unknownBoxes.length - 1].y + CARD_H - unknownBoxes[0].y }
-        };
-      } else {
-        list.forEach((entity, i) => {
-          cards.set(entity.key, {
-            x: colX + (COL_W - CARD_W) / 2,
-            y: colY + LABEL_H + COL_PAD + i * (CARD_H + ROW_GAP),
-            w: CARD_W,
-            h: CARD_H
-          });
-        });
-        const h = COL_PAD * 2 + LABEL_H + list.length * CARD_H + Math.max(0, list.length - 1) * ROW_GAP;
-        column.h = Math.max(h, CARD_H + LABEL_H + COL_PAD * 2);
-      }
-      groupBottom = Math.max(groupBottom, colY + column.h);
-    });
-    canvasBottom = Math.max(canvasBottom, groupBottom);
-    groupX += groupW + GROUP_GAP;
-  }
-  return {
-    width: groups.length === 0 ? 0 : groupX - GROUP_GAP + PAD_X,
-    height: canvasBottom + PAD_Y,
-    columns,
-    cards,
-    subBuckets,
-    unknown,
-    groups
-  };
-}
-function superviseAnchor(anchor, layout) {
-  const idx = anchor.lastIndexOf(":");
-  if (idx === -1)
-    return null;
-  const columnId = anchor.slice(0, idx);
-  const bucket = anchor.slice(idx + 1);
-  if (bucket !== "implementor" && bucket !== "reviewer")
-    return null;
-  const column = layout.columns.find((c) => c.id === columnId);
-  if (column === undefined)
-    return null;
-  const geometry = layout.subBuckets.get(columnId);
-  if (geometry === undefined)
-    return null;
-  const partition = bucket === "implementor" ? geometry.implementor : geometry.reviewer;
-  const band = partition.band;
-  if (band === null)
-    return null;
-  const cardLeft = column.x + (COL_W - CARD_W) / 2;
-  const x = cardLeft + CARD_W + SIDE_GAP;
-  const y = bucket === "implementor" ? band.y + band.h : band.y;
-  return { x, y };
-}
-function portPoint(box, port) {
-  switch (port) {
-    case "north":
-      return { x: box.x + box.w / 2, y: box.y };
-    case "south":
-      return { x: box.x + box.w / 2, y: box.y + box.h };
-    case "west":
-      return { x: box.x, y: box.y + box.h / 2 };
-    case "east":
-      return { x: box.x + box.w, y: box.y + box.h / 2 };
-  }
-}
-function columnIndexOfBox(layout, box) {
-  return layout.columns.findIndex((c) => box.x >= c.x && box.x < c.x + c.w && box.y >= c.y && box.y < c.y + c.h);
-}
-function captionRows(layout, columnId) {
-  const rows = [];
-  const geometry = layout.subBuckets.get(columnId);
-  if (geometry !== undefined) {
-    for (const p of [geometry.implementor, geometry.reviewer]) {
-      if (p.band !== null)
-        rows.push({ x: p.label.x, y: p.label.y, w: p.label.w, h: SUB_LABEL_H });
-    }
-  }
-  const lastId = layout.columns[layout.columns.length - 1]?.id;
-  if (columnId === lastId && layout.unknown !== null && layout.unknown.band !== null) {
-    rows.push({ x: layout.unknown.label.x, y: layout.unknown.label.y, w: layout.unknown.label.w, h: SUB_LABEL_H });
-  }
-  return rows;
-}
-function intermediateCardBoxes(layout, srcCol, tgtCol) {
-  const lo = Math.min(srcCol, tgtCol);
-  const hi = Math.max(srcCol, tgtCol);
-  const boxes = [];
-  for (const box of layout.cards.values()) {
-    const col = columnIndexOfBox(layout, box);
-    if (col > lo && col < hi)
-      boxes.push(box);
-  }
-  return boxes;
-}
-function crossesCardBody(g, layout, srcCol, tgtCol) {
-  return intermediateCardBoxes(layout, srcCol, tgtCol).some((card) => boxOverlaps(g, card));
-}
-function horizontalBBox(sx, sy, tx, ty) {
-  const dx = tx - sx;
-  const off = Math.max(Math.abs(dx) / 2, 24);
-  const dir = dx < 0 ? -1 : 1;
-  const xs = [sx, tx, sx + dir * off, tx - dir * off];
-  const minX = Math.min(...xs);
-  const maxX = Math.max(...xs);
-  const minY = Math.min(sy, ty);
-  const maxY = Math.max(sy, ty);
-  return { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
-}
-function boxOverlaps(a, b) {
-  return a.x < b.x + b.w && a.x + a.w > b.x && a.y < b.y + b.h && a.y + a.h > b.y;
-}
-function sideGapDetour(sx, sy, endX, endY, sourceBox, targetBox, layout, srcCol, tgtCol) {
-  const forward = srcCol < tgtCol;
-  const band = intermediateCardBoxes(layout, srcCol, tgtCol);
-  const bandBottom = band.reduce((m, c) => Math.max(m, c.y + c.h), 0);
-  const detourY = bandBottom + SIDE_GAP;
-  const sourceGapX = forward ? sourceBox.x + sourceBox.w + SIDE_GAP : sourceBox.x - SIDE_GAP;
-  const targetGapX = forward ? targetBox.x - SIDE_GAP : targetBox.x + targetBox.w + SIDE_GAP;
-  const d = `M ${sx} ${sy} L ${sourceGapX} ${sy} L ${sourceGapX} ${detourY} L ${targetGapX} ${detourY} L ${targetGapX} ${endY} L ${endX} ${endY}`;
-  return { d, x1: sx, y1: sy, x2: endX, y2: endY };
-}
-function sameColumnStandoff(gap) {
-  return Math.min(STANDOFF, Math.max(2, gap - 8));
-}
-function crossesSameColumnCard(layout, cx, startY, endY, sourceBox, targetBox) {
-  const seg = { x: cx, y: Math.min(startY, endY), w: 0, h: Math.abs(endY - startY) };
-  for (const box of layout.cards.values()) {
-    if (box === sourceBox || box === targetBox)
+  const stageById = new Map(view.stages.map((s) => [s.id, s]));
+  const lastStageId = view.stages.length > 0 ? view.stages[view.stages.length - 1].id : null;
+  const implementorHostId = view.stages.find((s) => s.roles.some((r) => SDD_BUCKET_ROLES.implementor.includes(r)))?.id ?? lastStageId;
+  const members = new Map;
+  for (const entity of view.entities) {
+    const stageId = entity.zone === GENERAL_BUCKET ? lastStageId : entity.zone === "on-demand" ? implementorHostId : entity.zone === "flow" && entity.stage !== null ? `${entity.stage.phase}:${entity.stage.stage}` : implementorHostId;
+    if (stageId === null)
       continue;
-    if (boxOverlaps(seg, box))
-      return true;
-  }
-  return false;
-}
-function horizontalCurve(sx, sy, tx, ty) {
-  const dx = tx - sx;
-  const off = Math.max(Math.abs(dx) / 2, 24);
-  const dir = dx < 0 ? -1 : 1;
-  const d = `M ${sx} ${sy} C ${sx + dir * off} ${sy}, ${tx - dir * off} ${ty}, ${tx} ${ty}`;
-  return { d, x1: sx, y1: sy, x2: tx, y2: ty };
-}
-function verticalCurve(sx, sy, tx, ty) {
-  const span = ty - sy;
-  const d = `M ${sx} ${sy} C ${sx} ${sy + span / 3}, ${tx} ${ty - span / 3}, ${tx} ${ty}`;
-  return { d, x1: sx, y1: sy, x2: tx, y2: ty };
-}
-function edgePath(edge, layout) {
-  if (edge.kind === "supervise") {
-    const source = superviseAnchor(edge.source, layout);
-    const target = superviseAnchor(edge.target, layout);
-    if (source === null || target === null)
-      return null;
-    return verticalCurve(source.x, source.y, target.x, target.y);
-  }
-  const sourceBox = layout.cards.get(edge.source);
-  const targetBox = layout.cards.get(edge.target);
-  if (sourceBox === undefined || targetBox === undefined)
-    return null;
-  const srcCol = columnIndexOfBox(layout, sourceBox);
-  const tgtCol = columnIndexOfBox(layout, targetBox);
-  if (srcCol < tgtCol) {
-    const s = portPoint(sourceBox, "east");
-    const t = portPoint(targetBox, "west");
-    const endX = t.x - STANDOFF;
-    if (crossesCardBody(horizontalBBox(s.x, s.y, endX, t.y), layout, srcCol, tgtCol)) {
-      return sideGapDetour(s.x, s.y, endX, t.y, sourceBox, targetBox, layout, srcCol, tgtCol);
-    }
-    return horizontalCurve(s.x, s.y, endX, t.y);
-  }
-  if (srcCol > tgtCol) {
-    const s = portPoint(sourceBox, "west");
-    const t = portPoint(targetBox, "east");
-    const endX = t.x + STANDOFF;
-    if (crossesCardBody(horizontalBBox(s.x, s.y, endX, t.y), layout, srcCol, tgtCol)) {
-      return sideGapDetour(s.x, s.y, endX, t.y, sourceBox, targetBox, layout, srcCol, tgtCol);
-    }
-    return horizontalCurve(s.x, s.y, endX, t.y);
-  }
-  const forward = sourceBox.y + sourceBox.h <= targetBox.y;
-  const gap = forward ? targetBox.y - (sourceBox.y + sourceBox.h) : sourceBox.y - (targetBox.y + targetBox.h);
-  const standoff = sameColumnStandoff(gap);
-  const cx = sourceBox.x + sourceBox.w / 2;
-  const startY = forward ? sourceBox.y + sourceBox.h : sourceBox.y;
-  const endY = forward ? targetBox.y - standoff : targetBox.y + targetBox.h + standoff;
-  const colId = layout.columns[srcCol]?.id;
-  const crossesCaption = colId !== undefined && captionRows(layout, colId).some((row) => cx >= row.x && cx <= row.x + row.w && Math.min(startY, endY) < row.y + row.h && Math.max(startY, endY) > row.y);
-  if (crossesCaption || crossesSameColumnCard(layout, cx, startY, endY, sourceBox, targetBox)) {
-    const sideX = sourceBox.x - SIDE_GAP;
-    return verticalCurve(sideX, startY, sideX, endY);
+    const list = members.get(stageId);
+    if (list === undefined)
+      members.set(stageId, [entity]);
+    else
+      list.push(entity);
   }
-  return verticalCurve(cx, startY, cx, endY);
+  return rawGroups.map((raw) => ({
+    phase: raw.phase,
+    index: raw.index,
+    planNote: raw.planNote,
+    stages: raw.stageIds.map((stageId) => {
+      const stage = stageById.get(stageId);
+      const list = members.get(stageId) ?? [];
+      const isImplementorHost = stageId === implementorHostId;
+      const isLast = stageId === lastStageId;
+      const flow = [];
+      const implementor = [];
+      const reviewer = [];
+      const unknown = [];
+      for (const entity of list) {
+        if (isLast && entity.zone === GENERAL_BUCKET)
+          unknown.push(entity);
+        else if (isImplementorHost && entity.bucket === "implementor")
+          implementor.push(entity);
+        else if (isImplementorHost && entity.bucket === "reviewer")
+          reviewer.push(entity);
+        else
+          flow.push(entity);
+      }
+      const buckets = [];
+      if (implementor.length > 0) {
+        buckets.push({ id: "implementor", entities: orderedByRole(implementor, SDD_BUCKET_ROLES.implementor) });
+      }
+      if (reviewer.length > 0) {
+        buckets.push({ id: "reviewer", entities: orderedByRole(reviewer, SDD_BUCKET_ROLES.reviewer) });
+      }
+      if (unknown.length > 0) {
+        buckets.push({ id: UNKNOWN_COLUMN, entities: orderedByRole(unknown, []) });
+      }
+      return {
+        id: stageId,
+        label: stageId.slice(stageId.indexOf(":") + 1),
+        flow: orderedByRole(flow, stage?.roles ?? []),
+        buckets
+      };
+    })
+  }));
 }
 function StatusPoint({ status, done }) {
-  const className = agent_canvas_module_default.agentStatusDot + (status === "running" ? ` ${agent_canvas_module_default.agentStatusRunning}` : status === "settled" ? done ? ` ${agent_canvas_module_default.agentStatusSettled}` : ` ${agent_canvas_module_default.agentStatusIdle}` : status === "error" || status === "denied" ? ` ${agent_canvas_module_default.agentStatusError}` : status === "advisory" ? ` ${agent_canvas_module_default.agentStatusAdvisory}` : ` ${agent_canvas_module_default.agentStatusIdle}`);
+  const className = agent_list_module_default.agentStatusDot + (status === "running" ? ` ${agent_list_module_default.agentStatusRunning}` : status === "settled" ? done ? ` ${agent_list_module_default.agentStatusSettled}` : ` ${agent_list_module_default.agentStatusIdle}` : status === "error" || status === "denied" ? ` ${agent_list_module_default.agentStatusError}` : status === "advisory" ? ` ${agent_list_module_default.agentStatusAdvisory}` : ` ${agent_list_module_default.agentStatusIdle}`);
   if (status === "settled" && done) {
-    return /* @__PURE__ */ jsx_runtime7.jsx("span", {
+    return /* @__PURE__ */ jsx_runtime9.jsx("span", {
       className,
       "data-agent-status": status,
       "data-agent-done": "true",
@@ -3623,13 +3530,13 @@ function StatusPoint({ status, done }) {
       children: "✓"
     });
   }
-  return /* @__PURE__ */ jsx_runtime7.jsx("span", {
+  return /* @__PURE__ */ jsx_runtime9.jsx("span", {
     className,
     "data-agent-status": status,
     "aria-hidden": "true"
   });
 }
-function EntityCard({ entity, t, box }) {
+function EntityCard({ entity, t }) {
   const running = entity.status === "running";
   const done = entity.status === "settled" && entity.emphasis !== "off";
   const title = entity.idle ? entity.name : entity.role !== "" ? entity.role : entity.name;
@@ -3638,9 +3545,8 @@ function EntityCard({ entity, t, box }) {
     record2.push(entity.agent);
   if (entity.task !== null)
     record2.push(entity.task);
-  return /* @__PURE__ */ jsx_runtime7.jsxs("li", {
-    className: entity.idle ? `${agent_canvas_module_default.agentCard} ${agent_canvas_module_default.agentCardIdle}` : running ? `${agent_canvas_module_default.agentCard} ${agent_canvas_module_default.agentCardRunning}` : done ? `${agent_canvas_module_default.agentCard} ${agent_canvas_module_default.agentCardDone}` : agent_canvas_module_default.agentCard,
-    style: { left: box.x, top: box.y, width: box.w, height: box.h },
+  return /* @__PURE__ */ jsx_runtime9.jsxs("li", {
+    className: entity.idle ? `${agent_list_module_default.agentCard} ${agent_list_module_default.agentCardIdle}` : running ? `${agent_list_module_default.agentCard} ${agent_list_module_default.agentCardRunning}` : done ? `${agent_list_module_default.agentCard} ${agent_list_module_default.agentCardDone}` : agent_list_module_default.agentCard,
     "data-agent-entity": entity.key,
     "data-agent-status": entity.status,
     "data-agent-idle": entity.idle ? "true" : undefined,
@@ -3650,106 +3556,71 @@ function EntityCard({ entity, t, box }) {
     "data-agent-bucket": entity.bucket ?? undefined,
     "data-agent-emphasis": entity.emphasis ?? undefined,
     children: [
-      entity.zone === "on-demand" && /* @__PURE__ */ jsx_runtime7.jsx("span", {
-        className: agent_canvas_module_default.onDemandBadge,
+      entity.zone === "on-demand" && /* @__PURE__ */ jsx_runtime9.jsx("span", {
+        className: agent_list_module_default.onDemandBadge,
         "data-agent-on-demand": "true",
         children: t("zone.agents.on-demand")
       }),
-      /* @__PURE__ */ jsx_runtime7.jsx("span", {
-        className: agent_canvas_module_default.agentPort,
-        "data-agent-port": "north",
-        "aria-hidden": "true"
-      }),
-      /* @__PURE__ */ jsx_runtime7.jsx("span", {
-        className: agent_canvas_module_default.agentPort,
-        "data-agent-port": "south",
-        "aria-hidden": "true"
-      }),
-      /* @__PURE__ */ jsx_runtime7.jsx("span", {
-        className: agent_canvas_module_default.agentPort,
-        "data-agent-port": "west",
-        "aria-hidden": "true"
-      }),
-      /* @__PURE__ */ jsx_runtime7.jsx("span", {
-        className: agent_canvas_module_default.agentPort,
-        "data-agent-port": "east",
-        "aria-hidden": "true"
-      }),
-      /* @__PURE__ */ jsx_runtime7.jsxs("div", {
-        className: agent_canvas_module_default.agentCardLine,
+      /* @__PURE__ */ jsx_runtime9.jsxs("div", {
+        className: agent_list_module_default.agentCardLine,
         children: [
-          /* @__PURE__ */ jsx_runtime7.jsx("span", {
-            className: agent_canvas_module_default.agentCardName,
+          /* @__PURE__ */ jsx_runtime9.jsx("span", {
+            className: agent_list_module_default.agentCardName,
             title,
             children: title
           }),
-          /* @__PURE__ */ jsx_runtime7.jsx(StatusPoint, {
+          /* @__PURE__ */ jsx_runtime9.jsx(StatusPoint, {
             status: entity.status,
             done
           }),
-          entity.count > 1 && /* @__PURE__ */ jsx_runtime7.jsx("span", {
-            className: agent_canvas_module_default.agentCount,
+          entity.count > 1 && /* @__PURE__ */ jsx_runtime9.jsx("span", {
+            className: agent_list_module_default.agentCount,
             "data-agent-count": entity.count,
             children: `×${entity.count}`
           })
         ]
       }),
-      entity.role !== "" && entity.role !== entity.key && /* @__PURE__ */ jsx_runtime7.jsx("span", {
-        className: agent_canvas_module_default.agentRoleChip,
+      entity.role !== "" && entity.role !== entity.key && /* @__PURE__ */ jsx_runtime9.jsx("span", {
+        className: agent_list_module_default.agentRoleChip,
         "data-agent-role": entity.role,
         children: entity.role
       }),
-      record2.length > 0 && /* @__PURE__ */ jsx_runtime7.jsx("span", {
-        className: agent_canvas_module_default.agentRecord,
+      record2.length > 0 && /* @__PURE__ */ jsx_runtime9.jsx("span", {
+        className: agent_list_module_default.agentRecord,
         "data-agent-record": true,
         children: record2.join(" · ")
       })
     ]
   });
 }
-function AgentCanvasPage({ view, iteration, t, initialPan }) {
-  const { entities, edges, degraded, note, executing, pending } = view;
-  const [pan, setPan] = import_react2.useState(() => initialPan ?? PAN_ORIGIN);
-  const dragRef = import_react2.useRef(null);
-  const layout = import_react2.useMemo(() => layoutAgents(view), [view]);
-  const edgeGeoms = import_react2.useMemo(() => edges.map((edge) => ({ edge, curve: edgePath(edge, layout) })), [edges, layout]);
-  const handlePointerDown = (e) => {
-    if (e.button !== 0 || !e.isPrimary)
-      return;
-    e.preventDefault();
-    e.currentTarget.setPointerCapture(e.pointerId);
-    dragRef.current = panDragStart(pan, e.clientX, e.clientY);
-  };
-  const handlePointerMove = (e) => {
-    const drag = dragRef.current;
-    if (drag === null)
-      return;
-    setPan(panDragMove(drag, e.clientX, e.clientY));
-  };
-  const handlePointerEnd = (e) => {
-    dragRef.current = null;
-    if (e.currentTarget.hasPointerCapture(e.pointerId)) {
-      e.currentTarget.releasePointerCapture(e.pointerId);
-    }
-  };
-  const noteInfo = degraded ? { anchor: "degraded", text: t("flow.degraded") } : note === "empty" ? { anchor: "empty", text: t("flow.empty") } : note === "settle-only" ? { anchor: "settle-only", text: t("flow.settle-only") } : null;
-  return /* @__PURE__ */ jsx_runtime7.jsxs("div", {
-    className: agent_canvas_module_default.canvasPage,
+function subBucketLabel(id, t) {
+  if (id === "implementor")
+    return t("zone.agents.bucket.implementor");
+  if (id === "reviewer")
+    return t("zone.agents.bucket.reviewer");
+  return t("zone.agents.unknown-sub");
+}
+function AgentListPage({ view, iteration, t }) {
+  const { degraded, note, executing, pending } = view;
+  const groups = import_react2.useMemo(() => buildGroups(view), [view]);
+  const noteInfo = degraded ? { anchor: "degraded", text: t("flow.degraded") } : note === "empty" ? { anchor: "empty", text: t("flow.empty") } : note === "settle-only" ? { anchor: "settle-only", text: t("flow.settle-only") } : note === "link-only" ? { anchor: "link-only", text: t("flow.link-only") } : null;
+  return /* @__PURE__ */ jsx_runtime9.jsxs("div", {
+    className: agent_list_module_default.listPage,
     "data-mstar-page": "agents",
     children: [
-      /* @__PURE__ */ jsx_runtime7.jsx(IterationInfoSection, {
+      /* @__PURE__ */ jsx_runtime9.jsx(IterationInfoSection, {
         iteration,
         t
       }),
-      /* @__PURE__ */ jsx_runtime7.jsxs("header", {
-        className: agent_canvas_module_default.canvasHeader,
+      /* @__PURE__ */ jsx_runtime9.jsxs("header", {
+        className: agent_list_module_default.listHeader,
         children: [
-          /* @__PURE__ */ jsx_runtime7.jsx("h2", {
-            className: agent_canvas_module_default.canvasTitle,
+          /* @__PURE__ */ jsx_runtime9.jsx("h2", {
+            className: agent_list_module_default.listTitle,
             children: t("zone.agents.title")
           }),
-          /* @__PURE__ */ jsx_runtime7.jsx("span", {
-            className: agent_canvas_module_default.canvasSummary,
+          /* @__PURE__ */ jsx_runtime9.jsx("span", {
+            className: agent_list_module_default.listSummary,
             "data-agent-summary": true,
             "data-agent-summary-executing": executing,
             "data-agent-summary-pending": pending,
@@ -3757,172 +3628,81 @@ function AgentCanvasPage({ view, iteration, t, initialPan }) {
           })
         ]
       }),
-      noteInfo !== null && /* @__PURE__ */ jsx_runtime7.jsx("p", {
-        className: agent_canvas_module_default.canvasNote,
-        "data-canvas-note": noteInfo.anchor,
+      noteInfo !== null && /* @__PURE__ */ jsx_runtime9.jsx("p", {
+        className: agent_list_module_default.listNote,
+        "data-agents-note": noteInfo.anchor,
         children: noteInfo.text
       }),
-      /* @__PURE__ */ jsx_runtime7.jsx("div", {
-        className: agent_canvas_module_default.canvasViewport,
-        "data-canvas-viewport": true,
-        onPointerDown: handlePointerDown,
-        onPointerMove: handlePointerMove,
-        onPointerUp: handlePointerEnd,
-        onPointerCancel: handlePointerEnd,
-        onLostPointerCapture: handlePointerEnd,
-        children: /* @__PURE__ */ jsx_runtime7.jsxs("div", {
-          className: agent_canvas_module_default.canvasContent,
-          "data-canvas-pan": true,
-          style: { transform: panTransform(pan), width: layout.width, height: layout.height },
+      /* @__PURE__ */ jsx_runtime9.jsx("div", {
+        className: `${agent_list_module_default.agentList} ${panel_module_default.groupGrid}`,
+        "data-agent-list": true,
+        children: groups.map((group) => /* @__PURE__ */ jsx_runtime9.jsxs("section", {
+          className: agent_list_module_default.agentGroup,
+          "data-agent-group": group.phase,
+          "data-agent-group-index": group.index,
           children: [
-            layout.groups.map((group) => /* @__PURE__ */ jsx_runtime7.jsxs("span", {
-              className: agent_canvas_module_default.canvasGroupLabel,
-              style: { left: group.label.x, top: group.label.y, width: group.label.w },
-              "data-canvas-group": group.phase,
-              "data-canvas-group-index": group.index,
+            /* @__PURE__ */ jsx_runtime9.jsxs("span", {
+              className: agent_list_module_default.groupLabel,
               children: [
                 group.phase === "iteration-start" ? t("zone.agents.group.phase-1") : group.phase === "autonomous-execute" ? t("zone.agents.group.phase-2") : t("zone.agents.group.phase-n", { n: String(group.index) }),
-                group.planNote && (view.activePlanId === null ? /* @__PURE__ */ jsx_runtime7.jsx("span", {
-                  className: agent_canvas_module_default.canvasGroupNoPlan,
-                  "data-canvas-group-no-plan": true,
+                group.planNote && (view.activePlanId === null ? /* @__PURE__ */ jsx_runtime9.jsx("span", {
+                  className: agent_list_module_default.groupNoPlan,
+                  "data-agent-group-no-plan": true,
                   children: t("zone.agents.group.no-plan")
-                }) : /* @__PURE__ */ jsx_runtime7.jsxs("span", {
-                  className: agent_canvas_module_default.canvasGroupPlan,
-                  "data-canvas-group-plan": view.activePlanId,
+                }) : /* @__PURE__ */ jsx_runtime9.jsxs("span", {
+                  className: agent_list_module_default.groupPlan,
+                  "data-agent-group-plan": view.activePlanId,
                   children: [
                     t("zone.agents.group.plan", { plan: view.activePlanId }),
-                    view.activePlanCount > 1 && /* @__PURE__ */ jsx_runtime7.jsx("span", {
-                      className: agent_canvas_module_default.canvasGroupPlanMore,
-                      "data-canvas-group-plan-more": true,
+                    view.activePlanCount > 1 && /* @__PURE__ */ jsx_runtime9.jsx("span", {
+                      className: agent_list_module_default.groupPlanMore,
+                      "data-agent-group-plan-more": true,
                       children: t("zone.agents.group.plan-more", { n: String(view.activePlanCount - 1) })
                     })
                   ]
                 }))
               ]
-            }, group.phase)),
-            layout.columns.map((col) => /* @__PURE__ */ jsx_runtime7.jsx("span", {
-              className: agent_canvas_module_default.canvasColumnLabel,
-              style: { left: col.x, top: col.y },
-              "data-canvas-column": col.id,
-              children: col.id.slice(col.id.indexOf(":") + 1)
-            }, col.id)),
-            Array.from(layout.subBuckets.entries()).map(([colId, geometry]) => /* @__PURE__ */ jsx_runtime7.jsxs("span", {
-              children: [
-                geometry.implementor.band !== null && /* @__PURE__ */ jsx_runtime7.jsx("span", {
-                  className: agent_canvas_module_default.subBucketLabel,
-                  style: { left: geometry.implementor.label.x, top: geometry.implementor.label.y, width: geometry.implementor.label.w },
-                  "data-sub-bucket": "implementor",
-                  children: t("zone.agents.bucket.implementor")
-                }),
-                geometry.reviewer.band !== null && /* @__PURE__ */ jsx_runtime7.jsx("span", {
-                  className: agent_canvas_module_default.subBucketLabel,
-                  style: { left: geometry.reviewer.label.x, top: geometry.reviewer.label.y, width: geometry.reviewer.label.w },
-                  "data-sub-bucket": "reviewer",
-                  children: t("zone.agents.bucket.reviewer")
-                })
-              ]
-            }, colId)),
-            layout.unknown !== null && layout.unknown.band !== null && /* @__PURE__ */ jsx_runtime7.jsx("span", {
-              className: agent_canvas_module_default.subBucketLabel,
-              style: { left: layout.unknown.label.x, top: layout.unknown.label.y, width: layout.unknown.label.w },
-              "data-sub-bucket": UNKNOWN_COLUMN,
-              children: t("zone.agents.unknown-sub")
             }),
-            /* @__PURE__ */ jsx_runtime7.jsxs("svg", {
-              className: agent_canvas_module_default.canvasEdges,
-              width: layout.width,
-              height: layout.height,
-              "aria-hidden": "true",
+            group.stages.map((stage) => /* @__PURE__ */ jsx_runtime9.jsxs("section", {
+              className: agent_list_module_default.stageGroup,
+              "data-agent-stage": stage.id,
               children: [
-                /* @__PURE__ */ jsx_runtime7.jsxs("defs", {
+                /* @__PURE__ */ jsx_runtime9.jsx("span", {
+                  className: agent_list_module_default.stageLabel,
+                  children: stage.label
+                }),
+                stage.flow.length > 0 && /* @__PURE__ */ jsx_runtime9.jsx("ul", {
+                  className: agent_list_module_default.cardList,
+                  children: stage.flow.map((entity) => /* @__PURE__ */ jsx_runtime9.jsx(EntityCard, {
+                    entity,
+                    t
+                  }, entity.key))
+                }),
+                stage.buckets.map((bucket) => /* @__PURE__ */ jsx_runtime9.jsxs("section", {
+                  className: agent_list_module_default.subBucket,
+                  "data-sub-bucket": bucket.id,
                   children: [
-                    /* @__PURE__ */ jsx_runtime7.jsx("marker", {
-                      id: "canvas-arrow-actual",
-                      markerUnits: "userSpaceOnUse",
-                      viewBox: "0 0 6 8",
-                      refX: "6",
-                      refY: "4",
-                      markerWidth: "6",
-                      markerHeight: "8",
-                      orient: "auto",
-                      children: /* @__PURE__ */ jsx_runtime7.jsx("path", {
-                        className: agent_canvas_module_default.canvasArrowActual,
-                        d: "M 0 1 L 6 4 L 0 7 z"
-                      })
-                    }),
-                    /* @__PURE__ */ jsx_runtime7.jsx("marker", {
-                      id: "canvas-arrow-supervise",
-                      markerUnits: "userSpaceOnUse",
-                      viewBox: "0 0 6 8",
-                      refX: "6",
-                      refY: "4",
-                      markerWidth: "6",
-                      markerHeight: "8",
-                      orient: "auto-start-reverse",
-                      children: /* @__PURE__ */ jsx_runtime7.jsx("path", {
-                        className: agent_canvas_module_default.canvasArrowSupervise,
-                        d: "M 0 1 L 6 4 L 0 7 z"
-                      })
+                    /* @__PURE__ */ jsx_runtime9.jsx("span", {
+                      className: agent_list_module_default.subBucketLabel,
+                      children: subBucketLabel(bucket.id, t)
                     }),
-                    /* @__PURE__ */ jsx_runtime7.jsx("marker", {
-                      id: "canvas-arrow-supervise-lit",
-                      markerUnits: "userSpaceOnUse",
-                      viewBox: "0 0 6 8",
-                      refX: "6",
-                      refY: "4",
-                      markerWidth: "6",
-                      markerHeight: "8",
-                      orient: "auto-start-reverse",
-                      children: /* @__PURE__ */ jsx_runtime7.jsx("path", {
-                        className: agent_canvas_module_default.canvasArrowSuperviseLit,
-                        d: "M 0 1 L 6 4 L 0 7 z"
-                      })
+                    /* @__PURE__ */ jsx_runtime9.jsx("ul", {
+                      className: agent_list_module_default.cardList,
+                      children: bucket.entities.map((entity) => /* @__PURE__ */ jsx_runtime9.jsx(EntityCard, {
+                        entity,
+                        t
+                      }, entity.key))
                     })
                   ]
-                }),
-                edgeGeoms.map((geom, i) => {
-                  const curve = geom.curve;
-                  if (curve === null)
-                    return null;
-                  if (geom.edge.kind === "supervise") {
-                    const lit = geom.edge.evidenced === true;
-                    return /* @__PURE__ */ jsx_runtime7.jsx("path", {
-                      className: `${agent_canvas_module_default.canvasEdgeCurve} ${lit ? `${agent_canvas_module_default.canvasEdgeSupervise} ${agent_canvas_module_default.canvasEdgeSuperviseLit}` : agent_canvas_module_default.canvasEdgeSupervise}`,
-                      d: curve.d,
-                      markerStart: lit ? "url(#canvas-arrow-supervise-lit)" : "url(#canvas-arrow-supervise)",
-                      markerEnd: lit ? "url(#canvas-arrow-supervise-lit)" : "url(#canvas-arrow-supervise)",
-                      "data-agent-edge-supervise": `${geom.edge.source}->${geom.edge.target}`,
-                      "data-agent-edge-supervise-lit": lit ? "true" : undefined
-                    }, `supervise-${i}-${geom.edge.source}-${geom.edge.target}`);
-                  }
-                  return /* @__PURE__ */ jsx_runtime7.jsx("path", {
-                    className: `${agent_canvas_module_default.canvasEdgeCurve} ${agent_canvas_module_default.canvasEdgeActual}`,
-                    d: curve.d,
-                    markerEnd: "url(#canvas-arrow-actual)",
-                    "data-agent-edge-actual": `${geom.edge.source}->${geom.edge.target}`
-                  }, `actual-${i}-${geom.edge.source}-${geom.edge.target}`);
-                })
+                }, bucket.id))
               ]
-            }),
-            /* @__PURE__ */ jsx_runtime7.jsx("ul", {
-              className: agent_canvas_module_default.canvasCards,
-              children: entities.map((entity) => {
-                const box = layout.cards.get(entity.key);
-                if (box === undefined)
-                  return null;
-                return /* @__PURE__ */ jsx_runtime7.jsx(EntityCard, {
-                  entity,
-                  t,
-                  box
-                }, entity.key);
-              })
-            })
+            }, stage.id))
           ]
-        })
+        }, group.phase))
       }),
-      /* @__PURE__ */ jsx_runtime7.jsx("div", {
-        className: agent_canvas_module_default.canvasLegend,
-        children: /* @__PURE__ */ jsx_runtime7.jsx(Legend, {
+      /* @__PURE__ */ jsx_runtime9.jsx("div", {
+        className: agent_list_module_default.listLegend,
+        children: /* @__PURE__ */ jsx_runtime9.jsx(Legend, {
           t
         })
       })
@@ -3986,15 +3766,9 @@ var css4 = `
 
 
 
+
 .\\38 e395e34_eventLogPage {
-  flex: 1;
-  min-height: 0;
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  grid-template-rows: minmax(0, 1fr);   
-  gap: var(--mstar-space-3);
-  padding: var(--mstar-space-3);
-  overflow: hidden;                     
+  min-width: 0;
 }
 
 
@@ -4004,7 +3778,6 @@ var css4 = `
   flex-direction: column;
   gap: var(--mstar-space-2);
   min-width: 0;
-  min-height: 0;
   padding: var(--mstar-space-3);
   border: 1px solid var(--dsw-alias-border-l1);
   border-radius: 8px;
@@ -4038,9 +3811,6 @@ var css4 = `
   margin: 0;
   padding: 0;
   list-style: none;
-  flex: 1;            
-  min-height: 0;      
-  overflow-y: auto;   
 }
 
 
@@ -4235,15 +4005,6 @@ var css4 = `
 .bd3cb6ff_detailValueMissing {
   color: var(--dsw-alias-label-caption);
 }
-
-
-
-@media (max-width: 1200px) {
-  .\\38 e395e34_eventLogPage {
-    grid-template-columns: 1fr;
-    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
-  }
-}
 `;
 var tagId4 = "@mstar-harness/dsh/event-log.module.css";
 if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId4) + "]") === null) {
@@ -4256,7 +4017,7 @@ if (typeof document !== "undefined" && document.querySelector("style[data-plugin
 var event_log_module_default = { eventLogPage: "8e395e34_eventLogPage", section: "fcdd0ccc_section", sectionTitle: "aded23ea_sectionTitle", empty: "18a7beee_empty", rowList: "40959323_rowList", eventSummary: "5a6ad2b9_eventSummary", violationSummary: "c5acc9f0_violationSummary", eventDetails: "1e6e6b57_eventDetails", eventRole: "397ccf2b_eventRole", eventStage: "18dd486b_eventStage", eventTarget: "90ce3f22_eventTarget", eventTime: "ae6064ce_eventTime", eventAgent: "ff483c84_eventAgent", eventDuration: "3e37545b_eventDuration", statusChip: "c32c2c65_statusChip", statusDot: "88d97a8a_statusDot", statusDispatched: "d260dfec_statusDispatched", statusAdvisory: "8bbef368_statusAdvisory", statusDenied: "d1f67934_statusDenied", statusOk: "ba35cad1_statusOk", statusError: "819501bf_statusError", statusUnknown: "53c75757_statusUnknown", settledMark: "398c5713_settledMark", settleGlyph: "83e240f0_settleGlyph", unexpectedBadge: "88450335_unexpectedBadge", severityChip: "8f4e5388_severityChip", violationCode: "e42c0bfd_violationCode", violationMessage: "35d5910f_violationMessage", detailBody: "558cab30_detailBody", detailField: "3f8595e8_detailField", detailLabel: "a6812cb2_detailLabel", detailValue: "079e736d_detailValue", detailValueMissing: "bd3cb6ff_detailValueMissing" };
 
 // src/client/panel/pages/EventLogPage.tsx
-var jsx_runtime8 = require("react/jsx-runtime");
+var jsx_runtime10 = require("react/jsx-runtime");
 function flowStatusLabel(status, t) {
   switch (status) {
     case "dispatched":
@@ -4307,16 +4068,16 @@ function orDash(value) {
 }
 function DetailField({ field, label, value }) {
   const missing = value === "";
-  return /* @__PURE__ */ jsx_runtime8.jsxs("div", {
+  return /* @__PURE__ */ jsx_runtime10.jsxs("div", {
     className: event_log_module_default.detailField,
     "data-event-log-field": field,
     "data-event-log-missing": missing ? "true" : "false",
     children: [
-      /* @__PURE__ */ jsx_runtime8.jsx("span", {
+      /* @__PURE__ */ jsx_runtime10.jsx("span", {
         className: event_log_module_default.detailLabel,
         children: label
       }),
-      /* @__PURE__ */ jsx_runtime8.jsx("span", {
+      /* @__PURE__ */ jsx_runtime10.jsx("span", {
         className: missing ? `${event_log_module_default.detailValue} ${event_log_module_default.detailValueMissing}` : event_log_module_default.detailValue,
         children: missing ? "—" : value
       })
@@ -4328,88 +4089,93 @@ function EventDetailsBody({
   source,
   t
 }) {
-  return /* @__PURE__ */ jsx_runtime8.jsxs("div", {
+  return /* @__PURE__ */ jsx_runtime10.jsxs("div", {
     className: event_log_module_default.detailBody,
     "data-event-log-detail-body": true,
     children: [
-      /* @__PURE__ */ jsx_runtime8.jsx(DetailField, {
+      /* @__PURE__ */ jsx_runtime10.jsx(DetailField, {
         field: "role",
         label: t("event-log.field.role"),
         value: entry.role
       }),
-      /* @__PURE__ */ jsx_runtime8.jsx(DetailField, {
+      /* @__PURE__ */ jsx_runtime10.jsx(DetailField, {
         field: "agent",
         label: t("event-log.field.agent"),
         value: entry.agent
       }),
-      /* @__PURE__ */ jsx_runtime8.jsx(DetailField, {
+      /* @__PURE__ */ jsx_runtime10.jsx(DetailField, {
         field: "stage",
         label: t("event-log.field.stage"),
         value: entry.stage
       }),
-      /* @__PURE__ */ jsx_runtime8.jsx(DetailField, {
+      /* @__PURE__ */ jsx_runtime10.jsx(DetailField, {
         field: "plan",
         label: t("event-log.field.plan"),
         value: source?.planId ?? ""
       }),
-      /* @__PURE__ */ jsx_runtime8.jsx(DetailField, {
+      /* @__PURE__ */ jsx_runtime10.jsx(DetailField, {
         field: "task",
         label: t("event-log.field.task"),
         value: source?.taskId ?? ""
       }),
-      /* @__PURE__ */ jsx_runtime8.jsx(DetailField, {
+      /* @__PURE__ */ jsx_runtime10.jsx(DetailField, {
         field: "category",
         label: t("event-log.field.category"),
         value: source?.taskCategory ?? ""
       }),
-      /* @__PURE__ */ jsx_runtime8.jsx(DetailField, {
+      /* @__PURE__ */ jsx_runtime10.jsx(DetailField, {
         field: "time",
         label: t("event-log.field.time"),
         value: source === undefined ? "" : formatEventTimeFull(source.ts)
       }),
-      /* @__PURE__ */ jsx_runtime8.jsx(DetailField, {
+      /* @__PURE__ */ jsx_runtime10.jsx(DetailField, {
         field: "kind",
         label: t("event-log.field.kind"),
         value: entry.eventKind === "dispatch" ? t("event-log.kind.dispatch") : entry.eventKind === "settle" ? t("event-log.kind.settle") : entry.eventKind
       }),
-      /* @__PURE__ */ jsx_runtime8.jsx(DetailField, {
+      /* @__PURE__ */ jsx_runtime10.jsx(DetailField, {
         field: "status",
         label: t("event-log.field.status"),
         value: flowStatusLabel(entry.status, t)
       }),
-      /* @__PURE__ */ jsx_runtime8.jsx(DetailField, {
+      /* @__PURE__ */ jsx_runtime10.jsx(DetailField, {
         field: "expected",
         label: t("event-log.field.expected"),
-        value: entry.eventKind === "settle" || isWorkflowKind(entry.eventKind) ? "" : entry.expected ? t("event-log.yes") : t("event-log.no")
+        value: entry.eventKind === "settle" || entry.eventKind === "subagent-link" || isWorkflowKind(entry.eventKind) ? "" : entry.expected ? t("event-log.yes") : t("event-log.no")
       }),
-      /* @__PURE__ */ jsx_runtime8.jsx(DetailField, {
+      /* @__PURE__ */ jsx_runtime10.jsx(DetailField, {
         field: "settled",
         label: t("event-log.field.settled"),
-        value: entry.eventKind === "settle" || isWorkflowKind(entry.eventKind) ? "" : entry.settled ? t("event-log.yes") : t("event-log.no")
+        value: entry.eventKind === "settle" || entry.eventKind === "subagent-link" || isWorkflowKind(entry.eventKind) ? "" : entry.settled ? t("event-log.yes") : t("event-log.no")
       }),
-      /* @__PURE__ */ jsx_runtime8.jsx(DetailField, {
+      /* @__PURE__ */ jsx_runtime10.jsx(DetailField, {
         field: "duration",
         label: t("event-log.field.duration"),
         value: entry.durationMs === null ? "" : `${entry.durationMs}ms`
       }),
-      isWorkflowKind(entry.eventKind) && /* @__PURE__ */ jsx_runtime8.jsxs(jsx_runtime8.Fragment, {
+      /* @__PURE__ */ jsx_runtime10.jsx(DetailField, {
+        field: "child-id",
+        label: t("event-log.field.child-id"),
+        value: source?.childId ?? ""
+      }),
+      isWorkflowKind(entry.eventKind) && /* @__PURE__ */ jsx_runtime10.jsxs(jsx_runtime10.Fragment, {
         children: [
-          /* @__PURE__ */ jsx_runtime8.jsx(DetailField, {
+          /* @__PURE__ */ jsx_runtime10.jsx(DetailField, {
             field: "run-id",
             label: t("event-log.field.run-id"),
             value: source?.runId ?? ""
           }),
-          /* @__PURE__ */ jsx_runtime8.jsx(DetailField, {
+          /* @__PURE__ */ jsx_runtime10.jsx(DetailField, {
             field: "name",
             label: t("event-log.field.name"),
             value: entry.name
           }),
-          /* @__PURE__ */ jsx_runtime8.jsx(DetailField, {
+          /* @__PURE__ */ jsx_runtime10.jsx(DetailField, {
             field: "members",
             label: t("event-log.field.members"),
             value: source?.memberCount !== undefined ? String(source.memberCount) : ""
           }),
-          /* @__PURE__ */ jsx_runtime8.jsx(DetailField, {
+          /* @__PURE__ */ jsx_runtime10.jsx(DetailField, {
             field: "stop-reason",
             label: t("event-log.field.stop-reason"),
             value: source?.stopReason ?? ""
@@ -4426,68 +4192,68 @@ function EventLogEventRow({
 }) {
   const time = formatEventTime(entry.ts);
   const workflowIdentity = isWorkflowKind(entry.eventKind) ? entry.name !== "" ? entry.name : entry.runId !== "" ? entry.runId : "" : "";
-  return /* @__PURE__ */ jsx_runtime8.jsx("li", {
+  return /* @__PURE__ */ jsx_runtime10.jsx("li", {
     className: event_log_module_default.eventRow,
     "data-event-log-row-kind": "event",
     "data-event-log-row-id": entry.id,
     "data-event-log-expected": entry.expected ? "true" : "false",
-    children: /* @__PURE__ */ jsx_runtime8.jsxs("details", {
+    children: /* @__PURE__ */ jsx_runtime10.jsxs("details", {
       className: event_log_module_default.eventDetails,
       "data-event-log-details": true,
       children: [
-        /* @__PURE__ */ jsx_runtime8.jsxs("summary", {
+        /* @__PURE__ */ jsx_runtime10.jsxs("summary", {
           className: event_log_module_default.eventSummary,
           "data-event-log-summary": true,
           children: [
-            /* @__PURE__ */ jsx_runtime8.jsx("span", {
+            /* @__PURE__ */ jsx_runtime10.jsx("span", {
               className: event_log_module_default.eventRole,
-              children: entry.eventKind === "settle" ? /* @__PURE__ */ jsx_runtime8.jsx("span", {
+              children: entry.eventKind === "settle" ? /* @__PURE__ */ jsx_runtime10.jsx("span", {
                 className: event_log_module_default.settleGlyph,
                 "aria-hidden": "true",
                 children: "✓"
-              }) : workflowIdentity !== "" ? /* @__PURE__ */ jsx_runtime8.jsx("span", {
+              }) : workflowIdentity !== "" ? /* @__PURE__ */ jsx_runtime10.jsx("span", {
                 "data-event-log-name": workflowIdentity,
                 children: workflowIdentity
               }) : entry.role !== "" ? entry.role : t("panel.unknown")
             }),
-            entry.stage !== "" && /* @__PURE__ */ jsx_runtime8.jsx("span", {
+            entry.stage !== "" && /* @__PURE__ */ jsx_runtime10.jsx("span", {
               className: event_log_module_default.eventStage,
               "data-event-log-stage": entry.stage,
               children: entry.stage
             }),
-            entry.task !== "" && /* @__PURE__ */ jsx_runtime8.jsx("span", {
+            entry.task !== "" && /* @__PURE__ */ jsx_runtime10.jsx("span", {
               className: event_log_module_default.eventTarget,
               "data-event-log-target": entry.task,
               children: entry.task
             }),
-            time !== "" && /* @__PURE__ */ jsx_runtime8.jsx("span", {
+            time !== "" && /* @__PURE__ */ jsx_runtime10.jsx("span", {
               className: event_log_module_default.eventTime,
               "data-event-log-time": time,
               children: time
             }),
-            /* @__PURE__ */ jsx_runtime8.jsxs("span", {
+            /* @__PURE__ */ jsx_runtime10.jsxs("span", {
               className: `${event_log_module_default.statusChip} ${flowStatusClass(entry.status)}`,
               "data-event-log-status": entry.status,
               children: [
-                /* @__PURE__ */ jsx_runtime8.jsx("span", {
+                /* @__PURE__ */ jsx_runtime10.jsx("span", {
                   className: event_log_module_default.statusDot,
                   "aria-hidden": "true"
                 }),
                 flowStatusLabel(entry.status, t)
               ]
             }),
-            entry.eventKind === "dispatch" && entry.settled && /* @__PURE__ */ jsx_runtime8.jsx("span", {
+            entry.eventKind === "dispatch" && entry.settled && /* @__PURE__ */ jsx_runtime10.jsx("span", {
               className: event_log_module_default.settledMark,
               "data-event-log-settled": "true",
               "aria-hidden": "true",
               children: "✓"
             }),
-            entry.agent !== "" && /* @__PURE__ */ jsx_runtime8.jsx("span", {
+            entry.agent !== "" && /* @__PURE__ */ jsx_runtime10.jsx("span", {
               className: event_log_module_default.eventAgent,
               "data-event-log-agent": entry.agent,
               children: entry.agent
             }),
-            entry.durationMs !== null && /* @__PURE__ */ jsx_runtime8.jsxs("span", {
+            entry.durationMs !== null && /* @__PURE__ */ jsx_runtime10.jsxs("span", {
               className: event_log_module_default.eventDuration,
               "data-event-log-duration": entry.durationMs,
               children: [
@@ -4495,14 +4261,14 @@ function EventLogEventRow({
                 "ms"
               ]
             }),
-            entry.eventKind === "dispatch" && !entry.expected && /* @__PURE__ */ jsx_runtime8.jsx("span", {
+            entry.eventKind === "dispatch" && !entry.expected && /* @__PURE__ */ jsx_runtime10.jsx("span", {
               className: event_log_module_default.unexpectedBadge,
               "data-event-log-unexpected": "true",
               children: t("flow.unexpected")
             })
           ]
         }),
-        /* @__PURE__ */ jsx_runtime8.jsx(EventDetailsBody, {
+        /* @__PURE__ */ jsx_runtime10.jsx(EventDetailsBody, {
           entry,
           source,
           t
@@ -4513,50 +4279,50 @@ function EventLogEventRow({
 }
 function ViolationRow({ entry, t }) {
   const severity = entry.severity !== "" ? entry.severity : "unknown";
-  return /* @__PURE__ */ jsx_runtime8.jsx("li", {
+  return /* @__PURE__ */ jsx_runtime10.jsx("li", {
     className: event_log_module_default.violationRow,
     "data-event-log-row-kind": "violation",
     "data-event-log-row-id": entry.id,
-    children: /* @__PURE__ */ jsx_runtime8.jsxs("details", {
+    children: /* @__PURE__ */ jsx_runtime10.jsxs("details", {
       className: event_log_module_default.eventDetails,
       "data-event-log-details": true,
       children: [
-        /* @__PURE__ */ jsx_runtime8.jsxs("summary", {
+        /* @__PURE__ */ jsx_runtime10.jsxs("summary", {
           className: event_log_module_default.violationSummary,
           "data-event-log-summary": true,
           children: [
-            /* @__PURE__ */ jsx_runtime8.jsx("span", {
+            /* @__PURE__ */ jsx_runtime10.jsx("span", {
               className: event_log_module_default.severityChip,
               "data-event-log-severity": severity,
               children: entry.severity !== "" ? entry.severity : t("panel.unknown")
             }),
-            entry.code !== "" && /* @__PURE__ */ jsx_runtime8.jsx("code", {
+            entry.code !== "" && /* @__PURE__ */ jsx_runtime10.jsx("code", {
               className: event_log_module_default.violationCode,
               "data-event-log-code": entry.code,
               children: entry.code
             }),
-            /* @__PURE__ */ jsx_runtime8.jsx("span", {
+            /* @__PURE__ */ jsx_runtime10.jsx("span", {
               className: event_log_module_default.violationMessage,
               "data-event-log-message": entry.message,
               children: orDash(entry.message)
             })
           ]
         }),
-        /* @__PURE__ */ jsx_runtime8.jsxs("div", {
+        /* @__PURE__ */ jsx_runtime10.jsxs("div", {
           className: event_log_module_default.detailBody,
           "data-event-log-detail-body": true,
           children: [
-            /* @__PURE__ */ jsx_runtime8.jsx(DetailField, {
+            /* @__PURE__ */ jsx_runtime10.jsx(DetailField, {
               field: "severity",
               label: t("event-log.field.severity"),
               value: entry.severity
             }),
-            /* @__PURE__ */ jsx_runtime8.jsx(DetailField, {
+            /* @__PURE__ */ jsx_runtime10.jsx(DetailField, {
               field: "code",
               label: t("event-log.field.code"),
               value: entry.code
             }),
-            /* @__PURE__ */ jsx_runtime8.jsx(DetailField, {
+            /* @__PURE__ */ jsx_runtime10.jsx(DetailField, {
               field: "message",
               label: t("event-log.field.message"),
               value: entry.message
@@ -4573,38 +4339,38 @@ function EventLogPage({ view, t }) {
   const violationEntries = entries.filter((e) => e.kind === "violation");
   const eventById = new Map(view.events.map((event) => [event.id, event]));
   if (eventEntries.length === 0 && violationEntries.length === 0) {
-    return /* @__PURE__ */ jsx_runtime8.jsx("div", {
+    return /* @__PURE__ */ jsx_runtime10.jsx("div", {
       className: event_log_module_default.eventLogPage,
       "data-mstar-page": "events",
-      children: /* @__PURE__ */ jsx_runtime8.jsx("p", {
+      children: /* @__PURE__ */ jsx_runtime10.jsx("p", {
         className: event_log_module_default.empty,
         "data-event-log-empty": true,
         children: t("event-log.empty")
       })
     });
   }
-  return /* @__PURE__ */ jsx_runtime8.jsxs("div", {
-    className: event_log_module_default.eventLogPage,
+  return /* @__PURE__ */ jsx_runtime10.jsxs("div", {
+    className: `${event_log_module_default.eventLogPage} ${panel_module_default.groupGrid}`,
     "data-mstar-page": "events",
     children: [
-      /* @__PURE__ */ jsx_runtime8.jsxs("section", {
+      /* @__PURE__ */ jsx_runtime10.jsxs("section", {
         className: event_log_module_default.section,
         "data-event-log-section": "events",
         "data-event-log-section-count": eventEntries.length,
         children: [
-          /* @__PURE__ */ jsx_runtime8.jsx("h2", {
+          /* @__PURE__ */ jsx_runtime10.jsx("h2", {
             className: event_log_module_default.sectionTitle,
             "data-event-log-section-title": true,
             children: t("event-log.section.events")
           }),
-          eventEntries.length === 0 ? /* @__PURE__ */ jsx_runtime8.jsx("p", {
+          eventEntries.length === 0 ? /* @__PURE__ */ jsx_runtime10.jsx("p", {
             className: event_log_module_default.empty,
             "data-event-log-empty-section": "events",
             children: t("event-log.empty.events")
-          }) : /* @__PURE__ */ jsx_runtime8.jsx("ul", {
+          }) : /* @__PURE__ */ jsx_runtime10.jsx("ul", {
             className: event_log_module_default.rowList,
             "data-event-log-list": "events",
-            children: eventEntries.map((entry) => /* @__PURE__ */ jsx_runtime8.jsx(EventLogEventRow, {
+            children: eventEntries.map((entry) => /* @__PURE__ */ jsx_runtime10.jsx(EventLogEventRow, {
               entry,
               source: eventById.get(entry.id),
               t
@@ -4612,24 +4378,24 @@ function EventLogPage({ view, t }) {
           })
         ]
       }),
-      /* @__PURE__ */ jsx_runtime8.jsxs("section", {
+      /* @__PURE__ */ jsx_runtime10.jsxs("section", {
         className: event_log_module_default.section,
         "data-event-log-section": "violations",
         "data-event-log-section-count": violationEntries.length,
         children: [
-          /* @__PURE__ */ jsx_runtime8.jsx("h2", {
+          /* @__PURE__ */ jsx_runtime10.jsx("h2", {
             className: event_log_module_default.sectionTitle,
             "data-event-log-section-title": true,
             children: t("event-log.section.violations")
           }),
-          violationEntries.length === 0 ? /* @__PURE__ */ jsx_runtime8.jsx("p", {
+          violationEntries.length === 0 ? /* @__PURE__ */ jsx_runtime10.jsx("p", {
             className: event_log_module_default.empty,
             "data-event-log-empty-section": "violations",
             children: t("event-log.empty.violations")
-          }) : /* @__PURE__ */ jsx_runtime8.jsx("ul", {
+          }) : /* @__PURE__ */ jsx_runtime10.jsx("ul", {
             className: event_log_module_default.rowList,
             "data-event-log-list": "violations",
-            children: violationEntries.map((entry) => /* @__PURE__ */ jsx_runtime8.jsx(ViolationRow, {
+            children: violationEntries.map((entry) => /* @__PURE__ */ jsx_runtime10.jsx(ViolationRow, {
               entry,
               t
             }, entry.id))
@@ -4642,7 +4408,7 @@ function EventLogPage({ view, t }) {
 
 // src/client/panel/zones/TaskBoard.tsx
 var React = __toESM(require("react"));
-var jsx_runtime9 = require("react/jsx-runtime");
+var jsx_runtime11 = require("react/jsx-runtime");
 var COLUMN_TITLE = {
   Todo: "zone.state.Todo",
   InProgress: "zone.state.InProgress",
@@ -4675,97 +4441,93 @@ function TaskBoard({ view, t }) {
   const empty = view.total === 0;
   const [expanded, setExpanded] = React.useState(new Set);
   const toggle = (id) => setExpanded((prev) => toggleKanbanExpanded(prev, id));
-  return /* @__PURE__ */ jsx_runtime9.jsxs("section", {
+  return /* @__PURE__ */ jsx_runtime11.jsxs("section", {
     className: zones_module_default.zone,
     "data-zone": "tasks",
     children: [
-      /* @__PURE__ */ jsx_runtime9.jsxs("header", {
+      /* @__PURE__ */ jsx_runtime11.jsxs("header", {
         className: zones_module_default.tasksHeader,
         "data-zone-header": true,
         children: [
-          /* @__PURE__ */ jsx_runtime9.jsx("h2", {
+          /* @__PURE__ */ jsx_runtime11.jsx("h2", {
             className: zones_module_default.zoneHeader,
             children: t("zone.tasks.title")
           }),
-          /* @__PURE__ */ jsx_runtime9.jsx("span", {
+          /* @__PURE__ */ jsx_runtime11.jsx("span", {
             className: zones_module_default.tasksTotal,
             "data-tasks-total": view.total,
             children: t("zone.tasks.total", { count: String(view.total) })
           })
         ]
       }),
-      empty && /* @__PURE__ */ jsx_runtime9.jsx("p", {
+      empty && /* @__PURE__ */ jsx_runtime11.jsx("p", {
         className: zones_module_default.zoneEmpty,
         "data-zone-empty": "no-plans",
         children: t("zone.tasks.no-plans")
       }),
-      /* @__PURE__ */ jsx_runtime9.jsx("div", {
-        className: zones_module_default.kanban,
+      /* @__PURE__ */ jsx_runtime11.jsx("div", {
+        className: `${zones_module_default.kanban} ${panel_module_default.groupGrid}`,
         "data-mstar-kanban": true,
-        children: columns.map((column, i) => {
-          const arrow = i > 0 ? leadingArrow(column.id) : null;
+        children: columns.map((column) => {
+          const arrow = leadingArrow(column.id);
           const isExpanded = expanded.has(column.id);
           const shown = visibleKanbanPlans(column, isExpanded);
           const overflow = column.capped === null ? 0 : column.count - column.capped;
-          return /* @__PURE__ */ jsx_runtime9.jsxs(React.Fragment, {
+          return /* @__PURE__ */ jsx_runtime11.jsxs("div", {
+            className: zones_module_default.kanbanColumn,
+            "data-kanban-column": column.id,
             children: [
-              arrow !== null && /* @__PURE__ */ jsx_runtime9.jsx("span", {
-                className: zones_module_default.kanbanArrow,
-                "data-kanban-arrow": arrow.label,
-                "aria-hidden": "true",
-                children: arrow.glyph
+              /* @__PURE__ */ jsx_runtime11.jsxs("header", {
+                className: zones_module_default.kanbanColumnHeader,
+                children: [
+                  arrow !== null && /* @__PURE__ */ jsx_runtime11.jsx("span", {
+                    className: zones_module_default.kanbanArrow,
+                    "data-kanban-arrow": arrow.label,
+                    "aria-hidden": "true",
+                    children: arrow.glyph
+                  }),
+                  /* @__PURE__ */ jsx_runtime11.jsx("span", {
+                    className: zones_module_default.kanbanColumnTitle,
+                    children: t(COLUMN_TITLE[column.id])
+                  }),
+                  /* @__PURE__ */ jsx_runtime11.jsx("span", {
+                    className: zones_module_default.kanbanCount,
+                    "data-kanban-count": column.count,
+                    children: column.count
+                  })
+                ]
               }),
-              /* @__PURE__ */ jsx_runtime9.jsxs("div", {
-                className: zones_module_default.kanbanColumn,
-                "data-kanban-column": column.id,
+              /* @__PURE__ */ jsx_runtime11.jsxs("ul", {
+                className: zones_module_default.kanbanCards,
+                id: `kanban-cards-${column.id}`,
                 children: [
-                  /* @__PURE__ */ jsx_runtime9.jsxs("header", {
-                    className: zones_module_default.kanbanColumnHeader,
+                  shown.map((plan, j) => /* @__PURE__ */ jsx_runtime11.jsxs("li", {
+                    className: zones_module_default.planCard,
+                    "data-plan-id": plan.id,
+                    "data-plan-status": plan.status,
                     children: [
-                      /* @__PURE__ */ jsx_runtime9.jsx("span", {
-                        className: zones_module_default.kanbanColumnTitle,
-                        children: t(COLUMN_TITLE[column.id])
+                      /* @__PURE__ */ jsx_runtime11.jsx("code", {
+                        className: zones_module_default.planCardId,
+                        children: plan.id
                       }),
-                      /* @__PURE__ */ jsx_runtime9.jsx("span", {
-                        className: zones_module_default.kanbanCount,
-                        "data-kanban-count": column.count,
-                        children: column.count
-                      })
-                    ]
-                  }),
-                  /* @__PURE__ */ jsx_runtime9.jsxs("ul", {
-                    className: zones_module_default.kanbanCards,
-                    id: `kanban-cards-${column.id}`,
-                    children: [
-                      shown.map((plan, j) => /* @__PURE__ */ jsx_runtime9.jsxs("li", {
-                        className: zones_module_default.planCard,
-                        "data-plan-id": plan.id,
-                        "data-plan-status": plan.status,
-                        children: [
-                          /* @__PURE__ */ jsx_runtime9.jsx("code", {
-                            className: zones_module_default.planCardId,
-                            children: plan.id
-                          }),
-                          /* @__PURE__ */ jsx_runtime9.jsx("span", {
-                            className: zones_module_default.planCardStatus,
-                            "data-status": plan.status,
-                            children: plan.status
-                          })
-                        ]
-                      }, plan.id === "" ? `card-${j}` : plan.id)),
-                      overflow > 0 && /* @__PURE__ */ jsx_runtime9.jsx("li", {
-                        className: zones_module_default.kanbanMore,
-                        children: /* @__PURE__ */ jsx_runtime9.jsx("button", {
-                          type: "button",
-                          className: zones_module_default.kanbanMoreButton,
-                          "data-kanban-more": isExpanded ? "collapse" : "expand",
-                          "aria-expanded": isExpanded,
-                          "aria-controls": `kanban-cards-${column.id}`,
-                          onClick: () => toggle(column.id),
-                          children: isExpanded ? t("zone.tasks.collapse") : t("zone.tasks.more", { count: String(overflow) })
-                        })
+                      /* @__PURE__ */ jsx_runtime11.jsx("span", {
+                        className: zones_module_default.planCardStatus,
+                        "data-status": plan.status,
+                        children: plan.status
                       })
                     ]
+                  }, plan.id === "" ? `card-${j}` : plan.id)),
+                  overflow > 0 && /* @__PURE__ */ jsx_runtime11.jsx("li", {
+                    className: zones_module_default.kanbanMore,
+                    children: /* @__PURE__ */ jsx_runtime11.jsx("button", {
+                      type: "button",
+                      className: zones_module_default.kanbanMoreButton,
+                      "data-kanban-more": isExpanded ? "collapse" : "expand",
+                      "aria-expanded": isExpanded,
+                      "aria-controls": `kanban-cards-${column.id}`,
+                      onClick: () => toggle(column.id),
+                      children: isExpanded ? t("zone.tasks.collapse") : t("zone.tasks.more", { count: String(overflow) })
+                    })
                   })
                 ]
               })
@@ -4778,64 +4540,64 @@ function TaskBoard({ view, t }) {
 }
 
 // src/client/panel/zones/ProjectRollup.tsx
-var jsx_runtime10 = require("react/jsx-runtime");
+var jsx_runtime12 = require("react/jsx-runtime");
 function ProjectRollup({ view, t }) {
   const { milestones, openResiduals } = view;
-  return /* @__PURE__ */ jsx_runtime10.jsxs("section", {
+  return /* @__PURE__ */ jsx_runtime12.jsxs("section", {
     className: zones_module_default.zone,
     "data-zone": "project",
     children: [
-      /* @__PURE__ */ jsx_runtime10.jsx("header", {
+      /* @__PURE__ */ jsx_runtime12.jsx("header", {
         className: zones_module_default.tasksHeader,
         "data-zone-header": true,
-        children: /* @__PURE__ */ jsx_runtime10.jsx("h2", {
+        children: /* @__PURE__ */ jsx_runtime12.jsx("h2", {
           className: zones_module_default.zoneHeader,
           children: t("zone.project.title")
         })
       }),
-      /* @__PURE__ */ jsx_runtime10.jsx("h3", {
+      /* @__PURE__ */ jsx_runtime12.jsx("h3", {
         className: zones_module_default.zoneTitle,
         "data-project-milestones-title": true,
         children: t("zone.project.milestones")
       }),
-      milestones.length === 0 ? /* @__PURE__ */ jsx_runtime10.jsx("p", {
+      milestones.length === 0 ? /* @__PURE__ */ jsx_runtime12.jsx("p", {
         className: zones_module_default.zoneEmpty,
         "data-mstar-empty": "no-milestones",
         children: t("zone.project.none")
-      }) : /* @__PURE__ */ jsx_runtime10.jsx("ul", {
+      }) : /* @__PURE__ */ jsx_runtime12.jsx("ul", {
         className: zones_module_default.rollupList,
         "data-project-milestones": true,
-        children: milestones.map((milestone, i) => /* @__PURE__ */ jsx_runtime10.jsx("li", {
+        children: milestones.map((milestone, i) => /* @__PURE__ */ jsx_runtime12.jsx("li", {
           className: zones_module_default.rollupItem,
           "data-project-milestone": true,
-          children: /* @__PURE__ */ jsx_runtime10.jsx("span", {
+          children: /* @__PURE__ */ jsx_runtime12.jsx("span", {
             className: zones_module_default.rollupMilestone,
             children: milestone
           })
         }, `${milestone}-${i}`))
       }),
-      /* @__PURE__ */ jsx_runtime10.jsx("h3", {
+      /* @__PURE__ */ jsx_runtime12.jsx("h3", {
         className: zones_module_default.zoneTitle,
         "data-project-residuals-title": true,
         children: t("zone.project.residuals")
       }),
-      openResiduals.length === 0 ? /* @__PURE__ */ jsx_runtime10.jsx("p", {
+      openResiduals.length === 0 ? /* @__PURE__ */ jsx_runtime12.jsx("p", {
         className: zones_module_default.zoneEmpty,
         "data-mstar-empty": "no-project-residuals",
         children: t("zone.project.none")
-      }) : /* @__PURE__ */ jsx_runtime10.jsx("ul", {
+      }) : /* @__PURE__ */ jsx_runtime12.jsx("ul", {
         className: zones_module_default.rollupList,
         "data-project-residuals": true,
-        children: openResiduals.map((row, i) => /* @__PURE__ */ jsx_runtime10.jsxs("li", {
+        children: openResiduals.map((row, i) => /* @__PURE__ */ jsx_runtime12.jsxs("li", {
           className: zones_module_default.rollupItem,
           "data-project-residual": true,
           children: [
-            /* @__PURE__ */ jsx_runtime10.jsx("span", {
+            /* @__PURE__ */ jsx_runtime12.jsx("span", {
               className: zones_module_default.severityChip,
               "data-severity": row.severity,
               children: row.severity
             }),
-            /* @__PURE__ */ jsx_runtime10.jsx("span", {
+            /* @__PURE__ */ jsx_runtime12.jsx("span", {
               className: zones_module_default.rollupCount,
               "data-project-residual-count": row.count,
               children: row.count
@@ -4848,25 +4610,24 @@ function ProjectRollup({ view, t }) {
 }
 
 // src/client/panel/pages/IterationTaskPage.tsx
-var jsx_runtime11 = require("react/jsx-runtime");
+var jsx_runtime13 = require("react/jsx-runtime");
 function IterationTaskPage({ view, t }) {
-  return /* @__PURE__ */ jsx_runtime11.jsxs("div", {
+  return /* @__PURE__ */ jsx_runtime13.jsxs("div", {
     className: panel_module_default.iterationPage,
     "data-mstar-page": "tasks",
     children: [
-      /* @__PURE__ */ jsx_runtime11.jsx(IterationInfoSection, {
+      /* @__PURE__ */ jsx_runtime13.jsx(IterationInfoSection, {
         iteration: view.iteration,
         t
       }),
-      /* @__PURE__ */ jsx_runtime11.jsxs("div", {
+      /* @__PURE__ */ jsx_runtime13.jsxs("div", {
         className: panel_module_default.iterationTasks,
-        "data-mstar-tasks-scroll": true,
         children: [
-          /* @__PURE__ */ jsx_runtime11.jsx(TaskBoard, {
+          /* @__PURE__ */ jsx_runtime13.jsx(TaskBoard, {
             view: view.tasks,
             t
           }),
-          /* @__PURE__ */ jsx_runtime11.jsx(ProjectRollup, {
+          /* @__PURE__ */ jsx_runtime13.jsx(ProjectRollup, {
             view: view.project,
             t
           })
@@ -4878,17 +4639,20 @@ function IterationTaskPage({ view, t }) {
 
 // src/client/panel/use-mstar-engine-status.ts
 var import_react3 = require("react");
-var EMPTY_SNAPSHOT = { entries: new Map };
+var EMPTY_SNAPSHOT = { entries: new Map, selections: new Map };
 var NO_SUBSCRIBE = () => () => {};
 var readEmptySnapshot = () => EMPTY_SNAPSHOT;
+var ANCHOR_PLUGIN = "mstar-engine";
+var LEGACY_ANCHOR_PLUGIN = "mstar-engine-status";
 function latestEngineStatusRow(nodes) {
   for (let i = nodes.length - 1;i >= 0; i--) {
     const node = nodes[i];
     if (node.kind !== "context" || node.form !== "catalog")
       continue;
     const source = node.source;
-    if (source?.kind === "plugin" && source.plugin === "mstar-engine-status")
+    if (source?.kind === "plugin" && (source.plugin === ANCHOR_PLUGIN || source.plugin === LEGACY_ANCHOR_PLUGIN)) {
       return node;
+    }
   }
   return null;
 }
@@ -4913,11 +4677,13 @@ function selectSessionCwd(sessionId) {
   };
 }
 var WAITING = { state: "waiting", anchorTime: null, payload: null, at: null, turn: null, reason: null };
+var IDLE_PICK = { state: "idle" };
 function unavailable2(anchorTime, reason) {
   return { state: "unavailable", anchorTime, payload: null, at: null, turn: null, reason };
 }
 function useMstarEngineStatus(seats) {
   const { useChat, useSessions, sessionId, engineStatus } = seats;
+  const session = sessionId === undefined ? null : String(sessionId);
   let anchorTime = null;
   let cwd = null;
   try {
@@ -4931,62 +4697,84 @@ function useMstarEngineStatus(seats) {
     cwd = null;
   }
   const snapshot = import_react3.useSyncExternalStore(engineStatus?.subscribe ?? NO_SUBSCRIBE, engineStatus?.getSnapshot ?? readEmptySnapshot, engineStatus?.getSnapshot ?? readEmptySnapshot);
-  if (anchorTime === null)
-    return WAITING;
-  if (engineStatus !== undefined && sessionId !== undefined && cwd !== null) {
-    try {
-      engineStatus.ensure(String(sessionId), cwd, anchorTime);
-    } catch {}
-  }
-  const entry = sessionId === undefined ? undefined : snapshot.entries.get(String(sessionId));
-  if (entry === undefined) {
-    if (engineStatus === undefined)
-      return unavailable2(anchorTime, "no-connection");
-    if (sessionId === undefined)
-      return unavailable2(anchorTime, "session-unknown");
-    if (cwd === null)
-      return unavailable2(anchorTime, "session-cwd-unknown");
-    return { state: "loading", anchorTime, payload: null, at: null, turn: null, reason: null };
+  const target = engineStatus !== undefined && session !== null && cwd !== null ? { client: engineStatus, sessionId: session, cwd } : null;
+  let view;
+  if (anchorTime === null) {
+    view = WAITING;
+  } else {
+    if (target !== null) {
+      try {
+        target.client.ensure(target.sessionId, target.cwd, anchorTime);
+      } catch {}
+    }
+    const entry = session === null ? undefined : snapshot.entries.get(session);
+    if (entry === undefined) {
+      if (engineStatus === undefined)
+        view = unavailable2(anchorTime, "no-connection");
+      else if (session === null)
+        view = unavailable2(anchorTime, "session-unknown");
+      else if (cwd === null)
+        view = unavailable2(anchorTime, "session-cwd-unknown");
+      else
+        view = { state: "loading", anchorTime, payload: null, at: null, turn: null, reason: null };
+    } else if (entry.fetch.status === "unavailable") {
+      view = unavailable2(anchorTime, entry.fetch.reason);
+    } else {
+      view = { state: "ok", anchorTime, payload: entry.fetch.payload, at: entry.fetch.at, turn: entry.fetch.turn, binding: entry.fetch.binding, reason: null };
+    }
   }
-  if (entry.fetch.status === "unavailable")
-    return unavailable2(anchorTime, entry.fetch.reason);
-  return { state: "ok", anchorTime, payload: entry.fetch.payload, at: entry.fetch.at, turn: entry.fetch.turn, reason: null };
+  return {
+    view,
+    selection: view.state === "ok" ? view.binding ?? view.payload.state?.selection ?? null : null,
+    pick: session === null ? IDLE_PICK : snapshot.selections.get(session) ?? IDLE_PICK,
+    select: target === null ? null : (workflowId) => {
+      try {
+        target.client.selectWorkflow(target.sessionId, target.cwd, workflowId);
+      } catch {}
+    }
+  };
 }
 
 // src/client/panel/PanelView.tsx
-var jsx_runtime12 = require("react/jsx-runtime");
+var jsx_runtime14 = require("react/jsx-runtime");
 function formatSnapshotTime(at) {
   const ms = Date.parse(at);
   return Number.isNaN(ms) ? null : new Date(ms).toLocaleTimeString("en-GB");
 }
-function PanelContent({ tab, source, t }) {
-  if (tab === "agents") {
-    const view = projectGraph(source);
-    return /* @__PURE__ */ jsx_runtime12.jsx(AgentCanvasPage, {
+function PanelContent({ section, source, t }) {
+  const view = React2.useMemo(() => projectGraph(source), [source]);
+  if (section === "agents") {
+    return /* @__PURE__ */ jsx_runtime14.jsx(AgentListPage, {
       view: view.agents,
       iteration: view.iteration,
       t
     });
   }
-  if (tab === "events")
-    return /* @__PURE__ */ jsx_runtime12.jsx(EventLogPage, {
-      view: projectGraph(source),
+  if (section === "events")
+    return /* @__PURE__ */ jsx_runtime14.jsx(EventLogPage, {
+      view,
       t
     });
-  return /* @__PURE__ */ jsx_runtime12.jsx(IterationTaskPage, {
-    view: projectGraph(source),
+  return /* @__PURE__ */ jsx_runtime14.jsx(IterationTaskPage, {
+    view,
     t
   });
 }
-function PanelView({ t, useChat, useSessions, sessionId, engineStatus }) {
-  const view = useMstarEngineStatus({ useChat, useSessions, sessionId, engineStatus });
-  const [tab, setTab] = import_react4.useState("tasks");
+function PanelView({ t, useChat, useSessions, sessionId, engineStatus, useTabInfo, useStore, actions }) {
+  const { view, selection, pick, select } = useMstarEngineStatus({ useChat, useSessions, sessionId, engineStatus });
+  const tabInfo = useTabInfo();
+  const tabId = tabInfo.tab.id;
+  const section = useStore((s) => s.byTab[tabId]) ?? "tasks";
+  if (!tabInfo.tab.visible)
+    return null;
+  const selectSection = (next) => {
+    actions.select(tabId, next);
+  };
   if (view.state === "waiting") {
-    return /* @__PURE__ */ jsx_runtime12.jsx("div", {
+    return /* @__PURE__ */ jsx_runtime14.jsx("div", {
       className: panel_module_default.emptyRoot,
       "data-mstar-panel": "waiting",
-      "data-conversation-composer-overlay": "",
-      children: /* @__PURE__ */ jsx_runtime12.jsx("p", {
+      children: /* @__PURE__ */ jsx_runtime14.jsx("p", {
         className: panel_module_default.empty,
         "data-mstar-empty": "waiting",
         children: t("empty.waiting")
@@ -4994,11 +4782,10 @@ function PanelView({ t, useChat, useSessions, sessionId, engineStatus }) {
     });
   }
   if (view.state === "loading") {
-    return /* @__PURE__ */ jsx_runtime12.jsx("div", {
+    return /* @__PURE__ */ jsx_runtime14.jsx("div", {
       className: panel_module_default.emptyRoot,
       "data-mstar-panel": "loading",
-      "data-conversation-composer-overlay": "",
-      children: /* @__PURE__ */ jsx_runtime12.jsx("p", {
+      children: /* @__PURE__ */ jsx_runtime14.jsx("p", {
         className: panel_module_default.empty,
         "data-mstar-empty": "loading",
         children: t("empty.loading")
@@ -5006,11 +4793,10 @@ function PanelView({ t, useChat, useSessions, sessionId, engineStatus }) {
     });
   }
   if (view.state === "unavailable") {
-    return /* @__PURE__ */ jsx_runtime12.jsx("div", {
+    return /* @__PURE__ */ jsx_runtime14.jsx("div", {
       className: panel_module_default.emptyRoot,
       "data-mstar-panel": "unavailable",
-      "data-conversation-composer-overlay": "",
-      children: /* @__PURE__ */ jsx_runtime12.jsx("p", {
+      children: /* @__PURE__ */ jsx_runtime14.jsx("p", {
         className: panel_module_default.empty,
         "data-mstar-empty": "unavailable",
         "data-mstar-unavailable-reason": view.reason,
@@ -5021,34 +4807,34 @@ function PanelView({ t, useChat, useSessions, sessionId, engineStatus }) {
   const source = view.payload;
   const snapshotTime = formatSnapshotTime(view.at);
   const noHarness = source.harnessDir === null && source.state === null && source.iteration == null;
-  const freshness = /* @__PURE__ */ jsx_runtime12.jsxs("footer", {
+  const freshness = /* @__PURE__ */ jsx_runtime14.jsxs("footer", {
     className: panel_module_default.freshness,
     "data-mstar-freshness": true,
     children: [
-      snapshotTime === null ? null : /* @__PURE__ */ jsx_runtime12.jsx("span", {
+      snapshotTime === null ? null : /* @__PURE__ */ jsx_runtime14.jsx("span", {
         "data-mstar-freshness-at": view.at,
         "data-mstar-freshness-turn": String(view.turn),
         children: t("freshness.last-updated", { time: snapshotTime, turn: String(view.turn) })
       }),
-      /* @__PURE__ */ jsx_runtime12.jsx("span", {
+      /* @__PURE__ */ jsx_runtime14.jsx("span", {
         children: t("freshness.refresh-note")
       })
     ]
   });
   if (noHarness) {
-    return /* @__PURE__ */ jsx_runtime12.jsx("div", {
+    return /* @__PURE__ */ jsx_runtime14.jsx("div", {
       className: panel_module_default.root,
       "data-mstar-panel": "no-harness",
-      "data-conversation-composer-overlay": "",
-      children: /* @__PURE__ */ jsx_runtime12.jsxs("main", {
-        className: panel_module_default.main,
+      children: /* @__PURE__ */ jsx_runtime14.jsxs("div", {
+        className: panel_module_default.scroll,
+        "data-mstar-scroll": true,
         "data-mstar-graph": true,
         children: [
-          /* @__PURE__ */ jsx_runtime12.jsxs("div", {
+          /* @__PURE__ */ jsx_runtime14.jsxs("div", {
             className: panel_module_default.noHarnessCard,
             "data-mstar-empty-card": true,
             children: [
-              /* @__PURE__ */ jsx_runtime12.jsxs("svg", {
+              /* @__PURE__ */ jsx_runtime14.jsxs("svg", {
                 className: panel_module_default.noHarnessIcon,
                 "data-mstar-empty-icon": true,
                 width: "32",
@@ -5061,25 +4847,25 @@ function PanelView({ t, useChat, useSessions, sessionId, engineStatus }) {
                 strokeLinejoin: "round",
                 "aria-hidden": "true",
                 children: [
-                  /* @__PURE__ */ jsx_runtime12.jsx("path", {
+                  /* @__PURE__ */ jsx_runtime14.jsx("path", {
                     d: "M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
                   }),
-                  /* @__PURE__ */ jsx_runtime12.jsx("path", {
+                  /* @__PURE__ */ jsx_runtime14.jsx("path", {
                     d: "M9.7 9.4a2.4 2.4 0 1 1 3.4 2.2c-.7.3-1 .8-1 1.5"
                   }),
-                  /* @__PURE__ */ jsx_runtime12.jsx("circle", {
+                  /* @__PURE__ */ jsx_runtime14.jsx("circle", {
                     cx: "12",
                     cy: "16.4",
                     r: "0.6"
                   })
                 ]
               }),
-              /* @__PURE__ */ jsx_runtime12.jsx("p", {
+              /* @__PURE__ */ jsx_runtime14.jsx("p", {
                 className: panel_module_default.noHarnessTitle,
                 "data-mstar-empty": "no-harness",
                 children: t("empty.no-harness")
               }),
-              /* @__PURE__ */ jsx_runtime12.jsx("p", {
+              /* @__PURE__ */ jsx_runtime14.jsx("p", {
                 className: panel_module_default.noHarnessHint,
                 children: t("empty.no-harness-hint")
               })
@@ -5090,34 +4876,38 @@ function PanelView({ t, useChat, useSessions, sessionId, engineStatus }) {
       })
     });
   }
-  return /* @__PURE__ */ jsx_runtime12.jsxs("div", {
+  return /* @__PURE__ */ jsx_runtime14.jsxs("div", {
     className: panel_module_default.root,
     "data-mstar-panel": "panel",
-    "data-conversation-composer-overlay": "",
     children: [
-      /* @__PURE__ */ jsx_runtime12.jsxs("main", {
-        className: panel_module_default.main,
+      /* @__PURE__ */ jsx_runtime14.jsx(TabNav, {
+        active: section,
+        onChange: selectSection,
+        t
+      }),
+      /* @__PURE__ */ jsx_runtime14.jsxs("div", {
+        className: panel_module_default.scroll,
+        "data-mstar-scroll": true,
+        "data-mstar-graph": true,
         children: [
-          /* @__PURE__ */ jsx_runtime12.jsx(TabNav, {
-            active: tab,
-            onChange: setTab,
+          /* @__PURE__ */ jsx_runtime14.jsx(PanelContent, {
+            section,
+            source,
             t
           }),
-          /* @__PURE__ */ jsx_runtime12.jsx("div", {
-            className: panel_module_default.content,
-            "data-mstar-graph": true,
-            children: /* @__PURE__ */ jsx_runtime12.jsx(PanelContent, {
-              tab,
-              source,
-              t
-            })
+          /* @__PURE__ */ jsx_runtime14.jsx(Sidebar, {
+            t,
+            state: source.state,
+            source,
+            selection,
+            pick,
+            select
           }),
           freshness
         ]
       }),
-      /* @__PURE__ */ jsx_runtime12.jsx(Sidebar, {
+      /* @__PURE__ */ jsx_runtime14.jsx(PanelMeta, {
         t,
-        state: source.state,
         source
       })
     ]
@@ -5125,18 +4915,24 @@ function PanelView({ t, useChat, useSessions, sessionId, engineStatus }) {
 }
 
 // src/client/index.ts
-var inject = ["slots", "sessions", "locale", "connection"];
+var inject = ["slots", "sessions", "locale", "connection", "sidebarRightTabs"];
 function apply(ctx) {
   const engineStatus = new MstarEngineStatusClient(ctx.connection);
   ctx.effect(() => () => engineStatus.dispose(), "ui-mstar-panel: engine-status client");
+  const t = ctx.locale.bind(NS);
   ctx.effect(() => ctx.locale.register(NS, { zh, en }), "ui-mstar-panel: dictionaries");
-  ctx.slots.inject("conversation.view", () => ctx.slots.register({
-    name: "conversation.view",
-    id: "mstar-workflow",
-    order: 20,
-    label: () => ctx.locale.bind(NS)("view.mstar-workflow"),
-    locale: NS
-  }, (props) => PanelView({ ...props, engineStatus })));
+  ctx.effect(() => ctx.sidebarRightTabs.register(mstarPanelDefinition(t)), "ui-mstar-panel: tab type");
+  const panelStore = createPanelStore();
+  ctx.effect(() => ctx.slots.inject("sidebar.right.pane.tab", () => ctx.slots.register({
+    name: "sidebar.right.pane.tab",
+    key: MSTAR_PANEL_ID,
+    locale: NS,
+    store: panelStore
+  }, (props) => PanelView({ ...props, engineStatus }))), "ui-mstar-panel: panel body");
+  ctx.effect(() => ctx.slots.inject("sidebar.right.pane.tab.title", () => ctx.slots.register({
+    name: "sidebar.right.pane.tab.title",
+    key: MSTAR_PANEL_ID
+  }, MstarPanelTitle)), "ui-mstar-panel: panel chip title");
 }
 
 return module.exports; } });