feat(showcase/langgraph-python): add subagent-card and subagent-result testids

- subagent-activity-card: emit data-testid="subagent-card-<role>" on
  each card wrapper (researcher | writer | critic), data-testid=
  "subagent-result" on the Result content div, and data-testid=
  "subagent-status" on the status pill. The previous testids
  (subagent-activity-card, subagent-activity-result) collapsed across
  roles, so the e2e suite couldn't count or content-assert per role.
- delegation-log: render a fixed row of 3 always-visible role
  indicators (data-testid="subagent-indicator-<role>") so the page
  exposes a stable hook for the load-state assertion regardless of
  whether the supervisor has delegated yet.

Author: AlemTuzlak

showcase/integrations/langgraph-python/src/app/demos/subagents/delegation-log.tsx

@@ -51,7 +51,25 @@ const SUB_AGENT_STYLE: Record<
  * The parent header shows how many sub-agents have been called and
  * whether the supervisor is still running.
  */
+// Fixed list of the three sub-agent roles the supervisor can call.
+// Rendered as always-visible indicator chips at the top of the log
+// (regardless of whether the supervisor has delegated yet) so the user
+// — and the e2e suite — can see at a glance which sub-agents exist and
+// which are currently active.
+const INDICATOR_ROLES: ReadonlyArray<{
+  role: "researcher" | "writer" | "critic";
+  subAgent: SubAgentName;
+}> = [
+  { role: "researcher", subAgent: "research_agent" },
+  { role: "writer", subAgent: "writing_agent" },
+  { role: "critic", subAgent: "critique_agent" },
+];
+
 export function DelegationLog({ delegations, isRunning }: DelegationLogProps) {
+  const calledRoles = new Set<SubAgentName>(
+    delegations.map((d) => d.sub_agent),
+  );
+
   return (
     <div
       data-testid="delegation-log"
@@ -80,6 +98,30 @@ export function DelegationLog({ delegations, isRunning }: DelegationLogProps) {
         </span>
       </div>
 
+      <div
+        data-testid="subagent-indicators"
+        className="flex items-center gap-2 border-b border-[#E9E9EF] bg-white px-6 py-2"
+      >
+        {INDICATOR_ROLES.map(({ role, subAgent }) => {
+          const style = SUB_AGENT_STYLE[subAgent];
+          const fired = calledRoles.has(subAgent);
+          return (
+            <span
+              key={role}
+              data-testid={`subagent-indicator-${role}`}
+              data-role={role}
+              data-fired={fired ? "true" : "false"}
+              className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-semibold uppercase tracking-[0.1em] border ${style.color} ${
+                fired ? "" : "opacity-60"
+              }`}
+            >
+              <span aria-hidden>{style.emoji}</span>
+              <span>{style.label}</span>
+            </span>
+          );
+        })}
+      </div>
+
       <div className="flex-1 overflow-y-auto p-4 space-y-3">
         {delegations.length === 0 ? (
           <p className="text-[#838389] italic text-sm">

showcase/integrations/langgraph-python/src/app/demos/subagents/subagent-activity-card.tsx

@@ -55,6 +55,16 @@ export interface SubAgentActivityCardProps {
   result: string | undefined;
 }
 
+// Map the backend tool name (`research_agent`, `writing_agent`,
+// `critique_agent`) to the short role used in test selectors. The
+// per-role `[data-testid="subagent-card-<role>"]` testid is the stable
+// hook the e2e suite uses to count cards and assert per-card content.
+const ROLE_TESTID: Record<SubAgentName, "researcher" | "writer" | "critic"> = {
+  research_agent: "researcher",
+  writing_agent: "writer",
+  critique_agent: "critic",
+};
+
 export function SubAgentActivityCard({
   subAgent,
   task,
@@ -64,10 +74,12 @@ export function SubAgentActivityCard({
   const meta = SUB_AGENT_META[subAgent];
   const done = status === "complete";
   const running = !done;
+  const roleTestId = `subagent-card-${ROLE_TESTID[subAgent]}`;
 
   return (
     <div
-      data-testid="subagent-activity-card"
+      data-testid={roleTestId}
+      data-subagent-card={ROLE_TESTID[subAgent]}
       data-sub-agent={subAgent}
       data-status={status}
       className={`my-3 overflow-hidden rounded-2xl border bg-white shadow-sm ${meta.accent}`}
@@ -106,7 +118,8 @@ export function SubAgentActivityCard({
         <Section label="Result">
           {done ? (
             <div
-              data-testid="subagent-activity-result"
+              data-testid="subagent-result"
+              data-subagent-result-role={ROLE_TESTID[subAgent]}
               className="rounded-lg border border-[#E9E9EF] bg-white p-2.5 text-xs text-[#010507] whitespace-pre-wrap"
             >
               {result?.trim() ? result : "(empty)"}
@@ -150,7 +163,8 @@ function StatusBadge({
   const label = describeStatus(status);
   return (
     <span
-      data-testid="subagent-activity-status"
+      data-testid="subagent-status"
+      data-status={status}
       className={`rounded-full border px-2.5 py-0.5 text-[10px] font-medium uppercase tracking-[0.14em] ${chipTone}`}
     >
       {label}