feat(aio): render evaluation templates as a compact list

[Radu-Raicea]

Problem

The evaluation template picker renders each template as a large card in a 3-column grid (min-h-[180px] each). It works for the 5 templates we have today, but every template we add grows the grid and eats more vertical space. We want to be able to add more templates without the picker dominating the screen.

Changes

Replaces the card grid with a compact, single-column list:

• Each template is now a list row: leading type icon, name + type tag (Hog / LLM judge) inline, description as secondary text.
• Keeps the "Create from scratch" (blank) option as the first row.
• Preserves the hedgehog judge image and the "Choose an evaluation template" title/description.
• Keeps the layout constrained (centered, not full-width like the data-pipelines destination list) and adds no search/filter controls.

Pattern is modeled on the existing Hog function template list, adapted to the eval picker's narrower, no-search layout.

Note: the container width is left at its current max-w-5xl; easy to narrow (e.g. max-w-3xl) if the rows feel too wide as a list.

How did you test this code?

Not manually verified — this environment has no node_modules, so I couldn't run the frontend typecheck, lint, or the dev server. The change is limited to EvaluationTemplates.tsx markup (no logic/behavior changes to the click handler or template_key capture). Please sanity-check the rendered list and run the frontend checks before merge.

🤖 Agent context

Autonomy: Human-driven (agent-assisted)

Authored by the PostHog Slack app (Claude) from a Slack thread. The request originated from looking at which eval templates are most popular, then wanting to switch the picker from cards to a more compact list so more templates can be added. No repo skills were invoked. Decisions: reused the Hog-function-template list pattern as reference but dropped the search/filter and full-width table per the requester's constraints, and kept the existing capture logic (llm evaluation template selected with template_key) untouched.

---

Created with PostHog from a Slack thread

[github-actions]

Hey @Radu-Raicea! 👋

It looks like your git author email on this PR isn't your @posthog.com address (radu@raicea.com). Since you're on the PostHog team, it's worth pointing your local git author email at your @posthog.com address. Why it matters:

• Consistent work identity in git history — internal tooling that attributes commits to team members keys off your @posthog.com address.
• Keeps team contributions easy to tell apart from external community ones when scanning history.

You can fix it for this repo with:

git config user.email "you@posthog.com"

Or set it globally with git config --global user.email "you@posthog.com". No need to redo this PR — just a nudge for next time. 🙂

[github-actions]

🤖 CI report

⚠️ Bundle size — 🔺 +4.3 KiB (+0.0%)

Uncompressed size of every built .js bundle, compared against the base branch.

Total: 64.47 MiB · 🔺 +4.3 KiB (+0.0%)

File	Size	Δ vs base
posthog-app/_parent/products/ai_observability/frontend/evaluations/EvaluationTemplates.js	2.9 KiB	🔺 +2.0 KiB (+216.3%)
render-query/src/render-query/render-query.js	21.28 MiB	🔺 +1.6 KiB (+0.0%)

_{Posted automatically by build-bundle-size-report · uncompressed bytes from dist-report}

✅ Eager graph — within budget

How much code each root ships on the eager path — downloaded and parsed before the surface is interactive. Measured from the esbuild output chunks (post-tree-shake, static imports only); lazy import() / React.lazy chunks are not counted.

Root	Eager (shipped)	Δ vs base	Budget
entry (logged-out pages, app bootstrap) src/index.tsx	1.23 MiB · 22 files	🔺 +96 B (+0.0%)	███░░░░░░░ 28.6% of 4.29 MiB
authenticated shell (every logged-in page) src/scenes/AuthenticatedShell.tsx	8.19 MiB · 2,999 files	🔺 +82 B (+0.0%)	█████████░ 88.5% of 9.25 MiB

🟢 node_modules/monaco-editor/ stays out of src/index.tsx
🟢 src/lib/components/ActivityLog/describers stays out of src/index.tsx
🟢 [object Object] stays out of src/index.tsx
🟢 [object Object] stays out of src/index.tsx
🟢 node_modules/monaco-editor/ stays out of src/scenes/AuthenticatedShell.tsx
🟢 src/lib/components/ActivityLog/describers stays out of src/scenes/AuthenticatedShell.tsx
🟢 [object Object] stays out of src/scenes/AuthenticatedShell.tsx
🟢 [object Object] stays out of src/scenes/AuthenticatedShell.tsx

Largest files eagerly shipped from src/index.tsx

