Files
PaperClipAI/ui
DottaandPaperclip cac82ed4d9 fix(ui): show parent tasks in responsive breadcrumbs (#20366)
## Thinking Path

> - Paperclip helps people manage AI agents and their work.
> - Tasks can have a parent task.
> - The task header does not show that parent in its navigation path.
> - On a phone, the header removes the task path and shows only the
current title.
> - Long parent and current titles must share the available space.
> - This pull request adds a parent link and limits each displayed task
title to 48 characters.
> - People can move to the parent and keep the current task number in
view.

## Linked Issues or Issue Description

**What existing behavior does this improve?**

The navigation path in a task header.

**Current behavior**

The global path omits the parent. The phone header shows only the
current task. Long parent titles cannot share the row safely.

**Proposed behavior**

Show the immediate parent before the current task. Limit each displayed
title to 48 Unicode code points, with an ellipsis. Limit the parent to
40% of the row. On phones, remove the collection link and parent number
so both titles and the current task number fit.

**Reason and benefit**

People can see the task context and open its parent. Full titles stay in
hover text and accessible names. Private parents have no link.

Related: #9302 adds project navigation. This change adds task parent
navigation.

## What Changed

- Add the immediate parent from the existing authorized ancestor
response to the global task path.
- Make parent and current titles shrink. Apply a 48-character display
limit without changing stored titles.
- Keep the current task number visible on phones. Keep private parent
labels noninteractive.
- Add ten Storybook scenarios with the production header. Cover linked
parents, long titles, phone widths, tablet width, dark theme, standalone
tasks, Mine source, and private parents on desktop and phones.
- Add regression tests and document the layout rules in DESIGN.md.
- Keep the source collection and filters when people follow the parent
link. Cover route state, stored state and legacy query links.
- Use the existing noninteractive lock chip for private parents. Hide
its parent number on phones. Refresh its control key when an open task
changes screen size. Both regressions failed before their fixes and pass
after them.
- Refresh the SDK public source registry after the master update. The
existing helper keeps all runtime and dependency pins unchanged. This
repairs three support tests that failed on stale master source
identities.

## Verification

- Focused UI tests: `pnpm exec vitest run
ui/src/components/BreadcrumbBar.test.tsx
ui/src/pages/IssueDetail.test.tsx` — 280 passed.
- UI typecheck: `pnpm --filter @paperclipai/ui typecheck` — passed.
- `pnpm build-storybook` — passed.
- `pnpm check:token-gates` — passed.
- Catalog checks and 30 map/catalog tests — passed.
- Chromium: all ten scenarios rendered with no page errors. Story play
functions finished. Checked 1440, 768, 390 and 320 pixel widths,
keyboard parent navigation, private parent links, title limits and
horizontal overflow.
- Private-parent browser check: resize an open task from 1440 to 320
pixels and back. The chip changes from the parent number to Private and
back. It remains noninteractive.
- Screenshots were captured in light and dark themes. They are task
evidence and are not committed.
- This verifies the header with fixture data and the page wiring with
mocked APIs. It does not claim live backend authorization or a pixel
baseline comparison. The static server returns 404 for optional shell
context reads. After keyboard navigation, destination task reads also
return 404 because the preview has no task backend. The header renders
and all play checks pass.
- Case discovery and OpenAPI tests: 47 passed.
- Current head: `e7a1ada02e75e9b2cbd5f6076ad6c113954f3a4b`. [CI run
42834603680](https://github.com/paperclipai/paperclip/actions/runs/42834603680)
passed. All 61 head check runs are complete: 58 passed and three
conditional jobs were skipped. The legacy Snyk status passed.
[Greptile](https://github.com/paperclipai/paperclip/pull/20366#issuecomment-6751938924)
reviewed this head at 5/5 with no actionable findings. All four inline
review threads are resolved.
- After the master update: all 280 UI tests, UI typecheck, token gates,
Storybook build, 30 catalog tests and ten Chromium stories pass. All six
screenshots match the saved images byte for byte.
- SDK and process support checks: 105 tests pass. The source pin helper
has eight passing tests. The three SDK failures reproduced before the
registry refresh and passed after it. The helper check reports no
remaining source drift and no runtime pin changes.
- The earlier case discovery failure reproduced before the summary
correction and passed after it. All server shards passed on the next
head. That CI run failed one unchanged Rust process-reaping test: its
owned tool stopped, but two unattributed orphan processes blocked
verification. The earlier CI run passed the same Rust inputs. Cross-test
process interference is possible; the historical log does not prove the
cause. The next CI run passed Rust. That run failed three SDK checks on
stale master source pins and one process inspection check. The source
pin repair is in this head. The process check passes locally, but the
earlier process inspection failure remains unexplained.
- The same prior run failed the cohort migration resume test. Its upload
barrier releases after five seconds; maximum uploads were seven and
three in the two attempts, below eight. Three server files also exceeded
the 180-second file budget. These test inputs come from master. A local
attempt could not reproduce that CI assertion because its child Git
command failed in this execution environment. Fresh CI 42834603680
passed these paths, including every server shard and Runner support. No
test or process safety check was weakened.

## Risks

- Breadcrumb titles display less text. Hover text and accessible names
retain the full title.
- The global path shows the immediate parent. People can follow parent
links through a deeper task tree.
- The shared breadcrumb component also serves other pages. Existing
header and agent-switcher tests pass.
- No schema, API behavior or stored title change.
- SDK source identities must match the integrated source. The registry
change uses the existing helper and preserves all runtime and dependency
pins.

## Model Used

- OpenAI Codex, based on GPT-6. The exact runtime model ID and context
window size are not exposed. Used reasoning, repository tools and
Chromium verification.

## 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-11-10 08:54:39 -06: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.