fix(dashboard): v2.1.2 — card click restored, rail dims after dismiss, CALLBACK verb names module

Fixes 3 issues reported after v2.1.1:

1. 'Dismiss 之后框还是红的' (rail stays red after banner dismiss)
   Root cause: `health` is server-derived from queue state. Frontend dismiss
   only hides the banner row; rail color stayed bright red/amber even after
   user acknowledged.
   Fix: new hook `useAllBannersDismissed(keys)` subscribes to the same
   sessionStorage + custom-event stream the banner uses. When every banner
   on a card has been dismissed, the rail and card-tint drop to opacity-40
   (still the same semantic color, just visually quiet). If a new banner
   appears (count changes → new signature → new key → not-yet-dismissed),
   the rail un-dims automatically. Exports `bannerKey()` from expandState
   so banner and card agree on the storage key format.

2. '卡片点不开了，只能看概况' (card body no longer clickable)
   Root cause: in v2.1.1 I moved the expand toggle onto the `▾ more` text
   button alone and removed onClick from the card <div> itself. Users
   instinctively click anywhere on the card and got no response.
   Fix: restore `onClick={onToggleExpand}` on the card body. All inner
   interactive regions (banner [×], section headers, session/job items,
   action buttons) already call `e.stopPropagation()` so clicking a Retry
   button or expanding a section does not also toggle the whole card.
   Added role="button", tabIndex, aria-expanded, and Enter/Space keyboard
   handler for accessibility.
   The `▾ more` label stays as a visual hint (no longer a button — the
   whole card is the button now).

3. 'Callback 不知道对象是谁' (CALLBACK verb too generic)
   Root cause: `humanize_verb` returned a hard-coded 'Resuming after
   callback' for CALLBACK kind. The route already had `instances` (list of
   in_progress module_instances with module_class + description) but
   humanize_verb didn't receive them.
   Fix: add `instances` param to humanize_verb and produce:
     - 0 inst  → 'Processing callback'
     - 1 inst  → 'Running SocialNetworkModule: syncing entity graph'
                 (module_class + description, truncated at 60 chars)
     - N inst  → 'Running 3 modules (Mod1, Mod2, Mod3)'
   Same treatment extended to SKILL_STUDY and MATRIX — all three kinds now
   name the active module instance instead of showing a generic label.

Tests: 80 backend pytest pass (27 v2.1 tests after adding 5 new CALLBACK
cases). tsc -b exit 0. eslint dashboard files: 0 errors.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: BinLiang2021

backend/routes/_dashboard_helpers.py

@@ -468,20 +468,27 @@ def humanize_verb(
     sessions: list,
     running_jobs: list,
     last_activity_at: str | None,
+    instances: list | None = None,
 ) -> str:
     """v2.1: turn kind + context into a human-readable 'verb' line.
 
+    v2.1.2: CALLBACK / SKILL_STUDY / MATRIX now use `instances` (in_progress
+    module_instances) to name the specific module — "Callback" alone doesn't
+    tell the user what module is running or what it's doing.
+
     Examples:
-      idle + recent  → "Idle · last active 4m ago"
-      idle + never   → "Never run"
-      CHAT + 3 users → "Serving 3 users"
-      CHAT + 1 user  → "In conversation with Alice"
-      JOB + 1        → "Running: weekly-report"
-      JOB + 2        → "Running 2 jobs"
-      MESSAGE_BUS    → "Forwarding bus messages"
-      A2A            → "Called by another agent"
-      CALLBACK       → "Resuming after external callback"
+      idle + recent       → "Idle · last active 4m ago"
+      CHAT + 1 user       → "In conversation with Alice"
+      CHAT + 3 users      → "Serving 3 users"
+      JOB + 1             → "Running: weekly-report"
+      JOB + 2             → "Running 2 jobs"
+      MESSAGE_BUS         → "Handling bus message"
+      A2A                 → "Called by another agent"
+      CALLBACK + 1 inst   → "Running SocialNetworkModule: syncing entity graph"
+      CALLBACK + 2 inst   → "Running 2 modules (SocialNetworkModule, JobModule)"
+      CALLBACK + 0 inst   → "Processing callback"
     """
+    instances = instances or []
     if kind == "idle":
         if not last_activity_at:
             return "Never run"