Size	File
126.8 KiB	../node_modules/.pnpm/react-dom@18.3.1_react@18.3.1/node_modules/react-dom/cjs/react-dom.production.min.js
24.6 KiB	../node_modules/.pnpm/buffer@6.0.3/node_modules/buffer/index.js
6.3 KiB	../node_modules/.pnpm/react@18.3.1/node_modules/react/cjs/react.production.min.js
4.5 KiB	../node_modules/.pnpm/@jspm+core@2.1.0/node_modules/@jspm/core/nodelibs/browser/process.js
3.9 KiB	../node_modules/.pnpm/scheduler@0.23.2/node_modules/scheduler/cjs/scheduler.production.min.js
1.4 KiB	../node_modules/.pnpm/base64-js@1.5.1/node_modules/base64-js/index.js
1.3 KiB	src/RootErrorBoundary.tsx
912 B	../node_modules/.pnpm/ieee754@1.2.1/node_modules/ieee754/index.js
789 B	src/scenes/ChunkLoadErrorBoundary.tsx
762 B	src/index.tsx

Largest files eagerly shipped from src/scenes/AuthenticatedShell.tsx

Size	File
281.3 KiB	../node_modules/.pnpm/posthog-js@1.404.1/node_modules/posthog-js/dist/rrweb.js
267.7 KiB	../node_modules/.pnpm/@posthog+icons@0.38.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@posthog/icons/dist/posthog-icons.es.js
235.8 KiB	src/taxonomy/core-filter-definitions-by-group.json
223.4 KiB	../node_modules/.pnpm/posthog-js@1.404.1/node_modules/posthog-js/dist/module.js
167.1 KiB	src/queries/validators.js
154.3 KiB	../node_modules/.pnpm/re2js@0.4.1/node_modules/re2js/build/index.esm.js
126.8 KiB	../node_modules/.pnpm/react-dom@18.3.1_react@18.3.1/node_modules/react-dom/cjs/react-dom.production.min.js
105.9 KiB	src/lib/api.ts
93.3 KiB	../node_modules/.pnpm/prosemirror-view@1.40.1/node_modules/prosemirror-view/dist/index.js
93.2 KiB	../packages/quill/packages/quill/dist/index.js

_{Posted automatically by check-eager-graph · sizes are eager output bytes (shipped, post-tree-shake) from the esbuild metafile · part of #32479}

✅ Dist folder size — 🔺 +1.05 MiB (+0.1%)

Total size of the built frontend/dist folder (all assets), compared against the base branch.

Total: 1354.13 MiB · 🔺 +1.05 MiB (+0.1%)

✅ Playwright — all passed

All tests passed.

View test results →

[github-actions]

🦔 Hogbox preview · ✅ ready

▶ Open the preview

🔑 Login	test@posthog.com / 12345678 (demo data)
🧩 Running	this PR's backend and frontend, on the PostHog :master base
🔗 Link	stable across rebuilds — a re-push swaps the box underneath, the URL stays
🔒 Access	tailnet only (PostHog VPN)
🛠️ Admin	inspect & debug state in hogland
💤 Idle	sleeps after ~30 min idle (snapshot to S3, zero node cost) and wakes on your next visit in ~30s, behind a brief "waking up" screen

_{commit ec32a9e · box box-acd9d2ff0c53 · ready in 835s (push → usable) · build log · rebuilds on every push, torn down on close}

[greptile-apps]

Prompt To Fix All With AI

Fix the following 2 code review issues. Work through them one at a time, proposing concise fixes.

---

### Issue 1 of 2
products/ai_observability/frontend/evaluations/templates.ts:124
**Generation Source Survives Trace Switch**

When this Hog template is switched to a trace target, the target reducer preserves its custom source because it does not equal `DEFAULT_HOG_SOURCE`. The saved trace evaluation still reads the generation-only `output` value, so evaluation runs fail instead of returning a result. The same issue affects the new `tools_called` template.

### Issue 2 of 2
products/ai_observability/frontend/evaluations/templates.ts:145
**Tool Calls Inferred From Output Text**

This template searches generated text for tool names instead of checking actual tool calls. Output such as “I cannot call get_weather” passes without a call, while a real call omitted from the final text fails, so the “Tools called” evaluation can return the opposite result.

_{Reviews (1): Last reviewed commit: "chore(aio): order eval templates as sent..." | Re-trigger Greptile}

[carlos-marchal-ph]

TemplateGrid and TemplateGridProps render a list now, worth renaming to something like TemplatePicker.

[posthog]

👋 Visual changes detected for this PR.

Review and approve in PostHog Visual Review

If these changes are unexpected, they may be caused by a flaky test or a broken snapshot on master. Don't approve — rerun the job or wait for a fix.

[deployment-status-posthog]

Deploy status

Environment	Status	Deployed At	Workflow
dev	✅ Deployed	2026-07-21 17:31 UTC	Run
prod-us	✅ Deployed	2026-07-21 17:52 UTC	Run
prod-eu	✅ Deployed	2026-07-21 17:50 UTC	Run