7b9334cd10
## Thinking Path > - Paperclip helps people manage AI agents and their work. > - People need consistent UI patterns to review and control that work. > - The current board uses related layouts and controls with different spacing, type, and behavior. > - That drift makes it hard for a designer or an agent to build a new page from a reliable reference. > - Storybook can show the shared patterns and the states they need to support. > - This pull request adds design proposals, a local sandbox, and reusable UI controls so people can compare the patterns in context. > - The benefit is a clearer design system that agents can use to build consistent UI. ## Linked Issues or Issue Description **Subsystem affected** `ui/` — React board UI and Storybook. **Problem or motivation** Board pages repeat visual and interaction decisions. Storybook did not provide a complete reference for task views, conversation states, typography, toolbars, tabs, and light/dark colors. People could not compare a proposed pattern with the running board in one place. **Proposed solution** Add a staged Design Proposals catalog with foundations, components, layouts, and page specimens. Add an opt-in sandbox. Reuse production components where possible. Include synthetic conversation states and shared controls so reviewers can compare and refine them. **Alternatives considered** Separate static mockups would not show keyboard behavior, responsive layout, or real component states. Rebuilding each page only in Storybook would allow the reference to drift from the board. **Roadmap alignment** This improves existing board UI and Skills Manager surfaces. It does not add a new control-plane capability. ## What Changed - Added dark and light color references, typography and conversation specimens, and component stories for buttons, tabs, toolbars, sidebar, popovers, activity, and task lists. - Added a local design sandbox with synthetic task conversation playback and representative states. - Shared collection toolbars and navigation patterns across task, agent, project, routine, skill, connector, and artifact pages. - Added the streamlined Skills tabs and a My Skills collection that uses the shared skill cards. - Restored saved-thread access during synthetic playback, kept connector searchbox semantics, and updated reproduction checks after moving trial stories. - Documented the proposed patterns and added focused UI, catalog, and browser checks. ## Verification - `pnpm check:token-gates`, `node scripts/check-maps.mjs`, and `node scripts/storybook-catalog.mjs --check` passed. - Full workspace `pnpm -r typecheck` and `pnpm build` passed after merging master. After the review fixes, focused UI typecheck, `pnpm build-storybook`, 23 Skills Sources tests, and all 15 Storybook typography browser tests passed. - Focused task-thread and system-notice suites passed: 251 tests. Connector Browse passed 84 tests; the connector, attachment, recovery, and Storybook flyout browser journeys passed locally. - A local full Vitest run hit one intermittent chat-channels integration failure; that test passed in isolation. GitHub CI [39347996059](https://github.com/paperclipai/paperclip/actions/runs/39347996059) passed on the exact latest commit: 55 successful checks and two skipped draft-only Storybook jobs. - Greptile reviewed the exact latest commit at 5/5 with no new comments or open review threads. GitHub reports the branch as cleanly mergeable. ## Risks - This PR changes 206 files and exceeds the repository's 100-file review target. Review by commit and consider a scoped split before merge. - Design Proposals are staged references. Fixture interactions do not prove API behavior, permissions, or provider execution. - UI changes to shared controls may affect pages outside the proposal sandbox. Focused browser checks and the full CI matrix passed. ## Model Used - OpenAI Codex, GPT-6 family. The exact runtime model ID and context window are not exposed in this session. The model used reasoning, code execution, browser inspection, and local tests. Earlier branch commits were also AI-assisted in this Codex conversation. ## 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 available in this session) - [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 where applicable - [x] I have either linked existing issues or described the issue in-PR following the relevant issue template - [x] I have not referenced internal or instance-local Paperclip issues or links - [x] My branch name describes the change and contains no internal ticket id - [x] I have run focused 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 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: Scott Tong <scott@scotts-mbp-m5-max.local> Co-authored-by: Paperclip <noreply@paperclip.ing>
9.2 KiB
navigation
| navigation | ||||||
|---|---|---|---|---|---|---|
|
Skills and Skill Studio
Operators discover or import skills, author and test them in Skill Studio, manage source versions, and decide which agents may use them.
Implementation: skill library, studio, sources, agent skills.
Agent access: companion.
Sub-features
discovery: browse installed/discover views and import a skill or source.authoring: create/edit a writable skill or fork a read-only source.versions: inspect revisions, source updates, diffs, and selected releases.policy: apply agent enablement and skill usage policy independently from installation.testing: run a bounded Studio test and inspect its result and interactions.
How to get to it (user POV)
library-sources
Open /skills, Discover, or /skills/sources; project import is available through the library’s import flow. In Streamlined UI, Installed, Discover and My Skills are route links styled as tabs beneath the toolbar, with no secondary navigation rail. Sources stays separate under New → Manage sources. Legacy UI retains the Skills sidebar.
studio
Use New skill or /skills/studio/:skillId; writable copies and source-backed originals differ. In Streamlined UI, /skills/studio uses the shared Skills toolbar and card collection with My Skills active and Recently updated sorting; opening a card enters Studio.
Direct authoring starts at /skills/studio/new: fill Name and Slug, then
Create skill. Authoring/save/reload requires no model credential; running a
Studio test is separate.
agent-enablement
Use skill policy/agent selection in the library or an agent’s Skills tab.
Driving it with Playwright and the Paperclip CLI
Preconditions: follow the baseline. Use a harmless skill fixture and test agent with skill support. Record whether the source is local, bundled, project, or remote.
library-sources
Automated: library UI and source service cover their respective layers.
Manual: Install a fixture, locate it in Installed, inspect its source and files, and reload. Import a source update and compare versions before accepting it. Check a source requiring unavailable repository access and verify the failure is explicit.
studio
Automated: Studio covers UI behavior; model-driven skill testing remains a separate manual result.
Manual: Create or fork a disposable skill, edit instructions, save, and reload. Run a bounded test, respond to any question, and inspect the output. Verify the saved version matches what was tested and failed saves retain the draft.
agent-enablement
Automated: policy service and agent skills state cover policy/state contracts.
The version-cache regression checks that listing assignments does not create repository caches, validate every support file, or extend cache use. Run preparation still restores and repairs the selected version. To check attachment, use a repository skill with a cold cache, add it to an agent, then reload the skill's Agents tab and the agent's Skills tab. Keep another repository skill set to Latest during this check. With beta version pins disabled, adding the new skill must preserve that Latest selection and save without a beta-pin error. The HTTP regression checks this round trip and retention of explicit historical pins.
Manual: Enable the skill for one test agent and leave another without access. Run a small task on each, inspect the available skill context, then change the release/policy and verify the next eligible run uses the intended version.
A Paperclip Runner run with no selected skills must proceed while another run holds the company skill-cache lock. A saved empty selection remains empty after later assignments. Selected skills and the legacy operational skill retain cache exclusion through version pinning. The configuration regression uses a real PostgreSQL lock; live provider latency remains a separate check.
Concurrent selected-skill preparations share one in-flight company inventory refresh before cache locking. Each run retains its own selection and durable version pins. The concurrency regression checks shared work and separate actor access; the cache tests check that cleanup cannot remove a snapshot before the run stores its pins.
Gotchas
-
The release picker requires
enableBetaSkills. Do not invent an Instructions accessibility label for the Studio body editor; inspect its current handles. -
Installed does not mean enabled for every agent.
-
Read-only GitHub/bundled skills may require a writable copy rather than an in-place edit.
-
Studio interaction coverage is in questions and approvals; a passing mock is not a live harness test.
-
Old version disk caches may expire; saved versions remain available. Verify a pinned version is restored through normal execution with upstream unavailable. Current and in-use versions stay materialized. See cleanup controls and the database-backed cache tests.
Project repository source behavior
New GitHub project repositories import skills automatically. Skills → Sources lists accessible legacy repositories with Import skills, shows each saved repository once with its access scope but without project names, and groups matching repository/ref workspaces. Additional legacy imports for an existing source live in its More menu. Import progress appears in the source metadata; Refresh and Automatic updates are also available. Verify future additions, retained exclusions, error recovery and reload persistence. Private-only sources must be absent for unrelated people/agents; access through either originating project is sufficient.
For an oversized repository, preview and import a skill that links to shared files outside its folder. Its saved version should include those files under the original repository paths. Missing references remain visible warnings and must not disable an otherwise valid skill's selection. Verify an existing source with cached dependency errors recovers on refresh without requiring a new upstream commit. A refresh that cannot preserve installed shared files retains the prior version.
Storybook/browser coverage uses scoped fixtures. Live GitHub-to-routine execution must be verified separately; inspect resolved version IDs across an upstream update.
Connection repair during an update
A missing tracked branch is a branch repair, not a credential failure. On an independent source, choose a new branch from the searchable list or enter its name. The repository's default branch is marked and included even outside the first 100 listed branches. Loading or a failed list request does not prevent manual entry; saving validates the requested ref. Installed identities, selections and version pins remain. Project-tracked branches are changed in project settings. A saved connection is validated against both the repository and tracked revision before repair succeeds.
Open Choose connection while a source is being refreshed. Select an authorized account and save. If the source changes, the dialog must retain that selection, load the current revision, and allow a second save without reopening. The project repository browser suite covers this recovery with simulated upstream data.
Storybook verification
testing
Scope: ui Storybook: Studio test inputs/configuration, running, question/approval, result and failed test states. Production: Run bounded test of actual saved version with correct selected account/environment; inspect persisted test detail and eligible interaction response. Sources: Source: SkillStudio.tsx, companySkills.ts. Tests: SkillStudio.test.tsx, company-skill-test-runs-service.test.ts
Documentation scope: Skills, Skill Studio, and teams
Main library/Studio/source/policy and CLI team-install paths are mapped. Full source-provider conflicts, harness sync, and remote package variants remain; catalog UI is not a current top-level route.
Installed skill updates and assignments can drive opt-in plugin runtime synchronization. Version pins remain effective. See contract and database coverage.