@@ -521,12 +528,36 @@ def humanize_verb(
         return "Handling bus message"
     if kind == "A2A":
         return "Called by another agent"
-    if kind == "CALLBACK":
-        return "Resuming after callback"
-    if kind == "SKILL_STUDY":
-        return "Learning a skill"
-    if kind == "MATRIX":
-        return "Running matrix flow"
+
+    # CALLBACK / SKILL_STUDY / MATRIX all surface the module that's running.
+    # "Callback" by itself is just a trigger category — the user wants to know
+    # WHICH module instance is active.
+    if kind in ("CALLBACK", "SKILL_STUDY", "MATRIX"):
+        if not instances:
+            fallback = {
+                "CALLBACK": "Processing callback",
+                "SKILL_STUDY": "Learning a skill",
+                "MATRIX": "Running matrix flow",
+            }
+            return fallback[kind]
+        if len(instances) == 1:
+            inst = instances[0]
+            module = inst.get("module_class") or "module"
+            desc = (inst.get("description") or "").strip()
+            if desc:
+                short = desc[:60] + "…" if len(desc) > 60 else desc
+                return f"Running {module}: {short}"
+            return f"Running {module}"
+        # Multiple instances — enumerate up to 3 module classes
+        modules = [i.get("module_class") or "module" for i in instances]
+        uniq = []
+        for m in modules:
+            if m not in uniq:
+                uniq.append(m)
+        sample = ", ".join(uniq[:3])
+        more = "" if len(uniq) <= 3 else f" + {len(uniq) - 3} more"
+        return f"Running {len(instances)} modules ({sample}{more})"
+
     return f"Running ({kind})"
 
 

backend/routes/dashboard.py

@@ -168,9 +168,12 @@ async def agents_status(request: Request, response: Response):
         )
 
         # v2.1: verb line (human-readable)
