feat(web): add Profiles tab to view agent profiles

[patrick-muller]

Summary

Adds a new Profiles tab to the Web UI, allowing users to browse installed agent profiles directly from the dashboard.

Problem

The Web UI shows a profile count on the Home page but provides no way to view the actual list of profiles or their details. Users have to use the CLI (cao install) to discover what profiles are available.

Solution

Added a new Profiles tab between Agents and Flows with:

• Expandable profile list — click a profile name to see its details (name, description, source)
• Source badges — visual distinction between built-in (blue) and installed/kiro (green) profiles
• Package icon — consistent with the Profiles card on the Home dashboard
• Keyboard shortcut — Alt+3 to switch to the tab
• AIM filter — filters out AIM-managed agents to keep the list focused on CAO profiles

Uses the existing /agents/profiles API endpoint — no backend changes required.

Changes

• web/src/components/ProfilesPanel.tsx — New component for the Profiles tab
• web/src/App.tsx — Added Profiles tab to navigation with Package icon

Testing

• Verified the tab renders correctly with profile data from the API
• Expandable rows show name, description, and source
• Empty state displays helpful CLI instructions
• Build passes with no errors

[codecov-commenter]

Codecov Report

✅ All modified and coverable lines are covered by tests.
⚠️ Please upload report for BASE (main@ba3a34d). Learn more about missing BASE report.

Additional details and impacted files

@@           Coverage Diff           @@
##             main     #222   +/-   ##
=======================================
  Coverage        ?   92.77%           
=======================================
  Files           ?       64           
  Lines           ?     5188           
  Branches        ?        0           
=======================================
  Hits            ?     4813           
  Misses          ?      375           
  Partials        ?        0           

Flag	Coverage Δ
unittests	92.77% <ø> (?)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[haofeif]

@patrick-muller Thanks for raising the PR. Clean, focused UI addition. Reuses the existing /agents/profiles endpoint — no backend change. Below are some of the comments.

Blocking / should-fix

1. No unit tests for the new component (P1)

The web project already has vitest + @testing-library/react wired up, and web/src/test/components.test.tsx tests StatusBadge, ErrorBoundary, and ConfirmModal. PR #222 adds a whole new component and a tab-routing branch with zero tests.

Worth adding (following the existing pattern):

• Loading state renders before data arrives.
• Empty state renders when the API returns [] (including the CLI hint copy).
• Each profile renders with its name, description, and source badge.
• Clicking a row toggles the expanded body; clicking again collapses; only one row expanded at a time.
• Source-badge class is bg-blue-* for source === 'built-in', bg-emerald-* otherwise.
• The AIM filter removes profiles whose description contains "managed by AIM" (a test would also pin the convention so a future backend change that drops that string gets caught).

Low cost, high value — matches the bar the repo already holds.

2. Keyboard shortcut numbering shifts silently (P1)

App.tsx:12–17 inserts "Profiles" at position 3, so Flows moves from Alt+3 to Alt+4 and Settings from Alt+4 to Alt+5. The PR description advertises the new Alt+3 for Profiles but doesn't mention that two existing shortcuts move.

The handler in App.tsx:61–70 reads from the TABS array dynamically, so it works correctly — the concern is purely UX continuity.

Options:

• Document the reshuffle in the PR description / release notes.
• Or append "Profiles" at the end of the tab bar (between Flows and Settings) so only one net-new shortcut appears and existing Alt+3/4 mappings are preserved.

Small call — pick one and make it deliberate.

Polish

3. Expanded row duplicates the name (P3)

ProfilesPanel.tsx:61–66 — the expanded body shows Name: <name> even though the name is already the row header. Drop it; description + source is enough.

4. Source-badge colors are binary (P3)

ProfilesPanel.tsx:50 uses source === 'built-in' ? blue : green, so local, kiro, q_cli, codex, installed, custom all share the green badge. The PR description says "green for installed/kiro" but the code actually treats everything except built-in as green.

Could reuse the canonical SOURCE_LABELS mapping from AgentPanel.tsx:15 with a small palette (e.g. built-in / local / provider). Not a blocker — the current behavior is harmless, just imprecise vs the stated intent.

---

Summary

#	Priority	Concern
1	P1	Add vitest coverage for ProfilesPanel
2	P1	Keyboard shortcut reshuffle — document or reorder
3	P3	Drop redundant Name: in expanded row
4	P3	Source-badge color is binary, not per-source

No P0s. Happy to see the feature — (1) is the only one I'd consider a should-fix; the rest are polish.

[haofeif]

Thanks for the follow-up, @patrick-muller. Confirming what I see in c39644b4:

Addressed ✅

• 1 (P1) Tests — the new describe('ProfilesPanel') block covers loading, empty, render, expand/collapse toggling, badge colors, and the AIM filter. Matches what the earlier review asked for.
• 3 (P3) Redundant Name: — expanded row is now Description-only. Cleaner.

Still open ❌

(P1) Keyboard shortcut reshuffle

Profiles is still inserted at position 3 (App.tsx:16), so Flows shifts Alt+3 → Alt+4 and Settings shifts Alt+4 → Alt+5. No note in the commit message or PR description.

Could you either:

• Append "Profiles" between Flows and Settings so only one net-new Alt mapping is added, or
• Add a line to the PR description / release notes calling out the Alt+3/4/5 change?

Pick either — just want it deliberate.

(P3) Binary badge colors

The SOURCE_BADGE map at ProfilesPanel.tsx:44–47 only has two keys (blue, green) and the lookup at line 106 is still p.source === 'built-in' ? SOURCE_BADGE.blue : SOURCE_BADGE.green. The commit message says "per-source badge colors via SOURCE_BADGE map" but the code is the same binary branch as before — local, kiro, codex, installed, custom all still resolve to green.

