TonioandClaude Opus 5.5
8ea240218d
## Thinking Path > - Paperclip is the open source app people use to manage AI agents for work. > - The agent page is where an operator reads and changes one agent. > - The page grew one tab at a time. Ten tabs sit in one flat list, the header holds many buttons, and the audit links leave the agent. > - A design pass, called Refine-v2, made a calmer layout for this page. It ran in a prototype on fixture data only. > - This pull request moves the Refine-v2 layout and behavior into the live agent page. Where the prototype and the live page differ, the live behavior stays. For example, the floating save bar stays on screen. > - The benefit is a shorter navigation, edits in place, and audit data that stays inside the agent. ## Linked Issues or Issue Description Refs #13716 Refs #9166 Both pull requests mount plugin tabs or slots on the agent page. They touch the same files, so one of the three needs a rebase after the others merge. **Subsystem affected** The agent detail page in `ui/` (`ui/src/pages/AgentDetail.tsx`, its sidebar, header actions, and the shared agent config form). **Problem or motivation** The agent page is hard to scan. The navigation shows ten items in one list. The header shows Run now, Pause, Clear error, and Assign task as separate buttons. The name, title, and manager are form fields deep in the Harness tab. Activity, Runs, Costs, and Budgets open company-wide pages, so the operator loses the agent context. Each tab uses a different card and table style. **Proposed solution** Use one layout system for every agent tab. Group the navigation into Agent and Audit. Edit the name and title in the header. Move the work actions into the actions menu. Show audit views inside the agent. Keep the persistent save bar and add a status dot to it. **Alternatives considered** We considered a flag that lets operators opt in to the new layout. We did not use a flag, because two layouts on one page double the test surface. We also considered moving the save button to the end of the scrolling content, as the prototype did. We kept the floating save bar, because it is always visible. **Roadmap alignment** `ROADMAP.md` has no item for the agent page. This change is a UI refinement of an existing page. It adds one optional field to an existing API request and no database schema change. ## What Changed - **Navigation.** The agent sidebar shows two groups. Agent has Overview, Identity, Harness / Runtime, Secrets & variables, Permissions / Trust, and Advanced. Audit has Activity, Runs, Costs, and Budgets. Skills, Tools, Channels, and API Keys leave the navigation. Their URLs still open. The Instructions tab is now Identity, at `/identity`. The old `/instructions` URL redirects. - **Header.** The agent character shows at a larger size. The name and title edit in place. Enter or blur saves. Escape cancels. An error restores the old value. A rename updates the URL. While a tab has unsaved changes, the header refuses the edit and asks the operator to save or discard first. The third line shows the title and a link to the manager. A crown button to the right of the name replaces the "Set as my primary" link and the separate primary indicator. It is outlined and dimmed until the agent is your primary, then fills with a short pop. Replacing an existing primary asks for confirmation first, and the pop plays after the dialog closes. Reduced motion skips the pop. Run now, Pause or Resume, Clear error, and Agent history move into the actions menu. Assign task is the primary button. For an agent that still needs setup, Finish setup is the primary button and Assign task moves into the menu. - **Agent history.** A new dialog in the actions menu replaces the Revisions entry. Each row shows a plain-language summary, the person or agent who made the change, the date, and Restore. Restore asks for confirmation. A failed restore shows its reason inside the confirmation. - **Overview.** Four metric tiles show activity this week, runs this week, costs this month, and budget used. Each tile links to its audit view. When the list behind a count is capped, the tile shows a lower bound, for example 200+. The activity tile follows live updates. Profile, Skills, and Recent tasks panels follow. The Profile panel lists direct reports under their label in at most two rows, then a "+N more" button that expands the list. The Latest run card is removed. - **Identity.** The file preview shows the raw text. A pencil button switches to a plain text editor. Copy and Delete are icon buttons. A chip next to the file name says "Managed by you" or "Managed externally". Per-file history and unsaved edits stay. - **External instructions.** "Advanced settings" opens Root path and Entry file fields and a Load profile button. Load profile asks the server to switch only if the root directory and the entry file already exist. If either is missing, the server refuses and the panel shows the reason. The entry file can have any name inside the root. - **Instructions bundle API.** `PATCH /agents/:id/instructions-bundle` accepts an optional `requireExistingEntry` flag (`packages/shared` validator, `server` service, `ui` client). With the flag, the server checks the root directory and entry file before it creates or copies anything. Without the flag, the behavior does not change. - **Harness / Runtime.** The config form gets a `panels` layout: Harness and Execution side by side, then the runtime test, then environment variables. The identity and run-policy sections are hidden from this tab. - **Secrets & variables and Advanced.** These tabs use the same filled panels and table headers. - **Permissions / Trust.** The trust presets show as selectable cards. An Allowed connectors panel shows up to three connector logos and links to Apps, filtered to installed connectors. Capabilities sit in their own panel. Changes on this tab save at once, with no save bar. - **Audit inside the agent.** Activity, Runs, Costs, and Budgets render inside the agent page. Runs is locked to the current agent. A failed budget incident action shows its reason under the incident. - **Save bar.** The floating save bar stays. It shows an amber dot for unsaved changes and a green dot with "Changes saved" after a save. Discard stays. - **Leave guard.** If the form has unsaved changes and the operator clicks a link, a dialog asks to keep editing or discard the changes. Browser back and the header actions keep the native confirm. - **Apps.** `/apps?source=installed` opens the Apps page on the Installed filter. - **Tokens.** New `--agent-detail-*` tokens in `ui/src/index.css` hold every spacing and fill value. Each fill is a mix of foreground into background, so one value works in light and dark themes. - **Tests and maps.** Tests cover the navigation model, sidebar, header menu, Overview layout, Identity editor, and helpers. The agent-configuration recipe in `maps/feature-map/agents.md` describes the new page. ## Verification - `cd ui && npx vitest run`: 849 test files and 10,081 tests pass. - `cd server && npx vitest run src/__tests__/agent-instructions-routes.test.ts src/__tests__/agent-instructions-service.test.ts`: 40 tests pass. - `npx playwright test --config tests/e2e/playwright.config.ts tests/e2e/onboarding.spec.ts tests/e2e/chat-adapters-ui-providers.spec.ts`: 26 tests pass. - `cd ui && pnpm typecheck` passes. This includes the Storybook catalog check. The `server` and `packages/shared` typechecks pass. - `cd ui && pnpm build` passes. - `pnpm run check:token-gates` reports all gates clean. - `node scripts/check-maps.mjs` and `node scripts/storybook-catalog.mjs --check` pass. - Manual check on a local instance, in light and dark themes: 1. Open an agent. Confirm the sidebar shows the Agent and Audit groups. 2. Click the agent name in the header. Type a new name and press Enter. Confirm the URL changes. Rename it back. 3. Open the actions menu. Open Agent history. Confirm the rows and the Restore confirmation. 4. Open Identity. Click the pencil. Change a line. Confirm the save bar shows the amber dot. Click a sidebar link. Confirm the discard dialog. Click Keep editing, then save. Confirm the green dot. 5. Open Harness / Runtime, Secrets & variables, and Permissions / Trust. Confirm the panels and the trust cards. 6. Open Runs under Audit. Confirm the list shows only this agent and the page stays inside the agent. ## Risks - This changes a high-traffic page for every operator at once. There is no flag to switch back. - Run policy and Reports to are no longer editable on the agent page. The header shows the manager as a link only. - Skills, Tools, Channels, and API Keys are reachable by URL only. Operators who use them from the sidebar must use the URL. - The pull request conflicts with #13716 and #9166 in `AgentDetail.tsx` and the agent sidebar. - Storybook stories for the agent page and `DESIGN.md` are not updated in this pull request. - The new `requireExistingEntry` flag is opt-in. Existing API callers keep the old behavior, which creates a missing external directory and entry file. - I ran two e2e spec files locally, not the full `pnpm test:e2e` or `pnpm test:release-smoke`. CI runs the full e2e suite. I did not run the repo-wide `pnpm -r typecheck`, because the local toolchain has no Rust. > 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 - Anthropic Claude Opus 5.5 (`claude-opus-5-5`), in Claude Code, with reasoning and tool use (shell, file edits, and a browser for visual checks). A person directed every design decision. ## 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 🤖 Generated with [Claude Code](https://claude.com/claude-code) --------- Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
Paperclip feature map
Start here when reproducing a user-facing bug, verifying a change, or deciding which surfaces a fix must cover. Each recipe describes what a person can do, where they can do it, the expected result, and the evidence needed to verify it. Product behavior is still governed by the implementation spec.
The sibling agent access map records APIs, agent entry points and permission boundaries for the same capability IDs. Follow the shared map contract when maintaining either map.
The chat scenario catalog describes how people might request these capabilities in conversation, including setup and permission branches. These are planned Product E2E journeys, not live coverage results.
IDs and references
Use the existing IDs in issues, PRs, Storybook annotations, tests, and verification evidence:
| Reference | Example | Defined by |
|---|---|---|
| Feature ID | onboarding |
The recipe filename without .md. |
| Capability ID | onboarding/company |
The feature ID plus a key from its Sub-features list, separated by /. |
| Entry-point reference | onboarding.md#web-wizard | The recipe filename plus its entry-point heading. The local entry-point ID is web-wizard. |
For example, report verifying onboarding/company through web-wizard.
Capabilities describe behavior; entry points identify the surface used to exercise
it. Entry-point IDs are separate from generated capability IDs. Both maps and
Storybook use the same full capability IDs. Each child page states its feature
ID; recipe bullets show the full capability ID beside the local key, and access
companions show it beneath the local heading. Local keys remain unchanged for
parsing and existing anchors.
Keep recipe filenames, sub-feature keys, and entry-point keys stable when changing display titles or navigation. Renaming a filename or key changes its references. The section headings below are navigation labels, not additional IDs.
Browse features
Use this index to open a recipe or copy its feature and full capability IDs.
Getting started and access
| Feature ID | Recipe | Capability IDs |
|---|---|---|
onboarding |
Onboarding and first work | onboarding/instance, onboarding/company, onboarding/adapter, onboarding/first-task, onboarding/resume |
access |
Login, invitations, and access | access/login, access/invitations, access/membership, access/resources, access/cli-auth |
companies |
Companies and portability | companies/selection, companies/identity, companies/decision-models, companies/prompt-injection-prevention, companies/fast-responses, companies/agent-observability, companies/archive, companies/portability |
Tasks and conversations
| Feature ID | Recipe | Capability IDs |
|---|---|---|
tasks |
Task creation and lifecycle | tasks/create, tasks/organize, tasks/properties, tasks/discussion, tasks/completion, tasks/privacy |
task-coordination |
Delegation, dependencies, and signoff | task-coordination/delegation, task-coordination/dependencies, task-coordination/signoff, task-coordination/tree-control |
inbox-search |
Inbox, decisions, and search | inbox-search/views, inbox-search/triage, inbox-search/decisions, inbox-search/search, inbox-search/toasts |
agent-chat |
Agent conversations and project handoff | agent-chat/discovery, agent-chat/history, agent-chat/handoff, agent-chat/conference-room |
questions-and-approvals |
Questions and approvals | questions-and-approvals/questions, questions-and-approvals/dismiss-and-reopen, questions-and-approvals/confirmations, questions-and-approvals/plan-review, questions-and-approvals/audience, questions-and-approvals/governance, questions-and-approvals/tool-review, questions-and-approvals/continuation |
steering |
Steering and queued messages | steering/queue, steering/edit-order-discard, steering/steer, steering/interrupt, steering/stop-and-pause, steering/drafts, steering/approval-queue |
documents-artifacts |
Documents, attachments, and work products | documents-artifacts/documents, documents-artifacts/annotations, documents-artifacts/attachments, documents-artifacts/work-products, documents-artifacts/library |
Agents and reusable capabilities
| Feature ID | Recipe | Capability IDs |
|---|---|---|
agents |
Hiring, configuration, and organization | agents/hire, agents/grok-bot, agents/instructions, agents/organization, agents/primary-agent, agents/lifecycle, agents/built-in, agents/api-keys, agents/managed-agent-setup |
runs-adapters |
Runs, harnesses, and model accounts | runs-adapters/availability, runs-adapters/validation, runs-adapters/runs, runs-adapters/session |
skills |
Skills and Skill Studio | skills/discovery, skills/authoring, skills/versions, skills/policy, skills/testing |
teams |
Team packages and installation | teams/discovery, teams/preview, teams/install, teams/configuration |
Projects and execution
| Feature ID | Recipe | Capability IDs |
|---|---|---|
projects |
Projects and repositories | projects/lifecycle, projects/task-context, projects/repositories, projects/defaults, projects/privacy |
goals |
Goals and work alignment | goals/hierarchy, goals/alignment, goals/navigation |
workspaces |
Workspaces, services, and files | workspaces/binding, workspaces/provisioning, workspaces/services, workspaces/files-git, workspaces/closure |
execution-environments |
Execution environments | execution-environments/configuration, execution-environments/capabilities, execution-environments/probe, execution-environments/assignment, execution-environments/images |
recovery |
Recovery | recovery/diagnosis, recovery/bounded-continuation, recovery/source-action, recovery/exhaustion, recovery/workspace, recovery/unknown-outcome, recovery/user-continuation, recovery/reconnect |
Apps, channels, and extensions
| Feature ID | Recipe | Capability IDs |
|---|---|---|
connection-setup |
Connection setup | connection-setup/catalog, connection-setup/identity-and-access, connection-setup/credentials, connection-setup/handoff, connection-setup/draft-recovery, connection-setup/task-request, connection-setup/channel-setup, connection-setup/failure |
assistant-connections |
Assistant connections (MCP) | assistant-connections/setup, assistant-connections/consent, assistant-connections/device-login, assistant-connections/client-use, assistant-connections/revocation |
app-permissions |
App access and action permissions | app-permissions/agent-access, app-permissions/action-policy, app-permissions/catalog-change, app-permissions/test-action, app-permissions/account-maintenance |
chat-channels |
External chat and email | chat-channels/providers, chat-channels/identity, chat-channels/conversation, chat-channels/attachments, chat-channels/lifecycle, chat-channels/outbound-email |
gateways-profiles |
Tool gateways and access profiles | gateways-profiles/gateway, gateways-profiles/profiles, gateways-profiles/client-connect, gateways-profiles/tokens, gateways-profiles/activity |
secrets |
Secrets and proposals | secrets/company-secrets, secrets/user-secrets, secrets/proposals, secrets/vault-import, secrets/runtime-delivery |
plugins |
Plugins | plugins/installation, plugins/configuration, plugins/contributions, plugins/lifecycle |
Automation and structured work
| Feature ID | Recipe | Capability IDs |
|---|---|---|
routines |
Routines, schedules, and triggers | routines/definition, routines/triggers, routines/run-now, routines/history, routines/management |
cases |
Cases | cases/browse, cases/structure, cases/history, cases/task-links, cases/handoffs |
status-cards |
Status cards | status-cards/authoring, status-cards/generation, status-cards/inspection, status-cards/archive |
Oversight and operation
| Feature ID | Recipe | Capability IDs |
|---|---|---|
budgets-costs |
Costs and budgets | budgets-costs/cost-reporting, budgets-costs/budgets, budgets-costs/incidents, budgets-costs/resolution, budgets-costs/subscriptions, budgets-costs/accounting-recovery |
activity |
Dashboards and audit trails | activity/overview, activity/activity, activity/runs, activity/routine-audit, activity/timeline, activity/agent-commentary |
navigation-preferences |
Navigation, profile, and announcements | navigation-preferences/navigation, navigation-preferences/preferences, navigation-preferences/profile, navigation-preferences/announcements, navigation-preferences/fallbacks, navigation-preferences/command-palette |
instance-operations |
Instance operations | instance-operations/install-update, instance-operations/server-service, instance-operations/configuration, instance-operations/diagnostics, instance-operations/backup, instance-operations/runtime-setup |
cli-operations |
CLI/API and local worktrees | cli-operations/context, cli-operations/domain-commands, cli-operations/outputs, cli-operations/run-controls, cli-operations/worktree-instances, cli-operations/feedback-export |
Contributor surfaces
| Feature ID | Recipe | Capability IDs |
|---|---|---|
developer-labs |
Developer previews and diagnostic labs | developer-labs/design, developer-labs/interaction-labs, developer-labs/performance, developer-labs/route-gates |
Open the published Storybook guide for the assembled feature and capability index. The Markdown recipes in this directory are the authored source. Each has a same-named agent-access companion.
Run node scripts/storybook-catalog.mjs to generate local navigation in
maps/generated/feature-map.md, maps/generated/agent-access-map.md, and the
Storybook guide. Recipes are discovered automatically from their navigation
metadata; generation does not depend on this high-level index.
Before driving a journey
- Use this checkout's isolated test drive for manual product checks. It creates a temporary instance and prints its URL and data directory. Do not guess that a server on port 3100 belongs to you.
- Record the commit, URL, company, login role, relevant experimental settings, adapter, runtime mode, and live versus simulated dependencies. Use disposable tasks and provider resources. A fresh test drive creates a company and CEO, but no task or first run.
- Use the current navigation and company prefix. Paths in recipes omit that prefix. Record whether the streamlined or production shell is selected; Agent Chat, chat connectors, and the combined Inbox/Tasks view have separate gates. A hidden surface is an unmet prerequisite, not a successful test.
- Run the smallest relevant test first. Vitest commands below run from the repository root after installing dependencies. Playwright recipes use their named configuration and its isolated environment, not an unrelated running instance. Reserve expensive runner/provider tests for the behavior at issue.
- Exercise the actual user action, inspect its result, reload, and verify the persisted state or continuation. Use read-only API checks to corroborate UI evidence; creating state through the API does not prove the creation UI.
For agent-driven acceptance work, start with the Paperclip verification skill for an isolated launch, ownership/readiness checks, browser driving, evidence, and cleanup. It uses this directory as its feature map. The existing dev-workspace run/verify skill and evaluation skill describe runtime ownership and evidence handling. Reuse them; this map introduces no environment launcher, credentials, scheduled job, or second test framework.
Evidence contract
Report each entry point as passed, failed, blocked (with its missing
prerequisite), or not run. Include the feature ID, full capability IDs and
entry-point ID (for example, onboarding/company through web-wizard), plus the
recipe link, commit/environment, user action, expected and observed result,
command/exit code, and evidence links. Screenshots or traces should show both the
action and the discriminating result. Include task/run/request IDs when relevant,
without secrets.
A fix is verified across its affected surfaces only when each has evidence or an explicit reason it does not apply. Shared code alone does not prove parity. Keep product regressions visible; do not change the recipe to bless a failure. For Paperclip-assigned work, attach evidence through the artifact workflow.
Inventory and remaining depth
The generated maps/generated/coverage.json lists the current non-test TSX page
modules and the recipes that directly reference each one. An unreferenced module
is a documentation candidate, not proof that its feature is absent or untested.
Remaining workflow limits live in each recipe. Inventory and example associations
describe documentation scope, not runtime health.
Maintaining the reference
The map documents user journeys. It does not execute them automatically; generated inventories record documentation scope rather than live test health. Product E2E reports reuse these capability IDs through the journey associations. Their coverage view shows which scenarios in a campaign are linked to each capability and the associated test results. An association or passing scenario does not certify the whole capability; unselected and unmapped journeys remain distinct.
When maintaining a recipe, compare its entry points and expected results with
the current source. Check that linked tests still exercise the stated behavior
and that local references still exist. Keep the same-named agent access companion
and stable sub-feature IDs aligned when behavior or access changes. Source-only
access inventory remains distinct from live verification. Run
node scripts/check-maps.mjs after map edits for structural/reference checks;
follow the shared contract for the source and behavioral checks it cannot perform.
Each recipe starts with a small frontmatter navigation record, then an H1:
---
navigation: {"section":"Tasks and conversations","sectionOrder":20,"order":10}
---
The H1 supplies the feature title, and the first paragraph supplies its summary. Orders are local to the section; leave gaps for additions. Equal orders use the stable filename as a tie-breaker. Keep a section's name/order consistent across its recipes. Discovery uses the recipe and companion; keep the readable ID index above aligned when features or capability IDs change.
Optional ### Storybook verification guidance lives inside the recipe's Gotchas
section. Each level-four heading contains a backtick-quoted capability key and
has Scope (ui, cli, or browser),
Storybook, Production, and Sources fields. These are verification instructions
and intentional scope limits, not run results or a required story for every API.
The generated gap report combines this guidance with current story associations.
After frontmatter, each recipe starts with an H1 and a user-visible description, then exactly:
- Sub-features — stable backticked local keys, full capability IDs, and observable behavior/states,
such as
- `company`: `onboarding/company` — create a company. - How to get to it (user POV) — one H3 backticked entry-point ID per surface.
- Driving it with — starts with
Preconditions:; repeat each entry-point H3, withAutomated:andManual:paragraphs. Name test scope and gaps honestly. - Gotchas — misleading look-alikes, feature gates, and invalid evidence.
New or updated entries follow
Poteto's feature-map examples.
Existing entries with a Driving it heading can adopt the named harness when
their recipes are updated. The original format was inspired by
Omnigent's feature map.
Paperclip's recipes and checks follow its own task model and test infrastructure.