feat: renderer adapter — 5 GenUI strategies with shared components and middleware

- RendererSelector: pill toggle for 5 modes (tool-based, A2UI, hashbrown, json-render, open-genui)
- useRenderMode: state + localStorage + useAgentContext forwarding
- 4 renderer adapters: ToolBasedDashboard, A2UIDashboard, HashBrownDashboard, OpenGenUIDashboard
- json-render: deferred (Zod 4 isolation needed), documented architecture
- New shared components: DealCard, Pipeline, MetricCard
- Python render_mode middleware for context-driven output switching
- 338 tests (181 React + 52 TS + 105 Python)

Author: jpr5

showcase/shared/frontend/package.json

@@ -6,6 +6,8 @@
   "types": "src/index.ts",
   "scripts": {},
   "dependencies": {
+    "@hashbrownai/core": "0.5.0-beta.4",
+    "@hashbrownai/react": "0.5.0-beta.4",
     "recharts": "^2.15.0",
     "zod": "^3.24.0"
   },

showcase/shared/frontend/src/components/__tests__/sales-dashboard/deal-card.test.tsx

@@ -0,0 +1,181 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { DealCard } from "../../sales-dashboard/deal-card";
+import type { SalesTodo } from "../../../types";
+
+const baseDeal: SalesTodo = {
+  id: "1",
+  title: "Follow up with Acme Corp",
+  stage: "qualified",
+  value: 50000,
+  dueDate: "2026-04-20",
+  assignee: "Alice",
+  completed: false,
+};
+
+describe("DealCard", () => {
+  it("renders deal title", () => {
+    render(<DealCard deal={baseDeal} />);
+    expect(screen.getByText("Follow up with Acme Corp")).toBeTruthy();
+  });
+
+  it("shows stage badge", () => {
+    render(<DealCard deal={baseDeal} />);
+    expect(screen.getByText("qualified")).toBeTruthy();
+  });
+
+  // --- All 6 stage color variants ---
+
+  it("shows correct color class for prospect stage", () => {
+    const deal = { ...baseDeal, stage: "prospect" as const };
+    const { container } = render(<DealCard deal={deal} />);
+    const badge = container.querySelector(".bg-blue-100");
+    expect(badge).toBeTruthy();
+    expect(badge!.textContent).toBe("prospect");
+  });
+
+  it("shows correct color class for qualified stage", () => {
+    const deal = { ...baseDeal, stage: "qualified" as const };
+    const { container } = render(<DealCard deal={deal} />);
+    const badge = container.querySelector(".bg-purple-100");
+    expect(badge).toBeTruthy();
+    expect(badge!.textContent).toBe("qualified");
+  });
+
+  it("shows correct color class for proposal stage", () => {
+    const deal = { ...baseDeal, stage: "proposal" as const };
+    const { container } = render(<DealCard deal={deal} />);
+    const badge = container.querySelector(".bg-amber-100");
+    expect(badge).toBeTruthy();
+    expect(badge!.textContent).toBe("proposal");
+  });
+
+  it("shows correct color class for negotiation stage", () => {
+    const deal = { ...baseDeal, stage: "negotiation" as const };
+    const { container } = render(<DealCard deal={deal} />);
+    const badge = container.querySelector(".bg-orange-100");
+    expect(badge).toBeTruthy();
+    expect(badge!.textContent).toBe("negotiation");
+  });
+
+  it("shows correct color class for closed-won stage", () => {
+    const deal = { ...baseDeal, stage: "closed-won" as const };
+    const { container } = render(<DealCard deal={deal} />);
+    const badge = container.querySelector(".bg-green-100");
+    expect(badge).toBeTruthy();
+    expect(badge!.textContent).toBe("closed-won");
+  });
+
+  it("shows correct color class for closed-lost stage", () => {
+    const deal = { ...baseDeal, stage: "closed-lost" as const };
+    const { container } = render(<DealCard deal={deal} />);
+    const badge = container.querySelector(".bg-red-100");
+    expect(badge).toBeTruthy();
+    expect(badge!.textContent).toBe("closed-lost");
+  });
+
+  // --- Formatted currency ---
+
+  it("shows formatted currency value", () => {
+    render(<DealCard deal={baseDeal} />);
+    expect(screen.getByText("$50,000")).toBeTruthy();
+  });
+
+  it("shows large formatted currency value", () => {
+    const deal = { ...baseDeal, value: 1250000 };
+    render(<DealCard deal={deal} />);
+    expect(screen.getByText("$1,250,000")).toBeTruthy();
+  });
+
+  it("shows zero value correctly", () => {
+    const deal = { ...baseDeal, value: 0 };
+    render(<DealCard deal={deal} />);
+    expect(screen.getByText("$0")).toBeTruthy();
+  });
+
+  // --- Assignee and due date ---
+
+  it("shows assignee", () => {
+    render(<DealCard deal={baseDeal} />);
+    expect(screen.getByText("Alice")).toBeTruthy();
+  });
+
+  it("shows due date", () => {
+    render(<DealCard deal={baseDeal} />);
+    expect(screen.getByText("Due 2026-04-20")).toBeTruthy();
+  });
+
+  it("hides assignee when not provided", () => {
+    const deal = { ...baseDeal, assignee: "" };
+    render(<DealCard deal={deal} />);
+    // Empty string is falsy, so assignee span should not render
+    expect(screen.queryByText("Alice")).toBeNull();
+  });
+
+  it("hides due date when not provided", () => {
+    const deal = { ...baseDeal, dueDate: "" };
+    render(<DealCard deal={deal} />);
+    expect(screen.queryByText(/^Due /)).toBeNull();
+  });
+
+  // --- Completed state ---
+
+  it("applies reduced opacity when completed", () => {
+    const completedDeal = { ...baseDeal, completed: true };
+    const { container } = render(<DealCard deal={completedDeal} />);
+    expect((container.firstChild as HTMLElement).className).toContain(
+      "opacity-60",
+    );
+  });
+
+  it("does not apply reduced opacity when active", () => {
+    const { container } = render(<DealCard deal={baseDeal} />);
+    expect((container.firstChild as HTMLElement).className).not.toContain(
+      "opacity-60",
+    );
+  });
+
+  it("shows line-through on title when completed", () => {
+    const completedDeal = { ...baseDeal, completed: true };
+    render(<DealCard deal={completedDeal} />);
+    const title = screen.getByText("Follow up with Acme Corp");
+    expect(title.className).toContain("line-through");
+  });
+
+  it("does not show line-through on title when active", () => {
+    render(<DealCard deal={baseDeal} />);
+    const title = screen.getByText("Follow up with Acme Corp");
+    expect(title.className).not.toContain("line-through");
+  });
+
+  it("shows green indicator dot when active", () => {
+    render(<DealCard deal={baseDeal} />);
+    const indicator = screen.getByTestId("completion-indicator");
+    expect(indicator.className).toContain("bg-green-500");
+  });
+
+  it("shows muted indicator dot when completed", () => {
+    const completedDeal = { ...baseDeal, completed: true };
+    render(<DealCard deal={completedDeal} />);
+    const indicator = screen.getByTestId("completion-indicator");
+    expect(indicator.className).not.toContain("bg-green-500");
+    expect(indicator.className).toContain("bg-[var(--muted-foreground)]");
+  });
+
+  it("uses muted-foreground text color for title when completed", () => {
+    const completedDeal = { ...baseDeal, completed: true };
+    render(<DealCard deal={completedDeal} />);
+    const title = screen.getByText("Follow up with Acme Corp");
+    expect(title.className).toContain("text-[var(--muted-foreground)]");
+  });
+
+  it("has deal-card test id", () => {
+    render(<DealCard deal={baseDeal} />);
+    expect(screen.getByTestId("deal-card")).toBeTruthy();
+  });
+
+  it("has stage-badge test id", () => {
+    render(<DealCard deal={baseDeal} />);
+    expect(screen.getByTestId("stage-badge")).toBeTruthy();
+  });
+});

