paperclip/packages/plugins/examples/plugin-file-browser-example
Nicky Leach 71acf83070
build(deps): align react-dom with react@19.2.7 (replaces dependabot #8471) (#8557)
## Thinking Path

> - Paperclip is the open source app people use to manage AI agents for
work.
> - The board UI, plugin examples, and plugin SDK all share the same
React dependency graph.
> - Dependabot PR #8471 raised `react` and `@types/react`, but left
`react-dom` and `@types/react-dom` on older 19.x ranges.
> - That let dependency resolution install incompatible React runtime
versions, which makes React refuse to run and breaks UI-oriented test
suites.
> - Current PR policy keeps `pnpm-lock.yaml` owned by CI for
non-dependabot authors, so this PR updates manifests and lets CI
regenerate the lockfile artifact.
> - This pull request replaces #8471 with a complete React toolchain
alignment across the package manifests it touched.
> - The benefit is a single React 19.2.7 runtime graph that keeps
dependency consumers from deduping onto a stale `react-dom` patch.

## Linked Issues or Issue Description

Refs #8471

This PR replaces #8471, which updated `react` and `@types/react` but
left `react-dom` and `@types/react-dom` behind. The resulting dependency
graph can install mismatched `react` and `react-dom` versions, producing
React's incompatible-version runtime error in UI tests.

## What Changed

- Aligned `react-dom` package ranges to `^19.2.7` anywhere the React
dependency set is present.
- Aligned `@types/react-dom` package ranges to the 19.2 line.
- Kept the `react@^19.2.7` and `@types/react@^19.2.17` bumps from #8471.
- Added root pnpm overrides for `react` and `react-dom` so peer-only
consumers resolve to the same 19.2.7 runtime instead of a stale patch.
- Left `pnpm-lock.yaml` out of the PR, per the PR workflow policy; CI
regenerates and shares the lockfile artifact when manifests change.

## Verification

- `cd ui && NODE_ENV=test npx vitest run` passed locally before handoff:
243 files / 1739 tests.
- `NODE_ENV=development pnpm install --lockfile-only --ignore-scripts
--no-frozen-lockfile` passed locally on the rebased branch.
- Confirmed regenerated `pnpm-lock.yaml` resolves `react` and
`react-dom` to 19.2.7 and contains no `react@19.2.4` /
`react-dom@19.2.4` entries.
- GitHub Actions are green on this PR, including `policy`, `Typecheck +
Release Registry`, all general test shards, `Build`, `e2e`, and
`verify`.
- Greptile completed at 5/5 with zero unresolved threads.

## Risks

Low risk. This is a dependency-version alignment only, but React
dependency changes can expose package-manager resolution issues. The
root overrides intentionally constrain the React runtime pair to the
same patch version to avoid that class of failure.

## Model Used

OpenAI Codex based on GPT-5, using command-line tool execution and
GitHub CLI operations in a Paperclip-managed workspace.

## 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-06-23 11:56:23 -07:00
..
scripts Add plugin framework and settings UI 2026-03-13 16:22:34 -05:00
src Expand plugin host surface (#5205) 2026-05-05 07:42:57 -05:00
README.md Add plugin framework and settings UI 2026-03-13 16:22:34 -05:00
package.json build(deps): align react-dom with react@19.2.7 (replaces dependabot #8471) (#8557) 2026-06-23 11:56:23 -07:00
tsconfig.json Add plugin framework and settings UI 2026-03-13 16:22:34 -05:00

README.md

File Browser Example Plugin

Example Paperclip plugin that demonstrates:

  • projectSidebarItem — An optional "Files" link under each project in the sidebar that opens the project detail with this plugin’s tab selected. This is controlled by plugin settings and defaults to off.
  • detailTab (entityType project) — A project detail tab with a workspace-path selector, a desktop two-column layout (file tree left, editor right), and a mobile one-panel flow with a back button from editor to file tree, including save support.

This is a repo-local example plugin for development. It should not be assumed to ship in a generic production build unless it is explicitly included.

Slots

Slot Type Description
Files (sidebar) projectSidebarItem Optional link under each project → project detail + tab.
Files (tab) detailTab Responsive tree/editor layout with save support.

Settings

  • Show Files in Sidebar — toggles the project sidebar link on or off. Defaults to off.
  • Comment File Links — controls whether comment annotations and the comment context-menu action are shown.

Capabilities

  • ui.sidebar.register — project sidebar item
  • ui.detailTab.register — project detail tab
  • projects.read — resolve project
  • project.workspaces.read — list workspaces and read paths for file access

Worker

  • getData workspaces — ctx.projects.listWorkspaces(projectId, companyId) (ordered, primary first).
  • getData fileList — { projectId, workspaceId, directoryPath? } → list directory entries for the workspace root or a subdirectory (Node fs).
  • getData fileContent — { projectId, workspaceId, filePath } → read file content using workspace-relative paths (Node fs).
  • performAction writeFile — { projectId, workspaceId, filePath, content } → write the current editor buffer back to disk.

Local Install (Dev)

From the repo root, build the plugin and install it by local path:

pnpm --filter @paperclipai/plugin-file-browser-example build
pnpm paperclipai plugin install ./packages/plugins/examples/plugin-file-browser-example

To uninstall:

pnpm paperclipai plugin uninstall paperclip-file-browser-example --force

Local development notes:

  • Build first. The host resolves the worker from the manifest entrypoints.worker (e.g. ./dist/worker.js). Run pnpm build in the plugin directory before installing so the worker file exists.
  • Dev-only install path. This local-path install flow assumes this monorepo checkout is present on disk. For deployed installs, publish an npm package instead of depending on packages/plugins/examples/... existing on the host.
  • Reinstall after pulling. If you installed a plugin by local path before the server stored package_path, the plugin may show status error (worker not found). Uninstall and install again so the server persists the path and can activate the plugin.
  • Optional: use paperclip-plugin-dev-server for UI hot-reload with devUiUrl in plugin config.

Structure

  • src/manifest.ts — manifest with projectSidebarItem and detailTab (entityTypes ["project"]).
  • src/worker.ts — data handlers for workspaces, file list, file content.
  • src/ui/index.tsx — FilesLink (sidebar) and FilesTab (workspace path selector + two-panel file tree/editor).