feat(monitoring): redesign monitoring page — overview cards, Top Agents/Automations, Threads tab#2953
Merged
Merged
Conversation
Contributor
🧪 BenchmarkShould we run the Virtual MCP strategy benchmark for this PR? React with 👍 to run the benchmark.
Benchmark will run on the next push after you react. |
Contributor
Release OptionsSuggested: Minor ( React with an emoji to override the release type:
Current version:
|
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
…igma Update Card component to remove default hover and lighten title weight. Rebuild monitoring overview with MonitoringMetricCard pattern: Tool Calls (full width), Latency + Errors (half width), Top Tools + Top Agents, AI Usage section with model leaderboards. Update header with Live streaming indicator and inline tabs/controls. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…conversation view Adds a new Threads tab to the Monitor page showing a paginated list of threads with their associated agent, model (resolved from decopilot monitoring logs), user, status, and token usage (in/out/total). Clicking a thread opens a slide-over panel with the full conversation rendered using the existing chat UI components in read-only mode. Made-with: Cursor
Made-with: Cursor
… tab Made-with: Cursor
…onsistent table header to Threads tab - Search by title (backend ILIKE) - Filter by status, user, agent (all backend), model (client-side from logs) - FiltersPopover matches Audit tab visual style - Fix empty threads bug: updated_at is TEXT so compare as ISO string, not Date - Table headers now match Audit tab style (uppercase monospace muted) Made-with: Cursor
- Use PersistedRunConfigSchema.passthrough() for run_config in ThreadEntitySchema instead of loose record type - Replace ThreadMessagesContent with self-contained ThreadConversationPanel that owns its header, eliminating the onModelResolved-during-render anti-pattern - Paginate thread messages (100/page with infinite scroll) to support long threads - Paginate decopilot monitoring logs internally until hasMore=false to avoid 500-log truncation for model/usage aggregation - Debounce search input (300ms) to avoid firing a query on every keystroke - Switch threads list and model logs queries from useSuspenseInfiniteQuery/useSuspenseQuery to useInfiniteQuery/useQuery so ThreadsTabContent never suspends (fixing search input focus loss) - Hide table header when threads list is empty or loading Made-with: Cursor
…atibility PersistedRunConfigSchema.passthrough() infers required fields (models, agent, temperature, toolApprovalLevel) that are incompatible with the Kysely storage type Thread.run_config: Record<string, unknown> | null, breaking all thread tool handlers. Revert to z.record() with a comment directing callers to use PersistedRunConfigSchema for typed access at the point of use. Made-with: Cursor
The column was added by migration 052 but missing from the TypeScript types, causing TS2345 errors in threads.ts. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
MessageAssistant used useChatStream() which throws when rendered outside ActiveTaskProvider. Threads in the monitoring view display read-only historical messages with no active stream context, so isRunInProgress now safely defaults to false via useOptionalChatStream().
Migration 057 already replaced agent_ids with virtual_mcp_id but leftover references remained in types, storage queries, schema, and monitoring UI. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…reads width - Reduce top padding in overview tab (py-6 → pt-2 pb-6) to close the gap between header controls and the first card - Wrap audit tab content in max-w-[1200px] container with px-4/md:px-10 to match the members page table layout - Apply same container constraint to threads tab Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Select component: change default height from h-10 to h-8 (32px) to match button default size; xs size from h-7 to h-6 - Header controls: remove size="sm" overrides so buttons use default h-8 (32px) consistently - Reduce header-to-content gap (gap-4 → gap-3) - Move search to shared header area below tabs for audit/threads - Convert audit from accordion (inline expand) to Sheet (slide-over panel) matching the threads pattern - Remove ThreadFiltersPopover from threads tab - Remove chevron expand column from LogRow, simplify to click-to-select - Both audit and threads now use the same interaction: click row → Sheet Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Card component (MonitoringMetricCard): - gap-8 (32px) between header and content sections - Title: text-sm font-normal text-foreground/70 - Value: text-4xl font-normal (36px, weight 400) - Content children: gap-6 (24px) between chart and table Leaderboard tables (Connection, Tool, Model): - Row height: h-10 (40px) with border-b border-border/50 - Row padding: px-3 (12px) - Icon: 24x24 with border, shadow-sm, rounded-md - Name: text-sm text-muted-foreground - Percentage: text-sm text-foreground/30 (opacity 0.3) - Count: text-sm text-foreground font-normal (not semibold) - No gap between rows, only 0.5px border separator - "See all": px-4, text-sm text-muted-foreground + arrow icon Select trigger: w-[120px] matching Figma spec Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Move SearchInput from a standalone div between header and content into the Page.Body container, below the tabs row. Uses w-full md:w-[375px] matching the Members page search pattern. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Remove size="sm" and h-7 override from the trigger button so it uses the default h-8 (32px) height, matching all other header controls. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Change Page.Body from pb-0 to !pb-3 so there's a consistent small gap between the search input and the table content below. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Bump flex gap from gap-3 to gap-5 (20px) for better spacing between title, tabs row, and search input. Also pb-3 → pb-4. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Overview skeleton: use SkeletonCard component matching the actual card structure (gap-8, proper title/value sizes, border-b table rows with icon placeholders, "See all" row). Mirrors the full overview layout with full-width and half-width card rows. Table skeleton: wrap in max-w-[1200px] container matching the actual audit/threads table layout. Match row height (h-14) and column structure (no expand chevron column). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The search was outside the gap-5 div, so the gap wasn't applying between tabs and search. Now it's a sibling of the title and tabs row inside the same flex-col gap-5 container. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Connection rows in leaderboard tables are now clickable — navigate to the connection detail page via getConnectionSlug - Tool rows navigate to their parent connection detail page - "See all" links navigate to the Audit tab - All clickable rows have hover:bg-accent/50 transition - AI Usage section: added border-t divider separating it from tool call metrics; restructured from full-width + 2-col to a single 3-column row (AI Calls, AI Latency, AI Errors) with shorter charts - Updated skeleton to match new 3-column AI layout Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The percentage was dividing the metric value (e.g. avgDurationMs=117) by total (e.g. totalCalls=2) giving nonsensical results like 5825%. Now per mode: - requests: calls / totalCalls (proportion of traffic) - latency: calls / totalCalls (proportion of traffic) + latency value - errors: errorRate % + formatted metric value Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…eader Top Tools / Top Connections: - Replaced MonitoringMetricCard (with giant hero number) with simple Card containers — just a label + the ranked list - Renamed "Top Agents Used" to "Top Connections" (more accurate) - Reduced gap-8 to gap-4 for compact list style AI Usage divider: - Replaced bare border-t with a centered section header: horizontal lines + "AI USAGE" label in uppercase tracking-wider - Added pt-4 for breathing room above Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…yout - Remove redundant "Top Connections" card (already shown in Tool Calls) - Add "Top Agents" card listing active virtual MCPs with icons, each clickable to navigate to the agent page; "See all" goes to Threads tab - New AgentLeaderboardTable component using IntegrationIcon and virtualMcps data - Pass virtualMcps prop through to OverviewTabContent Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Remove Top Tools card and ToolLeaderboardTable (tool data already visible in the Tool Calls connection breakdown) - Remove useMonitoringTopTools hook usage and analyticsDateRange - Top Agents card: uses MonitoringMetricCard with chart + agent list, shows active virtual MCPs count as hero metric - Top Automations card: new AutomationsCard component using useAutomationsList hook, shows automation name, trigger count, active/inactive status; clickable rows navigate to the agent page - Both cards in a 2-column layout with charts Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…pattern Both cards now match the Tool Calls card structure: big hero metric + chart + ranked leaderboard table with the same row styling. Agent Sessions: total calls metric, chart, agent leaderboard Automation Runs: active count metric, chart, automation leaderboard showing % share of triggers + trigger count per automation Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…pages Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
viktormarinho
force-pushed
the
rafavalls/monitoring-redesign
branch
from
ca39c6c to
4a70a77
Compare
… local postgres docs Merge the two redundant virtual_mcp_id WHERE clauses in thread queries so they never conflict. Also add CLAUDE.md instructions for querying the embedded postgres during development. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
bun.lock had textual conflicts from dependency changes on both sides. Resolved by taking main's version and running bun install to reconcile. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Delete analytics-top-tools.tsx (unused file) and its useMonitoringTopTools hook - Delete home-grid-cell.tsx (no remaining consumers after skeleton removal) - Remove StackedConnectionChart, MonitoringStatsRowSkeleton (dead code) - Un-export internal helpers in utils.ts (NICE_INTERVALS, intervalToMs, etc.) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…ckend The backend only accepts singular agentId/userId strings, but the UI allowed multi-select. Cap both filters to one value so the UI matches the API capability. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What is this contribution about?
Redesigns the monitoring page with a new card-based layout matching Figma specs. Introduces top-level overview stats cards, replaces Top Connections/Tools leaderboards with Top Agents and Top Automations, adds a Threads tab with search/filter/conversation view, and makes Agent Sessions and Automation Runs follow the same pattern as Tool Calls. Clickable rows navigate to detail views.
Screenshots/Demonstration
How to Test
Migration Notes
N/A
Review Checklist
Summary by cubic
Redesigned the Monitoring page with Figma‑aligned overview cards and a new Threads tab to browse agent/model/user activity, usage, and read‑only conversations. Unified Audit/Threads UX (click row → slide‑over) and upgraded charts; stats
intervalnow accepts flexible strings like5mor2h.New Features
startDate,endDate,search,status,agentId; router/query keys for thethreadstab.Refactors & Bug Fixes
useOptionalChatStream; hide headers while loading; limit agent/user filters to single‑select to match backend.Thread.run_configtoz.record; removed staleagent_idsin favor ofvirtual_mcp_id.AGENTS.md; removed unused analytics/home components and dead code; un‑exported internal helpers; removed duplicatetypescriptinapps/docs; reconciledbun.lock.Written for commit 47c620d. Summary will update on new commits.