If you'd like to close this for real, keying the map by source and reusing SOURCE_LABELS from AgentPanel.tsx:15 would do it. Otherwise it's fine to leave as-is and drop the "per-source" claim from the commit message — this is a P3 polish item either way.

Summary

#	Priority	Concern	Status
1	P1	vitest coverage for ProfilesPanel	✅ Fixed
2	P1	Keyboard shortcut reshuffle — document or reorder	❌ Open
3	P3	Drop redundant Name: in expanded row	✅ Fixed
4	P3	Source-badge color is binary, not per-source	❌ Open

2 of 4 resolved. Only No. 2 is a should-fix before merge; No. 4 is polish.

[haofeif]

@patrick-muller would you like to follow up with the fixes before we merge the PR ? many thanks.

[gutosantos82]

PR Review: #222 — feat(web): add Profiles tab to view agent profiles

Summary

Adds a read-only Profiles tab to the Web UI (new ProfilesPanel.tsx + App.tsx nav wiring) that lists agent profiles from the existing GET /agents/profiles endpoint, with expandable rows and source badges. The change is frontend-only, follows sibling-panel idioms closely, and ships 6 vitest cases. One real defect keeps this from a clean approval: the AIM filter dereferences p.description without a null guard, so a single profile with an empty/null description throws and hides every profile. Fix that one line (plus a regression test) and this is a solid merge.

Blocking (must fix before merge)

None. (The null-description issue below is a genuine functional bug but is a 1-line frontend fix, not a security/data-integrity blocker — classified Important.)

Important (should fix)

• [correctness/tests/security] web/src/components/ProfilesPanel.tsx:20 — all.filter(p => !p.description.includes('managed by AIM')) assumes p.description is always a string. The backend (utils/agent_profiles.py, data.metadata.get("description", "")) only defaults to "" when the frontmatter key is absent; a present-but-empty description: line parses to YAML None → the API emits "description": null. Calling .includes() on null throws TypeError, which the surrounding try/catch swallows into the "Failed to load profiles" snackbar and setProfiles([]). Net effect: one profile with an empty description hides the entire list. The expanded view already guards this exact case ({p.description || '—'} at line 79), so the filter is inconsistently unguarded. Fix: p => !(p.description ?? '').includes('managed by AIM'). All three of the security, correctness, and tests reviewers independently flagged this path.
• [tests] web/src/test/components.test.tsx — The error/catch branch (ProfilesPanel.tsx:21-24: showSnackbar + setProfiles([])) has zero coverage — no test rejects listProfiles. Add a mockRejectedValue test asserting the empty state still renders on failure. Also add a regression test for a null/empty-description profile (would currently crash per the finding above), and — optionally — an App-level test that Alt+3 selects the Profiles tab, since the tab wiring and shortcut are untested.

Nits (optional)

• [conventions] web/src/components/ProfilesPanel.tsx:20 — The AIM-hide rule is a magic substring baked into the UI. Extract to a named const (AIM_MANAGED_MARKER) or, better, filter server-side. Note the drift risk: AgentPanel/FlowsPanel list profiles without this filter, so the Profiles tab now shows a different set than the spawn dropdowns.
• [security] web/src/components/ProfilesPanel.tsx:20 — The AIM filter is display-only, not a security boundary: GET /agents/profiles still returns AIM profiles to any caller, and any AIM profile whose description lacks the exact "managed by AIM" substring will still render. Fine if AIM profiles aren't sensitive; otherwise filter server-side.
• [correctness] web/src/App.tsx:62 — Stale comment: says "Keyboard shortcuts: Alt+1-4" but this PR makes TABS.length 5, so the handler now binds Alt+1–5. Logic is correct (data-driven); update the comment to Alt+1-5.

Prior feedback (already raised — not restating)

• ↩︎ Source-badge colors are binary (built-in blue, all else green); reuse the richer SOURCE_LABELS map from AgentPanel.tsx:15 for per-source colors — already raised by @haofeif; we concur.

Tests

The 6 added ProfilesPanel tests (loading, empty+CLI hint, render, single-open expand/collapse, badge colors, AIM filter) are well-formed, use the repo's vi.mock('../api') + waitFor idiom, and the mock shape {name, description, source} exactly matches AgentProfileInfo — they will pass. Coverage gaps on changed behavior: the error/catch branch and the null-description filter path (a latent crash) are untested, and there is no App-level tab/Alt+3 wiring test.

Verified correct (not findings)

• Alt+3 is wired up — App.tsx keydown handler is data-driven off TABS.length, and Alt+3 → TABS[2] = 'profiles'. The PR-body claim holds.
• /agents/profiles + AgentProfileInfo genuinely provide name/description/source; no backend change needed as claimed.
• Expand/collapse keyed on p.name is safe (backend dedupes profiles by name).
• React auto-escapes all rendered profile strings; no dangerouslySetInnerHTML or injection sink. No security issues.
• Inclusive-language clean; component/test/tab layout mirrors existing panels; no ESLint config exists so the empty-dep useEffect matches every sibling; CHANGELOG is git-cliff-generated so no manual entry needed.

Verdict

Request changes — fix the unguarded p.description null deref (1 line) and add the error-path/null-description regression tests. Everything else is nits. Once the filter is guarded this is an Approve.

---

Consistency review did not return before synthesis; its key checks (Alt+3 wiring, badge logic, PR-body claims, missing test-file entry in the "Changes" list) were independently covered by the correctness and conventions reviewers above.