0 Fork 0

mirror of https://github.com/paperclipai/paperclip.git synced 2026-10-25 17:45:53 +01:00

Files

T

scotttongandClaude Opus 5 bc1c6b7ddc feat(markdown): add syntax colors to rendered code blocks

The block follows the theme now, but every token in it is one color.
Add syntax highlighting, using the palette from the approved design.

Render: add rehype-highlight and pass it to react-markdown. The plugin
array sits at module scope, because react-markdown remounts the rendered
tree when the array identity changes. That is the same hazard the
remarkPlugins memo already guards against.

Detection: `detect` is on, because most agent-authored fences carry no
language tag and would never highlight without it. `subset` restricts
detection to the languages agents actually post. highlight.js guesses
badly on short snippets, and a wrong guess colors the whole block wrongly.

Palette: eight `--code-syntax-*` aliases carry the roles. Each one points
at a token that already exists and already has a `.dark` override, so a
custom property resolves per mode at its use site and one definition
covers both themes.

The mapping is BORROWED, and this is the part to review. Paperclip has no
syntax palette. `--status-task-icon-*` and `--chip-match-title-fg` name
task-status and search-chip concerns. They were used because they are the
only hues that carry a real per-mode value; the fixed `--status-task-*`
hues go dim on the dark code surface. The coupling is confined to the
alias block. Repointing those eight lines moves the whole palette, and no
rule changes. A test asserts that the syntax rules never reference the
borrowed tokens directly.

Verified in both themes on a real task. Light resolves keyword #7c3aed,
identifier oklch(0.145 0 0), function oklch(0.4 0.13 265), comment
oklch(0.556 0 0). Dark resolves #9474f0, oklch(0.985 0 0),
oklch(0.78 0.1 265), oklch(0.708 0 0).

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

2026-08-17 21:49:08 -07:00

public

fix(ui): always give respondWith a real Response in the sw fetch fallback (#11292 )

2026-08-12 11:23:18 -07:00

src

feat(markdown): add syntax colors to rendered code blocks

2026-08-17 21:49:08 -07:00

storybook

Show ordered live blocker work in task chat (#11487 )

2026-08-16 15:10:05 -04:00

components.json

Overhaul UI with shadcn components and new pages

2026-02-17 09:07:32 -06:00

index.html

fix(ui): fetch the web app manifest with credentials (#11245 )

2026-08-11 19:11:56 -07:00

package.json

feat(markdown): add syntax colors to rendered code blocks

2026-08-17 21:49:08 -07:00

README.md

[codex] add comprehensive UI Storybook coverage (#4132 )

2026-04-20 12:13:23 -05:00

tsconfig.json

chore(ui): remove deprecated baseUrl from ui/tsconfig.json (#4067 )

2026-08-04 18:39:13 -05:00

vite.config.ts

revert(ui): back out onboarding port (#10786 ) (#11067 )

2026-08-07 14:55:34 -07:00

vite.qa.config.mjs

feat(mcp) [split 7/8]: activate Apps and gateway UI (#9562 )

2026-07-14 15:40:08 -05:00

vitest.config.ts

refactor(ui): drop the TZ pin now the fixtures are anchored (#11508 )

2026-08-17 00:18:13 -07:00

vitest.setup.ts

feat(ui): NUX rework behind enableConferenceRoomChat experimental flag — capsule onboarding, conference-room chat, unified composer (#8000 )

2026-06-11 16:32:55 -05:00

README.md

@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.