showcase/shared/frontend/src/components/__tests__/sales-dashboard/metric-card.test.tsx

@@ -0,0 +1,136 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { MetricCard } from "../../sales-dashboard/metric-card";
+
+describe("MetricCard", () => {
+  it("renders label", () => {
+    render(<MetricCard label="Total Pipeline" value="$245,000" />);
+    expect(screen.getByText("Total Pipeline")).toBeTruthy();
+  });
+
+  it("renders value", () => {
+    render(<MetricCard label="Total Pipeline" value="$245,000" />);
+    expect(screen.getByText("$245,000")).toBeTruthy();
+  });
+
+  it("renders without trend indicator by default", () => {
+    render(<MetricCard label="Total Pipeline" value="$245,000" />);
+    expect(screen.queryByTestId("trend-indicator")).toBeNull();
+  });
+
+  // --- All 3 trend variants ---
+
+  it("shows upward trend indicator with green color", () => {
+    render(
+      <MetricCard
+        label="Revenue"
+        value="$100,000"
+        trend={{ direction: "up", percentage: 12 }}
+      />,
+    );
+    const trend = screen.getByTestId("trend-indicator");
+    expect(trend).toBeTruthy();
+    expect(trend.textContent).toContain("12%");
+    expect(trend.textContent).toContain("\u2191");
+    expect(trend.className).toContain("text-green-600");
+  });
+
+  it("shows downward trend indicator with red color", () => {
+    render(
+      <MetricCard
+        label="Churn"
+        value="5%"
+        trend={{ direction: "down", percentage: 3 }}
+      />,
+    );
+    const trend = screen.getByTestId("trend-indicator");
+    expect(trend.textContent).toContain("3%");
+    expect(trend.textContent).toContain("\u2193");
+    expect(trend.className).toContain("text-red-600");
+  });
+
+  it("shows neutral trend indicator with muted color", () => {
+    render(
+      <MetricCard
+        label="Deals"
+        value="42"
+        trend={{ direction: "neutral", percentage: 0 }}
+      />,
+    );
+    const trend = screen.getByTestId("trend-indicator");
+    expect(trend.textContent).toContain("0%");
+    expect(trend.textContent).toContain("\u2192");
+    expect(trend.className).toContain("text-[var(--muted-foreground)]");
+  });
+
+  // --- Large numbers ---
+
+  it("renders large number values correctly", () => {
+    render(<MetricCard label="Revenue" value="$1,250,000" />);
+    expect(screen.getByText("$1,250,000")).toBeTruthy();
+  });
+
+  it("renders very large percentage in trend", () => {
+    render(
+      <MetricCard
+        label="Growth"
+        value="$500K"
+        trend={{ direction: "up", percentage: 150 }}
+      />,
+    );
+    const trend = screen.getByTestId("trend-indicator");
+    expect(trend.textContent).toContain("150%");
+  });
+
+  it("renders decimal percentage in trend", () => {
+    render(
+      <MetricCard
+        label="Conversion"
+        value="3.5%"
+        trend={{ direction: "up", percentage: 0.5 }}
+      />,
+    );
+    const trend = screen.getByTestId("trend-indicator");
+    expect(trend.textContent).toContain("0.5%");
+  });
+
+  // --- No trend default ---
+
+  it("does not render trend element when trend is undefined", () => {
+    const { container } = render(<MetricCard label="Simple" value="100" />);
+    const trendEl = container.querySelector("[data-testid='trend-indicator']");
+    expect(trendEl).toBeNull();
+  });
+
+  // --- Label styling ---
+
+  it("label has uppercase tracking-wider styling", () => {
+    render(<MetricCard label="Test Label" value="999" />);
+    const label = screen.getByText("Test Label");
+    expect(label.className).toContain("uppercase");
+    expect(label.className).toContain("tracking-wider");
+  });
+
+  // --- Value styling ---
+
+  it("value has bold text-2xl styling", () => {
+    render(<MetricCard label="Test" value="$1M" />);
+    const value = screen.getByText("$1M");
+    expect(value.className).toContain("text-2xl");
+    expect(value.className).toContain("font-bold");
+  });
+
+  it("has metric-card test id", () => {
+    render(<MetricCard label="Test" value="123" />);
+    expect(screen.getByTestId("metric-card")).toBeTruthy();
+  });
+
+  // --- Card container ---
+
+  it("card has border and rounded styling", () => {
+    render(<MetricCard label="Box" value="0" />);
+    const card = screen.getByTestId("metric-card");
+    expect(card.className).toContain("rounded-lg");
+    expect(card.className).toContain("border");
+  });
+});