paperclip/doc
Dotta 574b4e71db
[codex] Bundle UI webfonts with the app (#9020)
## Thinking Path

> - Paperclip is the open source app people use to manage AI agents for
work
> - The browser UI depends on the Inter font family for its intended
visual baseline
> - The app previously referenced remote Google Fonts stylesheets at
runtime
> - That meant self-hosted, offline, or privacy-sensitive deployments
could lose the intended typography or depend on an external request
> - This pull request bundles the required Inter variable font files
with the UI and serves them from the app
> - A normal UI test now covers the static assets and CSS wiring without
adding a package script or build step
> - The benefit is a more reliable, self-contained UI that does not rely
on third-party webfont hosting

## Linked Issues or Issue Description

No public GitHub issue was found for this exact gap.

**Subsystem affected**
ui/ — React + Vite board UI

**Problem or motivation**
Paperclip's UI should ship the webfont assets it references so
production and self-hosted deployments render consistently without
reaching out to Google Fonts at runtime.

**Proposed solution**
Bundle the Inter variable font files under the UI public assets, load
them with local `@font-face` declarations, document the bundled assets,
and cover the source assets/CSS wiring with a normal UI Vitest test.

**Alternatives considered**
Keeping the remote stylesheet dependency is simpler, but leaves
deployments dependent on external font hosting. Using system fonts only
would avoid the asset footprint, but changes the intended UI typography.

**Roadmap alignment**
This is a focused UI reliability/polish fix, not a roadmap-level core
feature.

**Additional context**
Searched public GitHub issues and PRs for `webfonts
repo:paperclipai/paperclip`; no duplicates or closely related open items
were found.

## What Changed

- Added bundled Inter variable font assets and their notice under
`ui/public/fonts/`.
- Replaced remote Google Fonts imports with local `@font-face`
declarations using relative public-asset URLs that remain subpath-safe
from built CSS.
- Documented the local font asset expectation in development and UI spec
docs.
- Removed the follow-up font asset checker scripts and package/build
wiring after review feedback clarified they are not required for
building the UI.
- Added `ui/src/lib/ui-font-assets.test.ts` to verify the shipped WOFF2
files, notice text, and CSS font references through the normal UI test
suite.

## Verification

- `pnpm --filter @paperclipai/ui exec vitest run
src/lib/ui-font-assets.test.ts --config vitest.config.ts`
  - Passed.
- Confirms the bundled font files exist, are WOFF2 files, have notice
coverage, and are referenced by `ui/src/index.css`.
- `pnpm --filter @paperclipai/ui build`
  - Passed.
- Confirmed the UI still builds after removing the checker from
`ui/package.json`.
- Confirmed `ui/dist/fonts/` contains `InterVariable.woff2`,
`InterVariable-Italic.woff2`, and `NOTICE.md` after the build.
- The UI build emitted existing warnings about `::highlight(...)`, a
dynamic/static import overlap for `MarkdownEditor.tsx`, unresolved
relative public font URLs left for runtime resolution, and large chunks,
but completed successfully.

## Risks

Low risk. This adds static font assets and swaps the font source from a
remote stylesheet to same-origin files. The main tradeoff is a larger
repository/UI asset footprint from the bundled `.woff2` files.

> For core feature work, check [`ROADMAP.md`](ROADMAP.md) first and
discuss it in `#dev` before opening the PR. Feature PRs that overlap
with planned core work may need to be redirected — check the roadmap
first. See `CONTRIBUTING.md`.

## Model Used

OpenAI Codex, GPT-5-based coding agent, tool-enabled terminal/GitHub
workflow with reasoning support.

## 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-07-06 11:02:45 -05:00
..
assets docs(readme): align README with brand guidelines (PAPA-439) (#6810) 2026-05-27 18:18:00 -07:00
experimental
logs Improve CLI API parity coverage (#6626) 2026-06-02 17:13:29 -07:00
plans External object references across issue surfaces (#8512) 2026-06-23 08:27:19 -05:00
plugins feat(cli): surface plugin install target host + add `plugin target` (#8575) 2026-06-25 01:07:35 -07:00
pr/5429 Add secrets provider vaults and remote import (#5429) 2026-05-09 18:22:17 -05:00
screenshots/pr-6381 [codex] Provider vault secrets UX (#6381) 2026-05-19 15:50:23 -05:00
spec [codex] Bundle UI webfonts with the app (#9020) 2026-07-06 11:02:45 -05:00
AGENT-ARTIFACTS.md Add workspace file viewer and artifact links (#7681) 2026-06-09 17:17:43 -05:00
AGENTCOMPANIES_SPEC_INVENTORY.md
CLI.md Refresh run config before reusing workspaces (#8797) 2026-06-30 14:50:25 -07:00
CLIPHUB.md
DATABASE.md feat(secrets): add user-specific runtime secrets (#8825) 2026-07-05 05:58:20 -05:00
DEPLOYMENT-MODES.md [codex] Add private browser first-admin claim flow (#6755) 2026-05-27 21:15:01 -10:00
DEVELOPING.md [codex] Bundle UI webfonts with the app (#9020) 2026-07-06 11:02:45 -05:00
DOCKER.md [codex] Add private browser first-admin claim flow (#6755) 2026-05-27 21:15:01 -10:00
GOAL.md [codex] Refresh docs and agent skills (#4693) 2026-04-28 16:12:03 -05:00
HERMES_GATEWAY_ONBOARDING.md [codex] Add built-in Hermes adapters (#8543) 2026-06-26 16:04:58 -05:00
HERMES_GATEWAY_SMOKE.md [codex] Add built-in Hermes adapters (#8543) 2026-06-26 16:04:58 -05:00
LOW-TRUST-PRESETS.md Add low-trust review containment (#7530) 2026-06-05 16:48:02 -05:00
OPENCLAW_ONBOARDING.md Introduce bind presets for deployment setup 2026-04-11 07:09:07 -05:00
PRODUCT.md [codex] Add agent permissions and controls plan (#6386) 2026-05-22 08:12:52 -05:00
PUBLISHING.md [codex] Add built-in Hermes adapters (#8543) 2026-06-26 16:04:58 -05:00
README-draft.md
RELEASE-AUTOMATION-SETUP.md fix(ci): gate new release packages on npm bootstrap (#5146) 2026-05-03 19:31:28 -07:00
RELEASING.md Harden release flow with registry verification and dist-tag checks (#4800) 2026-04-29 15:56:20 -07:00
SECRETS-AWS-PROVIDER.md feat(secrets): add user-specific runtime secrets (#8825) 2026-07-05 05:58:20 -05:00
SPEC-implementation.md [codex] Add built-in Hermes adapters (#8543) 2026-06-26 16:04:58 -05:00
SPEC.md [codex] Add agent permissions and controls plan (#6386) 2026-05-22 08:12:52 -05:00
TASK-WATCHDOG.md [codex] feat(watchdog): add task watchdog control plane (#8339) 2026-06-19 15:38:52 -05:00
TASKS-mcp.md
TASKS.md
UNTRUSTED-PR-REVIEW.md chore(docker): improve base image and organize docker files 2026-04-01 11:36:27 +00:00
execution-semantics.md fix(workspace): restore clean branch drift on finalize (#8914) 2026-07-02 20:58:26 -07:00
memory-landscape.md chore: improve worktree tooling and security docs 2026-04-10 22:26:30 -05:00
observability.md feat(server): opt-in OpenTelemetry auto-instrumentation (#3735) 2026-06-12 10:44:22 -07:00