Files
PaperClipAI/ui
Devin FoleyandPaperclip 572cec0344 fix(ui): present missing costs as an informational notice (#15459)
## Thinking Path

> - Paperclip is the open source app people use to manage AI agents for
work.
> - The Costs dashboard shows spending and gaps in cost data.
> - Historical usage can have token counts without a recorded price.
> - The red notice implies that the user must fix those records.
> - This pull request shows the missing costs as a neutral note below
the totals.
> - Users can see the limit of the totals without a false call to
action.

## Linked Issues or Issue Description

Refs #14997.

**What happened?**

The Costs dashboard shows a red notice when a selected period contains
usage without prices. It also shows “0 runs await accounting” when no
runs are pending. Historical pricing gaps can therefore look like
current errors that need cleanup.

**Expected behavior**

Show a neutral explanation below the totals. State that totals include
only known costs. Show pending runs separately and only when the count
is positive.

**Steps to reproduce**

1. Open Costs for a period with unpriced usage and no pending runs.
2. Observe the red notice above the totals.
3. Apply this change. Confirm that the notice is muted and below the
totals, with no zero-count pending message.

**Paperclip version or commit**

Reproduced on master after #14997.

**Deployment mode**

Board UI in both the embedded Activity page and the standalone Costs
page.

## What Changed

- Move the cost-data notice below the summary tiles and use the muted
text token.
- Explain unavailable prices with “Totals include known costs only.”
- Separate pending runs from missing prices. Omit zero counts and use
singular or plural copy as needed.
- Update the existing UI tests for both page variants, including
missing-only, pending-only, and fully accounted states after refresh.

## Verification

- `pnpm --dir ui exec vitest run src/pages/Costs.test.tsx`: 21 tests
passed on the final commit. Both page variants cover mixed,
missing-only, pending-only, and fully accounted states.
- `pnpm check:token-gates`: passed on the final commit.
- `pnpm build`: passed locally.
- `pnpm -r typecheck`: passed locally.
- Full Linux CI passed on `0c23544c0f17e6641cc0c8de6ed498a731748bde`,
including browser tests, server tests, shared-package tests, build, and
typecheck. [CI
run](https://github.com/paperclipai/paperclip/actions/runs/37661883464).
- Greptile Apex: 5/5 on the final commit, with no unresolved review
threads.
- Local full-suite limit: `pnpm test:run` first failed because the fresh
checkout lacked embedded PostgreSQL library links. A runtime-skill
fixture also selected an unrelated parent directory, and a load test
timed out. After setup repair, the database suite (70 tests), skill
suite (3 tests), email suite (39 tests), and load suite (4 tests) passed
individually. The subsequent full local rerun was stopped after the
complete Linux CI run passed. This is not a claim that a full local test
invocation passed.

## Risks

Low risk. This changes presentation only. The note remains visible and
retains its accessible status role. Cost calculations, stored records,
and budget enforcement do not change. The copy does not assume that all
missing prices are historical. No schema migration or operator
documentation change is needed.

## Model Used

OpenAI Codex, based on GPT-6, with reasoning, repository inspection,
code editing, and test execution. The exact served model identifier and
context-window size are not exposed in this session.

## Checklist

- [x] I have included a thinking path that traces from project context
to this change
- [x] I have specified the model used (with version and capability
details)
- [x] I have checked ROADMAP.md and confirmed this PR does not duplicate
planned core work
- [x] I have searched GitHub for duplicate or related PRs and linked
them above
- [x] I have either (a) linked existing issues with `Fixes: #` / `Closes
#` / `Refs #` OR (b) described the issue in-PR following the relevant
issue template
- [x] I have not referenced internal/instance-local Paperclip issues or
links (only public GitHub `#NNN` / `github.com/paperclipai/paperclip`
URLs)
- [x] My branch name describes the change (e.g. `docs/...`, `fix/...`)
and contains no internal Paperclip ticket id or instance-derived details
- [x] I have run tests locally and they pass
- [x] I have added or updated tests where applicable
- [x] I have updated relevant documentation to reflect my changes
- [x] I have considered and documented any risks above
- [x] All Paperclip CI gates are green
- [x] Greptile is 5/5 with no open P2s, recommendations, or follow-ups
- [x] I will address all Greptile and reviewer comments before
requesting merge

---------

Co-authored-by: Paperclip <noreply@paperclip.ing>
2026-10-07 12:34:12 -07:00
..
…

@paperclipai/ui

Published static assets for the Paperclip board UI.

What gets published

The npm package contains the production build under dist/. It does not ship the UI source tree or workspace-only dependencies.

Storybook

Storybook config, stories, and fixtures live under ui/storybook/.

pnpm --filter @paperclipai/ui storybook
pnpm --filter @paperclipai/ui build-storybook

Typical use

Install the package, then serve or copy the built files from node_modules/@paperclipai/ui/dist.

Editor dependency identity

Keep the root and workspace overrides for @codemirror/state, @codemirror/view, and @lezer/common aligned. CodeMirror requires shared extension identity, while Lezer parsers and syntax highlighters require shared NodeProp IDs. Multiple Lezer copies can crash code-block highlighting with tags is not iterable. src/lib/codemirror-single-instance.test.ts checks the installed dependency graph and highlights sample code through the editor's real language dependencies. GitHub Actions owns regeneration of pnpm-lock.yaml.