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.