+        # v2.1.2: pass instances so CALLBACK/SKILL_STUDY/MATRIX can name
+        # the specific module instead of a generic "Processing callback".
         verb_line = humanize_verb(
             kind=kind, sessions=sessions, running_jobs=running_jobs_raw,
             last_activity_at=last_act.get(aid),
+            instances=instances,
         )
 
         raw = {

frontend/src/components/dashboard/AgentCard.tsx

@@ -1,24 +1,26 @@
 /**
  * @file_name: AgentCard.tsx
- * @description: v2.1.1 — agent card with two-tier visibility (collapsed vs
- * expanded). Goal: reduce visual noise so the user sees only what matters at
- * a glance, and gets richer detail by clicking.
+ * @description: v2.1.2 — agent card with two-tier visibility (collapsed vs
+ * expanded) driven by card-body click (inner buttons stopPropagation).
  *
- * COLLAPSED (default state, what most cards always look like):
- *   ┌─▋ Alpha · 💬 · ⏱ 12s ─────────────────────────────────┐
- *   │ ▋ Serving 3 users [A][B][C]                            │  ← verb_line + avatars
- *   │ ▋ 🔴 1 job failed 3m ago                  [Retry] [×] │  ← banner (dismissible)
- *   │ ▋ Queue ████▓░░░ 5  ·  ✓ 47  ⚠ 1  $0.12  ·  ▾ more   │  ← inline metrics + expand
- *   └────────────────────────────────────────────────────────┘
+ * Changes vs v2.1.1:
+ *   - Card body itself is clickable again (regression fix). Inner interactive
+ *     sections (banners, section headers, items, action buttons) all call
+ *     e.stopPropagation() in their own handlers, so clicking a session row
+ *     or a Retry button doesn't bubble up and toggle the whole card.
+ *   - When all attention banners are dismissed in sessionStorage, the status
+ *     rail dims (opacity-40) instead of staying bright red/amber. The
+ *     underlying health is still "error" or "warning" (server-driven), but
+ *     the visual urgency drops once the user has acknowledged. If count
+ *     changes (new failure), banners re-appear and the rail un-dims.
  *
- * EXPANDED (after click — full sections visible):
- *   above + SessionSection + JobsSection + Sparkline + RecentFeed
- *
- * Public non-owned variant: only the header line (no verb, no sections).
- * Permission boundary preserved by the discriminated union; here it's an
- * `if` early return.
+ * Layout (owned agents):
+ *   COLLAPSED (default):
+ *     Header · verb_line · banners · inline queue+metrics + ▾ more hint
+ *   EXPANDED:
+ *     above + sessions + jobs + sparkline + recent feed
  */
-import type { AgentStatus, OwnedAgentStatus } from '@/types';
+import type { AgentStatus, OwnedAgentStatus, AttentionBanner } from '@/types';
 import { StatusBadge } from './StatusBadge';
 import { DurationDisplay } from './DurationDisplay';
 import { ConcurrencyBadge } from './ConcurrencyBadge';
@@ -30,6 +32,7 @@ import { Sparkline } from './Sparkline';
 import { RecentFeed } from './RecentFeed';
 import { MetricsRow } from './MetricsRow';
 import { HEALTH_COLORS } from './healthColors';
+import { useAllBannersDismissed, bannerKey } from './expandState';
 
 const HEALTH_TOOLTIP = {
   healthy_running: 'Healthy · running',
@@ -89,22 +92,46 @@ function OwnedCard({
   expanded: boolean;
   onToggleExpand: () => void;
 }) {
+  const banners = agent.attention_banners ?? [];
+  // Key list for dismiss state lookup — must match the format used in
+  // AttentionBanners.BannerRow (see expandState.bannerKey).
+  const allKeys = banners.map((b: AttentionBanner) => bannerKey(agent.agent_id, b.kind, b.message));
+  const allDismissed = useAllBannersDismissed(allKeys);
+
   const colors = HEALTH_COLORS[agent.health];
+  // When the user has acknowledged every banner, dim the rail to de-escalate.
+  // We keep the semantic color (still red/amber) but reduce opacity so the
+  // card visually quiets down. It un-dims automatically if a new banner appears
+  // (new signature → new storage key → not dismissed yet → allDismissed=false).
+  const railDimClass = allDismissed ? 'opacity-40' : '';
   const verbLine = agent.verb_line;
   const hasSessions = agent.sessions.length > 0;
   const hasJobs = agent.running_jobs.length > 0 || agent.pending_jobs.length > 0;
   const hasRecent = agent.recent_events.length > 0;
+  // Same idea on card-body tint: drop the red wash if acknowledged.
+  const cardTint = allDismissed ? '' : colors.cardTint;
 
   return (
     <div
       data-testid={`agent-card-${agent.agent_id}`}
       data-expanded={expanded ? 'true' : 'false'}
       data-health={agent.health}
-      className={`group flex overflow-hidden rounded-xl border border-[var(--border-primary)] bg-[var(--bg-glass)] transition-colors ${colors.cardTint} ${agent.health === 'idle_long' ? 'opacity-75' : ''}`}
+      data-banners-dismissed={allDismissed ? 'true' : 'false'}
+      role="button"
+      tabIndex={0}
+      aria-expanded={expanded}
+      onClick={onToggleExpand}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          onToggleExpand();
+        }
+      }}
+      className={`group flex overflow-hidden rounded-xl border border-[var(--border-primary)] bg-[var(--bg-glass)] cursor-pointer hover:border-[var(--accent-primary)] transition-colors ${cardTint} ${agent.health === 'idle_long' ? 'opacity-75' : ''}`}
     >
       <div
-        className={`w-1 shrink-0 ${colors.rail}`}
-        title={HEALTH_TOOLTIP[agent.health]}
+        className={`w-1 shrink-0 ${colors.rail} ${railDimClass} transition-opacity`}
+        title={HEALTH_TOOLTIP[agent.health] + (allDismissed ? ' · acknowledged' : '')}
         aria-hidden
       />
       <div className="flex-1 p-3 min-w-0">
@@ -124,21 +151,16 @@ function OwnedCard({
           </div>
         )}
 
-        {/* Banners */}
-        <AttentionBanners agentId={agent.agent_id} banners={agent.attention_banners ?? []} />
+        {/* Banners (each dismissible individually) */}
+        <AttentionBanners agentId={agent.agent_id} banners={banners} />
 
         {/* Inline summary row — visible in both collapsed + expanded modes */}
         <div className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1">
           <QueueBar queue={agent.queue} compact />
           <MetricsRow metrics={agent.metrics_today} />
-          <button
-            type="button"
-            onClick={(e) => { e.stopPropagation(); onToggleExpand(); }}
-            className="ml-auto text-[11px] text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
-            aria-expanded={expanded}
-          >
+          <span className="ml-auto text-[11px] text-[var(--text-secondary)]">
             {expanded ? '▴ less' : '▾ more'}
-          </button>
+          </span>
         </div>
 
         {/* Expanded sections */}

frontend/src/components/dashboard/AttentionBanners.tsx

@@ -12,7 +12,7 @@
  * removed by the backend; sessionStorage entries become inert.
  */
 import type { AttentionBanner } from '@/types';
-import { useExpanded } from './expandState';
+import { useExpanded, bannerKey } from './expandState';
 
 const LEVEL_STYLE: Record<AttentionBanner['level'], { wrap: string; icon: string; accent: string }> = {
   error: {
@@ -52,12 +52,11 @@ export function AttentionBanners({
 function BannerRow({ agentId, banner }: { agentId: string; banner: AttentionBanner }) {
   // Signature embeds the message (which contains the live count). When the
   // underlying count changes the signature changes → banner re-appears.
-  const sig = encodeURIComponent(banner.message);
+  // v2.1.2: keep the key format in sync with `bannerKey()` so AgentCard can
+  // derive rail dimming from the same storage entries.
+  const key = bannerKey(agentId, banner.kind, banner.message);
   // useExpanded stores `true` when expanded. We invert to "dismissed".
-  const { expanded: dismissed, set } = useExpanded(
-    `${agentId}:banner:${banner.kind}:${sig}`,
-    false,
-  );
+  const { expanded: dismissed, set } = useExpanded(key, false);
   if (dismissed) return null;
   const s = LEVEL_STYLE[banner.level];
   return (

frontend/src/components/dashboard/expandState.ts

@@ -64,3 +64,31 @@ export function useExpanded(key: string, defaultOpen = false) {
 
   return { expanded: value, toggle, set } as const;
 }
+
+/**
+ * v2.1.2 — true iff every provided banner key is marked dismissed in
+ * sessionStorage. Returns `false` when the banner list is empty (there's
+ * nothing to dismiss, so "all dismissed" is not a meaningful state).
+ *
+ * Reactive: re-renders on `dashboard-expand-changed` so dismissing the
+ * last banner immediately dims the status rail without waiting for the
+ * next polling tick.
+ */
+export function useAllBannersDismissed(
+  bannerKeys: string[],
+): boolean {
+  return useSyncExternalStore(
+    subscribe,
+    () => {
+      if (bannerKeys.length === 0) return false;
+      const all = readAll();
+      return bannerKeys.every((k) => all[k] === true);
+    },
+    () => false,
+  );
+}
+
+/** Mirror of the banner sessionStorage key format used by AttentionBanners. */
+export function bannerKey(agentId: string, kind: string, message: string): string {
+  return `${agentId}:banner:${kind}:${encodeURIComponent(message)}`;
+}

tests/backend/test_dashboard_v21.py

@@ -118,6 +118,56 @@ def test_verb_message_bus_and_a2a():
     assert humanize_verb("A2A", [], [], None) == "Called by another agent"
 
 
+# ---- v2.1.2: CALLBACK / SKILL_STUDY / MATRIX surface module info ----
+
+def test_verb_callback_names_module_when_available():
+    """Regression for 'Callback ×2 不知道对象是谁' — verb must include module."""
+    out = humanize_verb(
+        "CALLBACK", [], [], last_activity_at=None,
+        instances=[{"module_class": "SocialNetworkModule", "description": "syncing entities"}],
+    )
+    assert "SocialNetworkModule" in out
+    assert "syncing entities" in out
+
+
+def test_verb_callback_no_instances_fallback():
+    out = humanize_verb("CALLBACK", [], [], None, instances=[])
+    assert out == "Processing callback"
+
+
+def test_verb_callback_multiple_instances_enumerates():
+    out = humanize_verb(
+        "CALLBACK", [], [], None,
+        instances=[
+            {"module_class": "SocialNetworkModule"},
+            {"module_class": "JobModule"},
+        ],
+    )
+    assert "2" in out
+    assert "SocialNetworkModule" in out
+    assert "JobModule" in out
+
+
+def test_verb_skill_study_uses_instance_info():
+    out = humanize_verb(
+        "SKILL_STUDY", [], [], None,
+        instances=[{"module_class": "SkillModule", "description": "learning curl usage"}],
+    )
+    assert "SkillModule" in out
+    assert "learning curl usage" in out
+
+
+def test_verb_instance_description_truncated():
+    long_desc = "x" * 200
+    out = humanize_verb(
+        "CALLBACK", [], [], None,
+        instances=[{"module_class": "Mod", "description": long_desc}],
+    )
+    # Should be truncated with ellipsis; not 200+ chars
+    assert len(out) < 120
+    assert "…" in out or "..." in out
+
+
 # ---- build_recent_events_resp -------------------------------------------
 
 def test_recent_events_classifies_error():