fix(frontend): Display run cost correctly - convert cents to dollars run detail components (#10997)

Fixed costs being displayed as raw cent values instead of properly
formatted dollar amounts in the frontend monitoring and agent run detail
pages.

## Problem
The platform was showing costs incorrectly in two key areas:
- **Monitoring page**: Total cost displayed as raw cents with incorrect
"seconds" unit (e.g., "Total cost: 150 seconds")
- **Agent run details**: Individual run costs displayed as raw cents
(e.g., "Cost: $150" for what should be $1.50)

## Solution
Updated the affected components to properly convert cents to dollars
with consistent formatting:

**FlowRunsStatus.tsx** - Fixed total cost calculation and display:
```tsx
// Before
{filteredFlowRuns.reduce((total, run) => total + (run.stats?.cost ?? 0), 0)} seconds

// After  
${(filteredFlowRuns.reduce((total, run) => total + (run.stats?.cost ?? 0), 0) / 100).toFixed(2)}
```

**RunDetailHeader.tsx** - Fixed individual run cost display:
```tsx
// Before
Cost: ${run.stats.cost}

// After
Cost: ${(run.stats.cost / 100).toFixed(2)}
```

## Validation
- Backend correctly stores costs in cents (verified in models and
database schemas)
- Email notification templates already handle the conversion properly
using `(credits_used|float)/100`
- Other components use the existing `formatCredits()` utility which
correctly converts cents to dollars
- No security vulnerabilities introduced (CodeQL verification passed)
- All linting and formatting checks pass

The fix ensures users now see accurate dollar amounts (e.g., $1.50
instead of $150 or "150 seconds") across the platform's cost reporting
interfaces.

![Cost Display Fix
Demo](https://github.com/user-attachments/assets/13c75a1d-7c78-4c11-9293-3dcf4c443097)

> [!WARNING]
>
> <details>
> <summary>Firewall rules blocked me from connecting to one or more
addresses (expand for details)</summary>
>
> #### I tried to connect to the following addresses, but was blocked by
firewall rules:
>
> - `checkpoint.prisma.io`
> - Triggering command: `/usr/bin/node
/root/.cache/prisma-python/binaries/5.17.0/393aa359c9ad4a4bb28630fb5613f9c281cde053/node_modules/prisma/build/child
{&#34;product&#34;:&#34;prisma&#34;,&#34;version&#34;:&#34;5.17.0&#34;,&#34;cli_install_type&#34;:&#34;local&#34;,&#34;information&#34;:&#34;&#34;,&#34;local_timestamp&#34;:&#34;2025-09-25T21:41:17Z&#34;,&#34;project_hash&#34;:&#34;a5170f80&#34;,&#34;cli_path&#34;:&#34;/root/.cache/prisma-python/binaries/5.17.0/393aa359c9ad4a4bb28630fb5613f9c281cde053/node_modules/prisma/build/index.js&#34;,&#34;cli_path_hash&#34;:&#34;40bbdaf9&#34;,&#34;endpoint&#34;:&#34;REDACTED&#34;,&#34;disable&#34;:false,&#34;arch&#34;:&#34;x64&#34;,&#34;os&#34;:&#34;linux&#34;,&#34;node_version&#34;:&#34;v20.19.5&#34;,&#34;ci&#34;:false,&#34;ci_name&#34;:&#34;&#34;,&#34;command&#34;:&#34;generate&#34;,&#34;schema_providers&#34;:[&#34;postgresql&#34;],&#34;schema_preview_features&#34;:[],&#34;schema_generators_providers&#34;:[&#34;prisma-client-py&#34;],&#34;cache_file&#34;:&#34;/root/.cache/checkpoint-nodejs/prisma-40bbdaf9&#34;,&#34;cache_duration&#34;:43200000,&#34;remind_duration&#34;:172800000,&#34;force&#34;:false,&#34;timeout&#34;:5000,&#34;unref&#34;:true,&#34;child_path&#34;:&#34;/root/.cache/prisma-python/binaries/5.17.0/393aa359c9ad4a4bb28630fb5613f9c281cde053/node_modules/prisma/build/child&#34;,&#34;client_event_id&#34;:&#34;&#34;,&#34;previous_client_event_id&#34;:&#34;&#34;,&#34;check_if_update_available&#34;:false}`
(dns block)
> - Triggering command: `/usr/bin/node
/root/.cache/prisma-python/binaries/5.17.0/393aa359c9ad4a4bb28630fb5613f9c281cde053/node_modules/prisma/build/child
{&#34;product&#34;:&#34;prisma&#34;,&#34;version&#34;:&#34;5.17.0&#34;,&#34;cli_install_type&#34;:&#34;local&#34;,&#34;information&#34;:&#34;&#34;,&#34;local_timestamp&#34;:&#34;2025-09-25T21:41:19Z&#34;,&#34;project_hash&#34;:&#34;a5170f80&#34;,&#34;cli_path&#34;:&#34;/root/.cache/prisma-python/binaries/5.17.0/393aa359c9ad4a4bb28630fb5613f9c281cde053/node_modules/prisma/build/index.js&#34;,&#34;cli_path_hash&#34;:&#34;40bbdaf9&#34;,&#34;endpoint&#34;:&#34;REDACTED&#34;,&#34;disable&#34;:false,&#34;arch&#34;:&#34;x64&#34;,&#34;os&#34;:&#34;linux&#34;,&#34;node_version&#34;:&#34;v20.19.5&#34;,&#34;ci&#34;:false,&#34;ci_name&#34;:&#34;&#34;,&#34;command&#34;:&#34;migrate
deploy&#34;,&#34;schema_providers&#34;:[&#34;postgresql&#34;],&#34;schema_preview_features&#34;:[],&#34;schema_generators_providers&#34;:[&#34;prisma-client-py&#34;],&#34;cache_file&#34;:&#34;/root/.cache/checkpoint-nodejs/prisma-40bbdaf9&#34;,&#34;cache_duration&#34;:43200000,&#34;remind_duration&#34;:172800000,&#34;force&#34;:false,&#34;timeout&#34;:5000,&#34;unref&#34;:true,&#34;child_path&#34;:&#34;/root/.cache/prisma-python/binaries/5.17.0/393aa359c9ad4a4bb28630fb5613f9c281cde053/node_modules/prisma/build/child&#34;,&#34;client_event_id&#34;:&#34;&#34;,&#34;previous_client_event_id&#34;:&#34;&#34;,&#34;check_if_update_available&#34;:false}`
(dns block)
> - Triggering command: `/opt/hostedtoolcache/node/21.7.3/x64/bin/node
/home/REDACTED/.cache/prisma-python/binaries/5.17.0/393aa359c9ad4a4bb28630fb5613f9c281cde053/node_modules/prisma/build/child
{&#34;product&#34;:&#34;prisma&#34;,&#34;version&#34;:&#34;5.17.0&#34;,&#34;cli_install_type&#34;:&#34;local&#34;,&#34;information&#34;:&#34;&#34;,&#34;local_timestamp&#34;:&#34;2025-09-25T21:44:58Z&#34;,&#34;project_hash&#34;:&#34;c6190a20&#34;,&#34;cli_path&#34;:&#34;/home/REDACTED/.cache/prisma-python/binaries/5.17.0/393aa359c9ad4a4bb28630fb5613f9c281cde053/node_modules/prisma/build/index.js&#34;,&#34;cli_path_hash&#34;:&#34;8d85b642&#34;,&#34;endpoint&#34;:&#34;REDACTED&#34;,&#34;disable&#34;:false,&#34;arch&#34;:&#34;x64&#34;,&#34;os&#34;:&#34;linux&#34;,&#34;node_version&#34;:&#34;v21.7.3&#34;,&#34;ci&#34;:true,&#34;ci_name&#34;:&#34;GitHub
Actions&#34;,&#34;command&#34;:&#34;generate&#34;,&#34;schema_providers&#34;:[&#34;postgresql&#34;],&#34;schema_preview_features&#34;:[],&#34;schema_generators_providers&#34;:[&#34;prisma-client-py&#34;],&#34;cache_file&#34;:&#34;/home/REDACTED/.cache/checkpoint-nodejs/prisma-8d85b642&#34;,&#34;cache_duration&#34;:43200000,&#34;remind_duration&#34;:172800000,&#34;force&#34;:false,&#34;timeout&#34;:5000,&#34;unref&#34;:true,&#34;child_path&#34;:&#34;/home/REDACTED/.cache/prisma-python/binaries/5.17.0/393aa359c9ad4a4bb28630fb5613f9c281cde053/node_modules/prisma/build/child&#34;,&#34;client_event_id&#34;:&#34;&#34;,&#34;previous_client_event_id&#34;:&#34;&#34;,&#34;check_if_update_available&#34;:false}`
(dns block)
> - `fonts.googleapis.com`
> - Triggering command: `node
/home/REDACTED/work/AutoGPT/AutoGPT/autogpt_platform/frontend/node_modules/.bin/../next/dist/bin/next
build` (dns block)
> -
`https://api.github.com/repos/Significant-Gravitas/Significant-Gravitas%2FAutoGPT/languages`
> - Triggering command:
`/home/REDACTED/work/_temp/ghcca-node/node/bin/node --enable-source-maps
/home/REDACTED/work/_temp/copilot-developer-action-main/dist/index.js`
(http block)
> - `o1.ingest.sentry.io`
> - Triggering command: `node
/home/REDACTED/work/AutoGPT/AutoGPT/autogpt_platform/frontend/node_modules/.bin/../next/dist/bin/next
build` (dns block)
>
> If you need me to access, download, or install something from one of
these locations, you can either:
>
> - Configure [Actions setup
steps](https://gh.io/copilot/actions-setup-steps) to set up my
environment, which run before the firewall is enabled
> - Add the appropriate URLs or hosts to the custom allowlist in this
repository's [Copilot coding agent
settings](https://github.com/Significant-Gravitas/AutoGPT/settings/copilot/coding_agent)
(admins only)
>
> </details>

<!-- START COPILOT CODING AGENT SUFFIX -->



<details>

<summary>Original prompt</summary>

> 
> ----
> 
> *This section details on the original issue you should resolve*
> 
> <issue_title>Costs are being shown as dollars rather than cents based
on the new runs page</issue_title>
> <issue_description></issue_description>
> 
> ## Comments on the Issue (you are @copilot in this section)
> 
> <comments>
> </comments>
> 


</details>
Fixes #10886

<!-- START COPILOT CODING AGENT TIPS -->
---

💡 You can make Copilot smarter by setting up custom instructions,
customizing its development environment and configuring Model Context
Protocol (MCP) servers. Learn more [Copilot coding agent
tips](https://gh.io/copilot-coding-agent-tips) in the docs.

---------

Co-authored-by: copilot-swe-agent[bot] <[email protected]>
Co-authored-by: ntindle <[email protected]>
Co-authored-by: Nicholas Tindle <[email protected]>

Author: Copilot

autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/AgentRunsView/components/RunDetailHeader/RunDetailHeader.tsx

@@ -144,7 +144,7 @@ export function RunDetailHeader({
                 <>
                   <span className="mx-1 inline-block text-zinc-200">|</span>
                   <Text variant="small" className="!text-zinc-600">
-                    Cost: ${run.stats.cost}
+                    Cost: ${(run.stats.cost / 100).toFixed(2)}
                   </Text>
                 </>
               )}

autogpt_platform/frontend/src/app/(platform)/monitoring/components/FlowRunsStatus.tsx

@@ -112,12 +112,13 @@ export const FlowRunsStatus: React.FC<{
         </p>
         {filteredFlowRuns.some((r) => r.stats) && (
           <p>
-            <strong>Total cost:</strong>{" "}
-            {filteredFlowRuns.reduce(
-              (total, run) => total + (run.stats?.cost ?? 0),
-              0,
-            )}{" "}
-            seconds
+            <strong>Total cost:</strong> $
+            {(
+              filteredFlowRuns.reduce(
+                (total, run) => total + (run.stats?.cost ?? 0),
+                0,
+              ) / 100
+            ).toFixed(2)}
           </p>
         )}
       </div>