feat(frontend/copilot): add per-turn work-done summary stats - #12257
Conversation
github-project-automation
Bot
moved this to 🆕 Needs initial review
in AutoGPT development kanban
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
WalkthroughThe PR introduces a new work-done counter feature for the copilot UI. A new Changes
Sequence DiagramsequenceDiagram
actor User
participant ChatMessagesContainer
participant getTurnMessages
participant useWorkDoneCounters
participant TurnStatsBar
participant UI as Stats Display
User->>ChatMessagesContainer: Load/receive messages
ChatMessagesContainer->>getTurnMessages: Collect all messages in turn
getTurnMessages-->>ChatMessagesContainer: Messages array for turn
ChatMessagesContainer->>useWorkDoneCounters: Process turn messages
useWorkDoneCounters->>useWorkDoneCounters: Filter assistant messages
useWorkDoneCounters->>useWorkDoneCounters: Extract tool-prefixed actions
useWorkDoneCounters->>useWorkDoneCounters: Map to categories & count
useWorkDoneCounters->>useWorkDoneCounters: Sort by count, limit to MAX
useWorkDoneCounters-->>ChatMessagesContainer: WorkDoneCounter[] array
ChatMessagesContainer->>TurnStatsBar: Pass counters via hook result
TurnStatsBar->>UI: Render counter items with labels
UI-->>User: Display stats bar
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
github-actions
Bot
added
the
conflicts
|
This pull request has conflicts with the base branch, please resolve those so we can evaluate the pull request. |
b5cfc87 to
f25cd60
Compare
github-actions
Bot
removed
the
conflicts
|
Conflicts have been resolved! 🎉 A maintainer will review the pull request shortly. |
🔍 PR Overlap DetectionThis check compares your PR against all other open PRs targeting the same branch to detect potential merge conflicts early. 🔴 Merge Conflicts DetectedThe following PRs have been tested and will have merge conflicts if merged after this PR. Consider coordinating with the authors.
Summary: 3 conflict(s), 0 medium risk, 0 low risk (out of 3 PRs with file overlap) Auto-generated on push. Ignores: |
![sentry[bot]](https://avatars.githubusercontent.com/in/12637?s=60&v=4){kind=small}
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
autogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/useWorkDoneCounters.ts (1)
1-1: RemoveuseMemohere to match frontend hook guidelines.This computation is straightforward, and the repo guideline explicitly avoids
useMemounless optimization is requested.♻️ Suggested change
-import { useMemo } from "react"; import type { UIDataTypes, UIMessage, UITools } from "ai"; @@ export function useWorkDoneCounters( messages: UIMessage<unknown, UIDataTypes, UITools>[], ) { - const counters = useMemo( - function computeCounters(): WorkDoneCounter[] { - const counts = new Map<string, number>(); - - for (const message of messages) { - if (message.role !== "assistant") continue; - - for (const part of message.parts) { - // Tool parts have types like "tool-run_agent", "tool-find_agent" - if (!part.type.startsWith("tool-")) continue; - - const toolName = part.type.replace("tool-", ""); - const category = TOOL_TO_CATEGORY[toolName]; - if (!category) continue; - - counts.set(category, (counts.get(category) ?? 0) + 1); - } - } - - // Sort by count descending, then take the top N - const sorted = Array.from(counts.entries()) - .map(function toCounter([label, count]) { - return { label, count }; - }) - .sort(function byCountDesc(a, b) { - return b.count - a.count; - }) - .slice(0, MAX_COUNTERS); - - return sorted; - }, - [messages], - ); + const counts = new Map<string, number>(); + + for (const message of messages) { + if (message.role !== "assistant") continue; + + for (const part of message.parts) { + if (!part.type.startsWith("tool-")) continue; + + const toolName = part.type.replace("tool-", ""); + const category = TOOL_TO_CATEGORY[toolName]; + if (!category) continue; + + counts.set(category, (counts.get(category) ?? 0) + 1); + } + } + + const counters = Array.from(counts.entries()) + .map(function toCounter([label, count]) { + return { label, count }; + }) + .sort(function byCountDesc(a, b) { + return b.count - a.count; + }) + .slice(0, MAX_COUNTERS); return { counters }; }As per coding guidelines, "Do not use
useCallbackoruseMemounless asked to optimize a specific function".Also applies to: 37-69
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@autogpt_platform/frontend/src/app/`(platform)/copilot/components/JobStatsBar/useWorkDoneCounters.ts at line 1, Remove the unnecessary useMemo usage in the useWorkDoneCounters hook: delete the import of useMemo and refactor the computed values returned by useWorkDoneCounters so they are calculated directly (synchronously) instead of wrapped in useMemo; update any variables or expressions inside the hook that currently rely on useMemo to simple local constants and return them directly from the function (refer to the useWorkDoneCounters hook and the useMemo call within it).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In
`@autogpt_platform/frontend/src/app/`(platform)/copilot/components/JobStatsBar/useJobTimer.ts:
- Around line 33-37: The effect that handles isActive should set a state flag
instead of only mutating startTimeRef.current so the component re-renders
immediately on start; in useJobTimer.ts update the effect that checks isActive
to call setHasStarted(true) when starting (in the same branch where
startTimeRef.current = Date.now() and setElapsedSeconds(0) are called) and call
setHasStarted(false) when stopping/resetting, and ensure hasStarted is created
with useState and used in the component render logic so the bar appears
immediately without waiting for the first interval tick.
---
Nitpick comments:
In
`@autogpt_platform/frontend/src/app/`(platform)/copilot/components/JobStatsBar/useWorkDoneCounters.ts:
- Line 1: Remove the unnecessary useMemo usage in the useWorkDoneCounters hook:
delete the import of useMemo and refactor the computed values returned by
useWorkDoneCounters so they are calculated directly (synchronously) instead of
wrapped in useMemo; update any variables or expressions inside the hook that
currently rely on useMemo to simple local constants and return them directly
from the function (refer to the useWorkDoneCounters hook and the useMemo call
within it).
ℹ️ Review info
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (4)
autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatContainer/ChatContainer.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/JobStatsBar.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/useJobTimer.tsautogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/useWorkDoneCounters.ts
📜 Review details
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
- GitHub Check: Seer Code Review
- GitHub Check: types
- GitHub Check: end-to-end tests
- GitHub Check: Check PR Status
- GitHub Check: Analyze (python)
🧰 Additional context used
📓 Path-based instructions (14)
autogpt_platform/frontend/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
autogpt_platform/frontend/**/*.{ts,tsx,js,jsx}: Use Node.js 21+ with pnpm package manager for frontend development
Always run 'pnpm format' for formatting and linting code in frontend development
autogpt_platform/frontend/**/*.{ts,tsx,js,jsx}: Runpnpm formatto auto-fix formatting issues before completing work
Runpnpm lintto check for lint errors and fix any that appear before completing work
Files:
autogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/useWorkDoneCounters.tsautogpt_platform/frontend/src/app/(platform)/copilot/components/ChatContainer/ChatContainer.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/useJobTimer.tsautogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/JobStatsBar.tsx
autogpt_platform/frontend/**/*.{tsx,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
autogpt_platform/frontend/**/*.{tsx,ts}: Use function declarations for components and handlers (not arrow functions) in React components
Only use arrow functions for small inline lambdas (map, filter, etc.) in React components
Use PascalCase for component names and camelCase with 'use' prefix for hook names in React
Use Tailwind CSS utilities only for styling in frontend components
Use design system components from 'src/components/' (atoms, molecules, organisms) in frontend development
Never use 'src/components/legacy/' in frontend code
Only use Phosphor Icons (@phosphor-icons/react) for icons in frontend components
Use generated API hooks from '@/app/api/generated/endpoints/' instead of deprecated 'BackendAPI' or 'src/lib/autogpt-server-api/'
Use React Query for server state (via generated hooks) in frontend development
Default to client components ('use client') in Next.js; only use server components for SEO or extreme TTFB needs
Use '' component for rendering errors in frontend UI; use toast notifications for mutation errors; use 'Sentry.captureException()' for manual exceptions
Separate render logic from data/behavior in React components; keep comments minimal (code should be self-documenting)
Files:
autogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/useWorkDoneCounters.tsautogpt_platform/frontend/src/app/(platform)/copilot/components/ChatContainer/ChatContainer.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/useJobTimer.tsautogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/JobStatsBar.tsx
autogpt_platform/frontend/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
autogpt_platform/frontend/**/*.{ts,tsx}: No barrel files or 'index.ts' re-exports in frontend code
Regenerate API hooks with 'pnpm generate:api' after backend OpenAPI spec changes in frontend developmentRun
pnpm typesto check for type errors and fix any that appear before completing work
Files:
autogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/useWorkDoneCounters.tsautogpt_platform/frontend/src/app/(platform)/copilot/components/ChatContainer/ChatContainer.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/useJobTimer.tsautogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/JobStatsBar.tsx
autogpt_platform/frontend/**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
autogpt_platform/frontend/**/*.{js,jsx,ts,tsx}: Format frontend code usingpnpm format
Never use components fromsrc/components/__legacy__/*
Files:
autogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/useWorkDoneCounters.tsautogpt_platform/frontend/src/app/(platform)/copilot/components/ChatContainer/ChatContainer.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/useJobTimer.tsautogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/JobStatsBar.tsx
autogpt_platform/frontend/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
autogpt_platform/frontend/src/**/*.{ts,tsx}: Structure components asComponentName/ComponentName.tsx+useComponentName.ts+helpers.tsand use design system components fromsrc/components/(atoms, molecules, organisms)
Use generated API hooks from@/app/api/__generated__/endpoints/with patternuse{Method}{Version}{OperationName}and regenerate withpnpm generate:api
Use function declarations (not arrow functions) for components and handlers
Separate render logic from business logic with component.tsx + useComponent.ts + helpers.ts structure
Colocate state when possible, avoid creating large components, use sub-components in local/componentsfolder
Avoid large hooks, abstract logic intohelpers.tsfiles when sensible
Use arrow functions only for callbacks, not for component declarations
Avoid comments at all times unless the code is very complex
Do not useuseCallbackoruseMemounless asked to optimize a given function
autogpt_platform/frontend/src/**/*.{ts,tsx}: Use function declarations (not arrow functions) for components and handlers
Use type-safe generated API hooks via Orval + React Query for data fetching
Use React Query for server state management and co-locate UI state in components/hooks
Separate render logic (.tsx) from business logic (use*.tshooks)
Use only shadcn/ui (Radix UI primitives) with Tailwind CSS for UI components
Use Phosphor Icons only for all icon implementations
Use ErrorCard component for render errors, toast for mutations, and Sentry for exceptions
Use design system components fromsrc/components/(atoms, molecules, organisms)
Never usesrc/components/__legacy__/*components
Use generated API hooks from@/app/api/__generated__/endpoints/with patternuse{Method}{Version}{OperationName}
Use Tailwind CSS only for styling with design tokens
Do not useuseCallbackoruseMemounless asked to optimize a specific function
Never type withanyunless a variable/attribute can actually be of any type
Files:
autogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/useWorkDoneCounters.tsautogpt_platform/frontend/src/app/(platform)/copilot/components/ChatContainer/ChatContainer.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/useJobTimer.tsautogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/JobStatsBar.tsx
autogpt_platform/frontend/**/*.{js,jsx,ts,tsx,css}
📄 CodeRabbit inference engine (AGENTS.md)
Use Tailwind CSS only for styling, use design tokens, and use Phosphor Icons only
Files:
autogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/useWorkDoneCounters.tsautogpt_platform/frontend/src/app/(platform)/copilot/components/ChatContainer/ChatContainer.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/useJobTimer.tsautogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/JobStatsBar.tsx
autogpt_platform/frontend/src/**/*.ts
📄 CodeRabbit inference engine (AGENTS.md)
Do not type hook returns, let Typescript infer as much as possible
Files:
autogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/useWorkDoneCounters.tsautogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/useJobTimer.ts
autogpt_platform/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Never type with
any, if no types available useunknown
Files:
autogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/useWorkDoneCounters.tsautogpt_platform/frontend/src/app/(platform)/copilot/components/ChatContainer/ChatContainer.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/useJobTimer.tsautogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/JobStatsBar.tsx
autogpt_platform/frontend/src/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (autogpt_platform/frontend/CLAUDE.md)
Fully capitalize acronyms in symbols, e.g.
graphID,useBackendAPI
Files:
autogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/useWorkDoneCounters.tsautogpt_platform/frontend/src/app/(platform)/copilot/components/ChatContainer/ChatContainer.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/useJobTimer.tsautogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/JobStatsBar.tsx
autogpt_platform/frontend/src/**/use*.ts
📄 CodeRabbit inference engine (autogpt_platform/frontend/CLAUDE.md)
autogpt_platform/frontend/src/**/use*.ts: Extract component logic into custom hooks grouped by concern, with each hook in its own.tsfile
Do not type hook returns; let TypeScript infer types as much as possible
Files:
autogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/useWorkDoneCounters.tsautogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/useJobTimer.ts
autogpt_platform/frontend/src/**/components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (autogpt_platform/frontend/CLAUDE.md)
Put sub-components in a local
components/folder within the feature directory
Files:
autogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/useWorkDoneCounters.tsautogpt_platform/frontend/src/app/(platform)/copilot/components/ChatContainer/ChatContainer.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/useJobTimer.tsautogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/JobStatsBar.tsx
autogpt_platform/frontend/src/**/[A-Z]*/**/*.{ts,tsx}
📄 CodeRabbit inference engine (autogpt_platform/frontend/CLAUDE.md)
Structure components as ComponentName/ComponentName.tsx + useComponentName.ts + helpers.ts
Files:
autogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/useWorkDoneCounters.tsautogpt_platform/frontend/src/app/(platform)/copilot/components/ChatContainer/ChatContainer.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/useJobTimer.tsautogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/JobStatsBar.tsx
autogpt_platform/frontend/src/**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
Component props should be
interface Props { ... }(not exported) unless the interface needs to be used outside the componentUse
type Props = { ... }(not exported) for component props unless used outside the component
Files:
autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatContainer/ChatContainer.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/JobStatsBar.tsx
autogpt_platform/frontend/src/app/(platform)/**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
If adding protected frontend routes, update
frontend/lib/supabase/middleware.ts
Files:
autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatContainer/ChatContainer.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/JobStatsBar.tsx
🧠 Learnings (4)
📚 Learning: 2026-02-04T16:49:42.490Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2026-02-04T16:49:42.490Z
Learning: Applies to autogpt_platform/frontend/**/*.{tsx,ts} : Use PascalCase for component names and camelCase with 'use' prefix for hook names in React
Applied to files:
autogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/useWorkDoneCounters.tsautogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/useJobTimer.ts
📚 Learning: 2026-02-26T10:12:58.845Z
Learnt from: 0ubbe
Repo: Significant-Gravitas/AutoGPT PR: 12207
File: autogpt_platform/frontend/src/components/ai-elements/conversation.tsx:0-0
Timestamp: 2026-02-26T10:12:58.845Z
Learning: Guideline: Do not apply dark mode CSS classes (e.g., dark:text-*) to copilot UI components until dark mode support is implemented. Applies to all copilot-related components (paths containing /copilot/). When reviewing, search for dark:* class names within copilot components and refactor to use conditional class sets or feature-flag gates, ensuring no dark-mode styles are present in the code paths that render copilot UI unless dark mode support is officially enabled.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatContainer/ChatContainer.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/JobStatsBar.tsx
📚 Learning: 2026-02-27T10:45:49.499Z
Learnt from: majdyz
Repo: Significant-Gravitas/AutoGPT PR: 12213
File: autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunMCPTool/helpers.tsx:23-24
Timestamp: 2026-02-27T10:45:49.499Z
Learning: Prefer using generated OpenAPI types from '@/app/api/__generated__/' for payloads defined in openapi.json (e.g., MCPToolsDiscoveredResponse, MCPToolOutputResponse). Use inline TypeScript interfaces only for payloads that are SSE-stream-only and not exposed via OpenAPI. Apply this pattern to frontend tool components (e.g., RunMCPTool) and related areas where similar SSE/openapi-discrepancies occur; avoid re-implementing types when a generated type is available.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatContainer/ChatContainer.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/JobStatsBar.tsx
📚 Learning: 2026-02-04T16:49:42.490Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2026-02-04T16:49:42.490Z
Learning: Applies to autogpt_platform/frontend/**/*.{tsx,ts} : Separate render logic from data/behavior in React components; keep comments minimal (code should be self-documenting)
Applied to files:
autogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/JobStatsBar.tsx
🧬 Code graph analysis (2)
autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatContainer/ChatContainer.tsx (1)
autogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/JobStatsBar.tsx (1)
JobStatsBar(13-83)
autogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/JobStatsBar.tsx (2)
autogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/useJobTimer.ts (1)
useJobTimer(26-73)autogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/useWorkDoneCounters.ts (1)
useWorkDoneCounters(34-72)
🔇 Additional comments (2)
autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatContainer/ChatContainer.tsx (1)
61-61: Good placement for the new stats bar.Rendering
JobStatsBarbetween messages and input keeps the feature scoped to chat flow without coupling it into message rendering internals.autogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/JobStatsBar.tsx (1)
13-83: Nice separation of concerns in this component.
JobStatsBarstays render-focused and delegates behavior touseJobTimer/useWorkDoneCounters, which keeps this UI easy to reason about.
25a4c83 to
19123a7
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In
`@autogpt_platform/frontend/src/app/`(platform)/copilot/components/JobStatsBar/useWorkDoneCounters.ts:
- Around line 28-33: The pluralize function emits incorrect forms for past-tense
labels like "agent created" (producing "agent createds"); update either the
source category labels to noun-first (e.g., "agents created", "agents edited",
"agents scheduled") or enhance the pluralize function to detect "X Y" patterns
where Y is a past-tense verb and pluralize the noun (e.g., when label matches
/^(\w+)\s+(created|edited|scheduled)$/i, pluralize the first capture group and
return "<plural-noun> <verb>"); modify the pluralize function (and any callers
that pass labels) so labels are grammatically correct for count !== 1 while
leaving single-word rules (like "search" -> "searches") intact.
ℹ️ Review info
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (3)
autogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/JobStatsBar.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/useJobTimer.tsautogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/useWorkDoneCounters.ts
🚧 Files skipped from review as they are similar to previous changes (1)
- autogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/JobStatsBar.tsx
📜 Review details
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: Seer Code Review
- GitHub Check: types
- GitHub Check: end-to-end tests
- GitHub Check: Check PR Status
🧰 Additional context used
📓 Path-based instructions (12)
autogpt_platform/frontend/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
autogpt_platform/frontend/**/*.{ts,tsx,js,jsx}: Use Node.js 21+ with pnpm package manager for frontend development
Always run 'pnpm format' for formatting and linting code in frontend development
autogpt_platform/frontend/**/*.{ts,tsx,js,jsx}: Runpnpm formatto auto-fix formatting issues before completing work
Runpnpm lintto check for lint errors and fix any that appear before completing work
Files:
autogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/useJobTimer.tsautogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/useWorkDoneCounters.ts
autogpt_platform/frontend/**/*.{tsx,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
autogpt_platform/frontend/**/*.{tsx,ts}: Use function declarations for components and handlers (not arrow functions) in React components
Only use arrow functions for small inline lambdas (map, filter, etc.) in React components
Use PascalCase for component names and camelCase with 'use' prefix for hook names in React
Use Tailwind CSS utilities only for styling in frontend components
Use design system components from 'src/components/' (atoms, molecules, organisms) in frontend development
Never use 'src/components/legacy/' in frontend code
Only use Phosphor Icons (@phosphor-icons/react) for icons in frontend components
Use generated API hooks from '@/app/api/generated/endpoints/' instead of deprecated 'BackendAPI' or 'src/lib/autogpt-server-api/'
Use React Query for server state (via generated hooks) in frontend development
Default to client components ('use client') in Next.js; only use server components for SEO or extreme TTFB needs
Use '' component for rendering errors in frontend UI; use toast notifications for mutation errors; use 'Sentry.captureException()' for manual exceptions
Separate render logic from data/behavior in React components; keep comments minimal (code should be self-documenting)
Files:
autogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/useJobTimer.tsautogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/useWorkDoneCounters.ts
autogpt_platform/frontend/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
autogpt_platform/frontend/**/*.{ts,tsx}: No barrel files or 'index.ts' re-exports in frontend code
Regenerate API hooks with 'pnpm generate:api' after backend OpenAPI spec changes in frontend developmentRun
pnpm typesto check for type errors and fix any that appear before completing work
Files:
autogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/useJobTimer.tsautogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/useWorkDoneCounters.ts
autogpt_platform/frontend/**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
autogpt_platform/frontend/**/*.{js,jsx,ts,tsx}: Format frontend code usingpnpm format
Never use components fromsrc/components/__legacy__/*
Files:
autogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/useJobTimer.tsautogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/useWorkDoneCounters.ts
autogpt_platform/frontend/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
autogpt_platform/frontend/src/**/*.{ts,tsx}: Structure components asComponentName/ComponentName.tsx+useComponentName.ts+helpers.tsand use design system components fromsrc/components/(atoms, molecules, organisms)
Use generated API hooks from@/app/api/__generated__/endpoints/with patternuse{Method}{Version}{OperationName}and regenerate withpnpm generate:api
Use function declarations (not arrow functions) for components and handlers
Separate render logic from business logic with component.tsx + useComponent.ts + helpers.ts structure
Colocate state when possible, avoid creating large components, use sub-components in local/componentsfolder
Avoid large hooks, abstract logic intohelpers.tsfiles when sensible
Use arrow functions only for callbacks, not for component declarations
Avoid comments at all times unless the code is very complex
Do not useuseCallbackoruseMemounless asked to optimize a given function
autogpt_platform/frontend/src/**/*.{ts,tsx}: Use function declarations (not arrow functions) for components and handlers
Use type-safe generated API hooks via Orval + React Query for data fetching
Use React Query for server state management and co-locate UI state in components/hooks
Separate render logic (.tsx) from business logic (use*.tshooks)
Use only shadcn/ui (Radix UI primitives) with Tailwind CSS for UI components
Use Phosphor Icons only for all icon implementations
Use ErrorCard component for render errors, toast for mutations, and Sentry for exceptions
Use design system components fromsrc/components/(atoms, molecules, organisms)
Never usesrc/components/__legacy__/*components
Use generated API hooks from@/app/api/__generated__/endpoints/with patternuse{Method}{Version}{OperationName}
Use Tailwind CSS only for styling with design tokens
Do not useuseCallbackoruseMemounless asked to optimize a specific function
Never type withanyunless a variable/attribute can actually be of any type
Files:
autogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/useJobTimer.tsautogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/useWorkDoneCounters.ts
autogpt_platform/frontend/**/*.{js,jsx,ts,tsx,css}
📄 CodeRabbit inference engine (AGENTS.md)
Use Tailwind CSS only for styling, use design tokens, and use Phosphor Icons only
Files:
autogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/useJobTimer.tsautogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/useWorkDoneCounters.ts
autogpt_platform/frontend/src/**/*.ts
📄 CodeRabbit inference engine (AGENTS.md)
Do not type hook returns, let Typescript infer as much as possible
Files:
autogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/useJobTimer.tsautogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/useWorkDoneCounters.ts
autogpt_platform/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Never type with
any, if no types available useunknown
Files:
autogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/useJobTimer.tsautogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/useWorkDoneCounters.ts
autogpt_platform/frontend/src/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (autogpt_platform/frontend/CLAUDE.md)
Fully capitalize acronyms in symbols, e.g.
graphID,useBackendAPI
Files:
autogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/useJobTimer.tsautogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/useWorkDoneCounters.ts
autogpt_platform/frontend/src/**/use*.ts
📄 CodeRabbit inference engine (autogpt_platform/frontend/CLAUDE.md)
autogpt_platform/frontend/src/**/use*.ts: Extract component logic into custom hooks grouped by concern, with each hook in its own.tsfile
Do not type hook returns; let TypeScript infer types as much as possible
Files:
autogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/useJobTimer.tsautogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/useWorkDoneCounters.ts
autogpt_platform/frontend/src/**/components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (autogpt_platform/frontend/CLAUDE.md)
Put sub-components in a local
components/folder within the feature directory
Files:
autogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/useJobTimer.tsautogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/useWorkDoneCounters.ts
autogpt_platform/frontend/src/**/[A-Z]*/**/*.{ts,tsx}
📄 CodeRabbit inference engine (autogpt_platform/frontend/CLAUDE.md)
Structure components as ComponentName/ComponentName.tsx + useComponentName.ts + helpers.ts
Files:
autogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/useJobTimer.tsautogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/useWorkDoneCounters.ts
🧠 Learnings (7)
📚 Learning: 2026-02-04T16:49:42.490Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2026-02-04T16:49:42.490Z
Learning: Applies to autogpt_platform/frontend/**/*.{tsx,ts} : Use PascalCase for component names and camelCase with 'use' prefix for hook names in React
Applied to files:
autogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/useJobTimer.tsautogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/useWorkDoneCounters.ts
📚 Learning: 2026-02-04T16:49:42.490Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2026-02-04T16:49:42.490Z
Learning: Applies to autogpt_platform/frontend/**/*.{tsx,ts} : Separate render logic from data/behavior in React components; keep comments minimal (code should be self-documenting)
Applied to files:
autogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/useJobTimer.ts
📚 Learning: 2026-02-26T21:29:44.105Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/frontend/CLAUDE.md:0-0
Timestamp: 2026-02-26T21:29:44.105Z
Learning: Applies to autogpt_platform/frontend/src/**/use*.ts : Extract component logic into custom hooks grouped by concern, with each hook in its own `.ts` file
Applied to files:
autogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/useWorkDoneCounters.ts
📚 Learning: 2026-02-04T16:50:51.495Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-02-04T16:50:51.495Z
Learning: Applies to autogpt_platform/frontend/src/**/*.{ts,tsx} : Avoid large hooks, abstract logic into `helpers.ts` files when sensible
Applied to files:
autogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/useWorkDoneCounters.ts
📚 Learning: 2026-02-26T21:29:44.105Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/frontend/CLAUDE.md:0-0
Timestamp: 2026-02-26T21:29:44.105Z
Learning: Applies to autogpt_platform/frontend/src/**/use*.ts : Do not type hook returns; let TypeScript infer types as much as possible
Applied to files:
autogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/useWorkDoneCounters.ts
📚 Learning: 2026-02-26T21:29:44.105Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/frontend/CLAUDE.md:0-0
Timestamp: 2026-02-26T21:29:44.105Z
Learning: Applies to autogpt_platform/frontend/src/**/*.{ts,tsx} : Use generated API hooks from `@/app/api/__generated__/endpoints/` with pattern `use{Method}{Version}{OperationName}`
Applied to files:
autogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/useWorkDoneCounters.ts
📚 Learning: 2026-02-26T21:29:44.105Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/frontend/CLAUDE.md:0-0
Timestamp: 2026-02-26T21:29:44.105Z
Learning: Applies to autogpt_platform/frontend/src/**/*.{ts,tsx} : Separate render logic (`.tsx`) from business logic (`use*.ts` hooks)
Applied to files:
autogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/useWorkDoneCounters.ts
🔇 Additional comments (2)
autogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/useJobTimer.ts (1)
26-75: LGTM!The hook correctly manages timer state using
useStatefor bothelapsedSecondsandhasStarted, ensuring immediate re-renders when the timer starts. The interval cleanup is properly handled in both the effect body (whenisActivebecomes false) and the cleanup function. The previous review concern abouthasStartedhas been addressed.autogpt_platform/frontend/src/app/(platform)/copilot/components/JobStatsBar/useWorkDoneCounters.ts (1)
40-71: LGTM on hook structure and logic.The hook correctly iterates assistant messages, extracts tool parts, aggregates counts by category, and returns the top N counters sorted by count. The approach of inline computation without
useMemoaligns with the project's conventions.
0ubbe
changed the title
0ubbe
changed the title
…mary stats Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Use useState for hasStarted instead of ref read during render - Add conditional pluralization for work-done counter labels - Remove useMemo per frontend conventions - Add ARIA attributes for screen reader support Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
github-actions
Bot
added
the
conflicts
|
This pull request has conflicts with the base branch, please resolve those so we can evaluate the pull request. |
…-add-live-job-duration-timer-and-work-done-summary-stats-to
github-actions
Bot
removed
the
conflicts
|
Conflicts have been resolved! 🎉 A maintainer will review the pull request shortly. |
…ntions - Remove comments that restate what the code already expresses - Rename useWorkDoneCounters to getWorkDoneCounters (not a hook) - Strip verbose JSDoc and grouping comments from TOOL_TO_CATEGORY map - Remove redundant prop JSDoc in TurnStatsBar Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
github-project-automation
Bot
moved this from 🆕 Needs initial review
to 👍🏼 Mergeable
in AutoGPT development kanban
github-actions
Bot
added
the
conflicts
|
This pull request has conflicts with the base branch, please resolve those so we can evaluate the pull request. |
- Resolve merge conflict in ChatMessagesContainer, integrating both TurnStatsBar and AssistantMessageActions from dev - Address Zamil's review comments: - Use findLastIndex/findIndex instead of while loops in getTurnMessages - Add bounds safety check (messageIndex <= messages.length - 1) - Extract "tool-" prefix to shared TOOL_PART_PREFIX constant Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
github-actions
Bot
removed
the
conflicts
|
Conflicts have been resolved! 🎉 A maintainer will review the pull request shortly. |
…timer-and-work-done-summary-stats-to
…timer-and-work-done-summary-stats-to
…timer-and-work-done-summary-stats-to
github-project-automation
Bot
moved this from 👍🏼 Mergeable
to ✅ Done
in AutoGPT development kanban
## Summary - Adds per-turn work-done counters (e.g. "3 searches", "1 agent run") shown as plain text on the final assistant message of each user/assistant interaction pair - Counters aggregate tool calls by category (searches, agents run, blocks run, agents created/edited, agents scheduled) - Copy and TTS actions now appear only on the final assistant message per turn, with text aggregated from all assistant messages in that turn - Removes the global JobStatsBar above the chat input Resolves: SECRT-2026 ## Test plan - [ ] Work-done counters appear only on the last assistant message of each turn (not on intermediate assistant messages) - [ ] Counters increment correctly as tool call parts appear in messages - [ ] Internal operations (add_understanding, search_docs, get_doc_page, find_block) are NOT counted - [ ] Max 3 counter categories shown, sorted by volume - [ ] Copy/TTS actions appear only on the final assistant message per turn - [ ] Copy/TTS aggregate text from all assistant messages in the turn - [ ] No counters or actions shown while streaming is still in progress - [ ] No type errors, lint errors, or format issues introduced Generated with [Claude Code](https://claude.com/claude-code) --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
3 participants
Summary
Resolves: SECRT-2026
Test plan
Generated with Claude Code