feat(agent-applications): searchable/paged agents list + UI polish#2868
feat(agent-applications): searchable/paged agents list + UI polish#2868benjackwhite wants to merge 1 commit into
Conversation
General fixes and enhancements across the agent-applications UI: - Activity-first: move the 7-day Activity KPI strip to the top of the Applications view, above the fleet list. - Agents list: add search (name/slug/description), a status filter (All/Live/Drafts with counts), and client-side paging (8/page). - Pills: fix bunched filter pills. gap="1.5" is not a valid Radix space token (renders ~0 gap); bump pill groups to gap="2" across sessions, approvals, fleet approvals, and the memory files/tables toggle. - Sessions: wrap the filter/search toolbar responsively so the user select + refresh no longer overflow on narrow widths. - Memory: keep the open file selected when toggling the agent builder dock. The dock layout previously swapped between bare children and a PanelGroup, remounting the whole /code/agents subtree; now the content panel is always mounted and only the dock panel + handle toggle. - Header: make the 8-tab agent detail bar horizontally scrollable when the pane is too narrow. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
React Doctor found no issues in the changed files. 🎉 Reviewed by React Doctor for commit |
|
Reviews (1): Last reviewed commit: "feat(agent-applications): searchable/pag..." | Re-trigger Greptile |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| const statusFilters: { id: StatusFilter; label: string; count: number }[] = [ | ||
| { id: "all", label: "All", count: allApps.length }, | ||
| { id: "live", label: "Live", count: liveCount }, | ||
| { id: "drafts", label: "Drafts", count: draftCount }, | ||
| ]; |
There was a problem hiding this comment.
liveCount and draftCount are derived from allApps (all agents, regardless of search), so typing "my-bot" in the search box and switching to "Live" shows "Live (10)" in the pill while only 2 live matches appear in the list. The discrepancy is likely to confuse users: the count implies what clicking the pill will show, but here it doesn't.
If the intention is to show universe totals (a valid pattern), a visual separator between query-filtered count and universe count would help — e.g. "2 / 10" or a note "2 matching". Alternatively, compute the counts after applying the search query only, so clicking "Live (2)" is self-consistent.
Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!
| <div className="scrollbar-overlay -mb-px"> | ||
| <Flex gap="1" className="w-max"> | ||
| {TABS.map((tab) => ( | ||
| <Link | ||
| key={tab.id} | ||
| to={tab.to} | ||
| params={{ idOrSlug }} | ||
| className={`shrink-0 whitespace-nowrap border-b-2 px-3 pb-2.5 text-[12.5px] no-underline ${ | ||
| tab.id === activeTab | ||
| ? "border-(--accent-9) font-medium text-gray-12" | ||
| : "border-transparent text-gray-11 hover:text-gray-12" | ||
| }`} | ||
| > | ||
| {tab.label} | ||
| </Link> | ||
| ))} | ||
| </Flex> | ||
| </div> |
There was a problem hiding this comment.
The scrollable tab bar doesn't auto-scroll to reveal the active tab when the user navigates to a URL directly (or via a link). With 8 tabs in a narrow builder pane, the active indicator for "Chat" (the last tab) is completely off-screen if the bar opens in its default position. Adding a ref on the active <Link> and calling el.scrollIntoView({ inline: 'nearest', block: 'nearest' }) in a useEffect keyed on activeTab would fix this with very little code.
1 participant
Summary
General fixes and enhancements across the agent-applications UI. Targets
agent-builder-cross-project-approvals(notmain) since the whole agent-applications feature lives on that branch — so this diff is just the UI changes.gap="1.5", which isn't a valid Radix space token (rendered ~0 gap → bunched). Bumped pill groups togap="2"across sessions, approvals, fleet approvals, and the memory files/tables toggle.<select>+ refresh no longer overflow on narrow widths (select getsmin-w-0 max-w-full). Same wrap applied to the approvals toolbars.childrenand aPanelGroup, remounting the entire/code/agentssubtree and resetting the memory pane's selected file. The content panel is now always mounted; only the dock panel + resize handle toggle. This also preserves sessions filters and scroll position across toggles.scrollbar-overlay, thin auto-hiding bar) when the pane is too narrow. Left the top-level Scouts/Applications bar alone — 2 short tabs that won't overflow, and its underline uses per-tab-mb-pxthatoverflow-y:hiddenwould clip.Files
AgentApplicationsListView.tsx— activity-first reorder + search/filter/pagingAgentBuilderDockLayout.tsx— keep content panel mounted across dock toggleAgentDetailLayout.tsx— scrollable tab barAgentSessionsPane.tsx,AgentApprovalsPane.tsx,AgentFleetApprovalsPane.tsx,AgentMemoryPane.tsx— pill spacing + responsive toolbarsTest plan
biome check(lint + format) — cleantsc --noEmitfor@posthog/ui(viaturbo typecheck, deps built) — passes🤖 Generated with Claude Code