diff --git a/web/hwlab-cloud-web/src/components/common/VirtualList.vue b/web/hwlab-cloud-web/src/components/common/VirtualList.vue
index 69e9c992..bc3aa955 100644
--- a/web/hwlab-cloud-web/src/components/common/VirtualList.vue
+++ b/web/hwlab-cloud-web/src/components/common/VirtualList.vue
@@ -17,6 +17,7 @@ const props = withDefaults(defineProps<{
   itemHeight: number;
   height?: number | string;
   overscan?: number;
+  windowLimit?: number;
   ariaLabel?: string;
 }>(), {
   height: 420,
@@ -29,7 +30,13 @@ const viewportHeight = ref(typeof props.height === "number" ? props.height : 0);
 const root = ref<HTMLElement | null>(null);
 let resizeObserver: ResizeObserver | null = null;
 const startIndex = computed(() => Math.max(0, Math.floor(scrollTop.value / props.itemHeight) - props.overscan));
-const endIndex = computed(() => Math.min(props.items.length, Math.ceil((scrollTop.value + viewportHeight.value) / props.itemHeight) + props.overscan));
+const endIndex = computed(() => {
+  const requestedEnd = Math.ceil((scrollTop.value + viewportHeight.value) / props.itemHeight) + props.overscan;
+  const limitedEnd = props.windowLimit && props.windowLimit > 0
+    ? Math.min(requestedEnd, startIndex.value + props.windowLimit)
+    : requestedEnd;
+  return Math.min(props.items.length, limitedEnd);
+});
 const visibleItems = computed(() => props.items.slice(startIndex.value, endIndex.value));
 const totalHeight = computed(() => props.items.length * props.itemHeight);
 const windowOffset = computed(() => startIndex.value * props.itemHeight);
diff --git a/web/hwlab-cloud-web/src/stores/agent-observer.ts b/web/hwlab-cloud-web/src/stores/agent-observer.ts
index 7a61428e..d329bf4f 100644
--- a/web/hwlab-cloud-web/src/stores/agent-observer.ts
+++ b/web/hwlab-cloud-web/src/stores/agent-observer.ts
@@ -51,6 +51,34 @@ export interface AgentObserverRun {
   changedAtMs: number;
 }
 
+export type AgentObserverRelationKind = "scope" | "session" | "task" | "run" | "attempt" | "command";
+
+export interface AgentObserverRelationRow {
+  id: string;
+  kind: AgentObserverRelationKind;
+  label: string;
+  detail: string | null;
+  parentId: string | null;
+  runId: string | null;
+  status: string | null;
+  depth: number;
+  childCount: number;
+  expanded: boolean;
+  position: number;
+  setSize: number;
+}
+
+interface AgentObserverRelationNode {
+  id: string;
+  kind: AgentObserverRelationKind;
+  label: string;
+  detail: string | null;
+  parentId: string | null;
+  runId: string | null;
+  status: string | null;
+  children: string[];
+}
+
 export const useAgentObserverStore = defineStore("agentObserver", () => {
   const entities = ref<Record<string, AgentObserverRun>>({});
   const orderedIds = ref<string[]>([]);
@@ -70,6 +98,8 @@ export const useAgentObserverStore = defineStore("agentObserver", () => {
   const error = ref<string | null>(null);
   const nowMs = ref(Date.now());
   const config = ref<AgentObserverRuntimeConfig | null>(null);
+  const expandedRelationIds = ref<string[]>([]);
+  const collapsedRelationIds = ref<string[]>([]);
   const seenEventIds = new Set<string>();
   const queue: unknown[] = [];
   let source: EventSource | null = null;
@@ -84,7 +114,7 @@ export const useAgentObserverStore = defineStore("agentObserver", () => {
     const needle = search.value.trim().toLowerCase();
     const result = runs.value.filter((run) => {
       if (statusFilter.value !== "all" && statusGroup(run.runStatus) !== statusFilter.value) return false;
-      if (projectFilter.value !== "all" && run.projectId !== projectFilter.value) return false;
+      if (projectFilter.value !== "all" && !matchesScopeFilter(run, projectFilter.value)) return false;
       if (agentFilter.value !== "all" && (run.backend ?? run.providerId) !== agentFilter.value) return false;
       if (!insideTimeWindow(run.updatedAt ?? run.startedAt, timeWindow.value)) return false;
       if (!needle) return true;
@@ -94,6 +124,10 @@ export const useAgentObserverStore = defineStore("agentObserver", () => {
     return result.sort((left, right) => compareRuns(left, right, sort.value));
   });
   const projects = computed(() => unique(runs.value.map((run) => run.projectId)));
+  const scopeOptions = computed(() => [
+    ...unique(runs.value.map((run) => run.projectId)).map((value) => ({ value: `project:${value}`, label: `项目 · ${value}` })),
+    ...unique(runs.value.map((run) => run.workspace)).map((value) => ({ value: `workspace:${value}`, label: `Workspace · ${value}` }))
+  ]);
   const agents = computed(() => unique(runs.value.map((run) => run.backend ?? run.providerId)));
   const selectedEvents = computed(() => {
     const run = selectedRun.value;
@@ -113,6 +147,12 @@ export const useAgentObserverStore = defineStore("agentObserver", () => {
     };
   });
   const dataAgeMs = computed(() => lastEventAt.value ? Math.max(0, nowMs.value - Date.parse(lastEventAt.value)) : null);
+  const relationRows = computed(() => buildRelationRows(
+    visibleRuns.value,
+    selectedRunId.value,
+    new Set(expandedRelationIds.value),
+    new Set(collapsedRelationIds.value)
+  ));
 
   function connect(): void {
     disconnect(false);
@@ -230,16 +270,16 @@ export const useAgentObserverStore = defineStore("agentObserver", () => {
     };
     events.value.push(event);
     while (events.value.length > config.value.reducerEventLimit) {
-      const removed = events.value.shift();
-      if (removed) seenEventIds.delete(removed.id);
+      events.value.shift();
     }
 
     const previous = entities.value[runId];
-    const sequenceIsCurrent = !previous || sourceSeq === null || previous.lastSourceSeq === null || sourceSeq >= previous.lastSourceSeq;
+    const sequenceIsCurrent = !previous || previous.lastSourceSeq === null || (sourceSeq !== null && sourceSeq >= previous.lastSourceSeq);
+    lastEventAt.value = latestTimestamp(lastEventAt.value, createdAt) ?? new Date().toISOString();
+    nowMs.value = Date.now();
+    if (previous && !sequenceIsCurrent) return;
     const terminalStatus = nonEmptyString(body?.terminalStatus);
-    const runStatus = sequenceIsCurrent
-      ? normalizeRunStatus(nonEmptyString(body?.runStatus), terminalStatus, event.status, event.terminal, previous?.runStatus)
-      : previous.runStatus;
+    const runStatus = normalizeRunStatus(nonEmptyString(body?.runStatus), terminalStatus, event.status, event.terminal, previous?.runStatus);
     const next: AgentObserverRun = {
       id: runId,
       taskId: nonEmptyString(body?.taskId) ?? previous?.taskId ?? null,
@@ -261,15 +301,13 @@ export const useAgentObserverStore = defineStore("agentObserver", () => {
       lastMessage: event.message || (previous?.lastMessage ?? null),
       startedAt: previous?.startedAt ?? createdAt,
       updatedAt: createdAt ?? previous?.updatedAt ?? null,
-      lastSourceSeq: sequenceIsCurrent ? sourceSeq ?? previous?.lastSourceSeq ?? null : previous.lastSourceSeq,
+      lastSourceSeq: sourceSeq ?? previous?.lastSourceSeq ?? null,
       eventIds: [...(previous?.eventIds ?? []), eventId].slice(-config.value.inspectorEventTailLimit),
       changedAtMs: Date.now()
     };
     entities.value = { ...entities.value, [runId]: next };
     orderedIds.value = [runId, ...orderedIds.value.filter((id) => id !== runId)];
     trimEntities();
-    lastEventAt.value = createdAt ?? new Date().toISOString();
-    nowMs.value = Date.now();
   }
 
   function trimEntities(): void {
@@ -286,14 +324,177 @@ export const useAgentObserverStore = defineStore("agentObserver", () => {
     selectedRunId.value = runId;
   }
 
+  function toggleRelation(relationId: string, expanded: boolean): void {
+    if (expanded) {
+      collapsedRelationIds.value = collapsedRelationIds.value.filter((id) => id !== relationId);
+      if (!expandedRelationIds.value.includes(relationId)) expandedRelationIds.value = [...expandedRelationIds.value, relationId];
+      return;
+    }
+    expandedRelationIds.value = expandedRelationIds.value.filter((id) => id !== relationId);
+    if (!collapsedRelationIds.value.includes(relationId)) collapsedRelationIds.value = [...collapsedRelationIds.value, relationId];
+  }
+
   return {
     entities, orderedIds, events, runs, visibleRuns, selectedRun, selectedEvents, selectedRunId,
     view, density, search, statusFilter, projectFilter, agentFilter, timeWindow, sort, phase, lastEventAt,
-    connectedAt, error, config, projects, agents, stats, dataAgeMs,
-    connect, disconnect, reconnect, selectRun
+    connectedAt, error, config, projects, scopeOptions, agents, stats, dataAgeMs, relationRows,
+    connect, disconnect, reconnect, selectRun, toggleRelation
   };
 });
 
+function buildRelationRows(
+  runs: AgentObserverRun[],
+  selectedRunId: string | null,
+  expandedIds: Set<string>,
+  collapsedIds: Set<string>
+): AgentObserverRelationRow[] {
+  const nodes = new Map<string, AgentObserverRelationNode>();
+  const rootIds: string[] = [];
+  const selectedPath = new Set<string>();
+  const activePath = new Set<string>();
+  const unassociatedId = "scope:unassociated";
+
+  const ensureNode = (node: Omit<AgentObserverRelationNode, "children">): AgentObserverRelationNode => {
+    const existing = nodes.get(node.id);
+    if (existing) return existing;
+    const created = { ...node, children: [] };
+    nodes.set(node.id, created);
+    if (node.parentId) {
+      const parent = nodes.get(node.parentId);
+      if (parent && !parent.children.includes(node.id)) parent.children.push(node.id);
+    } else if (!rootIds.includes(node.id)) rootIds.push(node.id);
+    return created;
+  };
+
+  const ensureUnassociated = (): AgentObserverRelationNode => ensureNode({
+    id: unassociatedId,
+    kind: "scope",
+    label: "未关联",
+    detail: "Kafka 事件未提供完整 Project / Workspace → Session → Task lineage",
+    parentId: null,
+    runId: null,
+    status: null
+  });
+
+  for (const run of runs) {
+    const hasCompleteContainment = Boolean((run.projectId || run.workspace) && run.sessionId && run.taskId);
+    let parent = hasCompleteContainment
+      ? ensureNode({
+        id: relationId("scope", `${run.projectId ?? ""}\u0000${run.workspace ?? ""}`),
+        kind: "scope",
+        label: `${run.projectId ?? "项目未提供"} / ${run.workspace ?? "Workspace 未提供"}`,
+        detail: null,
+        parentId: null,
+        runId: null,
+        status: null
+      })
+      : ensureUnassociated();
+    const path = [parent.id];
+
+    if (hasCompleteContainment && run.sessionId && run.taskId) {
+      parent = ensureNode({
+        id: relationId("session", `${parent.id}\u0000${run.sessionId}`),
+        kind: "session",
+        label: `Session ${run.sessionId}`,
+        detail: run.traceId ? `Trace ${run.traceId}` : null,
+        parentId: parent.id,
+        runId: null,
+        status: null
+      });
+      path.push(parent.id);
+      parent = ensureNode({
+        id: relationId("task", `${parent.id}\u0000${run.taskId}`),
+        kind: "task",
+        label: `Task ${run.taskId}`,
+        detail: null,
+        parentId: parent.id,
+        runId: null,
+        status: null
+      });
+      path.push(parent.id);
+    }
+
+    parent = ensureNode({
+      id: relationId("run", `${parent.id}\u0000${run.id}`),
+      kind: "run",
+      label: `Run ${run.id}`,
+      detail: run.phase,
+      parentId: parent.id,
+      runId: run.id,
+      status: run.runStatus
+    });
+    path.push(parent.id);
+
+    if (run.attemptId) {
+      parent = ensureNode({
+        id: relationId("attempt", `${parent.id}\u0000${run.attemptId}`),
+        kind: "attempt",
+        label: `Attempt ${run.attemptId}`,
+        detail: null,
+        parentId: parent.id,
+        runId: run.id,
+        status: run.runStatus
+      });
+      path.push(parent.id);
+    }
+
+    if (run.commandId) {
+      parent = ensureNode({
+        id: relationId("command", `${parent.id}\u0000${run.commandId}`),
+        kind: "command",
+        label: `Command ${run.commandId}`,
+        detail: [run.commandType, run.commandState].filter(Boolean).join(" · ") || null,
+        parentId: parent.id,
+        runId: run.id,
+        status: run.commandState ?? run.runStatus
+      });
+      path.push(parent.id);
+    }
+
+    if (run.id === selectedRunId) for (const id of path) selectedPath.add(id);
+    if (["running", "waiting"].includes(statusGroup(run.runStatus))) for (const id of path) activePath.add(id);
+  }
+
+  const rows: AgentObserverRelationRow[] = [];
+  const append = (id: string, depth: number, position: number, setSize: number): void => {
+    const node = nodes.get(id);
+    if (!node) return;
+    const defaultExpanded = depth === 0 || selectedPath.has(id) || activePath.has(id);
+    const expanded = node.children.length > 0 && !collapsedIds.has(id) && (expandedIds.has(id) || defaultExpanded);
+    rows.push({
+      id: node.id,
+      kind: node.kind,
+      label: node.label,
+      detail: node.detail,
+      parentId: node.parentId,
+      runId: node.runId,
+      status: node.status,
+      depth,
+      childCount: node.children.length,
+      expanded,
+      position,
+      setSize
+    });
+    if (expanded) node.children.forEach((childId, index) => append(childId, depth + 1, index + 1, node.children.length));
+  };
+  rootIds.forEach((id, index) => append(id, 0, index + 1, rootIds.length));
+  return rows;
+}
+
+function relationId(kind: AgentObserverRelationKind, value: string): string {
+  return `${kind}:${encodeURIComponent(value)}`;
+}
+
+function latestTimestamp(previous: string | null, next: string | null): string | null {
+  if (!previous) return next;
+  if (!next) return previous;
+  const previousMs = Date.parse(previous);
+  const nextMs = Date.parse(next);
+  if (!Number.isFinite(previousMs)) return next;
+  if (!Number.isFinite(nextMs)) return previous;
+  return nextMs >= previousMs ? next : previous;
+}
+
 function normalizeRunStatus(runStatus: string | null, terminalStatus: string | null, eventStatus: string, terminal: boolean, previous = "unknown"): string {
   if (terminalStatus) return terminalStatus === "cancelled" ? "canceled" : terminalStatus;
   if (terminal) return eventStatus;
@@ -321,6 +522,12 @@ function unique(values: Array<string | null>): string[] {
   return [...new Set(values.filter((value): value is string => Boolean(value)))].sort();
 }
 
+function matchesScopeFilter(run: AgentObserverRun, filter: string): boolean {
+  if (filter.startsWith("project:")) return run.projectId === filter.slice("project:".length);
+  if (filter.startsWith("workspace:")) return run.workspace === filter.slice("workspace:".length);
+  return run.projectId === filter;
+}
+
 function insideTimeWindow(value: string | null, window: string): boolean {
   if (window === "all") return true;
   const duration = window === "15m" ? 15 * 60_000 : window === "1h" ? 60 * 60_000 : window === "6h" ? 6 * 60 * 60_000 : 0;
diff --git a/web/hwlab-cloud-web/src/styles/agent-observer.css b/web/hwlab-cloud-web/src/styles/agent-observer.css
index 45a27ca2..5260f955 100644
--- a/web/hwlab-cloud-web/src/styles/agent-observer.css
+++ b/web/hwlab-cloud-web/src/styles/agent-observer.css
@@ -16,6 +16,14 @@
 .agent-observer-segment button:last-child { border-right: 0; }
 .agent-observer-segment button[aria-pressed="true"] { background: var(--console-accent-soft); color: var(--console-accent); }
 .agent-observer-density { border: 1px solid var(--console-border); border-radius: 6px; }
+.agent-observer-secondary-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.agent-observer-filter-trigger { display: none; min-height: 34px; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid var(--console-border); border-radius: 6px; background: var(--console-surface); color: var(--console-text); }
+.agent-observer-filter-backdrop { position: fixed; z-index: 70; inset: 0; display: flex; justify-content: flex-end; background: rgb(0 0 0 / .38); }
+.agent-observer-filter-drawer { width: min(360px, 92vw); height: 100%; padding: 16px; display: grid; align-content: start; gap: 14px; background: var(--console-surface); box-shadow: -16px 0 42px rgb(0 0 0 / .22); }
+.agent-observer-filter-drawer header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+.agent-observer-filter-drawer header button { display: inline-flex; border: 0; background: transparent; color: var(--console-muted); }
+.agent-observer-filter-drawer label { display: grid; gap: 6px; color: var(--console-muted); font-size: 12px; }
+.agent-observer-filter-drawer select, .agent-observer-filter-drawer .agent-observer-density { width: 100%; min-height: 40px; }
 .agent-observer-status-strip { min-height: 38px; display: flex; align-items: center; gap: 0; overflow-x: auto; border-block: 1px solid var(--console-border); background: var(--console-surface-muted); }
 .agent-observer-status-strip > span { flex: 0 0 auto; display: inline-flex; align-items: baseline; gap: 5px; padding: 0 13px; border-right: 1px solid var(--console-border); font-size: 12px; color: var(--console-muted); }
 .agent-observer-status-strip strong { color: var(--console-text); font-size: 14px; }
@@ -56,10 +64,14 @@
 .agent-observer-card footer { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-top: 1px solid var(--console-border); padding-top: 6px; }
 .agent-observer-tree { height: 100%; min-height: 0; padding: 8px 0; }
 .agent-observer-tree .console-virtual-list { overflow: auto; }
-.agent-observer-tree-row { position: relative; height: calc(100% - 2px); margin: 0 10px; padding: 0 10px 0 22px; display: grid; grid-template-columns: 100px minmax(150px, 1.2fr) repeat(4, minmax(110px, .8fr)) minmax(120px, 1fr); align-items: center; gap: 9px; border-bottom: 1px solid var(--console-border); font-size: 12px; min-width: 1000px; }
+.agent-observer-tree-row { position: relative; height: calc(100% - 2px); margin: 0 10px; padding-inline-end: 10px; display: grid; grid-template-columns: 18px 100px minmax(220px, 1fr) minmax(180px, .8fr); align-items: center; gap: 9px; border-bottom: 1px solid var(--console-border); font-size: 12px; min-width: 620px; outline: 0; }
 .agent-observer-tree-row:hover, .agent-observer-tree-row[aria-selected="true"] { background: var(--console-accent-soft); }
-.agent-observer-tree-row .tree-line { position: absolute; left: 8px; top: 0; bottom: 0; width: 10px; border-left: 1px solid var(--console-border-strong); border-bottom: 1px solid var(--console-border-strong); }
-.agent-observer-tree-row > span:not(.tree-line), .agent-observer-tree-row strong, .agent-observer-tree-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.agent-observer-tree-row:focus-visible { box-shadow: inset 0 0 0 2px var(--console-accent); }
+.agent-observer-tree-row::before { content: ""; position: absolute; left: max(8px, calc(8px + (var(--tree-depth, 0) * 22px))); top: 0; bottom: 0; border-left: 1px solid var(--console-border-subtle, var(--console-border)); }
+.agent-observer-tree-toggle { width: 18px; height: 18px; padding: 0; display: inline-grid; place-items: center; border: 0; background: transparent; color: var(--console-muted); }
+.agent-observer-tree-toggle svg { transition: transform .14s ease; }.agent-observer-tree-toggle svg[data-expanded="true"] { transform: rotate(90deg); }
+.agent-observer-tree-spacer { width: 18px; }.agent-observer-relation-kind { color: var(--console-muted); font-size: 10px; font-weight: 700; text-transform: uppercase; }
+.agent-observer-tree-row > span, .agent-observer-tree-row strong, .agent-observer-tree-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .agent-observer-inspector { min-height: 0; border-left: 1px solid var(--console-border); }
 .agent-observer-inspector-grid { margin: 0; display: grid; gap: 0; }
 .agent-observer-inspector-grid div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--console-border); }
@@ -68,6 +80,6 @@
 .agent-observer-event-tail li { display: grid; grid-template-columns: 70px 1fr; gap: 4px 8px; padding: 9px 0; border-bottom: 1px solid var(--console-border); }
 .agent-observer-event-tail span { color: var(--console-muted); font-size: 10px; }.agent-observer-event-tail strong { font-size: 11px; }.agent-observer-event-tail small { grid-column: 2; color: var(--console-muted); overflow-wrap: anywhere; }
 @media (max-width: 1200px) { .agent-observer-card-list { grid-template-columns: repeat(2, minmax(240px, 1fr)); } }
-@media (max-width: 960px) { .agent-observer-workspace.has-inspector { grid-template-columns: minmax(0, 1fr); }.agent-observer-inspector { position: fixed; z-index: 40; inset: 64px 0 0 auto; width: min(420px, 92vw); background: var(--console-surface); box-shadow: -12px 0 36px rgb(0 0 0 / .16); }.agent-observer-page .page-command-filters { display: grid; grid-template-columns: minmax(210px, 1fr) repeat(3, minmax(130px, auto)); }.agent-observer-search { min-width: 0; } }
-@media (max-width: 560px) { .agent-observer-page { height: calc(100dvh - 52px); }.agent-observer-page .page-command-description, .agent-observer-target { display: none; }.agent-observer-page .page-command-filters { grid-template-columns: minmax(0, 1fr) auto; }.agent-observer-page select:nth-of-type(n+2), .agent-observer-density, .agent-observer-segment span { display: none; }.agent-observer-status-strip > span:nth-child(n+5) { display: none; }.agent-observer-workspace.has-inspector { display: block; }.agent-observer-inspector { inset: auto 0 0; width: 100%; height: min(68dvh, 620px); border-left: 0; border-top: 1px solid var(--console-border); box-shadow: 0 -14px 36px rgb(0 0 0 / .18); }.agent-observer-card-list { grid-template-columns: minmax(0, 1fr); }.agent-observer-card dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }.agent-observer-tree-row { grid-template-columns: 90px minmax(150px, 1fr) minmax(120px, .8fr); min-width: 520px; }.agent-observer-tree-row span:nth-of-type(n+3) { display: none; } }
+@media (max-width: 960px) { .agent-observer-workspace.has-inspector { grid-template-columns: minmax(0, 1fr); }.agent-observer-inspector { position: fixed; z-index: 40; inset: 64px 0 0 auto; width: min(420px, 92vw); background: var(--console-surface); box-shadow: -12px 0 36px rgb(0 0 0 / .16); }.agent-observer-page .page-command-filters { display: grid; grid-template-columns: minmax(210px, 1fr) auto auto; }.agent-observer-secondary-filters { grid-column: 1 / -1; }.agent-observer-search { min-width: 0; } }
+@media (max-width: 560px) { .agent-observer-page { height: calc(100dvh - 52px); }.agent-observer-page .page-command-description, .agent-observer-target { display: none; }.agent-observer-page .page-command-filters { grid-template-columns: repeat(3, auto); }.agent-observer-search { grid-column: 1 / -1; }.agent-observer-secondary-filters { display: none; }.agent-observer-filter-trigger { display: inline-flex; }.agent-observer-segment span { display: none; }.agent-observer-status-strip > span:nth-child(n+5) { display: none; }.agent-observer-workspace.has-inspector { display: block; }.agent-observer-inspector { inset: auto 0 0; width: 100%; height: min(68dvh, 620px); border-left: 0; border-top: 1px solid var(--console-border); box-shadow: 0 -14px 36px rgb(0 0 0 / .18); }.agent-observer-card-list { grid-template-columns: minmax(0, 1fr); }.agent-observer-card dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }.agent-observer-tree-row { grid-template-columns: 18px 84px minmax(190px, 1fr); min-width: 430px; }.agent-observer-tree-row small { display: none; } }
 @media (prefers-reduced-motion: reduce) { .agent-observer-skeleton span { animation: none; }.agent-observer-table-row[data-recent="true"] { box-shadow: inset 2px 0 var(--console-accent); } }
diff --git a/web/hwlab-cloud-web/src/views/agents/AgentRunsView.vue b/web/hwlab-cloud-web/src/views/agents/AgentRunsView.vue
index 56efc9b0..f993aa97 100644
--- a/web/hwlab-cloud-web/src/views/agents/AgentRunsView.vue
+++ b/web/hwlab-cloud-web/src/views/agents/AgentRunsView.vue
@@ -1,20 +1,22 @@
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
-import { Activity, Columns3, LayoutGrid, List, Network, RefreshCw, Search, X } from "lucide-vue-next";
+import { Activity, ChevronRight, Columns3, LayoutGrid, List, Network, RefreshCw, Search, SlidersHorizontal, X } from "lucide-vue-next";
 import PageCommandBar from "@/components/layout/PageCommandBar.vue";
 import InspectorPanel from "@/components/console/InspectorPanel.vue";
 import StatusBadge from "@/components/common/StatusBadge.vue";
 import VirtualList from "@/components/common/VirtualList.vue";
-import { useAgentObserverStore, type AgentObserverRun, type AgentObserverView } from "@/stores/agent-observer";
+import { useAgentObserverStore, type AgentObserverRelationRow, type AgentObserverRun, type AgentObserverView } from "@/stores/agent-observer";
 
 const route = useRoute();
 const router = useRouter();
 const observer = useAgentObserverStore();
 const inspectorTab = ref<"summary" | "events" | "lineage">("summary");
 const urlApplying = ref(false);
-const windowedRuns = computed(() => observer.visibleRuns.slice(0, observer.config?.virtualListWindowLimit ?? 0));
-const treeRuns = computed(() => windowedRuns.value.slice(0, observer.config?.treeNodeLimit ?? 0));
+const filtersOpen = ref(false);
+const filterTrigger = ref<HTMLButtonElement | null>(null);
+const filterDrawer = ref<HTMLElement | null>(null);
+const treeRows = computed(() => observer.relationRows.slice(0, observer.config?.treeNodeLimit ?? observer.relationRows.length));
 const ageLabel = computed(() => formatAge(observer.dataAgeMs));
 const streamLabel = computed(() => ({ idle: "未连接", replay: "回放", live: "Live", reconnecting: "重连中", stale: "陈旧", error: "传输错误" }[observer.phase]));
 
@@ -79,10 +81,62 @@ function setView(value: AgentObserverView): void {
   observer.view = value;
 }
 
+async function openFilters(): Promise<void> {
+  filtersOpen.value = true;
+  await nextTick();
+  filterDrawer.value?.focus();
+}
+
+function closeFilters(): void {
+  filtersOpen.value = false;
+  queueMicrotask(() => filterTrigger.value?.focus());
+}
+
 function rowKey(run: AgentObserverRun): string {
   return run.id;
 }
 
+function relationKey(row: AgentObserverRelationRow): string {
+  return row.id;
+}
+
+function activateRelation(row: AgentObserverRelationRow): void {
+  if (row.childCount > 0 && !row.runId) observer.toggleRelation(row.id, !row.expanded);
+  if (row.runId) observer.selectRun(row.runId);
+}
+
+function onRelationKeydown(event: KeyboardEvent, row: AgentObserverRelationRow): void {
+  const current = event.currentTarget;
+  if (!(current instanceof HTMLElement)) return;
+  const tree = current.closest('[role="tree"]');
+  const items = tree ? [...tree.querySelectorAll<HTMLElement>('[role="treeitem"]')] : [];
+  const index = items.indexOf(current);
+  if (event.key === "ArrowRight" && row.childCount > 0) {
+    event.preventDefault();
+    if (!row.expanded) observer.toggleRelation(row.id, true);
+    else items[index + 1]?.focus();
+    return;
+  }
+  if (event.key === "ArrowLeft") {
+    event.preventDefault();
+    if (row.childCount > 0 && row.expanded) observer.toggleRelation(row.id, false);
+    else if (row.parentId) items.find((item) => item.dataset.relationId === row.parentId)?.focus();
+    return;
+  }
+  if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Home" || event.key === "End") {
+    event.preventDefault();
+    const target = event.key === "Home" ? items[0]
+      : event.key === "End" ? items.at(-1)
+        : items[index + (event.key === "ArrowDown" ? 1 : -1)];
+    target?.focus();
+    return;
+  }
+  if (event.key === "Enter" || event.key === " ") {
+    event.preventDefault();
+    activateRelation(row);
+  }
+}
+
 function statusTone(status: string): string {
   if (["failed", "error", "rejected"].includes(status)) return "failed";
   if (["completed", "succeeded"].includes(status)) return "completed";
@@ -152,25 +206,40 @@ function compactQuery(value: Record<string, string>): Record<string, string> {
         <select v-model="observer.statusFilter" aria-label="运行状态">
           <option value="all">全部状态</option><option value="running">运行中</option><option value="waiting">等待</option><option value="failed">失败</option><option value="terminal">终态</option>
         </select>
-        <select v-model="observer.projectFilter" aria-label="项目">
-          <option value="all">全部项目</option><option v-for="project in observer.projects" :key="project" :value="project">{{ project }}</option>
-        </select>
-        <select v-model="observer.agentFilter" aria-label="Agent 或 Profile">
-          <option value="all">全部 Agent</option><option v-for="agent in observer.agents" :key="agent" :value="agent">{{ agent }}</option>
-        </select>
-        <select v-model="observer.timeWindow" aria-label="时间窗口"><option value="all">全部窗口</option><option value="15m">最近 15 分钟</option><option value="1h">最近 1 小时</option><option value="6h">最近 6 小时</option></select>
-        <select v-model="observer.sort" aria-label="排序">
-          <option value="updated-desc">最近活动</option><option value="updated-asc">最早活动</option><option value="status-asc">状态</option><option value="id-asc">Run ID</option>
-        </select>
         <div class="agent-observer-segment" role="group" aria-label="视图">
           <button type="button" :aria-pressed="observer.view === 'table'" title="表格" @click="setView('table')"><List :size="16" /><span>表格</span></button>
           <button type="button" :aria-pressed="observer.view === 'cards'" title="卡片" @click="setView('cards')"><LayoutGrid :size="16" /><span>卡片</span></button>
           <button type="button" :aria-pressed="observer.view === 'tree'" title="关系树" @click="setView('tree')"><Network :size="16" /><span>树</span></button>
         </div>
-        <button class="agent-observer-density" type="button" @click="observer.density = observer.density === 'compact' ? 'standard' : 'compact'"><Columns3 :size="15" />{{ observer.density === "compact" ? "紧凑" : "标准" }}</button>
+        <button ref="filterTrigger" class="agent-observer-filter-trigger" type="button" aria-haspopup="dialog" :aria-expanded="filtersOpen" @click="openFilters"><SlidersHorizontal :size="16" />筛选</button>
+        <div class="agent-observer-secondary-filters">
+          <select v-model="observer.projectFilter" aria-label="项目或 Workspace">
+            <option value="all">全部项目 / Workspace</option><option v-for="scope in observer.scopeOptions" :key="scope.value" :value="scope.value">{{ scope.label }}</option>
+          </select>
+          <select v-model="observer.agentFilter" aria-label="Agent 或 Profile">
+            <option value="all">全部 Agent</option><option v-for="agent in observer.agents" :key="agent" :value="agent">{{ agent }}</option>
+          </select>
+          <select v-model="observer.timeWindow" aria-label="时间窗口"><option value="all">全部窗口</option><option value="15m">最近 15 分钟</option><option value="1h">最近 1 小时</option><option value="6h">最近 6 小时</option></select>
+          <select v-model="observer.sort" aria-label="排序">
+            <option value="updated-desc">最近活动</option><option value="updated-asc">最早活动</option><option value="status-asc">状态</option><option value="id-asc">Run ID</option>
+          </select>
+          <button class="agent-observer-density" type="button" @click="observer.density = observer.density === 'compact' ? 'standard' : 'compact'"><Columns3 :size="15" />{{ observer.density === "compact" ? "紧凑" : "标准" }}</button>
+        </div>
       </template>
     </PageCommandBar>
 
+    <div v-if="filtersOpen" class="agent-observer-filter-backdrop" @click.self="closeFilters">
+      <aside ref="filterDrawer" class="agent-observer-filter-drawer" role="dialog" aria-modal="true" aria-labelledby="agent-observer-filter-title" tabindex="-1" @keydown.esc="closeFilters">
+        <header><strong id="agent-observer-filter-title">更多筛选</strong><button type="button" aria-label="关闭筛选" @click="closeFilters"><X :size="18" /></button></header>
+        <label>项目 / Workspace<select v-model="observer.projectFilter"><option value="all">全部项目 / Workspace</option><option v-for="scope in observer.scopeOptions" :key="scope.value" :value="scope.value">{{ scope.label }}</option></select></label>
+        <label>Agent / Profile<select v-model="observer.agentFilter"><option value="all">全部 Agent</option><option v-for="agent in observer.agents" :key="agent" :value="agent">{{ agent }}</option></select></label>
+        <label>时间窗口<select v-model="observer.timeWindow"><option value="all">全部窗口</option><option value="15m">最近 15 分钟</option><option value="1h">最近 1 小时</option><option value="6h">最近 6 小时</option></select></label>
+        <label>排序<select v-model="observer.sort"><option value="updated-desc">最近活动</option><option value="updated-asc">最早活动</option><option value="status-asc">状态</option><option value="id-asc">Run ID</option></select></label>
+        <button class="agent-observer-density" type="button" @click="observer.density = observer.density === 'compact' ? 'standard' : 'compact'"><Columns3 :size="15" />密度：{{ observer.density === "compact" ? "紧凑" : "标准" }}</button>
+        <button class="btn btn-primary" type="button" @click="closeFilters">完成</button>
+      </aside>
+    </div>
+
     <div class="agent-observer-status-strip" aria-label="运行摘要">
       <span><strong>{{ observer.stats.running }}</strong>运行中</span>
       <span><strong>{{ observer.stats.waiting }}</strong>等待</span>
@@ -178,7 +247,7 @@ function compactQuery(value: Record<string, string>): Record<string, string> {
       <span><strong>{{ observer.stats.terminal }}</strong>终态</span>
       <span><strong>{{ observer.stats.runners }}</strong>Runner</span>
       <span><strong>{{ observer.stats.total }}</strong>筛选结果</span>
-      <span v-if="windowedRuns.length < observer.visibleRuns.length" class="agent-observer-window-note">DOM 窗口 {{ windowedRuns.length }}/{{ observer.visibleRuns.length }}</span>
+      <span v-if="observer.view === 'tree' && treeRows.length < observer.relationRows.length" class="agent-observer-window-note">关系树当前事件窗口 {{ treeRows.length }}/{{ observer.relationRows.length }} 节点</span>
     </div>
 
     <div v-if="observer.error" class="agent-observer-inline-error" role="status">{{ observer.error }}</div>
@@ -188,7 +257,7 @@ function compactQuery(value: Record<string, string>): Record<string, string> {
         <div v-if="observer.phase === 'replay' && observer.runs.length === 0" class="agent-observer-skeleton" aria-label="正在回放 Kafka retention">
           <span v-for="index in 8" :key="index" />
         </div>
-        <div v-else-if="windowedRuns.length === 0" class="agent-observer-empty">
+        <div v-else-if="observer.visibleRuns.length === 0" class="agent-observer-empty">
           <Activity :size="28" aria-hidden="true" />
           <strong>当前事件窗口没有匹配运行</strong>
           <span>保留最后确认投影；可清除筛选或等待 Kafka live 事件。</span>
@@ -199,7 +268,7 @@ function compactQuery(value: Record<string, string>): Record<string, string> {
           <div class="agent-observer-table-head" role="row">
             <span role="columnheader">状态</span><span role="columnheader">运行</span><span role="columnheader">Agent</span><span role="columnheader">上下文</span><span role="columnheader">当前阶段</span><span role="columnheader">活动</span><span role="columnheader">Runner</span><span role="columnheader">结果</span>
           </div>
-          <VirtualList :items="windowedRuns" :item-key="rowKey" :item-height="observer.density === 'compact' ? 54 : 68" height="100%" :overscan="8" aria-label="AgentRun 虚拟表格行">
+          <VirtualList :items="observer.visibleRuns" :item-key="rowKey" :item-height="observer.density === 'compact' ? 54 : 68" height="100%" :overscan="8" :window-limit="observer.config?.virtualListWindowLimit" aria-label="AgentRun 虚拟表格行">
             <template #default="{ item: run }">
               <div class="agent-observer-table-row" role="row" tabindex="0" :aria-selected="observer.selectedRunId === run.id" :data-selected="observer.selectedRunId === run.id" :data-recent="Date.now() - run.changedAtMs < (observer.config?.changeHighlightMs ?? 0)" @click="selectRun(run)" @dblclick="openRun(run)" @keydown.enter="openRun(run)">
                 <span role="gridcell"><StatusBadge :status="statusTone(run.runStatus)" :label="run.runStatus" /></span>
@@ -216,7 +285,7 @@ function compactQuery(value: Record<string, string>): Record<string, string> {
         </section>
 
         <section v-else-if="observer.view === 'cards'" class="agent-observer-card-list" aria-label="AgentRun 卡片">
-          <article v-for="run in windowedRuns" :key="run.id" class="agent-observer-card" tabindex="0" :data-status="statusTone(run.runStatus)" :data-selected="observer.selectedRunId === run.id" @click="selectRun(run)" @keydown.enter="openRun(run)">
+          <article v-for="run in observer.visibleRuns" :key="run.id" class="agent-observer-card" tabindex="0" :data-status="statusTone(run.runStatus)" :data-selected="observer.selectedRunId === run.id" @click="selectRun(run)" @keydown.enter="openRun(run)">
               <header><StatusBadge :status="statusTone(run.runStatus)" :label="run.runStatus" /><span>{{ duration(run) }}</span></header>
               <h2 class="mono">{{ shortId(run.id) }}</h2>
               <p>{{ shortId(run.taskId, "task 未提供") }} · {{ shortId(run.sessionId) }} · {{ run.projectId || "—" }}</p>
@@ -226,13 +295,15 @@ function compactQuery(value: Record<string, string>): Record<string, string> {
         </section>
 
         <section v-else class="agent-observer-tree" role="tree" aria-label="AgentRun 关系树">
-          <VirtualList :items="treeRuns" :item-key="rowKey" :item-height="observer.density === 'compact' ? 44 : 54" height="100%" :overscan="8" aria-label="AgentRun 关系树节点">
-            <template #default="{ item: run }">
-              <div class="agent-observer-tree-row" role="treeitem" :aria-selected="observer.selectedRunId === run.id" tabindex="0" @click="selectRun(run)" @keydown.enter="openRun(run)">
-                <span class="tree-line" aria-hidden="true" />
-                <StatusBadge :status="statusTone(run.runStatus)" :label="run.runStatus" />
-                <strong class="mono">{{ shortId(run.id) }}</strong>
-                <span>task {{ shortId(run.taskId) }}</span><span>command {{ shortId(run.commandId) }}</span><span>attempt {{ shortId(run.attemptId) }}</span><span>runner {{ shortId(run.runnerId) }}</span><small>{{ run.phase }}</small>
+          <VirtualList :items="treeRows" :item-key="relationKey" :item-height="observer.density === 'compact' ? 44 : 54" height="100%" :overscan="8" :window-limit="observer.config?.virtualListWindowLimit" aria-label="AgentRun 关系树节点">
+            <template #default="{ item: node }">
+              <div class="agent-observer-tree-row" role="treeitem" :data-relation-id="node.id" :aria-level="node.depth + 1" :aria-posinset="node.position" :aria-setsize="node.setSize" :aria-expanded="node.childCount > 0 ? node.expanded : undefined" :aria-selected="Boolean(node.runId && observer.selectedRunId === node.runId)" tabindex="0" :style="{ paddingInlineStart: `${14 + node.depth * 22}px` }" @click="activateRelation(node)" @keydown="onRelationKeydown($event, node)">
+                <button v-if="node.childCount > 0" class="agent-observer-tree-toggle" type="button" :aria-label="node.expanded ? '折叠' : '展开'" tabindex="-1" @click.stop="observer.toggleRelation(node.id, !node.expanded)"><ChevronRight :size="15" :data-expanded="node.expanded" /></button>
+                <span v-else class="agent-observer-tree-spacer" aria-hidden="true" />
+                <StatusBadge v-if="node.status" :status="statusTone(node.status)" :label="node.status" />
+                <span v-else class="agent-observer-relation-kind">{{ node.kind }}</span>
+                <strong class="mono" :title="node.label">{{ shortId(node.label) }}</strong>
+                <small :title="node.detail || ''">{{ node.detail || `${node.childCount} 个子节点` }}</small>
               </div>
             </template>
           </VirtualList>