feat(showcase/langgraph-python): add testids and pills required by d5 probes

Adds production-code testids needed by the Phase-2B genuine D5 probes:

- frontend-tools/background.tsx: data-testid='frontend-tools-background'
  + data-background-value mirror so the probe can read the live gradient
  off the DOM without computing styles.
- declarative-gen-ui/a2ui/renderers.tsx: data-testid for Card,
  StatusBadge, Metric, PieChart, BarChart so per-pill probes can assert
  the expected catalog component painted.
- a2ui-fixed-schema/a2ui/renderers.tsx: data-testid='a2ui-fixed-card'
  on the Card override so the fixed-schema component-tree mount is
  observable without keyword-matching the transcript.

Each cell's Layer 1 spec is already green; this is purely additive — no
spec rewrites.

Author: AlemTuzlak

showcase/integrations/langgraph-python/src/app/demos/a2ui-fixed-schema/a2ui/renderers.tsx

@@ -33,7 +33,7 @@ export const renderers: CatalogRenderers<Definitions> = {
    * Column adds the vertical spacing.
    */
   Card: ({ props, children }) => (
-    <Card className="w-full max-w-md p-5">
+    <Card className="w-full max-w-md p-5" data-testid="a2ui-fixed-card">
       {props.child ? children(props.child) : null}
     </Card>
   ),

showcase/integrations/langgraph-python/src/app/demos/declarative-gen-ui/a2ui/renderers.tsx

@@ -163,7 +163,7 @@ function AnimatedBar(props: any) {
 // @region[renderers-react]
 export const myRenderers: CatalogRenderers<MyDefinitions> = {
   Card: ({ props, children }) => (
-    <Card className="min-w-[260px]">
+    <Card className="min-w-[260px]" data-testid="declarative-card">
       <CardHeader>
         <CardTitle>{props.title}</CardTitle>
         {props.subtitle && <CardDescription>{props.subtitle}</CardDescription>}
@@ -177,7 +177,12 @@ export const myRenderers: CatalogRenderers<MyDefinitions> = {
   ),
 
   StatusBadge: ({ props }) => (
-    <Badge variant={props.variant ?? "info"}>{props.text}</Badge>
+    <Badge
+      variant={props.variant ?? "info"}
+      data-testid="declarative-status-badge"
+    >
+      {props.text}
+    </Badge>
   ),
 
   Metric: ({ props }) => {
@@ -190,7 +195,7 @@ export const myRenderers: CatalogRenderers<MyDefinitions> = {
           ? "text-rose-600"
           : "text-[var(--foreground)]";
     return (
-      <div className="flex flex-col gap-1">
+      <div data-testid="declarative-metric" className="flex flex-col gap-1">
         <div className="text-xs font-medium uppercase tracking-wider text-[var(--muted-foreground)]">
           {props.label}
         </div>
@@ -234,7 +239,10 @@ export const myRenderers: CatalogRenderers<MyDefinitions> = {
     const total = safeData.reduce((sum, d) => sum + (Number(d.value) || 0), 0);
 
     return (
-      <Card className="mx-auto max-w-[520px] overflow-hidden">
+      <Card
+        className="mx-auto max-w-[520px] overflow-hidden"
+        data-testid="declarative-pie-chart"
+      >
         <CardHeader>
           <CardTitle>{props.title}</CardTitle>
           <CardDescription>{props.description}</CardDescription>
@@ -290,7 +298,10 @@ export const myRenderers: CatalogRenderers<MyDefinitions> = {
     const safeData = Array.isArray(data) ? data : [];
 
     return (
-      <Card className="mx-auto max-w-[640px] overflow-hidden">
+      <Card
+        className="mx-auto max-w-[640px] overflow-hidden"
+        data-testid="declarative-bar-chart"
+      >
         {/* Scoped keyframe — no globals.css needed */}
         <style>{`
           @keyframes barSlideIn {

showcase/integrations/langgraph-python/src/app/demos/frontend-tools/background.tsx

@@ -15,6 +15,8 @@ export function Background({
 }) {
   return (
     <div
+      data-testid="frontend-tools-background"
+      data-background-value={background}
       className="relative h-screen w-full overflow-hidden transition-[background] duration-700"
       style={{ background }}
     >