diff --git a/src/client/components/memberBoard.tsx b/src/client/components/memberBoard.tsx
index 833bd2e..6292a7c 100644
--- a/src/client/components/memberBoard.tsx
+++ b/src/client/components/memberBoard.tsx
@@ -1,15 +1,17 @@
/**
* The Fleet members board — every agent of the family in one panel, in two sections: the team's
* roster as full cards (identity, duty, latest reply, live task count), then the family's other
- * agents (plain subagents, ancestors, siblings) as compact rows. The toolbar's search, status
- * filter, and sort steer both sections. A pick pins the agent (ringing its graph node); a member
- * card's task chip filters the task board to that owner; the open button jumps to the session.
+ * agents (plain subagents, ancestors, siblings) as cards in the same form — their label in place
+ * of a roster name, and the run's tokens/duration/steps in place of the duty line. The toolbar's
+ * search, status filter, and sort steer both sections. A pick pins the agent (ringing its graph
+ * node); a member card's task chip filters the task board to that owner; the open button jumps
+ * to the session.
*/
import { useMemo, useState, type CSSProperties, type ReactElement } from 'react'
import { IconUserOutlineRegular, IconUsersOutlineRegular, StateDot } from '@deepseek-ai/dsh-client-ui-primitives'
import type { AgentForest, AgentNode } from '../agentTree'
-import { familyHue, fmtDurationCompact } from '../agentTree'
+import { familyHue, fmtDurationCompact, pressureColorOf } from '../agentTree'
import { tasksOfOwner, teamMemberOf, type FleetTeam } from '../fleetTeam'
import type { FleetDetail, FleetMemberInfo } from '../../shared/types'
import type { ViewKit } from '../viewkit'
@@ -33,12 +35,29 @@ export interface MemberBoardProps {
fmt: ViewKit['fmt']
}
-/** One member's card hue: the lead carries the brand color, teammates their golden-angled roster
- * hue (the graph's family-hue idiom). */
-function memberStyle(index: number, lead: boolean): CSSProperties {
- return {
- '--lc-member-hue': lead ? 'var(--dsw-alias-brand-primary, var(--color-blue-500))' : familyHue(index),
- } as CSSProperties
+/** One card's hue: the lead carries the brand color, every other card a golden-angled hue —
+ * teammates by roster order, other agents by their level-1 family (the graph's link hue). */
+const BRAND_HUE = 'var(--dsw-alias-brand-primary, var(--color-blue-500))'
+
+function memberStyle(hue: string): CSSProperties {
+ return { '--lc-member-hue': hue } as CSSProperties
+}
+
+/** The run's activity line above a card's foot: consumption, duration, then steps — the graph
+ * cards' own meta readout. */
+function memberMeta(node: AgentNode, t: ViewKit['t'], fmt: ViewKit['fmt']): ReactElement | null {
+ const bits: string[] = []
+ if (node.head !== null && node.head.tokens > 0) bits.push(fmt(node.head.tokens))
+ if (node.durationMs !== null) bits.push(fmtDurationCompact(node.durationMs))
+ if (node.requests > 0) bits.push(t('agents.steps', { n: node.requests }))
+ const pct = node.head !== null ? node.head.pct : null
+ if (bits.length === 0 && pct === null) return null
+ return (
+