## Thinking Path > - Paperclip orchestrates AI agents for zero-human companies. > - The board UI is the main operator surface, so its component and workflow coverage needs to stay reviewable as the product grows. > - This branch adds Storybook as a dedicated UI reference surface for core Paperclip screens and interaction patterns. > - That work spans Storybook infrastructure, app-level provider wiring, and a large fixture set that can render real control-plane states without a live backend. > - The branch also expands coverage across agents, budgets, issues, chat, dialogs, navigation, projects, and data visualization so future UI changes have a concrete visual baseline. > - This pull request packages that Storybook work on top of the latest `master`, excludes the lockfile from the final diff per repo policy, and fixes one fixture contract drift caught during verification. > - The benefit is a single reviewable PR that adds broad UI documentation and regression-surfacing coverage without losing the existing branch work. ## What Changed - Added Storybook 10 wiring for the UI package, including root scripts, UI package scripts, Storybook config, preview wrappers, Tailwind entrypoints, and setup docs. - Added a large fixture-backed data source for Storybook so complex board states can render without a live server. - Added story suites covering foundations, status language, control-plane surfaces, overview, UX labs, agent management, budget and finance, forms and editors, issue management, navigation and layout, chat and comments, data visualization, dialogs and modals, and projects/goals/workspaces. - Adjusted several UI components for Storybook parity so dialogs, menus, keyboard shortcuts, budget markers, markdown editing, and related surfaces render correctly in isolation. - Rebasing work for PR assembly: replayed the branch onto current `master`, removed `pnpm-lock.yaml` from the final PR diff, and aligned the dashboard fixture with the current `DashboardSummary.runActivity` API contract. ## Verification - `pnpm --filter @paperclipai/ui typecheck` - `pnpm --filter @paperclipai/ui build-storybook` - Manual diff audit after rebase: verified the PR no longer includes `pnpm-lock.yaml` and now cleanly targets current `master`. - Before/after UI note: before this branch there was no dedicated Storybook surface for these Paperclip views; after this branch the local Storybook build includes the new overview and domain story suites in `ui/storybook-static`. ## Risks - Large static fixture files can drift from shared types as dashboard and UI contracts evolve; this PR already needed one fixture correction for `runActivity`. - Storybook bundle output includes some large chunks, so future growth may need chunking work if build performance becomes an issue. - Several component tweaks were made for isolated rendering parity, so reviewers should spot-check key board surfaces against the live app behavior. ## Model Used - OpenAI Codex, GPT-5-based coding agent in the Paperclip harness; exact serving model ID is not exposed in-runtime to the agent. - Tool-assisted workflow with terminal execution, git operations, local typecheck/build verification, and GitHub CLI PR creation. - Context window/reasoning mode not surfaced by the harness. ## 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 run tests locally and they pass - [x] I have added or updated tests where applicable - [ ] If this change affects the UI, I have included before/after screenshots - [x] I have updated relevant documentation to reflect my changes - [x] I have considered and documented any risks above - [x] I will address all Greptile and reviewer comments before requesting merge --------- Co-authored-by: Paperclip <noreply@paperclip.ing>
22 KiB
Developing
This project can run fully in local dev without setting up PostgreSQL manually.
Deployment Modes
For mode definitions and intended CLI behavior, see doc/DEPLOYMENT-MODES.md.
Current implementation status:
- canonical model:
local_trustedandauthenticated(withprivate/publicexposure)
Prerequisites
- Node.js 20+
- pnpm 9+
Dependency Lockfile Policy
GitHub Actions owns pnpm-lock.yaml.
- Do not commit
pnpm-lock.yamlin pull requests. - Pull request CI validates dependency resolution when manifests change.
- Pushes to
masterregeneratepnpm-lock.yamlwithpnpm install --lockfile-only --no-frozen-lockfile, commit it back if needed, and then run verification with--frozen-lockfile.
Start Dev
From repo root:
pnpm install
pnpm dev
This starts:
- API server:
http://localhost:3100 - UI: served by the API server in dev middleware mode (same origin as API)
pnpm dev runs the server in watch mode and restarts on changes from workspace packages (including adapter packages). Use pnpm dev:once to run without file watching.
pnpm dev:once auto-applies pending local migrations by default before starting the dev server.
pnpm dev and pnpm dev:once are now idempotent for the current repo and instance: if the matching Paperclip dev runner is already alive, Paperclip reports the existing process instead of starting a duplicate.
Storybook
The board UI Storybook keeps stories and Storybook config under ui/storybook/ so component review files stay out of the app source routes.
pnpm storybook
pnpm build-storybook
These run the @paperclipai/ui Storybook on port 6006 and build the static output to ui/storybook-static/.
Inspect or stop the current repo's managed dev runner:
pnpm dev:list
pnpm dev:stop
pnpm dev:once now tracks backend-relevant file changes and pending migrations. When the current boot is stale, the board UI shows a Restart required banner. You can also enable guarded auto-restart in Instance Settings > Experimental, which waits for queued/running local agent runs to finish before restarting the dev server.
Tailscale/private-auth dev mode:
pnpm dev --bind lan
This runs dev as authenticated/private with a private-network bind preset.
For Tailscale-only reachability on a detected tailnet address:
pnpm dev --bind tailnet
Legacy aliases still map to the old broad private-network behavior:
pnpm dev --tailscale-auth
pnpm dev --authenticated-private
Allow additional private hostnames (for example custom Tailscale hostnames):
pnpm paperclipai allowed-hostname dotta-macbook-pro
Test Commands
Use the cheap local default unless you are specifically working on browser flows:
pnpm test
pnpm test runs the Vitest suite only. For interactive Vitest watch mode use:
pnpm test:watch
Browser suites stay separate:
pnpm test:e2e
pnpm test:release-smoke
These browser suites are intended for targeted local verification and CI, not the default agent/human test command.
One-Command Local Run
For a first-time local install, you can bootstrap and run in one command:
pnpm paperclipai run
paperclipai run does:
- auto-onboard if config is missing
paperclipai doctorwith repair enabled- starts the server when checks pass
Docker Quickstart (No local Node install)
Build and run Paperclip in Docker:
docker build -t paperclip-local .
docker run --name paperclip \
-p 3100:3100 \
-e HOST=0.0.0.0 \
-e PAPERCLIP_HOME=/paperclip \
-v "$(pwd)/data/docker-paperclip:/paperclip" \
paperclip-local
Or use Compose:
docker compose -f docker/docker-compose.quickstart.yml up --build
See doc/DOCKER.md for API key wiring (OPENAI_API_KEY / ANTHROPIC_API_KEY) and persistence details.
Docker For Untrusted PR Review
For a separate review-oriented container that keeps codex/claude login state in Docker volumes and checks out PRs into an isolated scratch workspace, see doc/UNTRUSTED-PR-REVIEW.md.
Database in Dev (Auto-Handled)
For local development, leave DATABASE_URL unset.
The server will automatically use embedded PostgreSQL and persist data at:
~/.paperclip/instances/default/db
Override home and instance:
PAPERCLIP_HOME=/custom/path PAPERCLIP_INSTANCE_ID=dev pnpm paperclipai run
No Docker or external database is required for this mode.
Storage in Dev (Auto-Handled)
For local development, the default storage provider is local_disk, which persists uploaded images/attachments at:
~/.paperclip/instances/default/data/storage
Configure storage provider/settings:
pnpm paperclipai configure --section storage
Default Agent Workspaces
When a local agent run has no resolved project/session workspace, Paperclip falls back to an agent home workspace under the instance root:
~/.paperclip/instances/default/workspaces/<agent-id>
This path honors PAPERCLIP_HOME and PAPERCLIP_INSTANCE_ID in non-default setups.
For codex_local, Paperclip also manages a per-company Codex home under the instance root and seeds it from the shared Codex login/config home ($CODEX_HOME or ~/.codex):
~/.paperclip/instances/default/companies/<company-id>/codex-home
If the codex CLI is not installed or not on PATH, codex_local agent runs fail at execution time with a clear adapter error. Quota polling uses a short-lived codex app-server subprocess: when codex cannot be spawned, that provider reports ok: false in aggregated quota results and the API server keeps running (it must not exit on a missing binary).
Worktree-local Instances
When developing from multiple git worktrees, do not point two Paperclip servers at the same embedded PostgreSQL data directory.
Instead, create a repo-local Paperclip config plus an isolated instance for the worktree:
paperclipai worktree init
# or create the git worktree and initialize it in one step:
pnpm paperclipai worktree:make paperclip-pr-432
This command:
- writes repo-local files at
.paperclip/config.jsonand.paperclip/.env - creates an isolated instance under
~/.paperclip-worktrees/instances/<worktree-id>/ - when run inside a linked git worktree, mirrors the effective git hooks into that worktree's private git dir
- picks a free app port and embedded PostgreSQL port
- by default seeds the isolated DB in
minimalmode from the current effective Paperclip instance/config (repo-local worktree config when present, otherwise the default instance) via a logical SQL snapshot
Seed modes:
minimalkeeps core app state like companies, projects, issues, comments, approvals, and auth state, preserves schema for all tables, but omits row data from heavy operational history such as heartbeat runs, wake requests, activity logs, runtime services, and agent session statefullmakes a full logical clone of the source instance--no-seedcreates an empty isolated instance
Seeded worktree instances quarantine copied live execution by default for both minimal and full seeds. During restore, Paperclip disables copied agent timer heartbeats, resets copied running agents to idle, blocks and unassigns copied agent-owned in_progress issues, and unassigns copied agent-owned todo/in_review issues. This keeps a freshly booted worktree from starting agents for work already owned by the source instance. Pass --preserve-live-work only when you intentionally want the isolated worktree to resume copied assignments.
After worktree init, both the server and the CLI auto-load the repo-local .paperclip/.env when run inside that worktree, so normal commands like pnpm dev, paperclipai doctor, and paperclipai db:backup stay scoped to the worktree instance.
pnpm dev now fails fast in a linked git worktree when .paperclip/.env is missing, instead of silently booting against the default instance/port. If that happens, run paperclipai worktree init in the worktree first.
Provisioned git worktrees also pause seeded routines that still have enabled schedule triggers in the isolated worktree database by default. This prevents copied daily/cron routines from firing unexpectedly inside the new workspace instance during development without disabling webhook/API-only routines.
That repo-local env also sets:
PAPERCLIP_IN_WORKTREE=truePAPERCLIP_WORKTREE_NAME=<worktree-name>PAPERCLIP_WORKTREE_COLOR=<hex-color>
The server/UI use those values for worktree-specific branding such as the top banner and dynamically colored favicon.
Authenticated worktree servers also use the PAPERCLIP_INSTANCE_ID value to scope Better Auth cookie names.
Browser cookies are shared by host rather than port, so this prevents logging into one 127.0.0.1:<port> worktree from replacing another worktree server's session cookie.
Print shell exports explicitly when needed:
paperclipai worktree env
# or:
eval "$(paperclipai worktree env)"
Worktree CLI Reference
pnpm paperclipai worktree init [options] — Create repo-local config/env and an isolated instance for the current worktree.
| Option | Description |
|---|---|
--name <name> |
Display name used to derive the instance id |
--instance <id> |
Explicit isolated instance id |
--home <path> |
Home root for worktree instances (default: ~/.paperclip-worktrees) |
--from-config <path> |
Source config.json to seed from |
--from-data-dir <path> |
Source PAPERCLIP_HOME used when deriving the source config |
--from-instance <id> |
Source instance id (default: default) |
--server-port <port> |
Preferred server port |
--db-port <port> |
Preferred embedded Postgres port |
--seed-mode <mode> |
Seed profile: minimal or full (default: minimal) |
--no-seed |
Skip database seeding from the source instance |
--force |
Replace existing repo-local config and isolated instance data |
Examples:
paperclipai worktree init --no-seed
paperclipai worktree init --seed-mode full
paperclipai worktree init --from-instance default
paperclipai worktree init --from-data-dir ~/.paperclip
paperclipai worktree init --force
Repair an already-created repo-managed worktree and reseed its isolated instance from the main default install:
cd /path/to/paperclip/.paperclip/worktrees/PAP-884-ai-commits-component
pnpm paperclipai worktree init --force --seed-mode minimal \
--name PAP-884-ai-commits-component \
--from-config ~/.paperclip/instances/default/config.json
That rewrites the worktree-local .paperclip/config.json + .paperclip/.env, recreates the isolated instance under ~/.paperclip-worktrees/instances/<worktree-id>/, and preserves the git worktree contents themselves.
For an already-created worktree where you want the CLI to decide whether to rebuild missing worktree metadata or just reseed the isolated DB, use worktree repair.
pnpm paperclipai worktree repair [options] — Repair the current linked worktree by default, or create/repair a named linked worktree under .paperclip/worktrees/ when --branch is provided. The command never targets the primary checkout unless you explicitly pass --branch.
| Option | Description |
|---|---|
--branch <name> |
Existing branch/worktree selector to repair, or a branch name to create under .paperclip/worktrees |
--home <path> |
Home root for worktree instances (default: ~/.paperclip-worktrees) |
--from-config <path> |
Source config.json to seed from |
--from-data-dir <path> |
Source PAPERCLIP_HOME used when deriving the source config |
--from-instance <id> |
Source instance id when deriving the source config (default: default) |
--seed-mode <mode> |
Seed profile: minimal or full (default: minimal) |
--no-seed |
Repair metadata only when bootstrapping a missing worktree config |
--allow-live-target |
Override the guard that requires the target worktree DB to be stopped first |
Examples:
# From inside a linked worktree, rebuild missing .paperclip metadata and reseed it from the default instance.
cd /path/to/paperclip/.paperclip/worktrees/PAP-1132-assistant-ui-pap-1131-make-issues-comments-be-like-a-chat
pnpm paperclipai worktree repair
# From the primary checkout, create or repair a linked worktree for a branch under .paperclip/worktrees/.
cd /path/to/paperclip
pnpm paperclipai worktree repair --branch PAP-1132-assistant-ui-pap-1131-make-issues-comments-be-like-a-chat
For an already-created worktree where you want to keep the existing repo-local config/env and only overwrite the isolated database, use worktree reseed instead. Stop the target worktree's Paperclip server first so the command can replace the DB safely.
pnpm paperclipai worktree reseed [options] — Re-seed an existing worktree-local instance from another Paperclip instance or worktree while preserving the target worktree's current config, ports, and instance identity.
| Option | Description |
|---|---|
--from <worktree> |
Source worktree path, directory name, branch name, or current |
--to <worktree> |
Target worktree path, directory name, branch name, or current (defaults to current) |
--from-config <path> |
Source config.json to seed from |
--from-data-dir <path> |
Source PAPERCLIP_HOME used when deriving the source config |
--from-instance <id> |
Source instance id when deriving the source config |
--seed-mode <mode> |
Seed profile: minimal or full (default: full) |
--yes |
Skip the destructive confirmation prompt |
--allow-live-target |
Override the guard that requires the target worktree DB to be stopped first |
Examples:
# From the main repo, reseed a worktree from the current default/master instance.
cd /path/to/paperclip
pnpm paperclipai worktree reseed \
--from current \
--to PAP-1132-assistant-ui-pap-1131-make-issues-comments-be-like-a-chat \
--seed-mode full \
--yes
# From inside a worktree, reseed it from the default instance config.
cd /path/to/paperclip/.paperclip/worktrees/PAP-1132-assistant-ui-pap-1131-make-issues-comments-be-like-a-chat
pnpm paperclipai worktree reseed \
--from-instance default \
--seed-mode full
pnpm paperclipai worktree:make <name> [options] — Create ~/NAME as a git worktree, then initialize an isolated Paperclip instance inside it. This combines git worktree add with worktree init in a single step.
| Option | Description |
|---|---|
--start-point <ref> |
Remote ref to base the new branch on (e.g. origin/main) |
--instance <id> |
Explicit isolated instance id |
--home <path> |
Home root for worktree instances (default: ~/.paperclip-worktrees) |
--from-config <path> |
Source config.json to seed from |
--from-data-dir <path> |
Source PAPERCLIP_HOME used when deriving the source config |
--from-instance <id> |
Source instance id (default: default) |
--server-port <port> |
Preferred server port |
--db-port <port> |
Preferred embedded Postgres port |
--seed-mode <mode> |
Seed profile: minimal or full (default: minimal) |
--no-seed |
Skip database seeding from the source instance |
--force |
Replace existing repo-local config and isolated instance data |
Examples:
pnpm paperclipai worktree:make paperclip-pr-432
pnpm paperclipai worktree:make my-feature --start-point origin/main
pnpm paperclipai worktree:make experiment --no-seed
pnpm paperclipai worktree env [options] — Print shell exports for the current worktree-local Paperclip instance.
| Option | Description |
|---|---|
-c, --config <path> |
Path to config file |
--json |
Print JSON instead of shell exports |
Examples:
pnpm paperclipai worktree env
pnpm paperclipai worktree env --json
eval "$(pnpm paperclipai worktree env)"
For project execution worktrees, Paperclip can also run a project-defined provision command after it creates or reuses an isolated git worktree. Configure this on the project's execution workspace policy (workspaceStrategy.provisionCommand). The command runs inside the derived worktree and receives PAPERCLIP_WORKSPACE_*, PAPERCLIP_PROJECT_ID, PAPERCLIP_AGENT_ID, and PAPERCLIP_ISSUE_* environment variables so each repo can bootstrap itself however it wants.
Quick Health Checks
In another terminal:
curl http://localhost:3100/api/health
curl http://localhost:3100/api/companies
Expected:
/api/healthreturns{"status":"ok"}/api/companiesreturns a JSON array
Reset Local Dev Database
To wipe local dev data and start fresh:
rm -rf ~/.paperclip/instances/default/db
pnpm dev
Optional: Use External Postgres
If you set DATABASE_URL, the server will use that instead of embedded PostgreSQL.
Automatic DB Backups
Paperclip can run automatic DB backups on a timer. Defaults:
- enabled
- every 60 minutes
- retain 30 days
- backup dir:
~/.paperclip/instances/default/data/backups
Configure these in:
pnpm paperclipai configure --section database
Run a one-off backup manually:
pnpm paperclipai db:backup
# or:
pnpm db:backup
Environment overrides:
PAPERCLIP_DB_BACKUP_ENABLED=true|falsePAPERCLIP_DB_BACKUP_INTERVAL_MINUTES=<minutes>PAPERCLIP_DB_BACKUP_RETENTION_DAYS=<days>PAPERCLIP_DB_BACKUP_DIR=/absolute/or/~/path
Secrets in Dev
Agent env vars now support secret references. By default, secret values are stored with local encryption and only secret refs are persisted in agent config.
- Default local key path:
~/.paperclip/instances/default/secrets/master.key - Override key material directly:
PAPERCLIP_SECRETS_MASTER_KEY - Override key file path:
PAPERCLIP_SECRETS_MASTER_KEY_FILE
Strict mode (recommended outside local trusted machines):
PAPERCLIP_SECRETS_STRICT_MODE=true
When strict mode is enabled, sensitive env keys (for example *_API_KEY, *_TOKEN, *_SECRET) must use secret references instead of inline plain values.
CLI configuration support:
pnpm paperclipai onboardwrites a defaultsecretsconfig section (local_encrypted, strict mode off, key file path set) and creates a local key file when needed.pnpm paperclipai configure --section secretslets you update provider/strict mode/key path and creates the local key file when needed.pnpm paperclipai doctorvalidates secrets adapter configuration and can create a missing local key file with--repair.
Migration helper for existing inline env secrets:
pnpm secrets:migrate-inline-env # dry run
pnpm secrets:migrate-inline-env --apply # apply migration
Company Deletion Toggle
Company deletion is intended as a dev/debug capability and can be disabled at runtime:
PAPERCLIP_ENABLE_COMPANY_DELETION=false
Default behavior:
local_trusted: enabledauthenticated: disabled
CLI Client Operations
Paperclip CLI now includes client-side control-plane commands in addition to setup commands.
Quick examples:
pnpm paperclipai issue list --company-id <company-id>
pnpm paperclipai issue create --company-id <company-id> --title "Investigate checkout conflict"
pnpm paperclipai issue update <issue-id> --status in_progress --comment "Started triage"
Set defaults once with context profiles:
pnpm paperclipai context set --api-base http://localhost:3100 --company-id <company-id>
Then run commands without repeating flags:
pnpm paperclipai issue list
pnpm paperclipai dashboard get
See full command reference in doc/CLI.md.
OpenClaw Invite Onboarding Endpoints
Agent-oriented invite onboarding now exposes machine-readable API docs:
GET /api/invites/:tokenreturns invite summary plus onboarding and skills index links.GET /api/invites/:token/onboardingreturns onboarding manifest details (registration endpoint, claim endpoint template, skill install hints).GET /api/invites/:token/onboarding.txtreturns a plain-text onboarding doc intended for both human operators and agents (llm.txt-style handoff), including optional inviter message and suggested network host candidates.GET /api/skills/indexlists available skill documents.GET /api/skills/paperclipreturns the Paperclip heartbeat skill markdown.
OpenClaw Join Smoke Test
Run the end-to-end OpenClaw join smoke harness:
pnpm smoke:openclaw-join
What it validates:
- invite creation for agent-only join
- agent join request using
adapterType=openclaw - board approval + one-time API key claim semantics
- callback delivery on wakeup to a dockerized OpenClaw-style webhook receiver
Required permissions:
- This script performs board-governed actions (create invite, approve join, wakeup another agent).
- In authenticated mode, run with board auth via
PAPERCLIP_AUTH_HEADERorPAPERCLIP_COOKIE.
Optional auth flags (for authenticated mode):
PAPERCLIP_AUTH_HEADER(for exampleBearer ...)PAPERCLIP_COOKIE(session cookie header value)
OpenClaw Docker UI One-Command Script
To boot OpenClaw in Docker and print a host-browser dashboard URL in one command:
pnpm smoke:openclaw-docker-ui
This script lives at scripts/smoke/openclaw-docker-ui.sh and automates clone/build/config/start for Compose-based local OpenClaw UI testing.
Pairing behavior for this smoke script:
- default
OPENCLAW_DISABLE_DEVICE_AUTH=1(no Control UI pairing prompt for local smoke; no extra pairing env vars required) - set
OPENCLAW_DISABLE_DEVICE_AUTH=0to require standard device pairing
Model behavior for this smoke script:
- defaults to OpenAI models (
openai/gpt-5.2+ OpenAI fallback) so it does not require Anthropic auth by default
State behavior for this smoke script:
- defaults to isolated config dir
~/.openclaw-paperclip-smoke - resets smoke agent state each run by default (
OPENCLAW_RESET_STATE=1) to avoid stale provider/auth drift
Networking behavior for this smoke script:
- auto-detects and prints a Paperclip host URL reachable from inside OpenClaw Docker
- default container-side host alias is
host.docker.internal(override withPAPERCLIP_HOST_FROM_CONTAINER/PAPERCLIP_HOST_PORT) - if Paperclip rejects container hostnames in authenticated/private mode, allow
host.docker.internalviapnpm paperclipai allowed-hostname host.docker.internaland restart Paperclip